@aptos-labs/wallet-adapter-react 0.1.3

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["adapter"],
+};

package/README.md

@@ -0,0 +1,192 @@
+# 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.
+
+#### Supported wallet packages
+
+- Petra
+- Martian
+- Rise
+
+### Usage
+
+#### Install Dependencies
+
+Install wallet dependencies you want to include in your app. To do that, you can had to each of the wallet in the supported wallets list (each name is linked to the npm package page) above and follow the instructions.
+
+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 { AptosWallet } 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}>
+  <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,
+  signTransaction,
+  signMessage,
+} = useWallet();
+```
+
+#### Examples
+
+##### connect(walletName)
+
+```js
+<button onClick={() => connect(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
+    };
+    try {
+      const response = await signAndSubmitTransaction(payload);
+      // if you want to wait for transaction
+      await aptosClient.waitForTransaction(response?.hash || "");
+      console.log(response?.hash)
+    } catch (error: any) {
+      console.log("error", error);
+    }
+  };
+
+<button onClick={onSignAndSubmitTransaction}>
+  Sign and submit transaction
+</button>
+```
+
+##### 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
+    };
+    try {
+      const response = await signTransaction(payload);
+      console.log("response", response);
+    } catch (error: any) {
+      console.log("error", error);
+    }
+  };
+
+<button onClick={onSignTransaction}>
+  Sign transaction
+</button>
+```
+
+##### signMessage(payload)
+
+```js
+  const onSignMessage = async () => {
+    const payload = {
+      message: "Hello from Aptos Wallet Adapter",
+      nonce: "random_string",
+    };
+    try {
+      const response = await signMessage(payload);
+      console.log("response", response);
+    } catch (error: any) {
+      console.log("error", error);
+    }
+  };
+
+<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>);
+}
+```

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@aptos-labs/wallet-adapter-react",
+  "version": "0.1.3",
+  "description": "Aptos Wallet Adapter React Provider",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    "require": "./dist/index.js",
+    "import": "./dist/index.mjs",
+    "types": "./dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aptos-labs/aptos-wallet-adapter.git"
+  },
+  "homepage": "https://github.com/aptos-labs/aptos-wallet-adapter",
+  "bugs": {
+    "url": "https://github.com/aptos-labs/aptos-wallet-adapter/issues"
+  },
+  "author": "aptoslabs.com",
+  "keywords": [
+    "Aptos",
+    "Aptos Labs",
+    "Wallet",
+    "Wallet Adapter",
+    "Wallet Adapter Provider",
+    "React"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "lint": "TIMING=1 eslint \"src/**/*.ts*\""
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@aptos-labs/wallet-adapter-tsconfig": "workspace:*",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.15.0",
+    "typescript": "^4.5.3",
+    "tsup": "^5.10.1"
+  },
+  "dependencies": {
+    "@aptos-labs/wallet-adapter-core": "workspace:*",
+    "aptos": "^1.3.17"
+  }
+}

