@aptstats/aptos-wallet-framework

aptos-wallet-framework

React WalletProvider supporting loads of aptos wallets.

This repo is initially forked from Hippo space, the reason for doing this is that original implementation supports a lot of wallets and put all the dependencies into one and I couldn't stand it.

This Repo takes almost the same code from the original one, but split all the extensions into different packages, by doing this, developers can choose to install packages freely without having to worry about extra wasted node modules.

Extension list

• AptosSnap-Wallet
• Bitkeep-Wallet
• Blocto-Wallet
• Coin98-Wallet
• Fewcha-Wallet
• Fletch-Wallet
• Fox-Wallet
• Hippo-Wallet
• HippoWeb-Wallet
• HyperPay-Wallet
• Martian-Wallet
• Nightly-Wallet
• OKX-Wallet
• ONTO-Wallet
• Petra-Wallet
• Pontem-Wallet
• Rise-Wallet
• SafePal-Wallet
• Spacecy-Wallet
• Spika-Wallet
• TokenPocket-Wallet

Advertisement.

• You are welcome to submit your projects to Aptos Network Stats

Installation

with yarn

yarn add @aptstats/aptos-wallet-framework

with npm

npm install @aptstats/aptos-wallet-framework

Examples

Wallet integration

Use React Provider

import React from 'react';
import { WalletProvider } from '@aptstats/aptos-wallet-framework';
import { PetraWalletAdapter } from '@aptstats/petra-wallet-extension';
import { SpacecyWalletAdapter } from '@aptstats/spacecy-wallet-extension';
import { OKXWalletAdapter } from '@aptstats/okx-wallet-extension';

const wallets = [new PetraWalletAdapter(), new SpacecyWalletAdapter(), new OKXWalletAdapter()];

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 'aptstats/aptos-wallet-adapter';

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

Connect & Disconnect

import { AptosWalletName, useWallet } from "@aptstats/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>
  );
}