m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

UX Multichain: updated ethereum logo icon (#18528)

Browse Source 
* 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>
This commit is contained in:
Nidhi Kumari 2023-04-19 20:55:19 +05:30 committed by GitHub
parent 02e8e9c679
commit d362dbfacb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 26 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/initial-states/approval-screens/add-suggested-token.js
View File

@ -4,7 +4,7 @@ export const suggestedAssets = [
address: '0x6b175474e89094c44da98b954eedeac495271d0f', address: '0x6b175474e89094c44da98b954eedeac495271d0f',
symbol: 'ETH', symbol: 'ETH',
decimals: 18, decimals: 18,
image: './images/eth_logo.svg', image: './images/eth_logo.png',
unlisted: false, unlisted: false,
}, },
}, },

2
.storybook/test-data.js
View File

@ -174,7 +174,7 @@ const state = {
address: '0x6b175474e89094c44da98b954eedeac495271d0f', address: '0x6b175474e89094c44da98b954eedeac495271d0f',
symbol: 'ETH', symbol: 'ETH',
decimals: 18, decimals: 18,
image: './images/eth_logo.svg', image: './images/eth_logo.png',
unlisted: false, unlisted: false,
}, },
'0xB8c77482e45F1F44dE1745F52C74426C631bDD52': { '0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {

BIN
app/images/eth_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

18
app/images/eth_logo.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 919 B

2
shared/constants/network.ts
View File

@ -221,7 +221,7 @@ export const CURRENCY_SYMBOLS = {
OPTIMISM: 'OP', OPTIMISM: 'OP',
} as const; } 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 TEST_ETH_TOKEN_IMAGE_URL = './images/black-eth-logo.svg';
export const BNB_TOKEN_IMAGE_URL = './images/bnb.png'; export const BNB_TOKEN_IMAGE_URL = './images/bnb.png';
export const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png'; export const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';

3
ui/components/app/asset-list-item/asset-list-item.js
View File

@ -35,7 +35,6 @@ const AssetListItem = ({
warning, warning,
primary, primary,
secondary, secondary,
identiconBorder,
isERC721, isERC721,
}) => { }) => {
const t = useI18nContext(); const t = useI18nContext();
@ -137,7 +136,6 @@ const AssetListItem = ({
address={tokenAddress} address={tokenAddress}
image={tokenImage} image={tokenImage}
alt={`${primary} ${tokenSymbol}`} alt={`${primary} ${tokenSymbol}`}
imageBorder={identiconBorder}
/> />
} }
midContent={midContent} midContent={midContent}
@ -170,7 +168,6 @@ AssetListItem.propTypes = {
warning: PropTypes.node, warning: PropTypes.node,
primary: PropTypes.string, primary: PropTypes.string,
secondary: PropTypes.string, secondary: PropTypes.string,
identiconBorder: PropTypes.bool,
isERC721: PropTypes.bool, isERC721: PropTypes.bool,
}; };

5
ui/components/app/asset-list-item/asset-list-item.stories.js
View File

@ -34,9 +34,6 @@ export default {
secondary: { secondary: {
control: 'text', control: 'text',
}, },
identiconBorder: {
control: 'boolean',
},
isERC721: { isERC721: {
control: 'boolean', control: 'boolean',
}, },
@ -44,7 +41,7 @@ export default {
args: { args: {
tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8', tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
tokenSymbol: 'ETH', tokenSymbol: 'ETH',
tokenImage: './images/eth_logo.svg', tokenImage: './images/eth_logo.png',
identiconBorder: true, identiconBorder: true,
}, },
}; };

2
ui/components/app/wallet-overview/eth-overview.js
View File

@ -273,7 +273,7 @@ const EthOverview = ({ className }) => {
</> </>
} }
className={className} className={className}
icon={<Identicon diameter={32} image={primaryTokenImage} imageBorder />} icon={<Identicon diameter={32} image={primaryTokenImage} />}
/> />
); );
}; };

2
ui/components/component-library/avatar-base/README.mdx
View File

@ -59,7 +59,7 @@ The `AvatarBase` component can contain images, icons or text
```jsx ```jsx
import { AvatarBase } from '../../component-library'; import { AvatarBase } from '../../component-library';
<AvatarBase> <AvatarBase>
<img src="./images/eth_logo.svg" /> <img src="./images/eth_logo.png" />
</AvatarBase> </AvatarBase>
<AvatarBase> <AvatarBase>
<img width="100%" src="./images/arbitrum.svg" /> <img width="100%" src="./images/arbitrum.svg" />

2
ui/components/component-library/avatar-base/avatar-base.stories.js
View File

