@blocto/aptos-wallet-adapter
v0.1.3
Published
React `WalletProvider` supporting loads of aptos wallets.
Downloads
12
Keywords
Readme
aptos-wallet-adapter
React WalletProvider
supporting loads of aptos wallets.
Supports:
- Aptos official wallet
- Petra wallet
- Martian wallet
- Fewcha wallet
- Hippo wallet
- Hippo web wallet
- Pontem Wallet
- Spika wallet
- Rise wallet
- HyperPay wallet
- Fletch wallet
- Aptos snap
- Blocto wallet
Working on (PR welcome):
Installation
with yarn
yarn add @blocto/aptos-wallet-adapter
with npm
npm install @blocto/aptos-wallet-adapter
Examples
Frontend Integration
Here's an example of how we integrate the adapter into hippo's frontend:
Wallet integration
Wallets source code here.
Use React Provider
import React from 'react';
import {
WalletProvider,
HippoWalletAdapter,
AptosWalletAdapter,
HippoExtensionWalletAdapter,
MartianWalletAdapter,
FewchaWalletAdapter,
PontemWalletAdapter,
SpikaWalletAdapter,
RiseWalletAdapter,
FletchWalletAdapter
} from '@blocto/aptos-wallet-adapter';
const wallets = [
new HippoWalletAdapter(),
new MartianWalletAdapter(),
new AptosWalletAdapter(),
new FewchaWalletAdapter(),
new HippoExtensionWalletAdapter(),
new PontemWalletAdapter(),
new SpikaWalletAdapter(),
new RiseWalletAdapter(),
new FletchWalletAdapter()
];
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 '@blocto/aptos-wallet-adapter';
const { connected, account, network, ...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 { AptosWalletName, useWallet } from "@blocto/aptos-wallet-adapter"
...
const { connect, disconnect, connected, select } = useWallet();
/** If auto-connect is not enabled, you will require to do the connect() manually **/
useEffect(() => {
if (!autoConnect && currentWallet?.adapter) {
connect();
}
}, [autoConnect, currentWallet, connect]);
/** this is only required if you do not want auto connect wallet **/
if (!connected) {
return (
<button
onClick={() => {
select(); // E.g. connecting to the Aptos official wallet (Breaking Change)
}}
>
Connect
</button>
);
} else {
return (
<button
onClick={() => {
disconnect();
}}
>
Disconnect
</button>
);
}
Hippo Wallet Client
import { HippoSwapClient, HippoWalletClient } from '@manahippo/hippo-sdk';
import { getParserRepo } from '@manahippo/hippo-sdk';
export const hippoWalletClient = async (account: ActiveAptosWallet) => {
if (!account) return undefined;
const { netConf } = readConfig();
const repo = getParserRepo();
const walletClient = await HippoWalletClient.createInTwoCalls(
netConf,
aptosClient,
repo,
account
);
return walletClient;
};
Hippo Swap Client
import { HippoSwapClient, HippoWalletClient } from '@manahippo/hippo-sdk';
import { getParserRepo } from '@manahippo/hippo-sdk/';
export const hippoSwapClient = async () => {
const { netConf } = readConfig();
const repo = getParserRepo();
const swapClient = await HippoSwapClient.createInOneCall(netConf, aptosClient, repo);
return swapClient;
};
Submit and sign transaction
Request faucet
const { signAndSubmitTransaction } = useWallet();
const payload = await hippoWallet?.makeFaucetMintToPayload(uiAmtUsed, symbol);
if (payload) {
const result = await signAndSubmitTransaction(payload);
if (result) {
message.success('Transaction Success');
await hippoWallet?.refreshStores();
}
}
Swap Token
const bestQuote = await hippoSwap.getBestQuoteBySymbols(fromSymbol, toSymbol, uiAmtIn, 3);
if (!bestQuote) {
throw new Error(`No route exists from ${fromSymbol} to ${toSymbol}`);
}
const payload = await bestQuote.bestRoute.makeSwapPayload(uiAmtIn, uiAmtOutMin);
const result = await signAndSubmitTransaction(payload);
if (result) {
message.success('Transaction Success');
setRefresh(true);
}
Deposit Transaction
const pool = hippoSwap.getDirectPoolsBySymbolsAndPoolType(lhsSymbol, rhsSymbol, poolType);
if (pool.length === 0) {
throw new Error('Desired pool does not exist');
}
const payload = await pool[0].makeAddLiquidityPayload(lhsUiAmt, rhsUiAmt);
const result = await signAndSubmitTransaction(payload);
if (result) {
message.success('Transaction Success');
setRefresh(true);
}