Merge pull request #1068 from near/1060-defect-cant-connect-using-wallet-connect

fix: Make methods and events configurable on setupWalletConnect options.

Author: kujtimprenkuSQA

examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts

@@ -74,6 +74,15 @@ export class WalletSelectorComponent implements OnInit {
         }),
         setupWalletConnect({
           projectId: "c8cb6204543639c31aef44ea4837a554", // Replace this with your own projectId form WalletConnect.
+          // Overrides the default methods on wallet-connect.ts
+          // the near_signMessage and near_verifyOwner are missing here.
+          methods: [
+            "near_signIn",
+            "near_signOut",
+            "near_getAccounts",
+            "near_signTransaction",
+            "near_signTransactions",
+          ],
           metadata: {
             name: "NEAR Wallet Selector",
             description: "Example dApp used by NEAR Wallet Selector",

packages/modal-ui-js/src/lib/render-modal.ts

@@ -160,7 +160,10 @@ export async function connectToWallet(
     modalState.emitter.emit("onHide", { hideReason: "wallet-navigation" });
   } catch (err) {
     const { name } = module.metadata;
-    const message = err instanceof Error ? err.message : "Something went wrong";
+    const message =
+      err && typeof err === "object" && "message" in err
+        ? (err as { message: string }).message
+        : "Something went wrong";
 
     await renderWalletConnectionFailed(
       module,

packages/modal-ui/src/lib/components/DerivationPath.tsx

@@ -144,7 +144,9 @@ export const DerivationPath: React.FC<DerivationPathProps> = ({
     } catch (err) {
       setConnecting(false);
       const message =
-        err instanceof Error ? err.message : "Something went wrong";
+        err && typeof err === "object" && "message" in err
+          ? (err as { message: string }).message
+          : "Something went wrong";
 
       onError(message, wallet);
     } finally {
@@ -174,7 +176,9 @@ export const DerivationPath: React.FC<DerivationPathProps> = ({
     } catch (err) {
       setConnecting(false);
       const message =
-        err instanceof Error ? err.message : "Something went wrong";
+        err && typeof err === "object" && "message" in err
+          ? (err as { message: string }).message
+          : "Something went wrong";
       onError(message, hardwareWallet!);
     } finally {
       setConnecting(false);

packages/modal-ui/src/lib/components/Modal.tsx

@@ -227,7 +227,9 @@ export const Modal: React.FC<ModalProps> = ({
       const { name } = module.metadata;
 
       const message =
-        err instanceof Error ? err.message : "Something went wrong";
+        err && typeof err === "object" && "message" in err
+          ? (err as { message: string }).message
+          : "Something went wrong";
 
       setAlertMessage(`Failed to sign in with ${name}: ${message}`);
       setRoute({

packages/wallet-connect/README.md

@@ -37,6 +37,18 @@ const walletConnect = setupWalletConnect({
   },
   chainId: "near:testnet",
   iconUrl: "https://<Wallet Icon URL Here>",
+  // Please note that the 'methods' option is discretionary;
+  // if omitted, all methods are included by default.
+  // Use it solely to override the default configuration.
+  methods: [
+    "near_signIn",
+    "near_signOut",
+    "near_getAccounts",
+    "near_signTransaction",
+    "near_signTransactions",
+    "near_verifyOwner",
+    "near_signMessage",
+  ]
 });
 
 const selector = await setupWalletSelector({
@@ -58,6 +70,22 @@ Project ID is required for wallet connect, please obtain it from [walletconnect.
 - `relayUrl` (`string?`): Relay URL for requests. Defaults to `"wss://relay.walletconnect.com"`.
 - `iconUrl` (`string?`): Image URL for the icon shown in the modal. This can also be a relative path or base64 encoded image. Defaults to `./assets/wallet-connect-icon.png`.
 - `deprecated`: (`boolean?`): Deprecated is optional. Default is `false`.
+- `methods`: (`Array<string>?`): Methods is optional overrides default WC_METHODS. Defaults to `undefined`.
+- `events`: (`Array<string>?`): Events is optional overrides default WC_EVENTS. Defaults to `undefined`.
+
+## Supported methods
+- `near_signIn`
+- `near_signOut`
+- `near_getAccounts`
+- `near_signTransaction`
+- `near_signTransactions`
+- `near_verifyOwner`
+- `near_signMessage`
+
+## Supported events
+
+- `chainChanged`
+- `accountsChanged`
 
 ## Assets
 

packages/wallet-connect/src/lib/wallet-connect.ts

@@ -28,13 +28,17 @@ export interface WalletConnectParams {
   iconUrl?: string;
   chainId?: string;
   deprecated?: boolean;
+  methods?: Array<string>;
+  events?: Array<string>;
 }
 
 interface WalletConnectExtraOptions {
   chainId?: string;
   projectId: string;
   metadata: SignClientTypes.Metadata;
   relayUrl: string;
+  methods?: Array<string>;
+  events?: Array<string>;
 }
 
 interface LimitedAccessKeyPair {
@@ -64,6 +68,8 @@ interface ConnectParams {
   chainId: string;
   qrCodeModal: boolean;
   projectId: string;
+  methods?: Array<string>;
+  events?: Array<string>;
 }
 
 const WC_METHODS = [
@@ -114,14 +120,16 @@ const connect = async ({
   chainId,
   qrCodeModal,
   projectId,
+  methods,
+  events,
 }: ConnectParams) => {
   return await state.client.connect(
     {
       requiredNamespaces: {
         near: {
           chains: [chainId],
-          methods: WC_METHODS,
-          events: WC_EVENTS,
+          methods: methods || WC_METHODS,
+          events: events || WC_EVENTS,
         },
       },
     },
@@ -544,6 +552,8 @@ const WalletConnect: WalletBehaviourFactory<
           chainId,
           qrCodeModal,
           projectId: params.projectId,
+          methods: params.methods,
+          events: params.events,
         });
 
         await requestSignIn({ receiverId: contractId, methodNames });
@@ -697,6 +707,8 @@ export function setupWalletConnect({
   relayUrl = "wss://relay.walletconnect.com",
   iconUrl = icon,
   deprecated = false,
+  methods,
+  events,
 }: WalletConnectParams): WalletModuleFactory<BridgeWallet> {
   return async () => {
     return {
@@ -717,6 +729,8 @@ export function setupWalletConnect({
             metadata,
             relayUrl,
             chainId,
+            methods,
+            events,
           },
         });
       },