update login permissions UI and styling (#6128)

jnsdls · web-flow · commit 7217e774b20f · 2025-01-30T17:26:07.000-08:00
diff --git a/apps/login/src/app/layout.tsx b/apps/login/src/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-full w-full">
+    <html lang="en" className="h-full w-full bg-black text-white">
       <body
         className={`${sansFont.variable} ${monoFont.variable} h-full w-full font-sans antialiased`}
       >
diff --git a/apps/login/src/app/page.tsx b/apps/login/src/app/page.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { createThirdwebClient, getContract, sendTransaction } from "thirdweb";
+import { createThirdwebClient, getContract } from "thirdweb";
 import { baseSepolia } from "thirdweb/chains";
 import { addSessionKey, isActiveSigner } from "thirdweb/extensions/erc4337";
-import { ConnectEmbed, useActiveAccount } from "thirdweb/react";
+import {
+  ConnectEmbed,
+  TransactionButton,
+  useActiveAccount,
+} from "thirdweb/react";
 import { isContractDeployed } from "thirdweb/utils";
 
 const sesionKeySignerAddress = "0x6f700ba0258886411D2536399624EAa7158d1742";
@@ -16,41 +20,6 @@ const client = createThirdwebClient({
 export default function Page() {
   const account = useActiveAccount();
 
-  const onAccept = async () => {
-    if (!account) {
-      throw new Error("No account found");
-    }
-    const accountContract = getContract({
-      address: account.address,
-      // hard coded for now
-      chain: baseSepolia,
-      client,
-    });
-    let hasSesionKey = false;
-    // check if already added
-    const accountDeployed = await isContractDeployed(accountContract);
-    if (accountDeployed) {
-      hasSesionKey = await isActiveSigner({
-        contract: accountContract,
-        signer: sesionKeySignerAddress,
-      });
-    }
-    // if not added, send tx to add the session key
-    if (!hasSesionKey) {
-      const transaction = addSessionKey({
-        account,
-        contract: accountContract,
-        sessionKeyAddress: sesionKeySignerAddress,
-        // hard coded for now
-        permissions: { approvedTargets: "*" },
-      });
-      await sendTransaction({
-        account,
-        transaction,
-      });
-    }
-  };
-
   const searchParams = useSearchParams();
   const code = searchParams.get("code");
   const clientId = searchParams.get("clientId");
@@ -61,32 +30,82 @@ export default function Page() {
   return (
     <div className="grid h-full w-full place-items-center">
       {account ? (
-        <div>
-          <h1>Permissions Screen</h1>
+        <div className="flex flex-col gap-4 rounded-lg border border-gray-800 p-12">
+          <h1 className="font-bold text-3xl">Grant Permissions</h1>
+          <p>
+            <strong>App.xyz</strong> is asking you to grant it the following
+            permissions:
+          </p>
           <ul>
-            <li>perm 1</li>
-            <li>perm 2</li>
-            <li>perm 3</li>
+            <li>✅ Receive your identity information.</li>
+            <li>
+              ✅ Interact with <strong>all</strong> contracts on{" "}
+              <strong>Base Sepolia</strong>
+            </li>
+            <li>
+              ✅ Spend <strong>all</strong> your funds on{" "}
+              <strong>Base Sepolia</strong>
+            </li>
           </ul>
-          <button
-            type="button"
-            onClick={() => {
-              onAccept()
-                .then(() => {
-                  // redirect back to the app
-                  window.location.href = `${redirect}${encodeHash(
-                    account.address,
-                    sesionKeySignerAddress,
-                    code || "",
-                  )}`;
-                })
-                .catch((e) => {
-                  console.error("failed", e);
+          <p>
+            By approving below you will grant <strong>App.xyz</strong> these
+            permissions until <strong>02/02/2025</strong>.
+          </p>
+          <TransactionButton
+            transaction={async () => {
+              if (!account) {
+                throw new Error("No account found");
+              }
+              const accountContract = getContract({
+                address: account.address,
+                // hard coded for now
+                chain: baseSepolia,
+                client,
+              });
+              let hasSesionKey = false;
+              // check if already added
+              const accountDeployed = await isContractDeployed(accountContract);
+              if (accountDeployed) {
+                hasSesionKey = await isActiveSigner({
+                  contract: accountContract,
+                  signer: sesionKeySignerAddress,
+                });
+              }
+              // if not added, send tx to add the session key
+              if (!hasSesionKey) {
+                return addSessionKey({
+                  account,
+                  contract: accountContract,
+                  sessionKeyAddress: sesionKeySignerAddress,
+                  // hard coded for now
+                  permissions: { approvedTargets: "*" },
                 });
+              }
+              throw "already-added";
+            }}
+            onError={(e) => {
+              if (typeof e === "string" && e === "already-added") {
+                // redirect back to the app
+                window.location.href = `${redirect}${encodeHash(
+                  account.address,
+                  sesionKeySignerAddress,
+                  code || "",
+                )}`;
+              } else {
+                console.error(e);
+              }
+            }}
+            onTransactionConfirmed={() => {
+              // redirect back to the app
+              window.location.href = `${redirect}${encodeHash(
+                account.address,
+                sesionKeySignerAddress,
+                code || "",
+              )}`;
             }}
           >
-            Accept
-          </button>
+            Approve
+          </TransactionButton>
         </div>
       ) : (
         <ConnectEmbed

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export default function RootLayout({`
`27`	`27`	`children: React.ReactNode;`
`28`	`28`	`}>) {`
`29`	`29`	`return (`
`30`		`- <html lang="en" className="h-full w-full">`
	`30`	`+ <html lang="en" className="h-full w-full bg-black text-white">`
`31`	`31`	`<body`
`32`	`32`	className={`${sansFont.variable} ${monoFont.variable} h-full w-full font-sans antialiased`}
`33`	`33`	`>`