Merge branch 'develop' into develop

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

@@ -318,6 +318,7 @@ const injected = injectedModule({
 - ApexWallet - _Desktop_
 - BifrostWallet - _Desktop & Mobile_
 - Safeheron - _Desktop_
+- Talisman - _Desktop_
 
 ## Build Environments
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.18.1-alpha.1",
+  "version": "2.18.1-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",

packages/core/src/views/account-center/Minimized.svelte

@@ -61,10 +61,19 @@
 
 <style>
   .minimized {
-    --background-color: var(--account-center-minimized-background, var(--w3o-background-color, white));
+    --background-color: var(
+      --account-center-minimized-background,
+      var(--w3o-background-color, white)
+    );
     --text-color: var(--w3o-text-color, var(--gray-700));
-    --border-color: var(--account-center-border, var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200))));
-    --border-radius: var(--account-center-border-radius, var(--w3o-border-radius, 1rem));
+    --border-color: var(
+      --account-center-border,
+      var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200)))
+    );
+    --border-radius: var(
+      --account-center-border-radius,
+      var(--w3o-border-radius, 1rem)
+    );
 
     cursor: pointer;
     pointer-events: auto;
@@ -118,11 +127,7 @@
     color: var(--account-center-minimized-balance-color, inherit);
   }
 
