Integration of FinoaConnect wallet connector service into Web3Onboard

.circleci/config.yml

@@ -448,7 +448,13 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/particle-network
     steps:
       - node-build-steps
-
+  build-finoaconnect:
+    docker:
+      - image: cimg/node:18.0.0
+    working_directory: ~/web3-onboard-monorepo/packages/finoaconnect
+    steps:
+      - node-build-steps
+
   # Build staging/Alpha releases
   build-staging-core:
     docker:
@@ -732,6 +738,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/particle-network
     steps:
       - node-staging-build-steps
+  build-staging-finoaconnect:
+    docker:
+      - image: cimg/node:18.0.0
+    working_directory: ~/web3-onboard-monorepo/packages/finoaconnect
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -1018,3 +1030,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-particle:
           <<: *deploy_staging_filters
+  finoaconnect:
+    jobs:
+      - build-finoaconnect:
+          <<: *deploy_production_filters
+      - build-staging-finoaconnect:
+          <<: *deploy_staging_filters

README.md

@@ -126,6 +126,7 @@ For full documentation, check out the README.md for each package or the [docs pa
 - [Frame](packages/frame/README.md)
 - [Blocto](packages/blocto/README.md)
 - [Particle Network](packages/particle-network/README.md)
+- [FinoaConnect](packages/finoaconnect/README.md)
 
 **Hardware Wallets**
 

docs/src/routes/docs/[...4]wallets/[...36]finoaconnect/+page.md

@@ -0,0 +1,57 @@
+---
+title: FinoaConnect
+---
+
+## Wallet module for connecting FinoaConnect SDK to web3-onboard
+
+## Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/core @web3-onboard/finoaconnect
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/core @web3-onboard/finoaconnect
+```
+
+  </TabPanel>
+</Tabs>
+
+## Usage
+
+Optional initialization object
+```typescript
+	/** Optional object provided to the initiation of the wallet connector. 
+	 * When not included, the wallet connector service connects to FinoaConnect production systems.
+	 * @field {url} URL of the FinoaConnect backend systems to be used
+	 * @field {labelSuffix} arbitrary string label to denote the context of the URL field  */
+	export interface FinoaWalletOption {
+	  url?: string
+	  labelSuffix?: string
+	}
+```
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import finoaConnectModule from '@web3-onboard/finoaconnect'
+
+// initialize the module with options
+const finoaConnect = finoaConnectModule()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    finoaConnect
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```

packages/demo/package.json

@@ -36,6 +36,7 @@
     "@web3-onboard/coinbase": "^2.2.7",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.0.3",
+    "@web3-onboard/finoaconnect": "2.0.0-alpha.1",
     "@web3-onboard/fortmatic": "^2.0.18",
     "@web3-onboard/frame": "^2.0.2",
     "@web3-onboard/frontier": "^2.0.3",

packages/demo/src/App.svelte

@@ -35,6 +35,7 @@
   import venlyModule from '@web3-onboard/venly'
   import bitgetModule from '@web3-onboard/bitget'
   import particleAuthModule from '@web3-onboard/particle-network'
+  import finoaConnectModule from '@web3-onboard/finoaconnect'
   import capsuleModule, {
     Environment,
     OAuthMethod,
@@ -175,6 +176,7 @@
   const cedeStore = cedeStoreModule()
   const blocto = bloctoModule()
   const tallyho = tallyHoModule()
+  const finoaConnect = finoaConnectModule()
 
   const trezorOptions = {
     email: 'test@test.com',
@@ -268,7 +270,8 @@
       arcanaAuth,
       blocto,
       venly,
-      particle
+      particle,
+      finoaConnect
     ],
     // transactionPreview,
     gas,

packages/finoaconnect/README.md

@@ -0,0 +1,51 @@
+# @web3-onboard/finoaconnect
+
+## Wallet module for connecting FinoaConnect SDK to web3-onboard
+
+#### Install
+
+`npm i @web3-onboard/core @web3-onboard/finoaconnect`
+
+## Usage
+
+Optional initialization object
+```typescript
+	/** Optional object provided to the initiation of the wallet connector. 
+	 * When not included, the wallet connector service connects to FinoaConnect production systems.
+	 * @field {url} URL of the FinoaConnect backend systems to be used
+	 * @field {labelSuffix} arbitrary string label to denote the context of the URL field  */
+	export interface FinoaWalletOption {
+	  url?: string
+	  labelSuffix?: string
+	}
+```
+
+```typescript
+import Onboard from '@web3-onboard/core';
+import finoaConnectModule from '@web3-onboard/finoaconnect';
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    finoaConnectModule()
+    //... other wallets
+  ]
+})
+
+// alternatively to connect to a localised development environment
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    finoaConnectModule([
+      {
+        labelSuffix: 'localhost',
+        url: 'http://localhost:8080',
+      }
+    ])
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```

packages/finoaconnect/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@web3-onboard/finoaconnect",
+    "version": "2.0.0-alpha.1",
+    "description": "FinoaConnect enables DApp users to use Finoa's Institutional Custody services.",
+    "keywords": [
+      "Ethereum",
+      "Web3",
+      "EVM",
+      "dapp",
+      "Multichain",
+      "Wallet",
+      "Transaction",
+      "Provider",
+      "Hardware Wallet",
+      "Notifications",
+      "React",
+      "Svelte",
+      "Vue",
+      "Next",
+      "Nuxt",
+      "MetaMask",
+      "Coinbase",
+      "WalletConnect",
+      "Ledger",
+      "Trezor",
+      "Connect Wallet",
+      "Ethereum Hooks",
+      "Blocknative",
+      "Mempool",
+      "pending",
+      "confirmed",
+      "Injected Wallet",
+      "Crypto",
+      "Crypto Wallet",
+      "Tally Ho",
+      "FinoaConnect"
+    ],
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/blocknative/web3-onboard.git",
+      "directory": "packages/finoaconnect"
+    },
+    "homepage": "https://onboard.blocknative.com",
+    "bugs": "https://github.com/blocknative/web3-onboard/issues",
+    "module": "dist/index.js",
+    "browser": "dist/index.js",
+    "main": "dist/index.js",
+    "type": "module",
+    "typings": "dist/index.d.ts",
+    "files": [
+      "dist"
+    ],
+    "scripts": {
+      "build": "tsc",
+      "dev": "tsc -w",
+      "type-check": "tsc --noEmit"
+    },
+    "devDependencies": {
+      "typescript": "5.1.6"
+    },
+    "dependencies": {
+      "@finoa/finoa-connect-sdk": "^1.0.2",
+      "@web3-onboard/core": "^2.20.4"
+    }
+
+  }

