Merge pull request #39 from distributed-lab/feature/wallet-connect-pr…

…ovider-implementation Feature/wallet connect provider implementation
distributed-lab · Sep 25, 2023 · 8aafb5f · 8aafb5f
2 parents ea233bf + 88a40a8
commit 8aafb5f
Show file tree

Hide file tree

Showing 22 changed files with 1,495 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## [1.0.0-rc.7] - 2023-09-25
+### Added
+- `@distributedlab/w3p` - WalletConnect EVM provider
+
 ## [1.0.0-rc.6] - 2023-08-04
 ### Added
 - `@distributedlab/tools` - `BN` decimals global configuration
@@ -332,7 +336,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 [old repo]: https://github.com/distributed-lab/web-kit-old
 
-[Unreleased]: https://github.com/distributed-lab/web-kit/compare/1.0.0-rc.6...HEAD
+[Unreleased]: https://github.com/distributed-lab/web-kit/compare/1.0.0-rc.7...HEAD
+[1.0.0-rc.7]: https://github.com/distributed-lab/web-kit/compare/1.0.0-rc.6...1.0.0-rc.7
 [1.0.0-rc.6]: https://github.com/distributed-lab/web-kit/compare/1.0.0-rc.5...1.0.0-rc.6
 [1.0.0-rc.5]: https://github.com/distributed-lab/web-kit/compare/1.0.0-rc.4...1.0.0-rc.5
 [1.0.0-rc.4]: https://github.com/distributed-lab/web-kit/compare/1.0.0-rc.3...1.0.0-rc.4

