Skip to content

Latest commit

 

History

History
109 lines (86 loc) · 2.78 KB

wallet-adapter.md

File metadata and controls

109 lines (86 loc) · 2.78 KB

Wallet Adapter

Blocto is integrated with aptos wallet adapter (Aptos Labs), it's recommended to use the adapter to integrate with Blocto along with lots of other wallets, check out their docs for more details.

Installation

Install from npm/yarn/pnpm

{% tabs %} {% tab title="npm" %}

npm install @aptos-labs/wallet-adapter-react @blocto/aptos-wallet-adapter-plugin

{% endtab %}

{% tab title="yarn" %}

yarn add @aptos-labs/wallet-adapter-react @blocto/aptos-wallet-adapter-plugin

{% endtab %}

{% tab title="pnpm" %}

pnpm add @aptos-labs/wallet-adapter-react @blocto/aptos-wallet-adapter-plugin

{% endtab %} {% endtabs %}

Step 1 - Import Adapter

Import Aptos Adapter, bloctoWallet.

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

export default function Connect() {

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

    const onWalletSelect = (walletName) => {
        connect(walletName);
    };

    return (
        <div>
            {
                wallets.map((wallet) => (
                    <div key={wallet.name}>
                        {
                            !connected ? (
                                <button className="btn" onClick={() => onWalletSelect(wallet.name)}>
                                    <span>Connect {wallet.name}</span>
                                </button>
                            ) : (
                                <button className="btn" onClick={() => disconnect(wallet.name)}>
                                    <span>
                                        disconnect
                                    </span>
                                </button>
                            )
                        }
                    </div>

                ))
            }
        </div>

    )
}

Step 2 - Wrap providers

Wrap your application with AptosWalletAdapterProvider inject Wallet.

import {
  AptosWalletAdapterProvider,
  NetworkName,
} from '@aptos-labs/wallet-adapter-react';
import { BloctoWallet } from '@blocto/aptos-wallet-adapter-plugin';

const wallets = [
  new BloctoWallet({
    network: NetworkName.Testnet,
    // please register your app id at https://developers.blocto.app/
    bloctoAppId: "85d8d5db-e481-44f6-9363-7f7f4809eb39"
  })
];


const App = () => {
  return (
     <AptosWalletAdapterProvider
      plugins={wallets}
      autoConnect={false}
      onError={(error) => {
            console.log('Handle Error Message', error);
        }}
      >
      <App />
    </AptosWalletAdapterProvider>
  );
};

Sample Code

{% embed url="https://codesandbox.io/s/github/blocto/blocto-sdk-examples/tree/main/src/adapter/aptos/with-aptos-adapter?file=/src/App.js" %}