diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.stories.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.stories.tsx index 61b2d26a2848..ac5d54583151 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.stories.tsx +++ b/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)} /> ) diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.tsx index cdcf29dff894..553f2d1a7938 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.tsx +++ b/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 ) { - 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( > diff --git a/components/brave_wallet_ui/page/container.tsx b/components/brave_wallet_ui/page/container.tsx index fcaaacd31fb1..3b2a01f77e9a 100644 --- a/components/brave_wallet_ui/page/container.tsx +++ b/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 ( - - - - - - {/* Post-onboarding flows */} - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + {/* Post-onboarding flows */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx b/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx index 668aed423f76..44b5821a49b2 100644 --- a/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx +++ b/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(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 ( <> - handleBlockedNavigation(location)} - /> - {}} - onCancel={handleDecline} - onContinue={handleAccept} - />