Merge branch 'develop' into feature/arcana-auth

Author: mmjee

.circleci/config.yml

@@ -399,6 +399,10 @@ jobs:
     docker:
       - image: cimg/node:16.13.1
     working_directory: ~/web3-onboard-monorepo/packages/arcana-auth
+  build-blocto:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/blocto
     steps:
       - node-build-steps
   build-venly:
@@ -641,6 +645,10 @@ jobs:
     docker:
       - image: cimg/node:16.13.1
     working_directory: ~/web3-onboard-monorepo/packages/arcana-auth
+  build-staging-blocto:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/blocto
     steps:
       - node-staging-build-steps
   build-staging-venly:
@@ -887,6 +895,12 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-arcana-auth:
           <<: *deploy_staging_filters
+  blocto:
+    jobs:
+      - build-blocto:
+          <<: *deploy_production_filters
+      - build-staging-blocto:
+        <<: *deploy_staging_filters
   venly:
     jobs:
       - build-venly:

README.md

@@ -105,6 +105,7 @@ For full documentation, check out the README.md for each package or the [docs pa
 - [XDEFI](packages/xdefi/README.md)
 - [Infinity Wallet](packages/infinity-wallet/README.md)
 - [Frame](packages/frame/README.md)
+- [Blocto](packages/blocto/README.md)
 
 **Hardware Wallets**
 

docs/package.json

@@ -12,8 +12,8 @@
     "format": "prettier --plugin-search-dir . --write .",
     "prepare": "svelte-kit sync",
     "test": "playwright test",
-    "w3o-latest-prod": "yarn add '@web3-onboard/core' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store'",
-    "w3o-latest-alpha": "yarn add '@web3-onboard/core@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next'"
+    "w3o-latest-prod": "yarn add '@web3-onboard/core' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/blocto'",
+    "w3o-latest-alpha": "yarn add '@web3-onboard/core@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/blocto@next'"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.17.0",
@@ -50,9 +50,10 @@
   "type": "module",
   "dependencies": {
     "@web3-onboard/arcana-auth": "^2.0.0-alpha.1",
+    "@web3-onboard/blocto": "^2.0.0-alpha.1",
     "@web3-onboard/cede-store": "^2.0.2",
     "@web3-onboard/coinbase": "^2.2.4",
-    "@web3-onboard/core": "^2.20.0-alpha.1",
+    "@web3-onboard/core": "^2.20.2-alpha.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.0.4",
     "@web3-onboard/fortmatic": "^2.0.19",
@@ -61,7 +62,7 @@
     "@web3-onboard/gas": "^2.1.8",
     "@web3-onboard/gnosis": "^2.1.10",
     "@web3-onboard/infinity-wallet": "^2.0.4",
-    "@web3-onboard/injected-wallets": "^2.9.0",
+    "@web3-onboard/injected-wallets": "^2.10.1-alpha.1",
     "@web3-onboard/keepkey": "^2.3.7",
     "@web3-onboard/keystone": "^2.3.7",
     "@web3-onboard/ledger": "^2.4.6",
@@ -76,8 +77,8 @@
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/trust": "^2.0.4",
     "@web3-onboard/uauth": "^2.0.5",
-    "@web3-onboard/venly": "^2.0.0-alpha.1",
-    "@web3-onboard/walletconnect": "^2.3.8",
+    "@web3-onboard/venly": "^2.0.0",
+    "@web3-onboard/walletconnect": "^2.3.9",
     "@web3-onboard/web3auth": "^2.2.3",
     "@web3-onboard/xdefi": "^2.0.4",
     "@web3-onboard/zeal": "^2.0.4",

docs/src/app.html

@@ -18,8 +18,14 @@
 
     %sveltekit.head%
 
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121780722-2"></script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WQ8M55VX1Z"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-WQ8M55VX1Z');
+    </script>
   </head>
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>

docs/src/lib/services/onboard.js

@@ -54,6 +54,7 @@ const intiOnboard = async (theme) => {
   const { default: cedeModule } = await import('@web3-onboard/cede-store')
   const { default: frameModule } = await import('@web3-onboard/frame')
   const { default: arcanaModule } = await import('@web3-onboard/arcana-auth')
+  const { default: bloctoModule } = await import('@web3-onboard/blocto')
   const { default: venlyModule } = await import('@web3-onboard/venly')
   const INFURA_ID = '8b60d52405694345a99bcb82e722e0af'
 
@@ -112,6 +113,7 @@ const intiOnboard = async (theme) => {
 
   const frame = frameModule()
 
+  const blocto = bloctoModule()
   const venly = venlyModule({
     clientId: 'blocknative',
     environment: 'staging'
@@ -143,6 +145,7 @@ const intiOnboard = async (theme) => {
       portis,
       frame,
       infinityWallet,
+      blocto
       // venly
     ],
     chains: [

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

@@ -157,6 +157,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider
 - [Portis](../../wallets/portis.md#install)
 - [Web3Auth](../../wallets/web3auth.md#install)
 - [Frame](../../wallets/frame.md#install)
+- [Blocto](../../docs/wallets/blocto.md#install)
 
 **Hardware Wallets**
 

docs/src/routes/docs/[...3]modules/[...1]core/+page.md

@@ -223,6 +223,18 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+**`updateAppMetadata`**
+
+If you need to update your Application Metadata after initialization, you can call the `updateAppMetadata` function with the new configuration
+
+```typescript
+onboard.state.actions.updateAppMetadata({
+  logo: `<svg width="100%" height="100%" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L0.0100002 6L4 10L0.0100002 14.01L0 20H12V14L8 10L12 6.01V0H0ZM10 14.5V18H2V14.5L6 10.5L10 14.5Z" fill="#929BED"/>
+  </svg>`,
+  description: 'Updated Description!'
+})
+```
+
 ---
 
 #### connect

docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md renamed to docs/src/routes/docs/[...4]wallets/[...10]injected/+page.md

@@ -153,7 +153,12 @@ const equal = {
     provider: window.ethereum
   }),
   // A list of platforms that this wallet supports
-  platforms: ['desktop']
+  platforms: ['desktop'],
+  /**
+   * A Url to link users to a download page for the wallet
+   * to be shown if not installed or available on the browser
+   */
+  externalUrl: 'http://www.CoolEqualWalletDownload.com'
 }
 
 const injected = injectedModule({
@@ -172,17 +177,22 @@ You may want to display injected wallets that are not currently available to the
 
 ```javascript
 const injected = injectedModule({
-  displayUnavailable: true
+  // display all unavailable injected wallets
+  displayUnavailable: true,
+  ||
+  // display specific unavailable wallets
+  displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust]
 })
 ```
 
-This will render every injected wallet as regardless of whether it has been detected in the window, happy days.
-Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted alphabetically by default and there is an additional `sort` parameter which receives the final list of wallets and then returns the list to be rendered. This allows for example setting MetaMask and Coinbase first and then just the rest alphabetically:
+This can be set to an array top specify which unavailable injected wallets to show or set to true to display all unavailable injected wallets regardless of whether it has been detected in the window, happy days.
+Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted **alphabetically** by default and there is an additional `sort` parameter which receives the final list of wallets and then returns the list to be rendered. This allows for example setting MetaMask and Coinbase first and then just the rest alphabetically:
 
 ```javascript
 const injected = injectedModule({
-  // display all wallets even if they are unavailable
-  displayUnavailable: true,
+  // display specific injected wallets even if they are unavailable
+  // can also be set to `true` to display all unavailable injected wallets
+  displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
   // do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
   sort: (wallets) => {
     const metaMask = wallets.find(({ label }) => label === ProviderLabel.MetaMask)
@@ -203,11 +213,12 @@ const injected = injectedModule({
 })
 ```
 
-You may want to display all wallets, but filter out specific wallets based on their availability. For example I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: `'unavailable'`, as in; remove this wallet if it is unavailable, even though `displayUnavailable` wallets is set:
+You may want to display all unavailable injected wallets, but filter out specific wallets based on their availability. For example I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: `'unavailable'`, as in; remove this wallet if it is unavailable, even though `displayUnavailable` wallets is set:
 
 ```javascript
 const injected = injectedModule({
-  // display all wallets even if they are unavailable
+  // display specific injected wallets even if they are unavailable
+  // can also be set to `true` to display all unavailable injected wallets
   displayUnavailable: true,
   // but only show Binance and Bitski wallet if they are available
   filter: {
@@ -234,15 +245,16 @@ const injected = injectedModule({
 })
 ```
 
-If a wallet is selected, but is not available the default error message is: `Please install or enable ${walletName} to continue`. You may want to customise that message, so there is the `walletUnavailableMessage` parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display:
+If a wallet is selected, but is not available the default error message is: `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>` if a download link is available for that wallet. If there isn't a download link for that wallet the default is: `Please install or enable ${walletName} to continue`. You may want to customize that message, so there is the `walletUnavailableMessage` parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display:
 
 ```javascript
 const injected = injectedModule({
   custom: [
     // include custom (not natively supported) injected wallet modules here
   ],
-  // display all wallets even if they are unavailable
-  displayUnavailable: true,
+  // display specific injected wallets even if they are unavailable
+  // can also be set to `true` to display all unavailable injected wallets
+  displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
   // but only show Binance and Bitski wallet if they are available
   filter: {
     [ProviderLabel.Binance]: 'unavailable',
@@ -265,7 +277,10 @@ const injected = injectedModule({
         .filter((wallet) => wallet)
     )
   },
-  walletUnavailableMessage: (wallet) => `Oops ${wallet.label} is unavailable!`
+  walletUnavailableMessage: (wallet) =>
+    wallet.externalUrl
+      ? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
+      : `Oops ${wallet.label} is unavailable!`
 })
 ```
 
@@ -319,6 +334,7 @@ const injected = injectedModule({
 - BifrostWallet - _Desktop & Mobile_
 - Safeheron - _Desktop_
 - Talisman - _Desktop_
+- OneKey - _Desktop & Mobile_
 
 ## Build Environments