From c5d3e1a19c2b71a54bfb33c6850cbc85e85a5650 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 12 Oct 2023 17:57:46 -0700
Subject: [PATCH] feat: add icon system for tokens

---
 apps/trading/client-pages/deposit/deposit.tsx | 20 ++++++---
 libs/ui-toolkit/src/components/index.ts       |  1 +
 .../src/components/token-icons/ethereum.tsx   | 45 +++++++++++++++++++
 .../src/components/token-icons/index.ts       |  1 +
 .../token-icons/token-icon-record.tsx         | 11 +++++
 .../src/components/token-icons/token-icon.tsx | 29 ++++++++++++
 .../src/components/token-icons/usdc.tsx       | 18 ++++++++
 .../src/components/token-icons/vega.tsx       | 43 ++++++++++++++++++
 8 files changed, 163 insertions(+), 5 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/token-icons/ethereum.tsx
 create mode 100644 libs/ui-toolkit/src/components/token-icons/index.ts
 create mode 100644 libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx
 create mode 100644 libs/ui-toolkit/src/components/token-icons/token-icon.tsx
 create mode 100644 libs/ui-toolkit/src/components/token-icons/usdc.tsx
 create mode 100644 libs/ui-toolkit/src/components/token-icons/vega.tsx

diff --git a/apps/trading/client-pages/deposit/deposit.tsx b/apps/trading/client-pages/deposit/deposit.tsx
index f67a8ecf1..e24ec7c6d 100644
--- a/apps/trading/client-pages/deposit/deposit.tsx
+++ b/apps/trading/client-pages/deposit/deposit.tsx
@@ -13,7 +13,12 @@ import {
   truncateByChars,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton, TradingInput } from '@vegaprotocol/ui-toolkit';
+import {
+  Intent,
+  TokenIcon,
+  TradingButton,
+  TradingInput,
+} from '@vegaprotocol/ui-toolkit';
 import { useWeb3React } from '@web3-react/core';
 import {
   EthTxStatus,
@@ -264,10 +269,15 @@ const DepositFlow = ({
             >
               <div className="flex flex-col flex-1 gap-1">
                 <div className="flex justify-between">
-                  <p className="text-lg">
-                    {a.symbol}{' '}
-                    <small>({truncateByChars(a.source.contractAddress)})</small>
-                  </p>
+                  <div className="flex items-center text-lg gap-2">
+                    <TokenIcon address={a.source.contractAddress} />
+                    <h3 className="text-lg">
+                      {a.symbol}{' '}
+                      <small>
+                        ({truncateByChars(a.source.contractAddress)})
+                      </small>
+                    </h3>
+                  </div>
                   <div className="text-right">
                     <Balance asset={a} />
                   </div>
diff --git a/libs/ui-toolkit/src/components/index.ts b/libs/ui-toolkit/src/components/index.ts
index 96fe2b9b8..622132b01 100644
--- a/libs/ui-toolkit/src/components/index.ts
+++ b/libs/ui-toolkit/src/components/index.ts
@@ -46,6 +46,7 @@ export * from './theme-switcher';
 export * from './thumbs';
 export * from './tiny-scroll';
 export * from './toast';
+export * from './token-icons';
 export * from './toggle';
 export * from './tooltip';
 export * from './traffic-light';
diff --git a/libs/ui-toolkit/src/components/token-icons/ethereum.tsx b/libs/ui-toolkit/src/components/token-icons/ethereum.tsx
new file mode 100644
index 000000000..e03b4c272
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/ethereum.tsx
@@ -0,0 +1,45 @@
+export const Ethereum = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      shape-rendering="geometricPrecision"
+      text-rendering="geometricPrecision"
+      image-rendering="optimizeQuality"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      viewBox="0 0 784.37 1277.39"
+    >
+      <polygon
+        fill="#343434"
+        fill-rule="nonzero"
+        points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54 "
+      />
+      <polygon
+        fill="#8C8C8C"
+        fill-rule="nonzero"
+        points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33 "
+      />
+      <polygon
+        fill="#3C3C3B"
+        fill-rule="nonzero"
+        points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89 "
+      />
+      <polygon
+        fill="#8C8C8C"
+        fill-rule="nonzero"
+        points="392.07,1277.38 392.07,956.52 -0,724.89 "
+      />
+      <polygon
+        fill="#141414"
+        fill-rule="nonzero"
+        points="392.07,882.29 784.13,650.54 392.07,472.33 "
+      />
+      <polygon
+        fill="#393939"
+        fill-rule="nonzero"
+        points="0,650.54 392.07,882.29 392.07,472.33 "
+      />
+    </svg>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/index.ts b/libs/ui-toolkit/src/components/token-icons/index.ts
new file mode 100644
index 000000000..0cd366ff0
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/index.ts
@@ -0,0 +1 @@
+export * from './token-icon';
diff --git a/libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx b/libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx
new file mode 100644
index 000000000..94488b8c3
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx
@@ -0,0 +1,11 @@
+import { Vega } from './vega';
+import { USDC } from './usdc';
+
+export const TokenIconMap: Record<
+  string,
+  ({ size }: { size: number }) => JSX.Element
+> = {
+  '0xdf1B0F223cb8c7aB3Ef8469e529fe81E73089BD9': Vega, // testnet vega
+  '0x62720E92FB7d77699A5D3754c429a3116900a84b': Vega, // stagnet vega
+  '0x40ff2D218740EF033b43B8Ce0342aEBC81934554': USDC, // stagnet usdc
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/token-icon.tsx b/libs/ui-toolkit/src/components/token-icons/token-icon.tsx
new file mode 100644
index 000000000..eef9ec689
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/token-icon.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { TokenIconMap } from './token-icon-record';
+
+interface TokenIconProps {
+  address: string;
+  size?: number;
+}
+
+export const TokenIcon = ({ address, size = 28 }: TokenIconProps) => {
+  const Element = TokenIconMap[address];
+  return (
+    <span className={classNames('inline-block', 'align-text-bottom')}>
+      {Element ? (
+        <Element size={size} />
+      ) : (
+        <span
+          style={{ width: size, height: size }}
+          className="flex items-center justify-center rounded-full bg-vega-clight-500 dark:bg-vega-cdark-500"
+        >
+          <span className="block text-[9px] font-mono leading-[0.9]">
+            ERC
+            <br />
+            20
+          </span>
+        </span>
+      )}
+    </span>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/usdc.tsx b/libs/ui-toolkit/src/components/token-icons/usdc.tsx
new file mode 100644
index 000000000..0e391e47c
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/usdc.tsx
@@ -0,0 +1,18 @@
+export const USDC = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 2000 2000">
+      <path
+        d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z"
+        fill="#2775ca"
+      />
+      <path
+        d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z"
+        fill="#fff"
+      />
+      <path
+        d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z"
+        fill="#fff"
+      />
+    </svg>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/vega.tsx b/libs/ui-toolkit/src/components/token-icons/vega.tsx
new file mode 100644
index 000000000..f350cb9ec
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/vega.tsx
@@ -0,0 +1,43 @@
+export const Vega = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 42 42">
+      <rect width="42" height="42" rx="21" fill="black" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 27.2726H16.4545V10H13V27.2726Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M25.667 23.8181H29.1215V10H25.667V23.8181Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.333 33.6059H22.7875V30.1514H19.333V33.6059Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.7871 30.7271H26.2416V27.2726H22.7871V30.7271Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.1211 27.2726H31.9999V23.8181H29.1211V27.2726Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.4551 30.7271H19.3339V27.2726H16.4551V30.7271Z"
+        fill="white"
+      />
+    </svg>
+  );
+};