Description
Current State:
- Multiple
VerifyAccountPage components exist for different contexts
- Each has hardcoded
backTo logic based on the flow it serves
- The base component logic is in
VerifyAccountPageBase.tsx
- Example existing implementations:
pages/settings/Wallet/VerifyAccountPage/index.tsx
pages/settings/Security/TwoFactorAuth/VerifyAccountPage.tsx
Expected State:
- Create a single
DynamicVerifyAccountPage component
- Component reuses
VerifyAccountPageBase for core functionality
- Implements dynamic back logic using
getPathWithoutSuffix()
- Implements forward logic (static destination or via
FORWARD_TO_MAPPINGS)
- No
backTo parameter in URL - context comes from the path itself
Implementation:
Create App/src/pages/settings/DynamicVerifyAccountPage.tsx:
import React from 'react';
import Navigation from '@libs/Navigation/Navigation';
import DYNAMIC_ROUTES from '@src/ROUTES';
import VerifyAccountPageBase from './VerifyAccountPageBase';
function getPathWithoutSuffix(dynamicSuffix: string): string {
const path = Navigation.getActiveRoute();
return path ? path.replace(`/${dynamicSuffix}`, '') : ROUTES.HOME;
}
function DynamicVerifyAccountPage() {
const handleGoBack = () => {
const backRoute = getPathWithoutSuffix(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path);
Navigation.goBack(backRoute);
};
return (
<VerifyAccountPageBase
onGoBack={handleGoBack}
onGoForward={handleGoForward}
/>
);
}
export default DynamicVerifyAccountPage;
Scope
Files:
App/src/pages/settings/DynamicVerifyAccountPage.tsx (new file)
- May need to modify
VerifyAccountPageBase.tsx if it doesn't accept callback props
Dependencies:
Description
Current State:
VerifyAccountPagecomponents exist for different contextsbackTologic based on the flow it servesVerifyAccountPageBase.tsxpages/settings/Wallet/VerifyAccountPage/index.tsxpages/settings/Security/TwoFactorAuth/VerifyAccountPage.tsxExpected State:
DynamicVerifyAccountPagecomponentVerifyAccountPageBasefor core functionalitygetPathWithoutSuffix()FORWARD_TO_MAPPINGS)backToparameter in URL - context comes from the path itselfImplementation:
Create
App/src/pages/settings/DynamicVerifyAccountPage.tsx:Scope
Files:
App/src/pages/settings/DynamicVerifyAccountPage.tsx(new file)VerifyAccountPageBase.tsxif it doesn't accept callback propsDependencies: