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