Merge pull request #1266 from blocknative/release/2.11.0

Release: 2.11.0 (main)

.circleci/config.yml

@@ -303,6 +303,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/sequence
     steps:
       - node-build-steps
+  build-tallyho:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/tallyho
+    steps:
+      - node-build-steps
 
   # Build staging/Alpha releases
   build-staging-core:
@@ -443,6 +449,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/sequence
     steps:
       - node-staging-build-steps
+  build-staging-tallyho:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/tallyho
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -585,3 +597,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-sequence:
           <<: *deploy_staging_filters
+  tallyho:
+    jobs:
+      - build-tallyho:
+          <<: *deploy_production_filters
+      - build-staging-tallyho:
+          <<: *deploy_staging_filters

README.md

@@ -96,6 +96,7 @@ For full documentation, check out the README.md for each package:
 - [MEW](packages/mew/README.md)
 - [Web3Auth](packages/web3auth/README.md)
 - [Sequence](packages/sequence/README.md)
+- [TallyHo](packages/tallyho/README.md)
 
 **Hardware Wallets**
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "private": true,
   "workspaces": {
     "packages": ["./packages/*"],

packages/core/README.md

@@ -858,9 +858,11 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-wallet-button-background
   --onboard-wallet-button-background-hover
   --onboard-wallet-button-color
+  --onboard-wallet-button-color-hover
   --onboard-wallet-button-border-color
   --onboard-wallet-button-border-radius
   --onboard-wallet-button-box-shadow
+  --onboard-wallet-button-box-shadow-hover
   --onboard-wallet-app-icon-border-color
 
   /* CUSTOMIZE THE SHARED MODAL */

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "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/index.ts

@@ -328,7 +328,7 @@ function mountApp() {
 
   if (!containerElement) {
     throw new Error(
-      `Element with query ${state.get().accountCenter} does not exist.`
+      `Element with query ${containerElementQuery} does not exist.`
     )
   }
 

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

@@ -115,7 +115,7 @@
       }
 
       connectingErrorMessage = ''
-
+      scrollToTop()
       // change step on next event loop
       setTimeout(() => setStep('connectingWallet'), 1)
     } catch (error) {
@@ -196,8 +196,10 @@
       trackWallet(provider, label)
       updateSelectedWallet(update)
       setStep('connectedWallet')
+      scrollToTop()
     } catch (error) {
       const { code } = error as { code: number; message: string }
+      scrollToTop()
 
       // user rejected account access
       if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_REJECTED) {

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

@@ -33,6 +33,10 @@
       --onboard-wallet-button-background-hover,
       var(--onboard-primary-100, var(--primary-100))
     );
+    color: var(
+      --onboard-wallet-button-color-hover,
+      var(--onboard-gray-700, var(--gray-700))
+    );
   }
 
   button.connected {
@@ -53,6 +57,10 @@
     );
     box-shadow: var(--onboard-wallet-button-box-shadow, var(--box-shadow-0));
   }
+  
+  button.wallet-button-styling:hover {
+    box-shadow: var(--onboard-wallet-button-box-shadow-hover, var(--box-shadow-0));
+  }
 </style>
 
 <button

packages/demo/package.json

@@ -28,7 +28,7 @@
     "@web3-onboard/fortmatic": "^2.0.13",
     "@web3-onboard/gas": "^2.1.2",
     "@web3-onboard/gnosis": "^2.1.2",
-    "@web3-onboard/injected-wallets": "^2.2.1",
+    "@web3-onboard/injected-wallets": "^2.2.2",
     "@web3-onboard/keepkey": "^2.3.0",
     "@web3-onboard/keystone": "^2.3.0",
     "@web3-onboard/ledger": "^2.3.0",
@@ -37,6 +37,7 @@
     "@web3-onboard/sequence": "^2.0.1",
     "@web3-onboard/torus": "^2.1.2",
     "@web3-onboard/trezor": "^2.3.0",
+    "@web3-onboard/tallyho": "^2.0.0",
     "@web3-onboard/walletconnect": "^2.1.2",
     "@web3-onboard/web3auth": "^2.1.2",
     "vconsole": "^3.9.5"

