Merge pull request #67 from compolabs/feat/1072-wallets-integration

[1072] Wallets integration

Author: EchoDex

package-lock.json

@@ -8,11 +8,13 @@
     "@compolabs/spark-orderbook-ts-sdk": "1.2.4",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@fuel-wallet/sdk": "^0.16.1",
+    "@fuels/connectors": "^0.6.0",
+    "@fuels/react": "^0.20.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@pythnetwork/pyth-evm-js": "^1.33.0",
     "@svgr/webpack": "^8.1.0",
     "@szhsin/react-accordion": "^1.2.3",
+    "@tanstack/react-query": "^5.40.1",
     "@tanstack/react-table": "^8.13.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

package.json

@@ -1,5 +1,4 @@
 import Spark from "@compolabs/spark-orderbook-ts-sdk";
-import { WriteTransactionResponse } from "@compolabs/spark-orderbook-ts-sdk/dist/interface";
 import { makeObservable } from "mobx";
 import { Nullable } from "tsdef";
 
@@ -79,8 +78,8 @@ export class FuelNetwork {
     return TOKENS_BY_ASSET_ID[assetId.toLowerCase()];
   };
 
-  connectWallet = async (): Promise<void> => {
-    await this.walletManager.connect();
+  setWallet = async (account: string, wallet?: any): Promise<void> => {
+    await this.walletManager.setWallet(account, wallet);
     this.sdk.setActiveWallet(this.walletManager.wallet ?? undefined);
   };
 
@@ -98,7 +97,7 @@ export class FuelNetwork {
     await this.walletManager.addAsset(assetId);
   };
 
-  createSpotOrder = async (assetAddress: string, size: string, price: string): Promise<WriteTransactionResponse> => {
+  createSpotOrder = async (assetAddress: string, size: string, price: string): Promise<any> => {
     const baseToken = this.getTokenByAssetId(assetAddress);
     const baseAsset = this.getAssetFromToken(baseToken);
     const quoteToken = this.getTokenBySymbol("USDC");

src/assets/wallets/fuel.svg

@@ -1,11 +1,8 @@
-import { toast } from "react-toastify";
-import { Fuel, FuelWalletConnector } from "@fuel-wallet/sdk";
-import { Provider, Wallet, WalletLocked, WalletUnlocked } from "fuels";
+import { FuelWalletConnector } from "@fuels/connectors";
+import { Account, Fuel, Provider, Wallet, WalletLocked, WalletUnlocked } from "fuels";
 import { makeAutoObservable } from "mobx";
 import { Nullable } from "tsdef";
 
-import { createToast } from "@src/components/Toast";
-
 import { TOKENS_BY_ASSET_ID } from "./constants";
 import { NETWORK_ERROR, NetworkError } from "./NetworkError";
 
@@ -20,34 +17,26 @@ export class WalletManager {
 
   constructor() {
     makeAutoObservable(this);
-
-    this.fuel.on(this.fuel.events.currentAccount, this.onCurrentAccountChange);
   }
 
-  connect = async (): Promise<void> => {
-    const hasConnector = await this.fuel.hasConnector();
-
-    if (!hasConnector) {
-      throw new NetworkError(NETWORK_ERROR.NOT_CONNECTED);
-    }
-    const isApproved = await this.fuel.connect();
-
-    if (!isApproved) {
-      return;
-    }
-
-    let account = null;
+  setWallet = async (account: string, wallet?: Account | null) => {
+    let currentAccount: string | null = null;
     try {
-      account = await this.fuel.currentAccount();
+      currentAccount = await this.fuel.currentAccount();
     } catch (error) {
-      console.error("Not authorized");
+      console.error("Not authorized for fuel");
     }
-
-    if (!account) {
-      throw new NetworkError(NETWORK_ERROR.UNKNOWN_ACCOUNT);
+    if (currentAccount) {
+      try {
+        const fuelWallet = await this.fuel.getWallet(account);
+        this.wallet = fuelWallet as any;
+      } catch (err) {
+        console.error("There is no wallet for this account");
+      }
+    } else {
+      // for ethereum wallets should be another logic to connect
+      this.wallet = wallet as any;
     }
-
-    this.wallet = await this.fuel.getWallet(account);
     this.address = account;
   };
 
@@ -108,23 +97,4 @@ export class WalletManager {
 
     void this.fuel.disconnect();
   };
-
-  private onCurrentAccountChange = async (account: Nullable<string>) => {
-    if (account === null) {
-      try {
-        await this.connect();
-      } catch (error) {
-        if (error instanceof NetworkError) {
-          if (error.code === NETWORK_ERROR.UNKNOWN_ACCOUNT) {
-            toast(createToast({ text: "Please authorize the wallet account when connecting." }), { type: "info" });
-            return;
-          }
-        }
-      }
-      return;
-    }
-
-    this.wallet = await this.fuel.getWallet(account);
-    this.address = account;
-  };
 }

src/blockchain/FuelNetwork.ts

@@ -1,11 +1,12 @@
-import { OrderbookContracts } from "@compolabs/spark-orderbook-ts-sdk/dist/interface";
+// import { OrderbookContracts } from "@compolabs/spark-orderbook-ts-sdk/dist/interface";
+// TODO: add types from sdk after fixed export
 
 import TOKEN_LOGOS from "@src/constants/tokenLogos";
 import { Token } from "@src/entity/Token";
 
 import TOKENS_JSON from "./tokens.json";
 
-export const CONTRACT_ADDRESSES: OrderbookContracts = {
+export const CONTRACT_ADDRESSES: any = {
   spotMarket: "0x4a2ce054e3e94155f7092f7365b212f7f45105b74819c623744ebcc5d065c6ac",
   tokenFactory: "0x3141a3f11e3f784364d57860e3a4dcf9b73d42e23fd49038773cefb09c633348",
   pyth: "0x3cd5005f23321c8ae0ccfa98fb07d9a5ff325c483f21d2d9540d6897007600c9",

src/blockchain/WalletManager.ts

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styled from "@emotion/styled";
+import { useDisconnect } from "@fuels/react";
 import copy from "copy-to-clipboard";
 import { observer } from "mobx-react";
 
@@ -11,6 +12,7 @@ import copyIcon from "@src/assets/icons/copy.svg";
 import linkIcon from "@src/assets/icons/link.svg";
 import logoutIcon from "@src/assets/icons/logout.svg";
 import { FuelNetwork } from "@src/blockchain";
+import { useWallet } from "@src/hooks/useWallet";
 import BN from "@src/utils/BN";
 import { getExplorerLinkByAddress } from "@src/utils/getExplorerLink";
 import { useStores } from "@stores";
@@ -21,6 +23,9 @@ import ConnectedWalletButton from "./ConnectedWalletButton";
 
 const ConnectedWallet: React.FC = observer(() => {
   const { accountStore, notificationStore, balanceStore } = useStores();
+  const { address } = useWallet();
+  const { disconnect } = useDisconnect();
+
   const [isFocused, setIsFocused] = useState(false);
 
   const bcNetwork = FuelNetwork.getInstance();
@@ -31,10 +36,15 @@ const ConnectedWallet: React.FC = observer(() => {
   )?.toFormat(4);
 
   const handleAddressCopy = () => {
-    accountStore.address && copy(accountStore.address);
+    address && copy(address);
     notificationStore.toast(createToast({ text: "Your address was copied" }), { type: "info" });
   };
 
+  const disconnectWallet = () => {
+    disconnect();
+    accountStore.disconnect();
+  };
+
   const actions = [
     {
       icon: copyIcon,
@@ -44,13 +54,13 @@ const ConnectedWallet: React.FC = observer(() => {
     },
     {
       icon: linkIcon,
-      action: () => window.open(getExplorerLinkByAddress(accountStore.address!)),
+      action: () => window.open(getExplorerLinkByAddress(address)),
       title: "View in Explorer",
       active: true,
     },
     {
       icon: logoutIcon,
-      action: () => accountStore.disconnect(),
+      action: () => disconnect(),
       title: "Disconnect",
       active: true,
     },

src/blockchain/constants.ts

@@ -15,6 +15,8 @@ interface Props {
   onClick?: () => void;
 }
 
+// TODO: if user is connected with PK shows different address
+
 const ConnectedWalletButton: React.FC<Props> = observer(({ isFocused, className, onClick }) => {
   const { accountStore } = useStores();
 

src/components/Header/ConnectedWallet.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 import { observer } from "mobx-react";
@@ -9,9 +9,11 @@ import Tab from "@components/Tab";
 import { TEXT_TYPES } from "@components/Text";
 import { ReactComponent as Logo } from "@src/assets/icons/logo.svg";
 import { ReactComponent as Menu } from "@src/assets/icons/menu.svg";
+import { FuelNetwork } from "@src/blockchain";
 import { MENU_ITEMS } from "@src/constants";
 import useFlag from "@src/hooks/useFlag";
 import { useMedia } from "@src/hooks/useMedia";
+import { useWallet } from "@src/hooks/useWallet";
 import ConnectWalletDialog from "@src/screens/ConnectWallet";
 import { MODAL_TYPE } from "@src/stores/ModalStore";
 import { media } from "@src/themes/breakpoints";
@@ -26,14 +28,23 @@ import DepositWithdrawModal from "./DepositWithdrawModal";
 import MobileMenu from "./MobileMenu";
 
 const Header: React.FC = observer(() => {
-  const { tradeStore, accountStore, modalStore } = useStores();
+  const { tradeStore, modalStore, accountStore } = useStores();
+  const { address, wallet } = useWallet();
   const location = useLocation();
   const media = useMedia();
 
   const [isMobileMenuOpen, openMobileMenu, closeMobileMenu] = useFlag();
   const [isConnectDialogVisible, openConnectDialog, closeConnectDialog] = useFlag();
   const [isAccountInfoSheetOpen, openAccountInfo, closeAccountInfo] = useFlag();
 
+  useEffect(() => {
+    accountStore.setAddress(address);
+    if (address && wallet) {
+      const bcNetwork = FuelNetwork.getInstance();
+      bcNetwork.setWallet(address, wallet);
+    }
+  }, [address, wallet?.address]);
+
   const toggleMenu = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
 
@@ -45,7 +56,7 @@ const Header: React.FC = observer(() => {
   };
 
   const renderWallet = () => {
-    if (!accountStore.address) {
+    if (!address) {
       return (
         <WalletContainer>
           <Button fitContent green onClick={openConnectDialog}>
@@ -157,7 +168,9 @@ const Header: React.FC = observer(() => {
         onDepositWithdrawClick={() => modalStore.open(MODAL_TYPE.DEPOSIT_WITHDRAW_MODAL)}
         onWalletConnect={openConnectDialog}
       />
-      <ConnectWalletDialog visible={isConnectDialogVisible} onClose={closeConnectDialog} />
+      {isConnectDialogVisible ? (
+        <ConnectWalletDialog visible={isConnectDialogVisible} onClose={closeConnectDialog} />
+      ) : null}
       <AccountInfoSheet isOpen={isAccountInfoSheetOpen} onClose={closeAccountInfo} />
       <DepositWithdrawModal visible={modalStore.isOpen(MODAL_TYPE.DEPOSIT_WITHDRAW_MODAL)} onClose={modalStore.close} />
     </Root>

src/components/Header/ConnectedWalletButton.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { useDisconnect } from "@fuels/react";
 import copy from "copy-to-clipboard";
 
 import copyIcon from "@src/assets/icons/copy.svg";
 import linkIcon from "@src/assets/icons/link.svg";
 import logoutIcon from "@src/assets/icons/logout.svg";
 import { FuelNetwork } from "@src/blockchain";
+import { useWallet } from "@src/hooks/useWallet";
 import { useStores } from "@src/stores";
 import BN from "@src/utils/BN";
 import { getExplorerLinkByAddress } from "@src/utils/getExplorerLink";
@@ -23,6 +25,8 @@ interface Props {
 
 const AccountInfoSheet: React.FC<Props> = ({ isOpen, onClose }) => {
   const { accountStore, notificationStore, balanceStore } = useStores();
+  const { balance } = useWallet();
+  const { disconnect } = useDisconnect();
 
   const bcNetwork = FuelNetwork.getInstance();
 
@@ -39,6 +43,7 @@ const AccountInfoSheet: React.FC<Props> = ({ isOpen, onClose }) => {
 
   const handleDisconnect = () => {
     accountStore.disconnect();
+    disconnect();
     onClose();
   };
 

src/components/Header/Header.tsx

@@ -10,10 +10,16 @@ interface IProps {
   linkText?: string;
   hash?: string;
   address?: string;
+  url?: string;
 }
 
-const Toast: React.FC<IProps> = ({ text, linkText = "Open In Explorer", hash, address }) => {
-  const link = hash ? getExplorerLinkByHash(hash) : address ? getExplorerLinkByAddress(address) : undefined;
+const Toast: React.FC<IProps> = ({ text, linkText = "Open In Explorer", hash, address, url }) => {
+  let link = url;
+  if (hash) {
+    link = getExplorerLinkByHash(hash);
+  } else if (address) {
+    link = getExplorerLinkByAddress(address);
+  }
 
   return (
     <SmartFlex gap="8px" column>

src/components/Modal/AccountInfoSheet.tsx

@@ -1,3 +1,5 @@
+import { FueletWalletConnector, FuelWalletConnector } from "@fuels/connectors";
+
 export const ROUTES = {
   ROOT: "/",
   TRADE: "/:marketId",
@@ -25,3 +27,15 @@ export const MENU_ITEMS: Array<TMenuItem> = [
   { title: "GITHUB", link: "https://github.com/compolabs/spark" },
   { title: "TWITTER", link: "https://twitter.com/Sprkfi" },
 ];
+
+export const FUEL_CONFIG = {
+  connectors: [
+    new FuelWalletConnector(),
+    new FueletWalletConnector(),
+    // new WalletConnectConnector({
+    //   wagmiConfig,
+    //   projectId: WC_PROJECT_ID,
+    // }),
+    // new FuelWalletDevelopmentConnector(),
+  ],
+};