Skip to content

F
frontend
Commit 81135ea4 authored by tom's avatar tom
Browse files
Options

refactoring

parent e3ba2871
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 128 deletions
ui/address/details/TokenItem.tsx
View file @ 81135ea4
import { Flex, useColorModeValue } from '@chakra-ui/react'; import { Flex, Text, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
import type { AddressTokenBalance } from 'types/api/address';
import HashStringShorten from 'ui/shared/HashStringShorten';
import TokenLogo from 'ui/shared/TokenLogo';
interface Props { interface Props {
children: React.ReactNode; data: AddressTokenBalance;
usd?: string;
} }
const TokenItem = ({ children }: Props) => { const TokenItem = ({ data, usd }: Props) => {
const secondRow = (() => {
switch (data.token.type) {
case 'ERC-20': {
const tokenDecimals = Number(data.token.decimals) || 18;
return (
<>
<Text >{ BigNumber(data.value).dividedBy(10 ** tokenDecimals).dp(2).toFormat() } { data.token.symbol }</Text>
{ data.token.exchange_rate && <Text >@{ data.token.exchange_rate }</Text> }
</>
);
}
case 'ERC-721': {
return <Text >{ BigNumber(data.value).toFormat() } { data.token.symbol }</Text>;
}
case 'ERC-1155': {
return (
<>
<Text >#{ data.token_id || 0 }</Text>
<Text >{ BigNumber(data.value).toFormat() }</Text>
</>
);
}
}
})();
return ( return (
<Flex <Flex
px={ 1 } px={ 1 }
...@@ -21,7 +54,14 @@ const TokenItem = ({ children }: Props) => { ...@@ -21,7 +54,14 @@ const TokenItem = ({ children }: Props) => {
fontSize="sm" fontSize="sm"
cursor="pointer" cursor="pointer"
> >
{ children } <Flex alignItems="center" w="100%">
<TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
<Text fontWeight={ 700 } ml={ 2 }>{ data.token.name || <HashStringShorten hash={ data.token.address }/> }</Text>
{ usd && <Text fontWeight={ 700 } ml="auto">${ usd }</Text> }
</Flex>
<Flex alignItems="center" justifyContent="space-between" w="100%">
{ secondRow }
</Flex>
</Flex> </Flex>
); );
}; };
......
ui/address/details/TokenItemErc1155.tsx deleted 100644 → 0
View file @ e3ba2871
import { Flex, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import type { AddressTokenBalance } from 'types/api/address';
import HashStringShorten from 'ui/shared/HashStringShorten';
import TokenLogo from 'ui/shared/TokenLogo';
import TokenItem from './TokenItem';
interface Props {
data: AddressTokenBalance;
}
const TokenItemErc1155 = ({ data }: Props) => {
return (
<TokenItem>
<Flex alignItems="center" w="100%">
<TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
<Text fontWeight={ 700 } ml={ 2 }>
{ data.token.name || <HashStringShorten hash={ data.token.address }/> }
</Text>
</Flex>
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Text >#{ data.token_id || 0 }</Text>
<Text >{ BigNumber(data.value).toFormat() }</Text>
</Flex>
</TokenItem>
);
};
export default React.memo(TokenItemErc1155);
ui/address/details/TokenItemErc20.tsx deleted 100644 → 0
View file @ e3ba2871
import { Flex, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import type { AddressTokenBalance } from 'types/api/address';
import getCurrencyValue from 'lib/getCurrencyValue';
import TokenLogo from 'ui/shared/TokenLogo';
import TokenItem from './TokenItem';
interface Props {
data: AddressTokenBalance;
}
const TokenItemErc20 = ({ data }: Props) => {
const tokenDecimals = Number(data.token.decimals) || 18;
const { usd } = getCurrencyValue({
value: data.value,
accuracyUsd: 2,
exchangeRate: data.token.exchange_rate,
});
return (
<TokenItem>
<Flex alignItems="center" w="100%">
<TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
<Text fontWeight={ 700 } ml={ 2 }>{ data.token.name }</Text>
{ usd && <Text fontWeight={ 700 } ml="auto">${ usd }</Text> }
</Flex>
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Text >{ BigNumber(data.value).dividedBy(10 ** tokenDecimals).dp(2).toFormat() } { data.token.symbol }</Text>
{ data.token.exchange_rate && <Text >@{ data.token.exchange_rate }</Text> }
</Flex>
</TokenItem>
);
};
export default React.memo(TokenItemErc20);
ui/address/details/TokenItemErc721.tsx deleted 100644 → 0
View file @ e3ba2871
import { Flex, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import type { AddressTokenBalance } from 'types/api/address';
import TokenLogo from 'ui/shared/TokenLogo';
import TokenItem from './TokenItem';
interface Props {
data: AddressTokenBalance;
}
const TokenItemErc721 = ({ data }: Props) => {
return (
<TokenItem>
<Flex alignItems="center" w="100%">
<TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
<Text fontWeight={ 700 } ml={ 2 }>{ data.token.name }</Text>
</Flex>
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Text >{ BigNumber(data.value).toFormat() } { data.token.symbol }</Text>
</Flex>
</TokenItem>
);
};
export default React.memo(TokenItemErc721);
ui/address/details/Tokens.tsx
View file @ 81135ea4
...@@ -13,11 +13,15 @@ import type { AddressTokenBalance } from 'types/api/address'; ...@@ -13,11 +13,15 @@ import type { AddressTokenBalance } from 'types/api/address';
import searchIcon from 'icons/search.svg'; import searchIcon from 'icons/search.svg';
import TokenItemErc1155 from './TokenItemErc1155'; import TokenItem from './TokenItem';
import TokenItemErc20 from './TokenItemErc20';
import TokenItemErc721 from './TokenItemErc721';
import TokensButton from './TokensButton'; import TokensButton from './TokensButton';
const TOKEN_GROUPS_ORDER = [ 'ERC-20', 'ERC-721', 'ERC-1155' ];
type TokenGroup = [string, Array<AddressTokenBalance>];
const sortTokenGroups = (groupA: TokenGroup, groupB: TokenGroup) => {
return TOKEN_GROUPS_ORDER.indexOf(groupA[0]) > TOKEN_GROUPS_ORDER.indexOf(groupB[0]) ? 1 : -1;
};
interface Props { interface Props {
data: Array<AddressTokenBalance>; data: Array<AddressTokenBalance>;
} }
...@@ -38,7 +42,13 @@ const AddressTokenSelect = ({ data }: Props) => { ...@@ -38,7 +42,13 @@ const AddressTokenSelect = ({ data }: Props) => {
const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200'); const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
const bgColor = useColorModeValue('white', 'gray.900'); const bgColor = useColorModeValue('white', 'gray.900');
const filteredData = data.filter(({ token }) => !token.name && !searchTerm ? true : token.name?.toLowerCase().includes(searchTerm.toLowerCase())); const filteredData = data.filter(({ token }) => {
if (!token.name) {
return !searchTerm ? true : token.address.toLowerCase().includes(searchTerm.toLowerCase());
}
return token.name?.toLowerCase().includes(searchTerm.toLowerCase());
});
const groupedData = _groupBy(filteredData, 'token.type'); const groupedData = _groupBy(filteredData, 'token.type');
return ( return (
...@@ -62,24 +72,14 @@ const AddressTokenSelect = ({ data }: Props) => { ...@@ -62,24 +72,14 @@ const AddressTokenSelect = ({ data }: Props) => {
/> />
</InputGroup> </InputGroup>
<Flex flexDir="column" rowGap={ 6 }> <Flex flexDir="column" rowGap={ 6 }>
{ groupedData['ERC-20'] && ( { Object.entries(groupedData).sort(sortTokenGroups).map(([ tokenType, tokenInfo ]) => {
<Box> return (
<Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-20 tokens ({ groupedData['ERC-20'].length })</Text> <Box key={ tokenType }>
{ groupedData['ERC-20'].map((data) => <TokenItemErc20 key={ data.token.address } data={ data }/>) } <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">{ tokenType } tokens ({ tokenInfo.length })</Text>
</Box> { tokenInfo.map((data) => <TokenItem key={ data.token.address } data={ data }/>) }
) }
{ groupedData['ERC-721'] && (
<Box>
<Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-721 tokens ({ groupedData['ERC-721'].length })</Text>
{ groupedData['ERC-721'].map((data) => <TokenItemErc721 key={ data.token.address } data={ data }/>) }
</Box>
) }
{ groupedData['ERC-1155'] && (
<Box>
<Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-1155 tokens ({ groupedData['ERC-1155'].length })</Text>
{ groupedData['ERC-1155'].map((data) => <TokenItemErc1155 key={ data.token.address } data={ data }/>) }
</Box> </Box>
) } );
}) }
</Flex> </Flex>
{ filteredData.length === 0 && searchTerm && <Text fontSize="sm">Could not find any matches.</Text> } { filteredData.length === 0 && searchTerm && <Text fontSize="sm">Could not find any matches.</Text> }
</PopoverBody> </PopoverBody>
......
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