Aptos 来了，前端应该如何快速进入新 web3 世界

我正在参加「掘金·启航计划」

前言

在区块链行业，Aptos 生态最近真的火的不能更火了。在其主网上线之前，其生态的相关项目就已经多达 200 多个。

Aptos 是使用 Move 语言开发的公链项目，旨在为数十亿用户提供服务。

那么对于一个在 web3 行业内工作的前端，需要了解哪些内容？

钱包

对于开发 dapp 的前端来说，通过浏览器插件钱包来发送交易，是最重要的内容，而 Aptos 生态使用的主流钱包目前有三种：

• Petra 官方钱包 下载地址：chrome.google.com/webstore/de…
• Martian 下载地址：chrome.google.com/webstore/de…
• Pontem 下载地址：chrome.google.com/webstore/de…

那么前端该如何接入这三种钱包呢？

Petra

1. 链接钱包

if (!window.aptos) {
    window.open('https://petra.app/', `_blank`);
    return
}
const response = await window.aptos.connect();

2. 发送交易

const tx = {    //三个钱包都是这样的对象结构，只有 petra 钱包多了一个 type 字段，不过值是写死的 entry_function_payload
    arguments: [<targetAddress>, '1000'], 
    function: '0x1::coin::transfer', 
    type: 'entry_function_payload', 
    type_arguments: ['0x1::aptos_coin::TestCoin']
};

const res = await window.aptos.signAndSubmitTransaction(tx);

3. 签名

const message = "hello"
const nonce = "random_string"

const response = await window.aptos.signMessage({ message, nonce, })

4. 监听事件

• 监听网络变化

window.aptos.onNetworkChange((newNetwork) => { 
    console.log(newNetwork)
})

• 监听账号地址变化

window.aptos.onAccountChange((account) => { 
    console.log(account)
})

• 监听断开连接

window.aptos.onDisconnect(() => { 
    console.log('disconnect petra')
})

Martian

1. 连接钱包

if (!window.martian) {
    window.open("https://www.martianwallet.xyz/", "_blank");
    return 
}
const {address, publicKey} = await window.martian.connect();

2. 发送交易

const {address} = await window.martian.connect();

const payload = {
    function: "0x1::coin::transfer",
    type_arguments: ["0x1::aptos_coin::AptosCoin"],
    arguments: [<targetAddress>, '1000']
};

const transaction = await window.martian.generateTransaction(address, payload);
const txnHash = await window.martian.signAndSubmitTransaction(transaction);

3. 签名

const metadata = {
    address: true,
    application: true,
    chainId: true,
    message: "This is a sample message",
    nonce: 12345,
};
const signature = await window.martian.signMessage(metadata);

4. 监听事件

• 监听网络变化

window.martian.onNetworkChange((network) => 
    console.log(network)
);

• 监听账号地址变化

window.martian.onAccountChange((address) => 
    console.log("Changed address", address)
);

Pontem

1. 连接钱包

if (!window.pontem) {
    window.open("https://pontem.network/", "_blank")
    return
}
await window.pontem.connect()

2. 发送交易

const payload = {
    function: "0x1::coin::transfer",
    type_arguments: ["0x1::aptos_coin::AptosCoin"],
    arguments: [<targetAddress>, "1000"]
};

const otherOptions = {
    max_gas_amount: '1000',
    gas_unit_price: '100',
}

await window.pontem.signAndSubmit(payload, otherOptions)

3. 签名

const metadata = {
    address: true, 
    application: true,
    chainId: true, 
    message: 'a message i trust',
    nonce: '123'
}
window.pontem.signMessage(metadata)

4. 监听事件

• 监听网络变化

window.pontem.onChangeNetwork((network) => {
    console.log(network);
})

• 监听账号地址变化

window.pontem.onChangeAccount((address) => {
    console.log(address)
})

钱包总结

可以看到，目前来说，petra、martian、pontem 这三个主流钱包，在使用上大体是相同的，但还是存在一些小小的差异，对于前端开发来说，要接入三个钱包，还是需要有一些判断条件，不是非常方便。因此，这里再推荐一个一个更方便的钱包连接的库：@manahippo/aptos-wallet-adapter

@manahippo/aptos-wallet-adapter

安装

yarn add @manahippo/aptos-wallet-adapter

使用

1. 初始化 provider

import {
  WalletProvider,
  HippoWalletAdapter,
  AptosWalletAdapter,
  HippoExtensionWalletAdapter,
  MartianWalletAdapter,
  FewchaWalletAdapter,
  PontemWalletAdapter,
  SpikaWalletAdapter,
  RiseWalletAdapter,
  FletchWalletAdapter,
  TokenPocketWalletAdapter
} from '@manahippo/aptos-wallet-adapter'

const wallets = [
  new HippoWalletAdapter(),
  new MartianWalletAdapter(),
  new AptosWalletAdapter(),
  new FewchaWalletAdapter(),
  new HippoExtensionWalletAdapter(),
  new PontemWalletAdapter(),
  new SpikaWalletAdapter(),
  new RiseWalletAdapter(),
  new FletchWalletAdapter(),
  new TokenPocketWalletAdapter()
]

ReactDOM.render(
  <WalletProvider
    wallets={wallets}
    autoConnect={true} // 是否需要自动连接
    onError={error => {
      console.log('Handle Error Message', error)
    }}
  >
    <App />
  </WalletProvider>,
  document.getElementById('root')

2. 连接钱包

import { useWallet } from '@manahippo/aptos-wallet-adapter'

const {connected, wallets, select, account} = useWallet()

{connected ? (
    wallets.map(wallet => {
        const option = wallet
        return (
            <button onClick={() => select(option.name)>{option.name}</button>
        )
    })
): (
    <p>{account}</p>
)}

3. 发送交易

import { useWallet } from '@manahippo/aptos-wallet-adapter'

const { signAndSubmitTransaction } = useWallet()

const txOptions = {
  max_gas_amount: '20000',
  gas_unit_price: '100'
}

const eventHandler = async () => {
    try {
        const payload =  {
            arguments: [<targetAddress>, '1000'], 
            function: '0x1::coin::transfer', 
            type: 'entry_function_payload', 
            type_arguments: ['0x1::aptos_coin::TestCoin']
        }

        const transactionRes = await signAndSubmitTransaction(
            payload,
            txOptions
        )
    } catch (e) {
        console.log('error:', e)
    }
}

4. 监听事件

在使用这个库之后，就不需要再写专门的监听方法去监听网络、地址变化了，库里已经自带了监听，非常的方便。