Better UX for token selection

frontend/package.json

@@ -18,10 +18,13 @@
     "@lit-protocol/lit-node-client": "^7.2.0",
     "@mui/icons-material": "^6.4.6",
     "@mui/material": "^6.4.6",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@rainbow-me/rainbowkit": "^2.2.2",
     "@tanstack/react-query": "^5.64.1",
     "class-variance-authority": "^0.7.1",
@@ -31,7 +34,7 @@
     "eth-crypto": "^2.7.0",
     "ethereum-unit-converter": "^0.0.17",
     "ethers": "^6.13.5",
-    "framer-motion": "^12.23.0",
+    "framer-motion": "^12.23.12",
     "html2canvas": "^1.4.1",
     "jspdf": "^3.0.0",
     "lucide-react": "^0.471.1",
@@ -44,6 +47,7 @@
     "react-router-dom": "^7.1.1",
     "react-to-print": "^3.0.5",
     "react-toastify": "^11.0.5",
+    "react-window": "^1.8.11",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^2.22.9",

frontend/src/components/TokenCrousel.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { SiEthereum } from "react-icons/si";
-import { TOKEN_PRESETS } from "@/utils/erc20_token";
+// import { TOKEN_PRESETS } from "@/utils/erc20_token";
 
 const TokenCarousel = () => {
   const carouselRef = useRef();