♻️ refactor: multi wallet file

src/components/shared/multi-wallet/index.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { FC } from "react"
+import { Unplug } from "lucide-react"
+
+import { useApp } from "@/context/app.context"
+import { Button } from "@/components/ui/button"
+import WalletAccountItem from "./wallet-account-item"
+
+const MultiWallet: FC = () => {
+    const { accounts, wallet, switchAccount, disconnect } = useApp()
+
+    if (accounts.length === 0) {
+        return (
+            <div className="text-center py-4 text-muted-foreground text-sm">
+                No wallets connected
+            </div>
+        )
+    }
+
+    return (
+        <div className="w-full">
+            <div className="p-2 select-none">
+                <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Accounts
+                </h3>
+            </div>
+
+            <div className="space-y-1 max-h-[300px] overflow-y-auto p-1">
+                {accounts.map((account) => (
+                    <WalletAccountItem
+                        key={account.address}
+                        account={account}
+                        isActive={account.address === wallet?.address}
+                        onSelect={() => {
+                            if (account.address !== wallet?.address) {
+                                switchAccount(account)
+                            }
+                        }}
+                    />
+                ))}
+
+                <Button
+                    variant="ghost"
+                    className="w-full justify-start text-destructive hover:bg-destructive/10 bg-transparent"
+                    onClick={disconnect}
+                >
+                    <span className="flex flex-grow items-center gap-2 text-destructive">
+                        <Unplug className="size-4" />
+                        {accounts.length > 1 ? "Disconnect All" : "Disconnect Wallet"}
+                    </span>
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+export default MultiWallet;

src/components/shared/multi-wallet/multi-wallet.types.ts

@@ -0,0 +1,5 @@
+export interface WalletAccountItemProps {
+    account: any
+    isActive: boolean
+    onSelect: () => void
+}

src/components/shared/multi-wallet/wallet-account-item.tsx

@@ -0,0 +1,62 @@
+import { FC } from "react"
+import { WalletAccountItemProps } from "./multi-wallet.types"
+import { useResolveSuiNSName } from "@mysten/dapp-kit"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { formatAddress } from "@mysten/sui/utils"
+import { Button } from "@/components/ui/button"
+import { Check, CheckCircle2, Copy, Wallet } from "lucide-react"
+import { cn } from "@/utils"
+
+const WalletAccountItem: FC<WalletAccountItemProps> = ({ account, isActive, onSelect }) => {
+    const { data: domain } = useResolveSuiNSName(account.address)
+    const { copy, copied } = useClipboard()
+
+    const displayAddress = domain || formatAddress(account.address)
+
+    const handleCopy = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        copy(account.address)
+    }
+
+    return (
+        <Button
+            variant="ghost"
+            onClick={onSelect}
+            className={cn(
+                "w-full justify-start h-auto py-2",
+                isActive && "bg-background/60"
+            )}
+        >
+            <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-2">
+                    <Wallet className="size-4 text-muted-foreground" />
+                    <span className="text-sm font-normal">
+                        {displayAddress}
+                    </span>
+                </div>
+
+                <div className="flex items-center gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={handleCopy}
+                        className="size-5"
+                    >
+                        {copied ? (
+                            <CheckCircle2 className="size-4 text-muted-foreground" />
+                        ) : (
+                            <Copy className="size-4 text-muted-foreground" />
+                        )}
+                    </Button>
+
+                    {isActive && (
+                        <Check className="size-4 text-green-400" />
+                    )}
+                </div>
+            </div>
+        </Button>
+    );
+}
+
+export default WalletAccountItem;

src/components/user/user-dropdown.tsx

@@ -4,11 +4,11 @@ import { formatAddress } from "@mysten/sui/utils"
 import { Unplug, Wallet } from "lucide-react"
 import { useState } from "react"
 import { useApp } from "@/context/app.context"
+import MultiWallet from "../shared/multi-wallet"
 import { useTwitter } from "@/context/twitter.context"
 import { Button } from "../ui/button"
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
 import { TwitterUserAvatar } from "./user-avatar"
-import { MultiWallet } from "../shared/multi-wallet"
 import { SocialAccounts } from "../shared/social-accounts"
 import { AuthenticationDialog } from "../dialogs/authentication.dialog"