FEATURE: Add Zeal Wallet Package

.circleci/config.yml

@@ -333,6 +333,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/transaction-preview
     steps:
       - node-build-steps
+  build-zeal:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/zeal
+    steps:
+      - node-build-steps
   build-phantom:
     docker:
       - image: cimg/node:16.13.1
@@ -509,6 +515,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/transaction-preview
     steps:
       - node-staging-build-steps
+  build-staging-zeal:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/zeal
+    steps:
+      - node-staging-build-steps
   build-staging-phantom:
     docker:
       - image: cimg/node:16.13.1
@@ -687,6 +699,12 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-transaction-preview:
           <<: *deploy_staging_filters
+  zeal:
+    jobs:
+      - build-zeal:
+          <<: *deploy_production_filters
+      - build-staging-zeal:
+          <<: *deploy_staging_filters
   phantom:
     jobs:
       - build-phantom:

packages/demo/package.json

@@ -30,7 +30,7 @@
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.3",
     "@web3-onboard/gnosis": "^2.1.5",
-    "@web3-onboard/injected-wallets": "^2.5.0-alpha.2",
+    "@web3-onboard/injected-wallets": "^2.5.0-alpha.3",
     "@web3-onboard/keepkey": "^2.3.2",
     "@web3-onboard/keystone": "^2.3.2",
     "@web3-onboard/ledger": "^2.4.0-alpha.1",
@@ -46,6 +46,7 @@
     "@web3-onboard/enkrypt": "^2.0.0",
     "@web3-onboard/mew-wallet": "^2.0.0",
     "@web3-onboard/uauth": "^2.0.0",
+    "@web3-onboard/zeal": "^2.0.0-alpha.1",
     "vconsole": "^3.9.5"
   },
   "license": "MIT",

packages/demo/src/App.svelte

@@ -17,6 +17,7 @@
   import dcentModule from '@web3-onboard/dcent'
   import sequenceModule from '@web3-onboard/sequence'
   import tallyHoModule from '@web3-onboard/tallyho'
+  import zealModule from '@web3-onboard/zeal'
   import transactionPreviewModule from '@web3-onboard/transaction-preview'
   import enkryptModule from '@web3-onboard/enkrypt'
   import mewWalletModule from '@web3-onboard/mew-wallet'
@@ -62,7 +63,6 @@
 
   let transactionObject = defaultTransactionObject
   let signMsg = 'Any string message'
