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/playwright/e2e/Accounts.test.ts

@@ -183,16 +183,15 @@ test.describe('Existing Accounts', () => {
 
   test('can add accounts using correct derivation path after importing from private key', async () => {
     // at this point 2 accounts have already been created
-    const fuelAddress1 =
-      'fuel1kfnz04g7k8wjw22s03s3kk46wxr63he3v5v6kyrv76m7wzh7x9jqvqffua';
+    const fuelAddress1 = 'fuelsequencer1mt7k6ynlayacjwpqt0lwdn7ksv72ek2lwt95nu';
     const fuelAddress2 =
-      'fuel1kyxzyv5z39fuxnr6k9ncxujxn4y07fu6pf73vslmemgpex325vrsytpqks';
+      'fuelsequencervaloper163rsv65t4893t2rz5rmda9sly7lgdlq2s2kqtn';
     const fuelAddress3 =
-      'fuel152720qgc5wthxu4g7a2g6s7xy9d8wjgtffl489k706xyd2fas0wqyv0vsw';
+      'fuelsequencervaloper1vtfzrk6f4m6kxt6ehyqt9j5su5hvcz5qn0wwpn';
     const fuelPrivKey =
       '0x7f802a2a277872af1204140bd2c77c2193309c366e3c71ff1c4c31cea0a53f38';
     const fuelAddPriv =
-      'fuel1szu0uagadwpgl0fuz2thrtzn7artghvhexg5d9at4t76nzeesqasrdmjxy';
+      'fuelsequencervaloper163rsv65t4893t2rz5rmda9sly7lgdlq2s2kqtn';
 
     // import account from private key
     await createAccountFromPrivateKey(page, fuelPrivKey, 'Account 3');

packages/app/src/systems/Account/__mocks__/accounts.tsx

@@ -27,7 +27,7 @@ export const MOCK_ACCOUNTS = [
   },
   {
     name: 'Account 4',
-    address: 'fuel10va6297tkerdcn5u8mxjm9emudsmkj85pq5x7t7stkmzmc4nvs3qvn99qz',
+    address: 'fuelsequencer1mt7k6ynlayacjwpqt0lwdn7ksv72ek2lwt95nu',
     publicKey: '0x00',
   },
 ];

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

@@ -3,25 +3,32 @@ import { TestWrapper } from '~/systems/Core';
 import { renderWithProvider } from '~/systems/Core/__tests__/utils';
 import { FuelAddress } from './FuelAddress';
 
+const accountAddressHex = '0xdafd6d127fe93b8938205bfee6cfd6833cacd95f';
 const accountAddressB256 =
-  '0x2230bd556418ddc58b48065208b3958a8db247f11394023e17ff143db7235c6c';
+  '0x00000000000000000000000cfe7b143aca69a0984b481ab950716047586772586475aee82fb10b719d52a76';
+const shorten = (address: string) =>
+  `0x${address.slice(2, 6)}...${address.slice(-4)}`;
 const accountAddressBech32 =
-  'fuel1ygct64tyrrwutz6gqefq3vu432xmy3l3zw2qy0shlu2rmdert3kqx97pfj';
+  'fuelsequencer1mt7k6ynlayacjwpqt0lwdn7ksv72ek2lwt95nu';
 
 describe('FuelAddress', () => {
   it('a11y', async () => {
-    await testA11y(<FuelAddress address={accountAddressB256} />, {
+    await testA11y(<FuelAddress address={accountAddressHex} />, {
       wrapper: TestWrapper,
     });
   });
 
   it('should show b256 address from b256', () => {
     renderWithProvider(<FuelAddress address={accountAddressB256} />);
-    expect(screen.getByText('0x2230...5C6C')).toBeInTheDocument();
+    expect(screen.getByText(shorten(accountAddressB256))).toBeInTheDocument();
+  });
+  it('should show b256 address from eth', () => {
+    renderWithProvider(<FuelAddress address={accountAddressHex} />);
+    expect(screen.getByText(shorten(accountAddressB256))).toBeInTheDocument();
   });
 
   it('should show b256 address from bech32', () => {
     renderWithProvider(<FuelAddress address={accountAddressBech32} />);
-    expect(screen.getByText('0x2230...5C6C')).toBeInTheDocument();
+    expect(screen.getByText(accountAddressB256)).toBeInTheDocument();
   });
 });

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

@@ -9,11 +9,14 @@ import {
   isB256,
 } from 'fuels';
 import { useMemo } from 'react';
+import { shortAddress } from '~/systems/Core';
 import {
+  convertBech32ToB256,
+  isBech32,
+  isValidEthAddress,
   safeConvertToB256,
   safeDynamicAddress,
-  shortAddress,
-} from '~/systems/Core';
+} from '~/systems/Core/utils/address';
 import { useExplorerLink } from '../../hooks/useExplorerLink';
 
 export type AddressProps = {
@@ -32,7 +35,10 @@ export const FuelAddress = ({
   const account = useMemo<string>(() => {
     if (!address) return '';
     if (isContract) return safeConvertToB256(address);
-    return safeDynamicAddress(address).toString();
+    if (isBech32(address)) return convertBech32ToB256(address);
+    return isValidEthAddress(address)
+      ? address
+      : safeDynamicAddress(address).toString();
   }, [isContract, address]);
 
   const { openExplorer, href } = useExplorerLink(account);

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,21 +14,38 @@ export function isValidEthAddress(address = '') {
   return isPadded || isEthAddress;
 }
 
+export function convertBech32ToB256(bech32Address: string): string {
+  // Decode the Bech32 address
+  const { words } = bech32.decode(bech32Address);
+
+  // Convert from 5-bit words to 8-bit bytes
+  const bytes = bech32.fromWords(words);
+
+  // Convert the byte array to a hexadecimal string
+  const ethAddress = `0x${Buffer.from(bytes).toString('hex')}`;
+
+  return ethAddress;
+}
+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);
+    console.log(error);
     return address;
   }
 }
 
 export function safeDynamicAddress(address: string) {
-  try {
-    return Address.fromDynamicInput(safeConvertToB256(address));
-  } catch (error) {
-    console.error(error);
-    return address;
-  }
+  return Address.fromDynamicInput(safeConvertToB256(address));
 }

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/components/QRCode/QRCode.test.tsx

@@ -3,8 +3,7 @@ import { TestWrapper } from '~/systems/Core/components/TestWrapper';
 
 import { ReceiverQRCode } from './QRCode';
 
-const TEST_ACCOUNT =
-  'fuel1auahknz6mjuu0am034mlggh55f0tgp9j7fkzrc6xl48zuy5zv7vqa07n30';
+const TEST_ACCOUNT = 'fuelsequencer1mt7k6ynlayacjwpqt0lwdn7ksv72ek2lwt95nu';
 
 describe('QR Code Tests', () => {
   it('should show the qr code on screen', async () => {