✨ connect and disconnect

Author: cruzdanilo

index.html

@@ -44,12 +44,43 @@
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* elevate above page */
         outline: 1px solid rgba(0, 0, 0, 0.08); /* subtle border in light mode */
         z-index: 1000; /* ensure it stays on top */
+        transform: translateY(0);
+        visibility: visible;
+        pointer-events: auto;
+        transition:
+          transform 300ms ease,
+          visibility 0s;
+      }
+      iframe.closed {
+        transform: translateY(calc(100% + 16px));
+        visibility: hidden;
+        pointer-events: none;
+        transition:
+          transform 300ms ease,
+          visibility 0s linear 300ms;
+      }
+      button {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 10px 12px;
+        border-radius: 8px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        background: #ffffffcc;
+        color: #111;
+        cursor: pointer;
       }
       @media (prefers-color-scheme: dark) {
         iframe {
           outline-color: rgba(255, 255, 255, 0.08); /* subtle border in dark mode */
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
         }
+        button {
+          border-color: rgba(255, 255, 255, 0.12);
+          background: #111111cc;
+          color: #fff;
+        }
       }
       /* #endregion */
     </style>

src/App.tsx

@@ -1,12 +1,15 @@
 import { SequenceConnect, useOpenConnectModal } from "@0xsequence/connect";
 import { getAccount, getChainId, signMessage, switchChain } from "@wagmi/core";
 import { useLayoutEffect, useRef } from "react";
+import { useAccount, useDisconnect } from "wagmi";
 
 import hostExaApp from "./hostExaApp"; // host SDK: expose APIs to the iframe
 import { connectConfig, wagmiConfig } from "./sequence";
 
 function App() {
+  const { disconnect } = useDisconnect();
   const { setOpenConnectModal } = useOpenConnectModal();
+  const { isConnected, isConnecting } = useAccount();
   const exaApp = useRef<HTMLIFrameElement>(null); // hold iframe element reference
 
   useLayoutEffect(() => {
@@ -39,22 +42,29 @@ function App() {
             throw new Error(`${method} not supported`);
         }
       },
-      ready: () => {
-        if (wagmiConfig.state.status !== "connected") setOpenConnectModal(true);
-      },
     });
 
     return () => host.cleanup(); // teardown host SDK on unmount
   }, [setOpenConnectModal]); // run once on mount
 
   return (
-    <iframe
-      ref={exaApp}
-      title="Exa App"
-      src="https://sandbox.exactly.app" // sandbox origin; replace with https://web.exactly.app in production
-      allow="clipboard-read; clipboard-write; camera" // address UX: copy/paste addresses; scan address QR codes
-      loading="eager" // load immediately; primary content
-    />
+    <>
+      <iframe
+        ref={exaApp}
+        title="Exa App"
+        src="https://sandbox.exactly.app" // sandbox origin; replace with https://web.exactly.app in production
+        allow="clipboard-read; clipboard-write; camera" // address UX: copy/paste addresses; scan address QR codes
+        loading="eager" // load immediately; primary content
+        className={isConnected ? undefined : "closed"}
+      />
+      <button
+        type="button"
+        disabled={isConnecting}
+        onClick={() => (isConnected ? disconnect() : setOpenConnectModal(true))}
+      >
+        {isConnected ? "Sign Out" : "Sign In"}
+      </button>
+    </>
   );
 }