From 20bef02de169063d83060322b650f862f88a6912 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 31 Mar 2024 15:58:26 +0100
Subject: [PATCH] more token refactor

---
 components/ResultRow/ResultRow.module.css | 34 -----------------------
 components/ResultRow/ResultRow.tsx        | 20 ++++---------
 components/Strategies/Buy.tsx             | 12 ++++----
 components/Strategies/Swap/Results.tsx    | 11 +++-----
 components/Strategies/Swap/Swap.tsx       |  2 +-
 components/TokenLogo/TokenLogo.module.css | 33 ++++++++++++++++++++++
 components/TokenLogo/TokenLogo.tsx        | 22 +++++++++++++++
 components/TokenLogo/index.tsx            |  1 +
 8 files changed, 72 insertions(+), 63 deletions(-)
 create mode 100644 components/TokenLogo/TokenLogo.module.css
 create mode 100644 components/TokenLogo/TokenLogo.tsx
 create mode 100644 components/TokenLogo/index.tsx

diff --git a/components/ResultRow/ResultRow.module.css b/components/ResultRow/ResultRow.module.css
index f288283..36d3450 100644
--- a/components/ResultRow/ResultRow.module.css
+++ b/components/ResultRow/ResultRow.module.css
@@ -24,37 +24,3 @@
 .iconArrow {
   margin-left: 0.25rem;
 }
-
-.logo {
-  margin-top: -0.15rem;
-  vertical-align: middle;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: rgba(var(--foreground-rgb), 0.5);
-}
-
-.logo img {
-  width: 23px;
-  height: 23px;
-  border-radius: 50%;
-  filter: grayscale(1);
-}
-
-.logo[data-symbol='AGIX'] img {
-  filter: invert(1) grayscale(1) contrast(1.5);
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo[data-symbol='OCEAN'] img,
-  .logo[data-symbol='FET'] img {
-    filter: invert(1) grayscale(1);
-  }
-
-  .logo[data-symbol='AGIX'] img {
-    filter: grayscale(1);
-  }
-}
diff --git a/components/ResultRow/ResultRow.tsx b/components/ResultRow/ResultRow.tsx
index 29fa508..c30b75d 100644
--- a/components/ResultRow/ResultRow.tsx
+++ b/components/ResultRow/ResultRow.tsx
@@ -1,11 +1,11 @@
 import styles from './ResultRow.module.css'
 import { formatNumber } from '@/utils'
 import { ArrowRightIcon } from '@radix-ui/react-icons'
