chore: adjust asset item (#121)

FuelLabs · Nov 16, 2023 · ed78ba0 · ed78ba0
1 parent 49ffae5
commit ed78ba0
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 146 deletions.
diff --git a/packages/app/src/systems/Asset/components/AssetItem/AssetItem.stories.tsx b/packages/app/src/systems/Asset/components/AssetItem/AssetItem.stories.tsx
@@ -0,0 +1,36 @@
+import { VStack } from '@fuels/ui';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetItem } from './AssetItem';
+
+const meta: Meta<typeof AssetItem> = {
+  title: 'Asset/AssetItem',
+  component: AssetItem,
+};
+
+export default meta;
+type Story = StoryObj<typeof AssetItem>;
+
+export const Usage: Story = {
+  render: () => (
+    <VStack>
+      <AssetItem assetId="0x0000000000000000000000000000000000000000000000000000000000000000" />
+      <AssetItem assetId="0x00000000000000000000000000000000000000000000000000" />
+    </VStack>
+  ),
+};
+
+export const WithPrefix: Story = {
+  render: () => (
+    <VStack>
+      <AssetItem
+        prefix="Input:"
+        assetId="0x0000000000000000000000000000000000000000000000000000000000000000"
+      />
+      <AssetItem
+        prefix="Input:"
+        assetId="0x00000000000000000000000000000000000000000000000000"
+      />
+    </VStack>
+  ),
+};
diff --git a/packages/app/src/systems/Asset/components/AssetItem/AssetItem.tsx b/packages/app/src/systems/Asset/components/AssetItem/AssetItem.tsx
@@ -0,0 +1,58 @@
+import type { HStackProps } from '@fuels/ui';
+import { HStack, Text, shortAddress, Copyable, Tooltip, Box } from '@fuels/ui';
+import Image from 'next/image';
+import { TxIcon } from '~/systems/Transaction/component/TxIcon/TxIcon';
+
+import { useAsset } from '../../hooks/useAsset';
+
+const ICON_SIZE = 38;
+
+type AssetItemProps = HStackProps & {
+  assetId: string;
+  prefix?: string;
+};
+
+export function AssetItem({
+  prefix,
+  assetId,
+  children,
+  ...props
+}: AssetItemProps) {
+  const asset = useAsset(assetId);
+  return (
+    <HStack {...props} align="center">
+      {asset?.icon ? (
+        <Image
+          src={asset.icon as string}
+          width={ICON_SIZE}
+          height={ICON_SIZE}
+          alt={asset.name}
+        />
+      ) : (
+        <TxIcon type="Mint" status="Submitted" />
+      )}
+      <Box>
+        <HStack gap="2">
+          {prefix && <Text className="font-medium">{prefix}</Text>}
+          {asset?.symbol ? (
+            <Tooltip content={assetId}>
+              <Copyable value={assetId}>
+                <Text className="flex items-center gap-2 text-md">
+                  {asset?.name}
+                  <Text className="mt-px text-muted">{asset.symbol}</Text>
+                </Text>
+              </Copyable>
+            </Tooltip>
+          ) : (
+            <Tooltip content={assetId}>
+              <Copyable value={assetId} className="text-gray-11">
+                {shortAddress(assetId)}
+              </Copyable>
+            </Tooltip>
+          )}
+        </HStack>
+        {children}
+      </Box>
+    </HStack>
+  );
+}
diff --git a/packages/app/src/systems/Core/components/BalanceItem/BalanceItem.tsx b/packages/app/src/systems/Core/components/BalanceItem/BalanceItem.tsx
@@ -7,24 +7,20 @@ import {
   VStack,
   Address,
   Collapsible,
-  useBreakpoints,
   Flex,
   withNamespace,
   Card,
 } from '@fuels/ui';
 import { bn } from 'fuels';
-import Image from 'next/image';
+import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem';
 import { useAsset } from '~/systems/Asset/hooks/useAsset';
 import { useFuelAsset } from '~/systems/Asset/hooks/useFuelAsset';
