feat: disable source amount input when destinationTokenAmount is fixed #457
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,73 @@ | ||||||
| "use client"; | ||||||
|
|
||||||
| import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react"; | ||||||
| import { useAccountWallet } from "@b3dotfun/sdk/global-account/react"; | ||||||
| import { useState } from "react"; | ||||||
| import { parseUnits } from "viem"; | ||||||
| import { base } from "viem/chains"; | ||||||
|
|
||||||
| // USDC on Base (6 decimals) | ||||||
| const USDC_ADDRESS = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"; | ||||||
|
|
||||||
| export function FixedAmountDepositButton() { | ||||||
| const { address = "0x0000000000000000000000000000000000000000" } = useAccountWallet(); | ||||||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||||||
|
|
||||||
| const handleClose = () => setIsModalOpen(false); | ||||||
|
|
||||||
| const handleSuccess = (amount: string) => { | ||||||
| console.log(`Fixed amount deposit successful! Amount: ${amount}`); | ||||||
| handleClose(); | ||||||
| }; | ||||||
|
|
||||||
| // Fixed amount: 10 USDC (in wei/smallest unit) | ||||||
| const fixedAmount = parseUnits("10", 6).toString(); | ||||||
|
|
||||||
| return ( | ||||||
| <> | ||||||
| <button | ||||||
| onClick={() => setIsModalOpen(true)} | ||||||
| className="group flex h-40 w-full flex-col justify-between overflow-hidden rounded-lg border border-gray-100 bg-white p-6 text-left shadow-sm transition-all hover:border-green-100 hover:shadow-md" | ||||||
| > | ||||||
| <div> | ||||||
| <h3 className="text-lg font-medium text-gray-900">Fixed Amount Deposit</h3> | ||||||
| <p className="mt-1 text-sm text-gray-500">Deposit exactly 10 USDC with locked amount inputs</p> | ||||||
| </div> | ||||||
| <div className="flex items-center gap-2"> | ||||||
| <span className="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">Fixed Amount</span> | ||||||
| <span className="rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700">10 USDC</span> | ||||||
| </div> | ||||||
| </button> | ||||||
|
|
||||||
| {isModalOpen && ( | ||||||
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"> | ||||||
| <div className="relative w-full max-w-md overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-xl"> | ||||||
| {!address ? ( | ||||||
|
Contributor
There was a problem hiding this comment. Since
Suggested change
|
||||||
| <div className="relative p-6"> | ||||||
| <button onClick={handleClose} className="absolute right-4 top-4 text-gray-400 hover:text-gray-600"> | ||||||
| <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||||||
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> | ||||||
| </svg> | ||||||
| </button> | ||||||
| <div className="rounded-lg bg-yellow-50 p-4 text-center"> | ||||||
| <p className="text-yellow-800">Please sign in first to use the deposit feature.</p> | ||||||
| </div> | ||||||
| </div> | ||||||
| ) : ( | ||||||
| <AnySpendDeposit | ||||||
| mode="modal" | ||||||
| recipientAddress={address} | ||||||
| destinationTokenAddress={USDC_ADDRESS} | ||||||
| destinationTokenChainId={base.id} | ||||||
| destinationTokenAmount={fixedAmount} | ||||||
| onSuccess={handleSuccess} | ||||||
| onClose={handleClose} | ||||||
| allowDirectTransfer | ||||||
| /> | ||||||
| )} | ||||||
| </div> | ||||||
| </div> | ||||||
| )} | ||||||
| </> | ||||||
| ); | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Providing a default value for
addresshere makes it a truthy string (the zero address) even when no user is signed in. This causes the check!addresson line 126 to always evaluate tofalse, preventing the 'Please sign in' message from being displayed. A similar issue exists in the newFixedAmountDepositButtoncomponent. To fix this, the condition on line 126 should be changed to check for the zero address, for example:address === '0x0000000000000000000000000000000000000000'. It would be best to import and use theZERO_ADDRESSconstant for both the default value and the check.