feat: add support for walletconnect wallet (#703)

* feat: add support for walletconnect wallet * fix: update size limit config to ignore walletconnect adapter
saber-hq · Sep 26, 2022 · 4a069f6 · 4a069f6
1 parent 454b861
commit 4a069f6
Show file tree

Hide file tree

Showing 8 changed files with 1,070 additions and 16 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -42,7 +42,8 @@
       "@solana/wallet-adapter-slope",
       "@solana/wallet-adapter-solflare",
       "@solana/wallet-adapter-sollet",
-      "@solana/wallet-adapter-solong"
+      "@solana/wallet-adapter-solong",
+      "@solana/wallet-adapter-walletconnect"
     ],
     "webpack": true
   }

diff --git a/packages/use-solana/package.json b/packages/use-solana/package.json
@@ -48,6 +48,7 @@
     "@solana/wallet-adapter-solflare": "^0.6.15",
     "@solana/wallet-adapter-sollet": "^0.11.10",
     "@solana/wallet-adapter-solong": "^0.9.11",
+    "@solana/wallet-adapter-walletconnect": "^0.1.5",
     "eventemitter3": "^4.0.7",
     "fast-json-stable-stringify": "^2.1.0",
     "tiny-invariant": "^1.2.0",

diff --git a/packages/use-solana/src/adapters/types.ts b/packages/use-solana/src/adapters/types.ts
@@ -5,6 +5,7 @@ import type {
   Wallet,
 } from "@saberhq/solana-contrib";
 import { PublicKey } from "@saberhq/solana-contrib";
