@aptos-labs/wallet-adapter-react 3.8.0 → 4.0.0

package/src/WalletProvider.tsx

@@ -1,29 +1,27 @@
-import { FC, ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { WalletContext } from "./useWallet";
-import type {
+import {
+  AvailableWallets,
+  DappConfig,
   AccountInfo,
+  AdapterWallet,
   NetworkInfo,
-  SignMessagePayload,
-  Wallet,
-  WalletInfo,
-  InputGenerateTransactionOptions,
+  InputTransactionData,
+  AptosSignAndSubmitTransactionOutput,
   AnyRawTransaction,
-  InputSubmitTransactionData,
+  InputGenerateTransactionOptions,
   AccountAuthenticator,
-  PendingTransactionResponse,
-  SignMessageResponse,
-  WalletName,
-  Types,
-  InputTransactionData,
+  AptosSignMessageInput,
+  AptosSignMessageOutput,
+  AdapterNotDetectedWallet,
+  WalletCore,
   Network,
-  AptosStandardSupportedWallet,
-  AvailableWallets,
+  InputSubmitTransactionData,
+  PendingTransactionResponse,
 } from "@aptos-labs/wallet-adapter-core";
-import { DappConfig, WalletCore } from "@aptos-labs/wallet-adapter-core";
+import { ReactNode, FC, useState, useEffect, useCallback } from "react";
+import { WalletContext } from "./useWallet";
 
 export interface AptosWalletProviderProps {
   children: ReactNode;
-  plugins?: ReadonlyArray<Wallet>;
   optInWallets?: ReadonlyArray<AvailableWallets>;
   autoConnect?: boolean;
   dappConfig?: DappConfig;
@@ -35,7 +33,7 @@ const initialState: {
   account: AccountInfo | null;
   network: NetworkInfo | null;
   connected: boolean;
-  wallet: WalletInfo | null;
+  wallet: AdapterWallet | null;
 } = {
   connected: false,
   account: null,
@@ -43,46 +41,30 @@ const initialState: {
   wallet: null,
 };
 
-/**
- * Supported props to pass into the provider
- *
- * @param plugins Non AIP-62 supported wallet plugins array
- * @param optInWallets AIP-62 supported wallet names array to only include in the adapter wallets
- * @param autoConnect A boolean flag to indicate if the adapter should auto connect to a wallet
- * @param dappConfig The dapp configurations to be used by SDK wallets to set their configurations
- * @param disableTelemetry A boolean flag to disable the adapter telemetry tool
- * @param onError A callback function to execute when there is an error in the adapter
- *
- */
 export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
   children,
-  plugins,
   optInWallets,
   autoConnect = false,
   dappConfig,
   disableTelemetry = false,
   onError,
 }: AptosWalletProviderProps) => {
-  const [{ connected, account, network, wallet }, setState] =
+  const [{ account, network, connected, wallet }, setState] =
     useState(initialState);
 
-  // a local state to track whether wallet connect request is loading
-  // https://github.com/aptos-labs/aptos-wallet-adapter/issues/94
   const [isLoading, setIsLoading] = useState<boolean>(true);
-
   const [walletCore, setWalletCore] = useState<WalletCore>();
 
-  const [wallets, setWallets] = useState<
-    ReadonlyArray<Wallet | AptosStandardSupportedWallet>
-  >(plugins ?? []);
-
+  const [wallets, setWallets] = useState<ReadonlyArray<AdapterWallet>>([]);
+  const [notDetectedWallets, setNotDetectedWallets] = useState<
+    ReadonlyArray<AdapterNotDetectedWallet>
+  >([]);
   // Initialize WalletCore on first load
   useEffect(() => {
     const walletCore = new WalletCore(
-      plugins ?? [],
-      optInWallets ?? [],
+      optInWallets,
       dappConfig,
-      disableTelemetry,
+      disableTelemetry
     );
     setWalletCore(walletCore);
   }, []);
@@ -90,9 +72,21 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
   // Update initial Wallets state once WalletCore has been initialized
   useEffect(() => {
     setWallets(walletCore?.wallets ?? []);
+    setNotDetectedWallets(walletCore?.notDetectedWallets ?? []);
   }, [walletCore]);
 
-  const connect = async (walletName: WalletName) => {
+  useEffect(() => {
+    if (autoConnect) {
+      if (localStorage.getItem("AptosWalletName") && !connected) {
+        connect(localStorage.getItem("AptosWalletName") as string);
+      } else {
+        // if we dont use autoconnect set the connect is loading to false
+        setIsLoading(false);
+      }
+    }
+  }, [autoConnect, wallets]);
+
+  const connect = async (walletName: string): Promise<void> => {
     try {
       setIsLoading(true);
       await walletCore?.connect(walletName);
@@ -104,7 +98,7 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
     }
   };
 
-  const disconnect = async () => {
+  const disconnect = async (): Promise<void> => {
     try {
       await walletCore?.disconnect();
     } catch (error) {
@@ -113,73 +107,82 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
     }
   };
 
-  const signTransaction = async (
-    transaction: AnyRawTransaction | Types.TransactionPayload,
-    asFeePayer?: boolean,
-    options?: InputGenerateTransactionOptions,
-  ): Promise<AccountAuthenticator> => {
-    if (!walletCore) {
-      throw new Error("WalletCore is not initialized");
-    }
+  const signAndSubmitTransaction = async (
+    transaction: InputTransactionData
+  ): Promise<AptosSignAndSubmitTransactionOutput> => {
     try {
-      return await walletCore?.signTransaction(
-        transaction,
-        asFeePayer,
-        options,
-      );
+      if (!walletCore) {
+        throw new Error("WalletCore is not initialized");
+      }
+      return await walletCore.signAndSubmitTransaction(transaction);
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);
     }
   };
 
-  const signMessage = async (
-    message: SignMessagePayload,
-  ): Promise<SignMessageResponse> => {
+  const signTransaction = async (args: {
+    transactionOrPayload: AnyRawTransaction | InputTransactionData;
+    asFeePayer?: boolean;
+    options?: InputGenerateTransactionOptions & {
+      expirationSecondsFromNow?: number;
+      expirationTimestamp?: number;
+    };
+  }): Promise<{
+    authenticator: AccountAuthenticator;
+    rawTransaction: Uint8Array;
+  }> => {
+    const { transactionOrPayload, asFeePayer, options } = args;
     if (!walletCore) {
       throw new Error("WalletCore is not initialized");
     }
     try {
-      return await walletCore?.signMessage(message);
+      return await walletCore.signTransaction({
+        transactionOrPayload,
+        asFeePayer,
+      });
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);
     }
   };
 
-  const signMessageAndVerify = async (
-    message: SignMessagePayload,
-  ): Promise<boolean> => {
+  const submitTransaction = async (
+    transaction: InputSubmitTransactionData
+  ): Promise<PendingTransactionResponse> => {
     if (!walletCore) {
       throw new Error("WalletCore is not initialized");
     }
     try {
-      return await walletCore?.signMessageAndVerify(message);
+      return await walletCore?.submitTransaction(transaction);
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);
     }
   };
 
-  const submitTransaction = async (
-    transaction: InputSubmitTransactionData,
-  ): Promise<PendingTransactionResponse> => {
+  const signMessage = async (
+    message: AptosSignMessageInput
+  ): Promise<AptosSignMessageOutput> => {
     if (!walletCore) {
       throw new Error("WalletCore is not initialized");
     }
     try {
-      return await walletCore?.submitTransaction(transaction);
+      return await walletCore?.signMessage(message);
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);
     }
   };
 
-  const signAndSubmitTransaction = async (
-    transaction: InputTransactionData,
-  ) => {
+  const signMessageAndVerify = async (
+    message: AptosSignMessageInput
+  ): Promise<boolean> => {
+    if (!walletCore) {
+      throw new Error("WalletCore is not initialized");
+    }
     try {
-      return await walletCore?.signAndSubmitTransaction(transaction);
+      return await walletCore?.signMessageAndVerify(message);
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);
@@ -198,26 +201,8 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
     }
   };
 
-  useEffect(() => {
-    if (autoConnect) {
-      if (localStorage.getItem("AptosWalletName") && !connected) {
-        connect(localStorage.getItem("AptosWalletName") as WalletName);
-      } else {
-        // if we dont use autoconnect set the connect is loading to false
-        setIsLoading(false);
-      }
-    }
-  }, [autoConnect, wallets]);
-
-  useEffect(() => {
-    if (connected) {
-      walletCore?.onAccountChange();
-      walletCore?.onNetworkChange();
-    }
-  }, [connected]);
-
   // Handle the adapter's connect event
-  const handleConnect = () => {
+  const handleConnect = (): void => {
     setState((state) => {
       return {
         ...state,
@@ -229,63 +214,56 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
     });
   };
 
-  // Handle the adapter's disconnect event
-  const handleDisconnect = () => {
+  // Handle the adapter's account change event
+  const handleAccountChange = useCallback((): void => {
     if (!connected) return;
+    if (!walletCore?.wallet) return;
     setState((state) => {
       return {
         ...state,
-        connected: false,
         account: walletCore?.account || null,
-        network: walletCore?.network || null,
-        wallet: null,
       };
     });
-  };
+  }, [connected]);
 
-  // Handle the adapter's account change event
-  const handleAccountChange = useCallback(() => {
+  // Handle the adapter's network event
+  const handleNetworkChange = useCallback((): void => {
     if (!connected) return;
     if (!walletCore?.wallet) return;
     setState((state) => {
       return {
         ...state,
-        account: walletCore?.account || null,
+        network: walletCore?.network || null,
       };
     });
   }, [connected]);
 
-  // Handle the adapter's network event
-  const handleNetworkChange = useCallback(() => {
+  useEffect(() => {
+    if (connected) {
+      walletCore?.onAccountChange();
+      walletCore?.onNetworkChange();
+    }
+  }, [connected]);
+
+  // Handle the adapter's disconnect event
+  const handleDisconnect = (): void => {
     if (!connected) return;
-    if (!walletCore?.wallet) return;
     setState((state) => {
       return {
         ...state,
+        connected: false,
+        account: walletCore?.account || null,
         network: walletCore?.network || null,
+        wallet: null,
       };
     });
-  }, [connected]);
-
-  const handleReadyStateChange = (updatedWallet: Wallet) => {
-    // Create a new array with updated values
-    const updatedWallets = (wallets as Wallet[])?.map((wallet) => {
-      if (wallet.name === updatedWallet.name) {
-        // Return a new object with updated value
-        return { ...wallet, readyState: updatedWallet.readyState };
-      }
-      return wallet;
-    });
-    setWallets(updatedWallets);
   };
 
-  const handleStandardWalletsAdded = (
-    standardWallet: Wallet | AptosStandardSupportedWallet,
-  ) => {
+  const handleStandardWalletsAdded = (standardWallet: AdapterWallet): void => {
     // Manage current wallet state by removing optional duplications
     // as new wallets are coming
     const existingWalletIndex = wallets.findIndex(
-      (wallet) => wallet.name == standardWallet.name,
+      (wallet) => wallet.name == standardWallet.name
     );
     if (existingWalletIndex !== -1) {
       // If wallet exists, replace it with the new wallet
@@ -300,40 +278,67 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
     }
   };
 
+  const handleStandardNotDetectedWalletsAdded = (
+    notDetectedWallet: AdapterNotDetectedWallet
+  ): void => {
+    // Manage current wallet state by removing optional duplications
+    // as new wallets are coming
+    const existingWalletIndex = wallets.findIndex(
+      (wallet) => wallet.name == notDetectedWallet.name
+    );
+    if (existingWalletIndex !== -1) {
+      // If wallet exists, replace it with the new wallet
+      setNotDetectedWallets((wallets) => [
+        ...wallets.slice(0, existingWalletIndex),
+        notDetectedWallet,
+        ...wallets.slice(existingWalletIndex + 1),
+      ]);
+    } else {
+      // If wallet doesn't exist, add it to the array
+      setNotDetectedWallets((wallets) => [...wallets, notDetectedWallet]);
+    }
+  };
+
   useEffect(() => {
     walletCore?.on("connect", handleConnect);
-    walletCore?.on("disconnect", handleDisconnect);
     walletCore?.on("accountChange", handleAccountChange);
     walletCore?.on("networkChange", handleNetworkChange);
-    walletCore?.on("readyStateChange", handleReadyStateChange);
+    walletCore?.on("disconnect", handleDisconnect);
     walletCore?.on("standardWalletsAdded", handleStandardWalletsAdded);
+    walletCore?.on(
+      "standardNotDetectedWalletAdded",
+      handleStandardNotDetectedWalletsAdded
+    );
     return () => {
       walletCore?.off("connect", handleConnect);
-      walletCore?.off("disconnect", handleDisconnect);
       walletCore?.off("accountChange", handleAccountChange);
       walletCore?.off("networkChange", handleNetworkChange);
-      walletCore?.off("readyStateChange", handleReadyStateChange);
+      walletCore?.off("disconnect", handleDisconnect);
       walletCore?.off("standardWalletsAdded", handleStandardWalletsAdded);
+      walletCore?.off(
+        "standardNotDetectedWalletAdded",
+        handleStandardNotDetectedWalletsAdded
+      );
     };
   }, [wallets, account]);
-
   return (
     <WalletContext.Provider
       value={{
         connect,
-        account,
-        network,
-        connected,
         disconnect,
-        wallet,
-        wallets,
         signAndSubmitTransaction,
         signTransaction,
         signMessage,
         signMessageAndVerify,
-        isLoading,
-        submitTransaction,
         changeNetwork,
+        submitTransaction,
+        account,
+        network,
+        connected,
+        wallet,
+        wallets,
+        notDetectedWallets,
+        isLoading,
       }}
     >
       {children}

package/src/components/WalletItem.tsx

@@ -1,5 +1,6 @@
 import {
-  AnyAptosWallet,
+  AdapterNotDetectedWallet,
+  AdapterWallet,
   WalletReadyState,
   isRedirectable,
 } from "@aptos-labs/wallet-adapter-core";
@@ -10,7 +11,7 @@ import { HeadlessComponentProps, createHeadlessComponent } from "./utils";
 
 export interface WalletItemProps extends HeadlessComponentProps {
   /** The wallet option to be displayed. */
-  wallet: AnyAptosWallet;
+  wallet: AdapterWallet | AdapterNotDetectedWallet;
   /** A callback to be invoked when the wallet is connected. */
   onConnect?: () => void;
 }
@@ -26,7 +27,7 @@ function useWalletItemContext(displayName: string) {
 }
 
 const WalletItemContext = createContext<{
-  wallet: AnyAptosWallet;
+  wallet: AdapterWallet | AdapterNotDetectedWallet;
   connectWallet: () => void;
 } | null>(null);
 
@@ -39,9 +40,7 @@ const Root = forwardRef<HTMLDivElement, WalletItemProps>(
       onConnect?.();
     }, [connect, wallet.name, onConnect]);
 
-    const isWalletReady =
-      wallet.readyState === WalletReadyState.Installed ||
-      wallet.readyState === WalletReadyState.Loadable;
+    const isWalletReady = wallet.readyState === WalletReadyState.Installed;
 
     const mobileSupport =
       "deeplinkProvider" in wallet && wallet.deeplinkProvider;
@@ -57,7 +56,7 @@ const Root = forwardRef<HTMLDivElement, WalletItemProps>(
         </Component>
       </WalletItemContext.Provider>
     );
-  },
+  }
 );
 Root.displayName = "WalletItem";
 
@@ -71,7 +70,7 @@ const Icon = createHeadlessComponent(
       src: context.wallet.icon,
       alt: `${context.wallet.name} icon`,
     };
-  },
+  }
 );
 
 const Name = createHeadlessComponent(
@@ -83,7 +82,7 @@ const Name = createHeadlessComponent(
     return {
       children: context.wallet.name,
     };
-  },
+  }
 );
 
 const ConnectButton = createHeadlessComponent(
@@ -96,7 +95,7 @@ const ConnectButton = createHeadlessComponent(
       onClick: context.connectWallet,
       children: "Connect",
     };
-  },
+  }
 );
 
 const InstallLink = createHeadlessComponent(
@@ -111,7 +110,7 @@ const InstallLink = createHeadlessComponent(
       rel: "noopener noreferrer",
       children: "Install",
     };
-  },
+  }
 );
 
 /** A headless component for rendering a wallet option's name, icon, and either connect button or install link. */