packages/demo/src/App.svelte

@@ -16,6 +16,7 @@
   import gas from '@web3-onboard/gas'
   import dcentModule from '@web3-onboard/dcent'
   import sequenceModule from '@web3-onboard/sequence'
+  import tallyHoModule from '@web3-onboard/tallyho'
   import {
     recoverAddress,
     arrayify,
@@ -84,6 +85,7 @@
   const keepkey = keepkeyModule()
   const keystone = keystoneModule()
   const gnosis = gnosisModule()
+  const tallyho = tallyHoModule()
 
   const trezorOptions = {
     email: '[email protected]',
@@ -104,21 +106,22 @@
 
   const onboard = Onboard({
     wallets: [
+      injected,
       web3auth,
       ledger,
       trezor,
       walletConnect,
       keepkey,
       keystone,
       coinbaseWallet,
-      injected,
       magic,
       fortmatic,
       portis,
       torus,
       gnosis,
       dcent,
-      sequence
+      sequence,
+      tallyho
     ],
     gas,
     chains: [

packages/injected/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/injected-wallets",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "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

@@ -14,4 +14,5 @@ export const WALLET_NAMES: { [key: string]: string } = {
   frame: 'Frame',
   bitkeep: 'BitKeep',
   sequence: 'Sequence',
+  core: 'Core'
 }

packages/injected/src/icons/core.ts

@@ -0,0 +1,4 @@
+export default `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="256" height="256" rx="128" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M87.6477 203.403C66.6922 203.403 47.0213 198.931 30 191.095L99.2514 127.885C89.6861 120.038 83.5836 108.126 83.5836 94.7884C83.5836 81.2079 89.9104 69.1052 99.7773 61.2668V52.0015H126.08C126.177 52.0008 126.274 52.0005 126.372 52.0005C137.068 52.0005 146.848 55.9254 154.349 62.4136C161.85 55.926 171.629 52.0015 182.325 52.0015H182.389L182.39 52L182.392 52.0015H208.919V61.2679C218.786 69.1062 225.113 81.209 225.113 94.7894C225.113 111.867 215.108 126.608 200.64 133.47C195.467 148.743 185.737 162.479 172.714 173.652V193.398H139.977C124.227 199.801 106.455 203.403 87.6477 203.403ZM126.371 127.703C134.16 127.703 141.317 124.998 146.954 120.475L154.282 136.976L161.645 120.397C167.296 124.967 174.491 127.703 182.325 127.703C200.502 127.703 215.238 112.967 215.238 94.7895C215.238 76.6117 200.502 61.8757 182.325 61.8757C170.513 61.8757 160.155 68.0975 154.348 77.4425C148.541 68.0975 138.183 61.8757 126.371 61.8757C108.193 61.8757 93.4575 76.6117 93.4575 94.7895C93.4575 112.967 108.193 127.703 126.371 127.703ZM126.371 117.829C139.096 117.829 149.411 107.514 149.411 94.7893C149.411 82.0648 139.096 71.7496 126.371 71.7496C113.647 71.7496 103.331 82.0648 103.331 94.7893C103.331 107.514 113.647 117.829 126.371 117.829ZM126.371 107.955C133.642 107.955 139.537 102.06 139.537 94.7893C139.537 87.5182 133.642 81.6238 126.371 81.6238C119.1 81.6238 113.206 87.5182 113.206 94.7893C113.206 102.06 119.1 107.955 126.371 107.955ZM205.364 94.7893C205.364 107.514 195.049 117.829 182.324 117.829C169.6 117.829 159.285 107.514 159.285 94.7893C159.285 82.0648 169.6 71.7496 182.324 71.7496C195.049 71.7496 205.364 82.0648 205.364 94.7893ZM195.49 94.7893C195.49 102.06 189.596 107.955 182.324 107.955C175.053 107.955 169.159 102.06 169.159 94.7893C169.159 87.5182 175.053 81.6238 182.324 81.6238C189.596 81.6238 195.49 87.5182 195.49 94.7893Z" fill="white"/>
+</svg>`

packages/injected/src/icons/gamestop.ts

@@ -4,4 +4,4 @@ export default `
         <path fill-rule="evenodd" clip-rule="evenodd" d="M7.52862 9.75V15.9646C7.52862 16.4706 7.91965 16.8565 8.4254 16.8565H15.7621C16.2679 16.8565 16.6589 16.4706 16.6589 15.9646V10.7524H17.625V15.9646C17.625 16.9956 16.8045 17.8125 15.7621 17.8125H8.4254C7.38304 17.8125 6.5625 16.9956 6.5625 15.9646V9.75H7.52862Z" fill="white"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5625 8.22251C6.5625 7.19176 7.38304 6.375 8.4254 6.375H15.9086V8.64657H16.1323C16.9727 8.64657 17.625 9.29631 17.625 10.1266V10.8949C17.625 11.7253 16.9727 12.375 16.1323 12.375H8.4254C7.38304 12.375 6.5625 11.5582 6.5625 10.5275V8.22251ZM14.9425 8.64657V7.33077H8.4254C7.91965 7.33077 7.52862 7.71661 7.52862 8.22251V10.5275C7.52862 11.0334 7.91965 11.4192 8.4254 11.4192H11.6107V8.64657H14.9425ZM12.5768 11.4192H16.1323C16.4361 11.4192 16.6589 11.2004 16.6589 10.8949V10.1266C16.6589 9.82115 16.4361 9.60235 16.1323 9.60235H12.5768V11.4192Z" fill="white"/>
     </svg>
-`
+`

packages/injected/src/icons/mathwallet.ts

@@ -44,4 +44,4 @@ export default `<svg width="130" height="130" viewBox="0 0 130 130" fill="none"
 </radialGradient>
 </defs>
 </svg>
-`
+`

packages/injected/src/types.ts

@@ -45,7 +45,8 @@ export enum ProviderIdentityFlag {
   MathWallet = 'isMathWallet',
   GameStop = 'isGamestop',
   BitKeep = 'isBitKeep',
-  Sequence = 'isSequence'
+  Sequence = 'isSequence',
+  Core = 'isAvalanche'
 }
 
 export enum ProviderLabel {
@@ -77,12 +78,13 @@ export enum ProviderLabel {
   XDEFI = 'XDEFI Wallet',
   OneInch = '1inch Wallet',
   Tokenary = 'Tokenary Wallet',
-  Tally = 'Tally Wallet',
+  Tally = 'Tally Ho Wallet',
   Rabby = 'Rabby',
   MathWallet = 'MathWallet',
   GameStop = 'GameStop Wallet',
   BitKeep = 'BitKeep',
-  Sequence = 'Sequence'
+  Sequence = 'Sequence',
+  Core = 'Core'
 }
 
 export interface MeetOneProvider extends ExternalProvider {
@@ -103,7 +105,8 @@ export enum InjectedNameSpace {
   Arbitrum = 'arbitrum',
   XFI = 'xfi',
   GameStop = 'gamestop',
-  BitKeep = 'bitkeep'
+  BitKeep = 'bitkeep',
+  Avalanche = 'avalanche'
 }
 
 export interface CustomWindow extends Window {
@@ -115,10 +118,11 @@ export interface CustomWindow extends Window {
   xfi: {
     ethereum: InjectedProvider
   }
-  gamestop: InjectedProvider,
+  gamestop: InjectedProvider
   bitkeep: {
     ethereum: InjectedProvider
   }
+  avalanche: InjectedProvider
 }
 
 export type InjectedProvider = ExternalProvider &

packages/injected/src/wallets.ts

@@ -23,23 +23,45 @@ declare const window: CustomWindow
 const UNSUPPORTED_METHOD = null
 
 function getInjectedInterface(
-  identity: string
+  identity: string,
+  checkOtherProviderFlags?: boolean
 ): () => Promise<{ provider: EIP1193Provider }> {
   return async () => ({
     provider: (window.ethereum.providers &&
     Array.isArray(window.ethereum.providers)
-      ? window.ethereum.providers.find(provider => !!provider[identity])
+      ? getInterfaceFromProvidersArray(identity, checkOtherProviderFlags)
       : window.ethereum) as EIP1193Provider
   })
 }
 
+function getInterfaceFromProvidersArray(
+  identity: string,
+  checkOtherProviderFlags?: boolean
+) {
+  return window.ethereum.providers.find(provider => {
+    return checkOtherProviderFlags
+      ? !!provider[identity] &&
+          !otherProviderFlagsExist(identity, provider)
+      : !!provider[identity]
+  })
+}
+
+function otherProviderFlagsExist(identity: string, provider: any): boolean {
+  const otherProviderFlags = Object.values(ProviderIdentityFlag).filter(
+    id => id !== identity && id !== ProviderIdentityFlag.Detected
+  )
+  return otherProviderFlags.some(id => !!provider[id])
+}
+
 const metamask: InjectedWalletModule = {
   label: ProviderLabel.MetaMask,
   injectedNamespace: InjectedNameSpace.Ethereum,
   checkProviderIdentity: ({ provider }) =>
-    !!provider && !!provider[ProviderIdentityFlag.MetaMask],
+    !!provider &&
+    !!provider[ProviderIdentityFlag.MetaMask] &&
+    !otherProviderFlagsExist(ProviderIdentityFlag.MetaMask, provider),
   getIcon: async () => (await import('./icons/metamask.js')).default,
-  getInterface: getInjectedInterface(ProviderIdentityFlag.MetaMask),
+  getInterface: getInjectedInterface(ProviderIdentityFlag.MetaMask, true),
   platforms: ['all']
 }
 
@@ -94,8 +116,8 @@ const binance: InjectedWalletModule = {
 
     const provider = createEIP1193Provider(window.BinanceChain, {
       eth_chainId: ({ baseRequest }) =>
-        baseRequest({ method: 'eth_chainId' }).then(id =>
-          `0x${parseInt(id as string).toString(16)}`
+        baseRequest({ method: 'eth_chainId' }).then(
+          id => `0x${parseInt(id as string).toString(16)}`
         ),
       // Unsupported method -- will throw error
       eth_selectAccounts: UNSUPPORTED_METHOD,
@@ -512,10 +534,10 @@ const bitkeep: InjectedWalletModule = {
   label: ProviderLabel.BitKeep,
   injectedNamespace: InjectedNameSpace.BitKeep,
   checkProviderIdentity: ({ provider }) =>
-    !!provider && !!provider["ethereum"][ProviderIdentityFlag.BitKeep],
+    !!provider && !!provider['ethereum'][ProviderIdentityFlag.BitKeep],
   getIcon: async () => (await import('./icons/bitkeep.js')).default,
   getInterface: async () => ({
-    provider: window.bitkeep && window.bitkeep.ethereum,
+    provider: window.bitkeep && window.bitkeep.ethereum
   }),
   platforms: ['all']
 }
@@ -532,6 +554,17 @@ const sequence: InjectedWalletModule = {
   platforms: ['all']
 }
 
+const core: InjectedWalletModule = {
+  label: ProviderLabel.Core,
+  injectedNamespace: InjectedNameSpace.Avalanche,
+  checkProviderIdentity: ({ provider }) =>
+    !!provider && !!provider[ProviderIdentityFlag.Core],
+  getIcon: async () => (await import('./icons/core.js')).default,
+  getInterface: getInjectedInterface(ProviderIdentityFlag.Core),
+  // Core wallet is only tested in chrome or chromium browser
+  platforms: ['desktop', 'Chrome', 'Chromium', 'Microsoft Edge']
+}
+
 const wallets = [
   exodus,
   metamask,
@@ -564,7 +597,8 @@ const wallets = [
   mathwallet,
   gamestop,
   bitkeep,
-  sequence
+  sequence,
+  core
 ]
 
 export default wallets

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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",
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.8.2",
+    "@web3-onboard/core": "^2.8.3",
     "@web3-onboard/common": "^2.2.2",
     "use-sync-external-store": "1.0.0"
   },