+import type { WalletConnectWalletAdapterConfig } from "@solana/wallet-adapter-walletconnect";
 import type {
   Connection,
   PublicKey as SolanaPublicKey,
@@ -38,9 +39,12 @@ export interface WalletAdapter<Connected extends boolean = boolean>
 
 export type ConnectedWallet = WalletAdapter<true> & Wallet;
 
+export type WalletOptions = WalletConnectWalletAdapterConfig;
+
 export type WalletAdapterBuilder = (
   providerUrl: string,
-  endpoint: string
+  endpoint: string,
+  options?: WalletOptions
 ) => WalletAdapter;
 
 /**

diff --git a/packages/use-solana/src/context.tsx b/packages/use-solana/src/context.tsx
@@ -36,7 +36,11 @@ export interface UseSolanaArgs<
     Partial<
       Pick<
         UseWalletArgs<WalletType>,
-        "onConnect" | "onDisconnect" | "storageAdapter" | "walletProviders"
+        | "onConnect"
+        | "onDisconnect"
+        | "storageAdapter"
+        | "walletProviders"
+        | "walletOptions"
       >
     >,
     Pick<UseProviderArgs, "broadcastConnections" | "confirmOptions"> {
@@ -80,6 +84,7 @@ const useSolanaInternal = <WalletType extends WalletTypeEnum<WalletType>>({
   onError = defaultOnError,
   storageAdapter = LOCAL_STORAGE_ADAPTER,
   walletProviders = DEFAULT_WALLET_PROVIDERS as unknown as WalletProviderMap<WalletType>,
+  walletOptions,
 
   // useProvider args
   broadcastConnections,
@@ -100,6 +105,7 @@ const useSolanaInternal = <WalletType extends WalletTypeEnum<WalletType>>({
     onError,
     storageAdapter,
     walletProviders,
+    walletOptions,
   });
   const providerCtx = useProviderInternal({
     connection: connectionCtx.connection,

diff --git a/packages/use-solana/src/providers.ts b/packages/use-solana/src/providers.ts
@@ -16,6 +16,7 @@ import {
   SLOPE,
   SOLFLARE,
   SOLLET,
+  WALLETCONNECT,
 } from "@saberhq/wallet-adapter-icons";
 import type { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
 import { BraveWalletAdapter } from "@solana/wallet-adapter-brave";
@@ -34,9 +35,10 @@ import {
   SolletWalletAdapter,
 } from "@solana/wallet-adapter-sollet";
 import { SolongWalletAdapter } from "@solana/wallet-adapter-solong";
+import { WalletConnectWalletAdapter } from "@solana/wallet-adapter-walletconnect";
 import type * as React from "react";
 
-import type { WalletAdapterBuilder } from "./adapters";
+import type { WalletAdapterBuilder, WalletOptions } from "./adapters";
 import { LedgerWalletAdapter, SolanaWalletAdapter } from "./adapters";
 import { ReadonlyAdapter } from "./adapters/readonly";
 import { SecretKeyAdapter } from "./adapters/secret-key";
@@ -60,6 +62,7 @@ export enum DefaultWalletType {
   Sollet = "Sollet",
   SolletExtension = "SolletExtension",
   Solong = "Solong",
+  WalletConnect = "WalletConnect",
 }
 
 export type WalletTypeEnum<T> = { [name: string]: T[keyof T] | string };
@@ -98,6 +101,28 @@ export const DEFAULT_WALLET_PROVIDERS: WalletProviderMap<
 
     isInstalled: () => window.sollet !== undefined,
   },
+  [DefaultWalletType.WalletConnect]: {
+    name: "WalletConnect",
+    url: "https://walletconnect.com/",
+    icon: WALLETCONNECT,
+    makeAdapter: (
+      _provider: string,
+      network: string,
+      options?: WalletOptions
+    ) => {
+      if (!options) {
+        throw new Error("WalletConnect options not provided");
+      }
+      return new SolanaWalletAdapter(
+        new WalletConnectWalletAdapter({
+          network: network as
+            | WalletAdapterNetwork.Mainnet
+            | WalletAdapterNetwork.Devnet,
+          options: options["options"] as unknown,
+        })
+      );
+    },
+  },
   [DefaultWalletType.BraveWallet]: {
     name: "Brave Wallet",
     url: "https://www.brave.com/wallet",

diff --git a/packages/use-solana/src/utils/useWalletInternal.ts b/packages/use-solana/src/utils/useWalletInternal.ts
@@ -3,7 +3,11 @@ import type { PublicKey } from "@solana/web3.js";
 import stringify from "fast-json-stable-stringify";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import type { ConnectedWallet, WalletAdapter } from "../adapters/types";
+import type {
+  ConnectedWallet,
+  WalletAdapter,
+  WalletOptions,
+} from "../adapters/types";
 import { WrappedWalletAdapter } from "../adapters/types";
 import type { UseSolanaError } from "../error";
 import {
@@ -73,6 +77,7 @@ export interface UseWalletArgs<WalletType extends WalletTypeEnum<WalletType>> {
   endpoint: string;
   storageAdapter: StorageAdapter;
   walletProviders: WalletProviderMap<WalletType>;
+  walletOptions?: WalletOptions;
 }
 
 interface WalletConfig<WalletType extends WalletTypeEnum<WalletType>> {
@@ -90,6 +95,7 @@ export const useWalletInternal = <
   onError,
   storageAdapter,
   walletProviders,
+  walletOptions,
 }: UseWalletArgs<WalletType>): UseWallet<WalletType, boolean> => {
   const [walletConfigStr, setWalletConfigStr] = usePersistedKVStore<
     string | null
@@ -119,11 +125,15 @@ export const useWalletInternal = <
     if (walletType) {
       const provider = walletProviders[walletType];
       console.debug("New wallet", provider.url, network);
-      const adapter = provider.makeAdapter(provider.url, endpoint);
+      const adapter = provider.makeAdapter(
+        provider.url,
+        endpoint,
+        walletOptions
+      );
       return [provider, new WrappedWalletAdapter(adapter)];
     }
     return [undefined, undefined];
-  }, [walletProviders, walletType, network, endpoint]);
+  }, [walletProviders, walletType, network, endpoint, walletOptions]);
 
   useEffect(() => {
     let disabled = false;

diff --git a/packages/wallet-adapter-icons/src/index.tsx b/packages/wallet-adapter-icons/src/index.tsx
@@ -399,6 +399,23 @@ export const HUOBI: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 );
 
+export const WALLETCONNECT: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="185"
+    viewBox="0 0 300 185"
+    width="300"
+    {...props}
+  >
+    <path
+      d="m61.4385429 36.2562612c48.9112241-47.8881663 128.2119871-47.8881663 177.1232091 0l5.886545 5.7634174c2.445561 2.3944081 2.445561 6.2765112 0 8.6709204l-20.136695 19.715503c-1.222781 1.1972051-3.2053 1.1972051-4.428081 0l-8.100584-7.9311479c-34.121692-33.4079817-89.443886-33.4079817-123.5655788 0l-8.6750562 8.4936051c-1.2227816 1.1972041-3.205301 1.1972041-4.4280806 0l-20.1366949-19.7155031c-2.4455612-2.3944092-2.4455612-6.2765122 0-8.6709204zm218.7677961 40.7737449 17.921697 17.546897c2.445549 2.3943969 2.445563 6.2764769.000031 8.6708899l-80.810171 79.121134c-2.445544 2.394426-6.410582 2.394453-8.85616.000062-.00001-.00001-.000022-.000022-.000032-.000032l-57.354143-56.154572c-.61139-.598602-1.60265-.598602-2.21404 0-.000004.000004-.000007.000008-.000011.000011l-57.3529212 56.154531c-2.4455368 2.394432-6.4105755 2.394472-8.8561612.000087-.0000143-.000014-.0000296-.000028-.0000449-.000044l-80.81241943-79.122185c-2.44556021-2.394408-2.44556021-6.2765115 0-8.6709197l17.92172963-17.5468673c2.4455602-2.3944082 6.4105989-2.3944082 8.8561602 0l57.3549775 56.155357c.6113908.598602 1.602649.598602 2.2140398 0 .0000092-.000009.0000174-.000017.0000265-.000024l57.3521031-56.155333c2.445505-2.3944633 6.410544-2.3945531 8.856161-.0002.000034.0000336.000068.0000673.000101.000101l57.354902 56.155432c.61139.598601 1.60265.598601 2.21404 0l57.353975-56.1543249c2.445561-2.3944092 6.410599-2.3944092 8.85616 0z"
+      fill="#3b99fc"
+    />
+  </svg>
+);
+
 export const NIGHTLY: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg
     width="96"