moved emojis

web/src/ui/IframeShell.tsx

@@ -91,18 +91,16 @@
 function WalletUI({
   authQueue,
   setAuthQueue,
-  verificationHash,
 }: {
   authQueue: AuthorizationRequest[];
   setAuthQueue: React.Dispatch<React.SetStateAction<AuthorizationRequest[]>>;
-  verificationHash: string | null;
 }) {
   const { currentNetwork } = useNetwork();
   const chainInfo = networkToChainInfo(currentNetwork);
 
   const walletAPI = useMemo(
     () => WalletApi.create(chainInfo.chainId, chainInfo.version),
     [currentNetwork.id],
   );
   const onRefreshAccounts = useCallback(async () => {
     const normalizedChainInfo = {
@@ -118,7 +116,7 @@
   );
   const currentAuth = authQueue[0] ?? null;
 
   const handleAuthApprove = (itemResponses: Record<string, any>) => {
     if (currentAuth) {
       walletAPI.resolveAuthorization({
         id: currentAuth.id,
@@ -132,7 +130,7 @@
 
   const handleAuthDeny = () => {
     if (currentAuth) {
       const itemResponses: Record<string, any> = {};
       for (const item of currentAuth.items) {
         itemResponses[item.id] = {
           id: item.id,
@@ -154,10 +152,6 @@
     <WalletContext.Provider value={walletContext}>
       <CssBaseline />
       <App />
-      {/* Overlay: emoji verification during key exchange */}
-      <Dialog open={!!verificationHash} fullScreen>
-        <EmojiVerification verificationHash={verificationHash ?? ""} />
-      </Dialog>
       {/* Overlay: dApp authorization requests */}
       {currentAuth && (
         <AuthorizationDialog
@@ -410,8 +404,8 @@
         let networkLocked = false;
         return async (appId: string, chainInfo: ChainInfo) => {
           clearVerificationHashRef.current();
           const rawChainId = (chainInfo as any).chainId;
           const rawVersion = (chainInfo as any).version;
           const chainId = rawChainId instanceof Fr ? rawChainId : Fr.fromString(String(rawChainId));
           const version = rawVersion instanceof Fr ? rawVersion : Fr.fromString(String(rawVersion));
 
@@ -485,9 +479,26 @@
   }, []);
 
   // ─── Render: centralized gate sequence ───
+  //
+  // The emoji-verification dialog is rendered alongside every gate so it
+  // can appear during key exchange regardless of which gate is active —
+  // including the pre-network-lock blank screen. Without this, the iframe
+  // renders empty while the dApp waits for the user to click an emoji that
+  // is never shown.
+
+  const emojiOverlay = (
+    <Dialog open={!!verificationHash} fullScreen>
+      <EmojiVerification verificationHash={verificationHash ?? ""} />
+    </Dialog>
+  );
 
   if (gate === "checking") {
-    return <CssBaseline />;
+    return (
+      <>
+        <CssBaseline />
+        {emojiOverlay}
+      </>
+    );
   }
 
   if (gate === "needs-storage" || gate === "needs-visit") {
@@ -499,6 +510,7 @@
           onGrant={handleRequestStorageAccess}
           onRetry={handleRetryClick}
         />
+        {emojiOverlay}
       </>
     );
   }
@@ -508,6 +520,7 @@
       <>
         <CssBaseline />
         <NoCookieGate onRetry={handleNoCookieRetry} />
+        {emojiOverlay}
       </>
     );
   }
@@ -517,6 +530,7 @@
       <>
         <CssBaseline />
         <PinDialog mode="enter" error={pinError} onSubmit={handlePinSubmit} />
+        {emojiOverlay}
       </>
     );
   }
@@ -527,15 +541,19 @@
   // failed requests and — if the default is unreachable — wedging the
   // onboarding "registering contracts" step.
   if (!networkLocked) {
-    return <CssBaseline />;
+    return (
+      <>
+        <CssBaseline />
+        {emojiOverlay}
+      </>
+    );
   }
 
   return (
-    <WalletUI
-      authQueue={authQueue}
-      setAuthQueue={setAuthQueue}
-      verificationHash={verificationHash}
-    />
+    <>
+      <WalletUI authQueue={authQueue} setAuthQueue={setAuthQueue} />
+      {emojiOverlay}
+    </>
   );
 }