-  let signTypedMsg
 
   const injected = injectedModule({
     custom: [
@@ -97,6 +97,7 @@
   const keystone = keystoneModule()
   const gnosis = gnosisModule()
   const tallyho = tallyHoModule()
+  const zeal = zealModule()
   const phantom = phantomModule()
 
   const trezorOptions = {
@@ -129,6 +130,7 @@
   const onboard = Onboard({
     wallets: [
       injected,
+      zeal,
       web3auth,
       ledger,
       trezor,
@@ -293,7 +295,9 @@
   }
 
   let toAddress
-  const sendTransaction = async (provider) => {
+  const sendTransaction = async provider => {
+    await onboard.setChain({ chainId: '0x5' })
+
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
     const signer = ethersProvider.getSigner()
@@ -310,6 +314,8 @@
   }
 
   const sendTransactionWithPreFlight = async (provider, balance) => {
+    await onboard.setChain({ chainId: '0x5' })
+
     const balanceValue = Object.values(balance)[0]
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
@@ -362,13 +368,63 @@
     console.log({ signMsg, signature, recoveredAddress, addr })
   }
 
+  let typedMsg = JSON.stringify(
+    {
+      domain: {
+        chainId: '0x5',
+        name: 'Web3-Onboard Test App',
+        verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
+        version: '1'
+      },
+      message: {
+        contents: 'Hello, Bob!',
+        from: {
+          name: 'Cow',
+          wallets: [
+            '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+            '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF'
+          ]
+        },
+        to: [
+          {
+            name: 'Bob',
+            wallets: [
+              '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+              '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57',
+              '0xB0B0b0b0b0b0B000000000000000000000000000'
+            ]
+          }
+        ]
+      },
+      primaryType: 'Message',
+      types: {
+        EIP712Domain: [
+          { name: 'name', type: 'string' },
+          { name: 'version', type: 'string' },
+          { name: 'chainId', type: 'uint256' },
+          { name: 'verifyingContract', type: 'address' }
+        ],
+        Message: [
+          { name: 'from', type: 'Person' },
+          { name: 'to', type: 'Person[]' },
+          { name: 'contents', type: 'string' }
+        ],
+        Person: [
+          { name: 'name', type: 'string' },
+          { name: 'wallets', type: 'address[]' }
+        ]
+      }
+    },
+    undefined,
+    2
+  )
   const signTypedMessage = async (provider, address) => {
-    const data = JSON.parse(signTypedMsg)
+    await onboard.setChain({ chainId: '0x5' })
     const signature = await provider.request({
-      method: 'eth_signTypedData',
-      params: [address, data]
+      method: 'eth_signTypedData_v4',
+      params: [address, typedMsg]
     })
-    const { domain, types, message } = data
+    const { domain, types, message } = JSON.parse(typedMsg)
 
     delete types.EIP712Domain
     console.log(verifyTypedData(domain, types, message, signature))
@@ -555,9 +611,9 @@
   :root {
     --background-color: #ffffff; /* --white */
     --text-color: #1a1d26; /* --gray-700 */
-    --border-color: #D0D4F7; /* --gray-100 taken from future mock */
+    --border-color: #d0d4f7; /* --gray-100 taken from future mock */
 
-    --accent-background: #EFF1FC; /* --gray-100 (currently gray-100 in connect modal) */
+    --accent-background: #eff1fc; /* --gray-100 (currently gray-100 in connect modal) */
     --accent-color: #929bed; /* --primary-400 */
     --accent-color-hover: #eff1fc; /* --primary-200 */
 
@@ -1015,52 +1071,48 @@
           </div>
           <div>
             <input
-              id="sign-msg-input"
               type="text"
               class="text-input"
-              placeholder="Message..."
-              bind:value={signMsg}
+              placeholder="0x..."
+              bind:value={toAddress}
             />
-            <button on:click={signMessage(provider, address)}>
-              Sign Message
+            <button on:click={sendTransaction(provider)}>
+              Send Transaction
             </button>
           </div>
           <div>
             <input
-              id="sign-type-msg-input"
               type="text"
               class="text-input"
-              placeholder="Typed message..."
-              bind:value={signTypedMsg}
+              placeholder="0x..."
+              bind:value={toAddress}
             />
-            <button on:click={signTypedMessage(provider, address)}>
-              Sign Typed Message
+            <button on:click={sendTransactionWithPreFlight(provider, balance)}>
+              Send with Preflight Notifications
             </button>
           </div>
-
           <div>
             <input
+              id="sign-msg-input"
               type="text"
               class="text-input"
-              placeholder="0x..."
-              bind:value={toAddress}
+              placeholder="Message..."
+              bind:value={signMsg}
             />
-            <button on:click={sendTransaction(provider)}>
-              Send Transaction
+            <button on:click={signMessage(provider, address)}>
+              Sign Message
             </button>
           </div>
           <div>
-            <input
+            <textarea
+              bind:value={typedMsg}
               type="text"
-              class="text-input"
-              placeholder="0x..."
-              bind:value={toAddress}
+              class="sign-transaction-textarea"
             />
-            <button on:click={sendTransactionWithPreFlight(provider, balance)}>
-              Send with Preflight Notifications
+            <button on:click={signTypedMessage(provider, address)}>
+              Sign Typed Message
             </button>
           </div>
-
           <div class="sign-transaction">
             <textarea
               bind:value={transactionObject}

packages/injected/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/injected-wallets",
-  "version": "2.5.0-alpha.2",
+  "version": "2.5.0-alpha.3",
   "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/icons/zeal.ts

@@ -0,0 +1,6 @@
+export default `<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="10.3333" fill="#00FFFF"/>
+<path d="M7.44031 24.5598H24.5597V16.8561H10.8642C8.97323 16.8561 7.44031 18.389 7.44031 20.28V24.5598Z" fill="#0B1821"/>
+<path d="M24.5597 7.44043H7.44031V15.1442H21.1358C23.0268 15.1442 24.5597 13.6112 24.5597 11.7203V7.44043Z" fill="#0B1821"/>
+</svg>
+`

packages/injected/src/types.ts

@@ -50,6 +50,7 @@ export enum ProviderIdentityFlag {
   Opera = 'isOpera',
   Bitski = 'isBitski',
   Enkrypt = 'isEnkrypt',
+  Zeal = 'isZeal',
   Phantom = 'isPhantom'
 }
 
@@ -91,6 +92,7 @@ export enum ProviderLabel {
   Sequence = 'Sequence',
   Core = 'Core',
   Enkrypt = 'Enkrypt',
+  Zeal = 'Zeal',
   Phantom = 'Phantom'
 }
 
@@ -116,13 +118,15 @@ export enum InjectedNameSpace {
   Avalanche = 'avalanche',
   Bitski = 'Bitski',
   Enkrypt = 'enkrypt',
+  Zeal = 'zeal',
   Phantom = 'phantom'
 }
 
 export interface CustomWindow extends Window {
   BinanceChain: BinanceProvider
   ethereum: InjectedProvider
   tally: InjectedProvider
+  zeal: InjectedProvider
   web3: ExternalProvider | MeetOneProvider
   arbitrum: InjectedProvider
   xfi: {

packages/injected/src/wallets.ts

@@ -496,6 +496,18 @@ const tally: InjectedWalletModule = {
   platforms: ['desktop']
 }
 
+const zeal: InjectedWalletModule = {
+  label: ProviderLabel.Zeal,
+  injectedNamespace: InjectedNameSpace.Zeal,
+  checkProviderIdentity: ({ provider }) =>
+    !!provider && !!provider[ProviderIdentityFlag.Zeal],
+  getIcon: async () => (await import('./icons/zeal.js')).default,
+  getInterface: async () => ({
+    provider: createEIP1193Provider(window.zeal)
+  }),
+  platforms: ['desktop']
+}
+
 const rabby: InjectedWalletModule = {
   label: ProviderLabel.Rabby,
   injectedNamespace: InjectedNameSpace.Ethereum,
@@ -642,6 +654,7 @@ const phantom: InjectedWalletModule = {
 }
 
 const wallets = [
+  zeal,
   exodus,
   metamask,
   binance,

packages/zeal/README.md

@@ -0,0 +1,32 @@
+# @web3-onboard/zeal
+
+## Wallet module for connecting Zeal to web3-onboard
+
+See [Zeal](https://www.zeal.app/) for details.
+
+For any questions or issues related to integration with Zeal wallet do not hesitate to contact our builders via [[email protected]](mailto:[email protected]) OR ping us on twitter [@withzeal](https://twitter.com/withzeal)
+
+### Install
+
+`npm i @web3-onboard/core @web3-onboard/zeal`
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import zealWalletModule from '@web3-onboard/zeal'
+
+// initialize the module with options
+const zealWalletSdk = zealWalletModule()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    zealWalletModule()
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```