From a34591ec670c75a1b799565d1acf990e4240e5f4 Mon Sep 17 00:00:00 2001 From: maayan Date: Thu, 16 Nov 2023 12:24:19 -0500 Subject: [PATCH] content modifications for demo dapp --- README.md | 4 +- .../transactionFlow/SingleSigner.tsx | 4 +- apps/nextjs-example/pages/index.tsx | 10 + packages/wallet-adapter-react/README.md | 106 ++++--- packages/wallet-adapter-react/READMEV1.md | 267 ++++++++++++++++++ 5 files changed, 333 insertions(+), 58 deletions(-) create mode 100644 packages/wallet-adapter-react/READMEV1.md diff --git a/README.md b/README.md index 48498d41..41453121 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +> **_NOTE:_** Use the Wallet Adapter v2.0.0 and up with the Aptos TypeScript SDK V2 + # Aptos Wallet Adapter A monorepo modular wallet adapter developed and maintained by Aptos for wallet and dapp builders that includes: @@ -19,7 +21,7 @@ Note: These are in alphabetical order, any new wallets must be in alphabetical o - [Fewcha](https://www.npmjs.com/package/fewcha-plugin-wallet-adapter) - [Flipper](https://www.npmjs.com/package/@flipperplatform/wallet-adapter-plugin) - [Martian](https://www.npmjs.com/package/@martianwallet/aptos-wallet-adapter) -- [MSafe](https://www.npmjs.com/package/@msafe/aptos-wallet-adapter) +- [MSafe](https://www.npmjs.com/package/@msafe/aptos-wallet-adapter) - [Nightly](https://www.npmjs.com/package/@nightlylabs/aptos-wallet-adapter-plugin) - [OpenBlock](https://www.npmjs.com/package/@openblockhq/aptos-wallet-adapter) - [Petra](https://www.npmjs.com/package/petra-plugin-wallet-adapter) diff --git a/apps/nextjs-example/components/transactionFlow/SingleSigner.tsx b/apps/nextjs-example/components/transactionFlow/SingleSigner.tsx index b44e0d19..0eb07b68 100644 --- a/apps/nextjs-example/components/transactionFlow/SingleSigner.tsx +++ b/apps/nextjs-example/components/transactionFlow/SingleSigner.tsx @@ -44,9 +44,7 @@ export default function SingleSignerTransaction({ nonce: Math.random().toString(16), }; const response = await signMessage(payload); - setSuccessAlertMessage( - JSON.stringify({ onSignMessageAndVerify: response }) - ); + setSuccessAlertMessage(JSON.stringify({ onSignMessage: response })); }; const onSignAndSubmitTransaction = async () => { diff --git a/apps/nextjs-example/pages/index.tsx b/apps/nextjs-example/pages/index.tsx index 1531f4aa..3b7165ce 100644 --- a/apps/nextjs-example/pages/index.tsx +++ b/apps/nextjs-example/pages/index.tsx @@ -14,6 +14,9 @@ import MultiAgentTransaction from "../components/transactionFlow/MultiAgent"; import Row from "../components/Row"; import Col from "../components/Col"; import { Network } from "@aptos-labs/ts-sdk"; +import { Typography } from "antd"; + +const { Link } = Typography; const WalletButtons = dynamic(() => import("../components/WalletButtons"), { suspense: false, @@ -44,6 +47,13 @@ export default function App() {

Aptos Wallet Adapter Tester ({network?.name ?? ""})

+ + Demo app source code + diff --git a/packages/wallet-adapter-react/README.md b/packages/wallet-adapter-react/README.md index 34028d0a..d380a903 100644 --- a/packages/wallet-adapter-react/README.md +++ b/packages/wallet-adapter-react/README.md @@ -1,3 +1,5 @@ +> **_NOTE:_** This documentation is for Wallet Adapter `v2.0.0` and up that is fully comatible with the Aptos TypeScript SDK V2. For Wallet Adapter `v^1.*.*` refer to [this guide](./READMEV1.md) + # Wallet Adapter React Provider A react provider wrapper for the Aptos Wallet Adapter @@ -26,6 +28,7 @@ signMessage signTransaction signMessageAndVerify signAndSubmitBCSTransaction +submitTransaction ``` ### Usage @@ -113,6 +116,13 @@ You can find it [here](../wallet-adapter-ant-design/) with instructions on how t #### Examples +##### Initialize Aptos + +```js +const aptosConfig = new AptosConfig({ network: Network.TESTNET }); +const aptos = new Aptos(aptosConfig); +``` + ##### connect(walletName) ```js @@ -132,61 +142,51 @@ const onConnect = async (walletName) => { ##### signAndSubmitTransaction(payload) ```js - const onSignAndSubmitTransaction = async () => { - const payload: Types.TransactionPayload = { - type: "entry_function_payload", +const onSignAndSubmitTransaction = async () => { + const response = await signAndSubmitTransaction({ + sender: account.address, + data: { 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); - } - }; + typeArguments: ["0x1::aptos_coin::AptosCoin"], + functionArguments: [account.address, 1], + }, + }); + // if you want to wait for transaction + try { + await aptos.waitForTransaction({ transactionHash: response.hash }); + } catch (error) { + console.error(error); + } +}; +; ``` ##### 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); - } - }; +const onSignAndSubmitBCSTransaction = async () => { + const response = await signAndSubmitTransaction({ + sender: account.address, + data: { + function: "0x1::coin::transfer", + typeArguments: [parseTypeTag(APTOS_COIN)], + functionArguments: [AccountAddress.from(account.address), new U64(1)], + }, + }); + // if you want to wait for transaction + try { + await aptos.waitForTransaction({ transactionHash: response.hash }); + } catch (error) { + console.error(error); + } +}; +; ``` ##### signMessage(payload) @@ -235,19 +235,17 @@ const onSignMessage = async () => { ##### 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); +const onSignTransaction = async () => { + const payload = { + 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); +}; - +; ``` ##### signMessageAndVerify(payload) diff --git a/packages/wallet-adapter-react/READMEV1.md b/packages/wallet-adapter-react/READMEV1.md new file mode 100644 index 00000000..5d632148 --- /dev/null +++ b/packages/wallet-adapter-react/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()]; + + { + console.log("error", error); + }} +> + +; +``` + +#### 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); +}; + +; +``` + +##### disconnect() + +```js + +``` + +##### 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); + } + }; + + +``` + +##### 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); + } + }; + + +``` + +##### signMessage(payload) + +```js +const onSignMessage = async () => { + const payload = { + message: "Hello from Aptos Wallet Adapter", + nonce: "random_string", + }; + const response = await signMessage(payload); +}; + +; +``` + +##### Account + +```js +
{account?.address}
+
{account?.publicKey}
+``` + +##### Network + +```js +
{network?.name}
+``` + +##### Wallet + +```js +
{wallet?.name}
+
{wallet?.icon}
+
{wallet?.url}
+``` + +##### Wallets + +```js +{ + wallets.map((wallet) =>

{wallet.name}

); +} +``` + +##### 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); + }; + + +``` + +##### signMessageAndVerify(payload) + +```js +const onSignMessageAndVerify = async () => { + const payload = { + message: "Hello from Aptos Wallet Adapter", + nonce: "random_string", + }; + const response = await signMessageAndVerify(payload); +}; + +; +```