-  .chain-icon {
-    width: 22px;
-    height: 22px;
-    padding: 4px;
-    border-radius: 25px;
+  .chain-icon-container {
     margin-right: 4px;
   }
 
@@ -138,17 +143,6 @@
   .drop-shadow {
     filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
   }
-
-  .color-yellow {
-    color: var(
-      --account-center-chain-warning,
-      var(--onboard-warning-500, var(--warning-500))
-    );
-  }
-
-  .color-white {
-    color: var(--onboard-primary-100, var(--primary-100));
-  }
 </style>
 
 <div
@@ -221,23 +215,32 @@
         })`}
       >
         <div class="flex items-center">
-          <div
-            class:color-yellow={!validAppChain}
-            class:color-white={validAppChain && !validAppChain.icon}
-            class="chain-icon flex justify-center items-center"
-            style={`background-color: ${
-              validAppChain
+          <div class="chain-icon-container">
+            <WalletAppBadge
+              size={22}
+              padding={4}
+              background="custom"
+              color={!validAppChain
+                ? `var(
+                    --account-center-chain-warning,
+                    var(--onboard-warning-500, var(--warning-500))
+                  )`
+                : !validAppChain.icon
+                ? `var(--onboard-primary-100, var(--primary-100))`
+                : undefined}
+              customBackgroundColor={validAppChain
                 ? validAppChain.color ||
                   (defaultChainStyles && defaultChainStyles.color) ||
                   unrecognizedChainStyle.color
-                : 'var(--onboard-warning-200, var(--warning-200))'
-            };`}
-          >
-            {@html validAppChain
-              ? validAppChain.icon ||
-                (defaultChainStyles && defaultChainStyles.icon) ||
-                unrecognizedChainStyle.icon
-              : warningIcon}
+                : `var(--onboard-warning-200, var(--warning-200))`}
+              border="transparent"
+              radius={25}
+              icon={validAppChain
+                ? validAppChain.icon ||
+                  (defaultChainStyles && defaultChainStyles.icon) ||
+                  unrecognizedChainStyle.icon
+                : warningIcon}
+            />
           </div>
 
           <NetworkSelector
@@ -249,6 +252,5 @@
         </div>
       </div>
     </div>
-
   </div>
 </div>

packages/dcent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/dcent",
-  "version": "2.2.6",
+  "version": "2.2.7-alpha.1",
   "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",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.3.2",
-    "@web3-onboard/hw-common": "^2.2.2",
+    "@web3-onboard/hw-common": "^2.3.0-alpha.1",
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "eth-dcent-keyring": "^0.2.2"

packages/dcent/src/index.ts

@@ -5,8 +5,6 @@ import type {
   Platform
 } from '@web3-onboard/common'
 
-import type { providers } from 'ethers'
-
 import type {
   CustomNetwork,
   Account,

packages/demo/package.json

@@ -24,30 +24,30 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.18.1-alpha.1",
+    "@web3-onboard/core": "^2.18.1-alpha.2",
     "@web3-onboard/coinbase": "^2.2.3",
     "@web3-onboard/transaction-preview": "^2.0.7",
-    "@web3-onboard/dcent": "^2.2.6",
+    "@web3-onboard/dcent": "^2.2.7-alpha.1",
     "@web3-onboard/frontier": "^2.0.3",
     "@web3-onboard/fortmatic": "^2.0.18",
     "@web3-onboard/frame": "2.0.0",
     "@web3-onboard/gas": "^2.1.7",
     "@web3-onboard/gnosis": "^2.1.9",
-    "@web3-onboard/keepkey": "^2.3.6",
-    "@web3-onboard/keystone": "^2.3.6",
+    "@web3-onboard/keepkey": "^2.3.7-alpha.1",
+    "@web3-onboard/keystone": "^2.3.7-alpha.1",
     "@web3-onboard/ledger": "^2.4.5",
     "@web3-onboard/infinity-wallet": "^2.0.3",
-    "@web3-onboard/injected-wallets": "^2.8.5",
+    "@web3-onboard/injected-wallets": "^2.9.0-alpha.1",
     "@web3-onboard/magic": "^2.1.6",
     "@web3-onboard/phantom": "^2.0.1",
     "@web3-onboard/portis": "^2.1.6",
     "@web3-onboard/sequence": "^2.0.7",
-    "@web3-onboard/trezor": "^2.4.1",
+    "@web3-onboard/trezor": "^2.4.2-alpha.1",
     "@web3-onboard/trust": "^2.0.3",
     "@web3-onboard/torus": "^2.2.4",
     "@web3-onboard/taho": "^2.0.3",
     "@web3-onboard/web3auth": "^2.2.2",
-    "@web3-onboard/walletconnect": "^2.3.7",
+    "@web3-onboard/walletconnect": "^2.3.8-alpha.1",
     "@web3-onboard/enkrypt": "^2.0.3",
     "@web3-onboard/mew-wallet": "^2.0.2",
     "@web3-onboard/xdefi": "^2.0.3",

packages/demo/src/App.svelte

@@ -153,7 +153,8 @@
 
   const trezorOptions = {
     email: 'test@test.com',
-    appUrl: 'https://www.blocknative.com'
+    appUrl: 'https://www.blocknative.com',
+    consecutiveEmptyAccountThreshold: 10
     // containerElement: '#sample-container-el'
   }
   const trezor = trezorModule(trezorOptions)

packages/hw-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/hw-common",
-  "version": "2.2.2",
+  "version": "2.3.0-alpha.1",
   "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",

packages/hw-common/src/types.ts

@@ -44,6 +44,11 @@ export type SelectAccountOptions = {
   scanAccounts: ScanAccounts
   supportsCustomPath?: boolean
   containerElement?: string
+  /**
+   * A number that defines the amount of consecutive empty addresses displayed
+   * within the Account Select modal. Default is 5 
+   */
+  consecutiveEmptyAccountThreshold?: number
 }
 
 export type BasePath = {

packages/hw-common/src/validation.ts

@@ -29,6 +29,7 @@ const selectAccountOptions = Joi.object({
   chains: chains,
   scanAccounts: Joi.function().arity(1).required(),
   supportsCustomPath: Joi.bool(),
+  consecutiveEmptyAccountThreshold: Joi.number(),
   containerElement: Joi.string()
 })
 

packages/injected/README.md

@@ -33,6 +33,7 @@ const connectedWallets = await onboard.connectWallet()
 
 console.log(connectedWallets)
 ```
+
 ### Injected Wallets Supported Natively
 
 - Metamask - _Desktop & Mobile_
@@ -82,6 +83,7 @@ console.log(connectedWallets)
 - ApexWallet - _Desktop_
 - BifrostWallet - _Desktop & Mobile_
 - Safeheron - _Desktop_
+- Talisman - _Desktop_
 
 ## Filtering Wallets
 

packages/injected/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/injected-wallets",
-  "version": "2.8.6",
+  "version": "2.9.0-alpha.1",
   "description": "Injected wallet module for connecting browser extension and mobile wallets 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",

packages/injected/src/constants.ts

@@ -25,5 +25,6 @@ export const WALLET_NAMES: { [key: string]: string } = {
   zerion: 'Zerion',
   rainbow: 'Rainbow',
   defiwallet: 'DeFi Wallet',
-  safeheron: 'Safeheron'
+  safeheron: 'Safeheron',
+  talismanEth: 'Talisman'
 }

packages/injected/src/icons/talisman.ts

@@ -0,0 +1,13 @@
+export default `
+<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="82" height="82" rx="12" fill="#d5ff5c"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M59.117 44.663c.608 1.325 2.398 1.792 3.428.762l1.89-1.89a5 5 0 0 1 7.072 7.071L56.234 65.879C52.565 70.233 47.07 73 40.932 73c-6.403 0-12.102-3.008-15.763-7.689L10.464 50.607a5 5 0 0 1 7.071-7.071l1.861 1.86c1.008 1.009 2.759.555 3.354-.74a1.94 1.94 0 0 0 .182-.813V21a5 5 0 0 1 10 0v11.557c0 .994 1.018 1.669 1.966 1.37.6-.19 1.034-.737 1.034-1.366V14a5 5 0 0 1 10 0v18.561c0 .63.433 1.176 1.033 1.365.948.3 1.966-.375 1.966-1.37V21a5 5 0 1 1 10 0v22.835c0 .287.066.567.186.828z" fill="#fd4848"/>
+    <path d="M56.933 55s-7.164 10-16 10c-8.837 0-16-10-16-10s7.163-10 16-10c8.836 0 16 10 16 10z" fill="#d5ff5c"/>
+    <path d="M48.43 55a7.499 7.499 0 1 1-14.996 0 7.499 7.499 0 0 1 14.997 0z" stroke="#fd4848" stroke-width="1.003"/>
+    <path d="M45.43 55a4.499 4.499 0 1 1-8.997 0 4.499 4.499 0 0 1 8.998 0z" stroke="#fd4848" stroke-width="1.003"/>
+    <path d="M51.431 55c0 5.798-4.7 10.498-10.498 10.498-5.799 0-10.5-4.7-10.5-10.498 0-5.798 4.701-10.499 10.5-10.499 5.798 0 10.498 4.7 10.498 10.499z" stroke="#fd4848" stroke-width="1.003"/>
+    <path d="M54.43 55c0 7.455-6.043 13.498-13.498 13.498-7.455 0-13.498-6.043-13.498-13.498 0-7.456 6.043-13.499 13.498-13.499 7.455 0 13.499 6.044 13.499 13.499z" stroke="#fd4848" stroke-width="1.003"/>
+    <path d="M42.431 55a1.499 1.499 0 1 1-2.997 0 1.499 1.499 0 0 1 2.997 0z" fill="#fd4848" stroke="#fd4848" stroke-width="1.003"/>
+    <path d="M25.653 55.121A26.748 26.748 0 0 1 25.56 55l.094-.122a33.186 33.186 0 0 1 4.293-4.499c2.866-2.473 6.75-4.878 10.987-4.878 4.236 0 8.12 2.405 10.986 4.878a33.196 33.196 0 0 1 4.293 4.5l.094.12a28.888 28.888 0 0 1-1.01 1.235 33.186 33.186 0 0 1-3.377 3.386c-2.865 2.474-6.75 4.878-10.986 4.878-4.237 0-8.121-2.404-10.986-4.878a33.196 33.196 0 0 1-4.294-4.499z" stroke="#d5ff5c" stroke-width="1.003"/>
+</svg>
+`

packages/injected/src/types.ts

@@ -60,8 +60,9 @@ export enum ProviderIdentityFlag {
   Zerion = 'isZerion',
   Rainbow = 'isRainbow',
   SafePal = 'isSafePal',
-  DeFiWallet = 'isDeficonnectProvider', 
-  Safeheron = 'isSafeheron'
+  DeFiWallet = 'isDeficonnectProvider',
+  Safeheron = 'isSafeheron',
+  Talisman = 'isTalisman'
 }
 
 export enum ProviderLabel {
@@ -99,7 +100,7 @@ export enum ProviderLabel {
   OneInch = '1inch Wallet',
   Tokenary = 'Tokenary Wallet',
   Tally = 'Taho',
-  Rabby = 'Rabby',
+  Rabby = 'Rabby Wallet',
   MathWallet = 'MathWallet',
   GameStop = 'GameStop Wallet',
   BitKeep = 'BitKeep',
@@ -113,7 +114,8 @@ export enum ProviderLabel {
   Rainbow = 'Rainbow',
   SafePal = 'SafePal',
   DeFiWallet = 'DeFi Wallet',
-  Safeheron = 'Safeheron'
+  Safeheron = 'Safeheron',
+  Talisman = 'Talisman'
 }
 
 export interface MeetOneProvider extends ExternalProvider {
@@ -144,7 +146,8 @@ export enum InjectedNameSpace {
   Trust = 'trustwallet',
   Frontier = 'frontier',
   DeFiConnectProvider = 'deficonnectProvider',
-  Safeheron = 'safeheron'
+  Safeheron = 'safeheron',
+  Talisman = 'talismanEth'
 }
 
 export interface CustomWindow extends Window {
@@ -180,6 +183,7 @@ export interface CustomWindow extends Window {
   trustwallet: InjectedProvider
   deficonnectProvider: InjectedProvider
   safeheron: InjectedProvider
+  talismanEth: InjectedProvider
 }
 
 export type InjectedProvider = ExternalProvider &

packages/injected/src/wallets.ts

@@ -765,6 +765,18 @@ const safeheron: InjectedWalletModule = {
   platforms: ['desktop', 'Chrome', 'Chromium', 'Microsoft Edge']
 }
 
+const talisman: InjectedWalletModule = {
+  label: ProviderLabel.Talisman,
+  injectedNamespace: InjectedNameSpace.Talisman,
+  checkProviderIdentity: ({ provider }) =>
+    !!provider && !!provider[ProviderIdentityFlag.Talisman],
+  getIcon: async () => (await import('./icons/talisman.js')).default,
+  getInterface: async () => ({
+    provider: createEIP1193Provider(window.talismanEth)
+  }),
+  platforms: ['desktop']
+}
+
 const wallets = [
   zeal,
   exodus,
@@ -812,7 +824,8 @@ const wallets = [
   safepal,
   defiwallet,
   infinitywallet,
-  safeheron
+  safeheron,
+  talisman
 ]
 
 export default wallets

packages/keepkey/README.md

@@ -49,17 +49,23 @@ console.log(connectedWallets)
 ```
 
 Initialization options:
+
 ```typescript
 type keepkeyInitOptions = {
   containerElement?: string
   filter?: Platform
+  /**
+   * A number that defines the amount of consecutive empty addresses displayed
+   * within the Account Select modal. Default is 5
+   */
+  consecutiveEmptyAccountThreshold?: number
 }
 ```
 
 The following is a list of the platforms that can be filtered:
 
 ```typescript
-type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all'
 
 type Platform =
   | 'Windows Phone'

packages/keepkey/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keepkey",
-  "version": "2.3.6",
+  "version": "2.3.7-alpha.1",
   "description": "KeepKey hardware 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",
@@ -64,7 +64,7 @@
     "@shapeshiftoss/hdwallet-core": "^1.15.2",
     "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2",
     "@web3-onboard/common": "^2.3.2",
-    "@web3-onboard/hw-common": "^2.2.2",
+    "@web3-onboard/hw-common": "^2.3.0-alpha.1",
     "ethereumjs-util": "^7.1.3"
   }
 }