From 5fad694913933b36cbab1098da947599a6226847 Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 28 Jun 2024 11:57:00 -0400 Subject: [PATCH 1/4] Add sign and submit example code --- .../src/examples/SignAndSubmit.tsx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 apps/nextjs-example/src/examples/SignAndSubmit.tsx diff --git a/apps/nextjs-example/src/examples/SignAndSubmit.tsx b/apps/nextjs-example/src/examples/SignAndSubmit.tsx new file mode 100644 index 00000000..9193676c --- /dev/null +++ b/apps/nextjs-example/src/examples/SignAndSubmit.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { useWallet } from '@aptos-labs/wallet-adapter-react'; +import { Aptos, AptosConfig, Network } from '@aptos-labs/ts-sdk'; + +const config = new AptosConfig({ network: Network.TESTNET }); +const aptos = new Aptos(config); + +const SignAndSubmit = () => { + const { account, signAndSubmitTransaction } = useWallet(); + + const onSignAndSubmitTransaction = async () => { + if(account == null) { + throw new Error("Unable to find account to sign transaction") + } + const response = await signAndSubmitTransaction({ + sender: account.address, + data: { + function: "0x1::coin::transfer", + 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); + } + }; + + return ( + + ); +}; + +export default SignAndSubmit; \ No newline at end of file From bea992b94440456a7c7e89a7643c0c21dfad8cee Mon Sep 17 00:00:00 2001 From: Jackson Date: Tue, 16 Jul 2024 19:44:06 -0400 Subject: [PATCH 2/4] Add WalletConnect example --- apps/nextjs-example/src/examples/README.md | 3 ++ .../src/examples/WalletConnectDemo.tsx | 42 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 apps/nextjs-example/src/examples/README.md create mode 100644 apps/nextjs-example/src/examples/WalletConnectDemo.tsx diff --git a/apps/nextjs-example/src/examples/README.md b/apps/nextjs-example/src/examples/README.md new file mode 100644 index 00000000..c4f08bab --- /dev/null +++ b/apps/nextjs-example/src/examples/README.md @@ -0,0 +1,3 @@ +This folder contains examples of how to use each of the AIP-62 functions via the aptos-wallet-adapter React library. + +You can try out the examples by adding them to the [`page.tsx`](../app/page.tsx) file then building the demo app with the instructions in the demo app [README.md](../../README.md). diff --git a/apps/nextjs-example/src/examples/WalletConnectDemo.tsx b/apps/nextjs-example/src/examples/WalletConnectDemo.tsx new file mode 100644 index 00000000..55958bc4 --- /dev/null +++ b/apps/nextjs-example/src/examples/WalletConnectDemo.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { WalletName, useWallet } from '@aptos-labs/wallet-adapter-react'; + +const WalletConnectDemo = () => { + const { connect, disconnect, account, connected } = useWallet(); + + const handleConnect = async () => { + try { + await connect("Petra" as WalletName<"Petra">); // Change to the desired wallet name + console.log('Connected to wallet:', account); + } catch (error) { + console.error('Failed to connect to wallet:', error); + } + }; + + const handleDisconnect = async () => { + try { + await disconnect(); + console.log('Disconnected from wallet'); + } catch (error) { + console.error('Failed to disconnect from wallet:', error); + } + }; + + return ( +
+

Aptos Wallet Connection

+
+ {connected ? ( +
+

Connected to: {account?.address}

+ +
+ ) : ( + + )} +
+
+ ); +}; + +export default WalletConnectDemo; \ No newline at end of file From b58277c461b5d71da983b70065c65525c1defa16 Mon Sep 17 00:00:00 2001 From: Jackson Date: Tue, 16 Jul 2024 23:52:35 -0400 Subject: [PATCH 3/4] Add ChangeNetworkDemo --- .../src/examples/ChangeNetworkDemo.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 apps/nextjs-example/src/examples/ChangeNetworkDemo.tsx diff --git a/apps/nextjs-example/src/examples/ChangeNetworkDemo.tsx b/apps/nextjs-example/src/examples/ChangeNetworkDemo.tsx new file mode 100644 index 00000000..f5cde52e --- /dev/null +++ b/apps/nextjs-example/src/examples/ChangeNetworkDemo.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { useWallet } from '@aptos-labs/wallet-adapter-react'; +import { Network } from '@aptos-labs/ts-sdk'; + +const ChangeNetworkDemo = () => { + const { network, changeNetwork, wallet } = useWallet(); + // Update this with a non-manual check to verify whether the network change is a supported feature. + // Or have error handling if a network change is attempted for a wallet that does not support the feature. + const isNetworkChangeSupported = wallet?.name === "Nightly"; + + const isValidNetworkName = () => { + return network && Object.values(Network).includes(network.name); + }; + + return ( +
+

Network Info

+
+
Network name
+
+ + {network?.name ?? 'Not Present'} + + {` (Expected: ${Object.values(Network).join(', ')})`} +
+
URL
+
+ {network?.url ? ( + + {network.url} + + ) : ( + 'Not Present' + )} +
+
Chain ID
+
{network?.chainId ?? 'Not Present'}
+
+
+

Change Network

+
+ + + +
+ {!isNetworkChangeSupported && ( +
+ * {wallet?.name ?? 'This wallet'} does not support network change requests +
+ )} +
+
+ ); +}; + +export default ChangeNetworkDemo; From b74e86b3e1d212f638cbfb5732810281d3d419fc Mon Sep 17 00:00:00 2001 From: Jackson Date: Tue, 16 Jul 2024 23:58:04 -0400 Subject: [PATCH 4/4] Add sign message demo --- .../src/examples/SignMessageDemo.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 apps/nextjs-example/src/examples/SignMessageDemo.tsx diff --git a/apps/nextjs-example/src/examples/SignMessageDemo.tsx b/apps/nextjs-example/src/examples/SignMessageDemo.tsx new file mode 100644 index 00000000..3b97c799 --- /dev/null +++ b/apps/nextjs-example/src/examples/SignMessageDemo.tsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import { useWallet } from '@aptos-labs/wallet-adapter-react'; + +const SignMessageDemo = () => { + const { signMessage, signMessageAndVerify, connected, account } = useWallet(); + const [message, setMessage] = useState(''); + const [nonce, setNonce] = useState(''); + const [signedMessage, setSignedMessage] = useState(null); + const [verificationResult, setVerificationResult] = useState(null); + const [error, setError] = useState(null); + + const handleSignMessage = async () => { + setError(null); + try { + const response = await signMessage({ message, nonce }); + setSignedMessage(response); + } catch (err: any) { + setError(`Failed to sign message: ${err.message}`); + } + }; + + const handleVerifyMessage = async () => { + setError(null); + try { + const result = await signMessageAndVerify({ message, nonce }); + setVerificationResult(result); + } catch (err: any) { + setError(`Failed to verify message: ${err.message}`); + } + }; + + return ( +
+

Aptos Sign and Verify Message

+
+ {connected ? ( +
+

Connected to: {account?.address}

+
+