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({

{__("Connect your World ID")}

- {__("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")}

-
- {isAwaitingUserConfirmation && ( -
-
- + {/* Mobile: deep-link button */} +
+ + + {__("Open World App")} + +
+ + {/* Desktop: QR code */} +
+
+ {isAwaitingUserConfirmation && ( +
+
+ +
+
+

{__("Connecting...")}

+

{__("Please continue in app")}

+
-
-

{__("Connecting...")}

-

{__("Please continue in app")}

+ )} + +
+
+
+ {connectorURI ? : null} +
- )} +
+
+ {connectorURI && ( + + {__("Open Connector URL")} + + )} + + {inviteCode && (
-
-
- {connectorURI ? : null} -
+

+ {__("Or enter this code in World App")} +

+
+ + {inviteCode} + +
-
+ )} {secondsRemaining !== null && (