Skip to content

F
frontend
Commit 625eb0f2 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Transaction actions: update styles (#1258) 

Fixes #1231
parent c79c669e
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 37 deletions
ui/tx/NftTokenTransferSnippet.tsx
View file @ 625eb0f2
import { Flex, Text } from '@chakra-ui/react'; import { Flex, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token'; import type { TokenInfo } from 'types/api/token';
...@@ -16,8 +16,16 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => { ...@@ -16,8 +16,16 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
const num = value === '1' ? '' : value; const num = value === '1' ? '' : value;
return ( return (
<Flex alignItems="center" columnGap={ 3 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}> <Flex alignItems="center" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
<Text fontWeight={ 500 } as="span">For { num } token ID:</Text> { num ? (
<>
<chakra.span color="text_secondary">for</chakra.span>
<span>{ num }</span>
<chakra.span color="text_secondary">token ID</chakra.span>
</>
) : (
<chakra.span color="text_secondary">for token ID</chakra.span>
) }
<NftEntity <NftEntity
hash={ token.address } hash={ token.address }
id={ tokenId } id={ tokenId }
...@@ -27,6 +35,7 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => { ...@@ -27,6 +35,7 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
w="auto" w="auto"
flexShrink={ 0 } flexShrink={ 0 }
/> />
<chakra.span color="text_secondary">of</chakra.span>
<TokenEntity <TokenEntity
token={ token } token={ token }
noCopy noCopy
......
ui/tx/TxDetails.tsx
View file @ 625eb0f2
...@@ -120,7 +120,7 @@ const TxDetails = () => { ...@@ -120,7 +120,7 @@ const TxDetails = () => {
return ( return (
<> <>
{ config.chain.isTestnet && <Alert status="warning" mb={ 6 }>This is a testnet transaction only</Alert> } { config.chain.isTestnet && <Alert status="warning" mb={ 6 }>This is a testnet transaction only</Alert> }
<Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}> <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
{ socketStatus && ( { socketStatus && (
<GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 2 }> <GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 2 }>
<TxSocketAlert status={ socketStatus }/> <TxSocketAlert status={ socketStatus }/>
......
ui/tx/details/TxDetailsAction.tsx
View file @ 625eb0f2
...@@ -16,10 +16,10 @@ interface Props { ...@@ -16,10 +16,10 @@ interface Props {
function getActionText(actionType: TxActionGeneral['type']) { function getActionText(actionType: TxActionGeneral['type']) {
switch (actionType) { switch (actionType) {
case 'mint': return [ 'Add', 'Liquidity to' ]; case 'mint': return [ 'Added', 'liquidity to' ];
case 'burn': return [ 'Remove', 'Liquidity from' ]; case 'burn': return [ 'Removed', 'liquidity from' ];
case 'collect': return [ 'Collect', 'From' ]; case 'collect': return [ 'Collected', 'from' ];
case 'swap': return [ 'Swap', 'On' ]; case 'swap': return [ 'Swapped', 'on' ];
} }
} }
...@@ -54,26 +54,30 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -54,26 +54,30 @@ const TxDetailsAction = ({ action }: Props) => {
}; };
return ( return (
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } alignItems="center"> <Flex flexWrap="wrap" columnGap={ 2 } rowGap={ 2 } alignItems="center" fontWeight={ 500 }>
<chakra.span color="text_secondary">{ text0 }: </chakra.span> <chakra.span color="text_secondary">{ text0 }</chakra.span>
<span>{ amount0 }</span>
<chakra.span fontWeight={ 600 } mr={ 1 }>{ amount0 }</chakra.span>
<TokenEntity <TokenEntity
token={ token0 } token={ token0 }
noLink={ data.symbol0 === 'Ether' } noLink={ data.symbol0 === 'Ether' }
noCopy noCopy
noIcon
noSymbol noSymbol
w="auto" w="auto"
maxW="200px" maxW="200px"
flexShrink={ 0 } flexShrink={ 0 }
/> />
<chakra.span color="text_secondary">{ type === 'swap' ? 'For' : 'And' }: </chakra.span> <chakra.span color="text_secondary">{ type === 'swap' ? 'for' : 'and' }</chakra.span>
<span>{ amount1 }</span>
<chakra.span fontWeight={ 600 } mr={ 1 }>{ amount1 }</chakra.span>
<TokenEntity <TokenEntity
token={ token1 } token={ token1 }
noLink={ data.symbol1 === 'Ether' } noLink={ data.symbol1 === 'Ether' }
noIcon
noCopy noCopy
noSymbol noSymbol
w="auto" w="auto"
...@@ -81,10 +85,11 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -81,10 +85,11 @@ const TxDetailsAction = ({ action }: Props) => {
flexShrink={ 0 } flexShrink={ 0 }
/> />
<chakra.span color="text_secondary" mr={ 1 }>{ text1 }</chakra.span> <chakra.span color="text_secondary">{ text1 }</chakra.span>
<Flex columnGap={ 2 }> <Flex columnGap={ 2 }>
<Icon as={ uniswapIcon } boxSize={ 5 } color="white" bgColor="#ff007a" borderRadius="full" p="2px"/> <Icon as={ uniswapIcon } boxSize={ 5 } color="white" bgColor="#ff007a" borderRadius="full" p="2px"/>
<chakra.span color="text_secondary">Uniswap V3</chakra.span> <chakra.span>Uniswap V3</chakra.span>
</Flex> </Flex>
</Flex> </Flex>
); );
...@@ -101,15 +106,18 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -101,15 +106,18 @@ const TxDetailsAction = ({ action }: Props) => {
return ( return (
<div> <div>
<Flex rowGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap"> <Flex rowGap={ 2 } columnGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap" fontWeight={ 500 }>
<chakra.span mr={ 2 }>Mint of</chakra.span> <chakra.span color="text_secondary">Minted</chakra.span>
<TokenEntity <TokenEntity
token={ token } token={ token }
noCopy noCopy
w="auto" w="auto"
rowGap={ 2 } rowGap={ 2 }
/> />
<chakra.span> to </chakra.span>
<chakra.span color="text_secondary">to</chakra.span>
<AddressEntity <AddressEntity
address={{ hash: data.to }} address={{ hash: data.to }}
truncation="constant" truncation="constant"
...@@ -118,15 +126,14 @@ const TxDetailsAction = ({ action }: Props) => { ...@@ -118,15 +126,14 @@ const TxDetailsAction = ({ action }: Props) => {
/> />
</Flex> </Flex>
<Flex columnGap={ 1 } rowGap={ 2 } pl={ 3 } flexDirection="column" mt={ 2 }> <Flex columnGap={ 1 } rowGap={ 2 } pl={ 3 } flexDirection="column" mt={ 2 } fontWeight={ 500 }>
{ {
data.ids.map((id: string) => { data.ids.map((id: string) => {
return ( return (
<Flex key={ data.address + id } whiteSpace="pre-wrap"> <Flex key={ data.address + id } whiteSpace="pre-wrap" columnGap={ 2 }>
<chakra.span flexShrink={ 0 }>1 of </chakra.span> <chakra.span flexShrink={ 0 }>1</chakra.span>
<chakra.span color="text_secondary" flexShrink={ 0 }>Token ID [</chakra.span> <chakra.span color="text_secondary" flexShrink={ 0 }>of token ID</chakra.span>
<NftEntity hash={ data.address } id={ id } noIcon w="min-content"/> <NftEntity hash={ data.address } id={ id } w="min-content" iconSize="md"/>
<chakra.span color="text_secondary" flexShrink={ 0 }>]</chakra.span>
</Flex> </Flex>
); );
}) })
......
ui/tx/details/TxDetailsActions.tsx
View file @ 625eb0f2
...@@ -7,6 +7,8 @@ import DetailsInfoItem from 'ui/shared/DetailsInfoItem'; ...@@ -7,6 +7,8 @@ import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import TxDetailsAction from './TxDetailsAction'; import TxDetailsAction from './TxDetailsAction';
const SCROLL_GRADIENT_HEIGHT = 48;
interface Props { interface Props {
actions: Array<TxAction>; actions: Array<TxAction>;
} }
...@@ -22,7 +24,8 @@ const TxDetailsActions = ({ actions }: Props) => { ...@@ -22,7 +24,8 @@ const TxDetailsActions = ({ actions }: Props) => {
if (!containerRef.current) { if (!containerRef.current) {
return; return;
} }
setHasScroll(containerRef.current.scrollHeight > containerRef.current.clientHeight);
setHasScroll(containerRef.current.scrollHeight >= containerRef.current.clientHeight + SCROLL_GRADIENT_HEIGHT / 2);
}, []); }, []);
return ( return (
...@@ -46,7 +49,7 @@ const TxDetailsActions = ({ actions }: Props) => { ...@@ -46,7 +49,7 @@ const TxDetailsActions = ({ actions }: Props) => {
bottom: 0, bottom: 0,
left: 0, left: 0,
right: '20px', right: '20px',
height: '48px', height: `${ SCROLL_GRADIENT_HEIGHT }px`,
bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`, bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
} : undefined } } : undefined }
pr={ hasScroll ? 5 : 0 } pr={ hasScroll ? 5 : 0 }
......
ui/tx/details/TxDetailsTokenTransfer.tsx
View file @ 625eb0f2
import { Flex, Icon, Text } from '@chakra-ui/react'; import { Flex, Icon, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPayload, Erc1155TotalPayload } from 'types/api/tokenTransfer'; import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPayload, Erc1155TotalPayload } from 'types/api/tokenTransfer';
import rightArrowIcon from 'icons/arrows/east.svg'; import rightArrowIcon from 'icons/arrows/east.svg';
import { space } from 'lib/html-entities'; import getCurrencyValue from 'lib/getCurrencyValue';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet'; import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
...@@ -20,17 +19,24 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { ...@@ -20,17 +19,24 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
switch (data.token.type) { switch (data.token.type) {
case 'ERC-20': { case 'ERC-20': {
const total = data.total as Erc20TotalPayload; const total = data.total as Erc20TotalPayload;
const { valueStr, usd } = getCurrencyValue({
value: total.value,
exchangeRate: data.token.exchange_rate,
accuracyUsd: 2,
decimals: total.decimals,
});
return ( return (
<Flex flexWrap="wrap" columnGap={ 3 } rowGap={ 2 }> <Flex flexWrap="wrap" columnGap={ 2 } rowGap={ 2 }>
<Text fontWeight={ 500 } as="span">For:{ space } <chakra.span color="text_secondary">for</chakra.span>
<CurrencyValue value={ total.value } exchangeRate={ data.token.exchange_rate } fontWeight={ 600 } decimals={ total.decimals }/> <span>{ valueStr }</span>
</Text>
<TokenEntity <TokenEntity
token={ data.token } token={{ ...data.token, name: data.token.symbol || data.token.name }}
noCopy noCopy
noSymbol
w="auto" w="auto"
flexGrow="1"
/> />
{ usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
</Flex> </Flex>
); );
} }
...@@ -64,7 +70,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { ...@@ -64,7 +70,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
<Flex <Flex
alignItems="flex-start" alignItems="flex-start"
flexWrap={{ base: 'wrap', lg: 'nowrap' }} flexWrap={{ base: 'wrap', lg: 'nowrap' }}
columnGap={ 3 } columnGap={ 2 }
rowGap={ 3 } rowGap={ 3 }
flexDir="row" flexDir="row"
w="100%" w="100%"
...@@ -74,7 +80,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { ...@@ -74,7 +80,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
<Icon as={ rightArrowIcon } boxSize={ 5 } mx={ 2 } color="gray.500"/> <Icon as={ rightArrowIcon } boxSize={ 5 } mx={ 2 } color="gray.500"/>
<AddressEntity address={ data.to } truncation="constant" noIcon maxW="150px"/> <AddressEntity address={ data.to } truncation="constant" noIcon maxW="150px"/>
</Flex> </Flex>
<Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden"> <Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden" fontWeight={ 500 }>
{ content } { content }
</Flex> </Flex>
</Flex> </Flex>
......
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