From 7700d2ba695eabebe0c511659794dae14b528f54 Mon Sep 17 00:00:00 2001 From: Dmitry Kuksenko Date: Thu, 12 Jan 2023 13:36:06 +0300 Subject: [PATCH 1/3] feat(readme): update readme with fancy style --- README.md | 311 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 174 insertions(+), 137 deletions(-) diff --git a/README.md b/README.md index 7dff50b..3ac9da0 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ + # aptos-wallet-adapter React and Vue `WalletProvider` supporting loads of aptos wallets. @@ -5,15 +6,22 @@ Forked and featured with wallet provider based on Vue.js/Pinia.js from [Hippo Wa Supports: -- [Pontem Wallet](https://pontem.network/pontem-wallet) -- [Aptos official wallet](https://github.com/aptos-labs/aptos-core/releases/tag/wallet-v0.1.1) +- [Petra wallet](https://petra.app/) - [Martian wallet](https://martianwallet.xyz/) - [Fewcha wallet](https://fewcha.app/) -- [Hippo wallet](https://github.com/hippospace/hippo-wallet) -- [Hippo web wallet](https://hippo-wallet-test.web.app/) +- [Pontem Wallet](https://pontem.network/pontem-wallet) - [Spika wallet](https://spika.app) -- [Rise Wallet](https://rise) +- [Rise wallet](https://risewallet.io/) +- [HyperPay wallet](https://www.hyperpay.io/) - [Fletch wallet](http://fletchwallet.io/) +- [Spika web wallet](https://spika.app) +- [Aptos snap](https://chrome.google.com/webstore/detail/metamask-flask-developmen/ljfoeinjpaedjfecbmggjgodbgkmjkjk) +- [Bitkeep wallet](https://bitkeep.com/) +- [TokenPocket wallet](https://tokenpocket.pro) +- [Blocto wallet](https://portto.com/download) +- [Nightly Wallet](https://nightly.app/download) +- [OpenBlock Wallet](https://openblock.com) +- [Spacecy wallet](https://spacecywallet.com/) # Installation @@ -28,133 +36,10 @@ with `npm` ``` npm install @pontem/aptos-wallet-adapter ``` - -# Example for React - -## **Frontend Integration** - -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 ( - - ); -} else { - return ( - - ); -} -``` +

(back to top)

# Example for Vue - -# Installation +## Dependencies Vue app required 2 packages as dependency: Because Vue and Pinia is optional dependency inside @pontem/aptos-wallet-adapter @@ -169,7 +54,8 @@ Because Vue and Pinia is optional dependency inside @pontem/aptos-wallet-adapter } ``` -# Use Vue Wallet Provider +
+ Use Vue Wallet Provider ```typescript import { createApp } from "vue"; @@ -191,7 +77,10 @@ const _store = useWalletProviderStore(pinia); app.mount("#app"); ``` -# Init store inside Vue Component +
+ +
+ 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 @@ -275,8 +164,144 @@ export default defineComponent({ }); ``` +
+

(back to top)

-# Hippo Wallet Client + +# 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 ( + + ); +} else { + return ( + + ); +} +``` +
+

(back to top)

+ +# Hippo SDK + +
+ Hippo Wallet Client ```typescript import { HippoSwapClient, HippoWalletClient } from '@manahippo/hippo-sdk'; @@ -296,8 +321,10 @@ export const hippoWalletClient = async (account: ActiveAptosWallet) => { return walletClient; }; ``` +
-# Hippo Swap Client +
+ Hippo Swap Client ```typescript import { HippoSwapClient, HippoWalletClient } from '@manahippo/hippo-sdk'; @@ -311,10 +338,13 @@ export const hippoSwapClient = async () => { return swapClient; }; ``` +
+

(back to top)

# Submit and sign transaction -**Request faucet** +
+ Request faucet ```typescript const { signAndSubmitTransaction } = useWallet(); @@ -328,8 +358,10 @@ if (payload) { } } ``` +
-**Swap Token** +
+ Swap Token ```typescript const bestQuote = await hippoSwap.getBestQuoteBySymbols(fromSymbol, toSymbol, uiAmtIn, 3); @@ -343,8 +375,10 @@ if (result) { setRefresh(true); } ``` +
-**Deposit Transaction** +
+ Deposit Transaction ```typescript const pool = hippoSwap.getDirectPoolsBySymbolsAndPoolType(lhsSymbol, rhsSymbol, poolType); @@ -358,3 +392,6 @@ if (result) { setRefresh(true); } ``` +
+

(back to top)

