mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tokens in network
This commit is contained in:
tom
+2
-2
@@ -36,7 +36,7 @@ export const tx = {
|
||||
position: 342,
|
||||
input_hex: '0x42842e0e0000000000000000000000007767dac225a233ea1055d79fb227b1696d538b75000000000000000000000000fc3017c31fe752fc48e904050ea5d6edfc38a1b00000000000000000000000000000000000000000000000000000000000000e3b',
|
||||
transferred_tokens: [
|
||||
{ from: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01', to: '0xF7A558692dFB5F456e291791da7FAE8Dd046574e', token: 'USDT', amount: 192.7, usd: 194.05 },
|
||||
{ from: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45', to: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01', token: 'TOKE', amount: 76.1851851851846, usd: 194.05 },
|
||||
{ from: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01', to: '0xF7A558692dFB5F456e291791da7FAE8Dd046574e', token: { symbol: 'VIK', hash: '0xADFE00d92e5A16e773891F59780e6e54f40B532e', name: 'Viktor Coin' }, amount: 192.7, usd: 194.05 },
|
||||
{ from: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45', to: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01', token: { symbol: 'PAO', hash: '0xC98a06220239818B086CD96756d4E3bC41EC848E', name: 'POA Candy' }, amount: 76.1851851851846, usd: 194.05 },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path fill="url(#toke_svg__a)" d="M0 0h20v20H0z"/>
|
||||
<defs>
|
||||
<pattern id="toke_svg__a" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#toke_svg__b" transform="scale(.03125)"/>
|
||||
</pattern>
|
||||
<image id="toke_svg__b" width="32" height="32" xlink:href="data:image/png;base64,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"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.0 KiB |
@@ -15,4 +15,5 @@ export interface Network {
|
||||
icon?: FunctionComponent<SVGAttributes<SVGElement>> | string;
|
||||
logo?: FunctionComponent<SVGAttributes<SVGElement>> | string;
|
||||
isAccountSupported?: boolean;
|
||||
assetsNamePath?: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Image, chakra } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import type { Network } from 'types/networks';
|
||||
|
||||
import useNetwork from 'lib/hooks/useNetwork';
|
||||
|
||||
const EmptyElement = () => null;
|
||||
|
||||
const ASSETS_PATH_MAP: Record<string, string> = {
|
||||
'xdai/mainnet': 'xdai',
|
||||
'xdai/testnet': 'xdai',
|
||||
'xdai/optimism': 'optimism',
|
||||
'xdai/aox': 'arbitrum',
|
||||
'eth/mainnet': 'ethereum',
|
||||
'etc/mainnet': 'classic',
|
||||
'poa/core': 'poa',
|
||||
};
|
||||
|
||||
const getAssetsPath = (network: Network) => {
|
||||
if (network.assetsNamePath) {
|
||||
return network.assetsNamePath;
|
||||
}
|
||||
|
||||
const key = [ network.type, network.subType ].filter(Boolean).join('/');
|
||||
const nameFromMap = ASSETS_PATH_MAP[key];
|
||||
|
||||
return nameFromMap || network.type;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
hash: string;
|
||||
name: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TokenLogo = ({ hash, name, className }: Props) => {
|
||||
const network = useNetwork();
|
||||
|
||||
if (!network) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const assetsPath = getAssetsPath(network);
|
||||
const logoSrc = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${ assetsPath }/assets/${ hash }/logo.png`;
|
||||
|
||||
return <Image className={ className } src={ logoSrc } alt={ `${ name } logo` } fallback={ <EmptyElement/> }/>;
|
||||
};
|
||||
|
||||
export default React.memo(chakra(TokenLogo));
|
||||
+11
-32
@@ -1,49 +1,28 @@
|
||||
import { Center, Icon, Link, Text, chakra } from '@chakra-ui/react';
|
||||
import { Center, Link, Text, chakra } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import tokeIcon from 'icons/tokens/toke.svg';
|
||||
import usdtIcon from 'icons/tokens/usdt.svg';
|
||||
import useLink from 'lib/link/useLink';
|
||||
|
||||
// temporary solution
|
||||
// don't know where to get icons and addresses yet
|
||||
const TOKENS = {
|
||||
USDT: {
|
||||
fullName: 'Tether USD',
|
||||
symbol: 'USDT',
|
||||
icon: usdtIcon,
|
||||
address: '0x9bD35A17C9C7c8820f89e0277e2046CDC57aCB15',
|
||||
},
|
||||
TOKE: {
|
||||
fullName: 'Tokemak',
|
||||
symbol: 'TOKE',
|
||||
icon: tokeIcon,
|
||||
address: '0x9bD35A17C9C7c8820f89e0277e2046CDC57aCB15',
|
||||
},
|
||||
};
|
||||
import TokenLogo from 'ui/shared/TokenLogo';
|
||||
|
||||
interface Props {
|
||||
symbol: string;
|
||||
hash: string;
|
||||
name: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TokenSnippet = ({ symbol, className }: Props) => {
|
||||
const token = TOKENS[symbol as keyof typeof TOKENS];
|
||||
const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
|
||||
const link = useLink();
|
||||
|
||||
if (!token) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const url = link('token_index', { id: token.address });
|
||||
const url = link('token_index', { id: hash });
|
||||
|
||||
return (
|
||||
<Center className={ className }>
|
||||
<Icon as={ token.icon } boxSize={ 5 }/>
|
||||
<Link href={ url } target="_blank" ml={ 1 }>
|
||||
{ token.fullName }
|
||||
<Center className={ className } columnGap={ 1 }>
|
||||
<TokenLogo boxSize={ 5 } hash={ hash } name={ name }/>
|
||||
<Link href={ url } target="_blank">
|
||||
{ name }
|
||||
</Link>
|
||||
<Text ml={ 1 } variant="secondary">({ token.symbol })</Text>
|
||||
<Text variant="secondary">({ symbol })</Text>
|
||||
</Center>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -9,9 +9,13 @@ import TokenSnippet from 'ui/shared/TokenSnippet';
|
||||
interface Props {
|
||||
from: string;
|
||||
to: string;
|
||||
token: string;
|
||||
amount: number;
|
||||
usd: number;
|
||||
token: {
|
||||
symbol: string;
|
||||
hash: string;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
|
||||
@@ -26,7 +30,7 @@ const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
|
||||
<Text fontWeight={ 600 } as="span">{ amount }</Text>{ space }
|
||||
<Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text>
|
||||
</Text>
|
||||
<TokenSnippet symbol={ token }/>
|
||||
<TokenSnippet { ...token }/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-2
@@ -108,14 +108,14 @@ const TxDetails = () => {
|
||||
<Icon as={ errorIcon } boxSize={ 4 } ml={ 2 } color="red.500" cursor="pointer"/>
|
||||
</chakra.span>
|
||||
</Tooltip>
|
||||
<TokenSnippet symbol="USDT" ml={ 3 }/>
|
||||
<TokenSnippet symbol="UP" name="User Pay" hash="0xA17ed5dFc62D0a3E74D69a0503AE9FdA65d9f212" ml={ 3 }/>
|
||||
</DetailsInfoItem>
|
||||
<DetailsInfoItem
|
||||
title="Token transferred"
|
||||
hint="List of token transferred in the transaction."
|
||||
>
|
||||
<Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
|
||||
{ tx.transferred_tokens.map((item) => <TokenTransfer key={ item.token } { ...item }/>) }
|
||||
{ tx.transferred_tokens.map((item) => <TokenTransfer key={ item.token.hash } { ...item }/>) }
|
||||
</Flex>
|
||||
</DetailsInfoItem>
|
||||
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
|
||||
|
||||
Reference in New Issue
Block a user