package/src/WalletProvider.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { WalletContext } from "./useWallet";
+import type {
+  AccountInfo,
+  NetworkInfo,
+  SignMessagePayload,
+  Wallet,
+  WalletInfo,
+  WalletName,
+} from "@aptos-labs/wallet-adapter-core";
+import { WalletCore } from "@aptos-labs/wallet-adapter-core";
+
+import { Types } from "aptos";
+
+export interface AptosWalletProviderProps {
+  children: ReactNode;
+  plugins: Wallet[];
+  autoConnect?: boolean;
+}
+
+const initialState: {
+  account: AccountInfo | null;
+  network: NetworkInfo | null;
+  connected: boolean;
+  wallet: WalletInfo | null;
+} = {
+  connected: false,
+  account: null,
+  network: null,
+  wallet: null,
+};
+
+export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
+  children,
+  plugins,
+  autoConnect = false,
+}: AptosWalletProviderProps) => {
+  const [{ connected, account, network, wallet }, setState] =
+    useState(initialState);
+
+  const walletCore = useMemo(() => new WalletCore(plugins), []);
+  const [wallets, setWallets] = useState<Wallet[]>(walletCore.wallets);
+
+  const connect = (walletName: WalletName) => {
+    try {
+      walletCore.connect(walletName);
+    } catch (e) {
+      console.log("connect error", e);
+    }
+  };
+
+  const disconnect = () => {
+    try {
+      walletCore.disconnect();
+    } catch (e) {
+      console.log("disconnect error", e);
+    }
+  };
+
+  const signAndSubmitTransaction = async (
+    transaction: Types.TransactionPayload
+  ) => {
+    try {
+      return await walletCore.signAndSubmitTransaction(transaction);
+    } catch (error: any) {
+      throw error;
+    }
+  };
+
+  const signTransaction = async (transaction: Types.TransactionPayload) => {
+    try {
+      return await walletCore.signTransaction(transaction);
+    } catch (error: any) {
+      throw error;
+    }
+  };
+
+  const signMessage = async (message: SignMessagePayload) => {
+    try {
+      return await walletCore.signMessage(message);
+    } catch (error: any) {
+      throw error;
+    }
+  };
+
+  useEffect(() => {
+    if (autoConnect) {
+      if (localStorage.getItem("AptosWalletName")) {
+        connect(localStorage.getItem("AptosWalletName") as WalletName);
+      }
+    }
+  }, [wallets]);
+
+  useEffect(() => {
+    if (connected) {
+      walletCore.onAccountChange();
+      walletCore.onNetworkChange();
+    }
+  }, [wallets, connected]);
+
+  // Handle the adapter's connect event
+  const handleConnect = () => {
+    setState((state) => {
+      return {
+        ...state,
+        connected: true,
+        account: walletCore.account,
+        network: walletCore.network,
+        wallet: walletCore.wallet,
+      };
+    });
+  };
+
+  // Handle the adapter's disconnect event
+  const handleDisconnect = () => {
+    if (!connected) return;
+    setState((state) => {
+      return {
+        ...state,
+        connected: false,
+        account: walletCore.account,
+        network: walletCore.network,
+        wallet: null,
+      };
+    });
+  };
+
+  // Handle the adapter's account change event
+  const handleAccountChange = useCallback(() => {
+    if (!connected) return;
+    if (!walletCore.wallet) return;
+    setState((state) => {
+      return {
+        ...state,
+        account: walletCore.account,
+      };
+    });
+  }, [connected]);
+
+  // Handle the adapter's network event
+  const handleNetworkChange = useCallback(() => {
+    if (!connected) return;
+    if (!walletCore.wallet) return;
+    setState((state) => {
+      return {
+        ...state,
+        network: walletCore.network,
+      };
+    });
+  }, [connected]);
+
+  // Handle the adapter's ready state change event
+  const handleReadyStateChange = (wallet: Wallet) => {
+    setWallets((prevWallets) => {
+      const index = prevWallets.findIndex(
+        (currWallet) => currWallet === wallet
+      );
+      if (index === -1) return prevWallets;
+
+      return [
+        ...prevWallets.slice(0, index),
+        wallet,
+        ...prevWallets.slice(index + 1),
+      ];
+    });
+  };
+
+  useEffect(() => {
+    walletCore.on("connect", handleConnect);
+    walletCore.on("disconnect", handleDisconnect);
+    walletCore.on("accountChange", handleAccountChange);
+    walletCore.on("networkChange", handleNetworkChange);
+    walletCore.on("readyStateChange", handleReadyStateChange);
+    return () => {
+      walletCore.off("connect", handleConnect);
+      walletCore.off("disconnect", handleDisconnect);
+      walletCore.off("accountChange", handleAccountChange);
+      walletCore.off("networkChange", handleNetworkChange);
+      walletCore.off("readyStateChange", handleReadyStateChange);
+    };
+  }, [wallets, connected]);
+
+  return (
+    <WalletContext.Provider
+      value={{
+        connect,
+        account,
+        network,
+        connected,
+        disconnect,
+        wallet,
+        wallets,
+        signAndSubmitTransaction,
+        signTransaction,
+        signMessage,
+      }}
+    >
+      {children}
+    </WalletContext.Provider>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,3 @@
+import * as React from "react";
+export { useWallet } from "./useWallet";
+export * from "./WalletProvider";

package/src/useWallet.tsx

@@ -0,0 +1,48 @@
+import {
+  AccountInfo,
+  NetworkInfo,
+  WalletInfo,
+  WalletName,
+  SignMessagePayload,
+  SignMessageResponse,
+  Wallet,
+} from "@aptos-labs/wallet-adapter-core";
+import { createContext, useContext } from "react";
+import { Types } from "aptos";
+
+export type { WalletName };
+
+export interface WalletContextState {
+  connected: boolean;
+  account: AccountInfo | null;
+  network: NetworkInfo | null;
+  connect(walletName: WalletName): void;
+  disconnect(): void;
+  wallet: WalletInfo | null;
+  wallets: Wallet[];
+  signAndSubmitTransaction<T extends Types.TransactionPayload, V>(
+    transaction: T,
+    options?: V
+  ): Promise<any>;
+  signTransaction<T extends Types.TransactionPayload, V>(
+    transaction: T,
+    options?: V
+  ): Promise<any>;
+  signMessage(message: SignMessagePayload): Promise<SignMessageResponse | null>;
+}
+
+const DEFAULT_COUNTEXT = {
+  connected: false,
+};
+
+export const WalletContext = createContext<WalletContextState>(
+  DEFAULT_COUNTEXT as WalletContextState
+);
+
+export function useWallet(): WalletContextState {
+  const context = useContext(WalletContext);
+  if (!context) {
+    throw new Error("useWallet must be used within a WalletContextState");
+  }
+  return context;
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@aptos-labs/wallet-adapter-tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}