+ From 51e2a9ce3fe774157a66105bbb50837a8ce61e24 Mon Sep 17 00:00:00 2001 From: Dmitry Kuksenko Date: Thu, 12 Jan 2023 13:52:13 +0300 Subject: [PATCH 2/3] feat(msafe): update msafe wallet, update blockto wallet --- README.md | 2 +- package.json | 2 +- src/WalletAdapters/BloctoWallet.ts | 9 ++-- src/WalletAdapters/MsafeWallet.ts | 76 +++++++++++++++++++++--------- yarn.lock | 8 ++-- 5 files changed, 65 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 3ac9da0..b481bf4 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -# aptos-wallet-adapter +# @pontem/aptos-wallet-adapter ![npm](https://img.shields.io/npm/v/@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](https://github.com/hippospace/aptos-wallet-adapter). diff --git a/package.json b/package.json index 5a5fd0b..3328bb2 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "aptos": "1.3.15", "eventemitter3": "4.0.7", "js-sha3": "0.8.0", - "msafe-wallet": "^1.1.9" + "msafe-wallet": "~2.1.3" }, "optionalDependencies": { "react": "^18.X.X || 17.X.X", diff --git a/src/WalletAdapters/BloctoWallet.ts b/src/WalletAdapters/BloctoWallet.ts index 4776802..98b80de 100644 --- a/src/WalletAdapters/BloctoWallet.ts +++ b/src/WalletAdapters/BloctoWallet.ts @@ -65,10 +65,10 @@ export class BloctoWalletAdapter extends BaseWalletAdapter { protected _wallet: any | null; constructor({ - network = WalletAdapterNetwork.Mainnet, - timeout = 10000, - bloctoAppId - }: BloctoWalletAdapterConfig) { + network = WalletAdapterNetwork.Mainnet, + timeout = 10000, + bloctoAppId + }: BloctoWalletAdapterConfig) { super(); const sdk = new BloctoSDK({ @@ -203,7 +203,6 @@ export class BloctoWalletAdapter extends BaseWalletAdapter { try { try { const provider = this._provider; - // @ts-ignore const response = await provider?.signAndSubmitTransaction(transaction, options); if (response) { return { hash: response.hash }; diff --git a/src/WalletAdapters/MsafeWallet.ts b/src/WalletAdapters/MsafeWallet.ts index e854dee..3cdf29e 100644 --- a/src/WalletAdapters/MsafeWallet.ts +++ b/src/WalletAdapters/MsafeWallet.ts @@ -20,61 +20,86 @@ import { WalletName, WalletReadyState } from './BaseAdapter'; -import { Account, MsafeWallet } from 'msafe-wallet'; +import { Account, MSafeWallet } from 'msafe-wallet'; -export const MsafeWalletName = 'Msafe' as WalletName<'Msafe'>; +export const MSafeWalletName = 'MSafe' as WalletName<'MSafe'>; -interface MsafeAccount { +interface MSafeAccount { address: MaybeHexString; - publicKey: MaybeHexString; + publicKey: MaybeHexString[]; authKey: MaybeHexString; + minKeysRequired: number; isConnected: boolean; } -export class MsafeWalletAdapter extends BaseWalletAdapter { - name = MsafeWalletName; - - url = MsafeWallet.getOrigin(); +export class MSafeWalletAdapter extends BaseWalletAdapter { + name = MSafeWalletName; icon = 'https://raw.githubusercontent.com/hippospace/aptos-wallet-adapter/main/logos/msafe.png'; - protected _provider: MsafeWallet | undefined; + protected _provider: MSafeWallet | undefined; protected _network: WalletAdapterNetwork; protected _chainId: string; - // MsafeWallet only works in msafe appstore iframe - protected _readyState: WalletReadyState = MsafeWallet.inMsafeWallet() + // MSafeWallet only works in msafe appstore iframe + protected _readyState: WalletReadyState = MSafeWallet.inMSafeWallet() ? WalletReadyState.NotDetected : WalletReadyState.Unsupported; protected _connecting: boolean; - protected _wallet: MsafeAccount | null; - - constructor(origin: 'Mainnet' | 'Testnet' | string = 'Mainnet') { + protected _wallet: MSafeAccount | null; + + private _origin?: string | string[]; + + /** + * @description create a MSafeWalletAdapter + * @param origin allowlist of msafe website url, omit means accpets all msafe websites. you can pass a single url or an array of urls. + * @example + * // 1. Initialize MSafeWalletAdapter with default allowlist: + * new MSafeWalletAdapter(); + * // 2. Initialize MSafeWalletAdapter with a single MSafe url: + * new MSafeWalletAdapter('https://app.m-safe.io'); + * // 3. Initialize MSafeWalletAdapter with an array of MSafe urls: + * new MSafeWalletAdapter(['https://app.m-safe.io', 'https://testnet.m-safe.io', 'https://partner.m-safe.io']); + * // 4. Initialize MSafeWalletAdapter with a single network type: + * new MSafeWalletAdapter('Mainnet'); + * // 5. Initialize MSafeWalletAdapter with an array of network types: + * new MSafeWalletAdapter(['Mainnet', 'Testnet', 'Partner']); + */ + constructor(origin?: string | string[]) { super(); this._network = undefined; this._connecting = false; - const msafeOrigin = MsafeWallet.getOrigin(origin); - this.url = MsafeWallet.getAppUrl(origin); + this._origin = origin; if (this._readyState === WalletReadyState.NotDetected) { - MsafeWallet.new(msafeOrigin) + MSafeWallet.new(origin) .then((msafe) => { this._provider = msafe; this._readyState = WalletReadyState.Installed; this.emit('readyStateChange', this._readyState); }) - .catch((e) => console.log(e)); + .catch((e) => { + this._readyState = WalletReadyState.Unsupported; + this.emit('readyStateChange', this._readyState); + console.error('MSafe connect error:', e); + }); } } + /// fix issue of next.js: access url via getter to avoid access window object in constructor + get url() { + return MSafeWallet.getAppUrl(this._origin instanceof Array ? this._origin[0] : this._origin); + } + get publicAccount(): AccountKeys { return { - publicKey: this._wallet?.publicKey || null, - address: this._wallet?.address || null, - authKey: this._wallet?.authKey || null + publicKey: this._wallet?.publicKey, + address: this._wallet?.address, + authKey: this._wallet?.authKey, + minKeysRequired: this._wallet?.minKeysRequired }; } @@ -260,3 +285,12 @@ export class MsafeWalletAdapter extends BaseWalletAdapter { } } } + +/** + * @deprecated Use `MSafeWalletName` instead. + */ +export const MsafeWalletName = MSafeWalletName; +/** + * @deprecated Use `MSafeWalletAdapter` instead. + */ +export class MsafeWalletAdapter extends MSafeWalletAdapter {} diff --git a/yarn.lock b/yarn.lock index cbbfbdf..ae190ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -809,10 +809,10 @@ minimatch@^3.1.2: dependencies: brace-expansion "^1.1.7" -msafe-wallet@^1.1.9: - version "1.1.9" - resolved "https://registry.yarnpkg.com/msafe-wallet/-/msafe-wallet-1.1.9.tgz#594a0f47624125e4e5756f6547a6e13a620664b2" - integrity sha512-jTLcDkR5xe+PMeIPhxSbnHRiWWLh4Fct4x2OUPjYIouRDg7wAUQkxP1WsArkTJufPFD4RTtrjxw17J71ar+5IQ== +msafe-wallet@~2.1.3: + version "2.1.4" + resolved "https://registry.yarnpkg.com/msafe-wallet/-/msafe-wallet-2.1.4.tgz#993e2261809c95741360debd3f6000c1d14a7b1f" + integrity sha512-n27EGv34sMU12QufanlMn8NwCe8MgzIb7K1waDQVSS8icmmsruCrJCqAQMgjmgsSROeX2i4Y3zOuXVza2KJGXg== dependencies: buffer "^6.0.3" json-rpc-protocol "^0.13.2" From 0762c5c9590af2a5c303a5b7e3d2195d382b26af Mon Sep 17 00:00:00 2001 From: Dmitry Kuksenko Date: Thu, 12 Jan 2023 14:04:55 +0300 Subject: [PATCH 3/3] feat(readme): add badges and update package.json --- README.md | 7 ++++++- package.json | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b481bf4..5a1ebf3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ -# @pontem/aptos-wallet-adapter ![npm](https://img.shields.io/npm/v/@pontem/aptos-wallet-adapter) +# @pontem/aptos-wallet-adapter + +![npm](https://img.shields.io/npm/v/@pontem/aptos-wallet-adapter?style=for-the-badge) +![GitHub forks](https://img.shields.io/github/forks/pontem-network/wallet-adapter?style=for-the-badge) +![GitHub Repo stars](https://img.shields.io/github/stars/pontem-network/wallet-adapter?style=for-the-badge) +![GitHub contributors](https://img.shields.io/github/contributors/pontem-network/wallet-adapter?style=for-the-badge) 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](https://github.com/hippospace/aptos-wallet-adapter). diff --git a/package.json b/package.json index 3328bb2..7bffe0d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pontem/aptos-wallet-adapter", - "version": "0.6.9", + "version": "0.7.0", "description": "Wallet adapter with supporting Vue and React", "main": "./dist/index.js", "types": "./dist/index.d.ts",