From 93f5ff23380a673510e482f0cf51e3e0183a1e5f Mon Sep 17 00:00:00 2001 From: Mikhail Date: Wed, 13 Apr 2022 16:30:20 +0200 Subject: [PATCH] support redirect query param on safe-creation --- src/logic/hooks/useQuery.ts | 10 ++++++++ .../components/SafeCreationProcess.tsx | 25 ++++++++++++++++++- .../SafeAppLandingPage.test.tsx | 11 ++++---- .../SafeAppLandingPage/SafeAppLandingPage.tsx | 20 +++++++++------ src/routes/routes.ts | 2 +- 5 files changed, 54 insertions(+), 14 deletions(-) create mode 100644 src/logic/hooks/useQuery.ts diff --git a/src/logic/hooks/useQuery.ts b/src/logic/hooks/useQuery.ts new file mode 100644 index 0000000000..47779603ae --- /dev/null +++ b/src/logic/hooks/useQuery.ts @@ -0,0 +1,10 @@ +import { useMemo } from 'react' +import { useLocation } from 'react-router-dom' + +const useQuery = (): URLSearchParams => { + const { search } = useLocation() + + return useMemo(() => new URLSearchParams(search), [search]) +} + +export { useQuery } diff --git a/src/routes/CreateSafePage/components/SafeCreationProcess.tsx b/src/routes/CreateSafePage/components/SafeCreationProcess.tsx index 20fb49612a..b50d0d2337 100644 --- a/src/routes/CreateSafePage/components/SafeCreationProcess.tsx +++ b/src/routes/CreateSafePage/components/SafeCreationProcess.tsx @@ -43,6 +43,8 @@ import { trackEvent } from 'src/utils/googleTagManager' import { CREATE_SAFE_EVENTS } from 'src/utils/events/createLoadSafe' import Track from 'src/components/Track' import { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers' +import { useQuery } from 'src/logic/hooks/useQuery' +import { ADDRESSED_ROUTE } from 'src/routes/routes' export const InlinePrefixedEthHashInfo = styled(PrefixedEthHashInfo)` display: inline-flex; @@ -186,6 +188,8 @@ function SafeCreationProcess(): ReactElement { const dispatch = useDispatch() const userAddress = useSelector(userAccountSelector) const chainId = useSelector(currentChainId) + const query = useQuery() + const redirect = query.get('redirect') const [showModal, setShowModal] = useState(false) const [modalData, setModalData] = useState({ safeAddress: '' }) @@ -269,10 +273,29 @@ function SafeCreationProcess(): ReactElement { goToWelcomePage() } - function onClickModalButton() { + const onClickModalButton = () => { removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY) const { safeName, safeCreationTxHash, safeAddress } = modalData + + if (redirect) { + // If the URL includes ADDRESSED_ROUTE template, then we need to replace it with the new safe address + if (redirect.includes(ADDRESSED_ROUTE)) { + history.push({ + pathname: generateSafeRoute(redirect, { + shortName: getShortName(), + safeAddress, + }), + }) + } else { + history.push({ + pathname: redirect, + }) + } + + return + } + history.push({ pathname: generateSafeRoute(SAFE_ROUTES.ASSETS_BALANCES, { shortName: getShortName(), diff --git a/src/routes/SafeAppLandingPage/SafeAppLandingPage.test.tsx b/src/routes/SafeAppLandingPage/SafeAppLandingPage.test.tsx index ad103a9305..8509bcb308 100644 --- a/src/routes/SafeAppLandingPage/SafeAppLandingPage.test.tsx +++ b/src/routes/SafeAppLandingPage/SafeAppLandingPage.test.tsx @@ -2,7 +2,7 @@ import * as safeAppsGatewaySDK from '@gnosis.pm/safe-react-gateway-sdk' import SafeAppLandingPage from './SafeAppLandingPage' import { render, screen, waitFor, waitForElementToBeRemoved } from 'src/utils/test-utils' -import { history, OPEN_SAFE_ROUTE, WELCOME_ROUTE } from 'src/routes/routes' +import { history, SAFE_ROUTES, OPEN_SAFE_ROUTE, WELCOME_ROUTE } from 'src/routes/routes' import * as appUtils from 'src/routes/safe/components/Apps/utils' import { FETCH_STATUS } from 'src/utils/requests' import { saveToStorage } from 'src/utils/storage' @@ -131,7 +131,11 @@ describe('', () => { // when the Loader is removed we show the create new safe button await waitForElementToBeRemoved(() => screen.getByRole('progressbar')) const createNewSafeLinkNode = screen.getByText('Create new Safe').closest('a') - expect(createNewSafeLinkNode).toHaveAttribute('href', OPEN_SAFE_ROUTE) + const openSafeRouteWithRedirect = `${OPEN_SAFE_ROUTE}?redirect=${encodeURIComponent( + `${SAFE_ROUTES.APPS}?appUrl=${SAFE_APP_URL_FROM_MANIFEST}`, + )}` + + expect(createNewSafeLinkNode).toHaveAttribute('href', openSafeRouteWithRedirect) }) it('Redirects to the Demo Safe App', async () => { @@ -159,9 +163,6 @@ describe('', () => { render() - const loaderNode = screen.getByRole('progressbar') - expect(loaderNode).toBeInTheDocument() - await waitFor(() => { expect(window.location.pathname).toBe(WELCOME_ROUTE) }) diff --git a/src/routes/SafeAppLandingPage/SafeAppLandingPage.tsx b/src/routes/SafeAppLandingPage/SafeAppLandingPage.tsx index 4643d682a5..6f0731c576 100644 --- a/src/routes/SafeAppLandingPage/SafeAppLandingPage.tsx +++ b/src/routes/SafeAppLandingPage/SafeAppLandingPage.tsx @@ -1,6 +1,6 @@ import { ReactElement, useCallback, useEffect } from 'react' import { useSelector } from 'react-redux' -import { useLocation } from 'react-router-dom' +import { Redirect } from 'react-router-dom' import styled from 'styled-components' import { Card, Title, Button, Text, Loader } from '@gnosis.pm/safe-react-components' import Divider from '@material-ui/core/Divider' @@ -11,7 +11,7 @@ import Popper from '@material-ui/core/Popper' import SuccessSvg from 'src/assets/icons/safe-created.svg' import DemoSvg from 'src/assets/icons/demo.svg' import { getChainById, isValidChainId } from 'src/config' -import { demoSafeRoute, history, OPEN_SAFE_ROUTE, WELCOME_ROUTE } from 'src/routes/routes' +import { demoSafeRoute, history, OPEN_SAFE_ROUTE, WELCOME_ROUTE, SAFE_ROUTES } from 'src/routes/routes' import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList' import { SafeApp } from 'src/routes/safe/components/Apps/types' import { getAppInfoFromUrl } from 'src/routes/safe/components/Apps/utils' @@ -26,10 +26,10 @@ import Img from 'src/components/layout/Img' import Link from 'src/components/layout/Link' import { black300, grey400, secondary } from 'src/theme/variables' import useAsync from 'src/logic/hooks/useAsync' +import { useQuery } from 'src/logic/hooks/useQuery' function SafeAppLandingPage(): ReactElement { - const { search } = useLocation() - const query = new URLSearchParams(search) + const query = useQuery() const safeAppChainId = query.get('chainId') const safeAppUrl = query.get('appUrl') @@ -85,6 +85,10 @@ function SafeAppLandingPage(): ReactElement { const showLoader = isLoading || !safeAppDetails + if (!safeAppUrl) { + return + } + return ( @@ -107,7 +111,7 @@ function SafeAppLandingPage(): ReactElement { Use the dApp with your Safe! - {isWalletConnected ? : } + {isWalletConnected ? : } {/* Demo Safe Section */} @@ -154,14 +158,16 @@ const SafeAppDetails = ({ iconUrl, name, description, availableChains }) => { ) } -const CreateNewSafe = () => { +const CreateNewSafe = ({ safeAppUrl }: { safeAppUrl: string }) => { + const openSafeLink = `${OPEN_SAFE_ROUTE}?redirect=${encodeURIComponent(`${SAFE_ROUTES.APPS}?appUrl=${safeAppUrl}`)}` + return ( <> Vault -