fix: demo page update

Author: 0xBunzy

src/templates/next/app/page.txt

@@ -1,23 +1,24 @@
 /** @format */
 "use client";
-import { UNISAT, useLaserEyes } from "@omnisat/lasereyes";
+import { useLaserEyes } from "@omnisat/lasereyes";
+import { ConnectWallet } from "@/components/ConnectWallet";
 
 export default function Home() {
-  const { connect, address } = useLaserEyes();
+  const { address } = useLaserEyes();
 
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <div className="flex flex-col items-center gap-8">
-        <h1 className="text-4xl font-bold text-center">
-          Welcome to LaserEyes Template
-        </h1>
-        <button
-          onClick={() => connect(UNISAT)}
-          className="px-6 py-3 text-lg font-medium text-white bg-black rounded-lg hover:bg-gray-800 transition-colors"
-        >
-         {address ? address : "Connect Wallet"}
-        </button>
+    <div className="min-h-screen flex flex-col items-center justify-center gap-8 p-8">
+      <h1 className="text-4xl font-bold text-center">
+        Welcome to LaserEyes Template
+      </h1>
+      <div className="flex flex-col items-center gap-4">
+        <ConnectWallet />
+        {address && (
+          <div className="flex flex-col gap-2">
+            <p className="text-lg text-center">Connected Address: {address}</p>
+          </div>
+        )}
       </div>
     </div>
   );
-}
+}

src/templates/next/components/ConnectWallet.txt

@@ -1,26 +1,30 @@
 /** @format */
 
+"use client";
+
 import { useLaserEyes, UNISAT } from "@omnisat/lasereyes";
 import { Button } from "@/components/ui/button";
 
 export function ConnectWallet() {
-  const { connect, disconnect, connected, address } = useLaserEyes();
+  const { connect, disconnect, connected, hasUnisat } = useLaserEyes();
 
-  const handleClick = () => {
-    if (connected) {
-      disconnect();
-    } else {
-      connect(UNISAT);
+  const handleConnect = async () => {
+    if (!hasUnisat) {
+      console.error("Please install Unisat wallet");
+      return;
     }
+    await connect(UNISAT);
   };
 
   return (
-    <Button onClick={handleClick} variant="outline" size="lg">
-      {!connected ? (
-        "Connect Wallet"
-      ) : (
-        <span className="truncate max-w-[200px]">{address}</span>
-      )}
-    </Button>
+    <div className="flex flex-col items-center gap-4">
+      <Button
+        onClick={connected ? disconnect : handleConnect}
+        variant="outline"
+        size="lg"
+      >
+        {connected ? "Disconnect" : "Connect Wallet"}
+      </Button>
+    </div>
   );
 }