diff --git a/packages/fetcher/package.json b/packages/fetcher/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@distributedlab/fetcher",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Fetch API wrapper with the extended functionality and simple interface",
   "repository": {
     "type": "git",

diff --git a/packages/jac/package.json b/packages/jac/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@distributedlab/jac",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "A library for constructing JSON-API compliant requests and responses",
   "repository": {
     "type": "git",

diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@distributedlab/reactivity",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Implementation of the reactivity connections to propagate changes between objects",
   "repository": {
     "type": "git",

diff --git a/packages/tools/package.json b/packages/tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@distributedlab/tools",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Collection of common utility functions and classes",
   "repository": {
     "type": "git",

diff --git a/packages/w3p/examples/multiple-providers.ts b/packages/w3p/examples/multiple-providers.ts
@@ -10,6 +10,7 @@ import {
   ProviderInstance,
   PROVIDERS,
   ProviderProxyConstructor,
+  WalletConnectEvmProvider,
 } from '@distributedlab/w3p'
 import { useProvider } from './vue-use-provider-composable'
 
@@ -103,6 +104,21 @@ export const useWeb3ProvidersStore = defineStore(STORE_NAME, () => {
        *     ) as RawProvider,
        *   })
        * }
+
+       * Since WalletConnect lacks an injected provider for
+       * interacting with the chain, it's required to add
+       * WalletConnect provider configuration with
+       * the following method:
+       *
+       * await providerDetector.value.addProvider({
+       *     name: PROVIDERS.WalletConnect,
+       *     instance: {
+       *       projectId: 'abcdefghijklmnopqrstuvwxyz',
+       *       relayUrl: 'wss://relay.walletconnect.com',
+       *       logger: 'info'
+       *     } as RawProvider,
+       *   })
+       *
        */
 
       /**
@@ -126,6 +142,30 @@ export const useWeb3ProvidersStore = defineStore(STORE_NAME, () => {
        * Provider.setChainsDetails(getSupportedChainsDetails())
        */
 
+      /**
+       * If you need to do something with chain details e.g. show link to explorer after tx sent
+       *
+       * Provider.setChainsDetails(getSupportedChainsDetails())
+       */
+
+      /**
+       * To define a custom RPC network that the WalletConnect provider
+       * will use, you need to specify the chain you want to define in
+       * the Provider.setChainDetails method.
+       *
+       * Provider.setChainsDetails({
+       *  5: {
+       *    id: '0x5',
+       *    name: 'Goerli',
+       *    rpcUrl: 'https://goerli.blockpi.network/v1/rpc/public',
+       *    explorerUrl: 'https://goerli.etherscan.io/',
+       *    token: { name: 'Goerli', symbol: 'GTH', decimals: 18 },
+       *    type: CHAIN_TYPES.EVM,
+       *    icon: '',
+       *  },
+       * })
+       */
+
       /**
        * All supported providers, which should be defined, because
        */
@@ -135,6 +175,7 @@ export const useWeb3ProvidersStore = defineStore(STORE_NAME, () => {
         [PROVIDERS.Fallback]: FallbackEvmProvider,
         [PROVIDERS.Metamask]: MetamaskProvider,
         [PROVIDERS.Coinbase]: CoinbaseProvider,
+        [PROVIDERS.WalletConnect]: WalletConnectEvmProvider,
         /**
          * in the case where you have some custom provider, place your ProviderProxyConstructor here
          * [EXTERNAL_PROVIDERS.TokenE]: TokenEProvider as ProviderProxyConstructor,

diff --git a/packages/w3p/examples/vue-use-provider-composable.ts b/packages/w3p/examples/vue-use-provider-composable.ts
@@ -2,7 +2,7 @@ import {
   type Chain,
   type ChainId,
   createProvider,
-  type CreateProviderOpts, IProvider,
+  type CreateProviderOpts,
   Provider,
   type ProviderProxyConstructor,
   PROVIDERS,

diff --git a/packages/w3p/jest.config.js b/packages/w3p/jest.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   ...require('../../jest.config.base.js'),
+  transformIgnorePatterns: ['/node_modules\/(?!@walletconnect/modal)(.*)'],
 };
diff --git a/packages/w3p/package.json b/packages/w3p/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@distributedlab/w3p",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Wrapper for Web3 Providers",
   "repository": {
     "type": "git",
@@ -51,6 +51,7 @@
     "@near-wallet-selector/core": "^7.8.2",
     "@near-wallet-selector/my-near-wallet": "^7.8.2",
     "@solana/web3.js": "^1.73.2",
+    "@walletconnect/universal-provider": "^2.10.0",
     "bs58": "^5.0.0",
     "ethers": "^5.7.2",
     "near-api-js": "^1.1.0"
@@ -61,9 +62,13 @@
     "@swc/jest": "^0.2.26",
     "@types/jest": "^29.5.1",
     "@types/node": "^18.14.2",
+    "@walletconnect/modal": "^2.6.1",
     "jest": "^29.5.0",
     "tsc-alias": "^1.8.2"
   },
+  "peerDependencies": {
+    "@walletconnect/modal": "^2.6.1"
+  },
   "typedoc": {
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md",

diff --git a/packages/w3p/src/enums/providers.ts b/packages/w3p/src/enums/providers.ts
@@ -5,6 +5,7 @@ export enum PROVIDERS {
   Coinbase = 'coinbase',
   Solflare = 'solflare',
   Near = 'near',
+  WalletConnect = 'wallet-connect',
 }
 
 export enum PROVIDER_CHECKS {

diff --git a/packages/w3p/src/errors/provider.ts b/packages/w3p/src/errors/provider.ts
@@ -28,6 +28,14 @@ export class ProviderChainNotFoundError extends RuntimeError {
   }
 }
 
+export class ProviderChainDetailsNotFoundError extends RuntimeError {
+  public name = 'ProviderChainDetailsNotFoundError'
+
+  constructor(error = new TypeError('Cant find chains details in provider')) {
+    super(error)
+  }
+}
+
 export class ProviderUserRejectedRequest extends RuntimeError {
   public name = 'ProviderUserRejectedRequest'
 

diff --git a/packages/w3p/src/helpers/index.ts b/packages/w3p/src/helpers/index.ts
@@ -3,3 +3,4 @@ export * from './eth'
 export * from './near'
 export * from './promise'
 export * from './solana'
+export * from './wallet-connect'
diff --git a/packages/w3p/src/helpers/wallet-connect.ts b/packages/w3p/src/helpers/wallet-connect.ts
@@ -0,0 +1,24 @@
+import { PROVIDER_EVENTS } from '@/enums'
+
+export const createWalletConnectEthNamespace = () => ({
+  eip155: {
+    methods: [
+      'wallet_switchEthereumChain',
+      'wallet_addEthereumChain',
+      'eth_requestAccounts',
+
+      'eth_sendTransaction',
+
+      'eth_sign',
+      'personal_sign',
+      'eth_signTypedData',
+    ],
+    chains: ['eip155:1'],
+    events: [
+      PROVIDER_EVENTS.Connect,
+      PROVIDER_EVENTS.Disconnect,
+      PROVIDER_EVENTS.ChainChanged,
+      PROVIDER_EVENTS.AccountsChanged,
+    ],
+  },
+})
diff --git a/packages/w3p/src/provider.ts b/packages/w3p/src/provider.ts
@@ -191,6 +191,8 @@ export class Provider implements IProvider {
  * const providerDetectorInstance = await new ProviderDetector().init()
  * const metamaskProvider = await createProvider(MetamaskProvider, { providerDetectorInstance })
  * const phantomProvider = await createProvider(PhantomProvider, { providerDetectorInstance })
+ * // When using WalletConnectEvmProvider, it's required to set chainsDetails:
+ * Provider.setChainsDetails(chainsDetails)
  */
 export async function createProvider<T extends keyof Record<string, string>>(
   proxy: ProviderProxyConstructor,