前端调用Aptos钱包的基本用法一

前端调用Aptos钱包的基本用法

1.安装

yarn add @manahippo/aptos-wallet-adapter

//引入@manahippo/aptos-wallet-adapter所支持的钱包的provider
import {
    WalletProvider,
    HippoWalletAdapter,
    AptosWalletAdapter,
    HippoExtensionWalletAdapter,
    MartianWalletAdapter,
    FewchaWalletAdapter,
    PontemWalletAdapter,
    SpikaWalletAdapter,
    RiseWalletAdapter,
    FletchWalletAdapter,
    TokenPocketWalletAdapter
  } from '@manahippo/aptos-wallet-adapter'


  import {Aptos} from './aptos';

//支持的钱包
//new xxxAdapter()点击链接钱包的时候，若浏览器中没有安装该钱包，则会自动跳转到谷歌商店，提醒用户将该插件安装至谷歌
  const wallets = [
    new HippoWalletAdapter(),
    new MartianWalletAdapter(),//会调用该钱包
    new AptosWalletAdapter(),
    new FewchaWalletAdapter(),
    new HippoExtensionWalletAdapter(),
    new PontemWalletAdapter(),
    new SpikaWalletAdapter(),
    new RiseWalletAdapter(),
    new FletchWalletAdapter(),
    new TokenPocketWalletAdapter()
  ]



  export function AptorsFather(){
    return (
        <WalletProvider
            wallets={wallets}
            autoConnect={true} // 是否需要自动连接
            onError={error => {
                console.log('Handle Error Message', error)
            }}
        >
      <Aptos />
    </WalletProvider>
    )
  }

Aptos.tsx 是select

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

export function Aptos() {
  const { connected, wallets, select, account, connect, disconnect } = useWallet()


  //断开连接
  async function walletDisconnect() {
    await disconnect();
  }

  if (!connected) {
    return (
      <div>
        {
          wallets.map((v, index) => {
            const option: any = v;
            return (
              <div key={index} style={{ display: 'flex',columnGap:'20px'}}>
                <button onClick={() => select(option.adapter.name)}> {option.adapter.name}-请连接钱包</button>
                <button onClick={() => walletDisconnect()}>Disconnect</button>
              </div>
            )
          })
        }
      </div>
    )
  return (
    <div>
      <button onClick={() => walletDisconnect()}>Disconnect</button>
    </div>
  )
}

点击了连接