feat: add prefix to asset name

FuelLabs · Sep 19, 2024 · e38c7f5 · e38c7f5
1 parent a028ea0
commit e38c7f5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 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
@@ -61,8 +61,12 @@ export function AssetItem({
           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}>
@@ -76,7 +80,6 @@ export function AssetItem({
                 <Tooltip content={assetId}>
                   <Address
                     value={assetId}
-                    prefix="Asset:"
                     className="text-gray-11 font-mono"
                     addressOpts={
                       isMobile ? { trimLeft: 4, trimRight: 2 } : undefined

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
@@ -42,7 +42,7 @@ export const TxInputCoin = createComponent<
             </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" reversed>
+              <AssetItem assetId={assetId} className="flex-1" prefix="Asset:">
                 <Address
                   prefix="From:"
                   value={input.owner || ''}

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx
@@ -47,7 +47,11 @@ export const TxOutputCoin = createComponent<
             {badgeLabel}
           </Badge>
           <Flex className={classes.content()}>
-            <AssetItem assetId={assetId} txIconTypeFallback={txIconType}>
+            <AssetItem
+              assetId={assetId}
+              txIconTypeFallback={txIconType}
+              prefix="Asset:"
+            >
               <Address
                 prefix="To:"
                 value={output.to || ''}

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx
@@ -295,7 +295,7 @@ function MintOutputs({
       <Card className="pb-3">
         <Card.Header className={classes.header()}>
           {tx.mintAssetId && (
-            <AssetItem assetId={tx.mintAssetId}>
+            <AssetItem assetId={tx.mintAssetId} prefix="Asset:">
               <Address
                 prefix="Id:"
                 value={tx.mintAssetId}