mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
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>
This commit is contained in:
parent
02e8e9c679
commit
d362dbfacb
@ -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,
|
||||
},
|
||||
},
|
||||
|
@ -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': {
|
||||
|
BIN
app/images/eth_logo.png
Normal file
BIN
app/images/eth_logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
@ -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>
|
Before Width: | Height: | Size: 919 B |
@ -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';
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
@ -273,7 +273,7 @@ const EthOverview = ({ className }) => {
|
||||
</>
|
||||
}
|
||||
className={className}
|
||||
icon={<Identicon diameter={32} image={primaryTokenImage} imageBorder />}
|
||||
icon={<Identicon diameter={32} image={primaryTokenImage} />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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',
|
||||
};
|
||||
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -62,7 +62,7 @@ import {
|
||||
>
|
||||
<AvatarToken
|
||||
name="Eth"
|
||||
src="./images/eth_logo.svg"
|
||||
src="./images/eth_logo.png"
|
||||
borderColor={BorderColor.borderMuted}
|
||||
/>
|
||||
</BadgeWrapper>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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',
|
||||
},
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -31,7 +31,7 @@ DefaultStory.storyName = 'Default';
|
||||
|
||||
DefaultStory.args = {
|
||||
name: 'eth',
|
||||
icon: './images/eth_logo.svg',
|
||||
icon: './images/eth_logo.png',
|
||||
size: 24,
|
||||
};
|
||||
|
||||
|
@ -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',
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user