From 1cc383ec924290787e9dd7ad2be9eb4f78b60ba5 Mon Sep 17 00:00:00 2001
From: Quentin Burg <quentin@marigold.dev>
Date: Thu, 7 Sep 2023 11:36:36 +0200
Subject: [PATCH] :sparkles: add token icon in swap selector

---
 batcher-ui/next.config.js                |  8 +++
 batcher-ui/src/components/SelectPair.tsx | 62 +++++++++++++++---------
 batcher-ui/src/utils/utils.ts            | 24 +++++++++
 3 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/batcher-ui/next.config.js b/batcher-ui/next.config.js
index c2e43fff..131eac17 100644
--- a/batcher-ui/next.config.js
+++ b/batcher-ui/next.config.js
@@ -16,6 +16,14 @@ const nextConfig = {
 
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'ipfs.io',
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/batcher-ui/src/components/SelectPair.tsx b/batcher-ui/src/components/SelectPair.tsx
index a386140f..8889e86a 100644
--- a/batcher-ui/src/components/SelectPair.tsx
+++ b/batcher-ui/src/components/SelectPair.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import * as Select from '@radix-ui/react-select';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -10,24 +10,35 @@ import { useSelector } from 'react-redux';
 import { currentSwapSelector } from 'src/reducers';
 import { useDispatch } from 'react-redux';
 import { changePair } from 'src/actions';
+import { getTokensMetadata } from 'src/utils/utils';
+import Image from 'next/image';
 
 const SelectPair = () => {
   const { swap, isReverse } = useSelector(currentSwapSelector);
   const dispatch = useDispatch();
 
-  const availableTokens = ['tzBTC', 'USDT', 'EURL'];
+  const [availableTokens, setAvailableTokens] = useState<any[]>([]);
+
+  useEffect(() => {
+    getTokensMetadata().then(
+      (tokens: { name: string; address: string; icon: string | undefined }[]) =>
+        setAvailableTokens(tokens)
+    );
+  }, []);
 
   return (
     <Select.Root
+      // value={availableTokens[1].name}
       value={isReverse ? swap.to.name : swap.from.token.name}
       onValueChange={value => {
-        console.warn(value);
+        //TODO: change this when we had more pair
+        // const parsedValue = value === 'USDt'
         const pair =
           value === 'tzBTC' ? `tzBTC/${swap.to.name}` : `tzBTC/${value}`;
         const reversed = value !== 'tzBTC';
         dispatch(changePair(pair, reversed));
       }}>
-      <Select.Trigger className="flex items-center text-dark w-[90px] justify-center rounded px-2 mr-1 text-base gap-2 bg-white hover:bg-hovergray outline-none">
+      <Select.Trigger className="flex items-center text-dark w-[140px] justify-center rounded px-2 mr-1 text-base gap-2 bg-white hover:bg-hovergray outline-none">
         <Select.Value
           placeholder={isReverse ? swap.to.name : swap.from.token.name}
         />
@@ -37,30 +48,37 @@ const SelectPair = () => {
       </Select.Trigger>
       <Select.Portal className="w-[7rem]">
         <Select.Content className="overflow-hidden bg-white rounded-md text-dark">
-          <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-[red] cursor-default">
+          <Select.ScrollUpButton className="flex items-center justify-center h-[25px] cursor-default">
             <FontAwesomeIcon icon={faChevronUp} />
           </Select.ScrollUpButton>
           <Select.Viewport className="p-2">
             <Select.Group>
-              {availableTokens
-                // .filter(a =>
-                //   isReverse ? swap.to.name !== a : swap.from.token.name !== a
-                // )
-                .map(t => (
-                  <SelectItem
-                    value={t}
-                    key={t}
-                    disabled={
-                      isReverse
-                        ? swap.to.name === t
-                        : swap.from.token.name === t
-                    }>
-                    {t}
-                  </SelectItem>
-                ))}
+              {availableTokens.map(t => (
+                <SelectItem
+                  value={t.name}
+                  key={t.name}
+                  disabled={
+                    isReverse
+                      ? swap.to.name === t.name
+                      : swap.from.token.name === t.name
+                  }>
+                  <div className="flex items-center">
+                    {t.icon && (
+                      <Image
+                        src={t.icon}
+                        alt={`${t.name} icon`}
+                        width={24}
+                        height={24}
+                        style={{ paddingRight: 4 }}
+                      />
+                    )}
+                    <p>{t.name}</p>
+                  </div>
+                </SelectItem>
+              ))}
             </Select.Group>
           </Select.Viewport>
-          <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-[pink]text-violet11 cursor-default">
+          <Select.ScrollDownButton className="flex items-center justify-center h-[25px] cursor-default">
             <FontAwesomeIcon icon={faChevronDown} />
           </Select.ScrollDownButton>
         </Select.Content>
diff --git a/batcher-ui/src/utils/utils.ts b/batcher-ui/src/utils/utils.ts
index ea5fb912..126ab6da 100644
--- a/batcher-ui/src/utils/utils.ts
+++ b/batcher-ui/src/utils/utils.ts
@@ -203,6 +203,30 @@ export const getBigMapByIdAndTokenPair = (
     );
 };
 
+export const getTokensMetadata = async () => {
+  const storage = await getStorage();
+  const validTokens = storage['valid_tokens'];
+  return Promise.all(
+    Object.values(validTokens).map(async token => {
+      const icon = await fetch(
+        `${process.env.NEXT_PUBLIC_TZKT_URI_API}/v1/tokens?contract=${token.address}`
+      )
+        .then(t => t.json())
+        .then(([t]) =>
+          t.metadata.thumbnailUri
+            ? `https://ipfs.io/ipfs/${t.metadata.thumbnailUri.split('//')[1]}`
+            : undefined
+        );
+
+      return {
+        name: token.name,
+        address: token.address,
+        icon,
+      };
+    })
+  );
+};
+
 // ----- FETCH CONTRACT INFORMATIONS AND PARSING ------
 
 export const getPairsInformations = async (