diff --git a/src/components/WalletDropdown.tsx b/src/components/WalletDropdown.tsx index b7d940b..cf37adb 100644 --- a/src/components/WalletDropdown.tsx +++ b/src/components/WalletDropdown.tsx @@ -1,28 +1,39 @@ "use client"; import React, { useState, ChangeEvent } from 'react'; -import { useWallet } from '../contexts/wallet'; +import { useWallet } from "@/contexts/wallet"; import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, - DropdownMenuLabel, DropdownMenuSeparator -} from '../components/ui/dropdown-menu'; -import { Button } from '../components/ui/button'; -import { ChevronDown, PlusCircle } from 'lucide-react'; +} from "@/components/ui/dropdown-menu"; +import { Button } from "@/components/ui/button"; +import { + ChevronDown, + PlusCircle, + Wallet, + ExternalLink, + Copy, + LogOut, + Coins +} from 'lucide-react'; import { Dialog, DialogContent, DialogDescription, - DialogFooter, DialogHeader, DialogTitle, DialogTrigger, -} from "../components/ui/dialog"; -import { Input } from "../components/ui/input"; -import { Label } from "../components/ui/label"; +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; export function WalletDropdown() { const { isConnected, address, chainId, connectWallet, disconnectWallet, balance, wttBalance, mintWTT } = useWallet(); @@ -38,125 +49,164 @@ export function WalletDropdown() { setMintAmount(e.target.value); }; + // Format address in the "0xabc...xyz" pattern + const formatAddress = (address: string) => { + if (!address) return ''; + return `0x${address.slice(2, 5)}...${address.slice(-3)}`; + }; + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text); + }; + + const getNetworkColor = () => { + if (chainId === 59141) return "text-green-400"; + return "text-yellow-400"; + }; + + const getNetworkName = () => { + if (chainId === 59141) return "Linea Sepolia"; + return `Unknown (${chainId})`; + }; + if (!isConnected || !address) { return ( ); } return ( - <> - - - - - - Wallet - -
- {/* Address */} -
- Address: - {address} + + + + + +
+
+
+ + Wallet
- - {/* Network */} -
- Network: - {chainId === 59141 ? "Linea Sepolia" : `Unknown (${chainId})`} +
+ {getNetworkName()}
- - {/* ETH Balance */} - {balance && ( -
- Balance: - {parseFloat(balance).toFixed(4)} ETH -
- )} - - {/* WTT Balance with Mint Button */} - {wttBalance && ( -
-
- WTT - {parseFloat(wttBalance).toFixed(4)} -
-
- Balance: - WTT -
- - - - - - - Mint WTT Tokens - - Enter the amount of WTT tokens you want to mint. - - -
-
- - -
-
- - - -
-
-
-
-
- )}
- - - Disconnect - - - - +
+
{address}
+
+ + +
+
+
+ +
+ {/* Balances section */} +
+
+
+ + ETH Balance +
+ {parseFloat(balance || '0').toFixed(4)} +
+ +
+
+ + WTT Balance +
+
+ {parseFloat(wttBalance || '0').toFixed(4)} + + + + + + + + + +

Mint WTT tokens for testing

+
+
+
+ + + Mint WTT Tokens + + Specify how many WTT tokens you want to mint for testing. + + +
+
+ + +
+
+
+
+
+
+
+
+ + + + + Disconnect Wallet + + + ); } \ No newline at end of file