feat: update token select and use uniswap default token list (#56)

Co-authored-by: jonbray.eth <jon@xeon-protocol.io>
heyJonBray · Sep 11, 2024 · 91a6dd2 · 91a6dd2
1 parent a0daa02
commit 91a6dd2
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@teller-protocol/teller-widget": "^1.2.0",
     "@teller-protocol/v2-contracts": "^3.1.13",
     "@thirdweb-dev/sdk": "^4.0.99",
+    "@uniswap/token-lists": "^1.0.0-beta.34",
     "alchemy-sdk": "^3.3.1",
     "ethers": "5",
     "framer-motion": "^11.2.12",
@@ -44,4 +45,4 @@
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4"
   }
-}
+}
diff --git a/src/app/silkroad/page.js b/src/app/silkroad/page.js
@@ -1,25 +1,66 @@
-'use client';
-import Card from '@/components/Card';
-import CenterNav from '@/components/CenterNav';
-import Footer from '@/components/Footer';
-import Header from '@/components/Header';
-import Layout from '@/components/Layout';
-import NoEvents from '@/components/NoEvents';
-import SocialPopup from '@/components/SocialPopup';
-import React from 'react';
+"use client";
+import Card from "@/components/Card";
+import CenterNav from "@/components/CenterNav";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import Layout from "@/components/Layout";
+import NoEvents from "@/components/NoEvents";
+import SocialPopup from "@/components/SocialPopup";
+import React, {useEffect, useState} from "react";
 
