@aptos-labs/wallet-adapter-react 0.0.0-aip-62-20240325204648

package/READMEV1.md

@@ -0,0 +1,267 @@
+> **_NOTE:_** This documentation is for Wallet Adapter `v^1.*.*`
+
+# Wallet Adapter React Provider
+
+A react provider wrapper for the Aptos Wallet Adapter
+
+Dapps that want to use the adapter should install this package and other supported wallet packages.
+
+### Support
+
+The react provider supports all [wallet standard](https://aptos.dev/guides/wallet-standard) functions and feature functions
+
+##### Standard functions
+
+```
+connect
+disconnect
+connected
+account
+network
+signAndSubmitTransaction
+signMessage
+```
+
+##### Feature functions - functions that may not be supported by all wallets
+
+```
+signTransaction
+signMessageAndVerify
+signAndSubmitBCSTransaction
+```
+
+### Usage
+
+#### Install Dependencies
+
+Install wallet dependencies you want to include in your app.
+To do that, you can look at our [supported wallets list](https://github.com/aptos-labs/aptos-wallet-adapter#supported-wallet-packages). Each wallet is a link to npm package where you can install it from.
+
+Next, install the `@aptos-labs/wallet-adapter-react`
+
+```
+pnpm i @aptos-labs/wallet-adapter-react
+```
+
+using npm
+
+```
+npm i @aptos-labs/wallet-adapter-react
+```
+
+#### Import dependencies
+
+On the `App.jsx` file,
+
+Import the installed wallets.
+
+```js
+import { SomeAptosWallet } from "some-aptos-wallet-package";
+```
+
+Import the `AptosWalletAdapterProvider`.
+
+```js
+import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
+```
+
+Wrap your app with the Provider, pass it the `plugins (wallets)` you want to have on your app as an array and a `autoConnect` option (set to false by default)
+
+```js
+const wallets = [new AptosWallet()];
+
+<AptosWalletAdapterProvider
+  plugins={wallets}
+  autoConnect={true}
+  onError={(error) => {
+    console.log("error", error);
+  }}
+>
+  <App />
+</AptosWalletAdapterProvider>;
+```
+
+#### Use Wallet
+
+On any page you want to use the wallet props, import `useWallet` from `@aptos-labs/wallet-adapter-react`
+
+```js
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+```
+
+Then you can use the exported properties
+
+```js
+const {
+  connect,
+  account,
+  network,
+  connected,
+  disconnect,
+  wallet,
+  wallets,
+  signAndSubmitTransaction,
+  signAndSubmitBCSTransaction,
+  signTransaction,
+  signMessage,
+  signMessageAndVerify,
+} = useWallet();
+```
+
+### Use a UI package (recommended)
+
+As part of the wallet adapter repo we provide a wallet connect UI package that provides a wallet connect button and a wallet select modal.
+You can find it [here](../wallet-adapter-ant-design/) with instructions on how to use it.
+
+#### Examples
+
+##### connect(walletName)
+
+```js
+const onConnect = async (walletName) => {
+  await connect(walletName);
+};
+
+<button onClick={() => onConnect(wallet.name)}>{wallet.name}</button>;
+```
+
+##### disconnect()
+
+```js
+<button onClick={disconnect}>Disconnect</button>
+```
+
+##### signAndSubmitTransaction(payload)
+
+```js
+  const onSignAndSubmitTransaction = async () => {
+    const payload: Types.TransactionPayload = {
+      type: "entry_function_payload",
+      function: "0x1::coin::transfer",
+      type_arguments: ["0x1::aptos_coin::AptosCoin"],
+      arguments: [account?.address, 1], // 1 is in Octas
+    };
+    const response = await signAndSubmitTransaction(payload);
+    // if you want to wait for transaction
+    try {
+      await aptosClient.waitForTransaction(response?.hash || "");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+<button onClick={onSignAndSubmitTransaction}>
+  Sign and submit transaction
+</button>
+```
+
+##### signAndSubmitBCSTransaction(payload)
+
+```js
+   const onSignAndSubmitBCSTransaction = async () => {
+    const token = new TxnBuilderTypes.TypeTagStruct(
+      TxnBuilderTypes.StructTag.fromString("0x1::aptos_coin::AptosCoin")
+    );
+    const entryFunctionBCSPayload =
+      new TxnBuilderTypes.TransactionPayloadEntryFunction(
+        TxnBuilderTypes.EntryFunction.natural(
+          "0x1::coin",
+          "transfer",
+          [token],
+          [
+            BCS.bcsToBytes(
+              TxnBuilderTypes.AccountAddress.fromHex(account!.address)
+            ),
+            BCS.bcsSerializeUint64(2),
+          ]
+        )
+      );
+
+    const response = await signAndSubmitBCSTransaction(entryFunctionBCSPayload);
+    // if you want to wait for transaction
+    try {
+      await aptosClient.waitForTransaction(response?.hash || "");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+<button onClick={onSignAndSubmitTransaction}>
+  Sign and submit BCS transaction
+</button>
+```
+
+##### signMessage(payload)
+
+```js
+const onSignMessage = async () => {
+  const payload = {
+    message: "Hello from Aptos Wallet Adapter",
+    nonce: "random_string",
+  };
+  const response = await signMessage(payload);
+};
+
+<button onClick={onSignMessage}>Sign message</button>;
+```
+
+##### Account
+
+```js
+<div>{account?.address}</div>
+<div>{account?.publicKey}</div>
+```
+
+##### Network
+
+```js
+<div>{network?.name}</div>
+```
+
+##### Wallet
+
+```js
+<div>{wallet?.name}</div>
+<div>{wallet?.icon}</div>
+<div>{wallet?.url}</div>
+```
+
+##### Wallets
+
+```js
+{
+  wallets.map((wallet) => <p>{wallet.name}</p>);
+}
+```
+
+##### signTransaction(payload)
+
+```js
+  const onSignTransaction = async () => {
+    const payload: Types.TransactionPayload = {
+      type: "entry_function_payload",
+      function: "0x1::coin::transfer",
+      type_arguments: ["0x1::aptos_coin::AptosCoin"],
+      arguments: [account?.address, 1], // 1 is in Octas
+    };
+    const response = await signTransaction(payload);
+  };
+
+<button onClick={onSignTransaction}>
+  Sign transaction
+</button>
+```
+
+##### signMessageAndVerify(payload)
+
+```js
+const onSignMessageAndVerify = async () => {
+  const payload = {
+    message: "Hello from Aptos Wallet Adapter",
+    nonce: "random_string",
+  };
+  const response = await signMessageAndVerify(payload);
+};
+
+<button onClick={onSignMessageAndVerify}>Sign message and verify</button>;
+```

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { AccountInfo, NetworkInfo, WalletName, WalletInfo, Wallet, InputTransactionData, AnyRawTransaction, Types, InputGenerateTransactionOptions, AccountAuthenticator, InputSubmitTransactionData, PendingTransactionResponse, SignMessagePayload, SignMessageResponse } from '@aptos-labs/wallet-adapter-core';
+export { InputTransactionData, NetworkName, Wallet, WalletName, WalletReadyState, isInAppBrowser, isMobile, isRedirectable } from '@aptos-labs/wallet-adapter-core';
+import { ReactNode, FC } from 'react';
+
+interface WalletContextState {
+    connected: boolean;
+    isLoading: boolean;
+    account: AccountInfo | null;
+    network: NetworkInfo | null;
+    connect(walletName: WalletName): void;
+    disconnect(): void;
+    wallet: WalletInfo | null;
+    wallets?: ReadonlyArray<Wallet>;
+    signAndSubmitTransaction(transaction: InputTransactionData): Promise<any>;
+    signTransaction(transactionOrPayload: AnyRawTransaction | Types.TransactionPayload, asFeePayer?: boolean, options?: InputGenerateTransactionOptions): Promise<AccountAuthenticator>;
+    submitTransaction(transaction: InputSubmitTransactionData): Promise<PendingTransactionResponse>;
+    signMessage(message: SignMessagePayload): Promise<SignMessageResponse>;
+    signMessageAndVerify(message: SignMessagePayload): Promise<boolean>;
+}
+declare function useWallet(): WalletContextState;
+
+interface AptosWalletProviderProps {
+    children: ReactNode;
+    plugins?: ReadonlyArray<Wallet>;
+    autoConnect?: boolean;
+    onError?: (error: any) => void;
+}
+declare const AptosWalletAdapterProvider: FC<AptosWalletProviderProps>;
+
+export { AptosWalletAdapterProvider, AptosWalletProviderProps, useWallet };

package/dist/index.js

@@ -0,0 +1,265 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  AptosWalletAdapterProvider: () => AptosWalletAdapterProvider,
+  NetworkName: () => import_wallet_adapter_core2.NetworkName,
+  WalletReadyState: () => import_wallet_adapter_core2.WalletReadyState,
+  isInAppBrowser: () => import_wallet_adapter_core2.isInAppBrowser,
+  isMobile: () => import_wallet_adapter_core2.isMobile,
+  isRedirectable: () => import_wallet_adapter_core2.isRedirectable,
+  useWallet: () => useWallet
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useWallet.tsx
+var import_react = require("react");
+var DEFAULT_CONTEXT = {
+  connected: false
+};
+var WalletContext = (0, import_react.createContext)(
+  DEFAULT_CONTEXT
+);
+function useWallet() {
+  const context = (0, import_react.useContext)(WalletContext);
+  if (!context) {
+    throw new Error("useWallet must be used within a WalletContextState");
+  }
+  return context;
+}
+
+// src/WalletProvider.tsx
+var import_react2 = require("react");
+var import_wallet_adapter_core = require("@aptos-labs/wallet-adapter-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var initialState = {
+  connected: false,
+  account: null,
+  network: null,
+  wallet: null
+};
+var AptosWalletAdapterProvider = ({
+  children,
+  plugins,
+  autoConnect = false,
+  onError
+}) => {
+  const [{ connected, account, network, wallet }, setState] = (0, import_react2.useState)(initialState);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const walletCore = (0, import_react2.useMemo)(() => new import_wallet_adapter_core.WalletCore(plugins != null ? plugins : []), []);
+  const [wallets, setWallets] = (0, import_react2.useState)(
+    walletCore.wallets
+  );
+  const connect = async (walletName) => {
+    try {
+      setIsLoading(true);
+      await walletCore.connect(walletName);
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const disconnect = async () => {
+    try {
+      await walletCore.disconnect();
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    }
+  };
+  const signTransaction = async (transaction, asFeePayer, options) => {
+    try {
+      return await walletCore.signTransaction(transaction, asFeePayer, options);
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    }
+  };
+  const signMessage = async (message) => {
+    try {
+      return await walletCore.signMessage(message);
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    }
+  };
+  const signMessageAndVerify = async (message) => {
+    try {
+      return await walletCore.signMessageAndVerify(message);
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    }
+  };
+  const submitTransaction = async (transaction) => {
+    try {
+      return await walletCore.submitTransaction(transaction);
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    }
+  };
+  const signAndSubmitTransaction = async (transaction) => {
+    try {
+      return await walletCore.signAndSubmitTransaction(transaction);
+    } catch (error) {
+      if (onError)
+        onError(error);
+      return Promise.reject(error);
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    if (autoConnect) {
+      if (localStorage.getItem("AptosWalletName") && !connected) {
+        connect(localStorage.getItem("AptosWalletName"));
+      } else {
+        setIsLoading(false);
+      }
+    }
+  }, wallets);
+  (0, import_react2.useEffect)(() => {
+    if (connected) {
+      walletCore.onAccountChange();
+      walletCore.onNetworkChange();
+    }
+  }, [connected]);
+  const handleConnect = () => {
+    setState((state) => {
+      return {
+        ...state,
+        connected: true,
+        account: walletCore.account,
+        network: walletCore.network,
+        wallet: walletCore.wallet
+      };
+    });
+  };
+  const handleDisconnect = () => {
+    if (!connected)
+      return;
+    setState((state) => {
+      return {
+        ...state,
+        connected: false,
+        account: walletCore.account,
+        network: walletCore.network,
+        wallet: null
+      };
+    });
+  };
+  const handleAccountChange = (0, import_react2.useCallback)(() => {
+    if (!connected)
+      return;
+    if (!walletCore.wallet)
+      return;
+    setState((state) => {
+      return {
+        ...state,
+        account: walletCore.account
+      };
+    });
+  }, [connected]);
+  const handleNetworkChange = (0, import_react2.useCallback)(() => {
+    if (!connected)
+      return;
+    if (!walletCore.wallet)
+      return;
+    setState((state) => {
+      return {
+        ...state,
+        network: walletCore.network
+      };
+    });
+  }, [connected]);
+  const handleReadyStateChange = (updatedWallet) => {
+    const updatedWallets = wallets == null ? void 0 : wallets.map((wallet2) => {
+      if (wallet2.name === updatedWallet.name) {
+        return { ...wallet2, readyState: updatedWallet.readyState };
+      }
+      return wallet2;
+    });
+    setWallets(updatedWallets);
+  };
+  const handleStandardWalletsAdded = (standardWallet) => {
+    const updatedWallets = wallets == null ? void 0 : wallets.map((wallet2) => {
+      if (wallet2.name === standardWallet.name) {
+        return { ...standardWallet };
+      }
+      return wallet2;
+    });
+    setWallets(updatedWallets);
+  };
+  (0, import_react2.useEffect)(() => {
+    walletCore.on("connect", handleConnect);
+    walletCore.on("disconnect", handleDisconnect);
+    walletCore.on("accountChange", handleAccountChange);
+    walletCore.on("networkChange", handleNetworkChange);
+    walletCore.on("readyStateChange", handleReadyStateChange);
+    walletCore.on("standardWalletsAdded", handleStandardWalletsAdded);
+    return () => {
+      walletCore.off("connect", handleConnect);
+      walletCore.off("disconnect", handleDisconnect);
+      walletCore.off("accountChange", handleAccountChange);
+      walletCore.off("networkChange", handleNetworkChange);
+      walletCore.off("readyStateChange", handleReadyStateChange);
+      walletCore.off("standardWalletsAdded", handleStandardWalletsAdded);
+    };
+  }, [wallets, connected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletContext.Provider, {
+    value: {
+      connect,
+      account,
+      network,
+      connected,
+      disconnect,
+      wallet,
+      wallets,
+      signAndSubmitTransaction,
+      signTransaction,
+      signMessage,
+      signMessageAndVerify,
+      isLoading,
+      submitTransaction
+    },
+    children
+  });
+};
+
+// src/index.tsx
+var import_wallet_adapter_core2 = require("@aptos-labs/wallet-adapter-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AptosWalletAdapterProvider,
+  NetworkName,
+  WalletReadyState,
+  isInAppBrowser,
+  isMobile,
+  isRedirectable,
+  useWallet
+});