-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor to common bridge components (amount, chain, fees)
- Loading branch information
Showing
6 changed files
with
150 additions
and
138 deletions.
There are no files selected for viewing
This file contains 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 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 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
17 changes: 17 additions & 0 deletions
17
packages/account-kit/src/steps/gas-tank/components/AmountInput.tsx
This file contains 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,17 @@ | ||
| export type AmountProps = { | ||
| amount: string | undefined; | ||
| setAmount: (amount: string) => void; | ||
| }; | ||
|
|
||
| export const AmountInput = ({ amount, setAmount }: AmountProps) => { | ||
| return ( | ||
| <input | ||
| className="w-full px-[16px] border border-neutral-300" | ||
| type="number" | ||
| value={amount} | ||
| onChange={(evt) => setAmount(evt.target.value)} | ||
| placeholder="0.01" | ||
| step={1e-18} | ||
| /> | ||
| ); | ||
| }; |
40 changes: 40 additions & 0 deletions
40
packages/account-kit/src/steps/gas-tank/components/BalancesFees.tsx
This file contains 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,40 @@ | ||
| import { AccountModalSection } from "../../../AccountModalSection"; | ||
| import { useAccount, useBalance } from "wagmi"; | ||
| import { useConfig } from "../../../AccountKitProvider"; | ||
| import { useEstimatedFees } from "../hooks/useEstimatedFees"; | ||
|
|
||
| export function BalancesFees() { | ||
| const { chain } = useConfig(); | ||
| const estimatedFees = useEstimatedFees(); | ||
| const userAccount = useAccount(); | ||
| const userAccountAddress = userAccount.address; | ||
| const userBalance = useBalance({ | ||
| chainId: chain.id, | ||
| address: userAccountAddress, | ||
| }); | ||
|
|
||
| return ( | ||
| <AccountModalSection> | ||
| <div className="flex flex-col gap-2"> | ||
| <ul> | ||
| <li className="flex justify-between py-[8px] border-b border-black border-opacity-10"> | ||
| <span className="opacity-50">Available to deposit</span> | ||
| <span className="font-medium"> | ||
| {userBalance?.data?.formatted || "..."} ETH <span className="text-neutral-800">($3,605.21)</span> | ||
| </span> | ||
| </li> | ||
| <li className="flex justify-between py-[8px] border-b border-black border-opacity-10"> | ||
| <span className="opacity-50">Estimated fee</span> | ||
| <span className="font-medium"> | ||
| {estimatedFees || "..."} ETH <span className="text-neutral-800">($3.40)</span> | ||
| </span> | ||
| </li> | ||
| <li className="flex justify-between py-[8px]"> | ||
| <span className="opacity-50">Transfer time</span> | ||
| <span className="font-medium">~5 seconds</span> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </AccountModalSection> | ||
| ); | ||
| } |
79 changes: 79 additions & 0 deletions
79
packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx
This file contains 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,79 @@ | ||
| import { ReactNode, Ref, forwardRef } from "react"; | ||
| import { twMerge } from "tailwind-merge"; | ||
| import * as Select from "@radix-ui/react-select"; | ||
| import { Shadow } from "../../../ui/Shadow"; | ||
|
|
||
| type SelectItemProps = { | ||
| value: string; | ||
| children: ReactNode; | ||
| className?: string; | ||
| disabled?: boolean; | ||
| }; | ||
| const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectItem( | ||
| { children, className, ...props }, | ||
| forwardedRef, | ||
| ) { | ||
| return ( | ||
| <Select.Item | ||
| className={twMerge( | ||
| "text-[13px] leading-none text-violet11 rounded-[3px] flex items-center", | ||
| "h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8", | ||
| "data-[disabled]:pointer-events-none data-[highlighted]:outline-none", | ||
| "data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1", | ||
| className, | ||
| )} | ||
| ref={forwardedRef as Ref<HTMLDivElement>} | ||
| {...props} | ||
| > | ||
| <Select.ItemText>{children}</Select.ItemText> | ||
| <Select.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center"> | ||
| {/* <CheckIcon /> */} | ||
| CheckIcon | ||
| </Select.ItemIndicator> | ||
| </Select.Item> | ||
| ); | ||
| }); | ||
| export function ChainSelect() { | ||
| return ( | ||
| <Select.Root defaultValue="17069"> | ||
| <Select.Trigger | ||
| className={twMerge( | ||
| "inline-flex items-center justify-center h-[50px] w-[70px]", | ||
| "text-[13px] leading-none gap-[5px]", | ||
| "bg-white", | ||
| "border border-neutral-300", | ||
| "outline-none", | ||
| )} | ||
| aria-label="Food" | ||
| > | ||
| <Shadow> | ||
| <Select.Value placeholder="Chain" /> | ||
| <Select.Icon>{/* <ChevronDownIcon /> */}</Select.Icon> | ||
| </Shadow> | ||
| </Select.Trigger> | ||
|
|
||
| <Select.Portal> | ||
| <Shadow> | ||
| <Select.Content className="overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]"> | ||
| <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"> | ||
| {/* <ChevronUpIcon /> */} | ||
| Up | ||
| </Select.ScrollUpButton> | ||
| <Select.Viewport className="p-[5px]"> | ||
| <Select.Group> | ||
| <Select.Label className="px-[25px] text-xs leading-[25px]">Select chain:</Select.Label> | ||
| <SelectItem value="17069">Redstone</SelectItem> | ||
| <SelectItem value="1">Ethereum</SelectItem> | ||
| <SelectItem value="7777777">Zora</SelectItem> | ||
| </Select.Group> | ||
| </Select.Viewport> | ||
| <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"> | ||
| {/* <ChevronDownIcon /> */} | ||
| Down | ||
| </Select.ScrollDownButton> | ||
| </Select.Content> | ||
| </Shadow> | ||
| </Select.Portal> | ||
| </Select.Root> | ||
| ); | ||
| } |