-import { TxIcon } from '~/systems/Transaction/component/TxIcon/TxIcon';
 
 import { formatZeroUnits } from '../../utils/format';
 import { LoadingBox } from '../LoadingBox/LoadingBox';
 import type { UtxoItem } from '../Utxos/Utxos';
 import { Utxos } from '../Utxos/Utxos';
 
-const ICON_SIZE = 36;
-
 type BalanceItemProps = BaseProps<{
   item: Omit<AccountBalanceFragment, 'owner' | '__typename'>;
 }>;
@@ -34,7 +30,6 @@ const BalanceItemRoot = createComponent<BalanceItemProps, typeof Collapsible>({
   render: (_, { item, ...props }) => {
     const assetId = item.assetId;
     const amount = item.amount;
-    const { isMobile } = useBreakpoints();
     const asset = useAsset(assetId);
     const fuelAsset = useFuelAsset(asset);
     if (!asset) return null;
@@ -44,30 +39,10 @@ const BalanceItemRoot = createComponent<BalanceItemProps, typeof Collapsible>({
     return (
       <Collapsible {...props}>
         <Collapsible.Header hideIcon={!hasUTXOs}>
-          {asset.icon ? (
-            <Image
-              src={asset.icon as string}
-              width={ICON_SIZE}
-              height={ICON_SIZE}
-              alt={asset.name}
-            />
-          ) : (
-            <TxIcon type="Mint" status="Submitted" />
-          )}
           <Flex className="flex-1 flex-col tablet:flex-row tablet:justify-between tablet:items-center">
-            <VStack gap="1">
-              <Text className="text-md font-medium">
-                {asset.name}
-                {!isMobile && asset.symbol && (
-                  <Text className="ml-2 text-muted text-sm">
-                    ({asset.symbol})
-                  </Text>
-                )}
-              </Text>
-              {!isMobile && (
-                <Address value={item.assetId} prefix="Id:" fixed="b256" />
-              )}
-            </VStack>
+            <AssetItem assetId={assetId}>
+              <Address value={item.assetId} prefix="Id:" fixed="b256" />
+            </AssetItem>
             {amount && (
               <Text className="text-secondary">
                 {fuelAsset?.decimals ? (

diff --git a/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx b/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx
@@ -86,15 +86,15 @@ const styles = tv({
   variants: {
     size: {
       sm: {
-        root: 'w-8 h-8',
+        root: 'w-9 h-9',
         icon: 'w-4 h-4',
       },
       md: {
-        root: 'w-11 h-11',
+        root: 'w-10 h-10',
         icon: 'w-5 h-5',
       },
       lg: {
-        root: 'w-12 h-12',
+        root: 'w-11 h-11',
         icon: 'w-6 h-6',
       },
     },

diff --git a/packages/app/src/systems/Transaction/component/TxInput/TxInput.tsx b/packages/app/src/systems/Transaction/component/TxInput/TxInput.tsx
@@ -13,9 +13,9 @@ import {
 } from '@fuels/ui';
 import type { CardProps } from '@fuels/ui';
 import { bn } from 'fuels';
-import Image from 'next/image';
 import NextLink from 'next/link';
 import { tv } from 'tailwind-variants';
+import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem';
 import { useAsset } from '~/systems/Asset/hooks/useAsset';
 import { useFuelAsset } from '~/systems/Asset/hooks/useFuelAsset';
 import type { UtxoItem } from '~/systems/Core/components/Utxos/Utxos';
@@ -24,8 +24,6 @@ import { formatZeroUnits } from '~/systems/Core/utils/format';
 
 import { TxIcon } from '../TxIcon/TxIcon';
 
-const ICON_SIZE = 36;
-
 export type TxInputProps = CardProps & {
   input: GroupedInput;
 };
@@ -46,37 +44,7 @@ const TxInputCoin = createComponent<TxInputProps, typeof Collapsible>({
     return (
       <Collapsible {...props}>
         <Collapsible.Header>
-          {asset.icon ? (
-            <Image
-              src={asset.icon as string}
-              width={ICON_SIZE}
-              height={ICON_SIZE}
-              alt={asset.name}
-            />
-          ) : (
-            <TxIcon type="Mint" status="Submitted" />
-          )}
-          <VStack gap="0" className="flex-1">
-            <Text className="flex items-center gap-2 text-md font-medium">
-              {asset.name}
-              {asset.symbol && (
-                <Text className="ml-2 text-muted text-sm">
-                  ({asset.symbol})
-                </Text>
-              )}
-              <Address
-                value={assetId}
-                fixed="b256"
-                /*
-                 * I'm just hidding this until we get the output/input design merged
-                 * https://linear.app/fuel-network/issue/FE-18/change-inputs-and-outputs-component-for-better-relevance
-                 */
-                className="hidden tablet:block"
-                addressOpts={
-                  isMobile ? { trimLeft: 4, trimRight: 2 } : undefined
-                }
-              />
-            </Text>
+          <AssetItem assetId={assetId} className="flex-1">
             <Address
               prefix="From:"
               value={input.owner || ''}
@@ -90,7 +58,7 @@ const TxInputCoin = createComponent<TxInputProps, typeof Collapsible>({
                 View Account
               </Address.Link>
             </Address>
-          </VStack>
+          </AssetItem>
           {/*
             I'm just hidding this until we get the output/input design merged 
             https://linear.app/fuel-network/issue/FE-18/change-inputs-and-outputs-component-for-better-relevance

diff --git a/packages/app/src/systems/Transaction/component/TxOutput/TxOutput.stories.tsx b/packages/app/src/systems/Transaction/component/TxOutput/TxOutput.stories.tsx
@@ -4,13 +4,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {
   GROUPED_OUTPUT_ASSET,
   GROUPED_OUTPUT_ASSET_UNKNOWN,
-  GROUPED_OUTPUT_CHANGE_OUTPUT,
-  GROUPED_OUTPUT_CHANGE_OUTPUT_UNKNOWN,
   GROUPED_OUTPUT_CONTRACT_CREATED,
   GROUPED_OUTPUT_CONTRACT_OUTPUT,
   GROUPED_OUTPUT_MESSAGE,
-  GROUPED_OUTPUT_VARIABLE_OUTPUT,
-  GROUPED_OUTPUT_VARIABLE_OUTPUT_UNKNOWN,
 } from '../../__mocks__/tx';
 
 import { TxOutput } from './TxOutput';
@@ -32,30 +28,6 @@ export const Asset: Story = {
   ),
 };
 
-export const VariableOutput: Story = {
-  render: () => (
-    <VStack>
-      <TxOutput className="w-[500px]" output={GROUPED_OUTPUT_VARIABLE_OUTPUT} />
-      <TxOutput
-        className="w-[500px]"
-        output={GROUPED_OUTPUT_VARIABLE_OUTPUT_UNKNOWN}
-      />
-    </VStack>
-  ),
-};
-
-export const ChangeOutput: Story = {
-  render: () => (
-    <VStack>
-      <TxOutput className="w-[500px]" output={GROUPED_OUTPUT_CHANGE_OUTPUT} />
-      <TxOutput
-        className="w-[500px]"
-        output={GROUPED_OUTPUT_CHANGE_OUTPUT_UNKNOWN}
-      />
-    </VStack>
-  ),
-};
-
 export const ContractOutput: Story = {
   render: () => (
     <TxOutput className="w-[500px]" output={GROUPED_OUTPUT_CONTRACT_OUTPUT} />

diff --git a/packages/app/src/systems/Transaction/component/TxOutput/TxOutput.tsx b/packages/app/src/systems/Transaction/component/TxOutput/TxOutput.tsx
@@ -12,25 +12,22 @@ import {
 } from '@fuels/ui';
 import type { CardProps } from '@fuels/ui';
 import { bn } from 'fuels';
-import Image from 'next/image';
 import NextLink from 'next/link';
 import { tv } from 'tailwind-variants';
+import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem';
 import { useAsset } from '~/systems/Asset/hooks/useAsset';
 import { useFuelAsset } from '~/systems/Asset/hooks/useFuelAsset';
 import { formatZeroUnits } from '~/systems/Core/utils/format';
 
 import { TxIcon } from '../TxIcon/TxIcon';
 
-const ICON_SIZE = 36;
-
 export type TxOutputProps = CardProps & {
   output: GroupedOutput;
-  title?: string;
 };
 
 const TxOutputCoin = createComponent<TxOutputProps, typeof Card>({
   id: 'TxOutputCoin',
-  render: (_, { output, title, ...props }) => {
+  render: (_, { output, ...props }) => {
     const classes = styles();
     const { isMobile } = useBreakpoints();
 
@@ -44,45 +41,13 @@ const TxOutputCoin = createComponent<TxOutputProps, typeof Card>({
     return (
       <Card {...props} className={cx('py-3', props.className)}>
         <Card.Header className={classes.header()}>
-          <HStack align="center">
-            {asset.icon ? (
-              <Image
-                src={asset.icon as string}
-                width={ICON_SIZE}
-                height={ICON_SIZE}
-                alt={asset.name}
-              />
-            ) : (
-              <TxIcon type="Mint" status="Submitted" />
-            )}
-            <VStack gap="0">
-              <Text className="flex items-center gap-2 text-md font-medium">
-                {title || asset.name}
-                {asset.symbol && (
-                  <Text className="text-muted text-sm">({asset.symbol})</Text>
-                )}
-                <Address
-                  value={output.assetId}
-                  fixed="b256"
-                  /*
-                   * I'm just hidding this until we get the output/input design merged
-                   * https://linear.app/fuel-network/issue/FE-18/change-inputs-and-outputs-component-for-better-relevance
-                   */
-                  className="hidden tablet:block"
-                />
-              </Text>
-              <HStack>
-                <Address prefix="To:" value={output.to || ''}>
-                  <Address.Link
-                    as={NextLink}
-                    href={`/account/${output.to}/assets`}
-                  >
-                    View Account
-                  </Address.Link>
-                </Address>
-              </HStack>
-            </VStack>
-          </HStack>
+          <AssetItem assetId={assetId}>
+            <Address prefix="To:" value={output.to || ''}>
+              <Address.Link as={NextLink} href={`/account/${output.to}/assets`}>
+                View Account
+              </Address.Link>
+            </Address>
+          </AssetItem>
           {/*
             I'm just hidding this until we get the output/input design merged 
             https://linear.app/fuel-network/issue/FE-18/change-inputs-and-outputs-component-for-better-relevance
@@ -202,15 +167,13 @@ const TxOutputMessage = createComponent<TxOutputProps, typeof Card>({
 });
 
 export function TxOutput({ output, ...props }: TxOutputProps) {
-  if (output.type === GroupedOutputType.CoinOutput) {
+  if (
+    output.type === GroupedOutputType.CoinOutput ||
+    output.type === GroupedOutputType.VariableOutput ||
+    output.type === GroupedOutputType.ChangeOutput
+  ) {
     return <TxOutputCoin output={output} {...props} />;
   }
-  if (output.type === GroupedOutputType.VariableOutput) {
-    return <TxOutputCoin output={output} {...props} title="Variable Output" />;
-  }
-  if (output.type === GroupedOutputType.ChangeOutput) {
-    return <TxOutputCoin output={output} {...props} title="Change Output" />;
-  }
   if (output.type === GroupedOutputType.ContractOutput) {
     return <TxOutputContract output={output} {...props} />;
   }