feat: add explorer url config to networks (#1508)

.changeset/fifty-cobras-clap.md

@@ -0,0 +1,6 @@
+---
+"@fuel-wallet/types": minor
+"fuels-wallet": minor
+---
+
+Add explorer, bridge and faucet url configuration to networks.

packages/app/playwright/crx/crx.test.ts

@@ -1,14 +1,5 @@
 import type { Account as WalletAccount } from '@fuel-wallet/types';
-import { type Locator, expect } from '@playwright/test';
-import {
-  type Asset,
-  type NetworkFuel,
-  Provider,
-  Signer,
-  Wallet,
-  bn,
-  hashMessage,
-} from 'fuels';
+import { type Locator, type Page, expect } from '@playwright/test';
 
 import {
   delay,
@@ -30,6 +21,15 @@ import {
   PRIVATE_KEY,
 } from '../mocks';
 
+import {
+  type Asset,
+  type NetworkFuel,
+  Provider,
+  Signer,
+  Wallet,
+  bn,
+  hashMessage,
+} from 'fuels';
 import {
   getAccountByName,
   getWalletAccounts,
@@ -42,8 +42,6 @@ import {
 
 const WALLET_PASSWORD = 'Qwe123456$';
 
-const isLocalNetwork = process.env.VITE_FUEL_PROVIDER_URL.includes('localhost');
-
 // Increase timeout for this test
 // The timeout is set for 3 minutes
 // because some tests like reconnect
@@ -64,6 +62,7 @@ test.describe('FuelWallet Extension', () => {
   });
 
   test('SDK operations', async ({ context, baseURL, extensionId }) => {
+    const provider = await Provider.create(process.env.VITE_FUEL_PROVIDER_URL);
     // Use a single instance of the page to avoid
     // multiple waiting times, and window.fuel checking.
     const blankPage = await context.newPage();
@@ -463,17 +462,13 @@ test.describe('FuelWallet Extension', () => {
       }
 
       async function approveTxCheck(senderAccount: WalletAccount) {
-        const provider = await Provider.create(
-          process.env.VITE_FUEL_PROVIDER_URL
-        );
+        const AMOUNT_TRANSFER = 100;
         const receiverWallet = Wallet.generate({
           provider,
         });
-        const AMOUNT_TRANSFER = 100;
-
+        bn(100_000_000);
         // Add some coins to the account
         await seedWallet(senderAccount.address, bn(100_000_000));
-
         // Create transfer
         const transferStatus = transfer(
           senderAccount.address,
@@ -501,8 +496,16 @@ test.describe('FuelWallet Extension', () => {
         expect(balance.toNumber()).toBe(AMOUNT_TRANSFER);
       }
 
+      await test.step('Seed initial funds using authorized Account', async () => {
+        const authorizedAccount = await switchAccount(popupPage, 'Account 1');
+
+        await seedWallet(authorizedAccount.address, bn(100_000_000));
+        await hasText(popupPage, /0\.100/i);
+      });
+
       await test.step('Send transfer using authorized Account', async () => {
         const authorizedAccount = await switchAccount(popupPage, 'Account 1');
+        // Add some coins to the account
         await approveTxCheck(authorizedAccount);
       });
 
@@ -527,9 +530,6 @@ test.describe('FuelWallet Extension', () => {
           popupPage,
           'Account 2'
         );
-        const provider = await Provider.create(
-          process.env.VITE_FUEL_PROVIDER_URL
-        );
         const receiverWallet = Wallet.generate({
           provider,
         });
@@ -676,7 +676,7 @@ test.describe('FuelWallet Extension', () => {
         await popupPage.reload();
       }
 
-      const initialNetworkAmount = isLocalNetwork ? 3 : 2;
+      const initialNetworkAmount = 4;
       let networkSelector = getByAriaLabel(popupPage, 'Selected Network');
       await networkSelector.click();
 

packages/app/playwright/e2e/HomeWallet.test.ts

@@ -25,8 +25,8 @@ test.describe('HomeWallet', () => {
 
   test('should change balance when select a new network', async () => {
     await visit(page, '/wallet');
-    const faucetTabPromise = page.waitForEvent('popup');
     const faucetButton = getButtonByText(page, 'Faucet');
+    const faucetTabPromise = page.waitForEvent('popup');
     await faucetButton.click();
     const faucetTab = await faucetTabPromise;
     await faucetTab.waitForLoadState();

packages/app/playwright/e2e/SendTransaction.test.ts

@@ -367,7 +367,9 @@ test.describe('SendTransaction', () => {
       .trim();
     const feeAmount = bn.parseUnits(feeAmountText);
 
-    // Max amount after calculating fee
+    // Fee values change
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+
     const maxAmountAfterFee = await getInputByName(page, 'amount').inputValue();
     const totalAmount = feeAmount.add(bn.parseUnits(maxAmountAfterFee));
     await expect(bn.parseUnits(maxAmount).toString()).toBe(

packages/app/src/config.ts

@@ -38,5 +38,5 @@ export const IS_CRX_POPUP =
 /** Time in minutes before Wallet auto locks */
 export const AUTO_LOCK_IN_MINUTES = VITE_AUTO_LOCK_IN_MINUTES;
 export const MIN_NODE_VERSION = '0.33.0';
-export const TESTNET_URL = 'https://testnet.fuel.network/v1/graphql';
-export const DEVNET_URL = 'https://devnet.fuel.network/v1/graphql';
+export const IS_RELEASE =
+  !IS_DEVELOPMENT && !IS_TEST && process.env.VITE_CRX_RELEASE === 'true';

packages/app/src/networks.ts

@@ -0,0 +1,53 @@
+import type { NetworkData } from '@fuel-wallet/types';
+import { CHAIN_IDS } from 'fuels';
+import {
+  IS_DEVELOPMENT,
+  IS_RELEASE,
+  IS_TEST,
+  VITE_EXPLORER_URL,
+  VITE_FUEL_FAUCET_URL,
+  VITE_FUEL_PROVIDER_URL,
+} from './config';
+
+export const DEFAULT_NETWORKS: Array<
+  NetworkData & { faucetUrl?: string; bridgeUrl?: string }
+> = [
+  {
+    name: 'Ignition',
+    url: 'https://mainnet.fuel.network/v1/graphql',
+    chainId: CHAIN_IDS.fuel.mainnet,
+    explorerUrl: 'https://app.fuel.network',
+    bridgeUrl: 'https://app.fuel.network/bridge',
+    isSelected: IS_RELEASE,
+  },
+  {
+    name: 'Fuel Sepolia Testnet',
+    url: 'https://testnet.fuel.network/v1/graphql',
+    chainId: CHAIN_IDS.fuel.testnet,
+    explorerUrl: 'https://app-testnet.fuel.network',
+    faucetUrl: 'https://faucet-testnet.fuel.network/',
+    isSelected: !IS_RELEASE,
+  },
+  {
+    name: 'Fuel Sepolia Devnet',
+    url: 'https://devnet.fuel.network/v1/graphql',
+    chainId: CHAIN_IDS.fuel.devnet,
+    explorerUrl: 'https://app-devnet.fuel.network',
+    faucetUrl: 'https://faucet-devnet.fuel.network/',
+    isSelected: false,
+  },
+];
+
+if (
+  (IS_DEVELOPMENT || IS_TEST) &&
+  !DEFAULT_NETWORKS.find((n) => n.url === VITE_FUEL_PROVIDER_URL)
+) {
+  DEFAULT_NETWORKS.push({
+    name: 'Local network',
+    url: VITE_FUEL_PROVIDER_URL,
+    chainId: CHAIN_IDS.fuel.testnet,
+    explorerUrl: VITE_EXPLORER_URL,
+    faucetUrl: VITE_FUEL_FAUCET_URL,
+    isSelected: false,
+  });
+}

packages/app/src/systems/Asset/components/AssetList/AssetList.stories.tsx

@@ -30,6 +30,6 @@ export const Empty = () => (
 
 export const EmptyFaucet = () => (
   <Box css={{ width: 300, height: 300 }}>
-    <AssetList.Empty showFaucet />
+    <AssetList.Empty />
   </Box>
 );

packages/app/src/systems/Asset/components/AssetList/AssetListEmpty.tsx

@@ -1,36 +1,35 @@
 import { cssObj } from '@fuel-ui/css';
 import { Button, Card, Heading, Icon, Text } from '@fuel-ui/react';
-import { useOpenFaucet } from '~/systems/Faucet';
+import { useFundWallet } from '~/systems/FundWallet';
 
 export type AssetListEmptyProps = {
-  showFaucet?: boolean;
   text?: string;
   supportText?: string;
 };
 
 export function AssetListEmpty({
-  showFaucet,
   text = `You don't have any assets`,
   supportText = 'Start depositing some assets',
 }: AssetListEmptyProps) {
-  const openFaucet = useOpenFaucet();
+  const { open, hasFaucet, hasBridge } = useFundWallet();
+  const showFund = hasFaucet || hasBridge;
 
   return (
     <Card css={styles.empty}>
       <Card.Body>
         {!!text && <Heading as="h5">{text}</Heading>}
         {!!supportText && <Text fontSize="sm">{supportText}</Text>}
-        {showFaucet && (
+        {showFund && (
           /**
            * TODO: need to add right faucet icon on @fuel-ui
            */
           <Button
             size="sm"
             intent="primary"
-            leftIcon={Icon.is('Wand')}
-            onPress={openFaucet}
+            leftIcon={hasFaucet ? Icon.is('Wand') : Icon.is('Coins')}
+            onPress={open}
           >
-            Faucet
+            {hasFaucet ? 'Faucet' : 'Bridge to Fuel'}
           </Button>
         )}
       </Card.Body>

packages/app/src/systems/Core/utils/databaseVersioning.ts

@@ -1,6 +1,7 @@
 import { createUUID } from '@fuel-wallet/connections';
 import type Dexie from 'dexie';
 import { CHAIN_IDS, DEVNET_NETWORK_URL, TESTNET_NETWORK_URL } from 'fuels';
+import { DEFAULT_NETWORKS } from '~/networks';
 
 export const applyDbVersioning = (db: Dexie) => {
   // DB VERSION 19
@@ -92,15 +93,33 @@ export const applyDbVersioning = (db: Dexie) => {
     });
 
   // DB VERSION 22
-  db.version(22).stores({
-    vaults: 'key',
-    accounts: '&address, &name',
-    networks: '&id, &url, &name, chainId',
-    connections: 'origin',
-    transactions: '&id',
-    assets: '&name, &symbol',
-    assetsTemp: null,
-    abis: '&contractId',
-    errors: '&id',
-  });
+  db.version(22)
+    .stores({
+      vaults: 'key',
+      accounts: '&address, &name',
+      networks: '&id, &url, &name, chainId',
+      connections: 'origin',
+      transactions: '&id',
+      assets: '&name, &symbol',
+      assetsTemp: null,
+      abis: '&contractId',
+      errors: '&id',
+    })
+    .upgrade(async (tx) => {
+      const networks = tx.table('networks');
+      // *
+      // Drop all networks
+      // *
+      await networks.clear();
+      // *
+      // Add default networks
+      // *
+      for (const [index, network] of DEFAULT_NETWORKS.entries()) {
+        await networks.add({
+          // Ensure we add to database in the same order as the DEFAULT_NETWORKS
+          id: index.toString(),
+          ...network,
+        });
+      }
+    });
 };

packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx

@@ -28,7 +28,6 @@ export function TransactionRequest() {
     shouldShowActions,
     shouldDisableApproveBtn,
     errors,
-    providerUrl,
     executedStatus,
   } = txRequest;
   const { isLoading: isLoadingAssets } = useAssets();
@@ -99,7 +98,6 @@ export function TransactionRequest() {
               showDetails
               tx={txSummaryExecuted}
               txStatus={executedStatus()}
-              providerUrl={providerUrl}
               footer={
                 status('failed') && (
                   <Button

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

@@ -0,0 +1 @@
+export * from './useFundWallet';

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

@@ -0,0 +1,50 @@
+import { Address } from 'fuels';
+import { useCallback, useMemo } from 'react';
+import { IS_CRX } from '~/config';
+import { DEFAULT_NETWORKS } from '~/networks';
+import { useAccounts } from '~/systems/Account';
+import { openTab } from '~/systems/CRX/utils';
+import { useNetworks } from '~/systems/Network';
+
+export function useFundWallet() {
+  const { selectedNetwork } = useNetworks();
+  const { account } = useAccounts();
+
+  const { faucetUrl, bridgeUrl } = useMemo(() => {
+    const network = DEFAULT_NETWORKS.find(
+      (n) => n.url === selectedNetwork?.url
+    );
+    return {
+      bridgeUrl: network?.bridgeUrl ?? null,
+      faucetUrl: network?.faucetUrl ?? null,
+    };
+  }, [selectedNetwork]);
+
+  const open = useCallback(() => {
+    let url: URL | null = null;
+    if (faucetUrl) {
+      if (!account || !account.address) return faucetUrl;
+      const address = Address.fromDynamicInput(account.address).toB256();
+      url = new URL(faucetUrl);
+      url.searchParams.set('address', address);
+    } else if (bridgeUrl) {
+      url = new URL(bridgeUrl);
+    }
+
+    if (!url) return;
+    if (IS_CRX) {
+      openTab(url.toString());
+      return;
+    }
+    window.open(url, '_blank');
+  }, [account, bridgeUrl, faucetUrl]);
+
+  return {
+    open,
+    faucetUrl,
+    bridgeUrl,
+    hasFaucet: !!faucetUrl,
+    hasBridge: !!bridgeUrl,
+    showFund: !!faucetUrl || !!bridgeUrl,
+  };
+}