Merge pull request #81 from compolabs/fix/1227-pk

[1227] Connection using pk
compolabs · Jul 3, 2024 · fe7ed2b · fe7ed2b
2 parents 2146dc7 + b66afd2
commit fe7ed2b
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "framer-motion": "^11.0.3",
-    "fuels": "^0.89.0",
+    "fuels": "^0.90.0",
     "gh-pages": "^6.1.1",
     "lodash": "^4.17.21",
     "mobx": "^6.12.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/blockchain/FuelNetwork.ts b/src/blockchain/FuelNetwork.ts
@@ -7,7 +7,7 @@ import SparkOrderBookSdk, {
   UserMarketBalance,
   WriteTransactionResponse,
 } from "@compolabs/spark-orderbook-ts-sdk";
-import { Bech32Address } from "fuels";
+import { Account, Bech32Address } from "fuels";
 import { makeObservable } from "mobx";
 import { Nullable } from "tsdef";
 
@@ -92,13 +92,19 @@ export class FuelNetwork {
     return TOKENS_BY_ASSET_ID[assetId.toLowerCase()];
   };
 
-  setWallet = async (account: string, wallet?: any): Promise<void> => {
-    await this.walletManager.setWallet(account, wallet);
+  // setWallet = async (account: string, wallet?: any): Promise<void> => {
+  //   await this.walletManager.setWallet(account, wallet);
+  //   this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined);
+  // };
+
+  connect = async (wallet: Account): Promise<void> => {
+    await this.walletManager.connect(wallet);
     this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined);
   };
 
   connectWalletByPrivateKey = async (privateKey: string): Promise<void> => {
-    await this.walletManager.connectByPrivateKey(privateKey, (await this.orderbookSdk.getProvider()) as any);
+    const provider = await this.orderbookSdk.getProvider();
+    await this.walletManager.connectByPrivateKey(privateKey, provider);
     this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined);
   };
 

