Commit 3c6cb6f9 authored by tom's avatar tom

add token icon url

parent 0195da4e
...@@ -9,6 +9,7 @@ export const tokenInfo: TokenInfo = { ...@@ -9,6 +9,7 @@ export const tokenInfo: TokenInfo = {
symbol: 'ARIA', symbol: 'ARIA',
type: 'ERC-20', type: 'ERC-20',
total_supply: '1235', total_supply: '1235',
icon_url: null,
}; };
export const tokenCounters: TokenCounters = { export const tokenCounters: TokenCounters = {
...@@ -25,6 +26,7 @@ export const tokenInfoERC20a: TokenInfo = { ...@@ -25,6 +26,7 @@ export const tokenInfoERC20a: TokenInfo = {
symbol: 'HyFi', symbol: 'HyFi',
total_supply: '369000000000000000000000000', total_supply: '369000000000000000000000000',
type: 'ERC-20', type: 'ERC-20',
icon_url: null,
}; };
export const tokenInfoERC20b: TokenInfo = { export const tokenInfoERC20b: TokenInfo = {
...@@ -36,6 +38,7 @@ export const tokenInfoERC20b: TokenInfo = { ...@@ -36,6 +38,7 @@ export const tokenInfoERC20b: TokenInfo = {
symbol: 'USDC', symbol: 'USDC',
total_supply: '900000000000000000000000000', total_supply: '900000000000000000000000000',
type: 'ERC-20', type: 'ERC-20',
icon_url: null,
}; };
export const tokenInfoERC20c: TokenInfo = { export const tokenInfoERC20c: TokenInfo = {
...@@ -47,6 +50,7 @@ export const tokenInfoERC20c: TokenInfo = { ...@@ -47,6 +50,7 @@ export const tokenInfoERC20c: TokenInfo = {
symbol: 'ETH', symbol: 'ETH',
total_supply: '1000000000000000000000000', total_supply: '1000000000000000000000000',
type: 'ERC-20', type: 'ERC-20',
icon_url: null,
}; };
export const tokenInfoERC20d: TokenInfo = { export const tokenInfoERC20d: TokenInfo = {
...@@ -58,6 +62,7 @@ export const tokenInfoERC20d: TokenInfo = { ...@@ -58,6 +62,7 @@ export const tokenInfoERC20d: TokenInfo = {
symbol: 'ZETA', symbol: 'ZETA',
total_supply: '2100000000000000000000000000', total_supply: '2100000000000000000000000000',
type: 'ERC-20', type: 'ERC-20',
icon_url: null,
}; };
export const tokenInfoERC20LongSymbol: TokenInfo = { export const tokenInfoERC20LongSymbol: TokenInfo = {
...@@ -69,6 +74,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = { ...@@ -69,6 +74,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = {
symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY', symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
total_supply: '2100000000000000000000000000', total_supply: '2100000000000000000000000000',
type: 'ERC-20', type: 'ERC-20',
icon_url: null,
}; };
export const tokenInfoERC721a: TokenInfo = { export const tokenInfoERC721a: TokenInfo = {
...@@ -80,6 +86,7 @@ export const tokenInfoERC721a: TokenInfo = { ...@@ -80,6 +86,7 @@ export const tokenInfoERC721a: TokenInfo = {
symbol: 'HYFI_ATHENA', symbol: 'HYFI_ATHENA',
total_supply: '105', total_supply: '105',
type: 'ERC-721', type: 'ERC-721',
icon_url: null,
}; };
export const tokenInfoERC721b: TokenInfo = { export const tokenInfoERC721b: TokenInfo = {
...@@ -91,6 +98,7 @@ export const tokenInfoERC721b: TokenInfo = { ...@@ -91,6 +98,7 @@ export const tokenInfoERC721b: TokenInfo = {
symbol: 'WOWG', symbol: 'WOWG',
total_supply: null, total_supply: null,
type: 'ERC-721', type: 'ERC-721',
icon_url: null,
}; };
export const tokenInfoERC721c: TokenInfo = { export const tokenInfoERC721c: TokenInfo = {
...@@ -102,6 +110,7 @@ export const tokenInfoERC721c: TokenInfo = { ...@@ -102,6 +110,7 @@ export const tokenInfoERC721c: TokenInfo = {
symbol: 'PUMA', symbol: 'PUMA',
total_supply: null, total_supply: null,
type: 'ERC-721', type: 'ERC-721',
icon_url: null,
}; };
export const tokenInfoERC721LongSymbol: TokenInfo = { export const tokenInfoERC721LongSymbol: TokenInfo = {
...@@ -113,6 +122,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = { ...@@ -113,6 +122,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = {
symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY', symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
total_supply: null, total_supply: null,
type: 'ERC-721', type: 'ERC-721',
icon_url: null,
}; };
export const tokenInfoERC1155a: TokenInfo = { export const tokenInfoERC1155a: TokenInfo = {
...@@ -124,6 +134,7 @@ export const tokenInfoERC1155a: TokenInfo = { ...@@ -124,6 +134,7 @@ export const tokenInfoERC1155a: TokenInfo = {
symbol: 'HYFI_MEMBERSHIP', symbol: 'HYFI_MEMBERSHIP',
total_supply: '482', total_supply: '482',
type: 'ERC-1155', type: 'ERC-1155',
icon_url: null,
}; };
export const tokenInfoERC1155b: TokenInfo = { export const tokenInfoERC1155b: TokenInfo = {
...@@ -135,6 +146,7 @@ export const tokenInfoERC1155b: TokenInfo = { ...@@ -135,6 +146,7 @@ export const tokenInfoERC1155b: TokenInfo = {
symbol: 'WVC', symbol: 'WVC',
total_supply: '4943', total_supply: '4943',
type: 'ERC-1155', type: 'ERC-1155',
icon_url: null,
}; };
export const tokenInfoERC1155WithoutName: TokenInfo = { export const tokenInfoERC1155WithoutName: TokenInfo = {
...@@ -146,4 +158,5 @@ export const tokenInfoERC1155WithoutName: TokenInfo = { ...@@ -146,4 +158,5 @@ export const tokenInfoERC1155WithoutName: TokenInfo = {
symbol: null, symbol: null,
total_supply: '482', total_supply: '482',
type: 'ERC-1155', type: 'ERC-1155',
icon_url: null,
}; };
...@@ -30,6 +30,7 @@ export const erc20: TokenTransfer = { ...@@ -30,6 +30,7 @@ export const erc20: TokenTransfer = {
symbol: 'ARIA', symbol: 'ARIA',
type: 'ERC-20', type: 'ERC-20',
total_supply: '0', total_supply: '0',
icon_url: null,
}, },
total: { total: {
decimals: '18', decimals: '18',
...@@ -73,6 +74,7 @@ export const erc721: TokenTransfer = { ...@@ -73,6 +74,7 @@ export const erc721: TokenTransfer = {
symbol: 'AriaSA', symbol: 'AriaSA',
type: 'ERC-721', type: 'ERC-721',
total_supply: '0', total_supply: '0',
icon_url: null,
}, },
total: { total: {
token_id: '875879856', token_id: '875879856',
...@@ -115,6 +117,7 @@ export const erc1155A: TokenTransfer = { ...@@ -115,6 +117,7 @@ export const erc1155A: TokenTransfer = {
symbol: 'MY_SYMBOL_IS_VERY_LONG', symbol: 'MY_SYMBOL_IS_VERY_LONG',
type: 'ERC-1155', type: 'ERC-1155',
total_supply: '0', total_supply: '0',
icon_url: null,
}, },
total: { total: {
token_id: '123', token_id: '123',
......
...@@ -31,6 +31,7 @@ export const mintToken: TxStateChange = { ...@@ -31,6 +31,7 @@ export const mintToken: TxStateChange = {
symbol: 'nMOONBIRD', symbol: 'nMOONBIRD',
total_supply: '10645', total_supply: '10645',
type: 'ERC-721', type: 'ERC-721',
icon_url: null,
}, },
type: 'token', type: 'token',
}; };
...@@ -66,6 +67,7 @@ export const receiveMintedToken: TxStateChange = { ...@@ -66,6 +67,7 @@ export const receiveMintedToken: TxStateChange = {
symbol: 'nMOONBIRD', symbol: 'nMOONBIRD',
total_supply: '10645', total_supply: '10645',
type: 'ERC-721', type: 'ERC-721',
icon_url: null,
}, },
type: 'token', type: 'token',
}; };
......
...@@ -14,6 +14,7 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = { ...@@ -14,6 +14,7 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
symbol: 'STUB', symbol: 'STUB',
total_supply: '6000000000000000000', total_supply: '6000000000000000000',
type: 'ERC-20', type: 'ERC-20',
icon_url: null,
}; };
export const TOKEN_INFO_ERC_721: TokenInfo<'ERC-721'> = { export const TOKEN_INFO_ERC_721: TokenInfo<'ERC-721'> = {
......
...@@ -12,6 +12,7 @@ export interface TokenInfo<T extends TokenType = TokenType> { ...@@ -12,6 +12,7 @@ export interface TokenInfo<T extends TokenType = TokenType> {
holders: string | null; holders: string | null;
exchange_rate: string | null; exchange_rate: string | null;
total_supply: string | null; total_supply: string | null;
icon_url: string | null;
} }
export interface TokenCounters { export interface TokenCounters {
......
...@@ -194,11 +194,17 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD ...@@ -194,11 +194,17 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
</> </>
) : null; ) : null;
const tokenData = React.useMemo(() => ({
address: tokenFilter || '',
name: '',
icon_url: '',
}), [ tokenFilter ]);
const tokenFilterComponent = tokenFilter && ( const tokenFilterComponent = tokenFilter && (
<Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }> <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
<Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text> <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text>
<Flex alignItems="center" py={ 1 }> <Flex alignItems="center" py={ 1 }>
<TokenLogo hash={ tokenFilter } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
{ isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter } { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
<Tooltip label="Reset filter"> <Tooltip label="Reset filter">
<Flex> <Flex>
......
...@@ -63,6 +63,12 @@ const AddressBalance = ({ data }: Props) => { ...@@ -63,6 +63,12 @@ const AddressBalance = ({ data }: Props) => {
handler: handleNewCoinBalanceMessage, handler: handleNewCoinBalanceMessage,
}); });
const tokenData = React.useMemo(() => ({
address: appConfig.network.currency.address || '',
name: appConfig.network.currency.name || '',
icon_url: '',
}), [ ]);
return ( return (
<DetailsInfoItem <DetailsInfoItem
title="Balance" title="Balance"
...@@ -71,8 +77,7 @@ const AddressBalance = ({ data }: Props) => { ...@@ -71,8 +77,7 @@ const AddressBalance = ({ data }: Props) => {
alignItems="flex-start" alignItems="flex-start"
> >
<TokenLogo <TokenLogo
hash={ appConfig.network.currency.address } data={ tokenData }
name={ appConfig.network.currency.name }
boxSize={ 5 } boxSize={ 5 }
mr={ 2 } mr={ 2 }
fontSize="sm" fontSize="sm"
......
...@@ -65,7 +65,7 @@ const TokenSelectItem = ({ data }: Props) => { ...@@ -65,7 +65,7 @@ const TokenSelectItem = ({ data }: Props) => {
href={ url } href={ url }
> >
<Flex alignItems="center" w="100%"> <Flex alignItems="center" w="100%">
<TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/> <TokenLogo data={ data.token } boxSize={ 6 }/>
<Text fontWeight={ 700 } ml={ 2 }>{ data.token.name || <HashStringShorten hash={ data.token.address }/> }</Text> <Text fontWeight={ 700 } ml={ 2 }>{ data.token.name || <HashStringShorten hash={ data.token.address }/> }</Text>
{ data.usd && <Text fontWeight={ 700 } ml="auto">${ data.usd.toFormat(2) }</Text> } { data.usd && <Text fontWeight={ 700 } ml="auto">${ data.usd.toFormat(2) }</Text> }
</Flex> </Flex>
......
...@@ -24,7 +24,7 @@ const ERC20TokensListItem = ({ token, value }: Props) => { ...@@ -24,7 +24,7 @@ const ERC20TokensListItem = ({ token, value }: Props) => {
return ( return (
<ListItemMobile rowGap={ 2 }> <ListItemMobile rowGap={ 2 }>
<Flex alignItems="center" width="100%"> <Flex alignItems="center" width="100%">
<TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
<AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/> <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
</Flex> </Flex>
<Flex alignItems="center" pl={ 8 }> <Flex alignItems="center" pl={ 8 }>
......
...@@ -27,7 +27,7 @@ const ERC20TokensTableItem = ({ ...@@ -27,7 +27,7 @@ const ERC20TokensTableItem = ({
<Tr> <Tr>
<Td verticalAlign="middle"> <Td verticalAlign="middle">
<Flex alignItems="center"> <Flex alignItems="center">
<TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
<AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/> <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
</Flex> </Flex>
</Td> </Td>
......
...@@ -18,7 +18,7 @@ const ERC721TokensListItem = ({ token, value }: Props) => { ...@@ -18,7 +18,7 @@ const ERC721TokensListItem = ({ token, value }: Props) => {
return ( return (
<ListItemMobile rowGap={ 2 }> <ListItemMobile rowGap={ 2 }>
<Flex alignItems="center" width="100%"> <Flex alignItems="center" width="100%">
<TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
<AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/> <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
</Flex> </Flex>
<Flex alignItems="center" pl={ 8 }> <Flex alignItems="center" pl={ 8 }>
......
...@@ -21,7 +21,7 @@ const ERC721TokensTableItem = ({ ...@@ -21,7 +21,7 @@ const ERC721TokensTableItem = ({
<Tr> <Tr>
<Td verticalAlign="middle"> <Td verticalAlign="middle">
<Flex alignItems="center"> <Flex alignItems="center">
<TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
<AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/> <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
</Flex> </Flex>
</Td> </Td>
......
...@@ -49,7 +49,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance }: Pr ...@@ -49,7 +49,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance }: Pr
) } ) }
{ token.name && ( { token.name && (
<Flex alignItems="center"> <Flex alignItems="center">
<TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } ml={ 1 } mr={ 1 }/> <TokenLogo data={ token } boxSize={ 6 } ml={ 1 } mr={ 1 }/>
<TruncatedTextTooltip label={ token.name }> <TruncatedTextTooltip label={ token.name }>
<Text variant="secondary" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ token.name }</Text> <Text variant="secondary" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ token.name }</Text>
</TruncatedTextTooltip> </TruncatedTextTooltip>
......
...@@ -27,11 +27,17 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = { ...@@ -27,11 +27,17 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
}, },
}; };
const nativeTokenData = {
address: appConfig.network.currency.address || '',
name: appConfig.network.currency.name || '',
icon_url: '',
};
const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = { const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
id: 'coin_price', id: 'coin_price',
title: `${ appConfig.network.currency.symbol } price`, title: `${ appConfig.network.currency.symbol } price`,
value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }), value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
icon: <TokenLogo hash={ appConfig.network.currency.address || '' } name={ appConfig.network.currency.name } boxSize={ 6 }/>, icon: <TokenLogo data={ nativeTokenData } boxSize={ 6 }/>,
hint: `${ appConfig.network.currency.symbol } token daily price in USD.`, hint: `${ appConfig.network.currency.symbol } token daily price in USD.`,
api: { api: {
resourceName: 'homepage_chart_market', resourceName: 'homepage_chart_market',
......
...@@ -245,7 +245,7 @@ const TokenPageContent = () => { ...@@ -245,7 +245,7 @@ const TokenPageContent = () => {
text={ `${ tokenQuery.data?.name || 'Unnamed' }${ tokenSymbolText } token` } text={ `${ tokenQuery.data?.name || 'Unnamed' }${ tokenSymbolText } token` }
backLink={ backLink } backLink={ backLink }
additionalsLeft={ ( additionalsLeft={ (
<TokenLogo hash={ tokenQuery.data?.address } name={ tokenQuery.data?.name } boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/> <TokenLogo data={ tokenQuery.data } boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/>
) } ) }
additionalsRight={ tagsNode } additionalsRight={ tagsNode }
afterTitle={ afterTitle={
......
import { Image, chakra, Skeleton } from '@chakra-ui/react'; import { Image, chakra, Skeleton } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder'; import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
interface Props { export interface Props {
hash?: string; data?: Pick<TokenInfo, 'address' | 'icon_url' | 'name'>;
name?: string | null;
className?: string; className?: string;
isLoading?: boolean; isLoading?: boolean;
} }
const TokenLogo = ({ hash, name, className, isLoading }: Props) => { const TokenLogo = ({ className, isLoading, data }: Props) => {
if (isLoading) { if (isLoading) {
return <Skeleton className={ className } borderRadius="base"/>; return <Skeleton className={ className } borderRadius="base"/>;
} }
const logoSrc = appConfig.network.assetsPathname && hash ? [ const logoSrc = (() => {
'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/', if (data?.icon_url) {
appConfig.network.assetsPathname, return data.icon_url;
'/assets/', }
hash,
'/logo.png', if (appConfig.network.assetsPathname && data?.address) {
].join('') : undefined; return [
'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/',
appConfig.network.assetsPathname,
'/assets/',
data.address,
'/logo.png',
].join('');
}
})();
return ( return (
<Image <Image
borderRadius="base" borderRadius="base"
className={ className } className={ className }
src={ logoSrc } src={ logoSrc }
alt={ `${ name || 'token' } logo` } alt={ `${ data?.name || 'token' } logo` }
fallback={ <TokenLogoPlaceholder className={ className }/> } fallback={ <TokenLogoPlaceholder className={ className }/> }
/> />
); );
......
import { test, expect, devices } from '@playwright/experimental-ct-react'; import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token';
import TestApp from 'playwright/TestApp'; import TestApp from 'playwright/TestApp';
import TokenSnippet from './TokenSnippet'; import TokenSnippet from './TokenSnippet';
const API_URL = 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x363574E6C5C71c343d7348093D84320c76d5Dd29/logo.png';
test.use(devices['iPhone 13 Pro']); test.use(devices['iPhone 13 Pro']);
test('unnamed', async({ mount }) => { test('unnamed', async({ mount }) => {
const data: TokenInfo = {
address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
type: 'ERC-20',
symbol: 'xDAI',
name: null,
decimals: '18',
holders: '1',
exchange_rate: null,
total_supply: null,
icon_url: null,
};
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29" symbol="xDAI"/> <TokenSnippet data={ data }/>
</TestApp>, </TestApp>,
); );
...@@ -20,16 +31,40 @@ test('unnamed', async({ mount }) => { ...@@ -20,16 +31,40 @@ test('unnamed', async({ mount }) => {
}); });
test('named', async({ mount }) => { test('named', async({ mount }) => {
const data: TokenInfo = {
address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
type: 'ERC-20',
symbol: 'SHA',
name: 'Shavuha token',
decimals: '18',
holders: '1',
exchange_rate: null,
total_supply: null,
icon_url: null,
};
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29" name="Shavuha token" symbol="SHA"/> <TokenSnippet data={ data }/>
</TestApp>, </TestApp>,
); );
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
test('with logo', async({ mount, page }) => { test('with logo and long symbol', async({ mount, page }) => {
const API_URL = 'https://example.com/logo.png';
const data: TokenInfo = {
address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
type: 'ERC-20',
symbol: 'SHAAAAAAAAAAAAA',
name: null,
decimals: '18',
holders: '1',
exchange_rate: null,
total_supply: null,
icon_url: API_URL,
};
await page.route(API_URL, (route) => { await page.route(API_URL, (route) => {
return route.fulfill({ return route.fulfill({
status: 200, status: 200,
...@@ -39,7 +74,7 @@ test('with logo', async({ mount, page }) => { ...@@ -39,7 +74,7 @@ test('with logo', async({ mount, page }) => {
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29"/> <TokenSnippet data={ data }/>
</TestApp>, </TestApp>,
); );
......
import { Flex, Text, chakra } from '@chakra-ui/react'; import { Flex, Text, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token';
import trimTokenSymbol from 'lib/token/trimTokenSymbol';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import TokenLogo from 'ui/shared/TokenLogo'; import TokenLogo from 'ui/shared/TokenLogo';
interface Props { interface Props {
symbol?: string | null; data?: Pick<TokenInfo, 'address' | 'icon_url' | 'name' | 'symbol'>;
hash: string;
name?: string | null;
className?: string; className?: string;
logoSize?: number; logoSize?: number;
isDisabled?: boolean; isDisabled?: boolean;
} }
const TokenSnippet = ({ symbol, hash, name, className, logoSize = 6, isDisabled }: Props) => { const TokenSnippet = ({ data, className, logoSize = 6, isDisabled }: Props) => {
return ( return (
<Flex className={ className } alignItems="center" columnGap={ 2 } w="100%"> <Flex className={ className } alignItems="center" columnGap={ 2 } w="100%">
<TokenLogo boxSize={ logoSize } hash={ hash } name={ name }/> <TokenLogo boxSize={ logoSize } data={ data }/>
<AddressLink hash={ hash } alias={ name } type="token" isDisabled={ isDisabled }/> <AddressLink hash={ data?.address || '' } alias={ data?.name || 'Unnamed token' } type="token" isDisabled={ isDisabled }/>
{ symbol && <Text variant="secondary">({ symbol })</Text> } { data?.symbol && <Text variant="secondary">({ trimTokenSymbol(data.symbol) })</Text> }
</Flex> </Flex>
); );
}; };
......
...@@ -52,7 +52,7 @@ const TokenTransferListItem = ({ ...@@ -52,7 +52,7 @@ const TokenTransferListItem = ({
<ListItemMobile rowGap={ 3 } isAnimated> <ListItemMobile rowGap={ 3 } isAnimated>
<Flex w="100%" justifyContent="space-between"> <Flex w="100%" justifyContent="space-between">
<Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 }> <Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 }>
<TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/> <TokenSnippet data={ token } w="auto" maxW="calc(100% - 140px)"/>
<Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag> <Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag>
<Tag colorScheme="orange">{ getTokenTransferTypeText(type) }</Tag> <Tag colorScheme="orange">{ getTokenTransferTypeText(type) }</Tag>
</Flex> </Flex>
......
...@@ -45,7 +45,7 @@ const TokenTransferTableItem = ({ ...@@ -45,7 +45,7 @@ const TokenTransferTableItem = ({
) } ) }
<Td> <Td>
<Flex flexDir="column" alignItems="flex-start"> <Flex flexDir="column" alignItems="flex-start">
<TokenSnippet hash={ token.address } name={ token.name || 'Unnamed token' } lineHeight="30px"/> <TokenSnippet data={ token } lineHeight="30px"/>
<Tag mt={ 1 }>{ token.type }</Tag> <Tag mt={ 1 }>{ token.type }</Tag>
<Tag colorScheme="orange" mt={ 2 }>{ getTokenTransferTypeText(type) }</Tag> <Tag colorScheme="orange" mt={ 2 }>{ getTokenTransferTypeText(type) }</Tag>
</Flex> </Flex>
......
...@@ -58,7 +58,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => { ...@@ -58,7 +58,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
title="Token" title="Token"
hint="Token name" hint="Token name"
> >
<TokenSnippet hash={ data.token.address } name={ data.token.name }/> <TokenSnippet data={ data.token }/>
</DetailsInfoItem> </DetailsInfoItem>
{ data.is_unique && data.owner && ( { data.is_unique && data.owner && (
<DetailsInfoItem <DetailsInfoItem
......
...@@ -47,7 +47,7 @@ const TokensTableItem = ({ ...@@ -47,7 +47,7 @@ const TokensTableItem = ({
> >
<GridItem display="flex"> <GridItem display="flex">
<Flex overflow="hidden" mr={ 3 } alignItems="center"> <Flex overflow="hidden" mr={ 3 } alignItems="center">
<TokenLogo hash={ address } name={ name } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
<AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/> <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/>
<Tag flexShrink={ 0 } ml={ 3 }>{ type }</Tag> <Tag flexShrink={ 0 } ml={ 3 }>{ type }</Tag>
</Flex> </Flex>
......
...@@ -53,7 +53,7 @@ const TokensTableItem = ({ ...@@ -53,7 +53,7 @@ const TokensTableItem = ({
</Text> </Text>
<Box> <Box>
<Flex alignItems="center"> <Flex alignItems="center">
<TokenLogo hash={ address } name={ name } boxSize={ 6 } mr={ 2 }/> <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
<AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/> <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/>
</Flex> </Flex>
<Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt={ 2 }> <Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt={ 2 }>
......
...@@ -2,22 +2,22 @@ import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react'; ...@@ -2,22 +2,22 @@ import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token';
import nftIcon from 'icons/nft_shield.svg'; import nftIcon from 'icons/nft_shield.svg';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShorten from 'ui/shared/HashStringShorten';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet'; import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
interface Props { interface Props {
token: TokenInfo;
value: string; value: string;
tokenId: string; tokenId: string;
hash: string;
name?: string | null;
symbol?: string | null;
} }
const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props) => { const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
const num = value === '1' ? '' : value; const num = value === '1' ? '' : value;
const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: hash, id: tokenId } }); const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenId } });
return ( return (
<Flex alignItems="center" columnGap={ 3 } rowGap={ 2 } flexWrap="wrap"> <Flex alignItems="center" columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
...@@ -28,10 +28,10 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props) ...@@ -28,10 +28,10 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
{ tokenId.length > 8 ? <HashStringShorten hash={ tokenId }/> : tokenId } { tokenId.length > 8 ? <HashStringShorten hash={ tokenId }/> : tokenId }
</Link> </Link>
</Box> </Box>
{ name ? ( { token.name ? (
<TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto" logoSize={ 5 } columnGap={ 1 }/> <TokenSnippet data={ token } w="auto" logoSize={ 5 } columnGap={ 1 }/>
) : ( ) : (
<AddressLink hash={ hash } truncation="constant" type="token"/> <AddressLink hash={ token.address } truncation="constant" type="token"/>
) } ) }
</Flex> </Flex>
); );
......
...@@ -7,7 +7,6 @@ import type { TxAction, TxActionGeneral } from 'types/api/txAction'; ...@@ -7,7 +7,6 @@ import type { TxAction, TxActionGeneral } from 'types/api/txAction';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import uniswapIcon from 'icons/uniswap.svg'; import uniswapIcon from 'icons/uniswap.svg';
import trimTokenSymbol from 'lib/token/trimTokenSymbol';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet'; import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
...@@ -39,6 +38,20 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -39,6 +38,20 @@ const TxDetailsAction = ({ action }: Props) => {
const amount0 = BigNumber(data.amount0).toFormat(); const amount0 = BigNumber(data.amount0).toFormat();
const amount1 = BigNumber(data.amount1).toFormat(); const amount1 = BigNumber(data.amount1).toFormat();
const [ text0, text1 ] = getActionText(type); const [ text0, text1 ] = getActionText(type);
const token0 = {
address: data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address0,
name: data.symbol0 === 'Ether' ? appConfig.network.currency.symbol || null : data.symbol0,
type: 'ERC-20',
symbol: null,
icon_url: null,
};
const token1 = {
address: data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address1,
name: data.symbol0 === 'Ether' ? appConfig.network.currency.symbol || null : data.symbol1,
type: 'ERC-20',
symbol: null,
icon_url: null,
};
return ( return (
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } alignItems="center"> <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } alignItems="center">
...@@ -46,8 +59,7 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -46,8 +59,7 @@ const TxDetailsAction = ({ action }: Props) => {
<chakra.span fontWeight={ 600 }>{ amount0 }</chakra.span> <chakra.span fontWeight={ 600 }>{ amount0 }</chakra.span>
<TokenSnippet <TokenSnippet
name={ data.symbol0 === 'Ether' ? appConfig.network.currency.symbol : data.symbol0 } data={ token0 }
hash={ data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address1 }
w="auto" w="auto"
columnGap={ 1 } columnGap={ 1 }
logoSize={ 5 } logoSize={ 5 }
...@@ -58,8 +70,7 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -58,8 +70,7 @@ const TxDetailsAction = ({ action }: Props) => {
<chakra.span fontWeight={ 600 }>{ amount1 }</chakra.span> <chakra.span fontWeight={ 600 }>{ amount1 }</chakra.span>
<TokenSnippet <TokenSnippet
name={ data.symbol1 === 'Ether' ? appConfig.network.currency.symbol : data.symbol1 } data={ token1 }
hash={ data.symbol1 === 'Ether' ? appConfig.network.currency.address || '' : data.address1 }
w="auto" w="auto"
columnGap={ 1 } columnGap={ 1 }
logoSize={ 5 } logoSize={ 5 }
...@@ -76,14 +87,20 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -76,14 +87,20 @@ const TxDetailsAction = ({ action }: Props) => {
} }
case 'mint_nft' : { case 'mint_nft' : {
const token = {
address: data.address,
name: data.name,
type: 'ERC-20',
symbol: null,
icon_url: null,
};
return ( return (
<div> <div>
<Flex rowGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap"> <Flex rowGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap">
<chakra.span>Mint of </chakra.span> <chakra.span>Mint of </chakra.span>
<TokenSnippet <TokenSnippet
name={ data.name } data={ token }
hash={ data.address }
symbol={ trimTokenSymbol(data.symbol) }
w="auto" w="auto"
columnGap={ 1 } columnGap={ 1 }
logoSize={ 5 } logoSize={ 5 }
......
...@@ -5,7 +5,6 @@ import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPay ...@@ -5,7 +5,6 @@ import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPay
import rightArrowIcon from 'icons/arrows/east.svg'; import rightArrowIcon from 'icons/arrows/east.svg';
import { space } from 'lib/html-entities'; import { space } from 'lib/html-entities';
import trimTokenSymbol from 'lib/token/trimTokenSymbol';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet'; import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
...@@ -27,9 +26,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { ...@@ -27,9 +26,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
<CurrencyValue value={ total.value } exchangeRate={ data.token.exchange_rate } fontWeight={ 600 } decimals={ total.decimals }/> <CurrencyValue value={ total.value } exchangeRate={ data.token.exchange_rate } fontWeight={ 600 } decimals={ total.decimals }/>
</Text> </Text>
<TokenSnippet <TokenSnippet
symbol={ trimTokenSymbol(data.token.symbol) } data={ data.token }
hash={ data.token.address }
name={ data.token.name }
w="auto" w="auto"
flexGrow="1" flexGrow="1"
columnGap={ 1 } columnGap={ 1 }
...@@ -43,11 +40,9 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { ...@@ -43,11 +40,9 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
const total = data.total as Erc721TotalPayload; const total = data.total as Erc721TotalPayload;
return ( return (
<NftTokenTransferSnippet <NftTokenTransferSnippet
name={ data.token.name } token={ data.token }
tokenId={ total.token_id } tokenId={ total.token_id }
value="1" value="1"
hash={ data.token.address }
symbol={ trimTokenSymbol(data.token.symbol) }
/> />
); );
} }
...@@ -56,12 +51,10 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { ...@@ -56,12 +51,10 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
const total = data.total as Erc1155TotalPayload; const total = data.total as Erc1155TotalPayload;
return ( return (
<NftTokenTransferSnippet <NftTokenTransferSnippet
name={ data.token.name }
key={ total.token_id } key={ total.token_id }
token={ data.token }
tokenId={ total.token_id } tokenId={ total.token_id }
value={ total.value } value={ total.value }
hash={ data.token.address }
symbol={ trimTokenSymbol(data.token.symbol) }
/> />
); );
} }
......
...@@ -14,14 +14,19 @@ import TokenLogo from 'ui/shared/TokenLogo'; ...@@ -14,14 +14,19 @@ import TokenLogo from 'ui/shared/TokenLogo';
const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => { const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
const infoItemsPaddingLeft = { base: 1, lg: 8 }; const infoItemsPaddingLeft = { base: 1, lg: 8 };
const nativeTokenData = React.useMemo(() => ({
address: appConfig.network.currency.address || '',
name: appConfig.network.currency.name || '',
icon_url: '',
}), [ ]);
return ( return (
<VStack spacing={ 2 } align="stretch" fontWeight={ 500 }> <VStack spacing={ 2 } align="stretch" fontWeight={ 500 }>
<AddressSnippet address={ item.address }/> <AddressSnippet address={ item.address }/>
<Flex fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }> <Flex fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
{ appConfig.network.currency.address && ( { appConfig.network.currency.address && (
<TokenLogo <TokenLogo
hash={ appConfig.network.currency.address } data={ nativeTokenData }
name={ appConfig.network.name }
boxSize={ 4 } boxSize={ 4 }
borderRadius="sm" borderRadius="sm"
mr={ 2 } mr={ 2 }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment