0.10.1 • Published 6 days ago
@pontem/aptos-wallet-adapter v0.10.1
@pontem/aptos-wallet-adapter
React and Vue WalletProvider
supporting loads of aptos wallets.
Forked and featured with wallet provider based on Vue.js/Pinia.js from Hippo Wallet Adapter.
Supports:
- Petra wallet
- Martian wallet
- Fewcha wallet
- Pontem Wallet
- Spika wallet
- Rise wallet
- HyperPay wallet
- Fletch wallet
- Spika web wallet
- Aptos snap
- Bitkeep wallet
- TokenPocket wallet
- Blocto wallet
- Nightly Wallet
- OpenBlock Wallet
- Spacecy wallet
Installation
with yarn
yarn add @pontem/aptos-wallet-adapter
with npm
npm install @pontem/aptos-wallet-adapter
Example for Vue
Dependencies
Vue app required 2 packages as dependency: Because Vue and Pinia is optional dependency inside @pontem/aptos-wallet-adapter
{
"dependencies": {
"vue": "3.2.40",
"pinia": "2.0.22",
...
}
}
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import { useWalletProviderStore } from "@pontem/aptos-wallet-adapter";
const app = createApp(App);
/**
* To solve issue with call pinia before pinia mounted we should use store here with pinia passed to store
* The order of next 3 lines matters.
* */
const pinia = createPinia();
app.use(pinia);
const _store = useWalletProviderStore(pinia);
app.mount("#app");
You can use both composition and options API
<script lang="ts">
import { storeToRefs } from "pinia";
import { computed, ref, defineComponent } from "vue";
import {
AptosWalletAdapter,
MartianWalletAdapter,
PontemWalletAdapter,
useWalletProviderStore,
WalletName,
} from "@pontem/aptos-wallet-adapter";
const defaultWalletName = "Pontem" as WalletName<"Pontem">;
const handleError = (error) => {
/* some fancy notify error callback or just console.log handle */
}
export default defineComponent({
name: "App",
setup: function () {
const store = useWalletProviderStore();
const walletAdapters = [new PontemWalletAdapter(), new MartianWalletAdapter(), new AptosWalletAdapter()];
const {
select,
connect,
disconnect,
signAndSubmitTransaction,
signTransaction,
signMessage,
init,
} = store; // this is methods:
/**
* select(walletName): selects one of walletAdapters(sets walletName to localstorage with localStorageKey)
* If autoConnect = true - also will connect wallet automatically.
* connect(): connect selected wallet (first need to call select and pass walletName).
* disconnect(): disconnects currently connected wallet.
* signAndSubmitTransaction(transactionPayload, options?): Signs and submits transaction and returns hash
* signTransaction(transactionPayload, options?): signs transaction and returns Uint8Array
* signMessage(signMessagePayload, options?): signs message and returns signMessageResponse
* init({
* wallets: array of wallet adapters.
* localStorageKey?: string which used as key to store selected walletName at localstorage.
* onError?: callback function to get an error message
* autoConnect?: boolean, if true enables autoConnection to keep wallet connected even if page reloaded.
* }): inits store with parameters
* */
// All refs from store should be extracted with storeToRefs to prevent breaking reactivity:
const {
wallets,
wallet,
connected,
connecting,
account,
network,
disconnecting,
autoConnect
} = storeToRefs(store);
/**
* wallets: Wallet[]; - array of walletAdapters, passed on init.
* wallet: Wallet | null; - currently selected wallet.
* connected: boolean; - true if selected wallet was succesfully connected
* connecting: boolean; - true while wallet is connecting
* account: AccountKeys | null; { address, publicKey, authKey } - current account data
* network: NetworkInfo | null; { name, chainId?, api? } current network data (if selected walletAdapter able to pass network)
* disconnecting: boolean; - true while wallet is disconnecting
* autoConnect: boolean; - autoConnect value, passed on init.
*/
// Init store should be called once, this method accepts object with next parameters:
init({
wallets: walletAdapters,
localStorageKey: "VueAdapterLocalStorage",
onError: handleError,
autoConnect: true,
});
</script>
Example for React
Here's an example of how we integrate the adapter into hippo's frontend:
import React from 'react';
import {
WalletProvider,
PontemWalletAdapter,
HippoWalletAdapter,
AptosWalletAdapter,
HippoExtensionWalletAdapter,
MartianWalletAdapter,
FewchaWalletAdapter,
SpikaWalletAdapter,
RiseWalletAdapter,
FletchWalletAdapter
} from '@pontem/aptos-wallet-adapter';
const wallets = [
new PontemWalletAdapter(),
new HippoWalletAdapter(),
new MartianWalletAdapter(),
new AptosWalletAdapter(),
new FewchaWalletAdapter(),
new HippoExtensionWalletAdapter(),
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;
import { useWallet } from '@pontem/aptos-wallet-adapter';
const { connected, account, network, ...rest } = useWallet();
/*
** Properties available: **
wallets: Wallet[]; - Array of wallets
wallet: Wallet | null; - Selected wallet
account: AccountKeys | null; { address, publicKey, authkey } - Wallet info: address,
network: NetworkInfo - { name, chainId?, api? }
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
options?: any
): Promise<PendingTransaction>; - function to sign and submit the transaction to chain
signTransaction(
transactionPayload,
options?: any
): Promise<Uint8Array> - signs transaction and returns Uint8Array
signMessage(
signMessagePayload,
options?: any
): Promise<signMessageResponse> - signs message and returns signMessageResponse
*/
import { AptosWalletName, useWallet } from "@pontem/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 SDK
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;
};
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
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();
}
}
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);
}
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);
}
0.10.1
6 days ago
0.10.0
4 months ago
0.9.2
5 months ago
0.9.1
10 months ago
0.8.5
11 months ago
0.8.4
11 months ago
0.8.7
11 months ago
0.8.6
11 months ago
0.9.0
11 months ago
0.8.1
11 months ago
0.8.0
11 months ago
0.8.3
11 months ago
0.8.2
11 months ago
0.7.2
1 year ago
0.7.1
1 year ago
0.6.7
1 year ago
0.6.9
1 year ago
0.6.8
1 year ago
0.7.0
1 year ago
0.6.6
1 year ago
0.6.5
1 year ago
0.6.4
1 year ago
0.6.3
2 years ago
0.6.2
2 years ago
0.6.1
2 years ago
0.6.0
2 years ago