improve get icon ft (#455)

* improve get icon ft * fix and add story
massalabs · Jun 5, 2024 · f5f51dd · f5f51dd
1 parent a511892
commit f5f51dd
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/src/components/Icons/Svg/FT/FTIcons.stories.tsx b/src/components/Icons/Svg/FT/FTIcons.stories.tsx
@@ -22,6 +22,20 @@ const bscSymbolList = ['DAI', 'BNB', 'USDC', 'WETH', 'USDT'];
 
 const ethSymbolList = ['DAI', 'USDC', 'WETH'];
 
+const allSymbols = [
+  'WETH.e',
+  'WETH.s',
+  'WETH.b',
+  'WETH.bt',
+  'USDC.e',
+  'USDC.s',
+  'USDT.b',
+  'USDT.bt',
+  'DAI.e',
+  'tDAI.s',
+  'tDAI',
+];
+
 export const _FT = {
   render: () => (
     <>
@@ -131,3 +145,31 @@ export const _FT = {
     </>
   ),
 };
+
+export const _FT2 = {
+  render: () => (
+    <>
+      <div className="flex flex-col gap-6">
+        <h2 className="text-neutral">Guess the origin chain from the symbol</h2>
+
+        <div className="flex flex-wrap gap-4">
+          {allSymbols.map((symbol: string, index: number) => {
+            return <div key={index}>{getAssetIcons(symbol)}</div>;
+          })}
+        </div>
+
+        <h2 className="text-neutral">
+          Guess the origin chain from the symbol, bridged
+        </h2>
+
+        <div className="flex flex-wrap gap-4">
+          {allSymbols.map((symbol: string, index: number) => {
+            return (
+              <div key={index}>{getAssetIcons(symbol, undefined, false)}</div>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  ),
+};
diff --git a/src/components/Icons/Svg/FT/tokenIcons.tsx b/src/components/Icons/Svg/FT/tokenIcons.tsx
@@ -14,6 +14,27 @@ import {
   SepoliaBridged,
 } from '../ChainIcons';
 
+export const mapSymbolWithoutExtension = {
+  'WETH.e': 'WETH',
+  'WETH.s': 'WETH',
+  'WETH.b': 'WETH',
+  'WETH.bt': 'WETH',
+  'USDC.e': 'USDC',
+  'USDC.s': 'USDC',
+  'USDT.b': 'USDT',
+  'USDT.bt': 'USDT',
+  'DAI.e': 'DAI',
+  'tDAI.s': 'DAI',
+  tDAI: 'DAI',
+};
+
+export const tokenExtensionToChainId = {
+  e: mainnet.id,
+  s: sepolia.id,
+  b: bsc.id,
+  bt: bscTestnet.id,
+};
+
 export function createBridgedFt(
   ChainIcon: React.FC<SVGProps>,
   FtIcon: React.FC<SVGProps>,
@@ -51,6 +72,23 @@ export function getAssetIcons(
   isNative = true,
   size?: number,
 ): ReactNode {
+  // retrieve the icon of the token
+  const extension = getExtension(symbol);
+  if (!originChainId && extension && extension in tokenExtensionToChainId) {
+    originChainId =
+      tokenExtensionToChainId[
+        extension as keyof typeof tokenExtensionToChainId
+      ];
+  }
+
+  // remove the extension from the symbol or map to the correct symbol (eg. tDAI -> DAI)
+  if (symbol in mapSymbolWithoutExtension) {
+    symbol =
+      mapSymbolWithoutExtension[
+        symbol as keyof typeof mapSymbolWithoutExtension
+      ];
+  }
+
   const icons = {
     // Native
     BNB: createNativeFt(BNB, size),
@@ -64,6 +102,7 @@ export function getAssetIcons(
     ...getTokenIcons(isNative, originChainId, size),
   };
 
+  // return the icon
   if (symbol in icons) {
     return icons[symbol as keyof typeof icons];
   } else {
@@ -110,3 +149,7 @@ function getTokenIcons(
   }
   return {};
 }
+
+function getExtension(symbol: string) {
+  return symbol.split('.').pop();
+}