Merge pull request #27 from nabla-studio/DavideSegullo/feat-wc

Fead: Add Wallet Connect

README.md

@@ -19,7 +19,7 @@ And many more to come:
 - [x] Adding more wallets
 - [x] Web [Broadcast API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) Support, for tabs, windows and iframe sync
 - [ ] React Native Support
-- [ ] Wallet Connect Support
+- [x] Wallet Connect Support
 - [ ] Web3 Modal Support
 - [ ] UI Kit (Cross Framework)
 - [ ] Improve Docs

examples/nextjs/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_PROJECT_ID=

examples/nextjs/app/page.tsx

@@ -5,7 +5,7 @@ import { Test } from '../components/test';
 export default async function Index() {
   return (
     <div>
-      <Test iframe />
+      <Test />
       <TestChain />
       <Button />
     </div>

examples/nextjs/components/button.tsx

@@ -1,42 +1,67 @@
 'use client';
 
-import { useConfig, useConnect } from '@quirks/react';
+import { useConfig, useConnect, useWalletConnect } from '@quirks/react';
+import QRCode from 'react-qr-code';
 
 export const Button = () => {
   const { wallets } = useConfig();
   const { connect, disconnect, connected } = useConnect();
+  const { pairingURI } = useWalletConnect();
 
   if (connected) {
     return <button onClick={disconnect}>Disconnect</button>;
   }
 
-  return wallets.map((wallet) => (
-    <div key={wallet.options.name}>
-      <button
-        onClick={async () => {
-          await connect(wallet.options.name);
-        }}
-      >
-        <img
-          src={wallet.logoLight}
-          alt={wallet.options.prettyName}
-          height="48px"
-          width="48px"
-        />
-      </button>
-
-      {!wallet.injected ? (
-        <a
-          href={
-            wallet.options.downloads && wallet.options.downloads.length > 0
-              ? wallet.options.downloads[0].link
-              : '#'
-          }
-          target="_blank"
+  return (
+    <div>
+      {pairingURI ? (
+        <div
+          style={{
+            height: 'auto',
+            margin: '0 auto',
+            maxWidth: 300,
+            width: '100%',
+          }}
         >
-          Install
-        </a>
-      ) : null}
+          <QRCode
+            size={256}
+            style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+            value={pairingURI}
+            viewBox={`0 0 256 256`}
+          />
+        </div>
+      ) : (
+        false
+      )}
+      {wallets.map((wallet) => (
+        <div key={wallet.options.name}>
+          <button
+            onClick={async () => {
+              await connect(wallet.options.name);
+            }}
+          >
+            <img
+              src={wallet.logoLight}
+              alt={wallet.options.prettyName}
+              height="48px"
+              width="48px"
+            />
+          </button>
+
+          {!wallet.injected ? (
+            <a
+              href={
+                wallet.options.downloads && wallet.options.downloads.length > 0
+                  ? wallet.options.downloads[0].link
+                  : '#'
+              }
+              target="_blank"
+            >
+              Install
+            </a>
+          ) : null}
+        </div>
+      ))}
     </div>
-  ));
+  );
 };

examples/nextjs/components/provider.tsx

@@ -8,6 +8,7 @@ import {
   keplrExtension,
   leapExtension,
   cosmostationExtension,
+  universalWalletConnect,
 } from '@quirks/wallets';
 import { PropsWithChildren } from 'react';
 
@@ -17,12 +18,22 @@ const config: Config = {
     leapExtension,
     cosmostationExtension,
     xdefiExtension,
+    universalWalletConnect,
   ],
   chains: [osmosis /* bitsong */],
   assetsLists: [osmosisAssetList /* bitsongAssetList */],
   persistOptions: ssrPersistOptions,
-  sharedOptions: {
-    enabled: true,
+  walletConnectOptions: {
+    providerOpts: {
+      logger: 'info',
+      projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+      metadata: {
+        name: 'React App',
+        description: 'React App for WalletConnect',
+        url: 'https://walletconnect.com/',
+        icons: ['https://avatars.githubusercontent.com/u/37784886'],
+      },
+    },
   },
 };
 

package.json

@@ -90,15 +90,20 @@
     "@keplr-wallet/cosmos": "^0.12.38",
     "@nuxt/kit": "^3.8.1",
     "@nuxt/schema": "^3.8.1",
+    "@walletconnect/types": "^2.10.5",
+    "@walletconnect/universal-provider": "^2.10.5",
+    "base64-js": "^1.5.1",
     "bufferutil": "^4.0.8",
-    "cosmjs-types": "^0.9.0",
+    "cosmjs-types": "^0.8.0",
     "eventemitter3": "^5.0.1",
     "long": "^5.2.3",
     "next": "13.5.6",
     "nuxt": "^3.8.1",
     "osmojs": "^16.5.1",
+    "pino-pretty": "^10.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-qr-code": "^2.0.12",
     "semver": "^7.5.4",
     "stargazejs": "^0.14.1",
     "utf-8-validate": "^6.0.3",

packages/core/package.json

@@ -20,9 +20,13 @@
   "peerDependencies": {
     "@cosmjs/stargate": "^0.31.3",
     "@cosmjs/proto-signing": "^0.31.3",
-    "cosmjs-types": "^0.9.0",
+    "cosmjs-types": "^0.8.0",
     "@cosmjs/amino": "^0.31.3",
-    "eventemitter3": "^5.0.1"
+    "eventemitter3": "^5.0.1",
+    "@walletconnect/universal-provider": "^2.10.5",
+    "@walletconnect/types": "^2.10.5",
+    "base64-js": "^1.5.1",
+    "long": "^5.2.3"
   },
   "main": "./index.js",
   "module": "./index.mjs",

packages/core/src/index.ts

@@ -1,4 +1,5 @@
 export * from './wallet';
 export * from './ext-wallet';
+export * from './wc-wallet';
 export * from './types';
 export * from './utils';

packages/core/src/types/account.ts

@@ -1,9 +1,9 @@
 export interface Key {
   readonly name: string;
   readonly algo: string;
-  readonly pubKey: Uint8Array;
-  readonly address: Uint8Array;
+  readonly pubKey: Uint8Array | null;
+  readonly address: Uint8Array | null;
   readonly bech32Address: string;
-  readonly isNanoLedger: boolean;
-  readonly isKeystone: boolean;
+  readonly isNanoLedger: boolean | null;
+  readonly isKeystone: boolean | null;
 }

packages/core/src/types/wallet.ts

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { StdSignature } from '@cosmjs/amino';
+import type { SignClientTypes } from '@walletconnect/types';
+
 export const WalletConnectionTypes = {
   EXTENSION: 'extension',
   WALLET_CONNECT: 'wallet_connect',
@@ -59,6 +63,79 @@ export interface SignOptions {
   readonly disableBalanceCheck?: boolean;
 }
 
-export interface WalletEventTypes {
-  keystorechange: () => void;
+export const WcProviderEventType = {
+  chainChanged: (chainId: string) => {},
+  accountsChanged: (accounts: string[]) => {},
+};
+
+export const WcEventTypes = {
+  display_uri: (uri: string) => {},
+  session_ping: (payload: SignClientTypes.EventArguments['session_ping']) => {},
+  session_event: (
+    payload: SignClientTypes.EventArguments['session_event'],
+  ) => {},
+  session_update: (
+    payload: SignClientTypes.EventArguments['session_update'],
+  ) => {},
+  session_delete: (
+    payload: SignClientTypes.EventArguments['session_delete'],
+  ) => {},
+  session_proposal: (
+    payload: SignClientTypes.EventArguments['session_proposal'],
+  ) => {},
+  session_extend: (
+    payload: SignClientTypes.EventArguments['session_extend'],
+  ) => {},
+  session_expire: (
+    payload: SignClientTypes.EventArguments['session_expire'],
+  ) => {},
+  session_request: (
+    payload: SignClientTypes.EventArguments['session_request'],
+  ) => {},
+  session_request_sent: (
+    payload: SignClientTypes.EventArguments['session_request_sent'],
+  ) => {},
+  proposal_expire: (
+    payload: SignClientTypes.EventArguments['proposal_expire'],
+  ) => {},
+} as const;
+
+export const ExtensionWalletEventTypes = {
+  keystorechange: () => {},
+} as const;
+
+export type WalletEventTypes = typeof ExtensionWalletEventTypes &
+  typeof WcEventTypes &
+  typeof WcProviderEventType;
+
+export type WalletEventNames = keyof WalletEventTypes;
+
+export interface WalletConnectAccountData {
+  address: string;
+  algo: string;
+  pubkey: string;
+}
+
+export interface WalletConnectDirectSignDoc {
+  chainId: string;
+  accountNumber: string;
+  authInfoBytes: string;
+  bodyBytes: string;
+}
+
+export interface WalletConnectDirectSignDoc {
+  chainId: string;
+  accountNumber: string;
+  authInfoBytes: string;
+  bodyBytes: string;
+}
+
+export interface WalletConnectSignDirectRequest {
+  signerAddress: string;
+  signDoc: WalletConnectDirectSignDoc;
+}
+
+export interface WalletConnectSignDirectResponse {
+  signature: StdSignature;
+  signed: WalletConnectDirectSignDoc;
 }

packages/core/src/wallet.ts

@@ -19,7 +19,11 @@ import type {
 } from './types';
 import EventEmitter from 'eventemitter3';
 
-export abstract class Wallet<T = unknown> {
+/**
+ * Where T is the client type of the wallet
+ * Where K is the metadata type for init function
+ */
+export abstract class Wallet<T = unknown, K = unknown> {
   options: WalletOptions;
   client?: T;
   /**
@@ -79,7 +83,7 @@ export abstract class Wallet<T = unknown> {
 
   abstract addListeners(): void;
 
-  abstract init(): Promise<T | undefined>;
+  abstract init(metadata: K): Promise<T | undefined>;
 
   abstract getAccount(chainId: string): Promise<Key>;