Polish chain & token icons (wormhole-foundation#2568)

* new ETH icon * more visible modal color * put chain icon into opaque box
wormholelabs-xyz · Sep 11, 2024 · c1716b7 · c1716b7
1 parent 79dd5a7
commit c1716b7
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 17 deletions.
diff --git a/wormhole-connect/src/config/mainnet/tokens.ts b/wormhole-connect/src/config/mainnet/tokens.ts
@@ -7,7 +7,7 @@ export const MAINNET_TOKENS: TokensConfig = {
     nativeChain: 'Ethereum',
     icon: Icon.ETH,
     coinGeckoId: 'ethereum',
-    color: '#62688F',
+    color: '#38487d',
     decimals: 18,
     wrappedAsset: 'WETH',
   },

diff --git a/wormhole-connect/src/icons/Tokens/ETH.tsx b/wormhole-connect/src/icons/Tokens/ETH.tsx
@@ -3,20 +3,53 @@ import React from 'react';
 function ETH() {
   return (
     <svg
-      style={{ maxHeight: '100%', maxWidth: '100%' }}
       xmlns="http://www.w3.org/2000/svg"
-      width="1920"
-      height="1920"
-      viewBox="0 0 1920 1920"
+      version="1.1"
+      viewBox="0 0 182 182"
+      style={{ maxHeight: '100%', maxWidth: '100%' }}
     >
-      <path fill="#8A92B2" d="M959.8 80.7L420.1 976.3 959.8 731z"></path>
-      <path
-        fill="#62688F"
-        d="M959.8 731L420.1 976.3l539.7 319.1zm539.8 245.3L959.8 80.7V731z"
-      ></path>
-      <path fill="#454A75" d="M959.8 1295.4l539.8-319.1L959.8 731z"></path>
-      <path fill="#8A92B2" d="M420.1 1078.7l539.7 760.6v-441.7z"></path>
-      <path fill="#62688F" d="M959.8 1397.6v441.7l540.1-760.6z"></path>
+      <g>
+        <g id="Layer_1" focusable="false">
+          <g>
+            <path
+              d="M90.9,181v-45.2l-55.9-32.7,55.9,77.8Z"
+              fill="#f0cdc2"
+              stroke="#1616b4"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M91.1,181v-45.2l55.9-32.7-55.9,77.8Z"
+              fill="#c9b3f5"
+              stroke="#1616b4"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M90.9,124.6v-57.6l-56.5,25.3,56.5,32.3Z"
+              fill="#88aaf1"
+              stroke="#1616b4"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M91.1,124.6v-57.6l56.5,25.3-56.5,32.3Z"
+              fill="#c9b3f5"
+              stroke="#1616b4"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M34.4,92.3L90.9,1v66l-56.5,25.3Z"
+              fill="#f0cdc2"
+              stroke="#1616b4"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M147.6,92.3L91.1,1v66l56.5,25.3Z"
+              fill="#b8faf6"
+              stroke="#1616b4"
+              stroke-linejoin="round"
+            />
+          </g>
+        </g>
+      </g>
     </svg>
   );
 }

diff --git a/wormhole-connect/src/theme.ts b/wormhole-connect/src/theme.ts
@@ -297,7 +297,7 @@ export const dark: WormholeConnectTheme = {
     elevation: 'none',
   },
   modal: {
-    background: '#17171D',
+    background: '#181a2d',
   },
   font: {
     primary: '"Inter", sans-serif',

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx
@@ -23,8 +23,9 @@ import { isDisabledChain } from 'store/transferInput';
 import ChainList from './ChainList';
 import TokenList from './TokenList';
 import { Chain } from '@wormhole-foundation/sdk';
+import { Box } from '@mui/material';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()((theme: any) => ({
   container: {
     marginTop: '4px',
   },
@@ -53,6 +54,12 @@ const useStyles = makeStyles()((theme) => ({
     cursor: 'not-allowed',
     clickEvent: 'none',
   },
+  chainBadge: {
+    padding: '2px',
+    background: theme.palette.background.default,
+    borderRadius: '6px',
+    border: `2px solid ${theme.palette.modal.background}`,
+  },
 }));
 
 type Props = {
@@ -113,12 +120,20 @@ const AssetPicker = (props: Props) => {
   const badges = useMemo(() => {
     return (
       <Badge
-        badgeContent={<TokenIcon icon={chainConfig?.icon} height={24} />}
+        badgeContent={
+          <>
+            {chainConfig ? (
+              <Box className={classes.chainBadge}>
+                <TokenIcon icon={chainConfig?.icon} height={18} />
+              </Box>
+            ) : null}
+          </>
+        }
         sx={{
           marginRight: '8px',
           '& .MuiBadge-badge': {
             right: 2,
-            top: 36,
+            top: 44,
           },
         }}
       >