refactor: transaction screen (#549)

FuelLabs · Sep 19, 2024 · 5cd69e4 · 5cd69e4
1 parent 548cf9a
commit 5cd69e4
Show file tree

Hide file tree

Showing 27 changed files with 711 additions and 3,569 deletions.
diff --git a/packages/app-explorer/src/systems/Asset/components/AssetItem/AssetItem.tsx b/packages/app-explorer/src/systems/Asset/components/AssetItem/AssetItem.tsx
@@ -1,5 +1,6 @@
 import type { HStackProps } from '@fuels/ui';
 import {
+  Address,
   Box,
   Copyable,
   Flex,
@@ -8,11 +9,12 @@ import {
   LoadingWrapper,
   Text,
   Tooltip,
-  shortAddress,
+  useBreakpoints,
 } from '@fuels/ui';
 import Image from 'next/image';
 import { TxIcon } from '~/systems/Transaction/component/TxIcon/TxIcon';
 
+import type { TxIconType } from '~/systems/Transaction/types';
 import { useAsset } from '../../hooks/useAsset';
 
 const ICON_SIZE = 38;
@@ -21,16 +23,19 @@ type AssetItemProps = HStackProps & {
   assetId: string;
   prefix?: string;
   isLoading?: boolean;
+  txIconTypeFallback?: TxIconType;
 };
 
 export function AssetItem({
   prefix,
   assetId,
   children,
   isLoading,
+  txIconTypeFallback,
   ...props
 }: AssetItemProps) {
   const asset = useAsset(assetId);
+  const { isMobile } = useBreakpoints();
   return (
     <HStack {...props} align="center">
       <LoadingWrapper
@@ -47,17 +52,21 @@ export function AssetItem({
               />
             </Flex>
           ) : (
-            <TxIcon type="Mint" status="Submitted" />
+            <TxIcon type={txIconTypeFallback || 'Mint'} status="Submitted" />
           )
         }
       />
-      <Box>
+      <Box className="flex flex-col">
         <LoadingWrapper
           isLoading={isLoading}
           loadingEl={<LoadingBox className="w-40 h-6" />}
           regularEl={
-            <HStack gap="2">
-              {prefix && <Text className="font-medium">{prefix}</Text>}
+            <HStack gap="1" className="items-center">
+              {prefix && (
+                <Text className="font-normal text-sm text-secondary font-mono">
+                  {prefix}
+                </Text>
+              )}
               {asset?.symbol ? (
                 <Tooltip content={assetId}>
                   <Copyable value={assetId}>
@@ -69,9 +78,13 @@ export function AssetItem({
                 </Tooltip>
               ) : (
                 <Tooltip content={assetId}>
-                  <Copyable value={assetId} className="text-gray-11 font-mono">
-                    {shortAddress(assetId)}
-                  </Copyable>
+                  <Address
+                    value={assetId}
+                    className="text-gray-11 font-mono"
+                    addressOpts={
+                      isMobile ? { trimLeft: 4, trimRight: 2 } : undefined
+                    }
+                  />
                 </Tooltip>
               )}
             </HStack>

diff --git a/packages/app-explorer/src/systems/Core/components/Amount/Amount.tsx b/packages/app-explorer/src/systems/Core/components/Amount/Amount.tsx
@@ -10,13 +10,21 @@ import { useFuelAsset } from '~/systems/Asset/hooks/useFuelAsset';
 import { cx } from '../../utils/cx';
 import { formatZeroUnits } from '../../utils/format';
 
-type AmountProps = BaseProps<{
-  value?: BN | null;
-  assetId?: string | null;
-  hideIcon?: boolean;
-  hideSymbol?: boolean;
-  iconSize?: number;
-}>;
+type AmountProps =
+  | BaseProps<{
+      value?: BN | null;
+      assetId?: string | null;
+      hideIcon?: boolean;
+      hideSymbol?: boolean;
+      iconSize?: number;
+    }>
+  | BaseProps<{
+      value?: BN | null;
+      assetId?: never | null;
+      hideIcon?: never | true;
+      hideSymbol?: never | true;
+      iconSize?: never;
+    }>;
 
 export function Amount({
   value,

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxIcon/TxIcon.tsx b/packages/app-explorer/src/systems/Transaction/component/TxIcon/TxIcon.tsx
@@ -46,7 +46,7 @@ export const TX_STATUS_MAP: Record<TxStatus, string> = {
 
 type TxIconProps = VariantProps<typeof styles> &
   BaseProps<{
-    type: string;
+    type: TxIconType;
     status?: TxStatus;
     color?: BadgeProps['color'];
     label?: string;

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx
@@ -35,14 +35,18 @@ export const TxInputCoin = createComponent<
           <Flex className="flex flex-col items-center tablet:flex-row gap-2 w-full">
             <Badge
               color="gray"
-              className="font-mono justify-start tablet:justify-center hidden tablet:flex tablet:min-w-[70px] tablet:w-[70px] tablet:max-w-[70px] items-center"
+              className="font-mono ml-14 tablet:ml-0 self-start tablet:self-center justify-center flex min-w-[70px] w-[70px] max-w-[70px] items-center"
               size="1"
             >
               COIN
             </Badge>
 
             <Flex className="w-full items-start tablet:items-center flex flex-col tablet:flex-row gap-2 tablet:gap-4">
-              <AssetItem assetId={assetId} className="flex-1">
+              <AssetItem
+                assetId={assetId}
+                className="flex-1 text-sm"
+                prefix="Asset:"
+              >
                 <Address
                   prefix="From:"
                   value={input.owner || ''}
@@ -58,13 +62,6 @@ export const TxInputCoin = createComponent<
               </AssetItem>
               {amount && (
                 <Box className="w-full tablet:w-auto tablet:ml-0 justify-between flex flex-row tablet:block pl-14">
-                  <Badge
-                    color="gray"
-                    className="font-mono tablet:hidden min-w-[70px] w-[70px] max-w-[70px] items-center justify-center"
-                    size="1"
-                  >
-                    COIN
-                  </Badge>
                   <Amount
                     hideIcon
                     hideSymbol

diff --git a/...pp-explorer/src/systems/Transaction/component/TxInput/TxInputContract/TxInputContract.tsx b/...pp-explorer/src/systems/Transaction/component/TxInput/TxInputContract/TxInputContract.tsx
@@ -31,7 +31,7 @@ export const TxInputContract = createComponent<
     return (
       <Collapsible {...props}>
         <Collapsible.Header>
-          <Flex className="flex flex-col-reverse items-start  tablet:items-center tablet:flex-row gap-2 w-full">
+          <Flex className="flex flex-col items-start  tablet:items-center tablet:flex-row gap-2 w-full">
             <Badge
               color="gray"
               className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center"
@@ -42,9 +42,6 @@ export const TxInputContract = createComponent<
             <HStack className="items-center justify-center gap-4">
               <TxIcon type="ContractCall" status="Submitted" />
               <VStack className="flex-1" gap="0">
-                <Text className="flex items-center gap-2 text-md">
-                  Contract
-                </Text>
                 <Address
                   prefix="Address:"
                   value={contractId}
@@ -57,6 +54,18 @@ export const TxInputContract = createComponent<
                     href: Routes.contractAssets(contractId),
                   }}
                 />
+                <Address
+                  prefix="Utxo Id:"
+                  value={utxoId}
+                  className="text-white"
+                  addressOpts={
+                    isMobile ? { trimLeft: 4, trimRight: 2 } : undefined
+                  }
+                  linkProps={{
+                    as: NextLink,
+                    href: Routes.txSimple(utxoId?.slice(0, -4)),
+                  }}
+                />
               </VStack>
             </HStack>
           </Flex>

diff --git a/.../app-explorer/src/systems/Transaction/component/TxInput/TxInputMessage/TxInputMessage.tsx b/.../app-explorer/src/systems/Transaction/component/TxInput/TxInputMessage/TxInputMessage.tsx
@@ -1,16 +1,18 @@
 import {
   Address,
   Badge,
+  Box,
   Collapsible,
   Flex,
   HStack,
-  Text,
   VStack,
   createComponent,
 } from '@fuels/ui';
 import NextLink from 'next/link';
 
+import { bn } from 'fuels';
 import { Routes } from '~/routes';
+import { Amount } from '~/systems/Core/components/Amount/Amount';
 import { TxIcon } from '~/systems/Transaction/component/TxIcon/TxIcon';
 import type { TxInputMessageProps } from './types';
 
@@ -22,6 +24,7 @@ export const TxInputMessage = createComponent<
   render: (_, { input, ...props }) => {
     const { sender, recipient, data } = input;
 
+    const amount = input.amount;
     if (!sender || !recipient) return null;
 
     return (
@@ -30,18 +33,17 @@ export const TxInputMessage = createComponent<
           <Flex className="flex flex-col items-center tablet:flex-row gap-2 w-full">
             <Badge
               color="gray"
-              className="font-mono justify-start tablet:justify-center hidden tablet:flex tablet:min-w-[70px] tablet:w-[70px] tablet:max-w-[70px] items-center"
+              className="font-mono ml-14 tablet:ml-0 self-start tablet:self-center justify-center flex min-w-[70px] w-[70px] max-w-[70px] items-center"
               size="1"
             >
               MESSAGE
             </Badge>
 
             <Flex className="w-full items-start tablet:items-end flex flex-col tablet:flex-row">
-              <HStack className="gap-4 tablet:items-center tablet:flex-1">
+              <HStack className="gap-4 tablet:items-center tablet:flex-1 ">
                 <TxIcon type="Message" status="Submitted" />
-                <Text className="hidden tablet:block">Message</Text>
-                <VStack className="gap-2 tablet:flex-1">
-                  <VStack className="gap-1 tablet:flex-1 tablet:items-end">
+                <Flex className="gap-1 flex-col tablet:flex-row items-center flex-1">
+                  <VStack className="gap-1 items-start flex-1">
                     <Address
                       value={sender}
                       prefix="Sender:"
@@ -59,14 +61,12 @@ export const TxInputMessage = createComponent<
                       }}
                     />
                   </VStack>
-                  <Badge
-                    color="gray"
-                    className="font-mono tablet:hidden min-w-[70px] w-[70px] max-w-[70px] items-center justify-center"
-                    size="1"
-                  >
-                    MESSAGE
-                  </Badge>
-                </VStack>
+                  {!!amount && (
+                    <Box className="w-full tablet:w-auto tablet:ml-0 justify-start flex flex-row tablet:block">
+                      <Amount hideIcon hideSymbol value={bn(amount)} />
+                    </Box>
+                  )}
+                </Flex>
               </HStack>
             </Flex>
           </Flex>