feat: add view on explorer

.changeset/hot-kids-smash.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Add `Tx ID` to the Tx Details Screen

.changeset/wise-bottles-share.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Add `View on Explorer` button besides the Account Address

packages/app/src/systems/Account/components/AccountInfo/AccountInfo.test.tsx

@@ -10,6 +10,17 @@ const PROPS = {
   headerText: 'Connect to',
 };
 
+jest.mock('~/systems/Network', () => ({
+  useNetworks: jest.fn().mockReturnValue({
+    selectedNetwork: {
+      chainId: 1,
+      name: 'Fuel Sepolia Testnet',
+      url: 'https://testnet.fuel.network/v1/graphql',
+      explorerUrl: 'https://testnet.fuel.network/v1/explorer',
+    },
+  }),
+}));
+
 describe('AccountInfo', () => {
   beforeEach(async () => {
     await AccountService.clearAccounts();

packages/app/src/systems/Account/components/AccountItem/AccountItem.test.tsx

@@ -11,6 +11,17 @@ const SHORT_ADDRESS = shortAddress(
   Address.fromDynamicInput(ACCOUNT.address).toB256()
 );
 
+jest.mock('~/systems/Network', () => ({
+  useNetworks: jest.fn().mockReturnValue({
+    selectedNetwork: {
+      chainId: 1,
+      name: 'Fuel Sepolia Testnet',
+      url: 'https://testnet.fuel.network/v1/graphql',
+      explorerUrl: 'https://testnet.fuel.network/v1/explorer',
+    },
+  }),
+}));
+
 describe('AccountItem', () => {
   it('a11y', async () => {
     await testA11y(<AccountItem account={ACCOUNT} />);

packages/app/src/systems/Account/components/AccountItem/AccountItem.tsx

@@ -22,6 +22,7 @@ export type AccountItemProps = {
   isToggleChecked?: boolean;
   isCurrent?: boolean;
   isHidden?: boolean;
+  canOpenExplorer?: boolean;
   onPress?: () => void;
   isDisabled?: boolean;
   compact?: boolean;
@@ -43,6 +44,7 @@ export const AccountItem: AccountItemComponent = ({
   isToggleChecked,
   isCurrent,
   isHidden,
+  canOpenExplorer = false,
   onPress,
   isDisabled,
   compact,
@@ -147,7 +149,11 @@ export const AccountItem: AccountItemComponent = ({
         <Heading as="h6" css={styles.name}>
           {account.name}
         </Heading>
-        <FuelAddress address={account.address} css={styles.address} />
+        <FuelAddress
+          address={account.address}
+          css={styles.address}
+          canOpenExplorer={canOpenExplorer}
+        />
       </Box.Flex>
     </CardList.Item>
   );

packages/app/src/systems/Account/components/AccountList/AccountList.test.tsx

@@ -5,6 +5,17 @@ import { MOCK_ACCOUNTS } from '../../__mocks__';
 
 import { AccountList } from './AccountList';
 
+jest.mock('~/systems/Network', () => ({
+  useNetworks: jest.fn().mockReturnValue({
+    selectedNetwork: {
+      chainId: 1,
+      name: 'Fuel Sepolia Testnet',
+      url: 'https://testnet.fuel.network/v1/graphql',
+      explorerUrl: 'https://testnet.fuel.network/v1/explorer',
+    },
+  }),
+}));
+
 describe('AccountList', () => {
   it('a11y', async () => {
     await testA11y(

packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.tsx

@@ -1,7 +1,7 @@
 import { cssObj } from '@fuel-ui/css';
 import { Avatar, Box, Button, Heading, Icon, Text } from '@fuel-ui/react';
 import type { Account } from '@fuel-wallet/types';
-import type { ReactNode } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { FuelAddress } from '~/systems/Account';
 import type { Maybe } from '~/systems/Core';
 import { AmountVisibility, VisibilityButton } from '~/systems/Core';
@@ -65,6 +65,7 @@ export function BalanceWidget({
             <FuelAddress
               address={account.address}
               css={styles.balanceAddress}
+              canOpenExplorer
             />
           </Box.Stack>
           <Button

packages/app/src/systems/Account/components/FuelAddress/FuelAddress.stories.tsx

@@ -9,6 +9,9 @@ export default {
 
 export const Usage = () => (
   <Box css={{ width: 300 }}>
-    <FuelAddress address="fuel1auahknz6mjuu0am034mlggh55f0tgp9j7fkzrc6xl48zuy5zv7vqa07n30" />
+    <FuelAddress
+      address="fuel1auahknz6mjuu0am034mlggh55f0tgp9j7fkzrc6xl48zuy5zv7vqa07n30"
+      canOpenExplorer
+    />
   </Box>
 );

packages/app/src/systems/Account/components/FuelAddress/FuelAddress.tsx

@@ -1,32 +1,45 @@
 import type { ThemeUtilsCSS } from '@fuel-ui/css';
 import { cssObj } from '@fuel-ui/css';
-import { Box, Copyable, Text } from '@fuel-ui/react';
-import { Address } from 'fuels';
+import { Box, Copyable, Icon, IconButton, Text } from '@fuel-ui/react';
+import { Address, type B256Address, type Bech32Address } from 'fuels';
 import { useMemo } from 'react';
 import { shortAddress } from '~/systems/Core';
+import { useExplorerLink } from '../../hooks/useExplorerLink';
 
 export type AddressProps = {
-  address: string;
+  address: B256Address | Bech32Address;
+  canOpenExplorer?: boolean;
   css?: ThemeUtilsCSS;
 };
 
-export const FuelAddress = ({ address, css }: AddressProps) => {
-  const fuelAddress = useMemo(
-    () => Address.fromDynamicInput(address).toB256(),
-    [address]
-  );
+export const FuelAddress = ({
+  address,
+  canOpenExplorer = false,
+  css,
+}: AddressProps) => {
+  const account = useMemo<B256Address>(() => {
+    return Address.fromDynamicInput(address).toB256();
+  }, [address]);
+
+  const { openExplorer, href } = useExplorerLink(account);
 
   return (
-    <Box.Flex css={styles.root}>
-      <Copyable
-        value={fuelAddress}
-        css={styles.copyable}
-        aria-label={fuelAddress}
-      >
+    <Box.Flex align="center" gap="$0" css={styles.root}>
+      <Copyable value={account} css={styles.copyable} aria-label={account}>
         <Text className="address" css={css}>
-          {shortAddress(fuelAddress)}
+          {shortAddress(account)}
         </Text>
       </Copyable>
+      {href && canOpenExplorer && (
+        <IconButton
+          intent="base"
+          tooltip="View on Explorer"
+          onPress={openExplorer}
+          variant="link"
+          icon={<Icon icon="ExternalLink" size={16} />}
+          aria-label="View"
+        />
+      )}
     </Box.Flex>
   );
 };

packages/app/src/systems/Account/hooks/useExplorerLink.ts

@@ -0,0 +1,29 @@
+import type { B256Address } from 'fuels';
+import { useCallback, useMemo } from 'react';
+import { IS_CRX } from '~/config';
+import { openTab } from '~/systems/CRX/utils';
+import { urlJoin } from '~/systems/Core';
+import { useNetworks } from '~/systems/Network';
+
+export function useExplorerLink(address: B256Address | undefined) {
+  const { selectedNetwork } = useNetworks();
+  const href = useMemo<string | null>(() => {
+    if (!selectedNetwork?.explorerUrl) return null;
+    return urlJoin(selectedNetwork.explorerUrl, `/account/${address}`);
+  }, [address, selectedNetwork]);
+
+  const openExplorer = useCallback(() => {
+    if (!href) return;
+    if (IS_CRX) {
+      openTab(href);
+    } else {
+      window.open(href, '_blank');
+    }
+  }, [href]);
+
+  return {
+    href,
+    openExplorer,
+    enabled: !!href,
+  };
+}

packages/app/src/systems/SignUp/components/WalletCreated/WalletCreated.tsx

@@ -35,7 +35,7 @@ export function WalletCreated({ account }: WalletCreatedProps) {
           <PinWalletText />
         ) : (
           <>
-            {account && <AccountItem account={account} />}
+            {account && <AccountItem account={account} canOpenExplorer />}
             <Button intent="primary" onPress={handleGoToWallet}>
               Go to wallet
             </Button>

packages/app/src/systems/Transaction/components/TxHeader/TxHeader.tsx

@@ -1,12 +1,21 @@
 import { cssObj } from '@fuel-ui/css';
-import { Box, Card, Copyable, Icon, Text, Tooltip } from '@fuel-ui/react';
+import {
+  Box,
+  Card,
+  Copyable,
+  HStack,
+  Icon,
+  Text,
+  Tooltip,
+} from '@fuel-ui/react';
 import { TransactionStatus } from 'fuels';
 import type { TransactionTypeName } from 'fuels';
 import type { FC } from 'react';
 
 import { useExplorerLink } from '../../hooks/useExplorerLink';
 import { getTxStatusColor } from '../../utils';
 
+import { shortAddress } from '~/systems/Core';
 import { TxHeaderLoader } from './TxHeaderLoader';
 
 export type TxHeaderProps = {
@@ -24,21 +33,14 @@ export const TxHeader: TxHeaderComponent = ({ status, id, type }) => {
 
   return (
     <Card css={styles.root}>
-      <Box.Flex css={styles.row}>
-        <Box.Flex css={styles.item}>
-          <Text fontSize="sm">Status: </Text>
-          <Text fontSize="sm" className="status">
-            {status}
-          </Text>
-          <Text
-            aria-label="Status Circle"
-            className="circle"
-            data-status={status}
-          >
-            ●
+      <HStack align="center" justify="between" gap="$2">
+        <Box.Flex grow="1" gap="$2">
+          <Text fontSize="sm">ID: </Text>
+          <Text fontSize="sm" color="intentsBase12">
+            {shortAddress(id)}
           </Text>
         </Box.Flex>
-        <Box.Flex css={styles.actions}>
+        <HStack align="center">
           <Copyable
             value={id || ''}
             iconProps={{
@@ -57,24 +59,36 @@ export const TxHeader: TxHeaderComponent = ({ status, id, type }) => {
                   'aria-label': 'Copy Transaction Link',
                 }}
               />
-              <Tooltip content="Open explorer">
+              <Tooltip content="View on Explorer">
                 <Icon
                   css={styles.icon}
                   icon={Icon.is('ExternalLink')}
                   onClick={openExplorer}
-                  aria-label="Open explorer"
+                  aria-label="View on Explorer"
                 />
               </Tooltip>
             </>
           )}
-        </Box.Flex>
-      </Box.Flex>
-      <Box.Flex css={{ ...styles.row, ...styles.type }}>
+        </HStack>
+      </HStack>
+      <HStack align="center" gap="$2">
+        <Text fontSize="sm">Status: </Text>
+        <Text fontSize="sm" color="intentsBase12">
+          {status}
+        </Text>
+        <Text
+          as="span"
+          aria-label="Status Circle"
+          css={styles.circle}
+          data-status={status}
+        />
+      </HStack>
+      <HStack align="center" gap="$2">
         <Text fontSize="sm">Type: </Text>
-        <Text fontSize="sm" className="type">
+        <Text fontSize="sm" color="intentsBase12">
           {type}
         </Text>
-      </Box.Flex>
+      </HStack>
     </Card>
   );
 };
@@ -89,45 +103,25 @@ const styles = {
       color: '$brand !important',
     },
   }),
-  row: cssObj({
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: '$6',
-  }),
-  actions: cssObj({
-    gap: '$2',
-  }),
-  item: cssObj({
-    alignItems: 'center',
+  circle: cssObj({
+    borderRadius: '100%',
+    width: 6,
+    height: 6,
+    cursor: 'default',
 
-    '.status, .type': {
-      color: '$intentsBase12',
-      mx: '$2',
+    [`&[data-status="${TransactionStatus.success}"]`]: {
+      backgroundColor: `$${getTxStatusColor(TransactionStatus.success)}`,
     },
-
-    '.circle': {
-      borderRadius: '100%',
-      fontSize: 9,
-      cursor: 'default',
-
-      [`&[data-status="${TransactionStatus.success}"]`]: {
-        color: `$${getTxStatusColor(TransactionStatus.success)}`,
-      },
-      [`&[data-status="${TransactionStatus.failure}"]`]: {
-        color: `$${getTxStatusColor(TransactionStatus.failure)}`,
-      },
-      [`&[data-status="${TransactionStatus.submitted}"]`]: {
-        color: `$${getTxStatusColor(TransactionStatus.submitted)}`,
-      },
+    [`&[data-status="${TransactionStatus.failure}"]`]: {
+      backgroundColor: `$${getTxStatusColor(TransactionStatus.failure)}`,
+    },
+    [`&[data-status="${TransactionStatus.submitted}"]`]: {
+      backgroundColor: `$${getTxStatusColor(TransactionStatus.submitted)}`,
     },
   }),
   icon: cssObj({
     cursor: 'pointer',
   }),
-  type: cssObj({
-    justifyContent: 'flex-start',
-    gap: '$2',
-  }),
 };
 
 TxHeader.Loader = TxHeaderLoader;