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>
blocknative · May 9, 2023 · 4899a21 · 4899a21 · vercel · May 9, 2023
1 parent 0dcbad8
commit 4899a21
Show file tree

Hide file tree

Showing 85 changed files with 12,976 additions and 312 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/lib/components/FeaturesSection.svelte b/docs/src/lib/components/FeaturesSection.svelte
@@ -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>

diff --git a/docs/src/lib/components/HeroSection.svelte b/docs/src/lib/components/HeroSection.svelte
@@ -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>

diff --git a/docs/src/lib/components/TestimonialSection.svelte b/docs/src/lib/components/TestimonialSection.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">

diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.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">

diff --git a/docs/src/lib/components/ThemingSection.svelte b/docs/src/lib/components/ThemingSection.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>

diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md
@@ -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
 

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

diff --git a/docs/src/routes/docs/[...4]wallets/walletconnect.md b/docs/src/routes/docs/[...4]wallets/walletconnect.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)_

diff --git a/...c/routes/docs/[...4]wallets/cede-store.md → ...src/routes/docs/[...5]other/cede-store.md b/...c/routes/docs/[...4]wallets/cede-store.md → ...src/routes/docs/[...5]other/cede-store.md
@@ -1,15 +1,10 @@
 # cede.store
 
-## Wallet module for connecting cede.store Wallet SDK to web3-onboard
-
-cede.store is a non-custodial browser extension designed to store CEX (centralized exchange) API keys and to sign CEX requests from the client-side. It allows users to manage their cryptos in their CEX through a unified interface.
-
-Any dApp can integrate cede.store in order to track and/or manage a user's CEX assets. In this way, we offer the dApp a way to monitor and manage a user's CEX assets while remaining non-custodial and maintaining the same user experience as any DeFi browser wallet.
-
-See [cede.store Wallet Developer Docs](https://docs.cede.store)
+CEX Wallet module for connecting cede.store through web3-onboard. Check out the [cede.store Wallet Developer Docs](https://docs.cede.store) for more information.
 
 :::admonition type=warning
-As cede.store is not a traditional 1193 wallet behavior is a little different from other wallets that connect through web3-onboard in that there is no on-chain user address to interact with and there isn't a specific chain associated. With this behavior dapp devs will need to handle accordingly and differently from traditional 1193 wallets. The dapp dev can expect the connect account to not be shown as a hex value (or at all) and the chain to always be `0x0` when a user connects with cede.store for that specific wallet account.
+Cede.store is not a traditional 1193 wallet, behavior is different in that there is no on-chain user address to interact with and there isn't a specific chain associated.
+Dapp devs will need to handle accordingly through the exposed API and can expect the connect account to not be shown as a hex value (or at all) and the chain to always be 0x0 when a user connects with cede.store for that specific wallet account.
 :::
 
 ### Install

diff --git a/...s/docs/[...5]resources/[...1]resources.md → ...s/docs/[...6]resources/[...1]resources.md b/...s/docs/[...5]resources/[...1]resources.md → ...s/docs/[...6]resources/[...1]resources.md
diff --git a/.../[...5]resources/[...2]troubleshooting.md → .../[...6]resources/[...2]troubleshooting.md b/.../[...5]resources/[...2]troubleshooting.md → .../[...6]resources/[...2]troubleshooting.md
diff --git a/examples/with-vanilla-js/index.html b/examples/with-vanilla-js/index.html
@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <link rel="icon" type="image/x-icon" href="./public/favicon.ico">
     <title>@web3-onboard with vanilla js</title>
-    <script defer src="dist/bundle.js"></script>
+    <script defer src="/runtime.js"></script>
+    <script defer src="/main.js"></script>
   </head>
   <body>
     <main class="main">

diff --git a/examples/with-vanilla-js/package.json b/examples/with-vanilla-js/package.json
@@ -10,10 +10,21 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "assert": "^2.0.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.3",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "style-loader": "^3.3.2",
+    "util": "^0.12.5",
     "webpack": "^5.79.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.2",
+    "webpack-dev-server": "^4.13.3"
   },
   "dependencies": {
     "@web3-onboard/coinbase": "^2.2.2",

diff --git a/examples/with-vanilla-js/src/index.js b/examples/with-vanilla-js/src/index.js
@@ -28,9 +28,9 @@ const addConnectedInfo = connectedAccount => {
 
 $connect.addEventListener('click', async _ => {
   const wallets = await connect()
-  const connectedAccount = wallets[0].accounts[0]
-  label = wallets[0].label
   if (wallets[0]) {
+    const connectedAccount = wallets[0].accounts[0]
+    label = wallets[0].label
     addConnectedInfo(connectedAccount)
     $wallet.classList.remove('hidden')
     $disconnected.classList.add('hidden')

diff --git a/examples/with-vanilla-js/webpack.config.js b/examples/with-vanilla-js/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
   entry: './src/index.js',
@@ -7,6 +8,25 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     clean: true
   },
+  resolve: {
+    fallback: {
+      path: require.resolve('path-browserify')
+    },
+    alias: {
+      assert: 'assert',
+      buffer: 'buffer',
+      crypto: 'crypto-browserify',
+      http: 'stream-http',
+      https: 'https-browserify',
+      os: 'os-browserify/browser',
+      process: 'process/browser',
+      stream: 'stream-browserify',
+      util: 'util'
+    }
+  },
+  experiments: {
+    asyncWebAssembly: true
+  },
   module: {
     rules: [
       {
@@ -21,6 +41,12 @@ module.exports = {
       }
     ]
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer']
+    })
+  ],
   devServer: {
     historyApiFallback: true,
     static: { directory: path.join(__dirname, '/') },

diff --git a/package.json b/package.json
@@ -60,7 +60,8 @@
     "build": "yarn wsrun --serial build",
     "type-check": "yarn wsrun type-check",
     "file-check": "yarn install --check-files",
-    "check-all": "yarn build && yarn file-check && yarn type-check"
+    "check-all": "yarn build && yarn file-check && yarn type-check",
+    "test-playwright": "cd test && yarn && yarn playwright test"
   },
   "devDependencies": {
     "prettier": "^2.4.1",

diff --git a/packages/cede-store/README.md b/packages/cede-store/README.md
@@ -1,15 +1,10 @@
 # @web3-onboard/cede-store
 
-## Wallet module for connecting cede.store Wallet SDK to web3-onboard
+CEX module for connecting cede.store through web3-onboard. Check out the [cede.store Wallet Developer Docs](https://docs.cede.store) for more information.
 
-cede.store is a non-custodial browser extension designed to store CEX (centralized exchange) API keys and to sign CEX requests from the client-side. It allows users to manage their cryptos in their CEX through a unified interface.
-
-Any dApp can integrate cede.store in order to track and/or manage a user's CEX assets. In this way, we offer the dApp a way to monitor and manage a user's CEX assets while remaining non-custodial and maintaining the same user experience as any DeFi browser wallet.
 
 As cede.store is not a traditional 1193 wallet behavior is a little different from other wallets that connect through web3-onboard in that there is no on-chain user address to interact with and there isn't a specific chain associated. With this behavior dapp devs will need to handle accordingly and differently from traditional 1193 wallets. The dapp dev can expect the connect account to not be shown as a hex value (or at all) and the chain to always be `0x0` when a user connects with cede.store for that specific wallet account.
 
-See [cede.store Wallet Developer Docs](https://docs.cede.store)
-
 ### Install
 
 `npm i @web3-onboard/cede-store`

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.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.0-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.2",
+  "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.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.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
@@ -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 (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)
+   */
+  secondaryTokens?: SecondaryTokens[]
   /**
    * The color used to represent the chain and
    * will be used as a background for the icon
@@ -419,6 +425,19 @@ 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
+  /**
+   * 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,21 @@ export const providerConnectionInfoValidation = Joi.object({
   timeout: Joi.number()
 })
 
+const secondaryTokenValidation = Joi.object({
+  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()
+    .max(5)
+    .items(secondaryTokenValidation)
+    .optional(),
   icon: Joi.string(),
   color: Joi.string(),
   publicRpcUrl: Joi.string(),