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
blocknative · May 9, 2023 · 8de19ec · 8de19ec
1 parent 01d8044
commit 8de19ec
Show file tree

Hide file tree

Showing 49 changed files with 248 additions and 178 deletions.
diff --git a/.circleci/config.yml b/.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

diff --git a/docs/src/routes/docs/[...3]modules/core.md b/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
 }
 ```
 

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.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"
   }
 }
diff --git a/packages/coinbase/package.json b/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"
   }
 }
diff --git a/packages/common/package.json b/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",

diff --git a/packages/common/src/types.ts b/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%

diff --git a/packages/common/src/validation.ts b/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(),

diff --git a/packages/core/README.md b/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
 }
 ```
 

diff --git a/packages/core/package.json b/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",

diff --git a/packages/core/src/chain.ts b/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) {

diff --git a/packages/core/src/update-balances.ts b/packages/core/src/update-balances.ts
@@ -51,25 +51,39 @@ export const updateSecondaryTokens = async (
     'any'
   )
   const signer = ethersProvider.getSigner()
-  const tokenInterface = [
-    'function balanceOf(address owner) view returns (uint256)'
+
+  const abi = [
+    {
+      inputs: [{ name: 'owner', type: 'address' }],
+      name: 'balanceOf',
+      outputs: [{ name: '', type: 'uint256' }],
+      stateMutability: 'view',
+      type: 'function'
+    },
+    {
+      inputs: [],
+      name: 'symbol',
+      outputs: [{ name: '', type: 'string' }],
+      stateMutability: 'view',
+      type: 'function'
+    }
   ]
   const updatedBalances = await Promise.all(
     chain.secondaryTokens.map(async token => {
       try {
-        const swapContract = new ethers.Contract(
-          token.address,
-          tokenInterface,
-          signer
-        )
+        const swapContract = new ethers.Contract(token.address, abi, signer)
         const bigNumBalance = await swapContract.balanceOf(account)
+        const tokenName = await swapContract.symbol()
         return {
-          name: token.name,
+          name: tokenName,
           balance: weiToEth(bigNumBalance.toHexString()),
           icon: token.icon
         }
       } catch (error) {
-        console.error(error)
+        console.error(
+          `There was an error fetching balance and/or symbol 
+          for token contract: ${token.address} - ${error}`
+        )
       }
     })
   )

diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
@@ -63,7 +63,6 @@ const balance = Joi.any().allow(
 
 const secondaryTokens = Joi.any().allow(
   Joi.object({
-    name: Joi.string().required(),
     balance: Joi.string().required(),
     icon: Joi.string()
   }),
@@ -253,7 +252,6 @@ const disconnectOptions = Joi.object({
 }).required()
 
 const secondaryTokenValidation = Joi.object({
-  name: Joi.string().required(),
   address: Joi.string().required(),
   icon: Joi.string().optional()
 })
@@ -265,7 +263,7 @@ const setChainOptions = 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()
 })
 
 const customNotificationUpdate = Joi.object({

diff --git a/packages/core/src/views/account-center/SecondaryTokenTable.svelte b/packages/core/src/views/account-center/SecondaryTokenTable.svelte
@@ -60,38 +60,41 @@
   <table class="balance-change-table table-radius">
     <thead>
       <tr>
-        <th colspan="3" class="secondary-token-table-header">Token Balances:</th>
+        <th colspan="3" class="secondary-token-table-header">Token Balances:</th
+        >
       </tr>
     </thead>
     <tbody>
       {#each secondaryTokens as token}
-        <tr class="token-row">
-          <td class="token-icon">
-            <div class="icon-name-container">
-              {#if token.icon}
-                {#await token.icon then iconLoaded}
-                  <div in:fade class="icon">
-                    {#if isSVG(iconLoaded)}
-                      <!-- render svg string -->
-                      {@html iconLoaded}
-                    {:else}
-                      <!-- load img url -->
-                      <img src={iconLoaded} alt="logo" />
-                    {/if}
-                  </div>
-                {/await}
-              {:else}
-                <div class="icon"/>
-              {/if}
-              {token.name.toUpperCase()}
-            </div>
-          </td>
-          <td class="token-balance">
-            {token.balance.length > 7
-              ? token.balance.slice(0, 7)
-              : token.balance}
-          </td>
-        </tr>
+        {#if token && token.name && token.balance}
+          <tr class="token-row">
+            <td class="token-icon">
+              <div class="icon-name-container">
+                {#if token.icon}
+                  {#await token.icon then iconLoaded}
+                    <div in:fade class="icon">
+                      {#if isSVG(iconLoaded)}
+                        <!-- render svg string -->
+                        {@html iconLoaded}
+                      {:else}
+                        <!-- load img url -->
+                        <img src={iconLoaded} alt="logo" />
+                      {/if}
+                    </div>
+                  {/await}
+                {:else}
+                  <div class="icon" />
+                {/if}
+                {token.name.toUpperCase()}
+              </div>
+            </td>
+            <td class="token-balance">
+              {token.balance.length > 7
+                ? token.balance.slice(0, 7)
+                : token.balance}
+            </td>
+          </tr>
+        {/if}
       {/each}
     </tbody>
   </table>

diff --git a/packages/dcent/package.json b/packages/dcent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/dcent",
-  "version": "2.2.6-alpha.1",
+  "version": "2.2.6-alpha.2",
   "description": "D'CENT 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",
@@ -56,8 +56,8 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.3.2-alpha.1",
-    "@web3-onboard/hw-common": "^2.2.1",
+    "@web3-onboard/common": "^2.3.2-alpha.2",
+    "@web3-onboard/hw-common": "^2.2.2-alpha.2",
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "eth-dcent-keyring": "^0.2.2"

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -23,35 +23,35 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.18.0-alpha.1",
-    "@web3-onboard/coinbase": "^2.2.3-alpha.1",
-    "@web3-onboard/transaction-preview": "^2.0.7-alpha.1",
-    "@web3-onboard/dcent": "^2.2.6-alpha.1",
-    "@web3-onboard/frontier": "^2.0.3-alpha.1",
-    "@web3-onboard/fortmatic": "^2.0.18-alpha.1",
-    "@web3-onboard/gas": "^2.1.7-alpha.1",
-    "@web3-onboard/gnosis": "^2.1.9-alpha.1",
-    "@web3-onboard/keepkey": "^2.3.6-alpha.1",
-    "@web3-onboard/keystone": "^2.3.6-alpha.1",
-    "@web3-onboard/ledger": "^2.4.5-alpha.1",
-    "@web3-onboard/infinity-wallet": "^2.0.3-alpha.1",
-    "@web3-onboard/injected-wallets": "^2.8.5-alpha.1",
-    "@web3-onboard/magic": "^2.1.6-alpha.1",
-    "@web3-onboard/phantom": "^2.0.1-alpha.1",
-    "@web3-onboard/portis": "^2.1.6-alpha.1",
-    "@web3-onboard/sequence": "^2.0.7-alpha.1",
-    "@web3-onboard/trezor": "^2.4.1-alpha.1",
-    "@web3-onboard/trust": "^2.0.3-alpha.1",
-    "@web3-onboard/torus": "^2.2.4-alpha.1",
-    "@web3-onboard/taho": "^2.0.3-alpha.1",
-    "@web3-onboard/web3auth": "^2.2.2-alpha.1",
-    "@web3-onboard/walletconnect": "^2.3.7-alpha.2",
-    "@web3-onboard/enkrypt": "^2.0.3-alpha.1",
-    "@web3-onboard/mew-wallet": "^2.0.2-alpha.1",
-    "@web3-onboard/xdefi": "^2.0.3-alpha.1",
-    "@web3-onboard/uauth": "^2.0.4-alpha.1",
-    "@web3-onboard/zeal": "^2.0.3-alpha.1",
-    "@web3-onboard/cede-store": "^2.0.1-alpha.1",
+    "@web3-onboard/core": "^2.18.0-alpha.2",
+    "@web3-onboard/coinbase": "^2.2.3-alpha.2",
+    "@web3-onboard/transaction-preview": "^2.0.7-alpha.2",
+    "@web3-onboard/dcent": "^2.2.6-alpha.2",
+    "@web3-onboard/frontier": "^2.0.3-alpha.2",
+    "@web3-onboard/fortmatic": "^2.0.18-alpha.2",
+    "@web3-onboard/gas": "^2.1.7-alpha.2",
+    "@web3-onboard/gnosis": "^2.1.9-alpha.2",
+    "@web3-onboard/keepkey": "^2.3.6-alpha.2",
+    "@web3-onboard/keystone": "^2.3.6-alpha.2",
+    "@web3-onboard/ledger": "^2.4.5-alpha.2",
+    "@web3-onboard/infinity-wallet": "^2.0.3-alpha.2",
+    "@web3-onboard/injected-wallets": "^2.8.5-alpha.2",
+    "@web3-onboard/magic": "^2.1.6-alpha.2",
+    "@web3-onboard/phantom": "^2.0.1-alpha.2",
+    "@web3-onboard/portis": "^2.1.6-alpha.2",
+    "@web3-onboard/sequence": "^2.0.7-alpha.2",
+    "@web3-onboard/trezor": "^2.4.1-alpha.2",
+    "@web3-onboard/trust": "^2.0.3-alpha.2",
+    "@web3-onboard/torus": "^2.2.4-alpha.2",
+    "@web3-onboard/taho": "^2.0.3-alpha.2",
+    "@web3-onboard/web3auth": "^2.2.2-alpha.2",
+    "@web3-onboard/walletconnect": "^2.3.7-alpha.3",
+    "@web3-onboard/enkrypt": "^2.0.3-alpha.2",
+    "@web3-onboard/mew-wallet": "^2.0.2-alpha.2",
+    "@web3-onboard/xdefi": "^2.0.3-alpha.2",
+    "@web3-onboard/uauth": "^2.0.4-alpha.2",
+    "@web3-onboard/zeal": "^2.0.3-alpha.2",
+    "@web3-onboard/cede-store": "^2.0.1-alpha.2",
     "vconsole": "^3.9.5"
   },
   "license": "MIT",