package/src/useWallet.tsx

@@ -1,45 +1,47 @@
+import { useContext, createContext } from "react";
 import {
+  AccountAuthenticator,
   AccountInfo,
-  NetworkInfo,
-  WalletInfo,
-  SignMessagePayload,
-  SignMessageResponse,
-  Wallet,
-  InputGenerateTransactionOptions,
+  AdapterWallet,
   AnyRawTransaction,
+  AptosSignAndSubmitTransactionOutput,
   InputTransactionData,
-  InputSubmitTransactionData,
-  PendingTransactionResponse,
-  AccountAuthenticator,
-  Types,
-  WalletName,
-  AptosChangeNetworkOutput,
+  NetworkInfo,
+  AptosSignMessageInput,
+  AptosSignMessageOutput,
+  AdapterNotDetectedWallet,
   Network,
-  AptosStandardSupportedWallet,
+  AptosChangeNetworkOutput,
+  PendingTransactionResponse,
+  InputSubmitTransactionData,
 } from "@aptos-labs/wallet-adapter-core";
-import { createContext, useContext } from "react";
 
 export interface WalletContextState {
   connected: boolean;
   isLoading: boolean;
   account: AccountInfo | null;
   network: NetworkInfo | null;
-  connect(walletName: WalletName): void;
+  connect(walletName: string): void;
+  signAndSubmitTransaction(
+    transaction: InputTransactionData
+  ): Promise<AptosSignAndSubmitTransactionOutput>;
+  signTransaction(args: {
+    transactionOrPayload: AnyRawTransaction | InputTransactionData;
+    asFeePayer?: boolean;
+  }): Promise<{
+    authenticator: AccountAuthenticator;
+    rawTransaction: Uint8Array;
+  }>;
+  signMessage(message: AptosSignMessageInput): Promise<AptosSignMessageOutput>;
+  signMessageAndVerify(message: AptosSignMessageInput): Promise<boolean>;
   disconnect(): void;
-  wallet: WalletInfo | null;
-  wallets?: ReadonlyArray<Wallet | AptosStandardSupportedWallet>;
-  signAndSubmitTransaction(transaction: InputTransactionData): Promise<any>;
-  signTransaction(
-    transactionOrPayload: AnyRawTransaction | Types.TransactionPayload,
-    asFeePayer?: boolean,
-    options?: InputGenerateTransactionOptions,
-  ): Promise<AccountAuthenticator>;
+  changeNetwork(network: Network): Promise<AptosChangeNetworkOutput>;
   submitTransaction(
-    transaction: InputSubmitTransactionData,
+    transaction: InputSubmitTransactionData
   ): Promise<PendingTransactionResponse>;
-  signMessage(message: SignMessagePayload): Promise<SignMessageResponse>;
-  signMessageAndVerify(message: SignMessagePayload): Promise<boolean>;
-  changeNetwork(network: Network): Promise<AptosChangeNetworkOutput>;
+  wallet: AdapterWallet | null;
+  wallets: ReadonlyArray<AdapterWallet>;
+  notDetectedWallets: ReadonlyArray<AdapterNotDetectedWallet>;
 }
 
 const DEFAULT_CONTEXT = {
@@ -47,7 +49,7 @@ const DEFAULT_CONTEXT = {
 };
 
 export const WalletContext = createContext<WalletContextState>(
-  DEFAULT_CONTEXT as WalletContextState,
+  DEFAULT_CONTEXT as WalletContextState
 );
 
 export function useWallet(): WalletContextState {