Wallet Sheet

1"use client";
2 
3import {
4  ArrowUpIcon,
5  DollarSignIcon,
6  QrCodeIcon,
7  RepeatIcon,
8  WalletIcon,
9} from "lucide-react";
10import type React from "react";
11import { Button } from "@/components/ui/button";
12import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
13import { cn } from "@/lib/utils";
14import { AddressDisplay } from "@/registry/sol/address-display";
15import { TokenIcon } from "@/registry/sol/token-icon";
16 
17interface WalletSheetProps {
18  address?: string;
19  balance?: string;
20  balanceChange?: string;
21  balanceChangePercent?: string;
22  tokens?: {
23    icon: string;
24    name: string;
25    symbol: string;
26    balance: string;
27    value: string;
28    change?: string;
29  }[];
30  actions?: {
31    label: string;
32    icon?: React.ReactNode;
33  }[];
34  children?: React.ReactNode;
35  trigger?: React.ReactNode;
36  className?: string;
37}
38 
39const DEFAULT_ACTIONS = [
40  { label: "Send", icon: <ArrowUpIcon className="size-4" /> },
41  { label: "Swap", icon: <RepeatIcon className="size-4" /> },
42  { label: "Receive", icon: <QrCodeIcon className="size-4" /> },
43  { label: "Buy", icon: <DollarSignIcon className="size-4" /> },
44];
45 
46const truncateAddress = (address: string) => {
47  if (address.length <= 12) return address;
48  return `${address.slice(0, 4)}...${address.slice(-4)}`;
49};
50 
51const isNegative = (value: string) => {
52  return value.trim().startsWith("-");
53};
54 
55const WalletSheet = ({
56  address,
57  balance,
58  balanceChange,
59  balanceChangePercent,
60  tokens,
61  actions = DEFAULT_ACTIONS,
62  children,
63  trigger,
64  className,
65}: WalletSheetProps) => {
66  return (
67    <Sheet>
68      <SheetTrigger asChild>
69        {trigger ?? (
70          <Button variant="outline" size="sm" className="gap-2">
71            <WalletIcon className="size-4" />
72            {address ? truncateAddress(address) : "Connect"}
73          </Button>
74        )}
75      </SheetTrigger>
76      <SheetContent className={cn("flex flex-col p-0 gap-0", className)}>
77        {/* Header: address + copy */}
78        {address && (
79          <div className="flex items-center justify-center pt-6 pb-2 px-6">
80            <AddressDisplay address={address} />
81          </div>
82        )}
83 
84        {/* Balance hero */}
85        {balance && (
86          <div className="flex flex-col items-center gap-1 px-6 pb-4 pt-2">
87            <span className="text-4xl font-semibold tracking-tight">
88              {balance}
89            </span>
90            {(balanceChange || balanceChangePercent) && (
91// … truncated