From 90e1cef8e3f73e9856b363ecfe17684ba951bca8 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Sat, 5 Aug 2023 00:02:34 +0700
Subject: [PATCH] display all components/Icons file

---
 src/components/Icons/Swap_2.svg          |  6 ----
 src/components/Icons/ZkSyncFull.tsx      |  6 +---
 src/components/Icons/flame 8.svg         | 10 ------
 src/pages/About/AboutKyberSwap/index.tsx |  2 +-
 src/pages/Icons/index.tsx                | 40 +++++++++++++++++++++---
 5 files changed, 37 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/Icons/Swap_2.svg
 delete mode 100644 src/components/Icons/flame 8.svg

diff --git a/src/components/Icons/Swap_2.svg b/src/components/Icons/Swap_2.svg
deleted file mode 100644
index aec673d0f2..0000000000
--- a/src/components/Icons/Swap_2.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5H12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6 9L4 11L6 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 11H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 3L12 5L10 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/Icons/ZkSyncFull.tsx b/src/components/Icons/ZkSyncFull.tsx
index 7ef2a5233f..a55f65a82c 100644
--- a/src/components/Icons/ZkSyncFull.tsx
+++ b/src/components/Icons/ZkSyncFull.tsx
@@ -1,8 +1,4 @@
-import { useIsDarkMode } from 'state/user/hooks'
-
-const ZkSyncFull = () => {
-  const isDarkMode = useIsDarkMode()
-  const fill = isDarkMode ? 'white' : 'black'
+const ZkSyncFull = ({ color: fill }: { color: string }) => {
   return (
     <svg width="125" height="25" viewBox="0 0 125 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask
diff --git a/src/components/Icons/flame 8.svg b/src/components/Icons/flame 8.svg
deleted file mode 100644
index fd56073deb..0000000000
--- a/src/components/Icons/flame 8.svg	
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_8903_111793)">
-<path d="M17.4573 11.7097C17.2282 8.72695 15.8394 6.85777 14.6143 5.20832C13.4798 3.68129 12.5 2.36262 12.5 0.41738C12.5 0.26113 12.4125 0.118318 12.2738 0.0467163C12.1346 -0.025315 11.9673 -0.0135181 11.8408 0.078435C10.0008 1.39508 8.46559 3.61418 7.9293 5.73152C7.55699 7.20562 7.50773 8.86281 7.50082 9.9573C5.8016 9.59437 5.41668 7.05266 5.41262 7.02496C5.39348 6.89312 5.31293 6.7784 5.19574 6.71574C5.07734 6.65391 4.93816 6.64941 4.81813 6.70883C4.72902 6.75195 2.63102 7.81797 2.50895 12.0743C2.50039 12.2159 2.5 12.3579 2.5 12.4999C2.5 16.6349 5.86465 19.9994 10 19.9994C10.0057 19.9998 10.0118 20.0006 10.0167 19.9994C10.0183 19.9994 10.0199 19.9994 10.022 19.9994C14.1471 19.9875 17.5 16.6276 17.5 12.4999C17.5 12.292 17.4573 11.7097 17.4573 11.7097ZM10 19.1661C8.62141 19.1661 7.5 17.9715 7.5 16.5031C7.5 16.4531 7.49961 16.4026 7.50324 16.3408C7.51992 15.7215 7.63754 15.2988 7.76652 15.0176C8.00824 15.5368 8.44035 16.0141 9.14227 16.0141C9.37258 16.0141 9.55895 15.8277 9.55895 15.5974C9.55895 15.0042 9.57117 14.3198 9.71887 13.7022C9.85031 13.1545 10.1644 12.5719 10.5624 12.1048C10.7394 12.7111 11.0845 13.2017 11.4214 13.6806C11.9036 14.3658 12.402 15.0742 12.4895 16.2822C12.4948 16.3538 12.5001 16.4258 12.5001 16.5031C12.5 17.9715 11.3786 19.1661 10 19.1661Z" fill="#31CB9E"/>
-</g>
-<defs>
-<clipPath id="clip0_8903_111793">
-<rect width="20" height="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/pages/About/AboutKyberSwap/index.tsx b/src/pages/About/AboutKyberSwap/index.tsx
index 5c38f38f76..7b6fe7df11 100644
--- a/src/pages/About/AboutKyberSwap/index.tsx
+++ b/src/pages/About/AboutKyberSwap/index.tsx
@@ -1044,7 +1044,7 @@ function AboutKyberSwap() {
               <img src={isDarkMode ? BTTCDark : BTTCLight} alt="btt" width="100%" />
               <OptimismLogoFull />
               {/* <SolanaLogoFull /> */}
-              <ZkSyncFull />
+              <ZkSyncFull color={theme.text} />
               <LineaFull />
             </Powered>
           </Text>
diff --git a/src/pages/Icons/index.tsx b/src/pages/Icons/index.tsx
index d1f82836b8..91c8a8fb57 100644
--- a/src/pages/Icons/index.tsx
+++ b/src/pages/Icons/index.tsx
@@ -1,16 +1,17 @@
 import { rgba } from 'polished'
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
 import sprite from 'assets/svg/sprite.svg'
 import { NotificationType } from 'components/Announcement/type'
-import * as IconComponents from 'components/Icons'
 import { ICON_IDS } from 'constants/index'
 import useCopyClipboard from 'hooks/useCopyClipboard'
+import useTheme from 'hooks/useTheme'
 import { useNotify } from 'state/application/hooks'
 
 const allSvgFiles = import.meta.glob('../../assets/svg/*')
+const allIconComponentsFiles = import.meta.glob('../../components/Icons/*')
 
 const Wrapper = styled.div`
   display: flex;
@@ -63,8 +64,10 @@ const camelizeSnake = (st: string) =>
 
 export default function Icons() {
   const [svgComponents, setSvgComponents] = useState<any>([])
+  const [iconComponents, setIconComponents] = useState<any>([])
   const [copied, setCopied] = useCopyClipboard(2000)
   const notify = useNotify()
+  const theme = useTheme()
 
   const onClick = useCallback(
     (id: string) => {
@@ -100,6 +103,24 @@ export default function Icons() {
         )
       })
       .catch(console.error)
+
+    const componentArr = Object.keys(allIconComponentsFiles).map(key => ({
+      id: key.split('/').pop()?.replace('.tsx', ''),
+      fn: allIconComponentsFiles[key](),
+    }))
+    Promise.all(componentArr.map(el => el.fn))
+      .then(data => {
+        setIconComponents(
+          data.map((e: any, i) => {
+            const id = componentArr[i].id
+            return {
+              render: e.default || (() => null),
+              id,
+            }
+          }),
+        )
+      })
+      .catch(console.error)
   }, [])
   return (
     <>
@@ -135,10 +156,19 @@ export default function Icons() {
       </Wrapper>
       <h2>All icons in: folder /components/Icons </h2>
       <Wrapper>
-        {Object.entries(IconComponents).map(([key, component]) => {
+        {iconComponents.map((el: any) => {
+          const key: string = el.id
           return (
-            <IconWrapperV2 key={key} onClick={() => onClick(`import { ${key} } from 'components/Icons'`)}>
-              {component?.({})}
+            <IconWrapperV2 key={key} onClick={() => onClick(`import ${key} from 'components/Icons/${key}'`)}>
+              {(() => {
+                try {
+                  return typeof el?.render === 'function'
+                    ? el.render({ color: theme.text })
+                    : React.createElement(el?.render)
+                } catch (error) {
+                  return 'Display Error'
+                }
+              })()}
               <Text fontSize={10} style={{ wordBreak: 'break-all' }}>
                 {key}.tsx
               </Text>