Aptos Wallet Adapter

React WalletProvider supporting loads of aptos wallets.

Installation

with yarn

yarn add @manahippo/aptos-wallet-adapter

with npm

npm install @manahippo/aptos-wallet-adapter

Use React Provider

import React from 'react';
import { WalletProvider, OpenBlockWalletAdapter } from '@manahippo/aptos-wallet-adapter';

const wallets = [
  new OpenBlockWalletAdapter(),
];

const App = () => {
  return (
    <WalletProvider
      wallets={wallets}
      autoConnect={true | false}
      onError={(error) => {
        console.log('Handle Error Message', error);
      }}
    >
      {/* your website */}
    </WalletProvider>
  );
};

Web3 Hook

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

const { connected, ...rest } = useWallet();

/*
  ** Properties available: **
  wallets: Wallet[]; - Array of wallets
  wallet: Wallet | null; - Selected Wallet
  account: AccountKeys | null; - Wallet info: address, 
  network: NetworkInfo - { name, chainId, api }
  publicKey, authKey
  connected: boolean; - check the website is connected yet
  connect(walletName: string): Promise<void>; - trigger connect popup
  disconnect(): Promise<void>; - trigger disconnect action
  signAndSubmitTransaction(
    transaction: TransactionPayload
  ): Promise<PendingTransaction>; - function to sign and submit the transaction to chain
*/

Connect & Disconnect

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

const ConnectButton = () => {
  const { connect, disconnect, connected } = useWallet();

  if (!connected) {
    return (
      <button onClick={() => { connect(); }}>Connect</button>
    );
  }

  return <button onClick={() => { disconnect(); }}>Disconnect</button>
};

Get Wallet Info

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

const Info = () => {
  const { wallet, account, network } = useWallet();

  return (
    <div>
      <p>Wallet: {wallet?.adapter.name}</p>
      <p>Address: {account?.address}</p>
      <p>Public Key: {account?.publicKey}</p>
      <p>Network: {network?.name}</p>
      <p>ChainId: {network?.chainId}</p>
      <p>API: {network?.API}</p>
    </div>
  };
};

Sign Message

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

const SignMessage = () => {
  const { signMessage } = useWallet();
  const [message, setMessage] = useState('');

  const sign = useCallback(() => {
    signMessage({
      message: 'messageToSign',
      nonce: 'random_string',
    })
      .then((data) => {
        setMessage(data.signature);
      })
      .catch((e) => {
        console.error(e);
      });
  }, [signMessage]);

  return (
    <div>
      <button onClick={sign}>Sign Message</button>
      <p>SignedMessage: {message}</p>
    </div>
  );
};

Transfer Token

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

const TransferToken = () => {
  const { signAndSubmitTransaction } = useWallet();
  const [hash, setHash] = useState('');

  const transfer = useCallback(() => {
    signAndSubmitTransaction({
      type: 'entry_function_payload',
      function: '0x1::coin::transfer',
      type_arguments: ['0x1::aptos_coin::AptosCoin'],
      arguments: [
        'toaddress',
        '717',
      ],
    }, {
      max_gas_amount: '1000',
      gas_unit_price: '100',
    })
      .then((data) => {
        setMessage(data.hash);
      })
      .catch((e) => {
        console.error(e);
      });
  }, [signMessage]);

  return (
    <div>
      <button onClick={transfer}>Transfer Token</button>
      <p>Hash: {hash}</p>
    </div>
  );
};

Examples

Please refer to hippo's frontend.