User Account Handling with Telegram Integration: Code example with Splash modal

Author: Nico Vincent

Diff for: app/AccountModal.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface AccountModalProps {
+  onResponse: (hasAccount: boolean) => void;
+}
+
+const AccountModal: React.FC<AccountModalProps> = ({ onResponse }) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-4 max-w-sm w-full">
+        <h2 className="text-2xl font-bold mb-4 text-gray-800">Account Check</h2>
+        <p className="mb-6 text-gray-600">
+          Do you have an account on <span className="font-semibold">XYZ</span>?
+        </p>
+        <div className="flex justify-center space-x-4">
+          <button
+            onClick={() => onResponse(false)}
+            className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 transition-colors"
+          >
+            No
+          </button>
+          <button
+            onClick={() => onResponse(true)}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Yes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccountModal;

Diff for: app/page.tsx

@@ -7,27 +7,54 @@ import {
 } from "../lib/dynamic";
 
 import Spinner from "./Spinner";
+import AccountModal from "./AccountModal";
 
 export default function Main() {
   const { sdkHasLoaded, user } = useDynamicContext();
-  const { telegramSignIn } = useTelegramLogin();
+  const { telegramSignIn, isAuthWithTelegram } = useTelegramLogin();
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [showModal, setShowModal] = useState(false);
 
   useEffect(() => {
     if (!sdkHasLoaded) return;
 
-    const signIn = async () => {
-      if (!user) {
-        await telegramSignIn({ forceCreateUser: true });
+    const checkTelegramConnection = async () => {
+      setIsLoading(true);
+      const isLinkedWithTelegram = await isAuthWithTelegram();
+
+      if (isLinkedWithTelegram) {
+        // Auto login if Telegram is connected
+        await telegramSignIn();
+      } else {
+        // Show modal splash page
+        setShowModal(true);
       }
       setIsLoading(false);
     };
 
-    signIn();
-  }, [sdkHasLoaded]);
+    if (user) {
+      setIsLoading(false);
+      return;
+    }
+    checkTelegramConnection();
+  }, [sdkHasLoaded, isLoading]);
+
+  const handleModalResponse = async (hasAccount: boolean) => {
+    setShowModal(false);
+    if (hasAccount) {
+      // Prompt developer's login
+      console.log("User already has an account on XYZ");
+    } else {
+      // Call signIn with autoCreate: true
+      console.log(
+        "User does not have an account on XYZ => Auto Create + Auto Login"
+      );
+      await telegramSignIn({ forceCreateUser: true });
+    }
+  };
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center text-black" style={{backgroundColor: "#f9f9fb", backgroundImage: "url('/background-pattern.svg')", backgroundBlendMode: "overlay", backgroundRepeat: "repeat"}}>
+    <div className="min-h-screen flex flex-col items-center justify-center text-black bg-[#f9f9fb] bg-[url('/background-pattern.svg')] bg-repeat bg-blend-overlay">
       <div className="flex flex-col items-center justify-center text-center max-w-3xl px-4">
         <div className="pt-8">
           <div className="inline-flex items-center justify-center">
@@ -36,21 +63,37 @@ export default function Main() {
         </div>
 
         <div className="bg-white p-5 rounded-lg shadow-sm mb-7 mt-7 text-sm">
-          <h2 className="text-xl font-semibold mb-3">You got an auto-wallet!</h2>
+          {user && (
+            <h2 className="text-xl font-semibold mb-3">
+              You got an auto-wallet!
+            </h2>
+          )}
           <div className="flex justify-center py-4">
             {isLoading ? <Spinner /> : <DynamicWidget />}
+            {showModal && <AccountModal onResponse={handleModalResponse} />}
           </div>
           <p className="mb-3">
-            Zero clicks, one multi-chain wallet. We automatically created an embedded wallet for you.
+            Zero clicks, one multi-chain wallet. We automatically created an
+            embedded wallet for you.
           </p>
           <h3 className="text-lg font-semibold mb-2">How This works</h3>
           <ul className="list-disc list-inside mb-3 flex flex-col items-start">
             <li>We utilize the Telegram authentication token</li>
             <li>Token is verified and used to create the end user wallet</li>
-            <li>The same wallet is accessible on desktop and mobile platforms</li>
-            <li>If the end user logs in with Telegram later on your site, your wallet is still available</li>
+            <li>
+              The same wallet is accessible on desktop and mobile platforms
+            </li>
+            <li>
+              If the end user logs in with Telegram later on your site, your
+              wallet is still available
+            </li>
           </ul>
-          <a href="https://docs.dynamic.xyz/guides/integrations/telegram/telegram-auto-wallets" target="_blank" rel="noopener noreferrer" className="mt-3 inline-block bg-blue-600 text-white font-semibold py-1.5 px-3 rounded hover:bg-blue-700 transition duration-300 text-sm">
+          <a
+            href="https://docs.dynamic.xyz/guides/integrations/telegram/telegram-auto-wallets"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-3 inline-block bg-blue-600 text-white font-semibold py-1.5 px-3 rounded hover:bg-blue-700 transition duration-300 text-sm"
+          >
             Learn More in Our Docs
           </a>
         </div>