feat: update bridge with fuel connectors

Author: luizstacio

packages/app-explorer/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@faker-js/faker": "8.4.0",
     "@fuel-explorer/graphql": "workspace:*",
-    "@fuel-ts/math": "0.71.1",
+    "@fuel-ts/math": "0.73.0",
     "@fuel-wallet/sdk": "0.14.3",
     "@fuels/assets": "0.1.4",
     "@fuels/ui": "workspace:*",
@@ -26,7 +26,7 @@
     "csstype": "3.1.3",
     "dayjs": "1.11.10",
     "framer-motion": "11.0.3",
-    "fuels": "0.71.1",
+    "fuels": "0.73.0",
     "geist": "1.2.1",
     "graphql": ">=16.8.1",
     "graphql-request": ">=6.1.0",

packages/app-portal/.env.production

@@ -4,3 +4,5 @@ VITE_FUEL_VERSION=0.22.0
 VITE_IS_PUBLIC_PREVIEW=true
 VITE_WALLET_INSTALL=https://chrome.google.com/webstore/detail/fuel-wallet/dldjpboieedgcmpkchcjcbijingjcgok
 VITE_WALLET_INSTALL_NEXT=https://next-wallet.fuel.network/docs/install/#install-from-source-code
+VITE_BLOCK_EXPLORER_URL=https://app.fuel.network/
+VITE_FUEL_PROVIDER_URL=https://beta-5.fuel.network/graphql

packages/app-portal/package.json

@@ -17,11 +17,10 @@
     "@fuel-bridge/fungible-token": "next",
     "@fuel-bridge/message-predicates": "next",
     "@fuel-bridge/solidity-contracts": "next",
-    "@fuel-ts/utils": "0.71.1",
     "@fuel-ui/css": "0.23.0",
     "@fuel-ui/react": "0.23.0",
-    "@fuel-wallet/react": "0.14.3",
-    "@fuel-wallet/sdk": "0.14.3",
+    "@fuel-wallet/react": "0.15.2",
+    "@fuel-wallet/sdk": "0.15.2",
     "@fuels/assets": "0.1.0",
     "@fuels/react-xstore": "0.0.8",
     "@hookform/resolvers": "^3.1.1",
@@ -31,7 +30,7 @@
     "date-fns": "^2.30.0",
     "dexie": "^3.2.4",
     "framer-motion": "^10.12.16",
-    "fuels": "0.71.1",
+    "fuels": "0.73.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -43,7 +42,7 @@
     "yup": "^1.2.0"
   },
   "devDependencies": {
-    "@fuel-wallet/playwright-utils": "0.14.3",
+    "@fuel-wallet/playwright-utils": "0.15.2",
     "@storybook/addon-a11y": "^7.2.2",
     "@storybook/addon-actions": "^7.2.2",
     "@storybook/addon-essentials": "^7.2.2",

packages/app-portal/src/config.ts

@@ -14,8 +14,11 @@ export const {
   VITE_FUEL_FUNGIBLE_ASSET_ID,
   VITE_WALLET_INSTALL,
   VITE_WALLET_INSTALL_NEXT,
+  VITE_FUEL_PROVIDER_URL,
+  VITE_BLOCK_EXPLORER_URL,
 } = import.meta.env;
 
+export const FUEL_PROVIDER = VITE_FUEL_PROVIDER_URL;
 export const IS_PREVIEW = import.meta.env.VITE_IS_PUBLIC_PREVIEW === 'true';
 export const IS_DEVELOPMENT = import.meta.env.DEV;
 export const IS_TEST = import.meta.env.MODE === 'test';

packages/app-portal/src/main.tsx

@@ -5,8 +5,11 @@ import './polyfills';
 
 import { App } from './App';
 
+// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+// );
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
 );

packages/app-portal/src/routes.tsx

