Integration of FinoaConnect wallet connector service into Web3Onboard (#2188)

* impl: integration into existing package

* Update packages/finoaconnect/package.json

* Update packages/demo/package.json

* Update .circleci/config.yml

* fix: added comments and mock examplers in packages//README

* chore: update comment on unhandled error

* Update +page.md

* Update README.md

* Update packages/finoaconnect/README.md

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

* fix: renamed icon name to FinoaConnect and added finoaconnect to services/onboard for choice in dapp

* fix: update typescript version in finoaconnect package

* fix: all unsupported methods to return error code 4200

* chore: cleaned up commented code and unnecessary lock files

* chore: removed unused code

* fix: updated finoaconnect sdk version

* Merge in upstream and yarn

---------

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Author: finoaamukherjee

.circleci/config.yml

@@ -454,6 +454,12 @@ 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-wagmi:
     docker:
       - image: cimg/node:18.0.0
@@ -780,6 +786,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/bloom
     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
@@ -1091,3 +1103,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-bloom:
           <<: *deploy_staging_filters
+  finoaconnect:
+    jobs:
+      - build-finoaconnect:
+          <<: *deploy_production_filters
+      - build-staging-finoaconnect:
+          <<: *deploy_staging_filters

README.md

@@ -129,6 +129,7 @@ For full documentation, check out the README.md for each package or the [docs pa
 - [Particle Network](packages/particle-network/README.md)
 - [MetaMask](packages/metamask/README.md)
 - [Bitget](packages/bitget/README.md)
+- [FinoaConnect](packages/finoaconnect/README.md)
 
 **Hardware Wallets**
 

docs/src/lib/services/onboard.js

@@ -59,6 +59,7 @@ const intiOnboard = async (theme) => {
   const { default: bloctoModule } = await import('@web3-onboard/blocto')
   const { default: venlyModule } = await import('@web3-onboard/venly')
   const { default: bitgetModule } = await import('@web3-onboard/bitget')
+  const { default: finoaConnectModule } = await import('@web3-onboard/finoaconnect')
   const { default: capsuleModule, Environment } = await import('@web3-onboard/capsule')
   const { default: particleAuthModule } = await import('@web3-onboard/particle-network')
   const INFURA_ID = '8b60d52405694345a99bcb82e722e0af'
@@ -113,6 +114,9 @@ const intiOnboard = async (theme) => {
   }
   const trezor = trezorModule(trezorOptions)
 
+  const finoaConnectOptions = {};
+  const finoaconnect = finoaConnectModule(finoaConnectOptions);
+
   const uauthOptions = {
     clientID: 'a25c3a65-a1f2-46cc-a515-a46fe7acb78c',
     redirectUri: 'http://localhost:8080/',
@@ -177,6 +181,7 @@ const intiOnboard = async (theme) => {
       blocto,
       particle,
       venly,
+      finoaconnect,
       capsule
     ],
     chains: [

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)
+```

docs/yarn.lock

@@ -2544,6 +2544,20 @@
   resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.1.1.tgz#e89b840a7af8097a8ed4953d8dc8470d1302d3ef"
   integrity sha512-ihb3B0T/wJm1eUuArYP4lCTSEoZsClHhuWyfo/kMX3m/odpqNcPfsz5O2A3NT7dXCAgWPGDQGPqygCpgeniKMw==
 
+"@metamask/sdk-communication-layer@0.14.3":
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.14.3.tgz#0e7ec8e472641273da5802f3b357687ce12369c3"
+  integrity sha512-yjSbj8y7fFbQXv2HBzUX6D9C8BimkCYP6BDV7hdw53W8b/GlYCtXVxUFajQ9tuO1xPTRjR/xt/dkdr2aCi6WGw==
+  dependencies:
+    bufferutil "^4.0.8"
+    cross-fetch "^3.1.5"
+    date-fns "^2.29.3"
+    eciesjs "^0.3.16"
+    eventemitter2 "^6.4.5"
+    socket.io-client "^4.5.1"
+    utf-8-validate "^6.0.3"
+    uuid "^8.3.2"
+
 "@metamask/sdk-communication-layer@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.20.2.tgz#7f7fd334b2d26abd1a5a1ec1ffadf823a9589344"

packages/demo/package.json

@@ -38,6 +38,7 @@
     "@web3-onboard/coinbase": "^2.4.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.1.1",
+    "@web3-onboard/finoaconnect": "2.0.0-alpha.1",
     "@web3-onboard/fortmatic": "^2.1.1",
     "@web3-onboard/frame": "^2.1.1",
     "@web3-onboard/frontier": "^2.1.1",

packages/demo/src/App.svelte

@@ -38,6 +38,7 @@
   import bitgetModule from '@web3-onboard/bitget'
   import bloomModule from '@web3-onboard/bloom'
   import particleAuthModule from '@web3-onboard/particle-network'
+  import finoaConnectModule from '@web3-onboard/finoaconnect'
   import keplrModule from '@web3-onboard/keplr'
   import capsuleModule, {
     Environment,
@@ -228,6 +229,7 @@
     fallbackProvider: '' // insert your alchemy / infura url here
     // encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
   })
+  const finoaConnect = finoaConnectModule()
 
   const trezorOptions = {
     email: 'test@test.com',
@@ -325,6 +327,7 @@
       venly,
       particle,
       passport,
+      finoaConnect,
       keplr
     ],
     transactionPreview,

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.4.5"
+    },
+    "dependencies": {
+      "@finoa/finoa-connect-sdk": "^1.0.4",
+      "@web3-onboard/core": "^2.20.4"
+    }
+  
+  }

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,72 @@
+import { FinoaEIP1193Provider } from '@finoa/finoa-connect-sdk'
+import { ProviderRpcError, ProviderRpcErrorCode, type 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: `FinoaConnect${labelSuffix == null ? '' : ' - ' + labelSuffix}`,
+      getIcon: async () => (await import('./icon')).default,
+      getInterface: async ({ chains }) => {
+        const {
+          FinoaEIP1193Provider,
+          FinoaBrowserClient,
+          UnsupportedRequestError
+        } = await import('@finoa/finoa-connect-sdk')
+
+        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) {
+                    throw new ProviderRpcError({
+                      code: ProviderRpcErrorCode.UNSUPPORTED_METHOD,
+                      message: `FinoaConnect Provider does not support the requested method: ${args[0].method}`
+                    })
+                  }
+                  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/*"]
+      }
+    }
+  }