注: 此文档用于钱包适应器反应
v4.0.0和上面完全兼容 Aptos 类型SDK V2. 钱包适配器反应v^3.*.*参考 本指南
钱包适配器反应提供者
Aptos 钱包适应器的反应提供者包
想要使用适配器的 Dapps 应当安装此软件包和其他支持的钱包包.
支助
反应提供者遵循 钱包标准 并支持下列所需职能
所需标准职能
account
connect
disconnect
network
onAccountChange
onNetworkChange
signMessage
signTransaction
其他职能
signAndSubmitTransaction
signMessageAndVerify
submitTransaction
使用量
安装依赖关系
安装您想要包含在应用程序中的钱包依赖性 . 要做到这一点,你可以看看我们 支持的钱包列表。每个钱包是 npm 软件包的链接,您可以从其中安装.
下一个,安装 @aptos-labs/wallet-adapter-react
pnpm i @aptos-labs/wallet-adapter-react
使用 npm 数据
npm i @aptos-labs/wallet-adapter-react
导入依赖性
导入 AptosWalletAdapterProvider。 。 。 .
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
将您的应用程序与提供方包装, 传递相关的道具.
import { Network } from "@aptos-labs/ts-sdk";
<AptosWalletAdapterProvider
autoConnect={true}
dappConfig={{ network: Network.MAINNET, aptosApiKey: "my-generated-api-key" }}
onError={(error) => {
console.log("error", error);
}}
>
<App />
</AptosWalletAdapterProvider>;
可用的提供者道具
autoConnect- 道具表示该道具是否应该与之前连接的钱包自动连接.dappConfig用来初始化Dapp的配置.network- dapp的网络工作aptosApiKey- 从 https://developers.aptoslabs.com/docs/api-访问
onError- 适配器投出错误时的回调函数起火optInWallets-适配器默认情况下检测并添加了AIP-62标准钱包,有时您可能想要选择使用特定的钱包. 此道具允许您定义您想要支持的 AIP- 62 标准钱包 .
<AptosWalletAdapterProvider
...
optInWallets={["Petra"]}
...
>
<App />
</AptosWalletAdapterProvider>
disableTelemetry- 一个布尔旗来禁用适配器遥测工具,默认是虚假的
<AptosWalletAdapterProvider
...
disableTelemetry={true}
...
>
<App />
</AptosWalletAdapterProvider>
使用钱包
在任何要使用钱包道具的页面上导入 useWallet 从 @aptos-labs/wallet-adapter-react
import { useWallet } from "@aptos-labs/wallet-adapter-react";
然后可以使用导出属性
const {
account,
changeNetwork,
connect,
connected,
disconnect,
network,
signAndSubmitTransaction,
signMessage,
signMessageAndVerify,
signTransaction,
submitTransaction,
wallet,
wallets,
} = useWallet();
实例
账户
// The account address as a typed AccountAddress
<div>{account?.address.toString()}</div>
// The account public key as a typed PublicKey
<div>{account?.publicKey.toString()}</div>
网络
<div>{network?.name}</div>
钱包
<div>{wallet?.name}</div>
<div>{wallet?.icon}</div>
<div>{wallet?.url}</div>
钱包
{
wallets.map((wallet) => <p>{wallet.name}</p>);
}
连接( wallet Name
const onConnect = async (walletName) => {
await connect(walletName);
};
<button onClick={() => onConnect(wallet.name)}>{wallet.name}</button>;
断开( )
<button onClick={disconnect}>Disconnect</button>
签名交接( 负载)
const onSignAndSubmitTransaction = async () => {
const response = await signAndSubmitTransaction({
data: {
function: "0x1::coin::transfer",
typeArguments: [APTOS_COIN],
functionArguments: [account.address, 1], // 1 is in Octas
},
});
// if you want to wait for transaction
try {
await aptos.waitForTransaction({ transactionHash: response.hash });
} catch (error) {
console.error(error);
}
};
<button onClick={onSignAndSubmitTransaction}>
Sign and submit transaction
</button>;
签名并提交 BCS 交易( 负载)
const onSignAndSubmitBCSTransaction = async () => {
const response = await signAndSubmitTransaction({
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);
}
};
<button onClick={onSignAndSubmitTransaction}>
Sign and submit BCS transaction
</button>;
信号( 有效载荷)
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>;
签名交易( 负载QQ交易)
const onSignTransaction = async () => {
const payload: InputTransactionData = {
data: {
function: "0x1::coin::transfer",
typeArguments: [APTOS_COIN],
functionArguments: [account?.address.toString(), 1],
},
};
const response = await signTransaction({
transactionOrPayload: payload,
});
};
const onSignRawTransaction = async () => {
const aptosConfig = new AptosConfig({ network: Network.MAINNET });
const aptos = new Aptos(aptosConfig);
const transactionToSign = await aptos.transaction.build.simple({
sender: account.address,
data: {
function: "0x1::coin::transfer",
typeArguments: [APTOS_COIN],
functionArguments: [account.address.toString(), 1],
},
});
const response = await signTransaction({
transactionOrPayload: transactionToSign,
});
};
<button onClick={onSignTransaction}>Sign transaction</button>;
<button onClick={onSignRawTransaction}>Sign raw transaction</button>;
签名 MessageAndVify( 载荷)
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>;
使用 UI 软件包( 建议)
作为钱包适配器Repo的一部分,我们提供一个连接UI包的钱包,提供钱包连接按钮和钱包选择模式.
可用的UI软件包是
如果您想从应用程序中的现有组件和样式创建自己的钱包选择器UI, @aptos-labs/wallet-adapter-react 提供一系列无头组件和公用设施来简化此流程,以便您能够专注于写入CSS而不是执行业务逻辑. 详情请查看 构建您的钱包选择器 文档.