@ -110,7 +110,7 @@ export const Size = (args) => (
export const Children = (args) => ( export const Children = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={DISPLAY.FLEX} gap={1}>
<AvatarBase {...args}> <AvatarBase {...args}>
<img src="./images/eth_logo.svg" /> <img src="./images/eth_logo.png" />
</AvatarBase> </AvatarBase>
<AvatarBase {...args}> <AvatarBase {...args}>
<img width="100%" src="./images/arbitrum.svg" /> <img width="100%" src="./images/arbitrum.svg" />

2
ui/components/component-library/avatar-favicon/avatar-favicon.test.js
View File

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

2
ui/components/component-library/avatar-network/avatar-network.test.js
View File

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

4
ui/components/component-library/avatar-token/README.mdx
View File

@ -72,7 +72,7 @@ Use the `src` prop to set the image to be rendered of the `AvatarToken`.
```jsx ```jsx
import { AvatarToken } from '../../component-library'; 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/arbitrum.svg" />
<AvatarToken src="./images/bnb.png" /> <AvatarToken src="./images/bnb.png" />
<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.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 ```jsx
import { AvatarToken } from '../../component-library'; 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 ### Color, Background Color And Border Color

14
ui/components/component-library/avatar-token/avatar-token.stories.js
View File

@ -61,7 +61,7 @@ export default {
}, },
args: { args: {
name: 'eth', name: 'eth',
src: './images/eth_logo.svg', src: './images/eth_logo.png',
size: Size.MD, size: Size.MD,
showHalo: false, showHalo: false,
}, },
@ -126,7 +126,7 @@ export const SizeStory = (args) => (
<BadgeWrapper <BadgeWrapper
badge={ badge={
<AvatarNetwork <AvatarNetwork
src="./images/eth_logo.svg" src="./images/eth_logo.png"
name="ETH" name="ETH"
size={Size.XS} size={Size.XS}
borderColor={BackgroundColor.backgroundDefault} borderColor={BackgroundColor.backgroundDefault}
@ -139,7 +139,7 @@ export const SizeStory = (args) => (
<BadgeWrapper <BadgeWrapper
badge={ badge={
<AvatarNetwork <AvatarNetwork
src="./images/eth_logo.svg" src="./images/eth_logo.png"
name="ETH" name="ETH"
size={Size.XS} size={Size.XS}
borderColor={BackgroundColor.backgroundDefault} borderColor={BackgroundColor.backgroundDefault}
@ -152,7 +152,7 @@ export const SizeStory = (args) => (
<BadgeWrapper <BadgeWrapper
badge={ badge={
<AvatarNetwork <AvatarNetwork
src="./images/eth_logo.svg" src="./images/eth_logo.png"
name="ETH" name="ETH"
size={Size.XS} size={Size.XS}
borderColor={BackgroundColor.backgroundDefault} borderColor={BackgroundColor.backgroundDefault}
@ -165,7 +165,7 @@ export const SizeStory = (args) => (
<BadgeWrapper <BadgeWrapper
badge={ badge={
<AvatarNetwork <AvatarNetwork
src="./images/eth_logo.svg" src="./images/eth_logo.png"
name="ETH" name="ETH"
size={Size.XS} size={Size.XS}
borderColor={BackgroundColor.backgroundDefault} borderColor={BackgroundColor.backgroundDefault}
@ -178,7 +178,7 @@ export const SizeStory = (args) => (
<BadgeWrapper <BadgeWrapper
badge={ badge={
<AvatarNetwork <AvatarNetwork
src="./images/eth_logo.svg" src="./images/eth_logo.png"
name="ETH" name="ETH"
size={Size.SM} size={Size.SM}
borderColor={BackgroundColor.backgroundDefault} borderColor={BackgroundColor.backgroundDefault}
@ -297,7 +297,7 @@ Name.args = {
export const Src = (args) => ( export const Src = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <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/arbitrum.svg" />
<AvatarToken {...args} src="./images/bnb.png" /> <AvatarToken {...args} src="./images/bnb.png" />
<AvatarToken <AvatarToken

2
ui/components/component-library/badge-wrapper/README.mdx
View File

@ -62,7 +62,7 @@ import {
> >
<AvatarToken <AvatarToken
name="Eth" name="Eth"
src="./images/eth_logo.svg" src="./images/eth_logo.png"
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
/> />
</BadgeWrapper> </BadgeWrapper>

2
ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx
View File

@ -114,7 +114,7 @@ export const Children: ComponentStory<typeof BadgeWrapper> = () => (
> >
<AvatarToken <AvatarToken
name="Eth" name="Eth"
src="./images/eth_logo.svg" src="./images/eth_logo.png"
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
/> />
</BadgeWrapper> </BadgeWrapper>

2
ui/components/component-library/text-field/text-field.stories.js
View File

@ -277,7 +277,7 @@ export const StartAccessoryEndAccessory = (args) => {
> >
<AvatarToken <AvatarToken
name="eth" name="eth"
src="./images/eth_logo.svg" src="./images/eth_logo.png"
size={Size.SM} size={Size.SM}
/> />
<Text>ETH</Text> <Text>ETH</Text>

2
ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
View File

@ -28,7 +28,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
<img <img
alt="undefined logo" alt="undefined logo"
class="mm-avatar-network__network-image" class="mm-avatar-network__network-image"
src="./images/eth_logo.svg" src="./images/eth_logo.png"
/> />
</div> </div>
</div> </div>

2
ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js
View File

@ -30,7 +30,7 @@ export default {
args: { args: {
secondary: '$9.80 USD', secondary: '$9.80 USD',
primary: '88.00687889', primary: '88.00687889',
tokenImage: './images/eth_logo.svg', tokenImage: './images/eth_logo.png',
tokenSymbol: 'ETH', tokenSymbol: 'ETH',
title: 'Ethereum', title: 'Ethereum',
}, },

2
ui/components/ui/identicon/identicon.stories.js
View File

@ -40,7 +40,7 @@ WithImage.args = {
addBorder: false, addBorder: false,
diameter: 32, diameter: 32,
useBlockie: false, useBlockie: false,
image: './images/eth_logo.svg', image: './images/eth_logo.png',
alt: 'Ethereum', alt: 'Ethereum',
imageBorder: true, imageBorder: true,
}; };

2
ui/components/ui/site-icon/site-icon.stories.js
View File

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

2
ui/components/ui/site-icon/site-icon.test.js
View File

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