-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #81 from inkonchain/feat/wallet
feat: implement basic wallet column
- Loading branch information
Showing
12 changed files
with
169 additions
and
24 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,16 @@ | ||
| import { OnlyWithFeatureFlag } from "@/components/OnlyWithFeatureFlag"; | ||
|
|
||
| import { WalletPanel } from "./Wallet/WalletPanel"; | ||
|
|
||
| export function LayoutColumns({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <OnlyWithFeatureFlag flag="walletColumn" otherwise={children}> | ||
| <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_396px] gap-4 w-full"> | ||
| <div>{children}</div> | ||
| <div> | ||
| <WalletPanel /> | ||
| </div> | ||
| </div> | ||
| </OnlyWithFeatureFlag> | ||
| ); | ||
| } |
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,102 @@ | ||
| "use client"; | ||
| import { toast } from "react-toastify"; | ||
| import { Button, InkIcon } from "@inkonchain/ink-kit"; | ||
| import { useEnsAddress } from "wagmi"; | ||
|
|
||
| import { ConnectWalletButton } from "@/components/ConnectWalletButton"; | ||
| import { useWallet } from "@/contexts/WalletProvider"; | ||
| import { truncateAddress, truncateEnsName } from "@/util/formatWallet"; | ||
|
|
||
| export function WalletPanel() { | ||
| const { isConnected, address } = useWallet(); | ||
|
|
||
| function notYet() { | ||
| toast.info("Not yet implemented"); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-4 container mx-auto"> | ||
| <div className="min-h-[244px] relative ink:bg-button-secondary ink:backdrop-blur-sm flex flex-col justify-between ink:rounded-sm"> | ||
| {!isConnected && ( | ||
| <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-150 hover:backdrop-blur-sm"> | ||
| <ConnectWalletButton variant="primary" /> | ||
| </div> | ||
| )} | ||
| <div className="flex items-center justify-between p-5 px-6 gap-4"> | ||
| <div className="ink:text-h5 ink:text-text-muted">Balance</div> | ||
| {isConnected && ( | ||
| <Button | ||
| className="ink:text-text-muted" | ||
| variant="transparent" | ||
| size="md" | ||
| onClick={() => { | ||
| navigator.clipboard.writeText(address || ""); | ||
| toast.info("Copied to clipboard"); | ||
| }} | ||
| iconRight={<InkIcon.Copy />} | ||
| > | ||
| <EnsOrAddress address={address || ""} /> | ||
| </Button> | ||
| )} | ||
| </div> | ||
| <div className="flex-1" /> | ||
| <div className="flex items-center justify-between p-6"> | ||
| <div className="ink:text-h3 ink:text-text-muted">$0.00</div> | ||
| <div className=""> | ||
| <InkIcon.Logo.Ink className="size-10 text-(--ink-button-secondary)" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-evenly gap-6"> | ||
| <WalletPanelButton | ||
| icon={<InkIcon.Arrow className="size-5" />} | ||
| label="Receive" | ||
| onClick={notYet} | ||
| /> | ||
| <WalletPanelButton | ||
| icon={<InkIcon.Arrow className="size-5 rotate-180" />} | ||
| label="Send" | ||
| onClick={notYet} | ||
| /> | ||
| <WalletPanelButton | ||
| icon={<InkIcon.Bridge className="size-5" />} | ||
| label="Bridge" | ||
| onClick={notYet} | ||
| /> | ||
| <WalletPanelButton | ||
| icon={<InkIcon.Deposit className="size-5" />} | ||
| label="Deposit" | ||
| onClick={notYet} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const EnsOrAddress = ({ address }: { address: string }) => { | ||
| const { data: ens } = useEnsAddress(); | ||
| return ( | ||
| <div className="truncate"> | ||
| {ens ? truncateEnsName(ens) : truncateAddress(address)} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const WalletPanelButton = ({ | ||
| icon, | ||
| label, | ||
| onClick, | ||
| }: { | ||
| icon: React.ReactNode; | ||
| label: string; | ||
| onClick: () => void; | ||
| }) => { | ||
| return ( | ||
| <div className="flex flex-col items-center gap-2"> | ||
| <Button size="lg" rounded="full" variant="secondary" onClick={onClick}> | ||
| {icon} | ||
| </Button> | ||
| <div className="ink:text-caption-1-bold ink:text-text-muted">{label}</div> | ||
| </div> | ||
| ); | ||
| }; |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export const truncateEnsName = (ensName: string, maxLength = 16) => { | ||
| if (!ensName || !ensName.endsWith(".eth")) return ensName; | ||
|
|
||
| const namePart = ensName.slice(0, -4); // Remove .eth | ||
| if (namePart.length <= maxLength) return ensName; | ||
| return `${namePart.slice(0, maxLength)}...eth`; | ||
| }; | ||
|
|
||
| export const truncateAddress = (address: string) => { | ||
| return `${address.slice(0, 4)}...${address.slice(-4)}`; | ||
| }; |