diff --git a/js/packages/react/src/components/States/InviteCodeState.tsx b/js/packages/react/src/components/States/InviteCodeState.tsx index abb69ec8..abdc53a9 100644 --- a/js/packages/react/src/components/States/InviteCodeState.tsx +++ b/js/packages/react/src/components/States/InviteCodeState.tsx @@ -1,5 +1,6 @@ import { useEffect, useState, type ReactElement } from "react"; import { __ } from "../../lang"; +import { useMedia } from "../../hooks/useMedia"; import { WorldcoinIcon } from "../Icons/WorldIcon"; import { LoadingIcon } from "../Icons/LoadingIcon"; import { QRCode } from "../../widget/QRCode"; @@ -26,7 +27,11 @@ export function InviteCodeState({ codeExpiresAt, isAwaitingUserConfirmation, }: InviteCodeStateProps): ReactElement { + const media = useMedia(); const now = useNowInSeconds(); + const inviteCode = connectorURI + ? new URL(connectorURI).searchParams.get("c") + : null; const secondsRemaining = codeExpiresAt !== null ? Math.max(0, codeExpiresAt - now) : null; @@ -46,32 +51,133 @@ export function InviteCodeState({
- {__("Scan with your phone to continue verifying")} + {media === "mobile" + ? __( + "You will be redirected to the app, please return to this page once you're done", + ) + : __("Scan with your phone to continue verifying")}
-{__("Connecting...")}
+{__("Please continue in app")}
+{__("Connecting...")}
-{__("Please continue in app")}
+ )} + ++ {__("Or enter this code in World App")} +
+
+ {inviteCode}
+
+