UX Multichain: updated ethereum logo icon (#18528)

* updated ethereum logo icon * Updating eth logo (#18631) * Updating eth logo * Removing border from eth logo identicon * Removing old eth logo * updated snapshot and lint errors * updated eth logo from svg to png --------- Co-authored-by: George Marshall <george.marshall@consensys.net>
2024-12-22 09:23:21 +01:00 · 2023-04-19 20:55:19 +05:30 · 2023-04-19 20:55:19 +05:30 · d362dbfacb
commit d362dbfacb
parent 02e8e9c679
22 changed files with 26 additions and 50 deletions
--- a/.storybook/initial-states/approval-screens/add-suggested-token.js
+++ b/.storybook/initial-states/approval-screens/add-suggested-token.js
@ -4,7 +4,7 @@ export const suggestedAssets = [
      address: '0x6b175474e89094c44da98b954eedeac495271d0f',
      symbol: 'ETH',
      decimals: 18,
-      image: './images/eth_logo.svg',
+      image: './images/eth_logo.png',
      unlisted: false,
    },
  },
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@ -174,7 +174,7 @@ const state = {
        address: '0x6b175474e89094c44da98b954eedeac495271d0f',
        symbol: 'ETH',
        decimals: 18,
-        image: './images/eth_logo.svg',
+        image: './images/eth_logo.png',
        unlisted: false,
      },
      '0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {
--- a/app/images/eth_logo.png
+++ b/app/images/eth_logo.png
--- a/app/images/eth_logo.svg
+++ b/app/images/eth_logo.svg
@ -1,18 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#343434;}
-	.st1{fill:#8C8C8C;}
-	.st2{fill:#3C3C3B;}
-	.st3{fill:#141414;}
-	.st4{fill:#393939;}
-</style>
-<g id="XMLID_1_">
-	<polygon id="XMLID_2_" class="st0" points="250,67.5 247.5,75.8 247.5,317.2 250,319.6 362,253.4 	"/>
-	<polygon id="XMLID_3_" class="st1" points="250,67.5 137.9,253.4 250,319.6 250,202.5 	"/>
-	<polygon id="XMLID_4_" class="st2" points="250,340.8 248.6,342.5 248.6,428.5 250,432.5 362.1,274.6 	"/>
-	<polygon id="XMLID_5_" class="st1" points="250,432.5 250,340.8 137.9,274.6 	"/>
-	<polygon id="XMLID_6_" class="st3" points="250,319.6 362,253.4 250,202.5 	"/>
-	<polygon id="XMLID_7_" class="st4" points="137.9,253.4 250,319.6 250,202.5 	"/>
-</g>
-</svg>
--- a/shared/constants/network.ts
+++ b/shared/constants/network.ts
@ -221,7 +221,7 @@ export const CURRENCY_SYMBOLS = {
  OPTIMISM: 'OP',
 } as const;

-export const ETH_TOKEN_IMAGE_URL = './images/eth_logo.svg';
+export const ETH_TOKEN_IMAGE_URL = './images/eth_logo.png';
 export const TEST_ETH_TOKEN_IMAGE_URL = './images/black-eth-logo.svg';
 export const BNB_TOKEN_IMAGE_URL = './images/bnb.png';
 export const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';
--- a/ui/components/app/asset-list-item/asset-list-item.js
+++ b/ui/components/app/asset-list-item/asset-list-item.js
@ -35,7 +35,6 @@ const AssetListItem = ({
  warning,
  primary,
  secondary,
-  identiconBorder,
  isERC721,
 }) => {
  const t = useI18nContext();
@ -137,7 +136,6 @@ const AssetListItem = ({
          address={tokenAddress}
          image={tokenImage}
          alt={`${primary} ${tokenSymbol}`}
-          imageBorder={identiconBorder}
        />
      }
      midContent={midContent}
@ -170,7 +168,6 @@ AssetListItem.propTypes = {
  warning: PropTypes.node,
  primary: PropTypes.string,
  secondary: PropTypes.string,
-  identiconBorder: PropTypes.bool,
  isERC721: PropTypes.bool,
 };

--- a/ui/components/app/asset-list-item/asset-list-item.stories.js
+++ b/ui/components/app/asset-list-item/asset-list-item.stories.js
@ -34,9 +34,6 @@ export default {
    secondary: {
      control: 'text',
    },
-    identiconBorder: {
-      control: 'boolean',
-    },
    isERC721: {
      control: 'boolean',
    },
@ -44,7 +41,7 @@ export default {
  args: {
    tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
    tokenSymbol: 'ETH',
-    tokenImage: './images/eth_logo.svg',
+    tokenImage: './images/eth_logo.png',
    identiconBorder: true,
  },
 };
--- a/ui/components/app/wallet-overview/eth-overview.js
+++ b/ui/components/app/wallet-overview/eth-overview.js
@ -273,7 +273,7 @@ const EthOverview = ({ className }) => {
        </>
      }
      className={className}
-      icon={<Identicon diameter={32} image={primaryTokenImage} imageBorder />}
+      icon={<Identicon diameter={32} image={primaryTokenImage} />}
    />
  );
 };
--- a/ui/components/component-library/avatar-base/README.mdx
+++ b/ui/components/component-library/avatar-base/README.mdx
@ -59,7 +59,7 @@ The `AvatarBase` component can contain images, icons or text
 ```jsx
 import { AvatarBase } from '../../component-library';
 <AvatarBase>
-  <img src="./images/eth_logo.svg" />
+  <img src="./images/eth_logo.png" />
 </AvatarBase>
 <AvatarBase>
  <img width="100%" src="./images/arbitrum.svg" />
--- a/ui/components/component-library/avatar-base/avatar-base.stories.js
+++ b/ui/components/component-library/avatar-base/avatar-base.stories.js
@ -110,7 +110,7 @@ export const Size = (args) => (
 export const Children = (args) => (
  <Box display={DISPLAY.FLEX} gap={1}>
    <AvatarBase {...args}>
-      <img src="./images/eth_logo.svg" />
+      <img src="./images/eth_logo.png" />
    </AvatarBase>
    <AvatarBase {...args}>
      <img width="100%" src="./images/arbitrum.svg" />
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
@ -6,7 +6,7 @@ import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';

 describe('AvatarFavicon', () => {
  const args = {
-    src: './images/eth_logo.svg',
+    src: './images/eth_logo.png',
    name: 'test',
  };

--- a/ui/components/component-library/avatar-network/avatar-network.test.js
+++ b/ui/components/component-library/avatar-network/avatar-network.test.js
@ -13,7 +13,7 @@ import { AvatarNetwork } from './avatar-network';
 describe('AvatarNetwork', () => {
  const args = {
    name: 'ethereum',
-    src: './images/eth_logo.svg',
+    src: './images/eth_logo.png',
    showHalo: false,
  };

--- a/ui/components/component-library/avatar-token/README.mdx
+++ b/ui/components/component-library/avatar-token/README.mdx
@ -72,7 +72,7 @@ Use the `src` prop to set the image to be rendered of the `AvatarToken`.
 ```jsx
 import { AvatarToken } from '../../component-library';

-<AvatarToken src="./images/eth_logo.svg" />
+<AvatarToken src="./images/eth_logo.png" />
 <AvatarToken src="./images/arbitrum.svg" />
 <AvatarToken src="./images/bnb.png" />
 <AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png" />
@ -92,7 +92,7 @@ Use the `showHalo` prop to display the component with halo effect. Only works if
 ```jsx
 import { AvatarToken } from '../../component-library';

-<AvatarToken src="./images/eth_logo.svg" showHalo />;
+<AvatarToken src="./images/eth_logo.png" showHalo />;
 ```

 ### Color, Background Color And Border Color
--- a/ui/components/component-library/avatar-token/avatar-token.stories.js
+++ b/ui/components/component-library/avatar-token/avatar-token.stories.js
@ -61,7 +61,7 @@ export default {
  },
  args: {
    name: 'eth',
-    src: './images/eth_logo.svg',
+    src: './images/eth_logo.png',
    size: Size.MD,
    showHalo: false,
  },
@ -126,7 +126,7 @@ export const SizeStory = (args) => (
      <BadgeWrapper
        badge={
          <AvatarNetwork
-            src="./images/eth_logo.svg"
+            src="./images/eth_logo.png"
            name="ETH"
            size={Size.XS}
            borderColor={BackgroundColor.backgroundDefault}
@ -139,7 +139,7 @@ export const SizeStory = (args) => (
      <BadgeWrapper
        badge={
          <AvatarNetwork
-            src="./images/eth_logo.svg"
+            src="./images/eth_logo.png"
            name="ETH"
            size={Size.XS}
            borderColor={BackgroundColor.backgroundDefault}
@ -152,7 +152,7 @@ export const SizeStory = (args) => (
      <BadgeWrapper
        badge={
          <AvatarNetwork
-            src="./images/eth_logo.svg"
+            src="./images/eth_logo.png"
            name="ETH"
            size={Size.XS}
            borderColor={BackgroundColor.backgroundDefault}
@ -165,7 +165,7 @@ export const SizeStory = (args) => (
      <BadgeWrapper
        badge={
          <AvatarNetwork
-            src="./images/eth_logo.svg"
+            src="./images/eth_logo.png"
            name="ETH"
            size={Size.XS}
            borderColor={BackgroundColor.backgroundDefault}
@ -178,7 +178,7 @@ export const SizeStory = (args) => (
      <BadgeWrapper
        badge={
          <AvatarNetwork
-            src="./images/eth_logo.svg"
+            src="./images/eth_logo.png"
            name="ETH"
            size={Size.SM}
            borderColor={BackgroundColor.backgroundDefault}
@ -297,7 +297,7 @@ Name.args = {

 export const Src = (args) => (
  <Box display={DISPLAY.FLEX} gap={1}>
-    <AvatarToken {...args} src="./images/eth_logo.svg" />
+    <AvatarToken {...args} src="./images/eth_logo.png" />
    <AvatarToken {...args} src="./images/arbitrum.svg" />
    <AvatarToken {...args} src="./images/bnb.png" />
    <AvatarToken
--- a/ui/components/component-library/badge-wrapper/README.mdx
+++ b/ui/components/component-library/badge-wrapper/README.mdx
@ -62,7 +62,7 @@ import {
 >
  <AvatarToken
    name="Eth"
-    src="./images/eth_logo.svg"
+    src="./images/eth_logo.png"
    borderColor={BorderColor.borderMuted}
  />
 </BadgeWrapper>
--- a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx
+++ b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx
@ -114,7 +114,7 @@ export const Children: ComponentStory<typeof BadgeWrapper> = () => (
    >
      <AvatarToken
        name="Eth"
-        src="./images/eth_logo.svg"
+        src="./images/eth_logo.png"
        borderColor={BorderColor.borderMuted}
      />
    </BadgeWrapper>
--- a/ui/components/component-library/text-field/text-field.stories.js
+++ b/ui/components/component-library/text-field/text-field.stories.js
@ -277,7 +277,7 @@ export const StartAccessoryEndAccessory = (args) => {
          >
            <AvatarToken
              name="eth"
-              src="./images/eth_logo.svg"
+              src="./images/eth_logo.png"
              size={Size.SM}
            />
            <Text>ETH</Text>
--- a/ui/components/multichain/multichain-token-list-item/snapshots/multichain-token-list-item.test.js.snap
+++ b/ui/components/multichain/multichain-token-list-item/snapshots/multichain-token-list-item.test.js.snap
@ -28,7 +28,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
            <img
              alt="undefined logo"
              class="mm-avatar-network__network-image"
-              src="./images/eth_logo.svg"
+              src="./images/eth_logo.png"
            />
          </div>
        </div>
--- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js
+++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js
@ -30,7 +30,7 @@ export default {
  args: {
    secondary: '$9.80 USD',
    primary: '88.00687889',
-    tokenImage: './images/eth_logo.svg',
+    tokenImage: './images/eth_logo.png',
    tokenSymbol: 'ETH',
    title: 'Ethereum',
  },
--- a/ui/components/ui/identicon/identicon.stories.js
+++ b/ui/components/ui/identicon/identicon.stories.js
@ -40,7 +40,7 @@ WithImage.args = {
  addBorder: false,
  diameter: 32,
  useBlockie: false,
-  image: './images/eth_logo.svg',
+  image: './images/eth_logo.png',
  alt: 'Ethereum',
  imageBorder: true,
 };
--- a/ui/components/ui/site-icon/site-icon.stories.js
+++ b/ui/components/ui/site-icon/site-icon.stories.js
@ -31,7 +31,7 @@ DefaultStory.storyName = 'Default';

 DefaultStory.args = {
  name: 'eth',
-  icon: './images/eth_logo.svg',
+  icon: './images/eth_logo.png',
  size: 24,
 };

--- a/ui/components/ui/site-icon/site-icon.test.js
+++ b/ui/components/ui/site-icon/site-icon.test.js
@ -6,7 +6,7 @@ describe('SiteIcon', () => {
  const args = {
    size: 32,
    name: 'Snap name',
-    icon: './images/eth_logo.svg',
+    icon: './images/eth_logo.png',
    className: 'classname-test',
    fallbackClassName: 'fallback-classname-test',
  };