diff --git a/app/__tests__/components/InitialWelcome.test.tsx b/app/__tests__/components/InitialWelcome.test.tsx index c5a1c5c85..097ab51df 100644 --- a/app/__tests__/components/InitialWelcome.test.tsx +++ b/app/__tests__/components/InitialWelcome.test.tsx @@ -89,27 +89,6 @@ describe("InitialWelcomeReturningUser", () => { it("renders the component and displays the first step", () => { render(); - expect(screen.getByText("Build Your Passport Score")).toBeInTheDocument(); - }); - - it("navigates through the steps and calls onBoardFinished when completed", () => { - render(); - - const nextButton = screen.getByText("Next"); - - // Click "Next" to go to step 2 - fireEvent.click(nextButton); - expect(screen.getByText("Accumulate Verified Stamps")).toBeInTheDocument(); - - // Click "Next" to go to step 3 - fireEvent.click(nextButton); expect(screen.getByText("Auto refresh")).toBeInTheDocument(); - expect(screen.getByText("Get Started")).toBeInTheDocument(); - - // Click "Get Started" to finish the steps - const getStartedButton = screen.getByText("Get Started"); - fireEvent.click(getStartedButton); - - expect(defaultPropsReturningUser.onBoardFinished).toHaveBeenCalledTimes(1); }); }); diff --git a/app/components/HeaderContentFooterGrid.tsx b/app/components/HeaderContentFooterGrid.tsx index 9c4415721..2c1513578 100644 --- a/app/components/HeaderContentFooterGrid.tsx +++ b/app/components/HeaderContentFooterGrid.tsx @@ -1,7 +1,7 @@ import React from "react"; const HeaderContentFooterGrid = ({ children }: { children: React.ReactNode }) => ( -
{children}
+
{children}
); export default HeaderContentFooterGrid; diff --git a/app/components/InitialWelcome.tsx b/app/components/InitialWelcome.tsx index e6d71aa4f..310191929 100644 --- a/app/components/InitialWelcome.tsx +++ b/app/components/InitialWelcome.tsx @@ -11,12 +11,8 @@ export const InitialWelcome = ({ }) => { const [step, setStep] = useState(0); - const onSkip = () => { - setStep(0); - }; const navigateToPage = useNavigateToPage(); - - const welcomeSteps = [ + const welcomeStepsNewUser = [ { header: "Build Your Passport Score", backgroudIconSrc: "./assets/passportBackgroundLogo.svg", @@ -52,15 +48,15 @@ export const InitialWelcome = ({ }, }, { - header: hasPassports ? "Auto refresh" : "Get verified with one simple step", + header: "Get verified with one simple step", backgroudIconSrc: "./assets/passportBackgroundLogo.svg", stampIcon: "./assets/passport-flash.svg", body: (

- Verify your identity with just one click. Our system will check your ETH - account for activities that match our Stamp criteria. This quick verification is your first step into a - broader Web3 world, giving you immediate access to what you qualify for today. To keep up with our 90 day - default expiry period for Stamps, you can re-verify whenever you need. + Verify your identity with just one click. Our system will + check your ETH account for activities that match our Stamp criteria. This quick verification is your first + step into a broader Web3 world, giving you immediate access to what you qualify for today. To keep up with our + 90 day default expiry period for Stamps, you can re-verify whenever you need.

), stepsConfig: { @@ -69,15 +65,41 @@ export const InitialWelcome = ({ }, buttonsConfig: { skipButtonText: "Back", - onSkip: () => setStep(0), - displaySkipBtn: hasPassports ? false : true, + onSkip: () => setStep(1), + displaySkipBtn: true, onNext: () => onBoardFinished(), - nextButtonText: hasPassports ? "Get Started" : "Verify", - showSkipNextTime: hasPassports ? true : false, + nextButtonText: "Verify", + showSkipNextTime: false, }, }, ]; + const welcomeStepsReturningUser = [ + { + header: "Auto refresh", + backgroudIconSrc: "./assets/passportBackgroundLogo.svg", + stampIcon: "./assets/passport-flash.svg", + body: ( +

+ Verify your identity with just one click. Our system will + check your ETH account for activities that match our Stamp criteria. This quick verification is your first + step into a broader Web3 world, giving you immediate access to what you qualify for today. To keep up with our + 90 day default expiry period for Stamps, you can re-verify whenever you need. +

+ ), + buttonsConfig: { + skipButtonText: "Back", + onSkip: () => setStep(1), + displaySkipBtn: false, + onNext: () => onBoardFinished(), + nextButtonText: "Get Started", + showSkipNextTime: true, + }, + }, + ]; + + const welcomeSteps = hasPassports ? welcomeStepsReturningUser : welcomeStepsNewUser; + const content = welcomeSteps[step]; const body = content.body; diff --git a/app/components/WelcomeFooter.tsx b/app/components/WelcomeFooter.tsx new file mode 100644 index 000000000..0f6fcd289 --- /dev/null +++ b/app/components/WelcomeFooter.tsx @@ -0,0 +1,114 @@ +import React from "react"; + +const OptimismIcon = () => ( + + + + OP + + +); + +const LIcon = () => ( + + + + +); + +const CeramicIcon = () => ( + + + + + + +); + +const GitHubIcon = () => ( + + + +); + +const SyncIcon = () => ( + + + + + + + + + + +); + +const WelcomeFooter = ({ displayPrivacyPolicy }: { displayPrivacyPolicy: boolean }) => { + return ( + + ); +}; + +export default WelcomeFooter; diff --git a/app/components/WelcomeWrapper.tsx b/app/components/WelcomeWrapper.tsx index 69c5bbb25..1e2cfdb19 100644 --- a/app/components/WelcomeWrapper.tsx +++ b/app/components/WelcomeWrapper.tsx @@ -56,12 +56,12 @@ const PlatformCard = ({}) => { export const WelcomeWrapper = ({ content, children }: WelcomeWrapperProps) => { return ( -
-
+
+
-
+
{content.header}
-
+
{content.subHeaderIconSrc ? ( Subheader Icon ) : null} @@ -70,13 +70,13 @@ export const WelcomeWrapper = ({ content, children }: WelcomeWrapperProps) => {
{/* Extra row span is for spacing */} -
+
Background Icon {content.stampIcon ? ( - Stamp + Stamp ) : null} {content.scoreIcon ? ( - Score + Score ) : null} {content.displayPlatformCard ? (
@@ -91,10 +91,11 @@ export const WelcomeWrapper = ({ content, children }: WelcomeWrapperProps) => {
+ {content.stepsConfig && ( )}
diff --git a/app/pages/Home.tsx b/app/pages/Home.tsx index 2a72189cb..33851dc70 100644 --- a/app/pages/Home.tsx +++ b/app/pages/Home.tsx @@ -14,6 +14,7 @@ import { useToast } from "@chakra-ui/react"; import { DoneToastContent } from "../components/DoneToastContent"; import { WebmVideo } from "../components/WebmVideo"; import { DEFAULT_CUSTOMIZATION_KEY, useCustomization, useNavigateToPage } from "../hooks/useCustomization"; +import WelcomeFooter from "../components/WelcomeFooter"; export default function Home() { const address = useWalletStore((state) => state.address); @@ -62,14 +63,9 @@ export default function Home() { }, [connectError]); return ( - -
- -
+ +
+
Icon @@ -96,6 +92,7 @@ export default function Home() { />
+ ); } diff --git a/app/pages/Welcome.tsx b/app/pages/Welcome.tsx index a6385218f..51e967a70 100644 --- a/app/pages/Welcome.tsx +++ b/app/pages/Welcome.tsx @@ -28,6 +28,7 @@ import BodyWrapper from "../components/BodyWrapper"; import { useDatastoreConnectionContext } from "../context/datastoreConnectionContext"; import { useNavigateToPage } from "../hooks/useCustomization"; import { useOneClickVerification } from "../hooks/useOneClickVerification"; +import WelcomeFooter from "../components/WelcomeFooter"; const MIN_DELAY = 50; const MAX_DELAY = 800; @@ -77,7 +78,7 @@ export default function Welcome() { ]; return ( - +
@@ -99,6 +100,7 @@ export default function Welcome() { )} + 0) || true} /> );