feat: add receive funds modal with QR code and address display to dashboard

Author: imduchuyyy

apps/web/app/dashboard/page.tsx

@@ -11,6 +11,8 @@ import { useTokenBalances } from "@/hooks/use-token-balance"
 import { useTransactions } from "@/hooks/use-transactions"
 import { useSmartAccount } from "@/hooks/use-smart-account"
 import { formatUnits } from "viem"
+import { ReceiveModal } from "@/components/dashboard/receive-modal"
+import { useState } from "react"
 
 // Mock data
 const mockTransactions = [
@@ -103,6 +105,8 @@ export default function DashboardPage() {
   const { balances, isLoading: balancesLoading } = useTokenBalances("0x4fff0f708c768a46050f9b96c46c265729d1a62f"); // for testing
   const { transactions, isLoading: transactionsLoading } = useTransactions(walletAddress, 10);
 
+  const [receiveModalOpen, setReceiveModalOpen] = useState(false)
+  
   const balanceChange = "-12.5%"
   const balanceChangeValue = parseFloat(balanceChange)
   const isPositiveChange = balanceChangeValue >= 0
@@ -142,10 +146,15 @@ export default function DashboardPage() {
                    Send
                  </Link>
                </Button>
-               <Button size="sm" variant="secondary" className="w-full font-semibold shadow-sm bg-white/10 hover:bg-white/20 text-white border-none backdrop-blur-sm sm:h-11 sm:px-8">
-                 <ArrowDownLeft className="mr-1 sm:mr-2 size-3 sm:size-4" />
-                 Receive
-               </Button>
+                <Button 
+                  size="sm" 
+                  variant="secondary" 
+                  className="w-full font-semibold shadow-sm bg-white/10 hover:bg-white/20 text-white border-none backdrop-blur-sm sm:h-11 sm:px-8"
+                  onClick={() => setReceiveModalOpen(true)}
+                >
+                  <ArrowDownLeft className="mr-1 sm:mr-2 size-3 sm:size-4" />
+                  Receive
+                </Button>
                <Button size="sm" variant="secondary" className="w-full font-semibold shadow-sm bg-white/10 hover:bg-white/20 text-white border-none backdrop-blur-sm sm:h-11 sm:px-8" asChild>
                   <Link href="/dashboard/swap">
                     <ArrowRightLeft className="mr-1 sm:mr-2 size-3 sm:size-4" />
@@ -333,6 +342,13 @@ export default function DashboardPage() {
            </Card>
         </TabsContent>
       </Tabs>
+
+      {/* Receive Modal */}
+      <ReceiveModal 
+        open={receiveModalOpen} 
+        onOpenChange={setReceiveModalOpen} 
+        address={walletAddress}
+      />
     </div>
   )
 }

apps/web/components/dashboard/receive-modal.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Copy, CheckCircle2, AlertTriangle } from "lucide-react"
+import QRCodeSVG from "react-qr-code"
+import { Address } from "viem"
+import { useState } from "react"
+
+interface ReceiveModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  address: Address | undefined
+}
+
+export function ReceiveModal({ open, onOpenChange, address }: ReceiveModalProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    if (!address) return
+    
+    await navigator.clipboard.writeText(address)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  if (!address) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-bold">Receive Funds</DialogTitle>
+          <DialogDescription>
+            Scan the QR code or copy your wallet address to receive funds
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="flex flex-col items-center gap-6 py-4">
+          {/* QR Code */}
+          <div className="p-4 bg-white rounded-xl shadow-sm border-2 border-muted">
+            <QRCodeSVG 
+              value={address} 
+              size={200}
+              level="H"
+            />
+          </div>
+
+          {/* Wallet Address */}
+          <div className="w-full space-y-3">
+            <div className="flex items-center justify-between gap-2 p-3 rounded-lg bg-muted/50 border">
+              <code className="text-xs sm:text-sm font-mono break-all flex-1">
+                {address}
+              </code>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="shrink-0 size-8"
+                onClick={handleCopy}
+              >
+                {copied ? (
+                  <CheckCircle2 className="size-4 text-green-500" />
+                ) : (
+                  <Copy className="size-4" />
+                )}
+              </Button>
+            </div>
+
+            {/* Network Warning */}
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900">
+              <AlertTriangle className="size-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
+              <div className="space-y-1">
+                <p className="text-sm font-semibold text-amber-900 dark:text-amber-100">
+                  Important Notice
+                </p>
+                <p className="text-xs text-amber-800 dark:text-amber-200">
+                  Only send assets on the <Badge variant="outline" className="text-[10px] px-1.5 py-0 font-semibold">Ethereum Network</Badge> to this address. 
+                  Sending assets from other networks may result in permanent loss of funds.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/package.json

@@ -40,6 +40,7 @@
     "postcss": "^8.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-qr-code": "^2.0.18",
     "sonner": "^2.0.7",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.4.0",