ts-sdk-wallet-adapter

Name: ts-sdk-wallet-adapter
Author: aptos-labs

19stars8forks

How to install ts-sdk-wallet-adapter?

aptos-labs/aptos-agent-skills/ts-sdk-wallet-adapter

$npx -y skills add aptos-labs/aptos-agent-skills --skill ts-sdk-wallet-adapter

Installs into the current project.

Summary

How to integrate wallet connection in React frontends using @aptos-labs/wallet-adapter-react. Covers AptosWalletAdapterProvider setup, useWallet() hook, frontend transaction submission, and wallet connection UI. Triggers on: 'wallet adapter', 'connect wallet', 'useWallet', 'Aptos

Files · 1

View on GitHub

SKILL.md

1	# TypeScript SDK: Wallet Adapter (React)
2
3	## Purpose
4
5	Guide wallet connection and frontend transaction submission in React using `@aptos-labs/wallet-adapter-react`. End
6	users sign transactions via their browser wallet (Petra, Nightly, etc.) — never via raw private keys.
7
8	## ALWAYS
9
10	1. Use `@aptos-labs/wallet-adapter-react` for frontend wallet integration — this is the standard React adapter.
11	2. Wrap your app root with `AptosWalletAdapterProvider` — all `useWallet()` calls require this context.
12	3. Use `useWallet()` hook to access wallet functions in React components.
13	4. Use the wallet adapter's `signAndSubmitTransaction` (from `useWallet()`) in frontend — NOT the SDK's direct
14	`aptos.signAndSubmitTransaction`.
15	5. Always call `aptos.waitForTransaction({ transactionHash })` after submit — the wallet returns when the tx is
16	accepted, not committed.
17
18	## NEVER
19
20	1. Do not use `Account.generate()` or raw private keys in browser/frontend — use wallet adapter for end users.
21	2. Do not use the SDK's `aptos.signAndSubmitTransaction` in React components — use the wallet adapter's version from
22	`useWallet()`.
23	3. Do not hardcode wallet names — use the `wallets` array from `useWallet()` for a dynamic list.
24
25	---
26
27	## Installation
28
29	```bash
30	npm install @aptos-labs/wallet-adapter-react
31	```
32
33	Modern AIP-62 standard wallets (Petra, Nightly, etc.) are autodetected and do NOT require additional packages. Legacy
34	wallets need their plugin package installed separately.
35
36	---
37
38	## Provider setup
39
40	Wrap your app root with `AptosWalletAdapterProvider`:
41
42	```tsx
43	// main.tsx or App.tsx
44	import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
45	import { Network } from "@aptos-labs/ts-sdk";
46
47	function App() {
48	return (
49	<AptosWalletAdapterProvider
50	autoConnect={true}
51	dappConfig={{
52	network: Network.TESTNET
53	}}
54	onError={(error) => console.error("Wallet error:", error)}
55	>
56	<YourApp />
57	</AptosWalletAdapterProvider>
58	);
59	}
60	```
61
62	---
63
64	## useWallet() hook
65
66	```tsx
67	import { useWallet } from "@aptos-labs/wallet-adapter-react";
68
69	function MyComponent() {
70	const {
71	account, // Current connected account { address, publicKey }
72	connected, // Boolean: is wallet connected?
73	wallet, // Current wallet info { name, icon, url }
74	wallets, // Array of available wallets
75	connect, // (walletName) => Promise<void>
76	disconnect, // () => Promise<void>
77	signAndSubmitTransaction, // Submit entry function calls (use THIS in frontend)
78	signTransaction, // Sign without submitting
79	submitTransaction, // Submit a signed transaction
80	signMessage, // Sign an arbitrary message
81	signMessageAndVerify, // Sign and verify a message
82	changeNetwork, // Switch networks (not all wallets support this)
83	network // Current network info
84	} = useWallet();
85	}
86	```
87
88	---
89
90	## Frontend transaction pattern
91
92	Use typed payloads with `InputTransactionData`:
93
94	```tsx
95	// entry-functions/increment.ts
96	import { InputTransactionData } from "@aptos-labs/wallet-adapter-react";
97	import { MODULE_ADDRESS } from "../lib/aptos";
98
99	export function buildIncrementPayload(): InputTransactionData {
100	return {
101	data: {
102	function: `${MODULE_ADDRESS}::counter::increment`,
103	functionArguments: []
104	}
105	};
106	}
107	```
108
109	```tsx
110	// components/IncrementButton.tsx
111	import { useWallet } from "@aptos-labs/wallet-adapter-react";
112	import { aptos } from "../lib/aptos";
113	import { buildIncrementPayload } from "../entry-functions/increment";
114
115	function IncrementButton() {
116	const { signAndSubmitTransaction } = useWallet();
117
118	const handleClick = async () => {
119	try {
120	const response = await signAndSubmitTransaction(buildIncrementPayload());
121	await aptos.waitForTransaction({
122	transactionHash: response.hash
123	});
124	} catch (error) {
125	console.error("Transaction failed:", error);
126	}
127	};
128
129	return <button onClick={handleClick}>Increment</button>;
130	}
131	```
132
133	---
134
135	## Wallet connection UI
136
137	```tsx
138	import { useWallet } from "@aptos-labs/wallet-adapter-react";
139
140	function WalletInfo() {
141	const { account, connected, connect, disconnect, wallet, wallets } = useWallet();
142
143	if (!connected) {
144	return (
145	<div>
146	{wallets.map((w) => (
147	<button key={w.name} onClick={() => connect(w.name)}>
148	Connect {w.name}
149	</button>
150	))}
151	</div>
152	);
153	}
154
155	return (
156	<div>

People who liked this also viewed

6 picks

Type

ts-sdk-wallet-adapter

19stars8forks

View on GitHub

How to install ts-sdk-wallet-adapter?

aptos-labs/aptos-agent-skills/ts-sdk-wallet-adapter

$npx -y skills add aptos-labs/aptos-agent-skills --skill ts-sdk-wallet-adapter

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# TypeScript SDK: Wallet Adapter (React)
2
3	## Purpose
4
5	Guide wallet connection and frontend transaction submission in React using `@aptos-labs/wallet-adapter-react`. End
6	users sign transactions via their browser wallet (Petra, Nightly, etc.) — never via raw private keys.
7
8	## ALWAYS
9
10	1. Use `@aptos-labs/wallet-adapter-react` for frontend wallet integration — this is the standard React adapter.
11	2. Wrap your app root with `AptosWalletAdapterProvider` — all `useWallet()` calls require this context.
12	3. Use `useWallet()` hook to access wallet functions in React components.
13	4. Use the wallet adapter's `signAndSubmitTransaction` (from `useWallet()`) in frontend — NOT the SDK's direct
14	`aptos.signAndSubmitTransaction`.
15	5. Always call `aptos.waitForTransaction({ transactionHash })` after submit — the wallet returns when the tx is
16	accepted, not committed.
17
18	## NEVER
19
20	1. Do not use `Account.generate()` or raw private keys in browser/frontend — use wallet adapter for end users.
21	2. Do not use the SDK's `aptos.signAndSubmitTransaction` in React components — use the wallet adapter's version from
22	`useWallet()`.
23	3. Do not hardcode wallet names — use the `wallets` array from `useWallet()` for a dynamic list.
24
25	---
26
27	## Installation
28
29	```bash
30	npm install @aptos-labs/wallet-adapter-react
31	```
32
33	Modern AIP-62 standard wallets (Petra, Nightly, etc.) are autodetected and do NOT require additional packages. Legacy
34	wallets need their plugin package installed separately.
35
36	---
37
38	## Provider setup
39
40	Wrap your app root with `AptosWalletAdapterProvider`:
41
42	```tsx
43	// main.tsx or App.tsx
44	import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
45	import { Network } from "@aptos-labs/ts-sdk";
46
47	function App() {
48	return (
49	<AptosWalletAdapterProvider
50	autoConnect={true}
51	dappConfig={{
52	network: Network.TESTNET
53	}}
54	onError={(error) => console.error("Wallet error:", error)}
55	>
56	<YourApp />
57	</AptosWalletAdapterProvider>
58	);
59	}
60	```
61
62	---
63
64	## useWallet() hook
65
66	```tsx
67	import { useWallet } from "@aptos-labs/wallet-adapter-react";
68
69	function MyComponent() {
70	const {
71	account, // Current connected account { address, publicKey }
72	connected, // Boolean: is wallet connected?
73	wallet, // Current wallet info { name, icon, url }
74	wallets, // Array of available wallets
75	connect, // (walletName) => Promise<void>
76	disconnect, // () => Promise<void>
77	signAndSubmitTransaction, // Submit entry function calls (use THIS in frontend)
78	signTransaction, // Sign without submitting
79	submitTransaction, // Submit a signed transaction
80	signMessage, // Sign an arbitrary message
81	signMessageAndVerify, // Sign and verify a message
82	changeNetwork, // Switch networks (not all wallets support this)
83	network // Current network info
84	} = useWallet();
85	}
86	```
87
88	---
89
90	## Frontend transaction pattern
91
92	Use typed payloads with `InputTransactionData`:
93
94	```tsx
95	// entry-functions/increment.ts
96	import { InputTransactionData } from "@aptos-labs/wallet-adapter-react";
97	import { MODULE_ADDRESS } from "../lib/aptos";
98
99	export function buildIncrementPayload(): InputTransactionData {
100	return {
101	data: {
102	function: `${MODULE_ADDRESS}::counter::increment`,
103	functionArguments: []
104	}
105	};
106	}
107	```
108
109	```tsx
110	// components/IncrementButton.tsx
111	import { useWallet } from "@aptos-labs/wallet-adapter-react";
112	import { aptos } from "../lib/aptos";
113	import { buildIncrementPayload } from "../entry-functions/increment";
114
115	function IncrementButton() {
116	const { signAndSubmitTransaction } = useWallet();
117
118	const handleClick = async () => {
119	try {
120	const response = await signAndSubmitTransaction(buildIncrementPayload());
121	await aptos.waitForTransaction({
122	transactionHash: response.hash
123	});
124	} catch (error) {
125	console.error("Transaction failed:", error);
126	}
127	};
128
129	return <button onClick={handleClick}>Increment</button>;
130	}
131	```
132
133	---
134
135	## Wallet connection UI
136
137	```tsx
138	import { useWallet } from "@aptos-labs/wallet-adapter-react";
139
140	function WalletInfo() {
141	const { account, connected, connect, disconnect, wallet, wallets } = useWallet();
142
143	if (!connected) {
144	return (
145	<div>
146	{wallets.map((w) => (
147	<button key={w.name} onClick={() => connect(w.name)}>
148	Connect {w.name}
149	</button>
150	))}
151	</div>
152	);
153	}
154
155	return (
156	<div>

People who liked this also viewed

6 picks

Type