WIP: Migrate WalletConnectSessionRequestModal

alephium · Oct 11, 2024 · a332b16 · a332b16
1 parent e0a2948
commit a332b16
Show file tree

Hide file tree

Showing 4 changed files with 359 additions and 323 deletions.
diff --git a/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx b/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx
@@ -79,7 +79,6 @@ import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, u
 import { useTranslation } from 'react-i18next'
 import { AppState, AppStateStatus } from 'react-native'
 import BackgroundService from 'react-native-background-actions'
-import { Portal } from 'react-native-portalize'
 
 import { sendAnalytics } from '~/analytics'
 import {
@@ -88,9 +87,7 @@ import {
   buildTransferTransaction
 } from '~/api/transactions'
 import SpinnerModal from '~/components/SpinnerModal'
-import WalletConnectSessionRequestModal from '~/contexts/walletConnect/WalletConnectSessionRequestModal'
 import useFundPasswordGuard from '~/features/fund-password/useFundPasswordGuard'
-import BottomModal from '~/features/modals/DeprecatedBottomModal'
 import { openModal } from '~/features/modals/modalActions'
 import { useAppDispatch, useAppSelector } from '~/hooks/redux'
 import { useBiometricsAuthGuard } from '~/hooks/useBiometrics'
@@ -153,7 +150,6 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
   const [sessionProposalEvent, setSessionProposalEvent] = useState<SessionProposalEvent>()
   const [sessionRequestEvent, setSessionRequestEvent] = useState<SessionRequestEvent>()
   const [sessionRequestData, setSessionRequestData] = useState<SessionRequestData>()
-  const [isSessionRequestModalOpen, setIsSessionRequestModalOpen] = useState(false)
   const [loading, setLoading] = useState('')
   const [walletConnectClientInitializationAttempts, setWalletConnectClientInitializationAttempts] = useState(0)
 
@@ -340,7 +336,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
             setSessionRequestEvent(requestEvent)
 
             console.log('⏳ OPENING MODAL TO APPROVE TX...')
-            setIsSessionRequestModalOpen(true)
+            openWalletConnectSessionRequestModal()
 
             break
           }
@@ -383,7 +379,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
             setSessionRequestEvent(requestEvent)
 
             console.log('⏳ OPENING MODAL TO APPROVE TX...')
-            setIsSessionRequestModalOpen(true)
+            openWalletConnectSessionRequestModal()
 
             break
           }
@@ -438,7 +434,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
             setSessionRequestEvent(requestEvent)
 
             console.log('⏳ OPENING MODAL TO APPROVE TX...')
-            setIsSessionRequestModalOpen(true)
+            openWalletConnectSessionRequestModal()
 
             break
           }
@@ -467,7 +463,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
             setSessionRequestEvent(requestEvent)
 
             console.log('⏳ OPENING MODAL TO SIGN MESSAGE...')
-            setIsSessionRequestModalOpen(true)
+            openWalletConnectSessionRequestModal()
 
             break
           }
@@ -504,7 +500,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
             setSessionRequestEvent(requestEvent)
 
             console.log('⏳ OPENING MODAL TO SIGN UNSIGNED TX...')
-            setIsSessionRequestModalOpen(true)
+            openWalletConnectSessionRequestModal()
 
             break
           }
@@ -560,7 +556,14 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
     // The `addresses` dependency causes re-rendering when any property of an Address changes, even though we only need
     // the `hash` and the `publicKey`. Creating a selector that extracts those 3 doesn't help.
     // Using addressIds fixes the problem, but now the api/transactions.ts file becomes dependant on the store file.
-    [walletConnectClient, respondToWalletConnectWithError, addressIds, handleApiResponse, t]
+    [
+      walletConnectClient,
+      respondToWalletConnectWithError,
+      addressIds,
+      openWalletConnectSessionRequestModal,
+      handleApiResponse,
+      t
+    ]
   )
 
   const onSessionDelete = useCallback(
@@ -1031,23 +1034,37 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
     }
   }
 
-  const handleSessionRequestModalClose = async () => {
-    setIsSessionRequestModalOpen(false)
-    onSessionRequestModalClose()
-  }
-
-  const onSessionRequestModalClose = async () => {
-    console.log('👉 CLOSING MODAL.')
-
-    if (sessionRequestEvent && walletConnectClient && walletConnectClient?.getPendingSessionRequests().length > 0) {
-      console.log('👉 USER CLOSED THE MODAL WITHOUT REJECTING/APPROVING SO WE NEED TO REJECT.')
-      handleRejectPress()
-    }
-  }
-
-  useEffect(() => {
-    if (sessionRequestEvent === undefined && isSessionRequestModalOpen) setIsSessionRequestModalOpen(false)
-  }, [isSessionRequestModalOpen, sessionRequestEvent])
+  const openWalletConnectSessionRequestModal = useCallback(
+    () =>
+      sessionRequestData &&
+      walletConnectClient &&
+      dispatch(
+        openModal({
+          name: 'WalletConnectSessionRequestModal',
+          props: {
+            walletConnectClient,
+            requestData: sessionRequestData,
+            onApprove: handleApprovePress,
+            onReject: handleRejectPress,
+            onSendTxOrSignFail: handleSendTxOrSignFail,
+            onSignSuccess: handleSignSuccess,
+            metadata: activeSessionMetadata,
+            sessionRequestEvent
+          }
+        })
+      ),
+    [
+      activeSessionMetadata,
+      dispatch,
+      handleApprovePress,
+      handleRejectPress,
+      handleSendTxOrSignFail,
+      handleSignSuccess,
+      sessionRequestData,
+      sessionRequestEvent,
+      walletConnectClient
+    ]
+  )
 
   useEffect(() => {
     if (!isWalletUnlocked || !url || !url.startsWith('wc:') || wcDeepLink.current === url) return
@@ -1121,25 +1138,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
       }}
     >
       {children}
-      <Portal>
-        {sessionRequestData && (
-          <BottomModal
-            isOpen={isSessionRequestModalOpen}
-            onClose={handleSessionRequestModalClose}
-            Content={(props) => (
-              <WalletConnectSessionRequestModal
-                requestData={sessionRequestData}
-                onApprove={handleApprovePress}
-                onReject={handleRejectPress}
-                onSendTxOrSignFail={handleSendTxOrSignFail}
-                onSignSuccess={handleSignSuccess}
-                metadata={activeSessionMetadata}
-                {...props}
-              />
-            )}
-          />
-        )}
-      </Portal>
+
       <SpinnerModal isActive={!!loading} text={loading} />
     </WalletConnectContext.Provider>
   )