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 ? (
) : null}
@@ -70,13 +70,13 @@ export const WelcomeWrapper = ({ content, children }: WelcomeWrapperProps) => {
{/* Extra row span is for spacing */}
-
+
{content.stampIcon ? (
-
+
) : null}
{content.scoreIcon ? (
-
+
) : 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 (
-
-
-
-
+
+
+
@@ -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} />
);