Transaction actions: update styles (#1258)

Fixes #1231

ui/tx/NftTokenTransferSnippet.tsx

@@ -1,4 +1,4 @@
-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

@@ -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

@@ -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

@@ -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

@@ -1,11 +1,10 @@
-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>