Comment on page
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.
Install from npm/yarn/pnpm
npm
yarn
pnpm
npm install @aptos-labs/wallet-adapter-react @blocto/aptos-wallet-adapter-plugin
yarn add @aptos-labs/wallet-adapter-react @blocto/aptos-wallet-adapter-plugin
pnpm add @aptos-labs/wallet-adapter-react @blocto/aptos-wallet-adapter-plugin
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>
)
}
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>
);
};
Last modified 4d ago