style: make it a grid

FuelLabs · Jan 24, 2025 · 0c3cbc0 · 0c3cbc0
1 parent 9b9d6fb
commit 0c3cbc0
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 47 deletions.
diff --git a/...ms/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxAddressDisplay.tsx b/...ms/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxAddressDisplay.tsx
@@ -37,7 +37,7 @@ export function TxAddressDisplay({
         )}
       </Box>
       <Box.Flex gap="$1" css={styles.contentCol}>
-        <Text as="span" fontSize="sm">
+        <Text as="span" fontSize="sm" css={styles.name}>
           {account?.name || 'Unknown'}
         </Text>
         {isContract && (
@@ -47,7 +47,7 @@ export function TxAddressDisplay({
             </Text>
           </Box>
         )}
-        <Text fontSize="sm" color="gray8">
+        <Text fontSize="sm" color="gray8" css={styles.address}>
           {shortAddress(address)}
         </Text>
         <IconButton
@@ -83,4 +83,12 @@ const styles = {
     backgroundColor: '$gray3',
     borderRadius: '$md',
   }),
+  name: cssObj({
+    fontWeight: '$semibold',
+    color: '#202020',
+  }),
+  address: cssObj({
+    fontWeight: '$medium',
+    color: '#646464',
+  }),
 };
diff --git a/...systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperation.tsx b/...systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperation.tsx
@@ -1,7 +1,16 @@
 import { cssObj } from '@fuel-ui/css';
-import { Avatar, AvatarGenerated, Box, Icon, Text } from '@fuel-ui/react';
+import {
+  Avatar,
+  AvatarGenerated,
+  Box,
+  Icon,
+  IconButton,
+  Text,
+} from '@fuel-ui/react';
 import { ReceiptType } from 'fuels';
+import { useAccounts } from '~/systems/Account';
 import { useContractMetadata } from '~/systems/Contract/hooks/useContractMetadata';
+import { shortAddress } from '~/systems/Core';
 import { TxCategory } from '../../../../types';
 import type { SimplifiedOperation } from '../../../../types';
 import { TxRecipientContractLogo } from '../../../TxRecipientCard/TxRecipientContractLogo';
@@ -14,6 +23,10 @@ type TxOperationProps = {
   showNesting?: boolean;
 };
 