-import Loans from '@/components/Loans';
+import Loans from "@/components/Loans";
 
 export default function Home() {
-  const [showPositions, setShowPositions] = React.useState(false);
-  const [showDiscover, setShowDiscover] = React.useState(true);
-  const [showBookmarks, setShowBookmarks] = React.useState(false);
-  const [showSocials, setShowSocials] = React.useState(false);
-  const [showComingSoon, setShowComingSoon] = React.useState(false);
-  const [activeSideTab, setActiveSideTab] = React.useState('');
-  const [activeSection, setActiveSection] = React.useState('discover');
+  const [showPositions, setShowPositions] = useState(false);
+  const [showDiscover, setShowDiscover] = useState(true);
+  const [showBookmarks, setShowBookmarks] = useState(false);
+  const [showSocials, setShowSocials] = useState(false);
+  const [showComingSoon, setShowComingSoon] = useState(false);
+  const [showLoans, setShowLoans] = useState(false);
 
-  const [showLoans, setShowLoans] = React.useState(false);
+  const [activeSideTab, setActiveSideTab] = useState("");
+  const [activeSection, setActiveSection] = useState("discover");
+  const [chainId, setChainId] = useState(1);
+  const [selectedToken, setSelectedToken] = useState("");
+  const [tokenList, setTokenList] = useState([]);
+
+  useEffect(() => {
+    const fetchTokenList = async () => {
+      try {
+        const response = await fetch(
+          "https://tokens-uniswap-org.ipns.dweb.link/"
+        );
+        if (response.ok) {
+          const data = await response.json();
+
+          setTokenList(data.tokens);
+        } else {
+          console.error(
+            "Failed to fetch token list, response not ok",
+            response.status
+          );
+        }
+      } catch (error) {
+        console.error("Failed to fetch token list", error);
+      }
+    };
+
+    fetchTokenList();
+  }, []);
+
+  const handleSelectedToken = (inputAddress) => {
+    const token = tokenList.find(
+      (t) => t.address.toLowerCase() === inputAddress.toLowerCase()
+    );
+    if (token) {
+      setSelectedToken(token.address);
+      setChainId(token.chainId);
+    } else {
+      setSelectedToken("");
+      setChainId(1);
+      setShowLoans(false);
+    }
+  };
 
   return (
     <>
@@ -49,8 +90,9 @@ export default function Home() {
               setShowComingSoon={setShowComingSoon}
               activeSection={activeSection}
               activeSideTab={activeSideTab}
-              setActiveSection={setActiveSection}
-              setActiveSideTab={setActiveSideTab}
+              setSelectedToken={setSelectedToken}
+              tokenList={tokenList}
+              handleSelectedToken={handleSelectedToken}
             />
             {showDiscover && <Card />}
             <div className="mt-5">{showDiscover && <Card />}</div>
@@ -65,7 +107,11 @@ export default function Home() {
               )}
             </div>
 
-            <div className="mt-5">{showLoans && <Loans />}</div>
+            <div className="mt-5">
+              {showLoans && (
+                <Loans chainId={chainId} selectedToken={selectedToken} />
+              )}
+            </div>
           </Layout>
         </div>
       </div>

diff --git a/src/components/CenterNav.js b/src/components/CenterNav.js
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import {
   Box,
   Image,
@@ -12,9 +12,9 @@ import {
   ModalOverlay,
   Select,
   useDisclosure,
-} from '@chakra-ui/react';
-import { FaPlusCircle, FaSearch } from 'react-icons/fa';
-import { IoIosInformationCircleOutline } from 'react-icons/io';
+} from "@chakra-ui/react";
+import {FaPlusCircle, FaSearch} from "react-icons/fa";
+import {IoIosInformationCircleOutline} from "react-icons/io";
 
 function CenterNav({
   setShowPositions,
@@ -24,8 +24,13 @@ function CenterNav({
   activeSideTab,
   setActiveSection,
   setActiveSideTab,
+  selectedToken,
+  tokenList,
+  handleSelectedToken,
+  setChainId,
 }) {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {isOpen, onOpen, onClose} = useDisclosure();
+
   return (
     <Box position="relative">
       <div className="flex justify-between lg:px-14 px-1 absolute top-0 md:top-[-7px] lg:top-[-7px]  left-0 right-0 pr-3 md:pr-4  lg:px-8 text-[10px] md:text-xs lg:text-lg">
@@ -34,35 +39,35 @@ function CenterNav({
             setShowPositions(false);
             setShowDiscover(true);
             setShowBookmarks(false);
-            setActiveSection('discover');
-            setActiveSideTab('');
+            setActiveSection("discover");
+            setActiveSideTab("");
           }}
           className={`${
-            activeSection === 'discover' ? 'text-grey' : 'text-muted'
+            activeSection === "discover" ? "text-grey" : "text-muted"
           } hover:cursor-pointer ml-5`}
         >{`{ Discover }`}</p>
         <p
           onClick={() => {
             setShowPositions(true);
             setShowDiscover(false);
             setShowBookmarks(false);
-            setActiveSection('positions');
-            setActiveSideTab('');
+            setActiveSection("positions");
+            setActiveSideTab("");
           }}
           className={`${
-            activeSection === 'positions' ? 'text-grey' : 'text-muted'
+            activeSection === "positions" ? "text-grey" : "text-muted"
           } hover:cursor-pointer ml-2 lg:ml-3`}
         >{`{ Positions }`}</p>
         <p
           onClick={() => {
             setShowPositions(false);
             setShowDiscover(false);
             setShowBookmarks(true);
-            setActiveSection('bookmarks');
-            setActiveSideTab('');
+            setActiveSection("bookmarks");
+            setActiveSideTab("");
           }}
           className={`${
-            activeSection === 'bookmarks' ? 'text-grey' : 'text-muted'
+            activeSection === "bookmarks" ? "text-grey" : "text-muted"
           } hover:cursor-pointer ml-2 lg:ml-5`}
         >{`{ Bookmarks }`}</p>
         <div
@@ -92,53 +97,51 @@ function CenterNav({
         <InputLeftElement pointerEvents="none">
           <FaSearch color="#6c6c6c" className="ml-2" />
         </InputLeftElement>
-        <Input
-          size={{
-            md: 'sm',
-            lg: 'md',
-          }}
-          placeholder="filter token address..."
-          type="search"
-          bg="transparent"
-          w={'100%'}
-          pl="2rem"
-          _focus={{
-            border: 'none',
-            outline: 'none',
+        <Select
+          style={{
+            paddingLeft: "2.3rem",
           }}
-          className="bg-[#71637f4d] text-grey p-1 md:p-1 lg:p-2 border-[#6c6c6c] border-[1px] rounded-lg"
-        />
+          placeholder="Select a token"
+          onChange={(e) => handleSelectedToken(e.target.value)}
+          className="bg-[#71637f4d] text-grey p-1 md:p-1  border-[#6c6c6c] border-[1px] rounded-lg"
+        >
+          {tokenList.map((token) => (
+            <option key={token.address} value={token.address}>
+              {token.name} ({token.address})
+            </option>
+          ))}
+        </Select>
       </InputGroup>
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
-        <ModalContent border={'1px solid #6c6c6c'}>
+        <ModalContent border={"1px solid #6c6c6c"}>
           <div className="bg-black text-lg py-2 text-center text-grey ">
             Create OTC Trade
           </div>
           <ModalCloseButton
-            color={'white'}
+            color={"white"}
             _focus={{
-              outline: 'none',
-              border: 'none',
-              boxShadow: 'none',
+              outline: "none",
+              border: "none",
+              boxShadow: "none",
             }}
-            outline={'none'}
+            outline={"none"}
           />
           <ModalBody className="bg-black">
             <div className="flex items-center gap-4 mb-2">
-              {' '}
+              {" "}
               <p className="text-grey">{`{ hedge type }`}</p>
               <IoIosInformationCircleOutline className="text-muted" />
             </div>
             <Select
               _hover={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
               }}
-              bg={'black'}
-              border={'1px'}
-              borderColor={'#6c6c6c'}
+              bg={"black"}
+              border={"1px"}
+              borderColor={"#6c6c6c"}
               _focus={{
-                borderColor: '#470c85',
+                borderColor: "#470c85",
               }}
               variant="filled"
               placeholder="Call Option"
@@ -152,73 +155,73 @@ function CenterNav({
               </option>
             </Select>
             <div className="flex items-center gap-4 mt-4 mb-2">
-              {' '}
+              {" "}
               <p className="text-grey">{`{ token address }`}</p>
               <IoIosInformationCircleOutline className="text-muted" />
             </div>
             <Input
               _hover={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
               }}
-              bg={'black'}
-              border={'1px'}
-              borderColor={'#6c6c6c'}
+              bg={"black"}
+              border={"1px"}
+              borderColor={"#6c6c6c"}
               _focus={{
-                borderColor: '#470c85',
+                borderColor: "#470c85",
               }}
               variant="filled"
               className="bg-black text-grey border-[1px] border-[#6c6c6c] rounded-lg w-full "
             />
             <div className="flex items-center gap-4 mt-4 mb-2">
-              {' '}
+              {" "}
               <p className="text-grey">{`{ token amount }`}</p>
               <IoIosInformationCircleOutline className="text-muted" />
             </div>
             <Input
               _hover={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
               }}
-              bg={'black'}
-              border={'1px'}
-              borderColor={'#6c6c6c'}
+              bg={"black"}
+              border={"1px"}
+              borderColor={"#6c6c6c"}
               _focus={{
-                borderColor: '#470c85',
+                borderColor: "#470c85",
               }}
               variant="filled"
               className="bg-black text-grey border-[1px] border-[#6c6c6c] rounded-lg w-full "
             />
             <div className="flex items-center gap-4 mt-4 mb-2">
-              {' '}
+              {" "}
               <p className="text-grey">{`{ premium }`}</p>
               <IoIosInformationCircleOutline className="text-muted" />
             </div>
             <Input
               _hover={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
               }}
-              bg={'black'}
-              border={'1px'}
-              borderColor={'#6c6c6c'}
+              bg={"black"}
+              border={"1px"}
+              borderColor={"#6c6c6c"}
               _focus={{
-                borderColor: '#470c85',
+                borderColor: "#470c85",
               }}
               variant="filled"
               className="bg-black text-grey border-[1px] border-[#6c6c6c] rounded-lg w-full "
             />
             <div className="flex items-center gap-4 mt-4 mb-2">
-              {' '}
+              {" "}
               <p className="text-grey">{`{ strike price }`}</p>
               <IoIosInformationCircleOutline className="text-muted" />
             </div>
             <Input
               _hover={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
               }}
-              bg={'black'}
-              border={'1px'}
-              borderColor={'#6c6c6c'}
+              bg={"black"}
+              border={"1px"}
+              borderColor={"#6c6c6c"}
               _focus={{
-                borderColor: '#470c85',
+                borderColor: "#470c85",
               }}
               variant="filled"
               className="bg-black text-grey border-[1px] border-[#6c6c6c] rounded-lg w-full "
@@ -253,7 +256,7 @@ function CenterNav({
             </div>
           </ModalBody>
 
-          <div className={'bg-black py-3 flex justify-center'}>
+          <div className={"bg-black py-3 flex justify-center"}>
             <button
               className="text-white bg-black px-8 py-2 mr-4 rounded-full border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue"
               mr={3}