Merge pull request #27071 from brave/fix-wallet-transactions-partner-modal-bugs

fix(wallet): Transactions Partner Modal Bugs

components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.stories.tsx

@@ -20,7 +20,6 @@ export const _PartnersConsentModal = () => {
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
         onContinue={() => setIsOpen(false)}
-        onCancel={() => setIsOpen(false)}
       />
     </WalletPageStory>
   )

components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.tsx

@@ -32,13 +32,12 @@ interface PartnerConsentModalProps {
   isOpen: boolean
   onClose: () => void
   onContinue: () => void
-  onCancel: () => void
 }
 
 export function PartnersConsentModal(
   props: Readonly<PartnerConsentModalProps>
 ) {
-  const { isOpen, onCancel, onClose, onContinue } = props
+  const { isOpen, onClose, onContinue } = props
 
   // state
   const [termsAccepted, setTermsAccepted] = React.useState(false)
@@ -98,7 +97,7 @@ export function PartnersConsentModal(
       >
         <Button
           kind='outline'
-          onClick={onCancel}
+          onClick={onClose}
         >
           {getLocale('braveWalletButtonCancel')}
         </Button>

components/brave_wallet_ui/page/container.tsx

@@ -5,7 +5,7 @@
 
 import * as React from 'react'
 import { useDispatch } from 'react-redux'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Redirect, Route, Switch, useHistory } from 'react-router-dom'
 
 import ProgressRing from '@brave/leo/react/progressRing'
 
@@ -16,6 +16,7 @@ import {
   isPersistableSessionRoute
 } from '../utils/routes-utils'
 import { LOCAL_STORAGE_KEYS } from '../common/constants/local-storage-keys'
+import { loadTimeData } from '../../common/loadTimeData'
 
 // actions
 import * as WalletPageActions from './actions/wallet_page_actions'
@@ -34,6 +35,7 @@ import {
   useSafeWalletSelector
 } from '../common/hooks/use-safe-selector'
 import { useLocationPathName } from '../common/hooks/use-pathname'
+import { useLocalStorage } from '../common/hooks/use_local_storage'
 
 // style
 import 'emptykit.css'
@@ -63,10 +65,14 @@ import { UnlockedWalletRoutes } from './router/unlocked_wallet_routes'
 import { Swap } from './screens/swap/swap'
 import { SendScreen } from './screens/send/send_screen/send_screen'
 import { DevZCash } from './screens/dev-zcash/dev-zcash'
+import {
+  PartnersConsentModal //
+} from '../components/desktop/popup-modals/partners_consent_modal/partners_consent_modal'
 
 export const Container = () => {
   // routing
   const walletLocation = useLocationPathName()
+  const history = useHistory()
 
   // redux
   const dispatch = useDispatch()
@@ -78,9 +84,7 @@ export const Container = () => {
   const isBitcoinEnabled = useSafeWalletSelector(
     WalletSelectors.isBitcoinEnabled
   )
-  const isZCashEnabled = useSafeWalletSelector(
-    WalletSelectors.isZCashEnabled
-  )
+  const isZCashEnabled = useSafeWalletSelector(WalletSelectors.isZCashEnabled)
 
   // page selectors (safe)
   const mnemonic = useSafePageSelector(PageSelectors.mnemonic)
@@ -95,6 +99,11 @@ export const Container = () => {
 
   // state
   const [sessionRoute, setSessionRoute] = React.useState(initialSessionRoute)
+  const [showPartnerConsentModal, setShowPartnerConsentModal] =
+    React.useState(false)
+
+  const [acceptedPartnerConsentTerms, setAcceptedPartnerConsentTerms] =
+    useLocalStorage(LOCAL_STORAGE_KEYS.HAS_ACCEPTED_PARTNER_TERMS, false)
 
   // computed
   const walletNotYetCreated = !isWalletCreated || setupStillInProgress
@@ -103,6 +112,21 @@ export const Container = () => {
     : isWalletLocked
     ? WalletRoutes.Unlock
     : sessionRoute || WalletRoutes.PortfolioAssets
+  const isAndroid = loadTimeData.getBoolean('isAndroid') || false
+
+  // Methods
+  const handleAcceptPartnerConsent = () => {
+    setAcceptedPartnerConsentTerms(true)
+    setShowPartnerConsentModal(false)
+  }
+
+  const handleDeclinePartnerConsent = () => {
+    setShowPartnerConsentModal(false)
+    // Not able to use history.goBack() in this instance
+    // since users could manually navigate to brave://wallet/crypto/fund-wallet
+    // in a new tab and there would be no history to go back to.
+    history.push(WalletRoutes.Portfolio)
+  }
 
   // effects
   React.useEffect(() => {
@@ -128,6 +152,16 @@ export const Container = () => {
     }
   }, [walletLocation, isPanel, mnemonic, dispatch])
 
+  React.useEffect(() => {
+    if (
+      !isAndroid &&
+      !acceptedPartnerConsentTerms &&
+      walletLocation.includes(WalletRoutes.FundWalletPageStart)
+    ) {
+      setShowPartnerConsentModal(true)
+    }
+  }, [isAndroid, acceptedPartnerConsentTerms, walletLocation, history])
+
   // render
   if (!hasInitialized) {
     return (
@@ -138,105 +172,112 @@ export const Container = () => {
   }
 
   return (
-    <Switch>
-      <ProtectedRoute
-        path={WalletRoutes.Onboarding}
-        requirement={walletNotYetCreated}
-        redirectRoute={defaultRedirect}
-      >
-        <OnboardingRoutes />
-      </ProtectedRoute>
-
-      {/* Post-onboarding flows */}
-      <Route
-        path={WalletRoutes.Restore}
-        exact={true}
-      >
-        <WalletPageLayout>
-          <WalletSubViewLayout>
-            <SimplePageWrapper>
-              <RestoreWallet />
-            </SimplePageWrapper>
-          </WalletSubViewLayout>
-        </WalletPageLayout>
-      </Route>
-
-      <ProtectedRoute
-        path={WalletRoutes.Unlock}
-        exact={true}
-        requirement={isWalletLocked}
-        redirectRoute={defaultRedirect}
-      >
-        <WalletPageWrapper
-          wrapContentInBox={true}
-          hideNav={true}
-          hideHeaderMenu={true}
-          noBorderRadius={true}
-          useDarkBackground={isPanel}
+    <>
+      <Switch>
+        <ProtectedRoute
+          path={WalletRoutes.Onboarding}
+          requirement={walletNotYetCreated}
+          redirectRoute={defaultRedirect}
         >
-          <LockScreen />
-        </WalletPageWrapper>
-      </ProtectedRoute>
+          <OnboardingRoutes />
+        </ProtectedRoute>
 
-      <ProtectedRoute
-        path={WalletRoutes.Swap}
-        requirement={!isWalletLocked && !walletNotYetCreated}
-        redirectRoute={defaultRedirect}
-        exact={true}
-      >
-        <Swap key='swap' />
-      </ProtectedRoute>
+        {/* Post-onboarding flows */}
+        <Route
+          path={WalletRoutes.Restore}
+          exact={true}
+        >
+          <WalletPageLayout>
+            <WalletSubViewLayout>
+              <SimplePageWrapper>
+                <RestoreWallet />
+              </SimplePageWrapper>
+            </WalletSubViewLayout>
+          </WalletPageLayout>
+        </Route>
 
-      <ProtectedRoute
-        path={WalletRoutes.Bridge}
-        requirement={!isWalletLocked && !walletNotYetCreated}
-        redirectRoute={defaultRedirect}
-        exact={true}
-      >
-        <Swap key='bridge' />
-      </ProtectedRoute>
+        <ProtectedRoute
+          path={WalletRoutes.Unlock}
+          exact={true}
+          requirement={isWalletLocked}
+          redirectRoute={defaultRedirect}
+        >
+          <WalletPageWrapper
+            wrapContentInBox={true}
+            hideNav={true}
+            hideHeaderMenu={true}
+            noBorderRadius={true}
+            useDarkBackground={isPanel}
+          >
+            <LockScreen />
+          </WalletPageWrapper>
+        </ProtectedRoute>
 
-      <ProtectedRoute
-        path={WalletRoutes.Send}
-        requirement={!isWalletLocked && !walletNotYetCreated}
-        redirectRoute={defaultRedirect}
-        exact={true}
-      >
-        <SendScreen />
-      </ProtectedRoute>
+        <ProtectedRoute
+          path={WalletRoutes.Swap}
+          requirement={!isWalletLocked && !walletNotYetCreated}
+          redirectRoute={defaultRedirect}
+          exact={true}
+        >
+          <Swap key='swap' />
+        </ProtectedRoute>
 
-      <ProtectedRoute
-        path={WalletRoutes.CryptoPage}
-        requirement={!isWalletLocked && !walletNotYetCreated}
-        redirectRoute={defaultRedirect}
-      >
-        <UnlockedWalletRoutes sessionRoute={sessionRoute} />
-      </ProtectedRoute>
+        <ProtectedRoute
+          path={WalletRoutes.Bridge}
+          requirement={!isWalletLocked && !walletNotYetCreated}
+          redirectRoute={defaultRedirect}
+          exact={true}
+        >
+          <Swap key='bridge' />
+        </ProtectedRoute>
 
-      <ProtectedRoute
-        path={WalletRoutes.DevBitcoin}
-        exact={true}
-        requirement={
-          !isWalletLocked && !walletNotYetCreated && isBitcoinEnabled
-        }
-        redirectRoute={defaultRedirect}
-      >
-        <DevBitcoin />
-      </ProtectedRoute>
+        <ProtectedRoute
+          path={WalletRoutes.Send}
+          requirement={!isWalletLocked && !walletNotYetCreated}
+          redirectRoute={defaultRedirect}
+          exact={true}
+        >
+          <SendScreen />
+        </ProtectedRoute>
 
-      <ProtectedRoute
-        path={WalletRoutes.DevZCash}
-        exact={true}
-        requirement={
-          !isWalletLocked && !walletNotYetCreated && isZCashEnabled
-        }
-        redirectRoute={defaultRedirect}
-      >
-        <DevZCash />
-      </ProtectedRoute>
+        <ProtectedRoute
+          path={WalletRoutes.CryptoPage}
+          requirement={!isWalletLocked && !walletNotYetCreated}
+          redirectRoute={defaultRedirect}
+        >
+          <UnlockedWalletRoutes sessionRoute={sessionRoute} />
+        </ProtectedRoute>
 
-      <Redirect to={defaultRedirect} />
-    </Switch>
+        <ProtectedRoute
+          path={WalletRoutes.DevBitcoin}
+          exact={true}
+          requirement={
+            !isWalletLocked && !walletNotYetCreated && isBitcoinEnabled
+          }
+          redirectRoute={defaultRedirect}
+        >
+          <DevBitcoin />
+        </ProtectedRoute>
+
+        <ProtectedRoute
+          path={WalletRoutes.DevZCash}
+          exact={true}
+          requirement={
+            !isWalletLocked && !walletNotYetCreated && isZCashEnabled
+          }
+          redirectRoute={defaultRedirect}
+        >
+          <DevZCash />
+        </ProtectedRoute>
+
+        <Redirect to={defaultRedirect} />
+      </Switch>
+      <PartnersConsentModal
+        isOpen={showPartnerConsentModal}
+        onClose={handleDeclinePartnerConsent}
+        onContinue={handleAcceptPartnerConsent}
+      />
+    </>
   )
 }
 

components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx

@@ -4,20 +4,11 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { Prompt, Route, Switch, useHistory } from 'react-router'
-import { Location } from 'history'
+import { Route, Switch } from 'react-router'
 
 // Utils
 import { loadTimeData } from '../../../common/loadTimeData'
 
-// Hooks
-import { useLocalStorage } from '../../common/hooks/use_local_storage'
-
-// Constants
-import {
-  LOCAL_STORAGE_KEYS //
-} from '../../common/constants/local-storage-keys'
-
 // Types
 import { WalletRoutes } from '../../constants/types'
 
@@ -37,9 +28,6 @@ import { SimplePageWrapper } from '../screens/page-screen.styles'
 import {
   OnboardingSuccess //
 } from '../screens/onboarding/onboarding_success/onboarding_success'
-import {
-  PartnersConsentModal //
-} from '../../components/desktop/popup-modals/partners_consent_modal/partners_consent_modal'
 
 export const UnlockedWalletRoutes = ({
   sessionRoute
@@ -49,60 +37,9 @@ export const UnlockedWalletRoutes = ({
   // Computed
   const isAndroid = loadTimeData.getBoolean('isAndroid') || false
 
-  // State
-  const [isModalOpen, setModalOpen] = React.useState(false)
-  const [nextLocation, setNextLocation] = React.useState<Location | null>(null)
-  const [shouldBlock, setShouldBlock] = React.useState(!isAndroid)
-
-  // Hooks
-  const history = useHistory()
-  const [acceptedTerms, setAcceptedTerms] = useLocalStorage(
-    LOCAL_STORAGE_KEYS.HAS_ACCEPTED_PARTNER_TERMS,
-    false
-  )
-
-  // Methods
-  const handleAccept = () => {
-    setAcceptedTerms(true)
-    setModalOpen(false)
-    setShouldBlock(false)
-    if (nextLocation) {
-      history.block(() => {})
-      history.push(nextLocation.pathname)
-    }
-  }
-
-  const handleDecline = () => {
-    setModalOpen(false)
-    setNextLocation(null)
-  }
-
-  const handleBlockedNavigation = (location: Location) => {
-    if (
-      !isAndroid &&
-      !acceptedTerms &&
-      location.pathname.startsWith(WalletRoutes.FundWalletPageStart)
-    ) {
-      setModalOpen(true)
-      setNextLocation(location)
-      return false
-    }
-    return true
-  }
-
   // render
   return (
     <>
-      <Prompt
-        when={shouldBlock}
-        message={(location) => handleBlockedNavigation(location)}
-      />
-      <PartnersConsentModal
-        isOpen={isModalOpen}
-        onClose={() => {}}
-        onCancel={handleDecline}
-        onContinue={handleAccept}
-      />
       <Switch>
         <Route
           path={WalletRoutes.OnboardingComplete}