add token symbols

components/Prices.tsx

@@ -24,12 +24,14 @@ export function Prices() {
     `/api/prices/?tokens=${tokens.toString()}`,
     fetcher
   )
+
   const { data: dataSwapOceanToAgix } = useSWR(
     `/api/quote/?src=${tokens[0]}&dst=${tokens[2]}&amount=${
       debouncedAmountSwap * 1e18
     }`,
     fetcher
   )
+  console.log(dataSwapOceanToAgix)
 
   const { data: dataSwapOceanToFet } = useSWR(
     `/api/quote/?src=${tokens[0]}&dst=${tokens[1]}&amount=${
@@ -49,7 +51,8 @@ export function Prices() {
         <div className={styles.results}>
           <h3>Buying with ${exampleBuyInUsd} right now gets you:</h3>
           <Result
-            symbol="OCEAN"
+            tokenSymbol="OCEAN"
+            tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
             amount={exampleBuyInUsd / priceOcean}
             amountAsi={(exampleBuyInUsd / priceOcean) * ratioOceanToAsi}
             amountFiat={
@@ -57,7 +60,8 @@ export function Prices() {
             }
           />
           <Result
-            symbol="AGIX"
+            tokenSymbol="AGIX"
+            tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
             amount={exampleBuyInUsd / priceAgix}
             amountAsi={(exampleBuyInUsd / priceAgix) * ratioAgixToAsi}
             amountFiat={
@@ -65,7 +69,8 @@ export function Prices() {
             }
           />
           <Result
-            symbol="FET"
+            tokenSymbol="FET"
+            tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
             amount={exampleBuyInUsd / priceFet}
             amountAsi={(exampleBuyInUsd / priceFet) * ratioFetToAsi}
             amountFiat={(exampleBuyInUsd / priceFet) * ratioFetToAsi * priceAsi}
@@ -80,14 +85,16 @@ export function Prices() {
           </h3>
 
           <Result
-            symbol="OCEAN"
+            tokenSymbol="OCEAN"
+            tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
             amount={debouncedAmountSwap}
             amountAsi={debouncedAmountSwap * ratioOceanToAsi}
             amountFiat={debouncedAmountSwap * ratioOceanToAsi * priceAsi}
           />
 
           <Result
-            symbol="AGIX"
+            tokenSymbol="AGIX"
+            tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
             amount={
               dataSwapOceanToAgix?.dstAmount /
                 Number(`1e${dataSwapOceanToAgix?.dstToken?.decimals}`) || 0
@@ -106,7 +113,8 @@ export function Prices() {
           />
 
           <Result
-            symbol="FET"
+            tokenSymbol="FET"
+            tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
             amount={
               dataSwapOceanToFet?.dstAmount /
                 Number(`1e${dataSwapOceanToFet?.dstToken?.decimals}`) || 0

components/Result.module.css

@@ -6,5 +6,41 @@
   margin-bottom: 0;
 }
 
-.amount {
+.conversion {
+  padding-left: calc(24px + 0.5rem);
+}
+
+.logo {
+  margin-right: 0.5rem;
+  margin-top: -0.2rem;
+  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);
+}
+
+@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);
+  }
 }

components/Result.tsx

@@ -1,18 +1,37 @@
 import styles from './Result.module.css'
 import { formatNumber } from '../utils'
+import Image from 'next/image'
 
 type Props = {
-  symbol: string
+  tokenSymbol: string
+  tokenAddress: string
   amount: number
   amountAsi: number
   amountFiat: number
 }
 
-export function Result({ symbol, amount, amountAsi, amountFiat }: Props) {
+export function Result({
+  tokenSymbol,
+  tokenAddress,
+  amount,
+  amountAsi,
+  amountFiat
+}: Props) {
   return (
     <div className={styles.result}>
-      <p>{formatNumber(amount, symbol)}</p>
       <p>
+        <span className={styles.logo} data-symbol={tokenSymbol}>
+          <Image
+            src={`https://tokens.1inch.io/${tokenAddress}.png`}
+            width={24}
+            height={24}
+            alt={tokenSymbol}
+          />
+        </span>
+
+        {formatNumber(amount, tokenSymbol)}
+      </p>
+      <p className={styles.conversion}>
         →{' '}
         <strong title={`${amountAsi}`}>{formatNumber(amountAsi, 'ASI')}</strong>{' '}
         = <strong>{formatNumber(amountFiat, 'USD')}</strong>

next.config.mjs

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'tokens.1inch.io',
+        pathname: '/**'
+      }
+    ]
+  }
+}
 
-export default nextConfig;
+export default nextConfig