spacecydev-aptos-wallet-adapter

React WalletProvider supporting loads of aptos wallets.

Supports:

• Aptos official wallet
• Martian wallet
• Fewcha wallet
• Hippo wallet
• Hippo web wallet
• Pontem Wallet
• Spika wallet
• Rise Wallet
• Fletch wallet
• TokenPocket Wallet
• ONTO Wallet
• Blocto wallet
• Nightly Wallet
• FoxWallet
• SpacecyWallet

Installation

with yarn

yarn add @spacecydev/aptos-wallet-adapter

with npm

npm install @spacecydev/aptos-wallet-adapter

Examples

Frontend Integration

Wallet integration

Use React Provider

import React from 'react';
import {
  WalletProvider,
  HippoWalletAdapter,
  AptosWalletAdapter,
  HippoExtensionWalletAdapter,
  MartianWalletAdapter,
  FewchaWalletAdapter,
  PontemWalletAdapter,
  SpikaWalletAdapter,
  RiseWalletAdapter,
  FletchWalletAdapter,
  TokenPocketWalletAdapter,
  ONTOWalletAdapter,
  SafePalWalletAdapter,
  FoxWalletAdapter,
  SpacecyWalletAdapter
} from '@spacecydev/aptos-wallet-adapter';

const wallets = [
  new SpacecyWalletAdapter(),
  new HippoWalletAdapter(),
  new MartianWalletAdapter(),
  new AptosWalletAdapter(),
  new FewchaWalletAdapter(),
  new HippoExtensionWalletAdapter(),
  new PontemWalletAdapter(),
  new SpikaWalletAdapter(),
  new RiseWalletAdapter(),
  new FletchWalletAdapter(),
  new TokenPocketWalletAdapter(),
  new ONTOWalletAdapter(),
  new SafePalWalletAdapter(),
  new FoxWalletAdapter(),
];

const App: React.FC = () => {
  return (
    <WalletProvider
      wallets={wallets}
      autoConnect={true | false} /** allow auto wallet connection or not **/
      onError={(error: Error) => {
        console.log('Handle Error Message', error);
      }}>
      {/* your website */}
    </WalletProvider>
  );
};

export default App;

Web3 Hook

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

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

Connect & Disconnect

import { AptosWalletName, useWallet } from "@spacecydev/aptos-wallet-adapter"

...

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

/* No more manual connection required if you disable auto-connect mode while the previous select + connect will still work */

if (!connected) {
  return (
    <button
      onClick={() => {
        connect(walletName); // E.g. connecting to the Aptos official wallet
      }}
    >
      Connect
    </button>
  );
} else {
  return (
    <button
      onClick={() => {
        disconnect();
      }}
    >
      Disconnect
    </button>
  );
}