Update WalletConnect (#1064)

* update @multiversx/sdk-wallet-connect-provider to 4.1.1 ( @WalletConnect 2.11.2 ) * - Removed canLoginRef requirement - Do not login if component is not mounted - Avoid double QR generation * updated type for loginButtonText * 2.28.8-alpha.2 * Updated CHANGELOG
multiversx · Mar 7, 2024 · 28813d4 · 28813d4
1 parent 9e4ada9
commit 28813d4
Show file tree

Hide file tree

Showing 7 changed files with 2,125 additions and 2,120 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,38 +6,48 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
+- [Update WalletConnect package and functionality](https://github.com/multiversx/mx-sdk-dapp/pull/1064)
 - [Fixed sign step signing and labels](https://github.com/multiversx/mx-sdk-dapp/pull/1060)
 - [Fixed signing multiple transactions with guarded ledger](https://github.com/multiversx/mx-sdk-dapp/pull/1059)
 - [Added getHasNativeAuth in order to see if nativeAuth has been configured on development mode](https://github.com/multiversx/mx-sdk-dapp/pull/1051)
 - [Added support for nativeAuth impersonat](https://github.com/multiversx/mx-sdk-dapp/pull/1049)
 - [Updated WalletConnectV2 account provider to be updated on new or existing session](https://github.com/multiversx/mx-sdk-dapp/pull/1050)
 
 ## [[v2.28.8]](https://github.com/multiversx/mx-sdk-dapp/pull/1062)] - 2024-03-07
+
 - [Fixed base64 utils conversion](https://github.com/multiversx/mx-sdk-dapp/pull/1061)
 
 ## [[v2.28.7]](https://github.com/multiversx/mx-sdk-dapp/pull/1048)] - 2024-02-13
+
 - [Updated AddressRow data-testids](https://github.com/multiversx/mx-sdk-dapp/pull/1047)
 
 ## [[v2.28.6]](https://github.com/multiversx/mx-sdk-dapp/pull/1044)] - 2024-02-08
+
 - [Added option to access URL search param from application load time in `useParseSignedTransactions`](https://github.com/multiversx/mx-sdk-dapp/pull/1042)
 - [Fixed wallet connect breaks login with other providers](https://github.com/multiversx/mx-sdk-dapp/pull/1043)
 - [Fixed possibly undefined payload on custom toasts](https://github.com/multiversx/mx-sdk-dapp/pull/1036)
 
 ## [[v2.28.5]](https://github.com/multiversx/mx-sdk-dapp/pull/1036)] - 2024-02-01
+
 - [Fixed logout with web wallet infinite loop](https://github.com/multiversx/mx-sdk-dapp/pull/1036)
 
 ## [[v2.28.4]](https://github.com/multiversx/mx-sdk-dapp/pull/1035)] - 2024-02-01
+
 - [Reverted setting walletconnectV2 `accountProvider` on init](https://github.com/multiversx/mx-sdk-dapp/pull/1036)
 - [Fixed setting `loginToken` in `nativeAuthService` losing previous state](https://github.com/multiversx/mx-sdk-dapp/pull/1034)
 - [Fixed setting walletconnectV2 `accountProvider` on init](https://github.com/multiversx/mx-sdk-dapp/pull/1033)
 
 ## [[v2.28.3]](https://github.com/multiversx/mx-sdk-dapp/pull/1032)] - 2024-01-30
+
 - [Added transaction toast wrapper id](https://github.com/multiversx/mx-sdk-dapp/pull/1031)
 
 ## [[v2.28.2]](https://github.com/multiversx/mx-sdk-dapp/pull/1030)] - 2024-01-26
+
 - [Added support for `checkIsValidSender` with array option](https://github.com/multiversx/mx-sdk-dapp/pull/1029)
 
 ## [[v2.28.1]](https://github.com/multiversx/mx-sdk-dapp/pull/1028)] - 2024-01-25
+
 - [Added support for Web Wallet multisig token login](https://github.com/multiversx/mx-sdk-dapp/pull/1027)
 - [Changed postMessage payload from string to plain object](https://github.com/multiversx/mx-sdk-dapp/pull/1025)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.28.8-alpha.0",
+  "version": "2.28.8-alpha.2",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
@@ -150,7 +150,7 @@
     "@multiversx/sdk-native-auth-client": "1.0.7",
     "@multiversx/sdk-opera-provider": "1.0.0-alpha.1",
     "@multiversx/sdk-wallet": "4.2.0",
-    "@multiversx/sdk-wallet-connect-provider": "4.1.0",
+    "@multiversx/sdk-wallet-connect-provider": "4.1.1",
     "@multiversx/sdk-web-wallet-cross-window-provider": "0.0.23",
     "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "@reduxjs/toolkit": "1.8.2",

diff --git a/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContainer.tsx b/src/UI/walletConnect/WalletConnectLoginContainer/WalletConnectLoginContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
 import { ModalContainer } from 'UI/ModalContainer';
 import { WalletConnectLoginModalPropsType } from './types';
@@ -13,13 +13,10 @@ const WalletConnectLoginContainerComponent = (
     showLoginContent,
     showLoginModal,
     wrapContentInsideModal,
-    styles,
-    canLoginRef: parentCanLoginRef
+    styles
   } = props;
 
-  const canLoginRef = parentCanLoginRef ?? useRef<boolean>(true);
-
-  const onCloseModal = async () => {
+  const onCloseModal = () => {
     onClose?.();
   };
 
@@ -28,7 +25,7 @@ const WalletConnectLoginContainerComponent = (
   }
 
   if (!wrapContentInsideModal) {
-    return <WalletConnectLoginContent {...props} canLoginRef={canLoginRef} />;
+    return <WalletConnectLoginContent {...props} />;
   }
 
   return (
@@ -47,7 +44,7 @@ const WalletConnectLoginContainerComponent = (
       onClose={onCloseModal}
       visible={showLoginModal}
     >
-      <WalletConnectLoginContent {...props} canLoginRef={canLoginRef} />
+      <WalletConnectLoginContent {...props} />
     </ModalContainer>
   );
 };

diff --git a/...nnect/WalletConnectLoginContainer/WalletConnectLoginContent/WalletConnectLoginContent.tsx b/...nnect/WalletConnectLoginContainer/WalletConnectLoginContent/WalletConnectLoginContent.tsx
@@ -27,7 +27,6 @@ const WalletConnectLoginContentComponent = ({
   showScamPhishingAlert = true,
   title = 'Login with the xPortal App',
   token,
-  canLoginRef,
   globalStyles,
   styles,
   customRequestMethods = []
@@ -48,7 +47,6 @@ const WalletConnectLoginContentComponent = ({
     nativeAuth,
     onLoginRedirect,
     logoutRoute,
-    canLoginRef,
     customRequestMethods
   });
 

diff --git a/src/UI/walletConnect/WalletConnectLoginContainer/types.ts b/src/UI/walletConnect/WalletConnectLoginContainer/types.ts
@@ -1,16 +1,15 @@
 import { ReactNode, MutableRefObject } from 'react';
 
-import { OnProviderLoginType } from '../../../types';
+import { OnProviderLoginType } from '../../../types/login.types';
 import { WithClassnameType } from '../../types';
 import { InnerWalletConnectComponentsClassesType } from '../types';
 
 export interface WalletConnectLoginModalPropsType
   extends OnProviderLoginType,
     WithClassnameType {
-  loginButtonText: string;
+  loginButtonText: ReactNode;
   customSpinnerComponent?: ReactNode;
   innerWalletConnectComponentsClasses?: InnerWalletConnectComponentsClassesType;
-  isWalletConnectV2?: boolean;
   lead?: string;
   legacyMessage?: string;
   logoutRoute?: string;
@@ -20,6 +19,8 @@ export interface WalletConnectLoginModalPropsType
   showScamPhishingAlert?: boolean;
   title?: string;
   wrapContentInsideModal?: boolean;
-  canLoginRef?: MutableRefObject<boolean>;
   customRequestMethods?: Array<string>;
+  // deprecated/not used - kept for compatibility
+  isWalletConnectV2?: boolean;
+  canLoginRef?: MutableRefObject<boolean>;
 }
diff --git a/src/hooks/login/useWalletConnectV2Login.ts b/src/hooks/login/useWalletConnectV2Login.ts
@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useGetAccountProvider } from 'hooks/account';
 import { useUpdateEffect } from 'hooks/useUpdateEffect';
@@ -47,7 +47,6 @@ export enum WalletConnectV2Error {
 
 export interface InitWalletConnectV2Type extends OnProviderLoginType {
   logoutRoute?: string;
-  canLoginRef?: MutableRefObject<boolean>;
   customRequestMethods?: Array<string>;
 }
 
@@ -72,7 +71,6 @@ export const useWalletConnectV2Login = ({
   nativeAuth,
   onLoginRedirect,
   logoutRoute: providerLogoutRoute,
-  canLoginRef: parentCanLoginRef,
   customRequestMethods = []
 }: InitWalletConnectV2Type): WalletConnectV2LoginHookReturnType => {
   const dispatch = useDispatch();
@@ -99,7 +97,6 @@ export const useWalletConnectV2Login = ({
   const dappLogoutRoute = useSelector(logoutRouteSelector);
   const loginMethod = useSelector(loginMethodSelector);
   const providerRef = useRef<any>(provider);
-  const canLoginRef = parentCanLoginRef ?? useRef<boolean>(false);
   const isInitialisingRef = useRef<boolean>(false);
   const mounted = useRef(false);
 
@@ -138,7 +135,7 @@ export const useWalletConnectV2Login = ({
         return;
       }
 
-      if (!canLoginRef.current) {
+      if (!mounted.current) {
         try {
           await providerRef.current?.logout();
         } catch {
@@ -186,10 +183,6 @@ export const useWalletConnectV2Login = ({
   };
 
   const cancelLogin = async () => {
-    if (canLoginRef.current) {
-      canLoginRef.current = false;
-    }
-
     const providerType = getProviderType(providerRef.current);
 
     if (providerType !== LoginMethodsEnum.walletconnectv2) {
@@ -290,7 +283,7 @@ export const useWalletConnectV2Login = ({
 
     const isLoggedIn = getIsLoggedIn();
 
-    const cannotLogin = canLoginRef.current === false && !isLoggedIn;
+    const cannotLogin = mounted.current === false && !isLoggedIn;
     const isInitialized = providerRef.current?.isInitialized?.();
 
     if (isInitialisingRef.current || cannotLogin || isInitialized) {
@@ -300,15 +293,14 @@ export const useWalletConnectV2Login = ({
     isInitialisingRef.current = true;
 
     if (providerRef.current?.walletConnector) {
-      providerRef.current.init();
+      await providerRef.current.init();
 
       setSessionProvider(providerRef.current);
 
       isInitialisingRef.current = false;
-      canLoginRef.current = true;
 
       if (loginProvider) {
-        generateWcUri();
+        await generateWcUri();
       }
 
       return;
@@ -332,11 +324,10 @@ export const useWalletConnectV2Login = ({
     setSessionProvider(newProvider);
     providerRef.current = newProvider;
     isInitialisingRef.current = false;
-    canLoginRef.current = true;
 
     if (loginProvider) {
       setWcPairings(newProvider.pairings);
-      generateWcUri();
+      await generateWcUri();
     }
 
     return;
@@ -349,15 +340,15 @@ export const useWalletConnectV2Login = ({
     }
 
     try {
-      const { uri, approval } = await providerRef.current?.connect({
-        methods: dappMethods
-      });
-
       // Do not do any other actions if component is not mounted
       if (!mounted.current) {
         return;
       }
 
+      const { uri, approval } = await providerRef.current?.connect({
+        methods: dappMethods
+      });
+
       const hasUri = Boolean(uri);
 
       if (!hasUri) {
@@ -396,14 +387,6 @@ export const useWalletConnectV2Login = ({
     }
   }
 
-  useUpdateEffect(() => {
-    if (!tokenToSign || !providerRef.current?.connect) {
-      return;
-    }
-
-    generateWcUri();
-  }, [tokenToSign, providerRef.current?.connect]);
-
   useUpdateEffect(() => {
     providerRef.current = provider;
   }, [provider]);