Feat: Secondary Token Balances (#1679)

* RPC working from hackathon * Working as expected for setting balances in state, no rendering yet * Display but need to be abstracted and cleaned * Added layout and styling for secondary tokens along with rework of maximized account center layout, still need docs updates for secondary tokens * Fix compiler err * Add docks for secondaryTokens and screenshots to readme and docs of AC * Fix versioning of common * Bump common * Bump all versions required * Prettify common validation
blocknative · May 8, 2023 · 5153729 · 5153729
1 parent 09d228c
commit 5153729
Show file tree

Hide file tree

Showing 56 changed files with 633 additions and 262 deletions.
diff --git a/assets/account-center-example.png b/assets/account-center-example.png
diff --git a/docs/src/lib/assets/account-center-example.png b/docs/src/lib/assets/account-center-example.png
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
@@ -1,4 +1,5 @@
 <script>
+  import accountCenter from '$lib/assets/account-center-example'
   import walletModal from '$lib/assets/connect-modal.svg'
   import notifyCustomImg from '$lib/assets/notify-custom-example.png'
   import notifyImg from '$lib/assets/notify-example.png'
@@ -139,6 +140,7 @@ type Chain = {
   icon?: string // the icon to represent the chain
   publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet
   blockExplorerUrl?: string // also used when adding a new config to the wallet
+  secondaryTokens?: SecondaryTokens[] // An optional array of tokens to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled)
 }
 ```
 
@@ -255,18 +257,18 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](https://github.com/blocknative/web3-onboard/blob/develop/packages/core/src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
-For example, to update the connect interface language for Metamask, while giving a different message for other wallets, you can include the following: 
+For example, to update the connect interface language for Metamask, while giving a different message for other wallets, you can include the following:
 
 ```typescript
 i18n: {
-      en: {
-        connect: {
-          connectingWallet: {
-            paragraph: "{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}"
-          }
-        }
+  en: {
+    connect: {
+      connectingWallet: {
+        paragraph: '{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}'
       }
     }
+  }
+}
 ```
 
 MetaMask message:
@@ -275,7 +277,7 @@ MetaMask message:
 All other wallets:
 <img src="{customConnect1}" alt="Web3-Onboard connect wallet modal with custom message"/>
 
-Default Message- with no i18n override: 
+Default Message- with no i18n override:
 <img src="{customConnectDefault}" alt="Web3-Onboard connect wallet modal with default message"/>
 
 ---
@@ -340,6 +342,8 @@ type disableFontDownload = boolean // defaults to false
 
 An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
+<img src="{accountCenter}" alt="Web3-Onboard Account Center example"/>
+
 ```ts
 type AccountCenter = {
   enabled: boolean

diff --git a/packages/cede-store/package.json b/packages/cede-store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/cede-store",
-  "version": "2.0.0",
+  "version": "2.0.1-alpha.1",
   "description": "cede.store SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -70,6 +70,6 @@
   },
   "dependencies": {
     "@cedelabs/providers": "^0.0.7",
-    "@web3-onboard/common": "^2.3.0-alpha.1"
+    "@web3-onboard/common": "^2.3.2-alpha.1"
   }
 }
diff --git a/packages/coinbase/package.json b/packages/coinbase/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.2.2",
+  "version": "2.2.3-alpha.1",
   "description": "Coinbase SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -59,6 +59,6 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.6.0",
-    "@web3-onboard/common": "^2.3.1"
+    "@web3-onboard/common": "^2.3.2-alpha.1"
   }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
@@ -404,6 +404,12 @@ export interface Chain {
   label?: string
   /* Recommended to include. The native token symbol, eg ETH, BNB, MATIC */
   token?: TokenSymbol
+  /**
+   * An optional array of tokens to be available to the dapp in the
+   * app state object per wallet within the wallet account and displayed
+   * in Account Center (if enabled)
+   */
+  secondaryTokens?: SecondaryTokens[]
   /**
    * The color used to represent the chain and
    * will be used as a background for the icon
@@ -419,6 +425,23 @@ export interface Chain {
   blockExplorerUrl?: string
 }
 
+export interface SecondaryTokens {
+  /**
+   * Required - The onchain address of the token associated
+   * with the chain it is entered under
+   */
+  address: string
+  /**
+   * Required - The symbol of the token i.e. USDC, ETH, 1INCH
+   */
+  name: TokenSymbol
+  /**
+   * An optional svg or url string for the icon of the token.
+   * If an svg is used ensure the height/width is set to 100%
+   */
+  icon?: string
+}
+
 export type ChainWithDecimalId = Omit<Chain, 'id'> & { id: DecimalChainId }
 
 export type TokenSymbol = string // eg ETH

diff --git a/packages/common/src/validation.ts b/packages/common/src/validation.ts
@@ -31,12 +31,19 @@ export const providerConnectionInfoValidation = Joi.object({
   timeout: Joi.number()
 })
 
+const secondaryTokenValidation = Joi.object({
+  name: Joi.string().required(),
+  address: Joi.string().required(),
+  icon: Joi.string().optional()
+})
+
 export const chainValidation = Joi.object({
   namespace: chainNamespaceValidation,
   id: chainIdValidation.required(),
   rpcUrl: Joi.string(),
   label: Joi.string(),
   token: Joi.string(),
+  secondaryTokens: Joi.array().items(secondaryTokenValidation).optional(),
   icon: Joi.string(),
   color: Joi.string(),
   publicRpcUrl: Joi.string(),

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -74,7 +74,7 @@ type InitOptions = {
   accountCenter?: AccountCenterOptions
   /**
    * Opt in to Blocknative value add services (transaction updates) by providing
-   * your Blocknative API key, head to https://explorer.blocknative.com/account to sign 
+   * your Blocknative API key, head to https://explorer.blocknative.com/account to sign
    * up for free
    */
   apiKey?: string
@@ -132,6 +132,7 @@ type Chain = {
   icon?: string // the icon to represent the chain
   publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet
   blockExplorerUrl?: string // also used when adding a new config to the wallet
+  secondaryTokens?: SecondaryTokens[] // An optional array of tokens to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled)
 }
 ```
 
@@ -257,18 +258,18 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
-For example, to update the connect interface language for Metamask, while giving a different message for other wallets, you can include the following: 
+For example, to update the connect interface language for Metamask, while giving a different message for other wallets, you can include the following:
 
 ```typescript
 i18n: {
-      en: {
-        connect: {
-          connectingWallet: {
-            paragraph: "{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}"
-          }
-        }
+  en: {
+    connect: {
+      connectingWallet: {
+        paragraph: '{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}'
       }
     }
+  }
+}
 ```
 
 MetaMask message:
@@ -277,10 +278,9 @@ MetaMask message:
 All other wallets:
 <img src="https://github.com/blocknative/web3-onboard/blob/develop/assets/custom-connect-2.png?raw=true" />
 
-Default Message- with no i18n override: 
+Default Message- with no i18n override:
 <img src="https://github.com/blocknative/web3-onboard/blob/develop/assets/custom-connect-default.png?raw=true" />
 
-
 **`containerElements`**
 An object mapping for W3O components with the key being the DOM element to mount the specified component to.
 This defines the DOM container element for svelte to attach the component.
@@ -304,6 +304,8 @@ type ContainerElements = {
 **`accountCenter`**
 An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
+<img alt="Account Center UI Component" src="https://github.com/blocknative/web3-onboard/blob/develop/assets/account-center-example.png?raw=true" />
+
 ```typescript
 type AccountCenter = {
   enabled: boolean
@@ -384,7 +386,7 @@ If notifications are enabled, they can be fielded and handled through the onboar
 
 ```javascript
 const wallets = onboard.state.select('notifications')
-const { unsubscribe } = wallets.subscribe((update) =>
+const { unsubscribe } = wallets.subscribe(update =>
   console.log('transaction notifications: ', update)
 )
 
@@ -393,12 +395,12 @@ unsubscribe()
 ```
 
 ##### **Notifications as Toast Messages**
-The Notifications messages can also be used to send fully customized Dapp toast messages and updated. Check out the [customNotifications API docs for examples and code snippets](#customnotification) 
 
+The Notifications messages can also be used to send fully customized Dapp toast messages and updated. Check out the [customNotifications API docs for examples and code snippets](#customnotification)
 
 ```javascript
 const wallets = onboard.state.select('notifications')
-const { unsubscribe } = wallets.subscribe((update) =>
+const { unsubscribe } = wallets.subscribe(update =>
   console.log('transaction notifications: ', update)
 )
 
@@ -419,7 +421,9 @@ type Notify = {
    * Or return false to disable notification for this event
    * Or return undefined for a default notification
    */
-  transactionHandler?: (event: EthereumTransactionData) => TransactionHandlerReturn
+  transactionHandler?: (
+    event: EthereumTransactionData
+  ) => TransactionHandlerReturn
   position: CommonPositions
 }
 
@@ -610,6 +614,7 @@ const onboard = Onboard({
   }
 })
 ```
+
 ---
 
 ## Connecting a Wallet
@@ -942,10 +947,9 @@ The `customNotification` method also returns a `dismiss` method that is called w
 | `link`        | string   | Adds a link to the transaction hash                         |
 | `onClick`     | function | onClick handler for the notification element                |
 
-
 **`preflightNotifications`**
 
-Notify can be used to deliver standard notifications along with preflight updates by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` API action. 
+Notify can be used to deliver standard notifications along with preflight updates by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` API action.
 
 <img alt="Web3-Onboard UI Components" src="https://github.com/blocknative/web3-onboard/blob/develop/assets/notify-preflight-example.png?raw=true" />
 
@@ -962,6 +966,7 @@ Preflight event types include:
 This API call will return a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
 
 Example:
+
 ```typescript copy
 const balanceValue = Object.values(balance)[0]
 // if using ethers v6 this is:
@@ -975,13 +980,13 @@ const txDetails = {
 }
 
 const sendTransaction = () => {
-  return signer.sendTransaction(txDetails).then((tx) => tx.hash)
+  return signer.sendTransaction(txDetails).then(tx => tx.hash)
 }
 
-const gasPrice = () => ethersProvider.getGasPrice().then((res) => res.toString())
+const gasPrice = () => ethersProvider.getGasPrice().then(res => res.toString())
 
 const estimateGas = () => {
-  return ethersProvider.estimateGas(txDetails).then((res) => res.toString())
+  return ethersProvider.estimateGas(txDetails).then(res => res.toString())
 }
 const transactionHash = await onboard.state.actions.preflightNotifications({
   sendTransaction,

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.17.0",
+  "version": "2.18.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -85,7 +85,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.3.1",
+    "@web3-onboard/common": "^2.3.2-alpha.1",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.6.7",
     "bowser": "^2.11.0",

diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json
@@ -67,7 +67,6 @@
     "gettingStartedGuide": "Getting Started Guide",
     "smartContracts": "Smart Contract(s)",
     "explore": "Explore",
-    "backToApp": "Back to dapp",
     "poweredBy": "powered by",
     "addAccount": "Add Account",
     "setPrimaryAccount": "Set Primary Account",

diff --git a/packages/core/src/icons/blocknative-icon.ts b/packages/core/src/icons/blocknative-icon.ts
@@ -22,5 +22,4 @@ export default `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmln
 </clipPath>
 </defs>
 </svg>
-
 `
-Original file line number
+Diff line change
@@ Expand Up @@
     </clipPath>
     </defs>
     </svg>
     `