@@ -5,7 +5,7 @@ import { ecosystemRoutes } from './systems/Ecosystem/routes';
 import { Pages } from './types';
 
 export const routes = (
-  <BrowserRouter basename="/portal">
+  <BrowserRouter basename={import.meta.env.BASE_URL}>
     <Routes>
       <Route>
         <Route path="*" element={<Navigate to={Pages.ecosystem} />} />

packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx

@@ -20,7 +20,7 @@ const selectors = {
 
 export const useBridgeTxs = () => {
   const {
-    hasWallet,
+    isConnected,
     isLoadingConnection,
     provider: fuelProvider,
     address: fuelAddress,
@@ -39,18 +39,14 @@ export const useBridgeTxs = () => {
   const paginatedBridgeTxs = bridgeTxs?.slice(0, amountTxsToShow);
   const hasMorePages = (bridgeTxs?.length || 0) > amountTxsToShow;
 
-  const isConnected = !!fuelAddress?.toAddress();
-
   return {
     handlers: {
       showMore: () => setAmountTxsToShow(amountTxsToShow + MAX_BY_PAGE),
     },
     bridgeTxs: paginatedBridgeTxs,
     isLoading,
     hasMorePages,
-    shouldShowNotConnected: hasWallet
-      ? !isLoadingConnection && !isConnected && !isLoading
-      : !hasWallet,
+    shouldShowNotConnected: !isLoadingConnection && !isConnected && !isLoading,
     shouldShowEmpty:
       isConnected && !isLoading && bridgeTxs && bridgeTxs.length === 0,
     shouldShowList: !isLoading && isConnected && (bridgeTxs?.length || 0) > 0,

packages/app-portal/src/systems/Bridge/hooks/useExplorerLink.tsx

@@ -1,5 +1,6 @@
-import { getBlockExplorerLink } from '@fuel-wallet/sdk';
+import { buildBlockExplorerUrl } from 'fuels';
 import { useMemo } from 'react';
+import { FUEL_PROVIDER, VITE_BLOCK_EXPLORER_URL } from '~/config';
 
 export type ExplorerLinkProps = {
   network: 'ethereum' | 'fuel' | string | undefined;
@@ -15,9 +16,11 @@ export function useExplorerLink({
     if (network === 'ethereum') {
       return `https://sepolia.etherscan.io/tx/${id}`;
     }
-
     if (network === 'fuel') {
-      return getBlockExplorerLink({
+      if (providerUrl === FUEL_PROVIDER) {
+        return `${VITE_BLOCK_EXPLORER_URL}tx/${id}`;
+      }
+      return buildBlockExplorerUrl({
         path: `transaction/${id || ''}`,
         providerUrl,
       });

packages/app-portal/src/systems/Chains/eth/machines/txEthToFuelMachine.tsx

@@ -18,6 +18,8 @@ import type { GetReceiptsInfoReturn, TxEthToFuelInputs } from '../services';
 import { TxEthToFuelService } from '../services';
 import { EthTxCache } from '../utils';
 
+const FUEL_MESSAGE_GET_INTERVAL = 10000;
+
 type MachineContext = {
   ethTxId?: `0x${string}`;
   ethTxNonce?: BN;
@@ -185,7 +187,7 @@ export const txEthToFuelMachine = createMachine(
           waitingForRetryFuelMessage: {
             tags: ['isSettlementLoading', 'isSettlementSelected'],
             after: {
-              2000: 'gettingFuelMessageStatus',
+              [FUEL_MESSAGE_GET_INTERVAL]: 'gettingFuelMessageStatus',
             },
           },
           gettingFuelMessage: {
@@ -311,7 +313,7 @@ export const txEthToFuelMachine = createMachine(
                   'isConfirmTransactionSelected',
                 ],
                 after: {
-                  2000: 'gettingFuelMessageStatus',
+                  [FUEL_MESSAGE_GET_INTERVAL]: 'gettingFuelMessageStatus',
                 },
               },
               done: {
@@ -363,7 +365,7 @@ export const txEthToFuelMachine = createMachine(
                 duration: 5000,
               },
             );
-          }, 2000);
+          }, FUEL_MESSAGE_GET_INTERVAL);
           EthTxCache.removeTxCreated(ctx.ethTxId);
         }
       },

packages/app-portal/src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx

@@ -23,6 +23,8 @@ export function TxFuelToEthDialog() {
     txId: metadata.txId,
   });
 
+  console.log(amount);
+
   return (
     <>
       <Dialog.Close aria-label="Close Transaction Dialog" />

packages/app-portal/src/systems/Chains/fuel/hooks/index.tsx

@@ -1,3 +1,2 @@
 export * from './useFuelAccountConnection';
 export * from './useTxFuelToEth';
-export * from './useHasFuelWallet';

packages/app-portal/src/systems/Chains/fuel/hooks/useBalance.tsx

@@ -34,17 +34,6 @@ export const useBalance = ({
     },
   );
 
-  const listenerAccountFetcher = () => {
-    query.refetch();
-  };
-
-  useEffect(() => {
-    window.addEventListener('focus', listenerAccountFetcher);
-    return () => {
-      window.removeEventListener('focus', listenerAccountFetcher);
-    };
-  }, []);
-
   return {
     balance: query.data || undefined,
     ...query,

packages/app-portal/src/systems/Chains/fuel/hooks/useFuelAccountConnection.tsx

@@ -1,6 +1,6 @@
 import {
   useAccount,
-  useConnector,
+  useConnectUI,
   useDisconnect,
   useFuel,
   useIsConnected,
@@ -13,7 +13,6 @@ import type { AssetFuel } from '~/systems/Assets/utils';
 import { useFuelNetwork } from '~/systems/Settings/providers/FuelNetworkProvider';
 
 import { useBalance } from './useBalance';
-import { useHasFuelWallet } from './useHasFuelWallet';
 
 export const useFuelAccountConnection = (props?: { assetId?: string }) => {
   const { assetId } = props || {};
@@ -25,12 +24,10 @@ export const useFuelAccountConnection = (props?: { assetId?: string }) => {
     assetId,
     provider: fuelProvider,
   });
-  const { hasWallet } = useHasFuelWallet();
   const { isLoading: isLoadingConnection } = useIsConnected();
-  const { connect, error, isConnecting } = useConnector();
+  const { connect, error, isConnecting } = useConnectUI();
   const { disconnect } = useDisconnect();
-  // const { provider: fuelProvider } = useProvider();
-  const { wallet } = useWallet({ address: account || '' });
+  const { wallet } = useWallet(account);
 
   const address = useMemo(
     () => (account ? Address.fromString(account) : undefined),
@@ -60,7 +57,6 @@ export const useFuelAccountConnection = (props?: { assetId?: string }) => {
     address,
     isConnected: !!account,
     error,
-    hasWallet,
     isLoadingConnection,
     isConnecting,
     provider: fuelProvider,

packages/app-portal/src/systems/Chains/fuel/hooks/useHasFuelWallet.tsx

@@ -1,5 +1,4 @@
-import { concatBytes } from '@fuel-ts/utils';
-import { ZeroBytes32, arrayify, hash } from 'fuels';
+import { ZeroBytes32, arrayify, concatBytes, hash } from 'fuels';
 
 export function getContractTokenId(
   contractId: `0x${string}`,

packages/app-portal/src/systems/Chains/fuel/utils/contract.ts

@@ -1,9 +1,5 @@
-import {
-  FUELET_CONNECTOR,
-  FUEL_WALLET_CONNECTOR,
-  FUEL_WALLET_DEVELOPMENT_CONNECTOR,
-  FuelConnectorProvider,
-} from '@fuel-wallet/react';
+import { FuelProvider } from '@fuel-wallet/react';
+import { defaultConnectors } from '@fuel-wallet/sdk';
 import type { ReactNode } from 'react';
 import { IS_PREVIEW, IS_TEST } from '~/config';
 
@@ -13,17 +9,20 @@ type ProvidersProps = {
   children: ReactNode;
 };
 
-const connectors =
-  IS_PREVIEW && !IS_TEST
-    ? [FUEL_WALLET_CONNECTOR, FUEL_WALLET_DEVELOPMENT_CONNECTOR]
-    : [FUEL_WALLET_CONNECTOR, FUELET_CONNECTOR];
+const IS_DEV = IS_PREVIEW && !IS_TEST;
 
 export function FuelConnectProvider({ children }: ProvidersProps) {
   const { theme } = useTheme();
 
   return (
-    <FuelConnectorProvider theme={theme} connectors={connectors}>
+    <FuelProvider
+      theme={theme}
+      fuelConfig={{
+        devMode: IS_DEV,
+        connnectors: defaultConnectors(),
+      }}
+    >
       {children}
-    </FuelConnectorProvider>
+    </FuelProvider>
   );
 }

packages/app-portal/src/systems/Settings/providers/FuelConnectProvider.tsx

@@ -16,6 +16,8 @@ interface ImportMetaEnv {
   readonly VITE_IS_PUBLIC_PREVIEW: string;
   readonly VITE_WALLET_INSTALL: string;
   readonly VITE_WALLET_INSTALL_NEXT: string;
+  readonly VITE_FUEL_PROVIDER_URL: string;
+  readonly VITE_BLOCK_EXPLORER_URL: string;
 }
 
 interface ImportMeta {

packages/app-portal/src/vite-env.d.ts

@@ -5,11 +5,14 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 
 import './load.envs.js';
 
-const { PORT, CI } = process.env;
+const { PORT, NODE_ENV, CI } = process.env;
+
+const basePortal = NODE_ENV === 'production' ? '/portal' : '/';
+process.env.BASE_URL = basePortal;
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: CI ? '/portal/' : '/',
+  base: basePortal,
   server: {
     port: Number(PORT),
   },