fix: not being able to conver bech32 to b256

Author: arthurgeron

packages/app/package.json

@@ -35,6 +35,7 @@
     "@storybook/addon-viewport": "7.4.6",
     "@storybook/jest": "0.2.3",
     "@xstate/react": "3.2.2",
+    "bech32": "2.0.0",
     "compare-versions": "6.1.0",
     "cross-fetch": "4.0.0",
     "dayjs": "1.11.10",

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

@@ -9,11 +9,11 @@ import {
   isB256,
 } from 'fuels';
 import { useMemo } from 'react';
+import { shortAddress } from '~/systems/Core';
 import {
   safeConvertToB256,
   safeDynamicAddress,
-  shortAddress,
-} from '~/systems/Core';
+} from '~/systems/Core/utils/address';
 import { useExplorerLink } from '../../hooks/useExplorerLink';
 
 export type AddressProps = {

packages/app/src/systems/Asset/machines/assetsMachine.tsx

@@ -185,8 +185,8 @@ export const assetsMachine = createMachine(
     services: {
       setListedAssets: FetchMachine.create<null, void>({
         showError: true,
-        async fetch() {
-          await AssetService.setListedAssets();
+        fetch: async (_input, abortController) => {
+          await AssetService.setListedAssets(abortController);
         },
       }),
       fetchAssets: FetchMachine.create<

packages/app/src/systems/CRX/background/services/BackgroundService.ts

@@ -20,7 +20,7 @@ import { ConnectionService } from '~/systems/DApp/services';
 import { NetworkService } from '~/systems/Network/services';
 import { AbiService } from '~/systems/Settings/services';
 
-import { safeDynamicAddress } from '~/systems/Core';
+import { safeDynamicAddress } from '~/systems/Core/utils/address';
 import type { CommunicationProtocol } from './CommunicationProtocol';
 import { PopUpService } from './PopUpService';
 import type { MessageInputs } from './types';

packages/app/src/systems/Core/utils/address.tsx

@@ -1,3 +1,4 @@
+import { bech32 } from 'bech32';
 import { Address, isB256 } from 'fuels';
 
 export function shortAddress(address = '') {
@@ -13,9 +14,30 @@ export function isValidEthAddress(address = '') {
   return isPadded || isEthAddress;
 }
 
+export function convertBech32ToB256(address: string): string {
+  try {
+    const decoded = bech32.decode(address);
+    const bytes = bech32.fromWords(decoded.words);
+    return `0x${Buffer.from(bytes).toString('hex')}`;
+  } catch (error) {
+    console.error('Invalid Bech32 address:', error);
+    return address;
+  }
+}
+
+export function isBech32(address: string): boolean {
+  try {
+    bech32.decode(address);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 export function safeConvertToB256(address: string) {
   try {
     if (isB256(address)) return address;
+    if (isBech32(address)) return convertBech32ToB256(address);
     return Address.fromDynamicInput(address).toB256();
   } catch (error) {
     console.error(error);

packages/app/src/systems/FundWallet/hooks/useFundWallet.tsx

@@ -4,7 +4,7 @@ import { IS_CRX } from '~/config';
 import { DEFAULT_NETWORKS } from '~/networks';
 import { useAccounts } from '~/systems/Account';
 import { openTab } from '~/systems/CRX/utils';
-import { safeConvertToB256 } from '~/systems/Core';
+import { safeConvertToB256 } from '~/systems/Core/utils/address';
 import { useNetworks } from '~/systems/Network';
 
 export function useFundWallet() {

packages/app/src/systems/Home/pages/Receive/Receive.tsx

@@ -9,7 +9,6 @@ import {
   safeConvertToB256,
 } from '~/systems/Core';
 
-import { Address } from 'fuels';
 import { ReceiverQRCode } from '../../components/QRCode';
 import { UserAddressCard } from '../../components/UserAddressCard';
 

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

@@ -3,12 +3,7 @@ import { Box, Card, Copyable, Icon, Text } from '@fuel-ui/react';
 import { Address, type TransactionSummary } from 'fuels';
 import { type FC, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import {
-  Pages,
-  safeConvertToB256,
-  safeDynamicAddress,
-  shortAddress,
-} from '~/systems/Core';
+import { Pages, safeConvertToB256, shortAddress } from '~/systems/Core';
 
 import { useTxMetadata } from '../../hooks/useTxMetadata';
 import { TxIcon } from '../TxIcon';