Feat: Secondary Token Balances #1679

Adamj1232 · 2023-05-04T16:38:41Z

Description

This PR adds the ability to pass in an array of secondaryTokens per chain object within the W3O init and have those balances pulled from the associated chain RPC and be available within the wallet accounts object to the DAPP and displayed within Account Center.

interface Chain {
 ....
  /**
   * 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[]
}

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
}

This PR also includes a refactor/styling of Account Center to match the latest designs and handle display depending on the appMetaData, secondary tokens, etc passed in on init

Checklist

Increment the version field in package.json of the package you have made changes in following semantic versioning and using alpha release tagging
Check the box that allows repo maintainers to update this PR
Test locally to make sure this feature/fix works
Run yarn check-all to confirm there are not any associated errors
Confirm this PR passes Circle CI checks
Add or update relevant information in the documentation

…ximized account center layout, still need docs updates for secondary tokens

vercel · 2023-05-04T16:38:45Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web3-onboard-docs	❌ Failed (Inspect)			May 4, 2023 9:31pm

socket-security · 2023-05-04T16:50:13Z

New dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	`+/-` Transitive Count	Publisher
@web3-onboard/enkrypt@2.0.0	None	`+2`	cmeisl
@web3-onboard/xdefi@2.0.0	None	`+2`	cmeisl
@web3-onboard/trust@2.0.0	None	`+2`	cmeisl
@web3-onboard/infinity-wallet@2.0.0	None	`+0`	cmeisl
@web3-onboard/taho@2.0.0	None	`+2`	cmeisl
@web3-onboard/mew-wallet@2.0.0	None	`+2`	cmeisl
@web3-onboard/sequence@2.0.4	None	`+2`	cmeisl
@web3-onboard/web3auth@2.1.4	None	`+3`	cmeisl
@web3-onboard/portis@2.1.3	None	`+2`	cmeisl
@web3-onboard/gas@2.1.4	None	`+2`	cmeisl
@web3-onboard/fortmatic@2.0.14	None	`+2`	cmeisl
@web3-onboard/gnosis@2.1.6	None	`+2`	cmeisl
@web3-onboard/dcent@2.2.3	None	`+3`	cmeisl
@web3-onboard/uauth@2.0.1	None	`+2`	cmeisl
@web3-onboard/torus@2.2.1	None	`+2`	cmeisl
@web3-onboard/keepkey@2.3.3	None	`+3`	cmeisl
@web3-onboard/keystone@2.3.3	None	`+3`	cmeisl
@web3-onboard/transaction-preview@2.0.4	None	`+2`	cmeisl
@web3-onboard/magic@2.1.3	None	`+2`	cmeisl
@web3-onboard/coinbase@2.2.0	None	`+2`	cmeisl
@web3-onboard/ledger@2.4.2	None	`+2`	cmeisl
@web3-onboard/trezor@2.3.3	None	`+3`	cmeisl
@web3-onboard/walletconnect@2.3.2	None	`+2`	cmeisl
@web3-onboard/core@2.15.5	None	`+2`	cmeisl
@web3-onboard/injected-wallets@2.6.2	None	`+4`	cmeisl
@web3-onboard/injected-wallets@2.8.2	None	`+2`	cmeisl

⬆️ Updated Package	Version Diff	Added Capability Access	`+/-` Transitive Count	Publisher
@web3-onboard/zeal@2.0.0	2.0.2...2.0.0	None	`+2/-0`	cmeisl
@web3-onboard/frontier@2.0.0	2.0.2...2.0.0	None	`+2/-0`	cmeisl
@web3-onboard/phantom@2.0.0-alpha.1	2.0.0...2.0.0-alpha.1	None	`+2/-0`	cmeisl

🚮 Removed packages: @web3-onboard/cede-store@2.0.0

leightkt

looks great- love this feature! Was able to test on demo and view my DAI token balance when I connected my metamask wallet.

lnbc1QWFyb24

Looks good. One question, if an icon is not passed in for a token does it just render a blank space? Maybe we should have a default token icon?

Adamj1232 · 2023-05-05T14:59:10Z

Looks good. One question, if an icon is not passed in for a token does it just render a blank space? Maybe we should have a default token icon?

Currently we just render a blank space per the designs but I had originally had a question mark icon which could be a little confusing for the end user. Any other ideas @gesquinca?

Discussed further with @gesquinca and went with removing the black space when an icon isnt passed. Here is the updated view.

* Release 2.21.3 (develop) (#1656) * Bump docs packages * Update package versions for release * Remove optional chain in trezor * add safeheron to injected package readme * add wallet as value to translate function in more areas of connect * package updates * add images * text update * Update packages/react/package.json Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com> * Update packages/vue/package.json Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com> * add screenshots to top level assets folder * update react pkg * fix merge conflict in react pkg * fix vue pkg --------- Co-authored-by: Kat Leight <leightkt@gmail.com> Co-authored-by: Kat Leight <33187102+leightkt@users.noreply.github.com> * Update react hooks docs re usage of apiKey (#1668) * update supported networks svg * fix indentation * FEATURE: Add cede.store wallet package (#1667) * FEATURE: Add cede.store wallet package * Formatting and add to docs site * DOCS: Add cede.store detailed documentation with an example flow * Update formatting - looks good! --------- Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com> * Release 2.21.4 (develop) (#1671) * Update cede and WC docs (#1681) * add webpack-dev-server to dependencies (#1680) * 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 * Fix: Walletconnet - wallet switching chains and handling int and hex chainIds (#1682) * Wallet switching chains now working properly and setting required chains to the config chains in w3o * Fix web3auth ci build * Update HeroSection.svelte (#1685) update title from web3-onboard to Web3 Onboard. When not referencing code we should stick to no dash * Update the core version within vue and react projects (#1686) * Playwright (#1609) * change scripts loaded for dev server, fix walletConnect, update webpack config, fix accounts error on no wallet connection (#1689) * Update FeaturesSection.svelte (#1684) * Update title Web3-Onboard to Web3 Onboard When not referencing the code, we should always use Web3 Onboard. When referencing code, we use web3-onboard. * Update FeaturesSection.svelte Update FeaturesSection to include the core package size minified. * Update docs/src/lib/components/HeroSection.svelte --------- Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com> * 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 * Remove cede from wallets group * Remove merge conflict in yarn.lock * Update packages/cede-store/README.md * Fix image path in docs * Update Account Center example with a better shot * Spelling & web3 onboard cohesion update (#1694) updating some spelling and web3 onboard referneces * Update account center shot to show multiple wallets connected * Update account center shot to show multiple wallets connected --------- Co-authored-by: Kat Leight <leightkt@gmail.com> Co-authored-by: Kat Leight <33187102+leightkt@users.noreply.github.com> Co-authored-by: Gustavo Esquinca <g.esq.ca@gmail.com> Co-authored-by: Nikita TEREKHOV <57397713+neeeekitos@users.noreply.github.com> Co-authored-by: Laurence <53497147+laurencedelisle@users.noreply.github.com>

* 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

pavelivanov · 2023-05-15T18:29:43Z

packages/core/src/views/connect/Index.svelte

@@ -339,6 +340,19 @@
        })
      })
    }
+    if (
+      !secondaryTokens &&
+      Array.isArray(appChain.secondaryTokens) &&


it's possible that appChain will be "undefined" if the chain selected in user's wallet doesn't exist in the config. This leads to an error:

Cannot read properties of undefined (reading 'secondaryTokens')

:(

@pavelivanov we have a patch coming out for this shortly - apologies for any inconvenience

we have a patch coming out for this shortly - apologies for any inconvenience

is this patch available?

There is a fix for this on @web3-onboard/core v2.19.0-alpha.1 and an official release will be out shortly.

Adamj1232 added 7 commits April 28, 2023 11:08

RPC working from hackathon

8aa0cc9

Working as expected for setting balances in state, no rendering yet

86191e7

Display but need to be abstracted and cleaned

b18694f

Merge branch 'develop' into hackathon/ACTokenBalances

3c91636

Added layout and styling for secondary tokens along with rework of ma…

a46caec

…ximized account center layout, still need docs updates for secondary tokens

Fix compiler err

2bd5f40

Add docks for secondaryTokens and screenshots to readme and docs of AC

61ed642

Adamj1232 requested review from lnbc1QWFyb24 and leightkt May 4, 2023 16:38

Fix versioning of common

f95b6a0

vercel bot had a problem deploying to Preview May 4, 2023 16:45 Failure

Adamj1232 added 2 commits May 4, 2023 11:53

Bump common

c1502cf

Bump all versions required

a424c79

vercel bot had a problem deploying to Preview May 4, 2023 21:25 Failure

Prettify common validation

4ca42a2

vercel bot had a problem deploying to Preview May 4, 2023 21:31 Failure

leightkt approved these changes May 4, 2023

View reviewed changes

lnbc1QWFyb24 approved these changes May 5, 2023

View reviewed changes

Adamj1232 requested review from gesquinca, lnbc1QWFyb24 and leightkt May 5, 2023 15:49

Adamj1232 merged commit 5153729 into develop May 8, 2023

Adamj1232 deleted the feat/secondary_token_balances branch May 8, 2023 15:08

This was referenced May 9, 2023

Release 2.22.0 (develop) #1695

Merged

Release 2.22.0 #1696

Merged

Release 2.22.0 (docs) #1697

Merged

pavelivanov reviewed May 15, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Secondary Token Balances #1679

Feat: Secondary Token Balances #1679

Adamj1232 commented May 4, 2023 •

edited

Loading

vercel bot commented May 4, 2023 •

edited

Loading

socket-security bot commented May 4, 2023 •

edited

Loading

leightkt left a comment

lnbc1QWFyb24 left a comment

Adamj1232 commented May 5, 2023 •

edited

Loading

pavelivanov May 15, 2023

Adamj1232 May 15, 2023

kanzure May 18, 2023

Adamj1232 May 18, 2023

Feat: Secondary Token Balances #1679

Feat: Secondary Token Balances #1679

Conversation

Adamj1232 commented May 4, 2023 • edited Loading

Description

Checklist

vercel bot commented May 4, 2023 • edited Loading

socket-security bot commented May 4, 2023 • edited Loading

leightkt left a comment

Choose a reason for hiding this comment

lnbc1QWFyb24 left a comment

Choose a reason for hiding this comment

Adamj1232 commented May 5, 2023 • edited Loading

pavelivanov May 15, 2023

Choose a reason for hiding this comment

Adamj1232 May 15, 2023

Choose a reason for hiding this comment

kanzure May 18, 2023

Choose a reason for hiding this comment

Adamj1232 May 18, 2023

Choose a reason for hiding this comment

Adamj1232 commented May 4, 2023 •

edited

Loading

vercel bot commented May 4, 2023 •

edited

Loading

socket-security bot commented May 4, 2023 •

edited

Loading

Adamj1232 commented May 5, 2023 •

edited

Loading