feature/1 - Integrate wallet connect

package.json

@@ -19,6 +19,8 @@
     "@typescript-eslint/parser": "^5.31.0",
     "@verida/account-web-vault": "^1.1.12",
     "@verida/client-ts": "^1.1.15",
+    "@walletconnect/client": "^1.8.0",
+    "@walletconnect/qrcode-modal": "^1.8.0",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react": "^1.1.7",

src/lib/contexts/VeridaContext.tsx

@@ -95,15 +95,18 @@ export const VeridaProvider: React.FunctionComponent<VeridaProviderType> = (
       // TODO Handle these cases
       return;
     }
+    // eslint-disable-next-line no-console
     console.debug("Preparing KYC request");
+    // TODO remove console.log, debuging time to prepare message
     setWaitingKYCRequest(true);
 
     const messaging = await context.getMessaging();
 
-    void messaging.onMessage((message: string) => {
-      console.log("message received from Verida", message);
+    void messaging.onMessage(() => {
       setWaitingKYCRequest(false);
+
       // TODO check KYC VC
+
       setKYCChecked(true);
     });
 
@@ -122,7 +125,9 @@ export const VeridaProvider: React.FunctionComponent<VeridaProviderType> = (
       recipientContextName: "Verida: Vault",
       did: requestFromDID,
     });
+    // eslint-disable-next-line no-console
     console.debug("KYC request sent");
+    // TODO remove console.log, debuging time to prepare message
   }, [context, profile]);
 
   const resetKYC = useCallback(() => {

src/lib/utils/index.ts

@@ -1 +1,2 @@
 export * from "./veridaUtils";
+export * from "./walletConnectUtils";

src/lib/utils/veridaUtils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
   Network,
   EnvironmentType,
@@ -6,17 +7,37 @@ import {
 } from "@verida/client-ts";
 import { VaultAccount } from "@verida/account-web-vault";
 import { UserProfile } from "lib/types";
+import { initWalletConnect, DEFAULT_CHAIN_ID } from "./walletConnectUtils";
+import WalletConnect from "@walletconnect/client";
 
 const connect = async (
   contextName: string,
   environment: EnvironmentType,
   logoUrl?: string,
-  openUrl?: string
-): Promise<[context: Context, account: VaultAccount, profile: UserProfile]> => {
+  openUrl?: string,
+  walletConnectChainId = DEFAULT_CHAIN_ID
+): Promise<
+  [
+    context: Context,
+    account: VaultAccount,
+    profile: UserProfile,
+    walletConnectConnector: WalletConnect
+  ]
+> => {
+  const walletConnectConnector = await initWalletConnect();
+  // eslint-disable-next-line no-console
+  console.log(walletConnectConnector);
+
   const account = new VaultAccount({
     request: {
       logoUrl,
       openUrl,
+      // @ts-ignore
+      walletConnect: {
+        version: walletConnectConnector.version,
+        uri: walletConnectConnector.uri,
+        chainId: walletConnectChainId,
+      },
     },
   });
 
@@ -37,7 +58,7 @@ const connect = async (
   const did = await account.did();
   const profile = await getPublicProfileInfo(context, did);
 
-  return [context, account, profile];
+  return [context, account, profile, walletConnectConnector];
 };
 
 const disconnect = async (

src/lib/utils/walletConnectUtils.ts

@@ -0,0 +1,50 @@
+/* eslint-disable no-console */
+import WalletConnect from "@walletconnect/client";
+// import QRCodeModal from "@walletconnect/qrcode-modal";
+// TODO remove the modal dependency after testing
+
+export const DEFAULT_BRIDGE_URL = "https://bridge.walletconnect.org";
+export const DEFAULT_CHAIN_ID = "eip155:1";
+
+export const initWalletConnect = async (
+  bridgeURL = DEFAULT_BRIDGE_URL
+): Promise<WalletConnect> => {
+  // Create a connector
+  const connector = new WalletConnect({
+    bridge: bridgeURL,
+    // qrcodeModal: QRCodeModal, // the modal is not required
+  });
+
+  // Check if connection is already established
+  if (!connector.connected) {
+    // create new session
+    await connector.createSession();
+  }
+
+  // Subscribe to connection events
+  connector.on("connect", (error, payload) => {
+    if (error) {
+      console.error(error);
+      return;
+    }
+    console.log("WalletConnect on connect payload:", payload);
+  });
+
+  connector.on("session_update", (error, payload) => {
+    if (error) {
+      console.error(error);
+      return;
+    }
+    console.log("WalletConnect on session_update payload:", payload);
+  });
+
+  connector.on("disconnect", (error, payload) => {
+    if (error) {
+      console.error(error);
+      return;
+    }
+    console.log("WalletConnect on disconnect payload:", payload);
+  });
+
+  return connector;
+};