fix(bridge-ui-v2): missing TTKO icon (#14754)

taikoxyz · Sep 20, 2023 · 3bb4fd2 · 3bb4fd2 · vercel · Sep 20, 2023
1 parent 40bbaf1
commit 3bb4fd2
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 7 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Icon/TTKO.svelte b/packages/bridge-ui-v2/src/components/Icon/TTKO.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let size = 20;
+  export let width: number = size;
+  export let height: number = size;
+  const originalViewBoxWidth = 28;
+  const targetViewBoxSize = 32;
+  const scale: number = targetViewBoxSize / originalViewBoxWidth;
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox={`0 0 ${targetViewBoxSize} ${targetViewBoxSize}`}
+  xmlns="http://www.w3.org/2000/svg"
+  preserveAspectRatio="xMinYMin meet">
+  <g transform={`scale(${scale})`}>
+    <circle cx="14" cy="14" r="14" fill="#E81899" />
+    <path
+      d="M22.2414 17.4401L19.2931 13.4344C18.9728 12.9991 18.4985 12.7384 17.9934 12.6809C17.8784 12.6675 17.7758 12.6008 17.7183 12.5002C17.6598 12.3996 17.6536 12.2774 17.6998 12.1707C17.902 11.7046 17.9144 11.1636 17.6967 10.6688L15.7021 6.11281C15.4064 5.4363 14.7381 5 14 5C13.2619 5 12.5936 5.43732 12.2979 6.11281L10.3033 10.6688C10.0867 11.1636 10.098 11.7046 10.3002 12.1707C10.3464 12.2774 10.3392 12.3996 10.2817 12.5002C10.2232 12.6008 10.1216 12.6675 10.0066 12.6809C9.50153 12.7384 9.02725 12.9991 8.70696 13.4344L5.75862 17.4401C5.3213 18.0345 5.27716 18.8311 5.6457 19.4707C6.01527 20.1092 6.72771 20.4695 7.46069 20.3884L12.4037 19.8382C12.9406 19.7786 13.4036 19.4984 13.7054 19.0898C13.7742 18.9964 13.884 18.941 14 18.941C14.116 18.941 14.2248 18.9964 14.2946 19.0898C14.5965 19.4984 15.0594 19.7786 15.5963 19.8382L20.5393 20.3884C21.2723 20.4706 21.9847 20.1102 22.3543 19.4707C22.7229 18.8311 22.6787 18.0345 22.2414 17.4401ZM11.5927 11.2406L13.5904 6.67948C13.6623 6.51626 13.8234 6.41052 14.001 6.41052C14.1786 6.41052 14.3398 6.51626 14.4117 6.67948L16.4094 11.2406C16.472 11.3843 16.4587 11.5506 16.3724 11.682C16.2862 11.8134 16.1404 11.8925 15.9823 11.8925H12.0187C11.8616 11.8925 11.7148 11.8134 11.6286 11.682C11.5424 11.5506 11.529 11.3843 11.5916 11.2406H11.5927ZM12.6182 18.1844C12.5474 18.325 12.4098 18.4195 12.2538 18.4369L7.30568 18.9871C7.12911 19.0067 6.95664 18.9204 6.86733 18.7664C6.77802 18.6124 6.78931 18.4205 6.89505 18.2768L9.84646 14.2669C9.93988 14.1407 10.0898 14.0688 10.2468 14.078C10.4039 14.0863 10.5456 14.1735 10.6246 14.3101L10.6277 14.3152L12.6039 17.7378L12.6069 17.7429C12.686 17.8795 12.6901 18.0458 12.6193 18.1854L12.6182 18.1844ZM14.4065 16.6363C14.3224 16.781 14.1684 16.8714 14 16.8714C13.8327 16.8714 13.6777 16.7821 13.5935 16.6373L12.0752 14.0082C11.991 13.8635 11.991 13.6838 12.0752 13.5391C12.1593 13.3943 12.3133 13.304 12.4817 13.304H15.5173C15.6846 13.304 15.8396 13.3923 15.9238 13.5381C16.008 13.6838 16.008 13.8625 15.9238 14.0072L14.4065 16.6363ZM21.1337 18.7664C21.0444 18.9204 20.873 19.0077 20.6954 18.9882L15.7472 18.4379C15.5912 18.4205 15.4536 18.326 15.3828 18.1854C15.312 18.0447 15.3161 17.8784 15.3951 17.7429L15.3982 17.7378L17.3744 14.3152L17.3775 14.3101C17.4565 14.1735 17.5982 14.0863 17.7552 14.078C17.9123 14.0698 18.0622 14.1407 18.1556 14.2669L21.107 18.2768C21.2128 18.4205 21.223 18.6124 21.1347 18.7664H21.1337Z"
+      fill="#FAFAFA" />
+  </g></svg>
diff --git a/packages/bridge-ui-v2/src/components/Icon/index.ts b/packages/bridge-ui-v2/src/components/Icon/index.ts
@@ -2,3 +2,4 @@ export { default as BllIcon } from './BLL.svelte';
 export { default as EthIcon } from './ETH.svelte';
 export { default as HorseIcon } from './HORSE.svelte';
 export { default as Icon, type IconType } from './Icon.svelte';
+export { default as TTKOIcon } from './TTKO.svelte';
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -77,9 +77,15 @@
             class:bg-tertiary-interactive-accent={selected}
             on:click={() => selectToken(token)}>
             <div class="p-4">
-              <i role="img" aria-label={token.name}>
-                <svelte:component this={symbolToIconMap[token.symbol]} />
-              </i>
+              {#if symbolToIconMap[token.symbol] && !token.imported}
+                <i role="img" aria-label={token.name}>
+                  <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
+                </i>
+              {:else}
+                <i role="img" aria-label={token.symbol}>
+                  <svelte:component this={Erc20} size={28} />
+                </i>
+              {/if}
               <span class="body-bold">{token.symbol}</span>
             </div>
           </li>

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
@@ -69,7 +69,8 @@
       on:click={() => selectToken(t)}
       on:keydown={getTokenKeydownHandler(t)}>
       <div class="p-4">
-        {#if symbolToIconMap[t.symbol]}
+        <!-- Only match icons to configurd tokens -->
+        {#if symbolToIconMap[t.symbol] && !t.imported}
           <i role="img" aria-label={t.name}>
             <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
           </i>

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -132,7 +132,8 @@
       {/if}
       {#if value}
         <div class="flex space-x-2 items-center">
-          {#if symbolToIconMap[value.symbol]}
+          <!-- Only match icons to configurd tokens -->
+          {#if symbolToIconMap[value.symbol] && !value.imported}
             <i role="img" aria-label={value.name}>
               <svelte:component this={symbolToIconMap[value.symbol]} size={28} />
             </i>

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/symbolToIconMap.ts b/packages/bridge-ui-v2/src/components/TokenDropdown/symbolToIconMap.ts
@@ -1,9 +1,24 @@
 import type { ComponentType } from 'svelte';
 
-import { BllIcon, EthIcon, HorseIcon } from '$components/Icon';
+import { BllIcon, EthIcon, HorseIcon, TTKOIcon } from '$components/Icon';
 
-export const symbolToIconMap: Record<string, ComponentType> = {
+export const baseSymbolToIconMap: Record<string, ComponentType> = {
   ETH: EthIcon,
   BLL: BllIcon,
   HORSE: HorseIcon,
 };
+
+/**
+ * The TTKO symbol changes depending on the layer or testnet, we intercept it
+ * As we will only match configured tokens we don't need to worry
+ * about other tokens that might start with TTKO
+ * TODO: Remove once we are on mainnet?
+ */
+export const symbolToIconMap = new Proxy(baseSymbolToIconMap, {
+  get(target, prop: string) {
+    if (prop.startsWith('TTKO')) {
+      return TTKOIcon;
+    }
+    return target[prop] || null;
+  },
+});