diff --git a/src/blockchain/WalletManager.ts b/src/blockchain/WalletManager.ts
@@ -8,7 +8,7 @@ import { NETWORK_ERROR, NetworkError } from "./NetworkError";
 
 export class WalletManager {
   public address: Nullable<string> = null;
-  public wallet: Nullable<WalletLocked | WalletUnlocked> = null;
+  public wallet: Nullable<Account | WalletLocked | WalletUnlocked> = null;
   public privateKey: Nullable<string> = null;
 
   private fuel = new Fuel({
@@ -19,30 +19,38 @@ export class WalletManager {
     makeAutoObservable(this);
   }
 
-  setWallet = async (account: string, wallet?: Account | null) => {
-    let currentAccount: string | null = null;
-    try {
-      currentAccount = await this.fuel.currentAccount();
-    } catch (error) {
-      console.error("Not authorized for fuel");
-    }
-    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.address = account;
+  // setWallet = async (account: string, wallet?: Account | null) => {
+  //   let currentAccount: string | null = null;
+  //   try {
+  //     currentAccount = await this.fuel.currentAccount();
+  //   } catch (error) {
+  //     console.error("Not authorized for fuel");
+  //   }
+  //   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.address = account;
+  // };
+
+  connect = async (wallet: Account) => {
+    this.address = wallet.address.toString();
+    this.wallet = wallet;
   };
 
   connectByPrivateKey = async (privateKey: string, provider: Provider): Promise<void> => {
+    console.log("wtf", privateKey);
     const wallet = Wallet.fromPrivateKey(privateKey, provider);
 
+    console.log(wallet);
+
     this.privateKey = privateKey;
     this.address = wallet.address.toString();
     this.wallet = wallet;

diff --git a/src/components/Header/ConnectedWallet.tsx b/src/components/Header/ConnectedWallet.tsx
@@ -22,7 +22,7 @@ import ConnectedWalletButton from "./ConnectedWalletButton";
 
 const ConnectedWallet: React.FC = observer(() => {
   const { accountStore, notificationStore, balanceStore } = useStores();
-  const { address, disconnect } = useWallet();
+  const { disconnect } = useWallet();
 
   const [isFocused, setIsFocused] = useState(false);
 
@@ -34,7 +34,7 @@ const ConnectedWallet: React.FC = observer(() => {
   )?.toFormat(4);
 
   const handleAddressCopy = () => {
-    address && copy(address);
+    accountStore.address && copy(accountStore.address);
     notificationStore.toast(createToast({ text: "Your address was copied" }), { type: "info" });
   };
 
@@ -52,7 +52,7 @@ const ConnectedWallet: React.FC = observer(() => {
     },
     {
       icon: linkIcon,
-      action: () => window.open(getExplorerLinkByAddress(address)),
+      action: () => accountStore.address && window.open(getExplorerLinkByAddress(accountStore.address)),
       title: "View in Explorer",
       active: true,
     },

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -9,7 +9,6 @@ import Tab from "@components/Tab";
 import { TEXT_TYPES } from "@components/Text";
 import Logo from "@src/assets/icons/logo.svg?react";
 import Menu from "@src/assets/icons/menu.svg?react";
-import { FuelNetwork } from "@src/blockchain";
 import { MENU_ITEMS } from "@src/constants";
 import useFlag from "@src/hooks/useFlag";
 import { useMedia } from "@src/hooks/useMedia";
@@ -29,25 +28,21 @@ import MobileMenu from "./MobileMenu";
 
 const Header: React.FC = observer(() => {
   const { tradeStore, modalStore, accountStore } = useStores();
-  const { address, wallet } = useWallet();
+  const { isConnected, wallet } = useWallet();
   const location = useLocation();
   const media = useMedia();
 
   const [isMobileMenuOpen, openMobileMenu, closeMobileMenu] = useFlag();
   const [isConnectDialogVisible, openConnectDialog, closeConnectDialog] = useFlag();
   const [isAccountInfoSheetOpen, openAccountInfo, closeAccountInfo] = useFlag();
 
+  console.log(accountStore.address);
+
   useEffect(() => {
-    accountStore.setAddress(address);
-    if (address && wallet) {
-      const setWallet = async () => {
-        const bcNetwork = FuelNetwork.getInstance();
-        await bcNetwork.setWallet(address, wallet);
-      };
-
-      setWallet();
-    }
-  }, [address, wallet?.address]);
+    if (!isConnected || !wallet) return;
+
+    accountStore.connect(wallet);
+  }, [isConnected]);
 
   const toggleMenu = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -60,7 +55,7 @@ const Header: React.FC = observer(() => {
   };
 
   const renderWallet = () => {
-    if (!address) {
+    if (!accountStore.address) {
       return (
         <WalletContainer>
           <Button fitContent green onClick={openConnectDialog}>

diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
@@ -1,12 +1,5 @@
 import { useEffect, useState } from "react";
-import {
-  useAccount,
-  useBalance,
-  useConnectUI,
-  useFuel,
-  useIsConnected,
-  useWallet as useFuelWallet,
-} from "@fuels/react";
+import { useAccount, useConnectUI, useFuel, useIsConnected, useWallet as useFuelWallet } from "@fuels/react";
 import { useDisconnect } from "@fuels/react";
 
 interface ICurrentConnector {
@@ -30,7 +23,7 @@ export const useWallet = () => {
 
   const { wallet, refetch: refetchWallet } = useFuelWallet(address);
 
-  const { balance, isLoading: isLoadingBalance, isFetching: isFetchingBalance } = useBalance({ address });
+  // const { balance, isLoading: isLoadingBalance, isFetching: isFetchingBalance } = useBalance({ address });
 
   const [currentConnector, setCurrentConnector] = useState<ICurrentConnector>(DEFAULT_CONNECTOR);
 
@@ -56,14 +49,14 @@ export const useWallet = () => {
     setCurrentConnector({ logo, title });
   }, [fuel.currentConnector, isConnected]);
 
-  const isLoading = [isLoadingAccount, isLoadingBalance].some(Boolean);
+  const isLoading = [isLoadingAccount].some(Boolean);
 
-  const isFetching = [isFetchingAccount, isFetchingBalance].some(Boolean);
+  const isFetching = [isFetchingAccount].some(Boolean);
 
   return {
-    address,
-    account,
-    balance,
+    // address,
+    // account,
+    // balance,
     currentConnector,
     isConnected,
     isConnecting,

diff --git a/src/stores/AccountStore.ts b/src/stores/AccountStore.ts
@@ -1,4 +1,5 @@
-import { Address } from "fuels";
+const bcNetwork = FuelNetwork.getInstance();
+import { Account, Address } from "fuels";
 import { makeAutoObservable } from "mobx";
 import { Nullable } from "tsdef";
 
@@ -9,11 +10,9 @@ import RootStore from "./RootStore";
 
 export interface ISerializedAccountStore {
   privateKey: Nullable<string>;
-  address: Nullable<string>;
 }
 
 class AccountStore {
-  public address: Nullable<string> = null;
   initialized = false;
 
   constructor(
@@ -36,6 +35,17 @@ class AccountStore {
     this.initialized = true;
   };
 
+  connect = async (wallet: Account) => {
+    const { notificationStore } = this.rootStore;
+    const bcNetwork = FuelNetwork.getInstance();
+
+    try {
+      await bcNetwork?.connect(wallet);
+    } catch (error: any) {
+      notificationStore.toast(createToast({ text: "Unexpected error. Please try again." }), { type: "error" });
+    }
+  };
+
   connectWalletByPrivateKey = async (privateKey: string) => {
     // TODO: set address
     const { notificationStore } = this.rootStore;
@@ -60,25 +70,31 @@ class AccountStore {
     bcNetwork?.disconnectWallet();
   };
 
-  setAddress = (address: string) => {
-    this.address = address;
-  };
+  get address() {
+    const bcNetwork = FuelNetwork.getInstance();
+
+    return bcNetwork.getAddress();
+  }
 
   get address0x() {
-    const address = new Address(this.address as any).toB256();
+    const bcNetwork = FuelNetwork.getInstance();
+
+    const address = new Address(bcNetwork.getAddress() as any).toB256();
     return address;
   }
 
   get isConnected() {
-    return !!this.address;
+    const bcNetwork = FuelNetwork.getInstance();
+
+    return !!bcNetwork.getAddress();
   }
 
   serialize = (): ISerializedAccountStore => {
     const bcNetwork = FuelNetwork.getInstance();
 
     return {
-      privateKey: bcNetwork?.getPrivateKey() ?? null,
-      address: this.address,
+      privateKey: bcNetwork.getPrivateKey() ?? null,
+      // address: bcNetwork.getAddress() ?? null,
     };
   };
 }