Skip to content

F
frontend
Commit 166046d7 authored by tom's avatar tom
Browse files
Options

refactor TxDetailsAction

parent 98b14083
Show whitespace changes
Inline Side-by-side
Showing with 97 additions and 85 deletions
icons/uniswap.svg 0 → 100644
View file @ 166046d7
<svg viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.346 13.736c.607 1.073-.75 1.406-1.386 1.467-.965.094-1.165-.464-.976-1.166a1.262 1.262 0 0 1 1.085-.951 1.342 1.342 0 0 1 1.277.65ZM18.133 11.752c-.705 5.417 8.8 4.29 8.618 8.6.938-1.223 1.34-4.55-1.42-6.262-2.458-1.526-5.662-.69-7.198-2.338ZM23.607 9.71c-.061-.058-.125-.114-.187-.17.063.057.125.117.187.17Z" fill="currentColor"/>
<path d="m25.817 13.658-.006-.009a3.601 3.601 0 0 0-.292-.458 2.358 2.358 0 0 0-1.303-.886 5.545 5.545 0 0 0-1.06-.167c-.364-.027-.734-.042-1.108-.061-.75-.042-1.518-.12-2.268-.334a6.304 6.304 0 0 1-1.11-.425 4.745 4.745 0 0 1-.973-.71c-.577-.54-1.031-1.151-1.486-1.745a20.606 20.606 0 0 0-1.378-1.714 6.285 6.285 0 0 0-1.687-1.324 5.812 5.812 0 0 0-2.101-.602 4.947 4.947 0 0 1 2.244.275 5.934 5.934 0 0 1 1.947 1.242c.367.345.712.714 1.032 1.104 2.38-.47 4.312-.052 5.796.76l.034.016a7.31 7.31 0 0 1 1.507 1.092c.316.292.61.606.88.942l.021.027c.877 1.115 1.31 2.274 1.31 2.977Z" fill="currentColor"/>
<path d="m25.816 13.658-.005-.011.005.01ZM11.165 5.92c.608.088 1.228.331 1.627.795.4.463.546 1.066.662 1.64.093.444.168.897.342 1.318.084.205.208.385.311.579.086.161.241.306.301.478a.154.154 0 0 1-.018.153c-.212.235-.783-.026-1-.132a3.254 3.254 0 0 1-.982-.753c-.866-.966-1.313-2.355-1.286-3.62a4.22 4.22 0 0 1 .043-.458ZM21.326 16.807c-1.312 3.679 4.64 6.147 2.41 9.888 2.289-.95 3.375-3.817 2.425-6.092-.83-1.998-3.286-2.726-4.835-3.796ZM13.453 21.616c.358-.27.749-.493 1.164-.663.42-.17.854-.295 1.299-.377.882-.169 1.755-.21 2.488-.507.362-.142.695-.35.983-.612.279-.26.492-.583.623-.942.133-.378.188-.78.16-1.181a4.348 4.348 0 0 0-.289-1.256 2.883 2.883 0 0 1 .734 2.614c-.114.49-.362.938-.715 1.294-.35.346-.77.61-1.234.773-.441.155-.902.25-1.37.282-.45.038-.884.048-1.312.074a8.433 8.433 0 0 0-2.53.502ZM21.85 28.085c-.133.105-.265.217-.41.315-.147.097-.3.183-.459.257-.33.162-.695.245-1.063.242-.997-.02-1.702-.765-2.115-1.608-.281-.574-.475-1.195-.809-1.742-.477-.783-1.294-1.413-2.25-1.296-.39.049-.755.225-.972.565-.57.888.248 2.132 1.292 1.956a1.14 1.14 0 0 0 .259-.072.936.936 0 0 0 .23-.14c.145-.122.255-.281.317-.461.069-.188.084-.391.044-.587a.806.806 0 0 0-.335-.502c.2.094.356.263.435.47.082.215.104.447.061.672a1.332 1.332 0 0 1-.298.635 1.304 1.304 0 0 1-.281.24 1.638 1.638 0 0 1-1.064.234 1.946 1.946 0 0 1-.947-.413c-.322-.256-.562-.591-.854-.88a4.057 4.057 0 0 0-1.164-.854c-.3-.132-.615-.23-.938-.291a6.176 6.176 0 0 0-.49-.08c-.075-.007-.443-.089-.494-.041.507-.469 1.06-.885 1.65-1.243a8.013 8.013 0 0 1 1.935-.832 5.497 5.497 0 0 1 2.164-.166c.374.045.74.14 1.088.282.365.147.702.356.995.618.291.275.526.604.692.97.15.34.262.698.334 1.064.214 1.095.135 2.793 1.563 3.044.074.014.15.025.225.032l.233.006c.16-.012.32-.035.477-.07.326-.076.644-.185.948-.324Z" fill="currentColor"/>
<path d="m13.553 26.89-.037-.029.037.03ZM12.272 11.434c-.052.2-.143.389-.267.554a2.167 2.167 0 0 1-.889.683c-.315.137-.65.225-.99.262-.075.01-.152.015-.226.02a1.01 1.01 0 0 0-.94.754 2.57 2.57 0 0 0-.057.317c-.034.277-.04.565-.07.914a5.428 5.428 0 0 1-.505 1.706c-.34.718-.72 1.296-.632 2.123.058.537.332.896.696 1.268.656.674 2.125.975 1.797 2.637-.198.991-1.835 2.032-4.135 2.395.229-.035-.294-.919-.326-.975-.247-.388-.517-.754-.713-1.175-.384-.816-.562-1.76-.405-2.655.166-.942.86-1.664 1.436-2.383.687-.856 1.407-1.978 1.566-3.089.037-.27.064-.606.124-.942.057-.371.173-.731.343-1.066.116-.22.269-.417.452-.585a.585.585 0 0 0 .112-.712L4.976 4.86l5.267 6.53a.656.656 0 0 0 1.01.022.448.448 0 0 0 .013-.565c-.344-.442-.708-.892-1.06-1.335L8.88 7.864l-2.66-3.29L2.592 0 6.56 4.278l2.832 3.146L10.806 9c.469.53.937 1.044 1.406 1.601l.077.094.017.146c.023.198.011.399-.034.593ZM13.486 26.847a3.535 3.535 0 0 1-.674-.689c.207.247.432.477.674.689Z" fill="currentColor"/>
</svg>
types/api/txAction.ts
View file @ 166046d7
export type TxAction = {
protocol: 'uniswap_v3';
type: 'mint' | 'burn' | 'collect' | 'swap' | 'mint_nft';
export interface TxActionGeneral {
type: 'mint' | 'burn' | 'collect' | 'swap';
data: {
name: string;
symbol: string;
address: string;
to: string;
ids: Array<string>;
amount0: string;
symbol0: string;
address0: string;
......@@ -15,3 +9,18 @@ export type TxAction = {
address1: string;
};
}
export interface TxActionNft {
type: 'mint_nft';
data: {
name: string;
symbol: string;
address: string;
to: string;
ids: Array<string>;
};
}
export type TxAction = {
protocol: 'uniswap_v3';
} & (TxActionGeneral | TxActionNft)
ui/shared/TokenSnippet/TokenSnippet.tsx
View file @ 166046d7
......@@ -10,13 +10,14 @@ interface Props {
name?: string | null;
className?: string;
logoSize?: number;
isDisabled?: boolean;
}
const TokenSnippet = ({ symbol, hash, name, className, logoSize = 6 }: Props) => {
const TokenSnippet = ({ symbol, hash, name, className, logoSize = 6, isDisabled }: Props) => {
return (
<Flex className={ className } alignItems="center" columnGap={ 2 } w="100%">
<TokenLogo boxSize={ logoSize } hash={ hash } name={ name }/>
<AddressLink hash={ hash } alias={ name } type="token"/>
<AddressLink hash={ hash } alias={ name } type="token" isDisabled={ isDisabled }/>
{ symbol && <Text variant="secondary">({ symbol })</Text> }
</Flex>
);
......
ui/tx/details/TxDetailsAction.tsx
View file @ 166046d7
import { Flex, Image, Link, Text } from '@chakra-ui/react';
import { Flex, Link, Icon, chakra } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import type { TxAction as TTxAction } from 'types/api/txAction';
import type { TxAction, TxActionGeneral } from 'types/api/txAction';
import { space } from 'lib/html-entities';
import appConfig from 'configs/app/config';
import uniswapIcon from 'icons/uniswap.svg';
import link from 'lib/link/link';
import trimTokenSymbol from 'lib/token/trimTokenSymbol';
import AddressLink from 'ui/shared/address/AddressLink';
import StringShorten from 'ui/shared/StringShorten';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
const uniswapIconUrl = 'https://raw.githubusercontent.com/trustwallet/assets/master/dapps/app.uniswap.org.png';
interface Props {
action: TTxAction;
isLast: boolean;
action: TxAction;
}
function uniswapActionName(actionType: string) {
function getActionText(actionType: TxActionGeneral['type']) {
switch (actionType) {
case 'mint': return [ 'Add', 'Liquidity To' ];
case 'burn': return [ 'Remove', 'Liquidity From' ];
case 'mint': return [ 'Add', 'Liquidity to' ];
case 'burn': return [ 'Remove', 'Liquidity from' ];
case 'collect': return [ 'Collect', 'From' ];
case 'swap': return [ 'Swap', 'On' ];
default: return [ '', '' ];
}
}
function unknownAction() {
return (<span>Unrecognized action</span>);
}
const TxDetailsAction = ({ action, isLast }: Props) => {
const TxDetailsAction = ({ action }: Props) => {
const { protocol, type, data } = action;
if (protocol === 'uniswap_v3') {
if ([ 'mint', 'burn', 'collect', 'swap' ].includes(type)) {
if (protocol !== 'uniswap_v3') {
return null;
}
switch (type) {
case 'mint':
case 'burn':
case 'collect':
case 'swap': {
const amount0 = BigNumber(data.amount0).toFormat();
const amount1 = BigNumber(data.amount1).toFormat();
const [ text0, text1 ] = getActionText(type);
return (
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } className={ isLast ? 'lastItem' : '' } marginBottom={ isLast ? 5 : 0 }>
<Text color="gray.500" as="span">
{ uniswapActionName(type)[0] }
</Text>
<Flex columnGap={ 1 }>
<Text as="span">{ amount0 }</Text>
{ data.symbol0 === 'Ether' ? <Text as="span">Ether</Text> : <TokenSnippet name={ data.symbol0 } hash={ data.address0 }/> }
</Flex>
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } alignItems="center">
<chakra.span color="text_secondary">{ text0 }: </chakra.span>
<Text color="gray.500" as="span">
{ type === 'swap' ? 'For' : 'And' }
</Text>
<chakra.span fontWeight={ 600 }>{ amount0 }</chakra.span>
<TokenSnippet
name={ data.symbol0 === 'Ether' ? appConfig.network.currency.symbol : data.symbol0 }
hash={ data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address1 }
w="auto"
columnGap={ 1 }
logoSize={ 5 }
isDisabled={ data.symbol0 === 'Ether' }
/>
<Flex columnGap={ 1 }>
<Text as="span">{ amount1 }</Text>
{ data.symbol1 === 'Ether' ? <Text as="span">Ether</Text> : <TokenSnippet name={ data.symbol1 } hash={ data.address1 }/> }
</Flex>
<chakra.span color="text_secondary">{ type === 'swap' ? 'For' : 'And' }: </chakra.span>
<Text color="gray.500" as="span">
{ uniswapActionName(type)[1] }
</Text>
<chakra.span fontWeight={ 600 }>{ amount1 }</chakra.span>
<TokenSnippet
name={ data.symbol1 === 'Ether' ? appConfig.network.currency.symbol : data.symbol1 }
hash={ data.symbol1 === 'Ether' ? appConfig.network.currency.address || '' : data.address1 }
w="auto"
columnGap={ 1 }
logoSize={ 5 }
isDisabled={ data.symbol1 === 'Ether' }
/>
<Flex columnGap={ 1 }>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback={ <Text as="span"/> } alt=""/>
<Text color="gray.500" as="span">
Uniswap V3
</Text>
</Flex>
<chakra.span color="text_secondary">{ text1 } </chakra.span>
<Icon as={ uniswapIcon } boxSize={ 5 } color="white" bgColor="#ff007a" borderRadius="full" p="2px"/>
<chakra.span color="text_secondary">Uniswap V3</chakra.span>
</Flex>
);
} else if (type === 'mint_nft') {
const tokenUrl = link('token_index', { hash: data.address });
}
case 'mint_nft' : {
return (
<Flex rowGap={ 2 } flexDirection="column" className={ isLast ? 'lastItem' : '' } marginBottom={ isLast ? 5 : 0 }>
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
<Flex columnGap={ 1 }>
<Text as="span">Mint of</Text>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback={ <Text as="span"/> } alt=""/>
<Link href={ tokenUrl } target="_blank" overflow="hidden" whiteSpace="nowrap">
<StringShorten title={ data.name } maxLength={ 12 }/>
{ space }
(<StringShorten title={ data.symbol } maxLength={ 6 }/>)
</Link>
</Flex>
<Flex columnGap={ 1 }>
<Text as="span">To</Text>
<AddressLink hash={ data.to } type="address"/>
</Flex>
<div>
<Flex rowGap={ 2 } flexWrap="wrap" whiteSpace="pre-wrap">
<span>Mint of </span>
<TokenSnippet
name={ data.name }
hash={ data.address }
symbol={ trimTokenSymbol(data.symbol) }
w="auto"
columnGap={ 1 }
logoSize={ 5 }
/>
<span> to </span>
<AddressLink hash={ data.to } type="address" truncation="constant"/>
</Flex>
<Flex columnGap={ 1 } rowGap={ 2 } marginLeft={ 3 } flexDirection="column">
<Flex columnGap={ 1 } rowGap={ 2 } pl={ 3 } flexDirection="column" mt={ 2 }>
{
data.ids.map((id: string) => {
const url = link('token_instance_item', { hash: data.address, id });
return (
<Flex key={ id }>
<Flex columnGap={ 1 }>
<Text>1 of</Text>
<Text color="gray.500">Token ID [</Text>
</Flex>
<Flex key={ data.address + id } whiteSpace="pre-wrap">
<span>1 of </span>
<chakra.span color="text_secondary">Token ID [</chakra.span>
<Link href={ url }>{ id }</Link>
<Text color="gray.500">]</Text>
<chakra.span color="text_secondary">]</chakra.span>
</Flex>
);
})
}
</Flex>
</Flex>
</div>
);
} else {
return unknownAction();
}
} else {
return unknownAction();
default:
return null;
}
};
......
ui/tx/details/TxDetailsActions.tsx
View file @ 166046d7
......@@ -23,9 +23,8 @@ const TxDetailsActions = ({ actions }: Props) => {
alignItems="flex-start"
rowGap={ 5 }
w="100%"
fontWeight={ 500 }
>
{ actions.map((action, index: number) => <TxDetailsAction key={ index } action={ action } isLast={ index === actions.length - 1 }/>) }
{ actions.map((action, index: number) => <TxDetailsAction key={ index } action={ action }/>) }
</Flex>
</DetailsInfoItem>
);
......
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