Partial Docs release (#1692)

* 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>

Author: 5 people

assets/account-center-example.png

@@ -23,7 +23,7 @@
  <TextBlock
  title={'Framework Agnostic'}
  subtitle={'Support all your favorite frameworks.'}
- text={'Use web3-onboard with any of your favorite Javascript libraries.'}
+ text={'Use Web3 Onboard with any of your favorite Javascript libraries.'}
  >
  <Flexbox --wrap="wrap">
  <Button href="/docs" buttonStyle={'link'}>{'Learn More'}</Button>
@@ -47,7 +47,7 @@
  <div class="flexbox">
  <FeatureCard
  title={'Minimal Dependencies'}
- text={'All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app.'}
+ text={'All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app. Core package is only 815kb minified.'}
  />
  <FeatureCard
  title={'Dynamic Imports'}
@@ -71,7 +71,7 @@
  <TextBlock
  title={'Enable Multi-Wallet and Multi-Chain functionality with one library '}
  subtitle={''}
- text={'Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 35 unique hardware and software wallets, Web3-Onboard saves you time and headaches.'}
+ text={'Web3 Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 35 unique hardware and software wallets, Web3 Onboard saves you time and headaches.'}
  >
  <Flexbox --wrap="wrap">
  <Button href="/docs" buttonStyle={'link'}>{'Learn More'}</Button>

docs/src/lib/assets/account-center-example.png

@@ -8,7 +8,7 @@
 
 <section style="background-image: url({heroBg});">
  <div class="textblock">
- <div class="title">{'Web3-Onboard'}</div>
+ <div class="title">{'Web3 Onboard'}</div>
  <div class="text">
  {'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.'}
  </div>

docs/src/lib/components/FeaturesSection.svelte

@@ -4,7 +4,7 @@
 
 <section>
  <h1 class="text">
- {"Who's using web3-onboard?"}
+ {"Who's using Web3 Onboard?"}
  </h1>
  <div>
  <img src={TestimonialsGraphic} alt="Web3-Onboard-users">

docs/src/lib/components/HeroSection.svelte

@@ -274,7 +274,7 @@
  <div id="image_drop_area">
  <form class="drop-area-controls" on:submit|preventDefault={addURLToIFrame}>
  <div>
- Enter your website url or drag and drop a screenshot to preview web3-onboard on your site
+ Enter your website url or drag and drop a screenshot to preview Web3 Onboard on your site
  </div>
  <!-- <div>Then click color circles above to change the theme.</div> -->
  <div class="website-input-row">

docs/src/lib/components/TestimonialSection.svelte

@@ -14,8 +14,8 @@
  <div class="flexbox">
  <TextBlock
  title={'Themeable'}
- subtitle={'Powerfull customization options for all your needs'}
- text={'Style web3-onboard to fit into your existing designs, or pick from our pre-made themes.'}
+ subtitle={'Powerful customization options for all your needs'}
+ text={'Style Web3 Onboard to fit into your existing designs, or pick from our pre-made themes.'}
  >
  <Flexbox --wrap="wrap">
  <Button href="/docs" buttonStyle={'link'}>{'Learn More'}</Button>

docs/src/lib/components/ThemeCustomizer.svelte

@@ -38,6 +38,8 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat
 - Ethereum 
 - Polygon
 - Base Goerli
+- Goerli
+- Sepolia
 - Arbitrum
 - Optimism
 - Avalanche
@@ -47,9 +49,7 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat
 - Gnosis Chain
 - Harmony One
 - Moonriver
-- Goerli
-- Sepolia
-- Any other EVM network
+- All other EVM network
 
 ### [Optional] Use an API key to fetch real time transaction data, balances & gas
 

docs/src/lib/components/ThemingSection.svelte

@@ -1,4 +1,5 @@
 <script>
+ import accountCenter from '$lib/assets/account-center-example.png'
  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,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 (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
 }
 ```
 
@@ -255,18 +270,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 +290,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 +355,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

docs/src/routes/docs/[...1]overview/[...1]introduction.md

@@ -1,6 +1,6 @@
 # Walletconnect
 
-Wallet module for connecting Wallet Connect to web3-onboard
+Wallet module for connecting WalletConnect to web3-onboard, currently supporting both v1 and v2.
 
 :::admonition type=warning
 _Not all Wallets support WalletConnect V2 currently. For an up to date list please see the [WalletConnect Explorer](https://explorer.walletconnect.com/?version=2)_