(back to top )
# Example for Vue
## Dependencies
Vue app required 2 packages as dependency:
Because Vue and Pinia is optional dependency inside @pontem/aptos-wallet-adapter
```json
{
"dependencies": {
"vue": "3.2.40",
"pinia": "2.0.22",
...
}
}
```
Use Vue Wallet Provider
```typescript
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");
```
Init store inside Vue Component
You can use both [composition](https://vuejs.org/guide/extras/composition-api-faq.html) and [options](https://vuejs.org/guide/typescript/options-api.html) API
```typescript
```
(back to top )
# Example for React
Here's an example of how we integrate the adapter into [hippo's frontend](https://github.com/hippospace/hippo-frontend/blob/main/src/Providers.tsx):
Use React Provider
```typescript
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 (
{
console.log('Handle Error Message', error);
}}>
{/* your website */}
);
};
export default App;
```
Web3 Hook
```typescript
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; - trigger connect popup
disconnect(): Promise; - trigger disconnect action
signAndSubmitTransaction(
transaction: TransactionPayload
options?: any
): Promise; - function to sign and submit the transaction to chain
signTransaction(
transactionPayload,
options?: any
): Promise - signs transaction and returns Uint8Array
signMessage(
signMessagePayload,
options?: any
): Promise - signs message and returns signMessageResponse
*/
```
Connect & Disconnect
```typescript
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 (
{
select(); // E.g. connecting to the Aptos official wallet (Breaking Change)
}}
>
Connect
);
} else {
return (
{
disconnect();
}}
>
Disconnect
);
}
```
(back to top )
# Hippo SDK
Hippo Wallet Client
```typescript
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
```typescript
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;
};
```
(back to top )
# Submit and sign transaction
Request faucet
```typescript
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
```typescript
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
```typescript
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);
}
```
(back to top )