+const SpacerComponent = () => {
+  return <Box css={styles.spacer} />;
+};
+
 export function TxOperation({
   operation,
   showNesting = true,
@@ -27,44 +40,121 @@ export function TxOperation({
   const isContract = operation.type === TxCategory.CONTRACTCALL;
   const isTransfer = operation.type === TxCategory.SEND;
   const _contract = useContractMetadata(operation.from);
+  const { accounts } = useAccounts();
+  const accountFrom = accounts?.find(
+    (acc) => acc.address.toLowerCase() === operation.from.toLowerCase()
+  );
+  const accountTo = accounts?.find(
+    (acc) => acc.address.toLowerCase() === operation.to.toLowerCase()
+  );
+  const _receiptTypeLabel = receiptType ? ReceiptType[receiptType] : null;
 
-  const receiptTypeLabel = receiptType ? ReceiptType[receiptType] : null;
+  const getOperationType = () => {
+    if (isContract) return 'Calls contract (sending funds)';
+    if (isTransfer) return 'Sends token';
+    return 'Unknown';
+  };
 
   // For transfers, always show with 0 indentation
   // For contract calls, only show if root level (depth === 0) unless showNesting is true
   if (isContract && !showNesting && depth !== 0) return null;
 
   return (
     <Box.Flex css={styles.root}>
-      {isContract && showNesting && <TxOperationNesting depth={depth} />}
       <Box.Stack gap="$2" css={styles.contentCol}>
-        <Box.Flex css={styles.header}>
-          <Text fontSize="xs" css={styles.typeLabel}>
-            {isContract ? 'Contract Call' : 'Transfer'}
-          </Text>
-          {receiptType && (
-            <Text fontSize="xs" css={styles.receiptLabel}>
-              {receiptTypeLabel}
+        <Box.Flex
+          css={cssObj({
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            gridTemplateRows: 'repeat(5, auto)',
+            gap: '$2',
+            width: '100%',
+            marginBottom: '$2',
+          })}
+        >
+          <Box.Flex justify={'flex-start'} align={'center'}>
+            <Avatar.Generated
+              role="img"
+              size="sm"
+              hash={operation.from}
+              aria-label={operation.from}
+            />
+          </Box.Flex>
+          <Box.Flex gap="$1" justify={'flex-start'} align={'center'}>
+            <Text as="span" fontSize="sm" css={styles.name}>
+              {accountFrom?.name || 'Unknown'}
             </Text>
-          )}
-        </Box.Flex>
-        <TxAddressDisplay address={operation.from} />
-        {isTransfer && (
-          <Icon icon="CircleArrowDown" css={styles.arrow} size={16} />
-        )}
-        <TxAddressDisplay address={operation.to} isContract={isContract} />
-        {hasAsset && amount && assetId && (
-          <Box.Stack gap="$0">
-            <TxAssetDisplay
-              amount={amount.toString()}
-              assetId={assetId}
-              showLabel={isTransfer}
+            {isContract && (
+              <Box css={styles.badge}>
+                <Text fontSize="sm" color="gray8">
+                  Contract
+                </Text>
+              </Box>
+            )}
+            <Text fontSize="sm" color="gray8" css={styles.address}>
+              {shortAddress(operation.from)}
+            </Text>
+            <IconButton
+              size="xs"
+              variant="link"
+              icon="Copy"
+              aria-label="Copy address"
+              onPress={() => navigator.clipboard.writeText(operation.from)}
             />
-          </Box.Stack>
-        )}
-        {metadata?.functionName && (
-          <Box css={styles.functionName}>Function: {metadata.functionName}</Box>
-        )}
+          </Box.Flex>
+          <Box.Flex justify={'center'}>
+            <SpacerComponent />
+          </Box.Flex>
+          <Box></Box>
+          <Box.Flex justify={'center'} align={'center'} css={styles.blue}>
+            <Icon icon="CircleArrowDown" size={16} />
+          </Box.Flex>
+          <Box.Flex justify={'flex-start'} align={'center'} css={styles.blue}>
+            {getOperationType()}
+          </Box.Flex>
+          <Box.Flex justify={'center'}>
+            <SpacerComponent />
+          </Box.Flex>
+          <Box>
+            {hasAsset && amount && assetId && (
+              <TxAssetDisplay
+                amount={amount.toString()}
+                assetId={assetId}
+                showLabel={isTransfer}
+              />
+            )}
+          </Box>
+          <Box.Flex justify={'flex-start'} align={'center'}>
+            <Avatar.Generated
+              role="img"
+              size="sm"
+              hash={operation.to}
+              aria-label={operation.to}
+            />
+          </Box.Flex>
+          <Box.Flex justify={'flex-start'} align={'center'} gap="$1">
+            <Text as="span" fontSize="sm" css={styles.name}>
+              {accountTo?.name || 'Unknown'}
+            </Text>
+            {isContract && (
+              <Box css={styles.badge}>
+                <Text fontSize="sm" color="gray8">
+                  Contract
+                </Text>
+              </Box>
+            )}
+            <Text fontSize="sm" color="gray8" css={styles.address}>
+              {shortAddress(operation.to)}
+            </Text>
+            <IconButton
+              size="xs"
+              variant="link"
+              icon="Copy"
+              aria-label="Copy address"
+              onPress={() => navigator.clipboard.writeText(operation.to)}
+            />
+          </Box.Flex>
+        </Box.Flex>
       </Box.Stack>
     </Box.Flex>
   );
@@ -87,30 +177,42 @@ const styles = {
     minWidth: 0,
     padding: '$3',
   }),
-  header: cssObj({
+  blue: cssObj({
+    fontSize: '$sm',
     display: 'flex',
     alignItems: 'center',
-    gap: '$2',
+    gap: '$1',
+    color: '#0D74CE',
   }),
-  typeLabel: cssObj({
+  functionName: cssObj({
+    fontSize: '$sm',
     color: '$gray8',
-    backgroundColor: '$gray3',
-    padding: '$1 $2',
-    borderRadius: '$md',
-    fontWeight: '$normal',
   }),
-  receiptLabel: cssObj({
-    color: '$blue9',
-    backgroundColor: '$blue3',
-    padding: '$1 $2',
+  spacer: cssObj({
+    borderLeft: '1px solid #D9D9D9',
+    minHeight: '14px',
+    width: '2px',
+    height: '100%',
+    backgroundColor: '#D9D9D9',
+    borderRadius: '$lg',
+  }),
+  iconCol: cssObj({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  }),
+  badge: cssObj({
+    padding: '0 $1',
+    backgroundColor: '$gray3',
     borderRadius: '$md',
-    fontWeight: '$normal',
   }),
-  arrow: cssObj({
-    color: '#0D74CE',
+  name: cssObj({
+    fontWeight: '$semibold',
+    color: '#202020',
   }),
-  functionName: cssObj({
-    fontSize: '$sm',
-    color: '$gray8',
+  address: cssObj({
+    fontWeight: '$medium',
+    color: '#646464',
   }),
 };