add warning login modal

Author: el-ll

turnkey/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { ReactQueryProvider } from "@/features/react-query";
 import { TurnkeyProvider } from "@turnkey/sdk-react";
 import type { Metadata } from "next";
 import "./globals.css";
+import { WarningDialogProvider } from "@/features/warning-dialog";
 
 export const dynamic = "force-dynamic";
 
@@ -25,7 +26,9 @@ export default function RootLayout({
             defaultOrganizationId: process.env.PUBLIC_TURNKEY_ORGANIZATION_ID!,
           }}
         >
-          <ReactQueryProvider>{children}</ReactQueryProvider>
+          <ReactQueryProvider>
+            <WarningDialogProvider>{children}</WarningDialogProvider>
+          </ReactQueryProvider>
         </TurnkeyProvider>
       </body>
     </html>

turnkey/src/app/page.tsx

@@ -6,8 +6,10 @@ import { OneBalanceAccountRequired } from "@/features/onebalance-account/onebala
 import { Swap } from "@/features/swap/swap-ui";
 import { TransactionHistory } from "@/features/transaction-history/transaction-history-ui";
 import { Transfer } from "@/features/transfer/transfer-ui";
+import { ClientOnly } from "@/features/ui/client-only";
 import { Header } from "@/features/ui/header";
 import { Login } from "@/features/ui/login";
+import { WarningDialog } from "@/features/warning-dialog";
 import * as Tabs from "@radix-ui/react-tabs";
 import { Toaster } from "sonner";
 
@@ -52,6 +54,9 @@ export default function Home() {
         </main>
       </Tabs.Root>
       <Toaster />
+      <ClientOnly>
+        <WarningDialog />
+      </ClientOnly>
     </EnvironmentProvider>
   );
 }

turnkey/src/features/turnkey/use-turnkey-login.ts

@@ -4,9 +4,12 @@ import { usePersistedBTCWallet } from "../onebalance-account/use-persisted-btc-w
 import { useMutation } from "@tanstack/react-query";
 import { useTurnkey } from "@turnkey/sdk-react";
 import { queryClient } from "../react-query";
+import { useContext, useState } from "react";
+import { WarningDialogContext } from "../warning-dialog";
 
 export const useTurnkeyLogin = () => {
   const { passkeyClient } = useTurnkey();
+  const { setIsWarningModalOpen } = useContext(WarningDialogContext);
   const {
     evm: [previousEvmOrgId, setEvmOrgId],
     btc: [, setBtcOrgId],
@@ -30,6 +33,7 @@ export const useTurnkeyLogin = () => {
         setBtcOrgId("null");
       }
       toast.dismiss();
+      setIsWarningModalOpen(true);
     },
   });
 

turnkey/src/features/warning-dialog.tsx

@@ -0,0 +1,60 @@
+"use client";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { createContext, PropsWithChildren, useContext, useState } from "react";
+
+export const WarningDialogContext = createContext<{
+  isWarningModalOpen: boolean;
+  setIsWarningModalOpen: (open: boolean) => void;
+}>(null!);
+
+export const WarningDialogProvider = ({ children }: PropsWithChildren) => {
+  const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
+
+  return (
+    <WarningDialogContext.Provider
+      value={{ isWarningModalOpen, setIsWarningModalOpen }}
+    >
+      {children}
+    </WarningDialogContext.Provider>
+  );
+};
+
+export const WarningDialog = () => {
+  const { isWarningModalOpen, setIsWarningModalOpen } =
+    useContext(WarningDialogContext);
+
+  return (
+    <Dialog open={isWarningModalOpen} onOpenChange={setIsWarningModalOpen}>
+      <DialogTrigger />
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Warning</DialogTitle>
+
+          <DialogDescription className="text-base flex flex-col gap-2 pt-4">
+            <span>
+              This is a demo app, please use with care and do not deposit more
+              than $500.
+            </span>
+            <span>Transactions are capped at $500.</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <DialogClose className="h-14 px-10 text-base bg-brand-orange rounded-full text-black">
+            I understand
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};