From 98cb9a84b55b3cee7bd1e1f80c682bbcfdf6aa46 Mon Sep 17 00:00:00 2001 From: Kien Ngo Date: Mon, 31 Jul 2023 12:18:09 -0400 Subject: [PATCH] Add docs for Zerion wallet (#784) * Add docs for Zerion wallet * Fix walletconnect option link * Update ZerionWallet class --------- Co-authored-by: samina <57885104+saminacodes@users.noreply.github.com> Co-authored-by: Manan Tank --- docs/onboarding/14 Wallet/0 Overview.mdx | 8 + .../14 Wallet/1 Wallets/MetaMask.mdx | 24 + .../14 Wallet/1 Wallets/Trust Wallet.mdx | 21 +- .../14 Wallet/1 Wallets/Zerion Wallet.mdx | 545 ++++++++++++++++++ static/assets/wallets/zerion.svg | 11 + 5 files changed, 604 insertions(+), 5 deletions(-) create mode 100644 docs/onboarding/14 Wallet/1 Wallets/Zerion Wallet.mdx create mode 100644 static/assets/wallets/zerion.svg diff --git a/docs/onboarding/14 Wallet/0 Overview.mdx b/docs/onboarding/14 Wallet/0 Overview.mdx index ddc80936a..a1b2ebb29 100644 --- a/docs/onboarding/14 Wallet/0 Overview.mdx +++ b/docs/onboarding/14 Wallet/0 Overview.mdx @@ -123,6 +123,14 @@ Access the largest catalog of wallets, from custodial to MPC to smart contracts. description="Connect a wallet directly by a private key" /> +
+ +
## Features diff --git a/docs/onboarding/14 Wallet/1 Wallets/MetaMask.mdx b/docs/onboarding/14 Wallet/1 Wallets/MetaMask.mdx index 31e8baf7d..5b6834efa 100644 --- a/docs/onboarding/14 Wallet/1 Wallets/MetaMask.mdx +++ b/docs/onboarding/14 Wallet/1 Wallets/MetaMask.mdx @@ -31,6 +31,18 @@ Provide `clientId` to use the thirdweb RPCs for given `chains` You can create a client ID for your application from [thirdweb dashboard](https://thirdweb.com/create-api-key). +```javascript +import { MetaMaskWallet } from "@thirdweb-dev/wallets"; + +const wallet = new MetaMaskWallet( + // highlight-start + { + clientId: "YOUR_CLIENT_ID", + }, + // highlight-end +); +``` + @@ -42,6 +54,18 @@ This is only relevant if you want to use [WalletConnect](https://walletconnect.c This `projectId` can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com/). It is highly recommended to use your own project id and only use the default one for testing purposes. +```javascript +import { MetaMaskWallet } from "@thirdweb-dev/wallets"; + +const wallet = new MetaMaskWallet( + // highlight-start + { + projectId: "YOUR_WALLET_CONNECT_PROJECT_ID", + }, + // highlight-end +); +``` + diff --git a/docs/onboarding/14 Wallet/1 Wallets/Trust Wallet.mdx b/docs/onboarding/14 Wallet/1 Wallets/Trust Wallet.mdx index cf3725c2f..ea1794f93 100644 --- a/docs/onboarding/14 Wallet/1 Wallets/Trust Wallet.mdx +++ b/docs/onboarding/14 Wallet/1 Wallets/Trust Wallet.mdx @@ -31,17 +31,28 @@ Provide `clientId` to use the thirdweb RPCs for given `chains` You can create a client ID for your application from [thirdweb dashboard](https://thirdweb.com/create-api-key). +```javascript +import { TrustWallet } from "@thirdweb-dev/wallets"; + +const wallet = new TrustWallet( + // highlight-start + { + clientId: "YOUR_CLIENT_ID", + }, + // highlight-end +); +``` +
- projectId (recommended) + projectId (recommended)
-Your project's unique identifier for Wallet Connect. +This is only relevant if you want to use [WalletConnect](https://walletconnect.com/) for connecting to Zerion wallet mobile app when MetaMask is not injected. -Defaults to a common thirdweb projectId. We recommend getting your own projectId at -[cloud.walletconnect.com](https://cloud.walletconnect.com) when launching your project. +This `projectId` can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com/). It is highly recommended to use your own project id and only use the default one for testing purposes. ```javascript import { TrustWallet } from "@thirdweb-dev/wallets"; @@ -49,7 +60,7 @@ import { TrustWallet } from "@thirdweb-dev/wallets"; const wallet = new TrustWallet( // highlight-start { - projectId: "", + projectId: "YOUR_WALLET_CONNECT_PROJECT_ID", }, // highlight-end ); diff --git a/docs/onboarding/14 Wallet/1 Wallets/Zerion Wallet.mdx b/docs/onboarding/14 Wallet/1 Wallets/Zerion Wallet.mdx new file mode 100644 index 000000000..6c30e68b6 --- /dev/null +++ b/docs/onboarding/14 Wallet/1 Wallets/Zerion Wallet.mdx @@ -0,0 +1,545 @@ +--- +slug: /wallet/zerion-wallet +title: Zerion Wallet +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import CodeBlock from "@theme/CodeBlock"; + +Prompt users to connect to their [Zerion wallet](https://zerion.io/). + +## Usage + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; + +const wallet = new ZerionWallet(); + +wallet.connect(); +``` + +## Configuration + +Optionally, provide a configuration object when instantiating the `ZerionWallet` class. + +
+ clientId (recommended) +
+ +Provide `clientId` to use the thirdweb RPCs for given `chains` + +You can create a client ID for your application from [thirdweb dashboard](https://thirdweb.com/create-api-key). + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; + +const wallet = new ZerionWallet( + // highlight-start + { + clientId: "YOUR_CLIENT_ID", + }, + // highlight-end +); +``` + +
+
+ +
+ projectId (recommended) +
+ +This is only relevant if you want to use [WalletConnect](https://walletconnect.com/) for connecting to Zerion wallet mobile app when MetaMask is not injected. + +This `projectId` can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com/). It is highly recommended to use your own project id and only use the default one for testing purposes. + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; + +const wallet = new ZerionWallet( + // highlight-start + { + projectId: "YOUR_WALLET_CONNECT_PROJECT_ID", + }, + // highlight-end +); +``` + +
+
+ +
+ qrcode +
+ +Whether to open the default Wallet Connect QR code Modal for connecting to Zerion Wallet on mobile +(if Zerion is not injected when calling `connect()`). + +Must be a `boolean`. Defaults to `false`. + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; + +const walletWithOptions = new ZerionWallet( + // highlight-start + { + qrcode: false, + }, + // highlight-end +); +``` + +
+
+ +
+ chains +
+ +Provide an array of chains you want to support. + +Must be an array of `Chain` objects, from the [`@thirdweb-dev/chains`](https://www.npmjs.com/package/@thirdweb-dev/chains) package. + +Defaults to our [default chains](/react/react.thirdwebprovider#default-chains). + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; +import { Ethereum } from "@thirdweb-dev/chains"; + +const wallet = new ZerionWallet( + // highlight-start + { + chains: [Ethereum], + }, + // highlight-end +); +``` + +
+
+ +
+ dappMetadata +
+ +Information about your app that the wallet will display when your app tries to connect to it. + +Must be an object containing `name`, `url`, and optionally `description` and `logoUrl` properties. + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; + +const wallet = new ZerionWallet({ + // highlight-start + dappMetadata: { + name: "thirdweb powered dApp", + url: "https://thirdweb.com", + description: "thirdweb powered dApp", + logoUrl: "https://thirdweb.com/favicon.ico", + }, + // highlight-end +}); +``` + +
+
+ +
+ qrModalOptions +
+ +Zerion Wallet is an implementation of our WalletConnect wallet. You can use +WalletConnect's [options](https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/options) to customize the QR Code Modal. + +### Type + +```typescript +type QRModalOptions = { + themeVariables?: { + "--wcm-z-index"?: string; + "--wcm-accent-color"?: string; + "--wcm-accent-fill-color"?: string; + // ... and more + }; + themeMode?: "dark" | "light"; + standaloneChains?: string[]; + mobileWallets?: MobileWallet[]; + desktopWallets?: DesktopWallet[]; + walletImages?: Record; + chainImages?: Record; + tokenImages?: Record; + tokenContracts?: Record; + enableNetworkView?: boolean; + enableAccountView?: boolean; + enableExplorer?: boolean; + explorerRecommendedWalletIds?: string[] | "NONE"; + explorerExcludedWalletIds?: string[] | "ALL"; + termsOfServiceUrl?: string; + privacyPolicyUrl?: string; +}; + +interface MobileWallet { + id: string; + name: string; + links: { + universal: string; + native?: string; + }; +} + +interface DesktopWallet { + id: string; + name: string; + links: { + native: string; + universal: string; + }; +} +``` + +
+ themeVariables +
+ +Allows to override Web3Modal's CSS styles. See [theming](https://docs.walletconnect.com/2.0/web3modal/theming) for Info. + +
+
+ +
+ themeMode +
+ +Puts Modal into dark or light mode. Defaults to the user's system preference. + +
+
+ +
+ standaloneChains +
+ +When using Web3Modal in standalone mode (without wagmi) you can define an array of custom chains via this option. + +Defaults to `undefined` + +### Example + +```javascript +standaloneChains: [ + "eip155:1", + "solana:4sGjMW1sUnHzSxGspuhpqLDx6wiyjNtZ", + "cosmos:cosmoshub-4", + "polkadot:91b171bb158e2d3848fa23a9f1c25182", +]; +``` + +
+
+ +
+ mobileWallets +
+ +You can define an array of custom mobile wallets. + +Note: you will also need to add appropriate wallet images in walletImages. + +Native link represents deep-linking URL like `rainbow://` and Universal link represent webpage link that can redirect to the app or fallback page. +Defaults to `undefined` + +```typescript +mobileWallets: [ + { + id: string, + name: string, + links: { + native: string + universal: string, + }, + }, +]; +``` + +
+
+ +
+ desktopWallets +
+ +You can define an array of custom desktop or web-based wallets. + +Note: you will also need to add appropriate wallet images in walletImages. + +Native link represents deep linking url like `ledgerlive://` and Universal link represents webpage link that can redirect to the app or fallback page. + +Defaults to `undefined` + +```typescript +desktopWallets: [ + { + id: string, + name: string, + links: { + native: string + universal: string, + }, + }, +]; +``` + +
+
+ +
+ walletImages +
+ +an Array of wallet ids and their logo mappings. + +This will override default logos. + +Ids in this case can be: Explorer ids, wallet ids you provided in mobileWallets or desktopWallets and Wagmi connector ids. + +Defaults to `undefined` + +### Example + +```typescript +walletImages: { + rainbow: "/images/rainbow.webp", + metaMask: "/images/metamask.webp", +}; +``` + +
+
+ +
+ chainImages +
+ +an Array of chain ids and their logo mappings. + +This will override default logos. + +You can find detailed chain data at [chainlist.org](https://chainlist.org/) + +Defaults to `undefined` + +### Example + +```javascript +chainImages: { + 1: "/images/ethereum.webp", + 137: "/images/polygon.webp", +}; +``` + +
+
+ +
+ tokenImages +
+ +An array of token symbols and their logo mappings. + +Defaults to `undefined` + +### Example + +```javascript +tokenImages: { + ETH: "/images/eth.webp", + AVAX: "/images/avax.webp", +}; +``` + +
+
+ +
+ tokenContracts +
+ +Allows to override default token(s) address for each chain to show custom balances in account view. + +Defaults to `undefined` + +### Example + +```javascript +tokenContracts: { + 1: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', + 137: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174' +} +``` + +
+
+ +
+ enableNetworkView +
+ +If more than 1 chain is provided in the modal, users will be shown network selection view before selecting a wallet. + +This option can enable or disable this behavior. + +Defaults to `false` + +
+
+ +
+ enableAccountView +
+ +Option to enable or disable the modal's account view. + +default is `true` + +
+
+ +
+ enableExplorer +
+ +Option to enable or disable wallet fetching from [Explorer](https://walletconnect.com/explorer?type=wallet). + +Defaults to `true` + +
+
+ +
+ explorerRecommendedWalletIds +
+ +Allows to override default recommended wallets that are fetched from Explorer API. + +You can define an array of wallet ids you'd like to prioritize (order is respected). + +You can get/copy these ids from the Explorer link mentioned before. + +If you want to completely disable recommended wallets, you can set this option to `"NONE"`. + +Defaults to `undefined` + +### Example + +```javascript +explorerRecommendedWalletIds: [ + "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", + "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0", +]; +// -- or -- // +explorerRecommendedWalletIds: "NONE"; +``` + +
+
+ +
+ explorerExcludedWalletIds +
+ +Allows to exclude wallets that are fetched from Explorer API. + +You can define an array of wallet ids you'd like to exclude. + +You can get/copy these ids from the explorer link mentioned before. + +If you want to exclude all wallets, you can set this option to `"ALL"`, however, if `explorerRecommendedWalletIds` are defined, they will still be fetched. + +Defaults to `undefined` + +### Example + +```javascript +explorerExcludedWalletIds: [ + "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", + "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0", +]; +// -- or -- // +explorerExcludedWalletIds: "ALL"; +``` + +
+
+ +
+ termsOfServiceUrl +
+ +String URL to your terms of service page, if specified will append a special "legal info" footer to the modal. + +Defaults to `undefined` + +
+
+ +
+ privacyPolicyUrl +
+ +String URL to your privacy policy page, if specified will append a special "legal info" footer to the modal. + +Defaults to `undefined` + +
+
+ +
+
+ +
+ walletStorage +
+ +Some wallets need to store data in persistent storage. This is the storage that will be used for that. + +Must be an object conforming to the `AsyncStorage` interface: + +```typescript +export interface AsyncStorage { + getItem(key: string): Promise; + setItem(key: string, value: string): Promise; + removeItem(key: string): Promise; +} +``` + +Example: + +```javascript +import { ZerionWallet } from "@thirdweb-dev/wallets"; + +const wallet = new ZerionWallet( + // highlight-start + { + walletStorage: { + getItem: (key) => { + // Implement your own storage logic here + }, + removeItem: (key) => { + // Implement your own storage logic here + }, + setItem: (key, value) => { + // Implement your own storage logic here + }, + }, + }, + // highlight-end +); +``` + +
+
+ +## Methods + +Inherits all the public methods from the [`AbstractClientWallet`](interfaces/abstract-client-wallet) class. diff --git a/static/assets/wallets/zerion.svg b/static/assets/wallets/zerion.svg new file mode 100644 index 000000000..3eb3b917b --- /dev/null +++ b/static/assets/wallets/zerion.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +