Fix: Secondary Token Symbol fetch and docs (#1690)

* Fixing

* Update SecondaryToken type

* Add max of 5 tokens to secondaryTokens, add error handling in html, add docs update

* Bump all package versions

* Revert node version changes for web3auth

Author: Adamj1232

.circleci/config.yml

@@ -287,7 +287,7 @@ jobs:
       - node-build-steps
   build-web3auth:
     docker:
-      - image: cimg/node:16.18.1
+      - image: cimg/node:16.13.1
     working_directory: ~/web3-onboard-monorepo/packages/web3auth
     steps:
       - node-build-steps
@@ -511,7 +511,7 @@ jobs:
       - node-staging-build-steps
   build-staging-web3auth:
     docker:
-      - image: cimg/node:16.18.1
+      - image: cimg/node:16.13.1
     working_directory: ~/web3-onboard-monorepo/packages/web3auth
     steps:
       - node-staging-build-steps

docs/src/routes/docs/[...3]modules/core.md

@@ -140,7 +140,20 @@ 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)
+  secondaryTokens?: SecondaryTokens[] // An optional array of tokens (max of 5) to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled)
+}
+
+interface SecondaryTokens {
+  /**
+   * Required - The onchain address of the token associated
+   * with the chain it is entered under
+   */
+  address: string
+  /**
+   * 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
 }
 ```
 

packages/cede-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/cede-store",
-  "version": "2.0.1-alpha.1",
+  "version": "2.0.1-alpha.2",
   "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.2-alpha.1"
+    "@web3-onboard/common": "^2.3.2-alpha.2"
   }
 }

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.2.3-alpha.1",
+  "version": "2.2.3-alpha.2",
   "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.2-alpha.1"
+    "@web3-onboard/common": "^2.3.2-alpha.2"
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.3.2-alpha.1",
+  "version": "2.3.2-alpha.2",
   "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",

packages/common/src/types.ts

@@ -405,7 +405,7 @@ export interface Chain {
   /* 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
+   * An optional array of tokens (max of 5) to be available to the dapp in the
    * app state object per wallet within the wallet account and displayed
    * in Account Center (if enabled)
    */
@@ -431,10 +431,6 @@ export interface SecondaryTokens {
    * 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%

packages/common/src/validation.ts

@@ -32,7 +32,6 @@ export const providerConnectionInfoValidation = Joi.object({
 })
 
 const secondaryTokenValidation = Joi.object({
-  name: Joi.string().required(),
   address: Joi.string().required(),
   icon: Joi.string().optional()
 })
@@ -43,7 +42,10 @@ export const chainValidation = Joi.object({
   rpcUrl: Joi.string(),
   label: Joi.string(),
   token: Joi.string(),
-  secondaryTokens: Joi.array().items(secondaryTokenValidation).optional(),
+  secondaryTokens: Joi.array()
+    .max(5)
+    .items(secondaryTokenValidation)
+    .optional(),
   icon: Joi.string(),
   color: Joi.string(),
   publicRpcUrl: Joi.string(),

packages/core/README.md

@@ -132,7 +132,19 @@ 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)
+  secondaryTokens?: SecondaryTokens[] // An optional array of tokens (max of 5) to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled)
+}
+interface SecondaryTokens {
+  /**
+   * Required - The onchain address of the token associated
+   * with the chain it is entered under
+   */
+  address: string
+  /**
+   * 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
 }
 ```
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.18.0-alpha.1",
+  "version": "2.18.0-alpha.2",
   "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.2-alpha.1",
+    "@web3-onboard/common": "^2.3.2-alpha.2",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.6.7",
     "bowser": "^2.11.0",

packages/core/src/chain.ts

@@ -36,7 +36,9 @@ async function setChain(options: {
 
   // validate that chainId has been added to chains
   const chain = chains.find(
-    ({ namespace, id }) => namespace === chainNamespace && id === chainIdHex
+    ({ namespace, id }) =>
+      namespace === chainNamespace &&
+      id.toLowerCase() === chainIdHex.toLowerCase()
   )
 
   if (!chain) {