Commit 062f9b3f authored by tom's avatar tom

more token transfer types

parent 693b0717
......@@ -2,25 +2,39 @@ import type { AddressParam } from './addressParams';
export type TokenTransfer = (
{
type: 'token_transfer';
token_type: 'ERC-20';
total: {
value: string;
};
} |
{
type: 'token_minting';
token_type: 'ERC-721';
total: {
token_id: string;
};
} |
{
token_type: 'ERC-1155';
total: {
value: string;
token_id: string;
};
} |
{
token_type: 'ERC-1155_batch';
total: Array<{
value: string;
token_id: string;
}>;
}
) & TokenTransferBase
interface TokenTransferBase {
type: 'token_transfer' | 'token_burning' | 'token_spawning' | 'token_minting';
txHash: string;
from: AddressParam;
to: AddressParam;
token_address: string;
token_symbol: string;
token_type: string;
exchange_rate: string;
}
......@@ -5,41 +5,46 @@ import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
import rightArrowIcon from 'icons/arrows/east.svg';
import { space } from 'lib/html-entities';
import useLink from 'lib/link/useLink';
import link from 'lib/link/link';
import AddressLink from 'ui/shared/address/AddressLink';
import CurrencyValue from 'ui/shared/CurrencyValue';
import TokenSnippet from 'ui/shared/TokenSnippet';
type Props = TTokenTransfer
const TokenTransfer = ({ from, to, total, exchange_rate: exchangeRate, type, ...token }: Props) => {
const link = useLink();
const TokenTransfer = (props: Props) => {
const content = (() => {
switch (type) {
case 'token_transfer':
switch (props.token_type) {
case 'ERC-20':
return (
<CurrencyValue value={ total.value } unit="ether" exchangeRate={ exchangeRate } fontWeight={ 600 }/>
<Text fontWeight={ 500 } as="span">For:{ space }
<CurrencyValue value={ props.total.value } unit="ether" exchangeRate={ props.exchange_rate } fontWeight={ 600 }/>
</Text>
);
case 'token_minting': {
const url = link('token_instance_item', { hash: token.token_address, id: total.token_id });
return <Text as="span">Token ID [<Link href={ url }>{ total.token_id }</Link>]</Text>;
case 'ERC-721': {
const url = link('token_instance_item', { hash: props.token_address, id: props.total.token_id });
return (
<Text fontWeight={ 500 } as="span">For token ID:{ space }
<Link href={ url } fontWeight={ 600 }>{ props.total.token_id }</Link>
</Text>
);
}
default:
return null;
}
})();
return (
<Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
<Flex alignItems="center">
<AddressLink fontWeight="500" hash={ from.hash } truncation="constant"/>
<AddressLink fontWeight="500" hash={ props.from.hash } truncation="constant"/>
<Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
<AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
<AddressLink fontWeight="500" hash={ props.to.hash } truncation="constant"/>
</Flex>
<Text fontWeight={ 500 } as="span">For:{ space }
{ content }
</Text>
<TokenSnippet symbol={ token.token_symbol } hash={ token.token_address } name="Foo"/>
<TokenSnippet symbol={ props.token_symbol } hash={ props.token_address } name="Foo"/>
</Flex>
);
};
......
......@@ -35,6 +35,13 @@ import TxRevertReason from 'ui/tx/details/TxRevertReason';
import TokenTransfer from 'ui/tx/TokenTransfer';
import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
const TOKEN_TRANSFERS = [
{ title: 'Tokens Transferred', hint: 'List of tokens transferred in the transaction.', type: 'token_transfer' },
{ title: 'Tokens Minted', hint: 'List of tokens minted in the transaction.', type: 'token_minting' },
{ title: 'Tokens Burnt', hint: 'List of tokens burnt in the transaction.', type: 'token_burning' },
{ title: 'Tokens Created', hint: 'List of tokens created in the transaction.', type: 'token_spawning' },
];
const TxDetails = () => {
const router = useRouter();
const fetch = useFetch();
......@@ -65,9 +72,6 @@ const TxDetails = () => {
return <DataFetchAlert/>;
}
const transferredTokens = data.token_transfers?.filter(({ type }) => type === 'token_transfer') || [];
const mintedTokens = data.token_transfers?.filter(({ type }) => type === 'token_minting') || [];
return (
<Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
<DetailsInfoItem
......@@ -157,26 +161,24 @@ const TxDetails = () => {
</Tooltip> */ }
{ /* <TokenSnippet symbol="UP" name="User Pay" hash="0xA17ed5dFc62D0a3E74D69a0503AE9FdA65d9f212" ml={ 3 }/> */ }
</DetailsInfoItem>
{ transferredTokens.length > 0 && (
<DetailsInfoItem
title="Token transferred"
hint="List of token transferred in the transaction."
>
<Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
{ transferredTokens.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
</Flex>
</DetailsInfoItem>
) }
{ mintedTokens.length > 0 && (
{ TOKEN_TRANSFERS.map(({ title, hint, type }) => {
const items = data.token_transfers?.filter((token) => token.type === type) || [];
if (items.length === 0) {
return null;
}
return (
<DetailsInfoItem
title="Token Minted"
hint="List of token minted in the transaction."
key={ type }
title={ title }
hint={ hint }
>
<Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
{ mintedTokens.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
{ items.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
</Flex>
</DetailsInfoItem>
) }
);
}) }
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
<DetailsInfoItem
title="Value"
......
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