packages/finoaconnect/src/fetch-rpc.ts

@@ -0,0 +1,19 @@
+export async function request(url: string, call: object): Promise<any> {
+    // SOURCE: https://github.com/blocknative/web3-onboard/blob/ddfb620c62202b24adfe41994037d9609a697e0d/packages/hw-common/src/index.ts
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        id: '42',
+        ...call
+      })
+    })
+    const json = await response.json()
+    if ('error' in json) {
+      throw json.error
+    }
+    return json.result
+  }

packages/finoaconnect/src/icon.ts

@@ -0,0 +1,6 @@
+export default `
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.029 0A4.029 4.029 0 0 0 0 4.029V19.97A4.029 4.029 0 0 0 4.029 24H19.97A4.029 4.029 0 0 0 24 19.971V4.03A4.029 4.029 0 0 0 19.971 0H4.03ZM9.71 15.252a2.277 2.277 0 0 0 2.275 2.273 2.277 2.277 0 0 0 1.668-3.818l-1.668-1.668-1.363-1.362-2.488-2.489 2.068-2.067 2.005-2.004L13.5 5.41l-2.71 2.71 1.196 1.194 2.208-2.17.719.716.646.644-2.212 2.172 1.696 1.696a4.198 4.198 0 0 1-3.057 7.081 4.205 4.205 0 0 1-4.203-4.2c0-1.061.397-2.073 1.117-2.852l.937-.937 1.363 1.362-.91.91c-.364.394-.58.942-.58 1.517Z" fill="#32C6A1"></path>
+</svg>
+`

packages/finoaconnect/src/index.ts

@@ -0,0 +1,82 @@
+import { FinoaEIP1193Provider } from '@finoa/finoa-connect-sdk'
+import type { Chain, WalletInit } from '@web3-onboard/common'
+
+/** Optional object provided to the initiation of the wallet connector. 
+ * When not included, the wallet connector service connects to FinoaConnect production systems.
+ * @field {url} URL of the FinoaConnect backend systems to be used
+ * @field {labelSuffix} arbitrary string label to denote the context of the URL field  */
+export interface FinoaWalletOption {
+  url?: string
+  labelSuffix?: string
+}
+
+function finoaConnect(option?: string | FinoaWalletOption): WalletInit {
+  const { url, labelSuffix }: FinoaWalletOption =
+    typeof option === 'string' ? { url: option } : !option ? {} : option
+
+  return () => {
+    return {
+      label: `Finoa Wallet${labelSuffix == null ? '' : ' - ' + labelSuffix}`,
+      getIcon: async () => (await import('./icon')).default,
+      getInterface: async ({ chains }) => {
+        const {
+          FinoaEIP1193Provider,
+          FinoaBrowserClient,
+          UnsupportedRequestError
+        } = await import('@finoa/finoa-connect-sdk')
+
+        const { request } = await import('./fetch-rpc')
+
+        const client = new FinoaBrowserClient({
+          windowUrl: url
+        })
+        const provider = new FinoaEIP1193Provider({
+          client
+        })
+
+        const proxyProvider = new Proxy(provider, {
+          get(target, property: keyof FinoaEIP1193Provider) {
+            const source = target[property]
+            if (property === 'request') {
+              return async function (
+                this: FinoaEIP1193Provider,
+                ...args: Parameters<FinoaEIP1193Provider['request']>
+              ) {
+                try {
+                  return await (source as FinoaEIP1193Provider['request']).call(
+                    this,
+                    ...args
+                  )
+                } catch (err) {
+                  if (err instanceof UnsupportedRequestError) {
+                    let chain: Chain | undefined
+                    try {
+                      const chainIdN = BigInt(err.chainId)
+                      chain = chains.find(
+                        chain => BigInt(chain.id) === chainIdN
+                      )
+                    } catch {
+                      /* Not handled: the chain id in the error is not a valid one */
+                    }
+                    if (chain?.rpcUrl == null) {
+                      throw err
+                    }
+                    return await request(chain.rpcUrl, ...args)
+                  }
+                  throw err
+                }
+              }
+            }
+            return source
+          }
+        })
+
+        return {
+          provider: proxyProvider
+        }
+      }
+    }
+  }
+}
+
+export default finoaConnect

packages/finoaconnect/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "../../tsconfig.json",
+    "include": ["src/**/*"],
+
+    "compilerOptions": {
+      "outDir": "dist",
+      "rootDir": "src",
+      "declaration": true,
+      "declarationDir": "dist",
+      "allowSyntheticDefaultImports": true,
+      "paths": {
+        "*": ["./src/*", "./node_modules/*"]
+      }
+    }
+  }