feat: add evm connector (#8)

Swaylend · Aug 12, 2024 · f0fb996 · f0fb996
1 parent 8db0332
commit f0fb996
Show file tree

Hide file tree

Showing 9 changed files with 1,918 additions and 1,258 deletions.
diff --git a/apps/frontend/config/webpack.config.js b/apps/frontend/config/webpack.config.js
@@ -348,7 +348,8 @@ module.exports = (webpackEnv) => {
         // Handle node_modules packages that contain sourcemaps
         shouldUseSourceMap && {
           enforce: 'pre',
-          exclude: /@babel(?:\/|\\{1,2})runtime/,
+          exclude: /(@babel(?:\/|\\{1,2})runtime|node_modules)/,
+          // exclude: /@babel(?:\/|\\{1,2})runtime/,
           test: /\.(js|mjs|jsx|ts|tsx|css)$/,
           loader: require.resolve('source-map-loader'),
         },

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -8,10 +8,9 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@ethersproject/bignumber": "^5.7.0",
-    "@fuel-ts/contract": "^0.92.1",
-    "@fuel-wallet/sdk": "^0.16.1",
-    "@fuels/connectors": "^0.5.0",
-    "@fuels/react": "^0.20.0",
+    "@fuel-ts/contract": "^0.93.0",
+    "@fuels/connectors": "^0.25.0",
+    "@fuels/react": "^0.25.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@pythnetwork/pyth-fuel-js": "^1.0.1",
     "@svgr/webpack": "^6.5.1",
@@ -25,6 +24,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/react-table": "^7.7.12",
+    "@wagmi/core": "^2.13.3",
     "axios": "^1.2.4",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
@@ -45,7 +45,7 @@
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
-    "fuels": "^0.92.1",
+    "fuels": "^0.93.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-img": "^2.0.0",
     "identity-obj-proxy": "^3.0.0",
@@ -83,13 +83,13 @@
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.3.0",
     "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
+    "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.2",
     "terser-webpack-plugin": "^5.2.5",
     "tiny-warning": "^1.0.3",
     "tsdef": "^0.0.14",
-    "typescript": "^4.9.4",
+    "typescript": "5.0.4",
     "web-vitals": "^2.1.4",
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",

diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -2,14 +2,17 @@ import { Column } from '@components/Flex';
 import Footer from '@components/Footer';
 import Header from '@components/Header/Header';
 import styled from '@emotion/styled';
+import { useFuel, useProvider } from '@fuels/react';
 import Dashboard from '@screens/Dashboard';
 import Faucet from '@screens/Faucet';
-import Tutorial from '@screens/Tutorial';
-import Tutorials from '@screens/Tutorials';
+// import Tutorial from '@screens/Tutorial';
+// import Tutorials from '@screens/Tutorials';
 import { ROUTES } from '@src/constants';
 import { observer } from 'mobx-react-lite';
 import type React from 'react';
+import { useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { useStores } from './stores';
 
 const Root = styled(Column)`
   width: 100%;
@@ -18,6 +21,15 @@ const Root = styled(Column)`
   min-height: 100vh;
 `;
 const App: React.FC = () => {
+  const { accountStore } = useStores();
+  const { provider } = useProvider();
+  const { fuel } = useFuel();
+
+  useEffect(() => {
+    accountStore.initFuel(fuel);
+    accountStore.initProvider(provider);
+  });
+
   return (
     <Root>
       <Header />

diff --git a/apps/frontend/src/components/Wallet/LoginModal.tsx b/apps/frontend/src/components/Wallet/LoginModal.tsx
@@ -42,9 +42,9 @@ const LoginModal: React.FC<IProps> = ({ ...rest }) => {
     },
     { title: 'Create account', type: LOGIN_TYPE.GENERATE_SEED, active: true },
     {
-      title: 'Fuel Wallet Dev',
-      type: LOGIN_TYPE.FUEL_DEV,
-      active: accountStore.listConnectors.includes(LOGIN_TYPE.FUEL_DEV),
+      title: 'Ethereum Wallets',
+      type: LOGIN_TYPE.WALLET_CONNECT,
+      active: accountStore.listConnectors.includes(LOGIN_TYPE.WALLET_CONNECT),
     },
   ];
   return (

diff --git a/apps/frontend/src/hooks/useFuel.tsx b/apps/frontend/src/hooks/useFuel.tsx
diff --git a/apps/frontend/src/hooks/useIsConnected.tsx b/apps/frontend/src/hooks/useIsConnected.tsx
diff --git a/apps/frontend/src/index.tsx b/apps/frontend/src/index.tsx
@@ -1,5 +1,10 @@
-import React from 'react';
 import './index.css';
+import {
+  FuelWalletConnector,
+  FueletWalletConnector,
+  WalletConnectConnector,
+} from '@fuels/connectors';
+import { FuelProvider } from '@fuels/react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 import App from './App';
@@ -45,28 +50,42 @@ root.render(
   // <React.StrictMode>
   <storesContext.Provider value={mobxStore}>
     <QueryClientProvider client={queryClient}>
-      <ThemeWrapper>
-        <Router>
-          <App />
-        </Router>
-        <ToastContainer
-          icon={<div />}
-          position="bottom-right"
-          autoClose={500000}
-          closeButton={({ closeToast }) => (
-            <CloseIcon onClick={(e) => closeToast(e as any)} />
-          )}
-          hideProgressBar
-          newestOnTop={true}
-          closeOnClick={false}
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          theme="dark"
-        />
-        <GlobalStyles />
-      </ThemeWrapper>
+      <FuelProvider
+        ui={false}
+        fuelConfig={{
+          connectors: [
+            new FuelWalletConnector(),
+            new FueletWalletConnector(),
+            new WalletConnectConnector({
+              // TODO: setup walletconnect project and add project id
+              projectId: '',
+            }),
+          ],
+        }}
+      >
+        <ThemeWrapper>
+          <Router>
+            <App />
+          </Router>
+          <ToastContainer
+            icon={<div />}
+            position="bottom-right"
+            autoClose={500000}
+            closeButton={({ closeToast }) => (
+              <CloseIcon onClick={(e) => closeToast(e as any)} />
+            )}
+            hideProgressBar
+            newestOnTop={true}
+            closeOnClick={false}
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="dark"
+          />
+          <GlobalStyles />
+        </ThemeWrapper>
+      </FuelProvider>
       <ReactQueryDevtools initialIsOpen />
     </QueryClientProvider>
   </storesContext.Provider>

diff --git a/apps/frontend/src/stores/AccountStore.ts b/apps/frontend/src/stores/AccountStore.ts
@@ -1,31 +1,25 @@
-import {
-  FuelWalletConnector,
-  FuelWalletDevelopmentConnector,
-  FueletWalletConnector,
-  // defaultConnectors,
-} from '@fuels/connectors';
 import { type IToken, NODE_URL, TOKENS_LIST } from '@src/constants';
 import Balance from '@src/entities/Balance';
 import BN from '@src/utils/BN';
 import type RootStore from '@stores/RootStore';
 import {
   Address,
   CoinQuantity,
-  Fuel,
+  type Fuel,
   Mnemonic,
   Provider,
   Wallet,
   type WalletLocked,
   type WalletUnlocked,
   // FuelConnectorEventTypes,
 } from 'fuels';
-import { makeAutoObservable, reaction, when } from 'mobx';
+import { makeAutoObservable, reaction, runInAction, when } from 'mobx';
 
 export enum LOGIN_TYPE {
   FUEL_WALLET = 'Fuel Wallet',
-  FUEL_DEV = 'Fuel Wallet Development',
   FUELET = 'Fuelet Wallet',
   GENERATE_SEED = 'Generate seed',
+  WALLET_CONNECT = 'Ethereum Wallets',
 }
 
 export interface ISerializedAccountStore {
@@ -56,8 +50,6 @@ class AccountStore {
       this.setSeed(initState.seed);
     }
 
-    this.initFuel();
-    this.initProvider();
     when(() => this.provider != null, this.updateAccountBalances);
     setInterval(this.updateAccountBalances, 15 * 1000);
     reaction(
@@ -71,14 +63,7 @@ class AccountStore {
     this.seed = seed;
   };
 
-  initFuel = () => {
-    const fuel = new Fuel({
-      connectors: [
-        new FuelWalletConnector(),
-        new FueletWalletConnector(),
-        new FuelWalletDevelopmentConnector(),
-      ],
-    });
+  initFuel = (fuel: Fuel) => {
     this.setFuel(fuel);
     fuel.on(
       fuel.events.connectors,
@@ -103,10 +88,20 @@ class AccountStore {
     this.fuel = fuel;
   };
 
-  initProvider = async () => {
-    Provider.create(NODE_URL)
-      .then((provider) => this.setProvider(provider))
-      .catch(console.error);
+  initProvider = async (provider: Provider | null) => {
+    if (provider) {
+      this.setProvider(provider);
+      return;
+    }
+
+    try {
+      const provider = await Provider.create(NODE_URL);
+      runInAction(() => {
+        this.setProvider(provider);
+      });
+    } catch (error) {
+      console.error('Failed to create provider', error);
+    }
   };
 
   public assetBalances: Balance[] | null = null;