-import Image from 'next/image'
+import { TokenLogo } from '../TokenLogo/TokenLogo'
+import { Token } from '@/types'
 
 type Props = {
-  tokenSymbol: string
-  tokenAddress: string
+  token: Token | undefined
   amount: number
   amountAsi: number
   amountFiat: number
@@ -14,8 +14,7 @@ type Props = {
 }
 
 export function Result({
-  tokenSymbol,
-  tokenAddress,
+  token,
   amount,
   amountAsi,
   amountFiat,
@@ -25,17 +24,10 @@ export function Result({
   return (
     <div className={styles.result}>
       <div className={styles.resultLine}>
-        <span className={styles.logo} data-symbol={tokenSymbol}>
-          <Image
-            src={`https://tokens.1inch.io/${tokenAddress}.png`}
-            width={24}
-            height={24}
-            alt={tokenSymbol}
-          />
-        </span>
+        <TokenLogo token={token} />
 
         <span className={isValidating ? 'isValidating' : ''}>
-          {formatNumber(amount || 0, tokenSymbol)}
+          {formatNumber(amount || 0, token?.symbol || '')}
         </span>
 
         {amountOriginalFiat ? (
diff --git a/components/Strategies/Buy.tsx b/components/Strategies/Buy.tsx
index 53d0bdb..6af278f 100644
--- a/components/Strategies/Buy.tsx
+++ b/components/Strategies/Buy.tsx
@@ -7,9 +7,10 @@ import { useDebounce } from 'use-debounce'
 import stylesShared from './styles.module.css'
 import { usePrices } from '@/hooks'
 import { FormAmount } from '@/components/FormAmount'
+import { getTokenBySymbol } from '@/utils'
 
 export function Buy() {
-  const { prices, isValidating, isLoading } = usePrices()
+  const { prices, isValidating } = usePrices()
   const [amount, setAmount] = useState(100)
   const [debouncedAmount] = useDebounce(amount, 500)
 
@@ -21,8 +22,7 @@ export function Buy() {
         right now gets you:
       </h3>
       <Result
-        tokenSymbol="OCEAN"
-        tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
+        token={getTokenBySymbol('OCEAN')}
         amount={prices.ocean ? debouncedAmount / prices.ocean : 0}
         amountAsi={
           prices.ocean ? (debouncedAmount / prices.ocean) * ratioOceanToAsi : 0
@@ -35,8 +35,7 @@ export function Buy() {
         isValidating={isValidating}
       />
       <Result
-        tokenSymbol="AGIX"
-        tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
+        token={getTokenBySymbol('AGIX')}
         amount={prices.agix ? debouncedAmount / prices.agix : 0}
         amountAsi={
           prices.agix ? (debouncedAmount / prices.agix) * ratioAgixToAsi : 0
@@ -49,8 +48,7 @@ export function Buy() {
         isValidating={isValidating}
       />
       <Result
-        tokenSymbol="FET"
-        tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
+        token={getTokenBySymbol('FET')}
         amount={prices.fet ? debouncedAmount / prices.fet : 0}
         amountAsi={
           prices.fet ? (debouncedAmount / prices.fet) * ratioFetToAsi : 0
diff --git a/components/Strategies/Swap/Results.tsx b/components/Strategies/Swap/Results.tsx
index 8d5f1a0..8545476 100644
--- a/components/Strategies/Swap/Results.tsx
+++ b/components/Strategies/Swap/Results.tsx
@@ -6,7 +6,7 @@ import {
   tokens
 } from '@/constants'
 import { usePrices } from '@/hooks'
-import { fetcher } from '@/utils'
+import { fetcher, getTokenBySymbol } from '@/utils'
 import useSWR from 'swr'
 import { TokenSymbol } from '@/types'
 
@@ -33,8 +33,7 @@ export function SwapResults({
   return (
     <>
       <Result
-        tokenSymbol="OCEAN"
-        tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
+        token={getTokenBySymbol('OCEAN')}
         amount={amount}
         amountAsi={amount * ratioOceanToAsi}
         amountFiat={amount * ratioOceanToAsi * prices.asi}
@@ -52,8 +51,7 @@ export function SwapResults({
       />
 
       <Result
-        tokenSymbol="AGIX"
-        tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
+        token={getTokenBySymbol('AGIX')}
         amount={
           dataSwapOceanToAgix?.amountOut /
             Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0
@@ -76,8 +74,7 @@ export function SwapResults({
       />
 
       <Result
-        tokenSymbol="FET"
-        tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
+        token={getTokenBySymbol('FET')}
         amount={
           dataSwapOceanToFet?.amountOut /
             Number(`1e${dataSwapOceanToFet?.decimals}`) || 0
diff --git a/components/Strategies/Swap/Swap.tsx b/components/Strategies/Swap/Swap.tsx
index 890bafa..4abe34d 100644
--- a/components/Strategies/Swap/Swap.tsx
+++ b/components/Strategies/Swap/Swap.tsx
@@ -20,7 +20,7 @@ export function Swap() {
           amount={amount}
           token={token}
           setAmount={setAmount}
-          // setToken={setToken}
+          setToken={setToken}
         />{' '}
         right now gets you:
       </h3>
diff --git a/components/TokenLogo/TokenLogo.module.css b/components/TokenLogo/TokenLogo.module.css
new file mode 100644
index 0000000..9233ab7
--- /dev/null
+++ b/components/TokenLogo/TokenLogo.module.css
@@ -0,0 +1,33 @@
+.logo {
+  margin-top: -0.15rem;
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: rgba(var(--foreground-rgb), 0.5);
+}
+
+.logo img {
+  width: 23px;
+  height: 23px;
+  border-radius: 50%;
+  filter: grayscale(1);
+}
+
+.logo[data-symbol='AGIX'] img {
+  filter: invert(1) grayscale(1) contrast(1.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo[data-symbol='OCEAN'] img,
+  .logo[data-symbol='FET'] img {
+    filter: invert(1) grayscale(1);
+  }
+
+  .logo[data-symbol='AGIX'] img {
+    filter: grayscale(1);
+  }
+}
diff --git a/components/TokenLogo/TokenLogo.tsx b/components/TokenLogo/TokenLogo.tsx
new file mode 100644
index 0000000..e09c6c0
--- /dev/null
+++ b/components/TokenLogo/TokenLogo.tsx
@@ -0,0 +1,22 @@
+import { Token } from '@/types'
+import Image from 'next/image'
+import styles from './TokenLogo.module.css'
+
+export function TokenLogo({
+  token,
+  size = 24
+}: {
+  token: Token | undefined
+  size?: number
+}) {
+  return token ? (
+    <span className={styles.logo} data-symbol={token.symbol}>
+      <Image
+        src={`https://tokens.1inch.io/${token.address}.png`}
+        width={size}
+        height={size}
+        alt={token.symbol}
+      />
+    </span>
+  ) : null
+}
diff --git a/components/TokenLogo/index.tsx b/components/TokenLogo/index.tsx
new file mode 100644
index 0000000..a5e2397
--- /dev/null
+++ b/components/TokenLogo/index.tsx
@@ -0,0 +1 @@
+export * from './TokenLogo'