Add search to the token modal

balancer · Aug 5, 2024 · 338623d · 338623d
1 parent 0e72580
commit 338623d
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 29 deletions.
diff --git a/packages/nextjs/components/common/TokenSelectModal.tsx b/packages/nextjs/components/common/TokenSelectModal.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Dispatch, SetStateAction } from "react";
+import React, { Dispatch, SetStateAction, useState } from "react";
+import VirtualList from "react-tiny-virtual-list";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { type Token } from "~~/hooks/token";
 
@@ -9,35 +9,61 @@ type ModalProps = {
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
 export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModalOpen, setToken }) => {
+  const [searchText, setSearchText] = useState("");
+  const filteredTokenOptions = tokenOptions.filter(option =>
+    option.symbol.toLowerCase().startsWith(searchText.toLowerCase()),
+  );
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50" onClick={() => setIsModalOpen(false)}>
-      <div className="relative w-[500px] p-7">
-        <div className="relative bg-base-300 border border-base-200 rounded-lg p-7 h-[500px] overflow-y-auto">
-          <XMarkIcon
-            className="absolute top-7 right-7 w-7 h-7 hover:cursor-pointer"
-            onClick={() => setIsModalOpen(false)}
-          />
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
+      <div className="relative w-[500px]">
+        <div className="relative bg-base-300 border border-base-200 rounded-lg">
+          <div className="p-4">
+            <XMarkIcon
+              className="absolute top-4 right-4 w-7 h-7 hover:cursor-pointer"
+              onClick={() => setIsModalOpen(false)}
+            />
 
-          <h5 className="font-bold text-xl mb-5">Select Token</h5>
+            <h5 className="font-bold text-xl mb-5">Select Token</h5>
+            <input
+              type="text"
+              placeholder="Search by symbol..."
+              value={searchText}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.target.value)}
+              className="w-full input input-bordered rounded-xl bg-base-200 disabled:bg-base-300 px-5 h-[52px] text-lg"
+            />
+          </div>
           <div className="flex flex-col gap-0 border-t border-base-content">
-            {tokenOptions.map(token => (
-              <button
-                key={token.address}
-                onClick={() => {
-                  setToken(token);
-                  setIsModalOpen(false);
-                }}
-                className="rounded-lg hover:bg-base-200 p-2"
-              >
-                <div className="flex justify-between items-center">
-                  <div className="text-start">
-                    <div>{token.symbol}</div>
-                    <div>{token.name.length > 40 ? `${token.name.substring(0, 40)}...` : token.name}</div>
-                  </div>
-                  <div>-</div>
-                </div>
-              </button>
-            ))}
+            <VirtualList
+              className="flex flex-col gap-0 border-t border-base-content"
+              width="100%"
+              height={500}
+              itemCount={filteredTokenOptions.length}
+              itemSize={64}
+              renderItem={({ index, style }) => {
+                const token = filteredTokenOptions[index];
+
+                return (
+                  <button
+                    key={index}
+                    style={style}
+                    onClick={() => {
+                      setToken(token);
+                      setIsModalOpen(false);
+                    }}
+                    className="flex w-full rounded-lg hover:bg-base-200 p-2 h-[64px] px-4"
+                  >
+                    <div className="flex w-full justify-between items-center">
+                      <div className="text-start flex-1">
+                        <div>{token.symbol}</div>
+                        <div>{token.name.length > 40 ? `${token.name.substring(0, 40)}...` : token.name}</div>
+                      </div>
+                      <div>-</div>
+                    </div>
+                  </button>
+                );
+              }}
+            />
           </div>
         </div>
       </div>

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -31,6 +31,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
+    "react-tiny-virtual-list": "^2.2.0",
     "use-debounce": "^8.0.4",
     "usehooks-ts": "^2.13.0",
     "viem": "2.17.4",

diff --git a/yarn.lock b/yarn.lock
@@ -2336,6 +2336,7 @@ __metadata:
     react-copy-to-clipboard: ^5.1.0
     react-dom: ^18.2.0
     react-hot-toast: ^2.4.0
+    react-tiny-virtual-list: ^2.2.0
     tailwindcss: ^3.4.3
     type-fest: ^4.6.0
     typescript: 5.5.3
@@ -11813,7 +11814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.7, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -12093,6 +12094,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tiny-virtual-list@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "react-tiny-virtual-list@npm:2.2.0"
+  dependencies:
+    prop-types: ^15.5.7
+  peerDependencies:
+    react: 15.x || 16.x
+  checksum: e89908ab643827f8cda2f3b8dcdb1406c800cfa830ad7a9e76a8f806a5fe07c1a5f33d136967ad177e9e786903667c4053449e1b0143bfb7d7b482f667f8372b
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"