feat: disabled buttons, lift hooks

alchemyplatform · Dec 19, 2024 · 26bc147 · 26bc147
1 parent a517318
commit 26bc147
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 39 deletions.
diff --git a/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx b/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 import { useTheme } from "@/state/useTheme";
 import { AuthCard, useUser } from "@account-kit/react";
 import { EOAPostLogin } from "../shared/eoa-post-login/EOAPostLogin";
-import { MintCard } from "../shared/mint-card/MintCard";
+import { Wrapper7702 } from "../shared/7702/Wrapper";
 
 export function AuthCardWrapper({ className }: { className?: string }) {
   const theme = useTheme();
@@ -53,6 +53,6 @@ const RenderContent = () => {
       </div>
     );
   }
-
-  return <MintCard />;
+  return <Wrapper7702 />;
+  // return <MintCard />;
 };
diff --git a/examples/ui-demo/src/components/shared/7702/Button.tsx b/examples/ui-demo/src/components/shared/7702/Button.tsx
@@ -9,7 +9,7 @@ export const Button = ({
 >) => {
   return (
     <button
-      className={`border bg-bg-surface-default text-fg-primary rounded-lg px-3 text-sm font-semibold h-10 flex items-center justify-center text-center ${className}`}
+      className={`border bg-bg-surface-default text-fg-primary rounded-lg px-3 text-sm font-semibold h-10 flex items-center justify-center text-center disabled:bg-bg-surface-disabled disabled:text-fg-disabled ${className}`}
       {...rest}
     >
       {children}

diff --git a/examples/ui-demo/src/components/shared/7702/MintCard7702.tsx b/examples/ui-demo/src/components/shared/7702/MintCard7702.tsx
@@ -12,12 +12,14 @@ export type MintStatus = {
 
 export const MintCard7702 = ({
   isLoading,
+  isDisabled,
   status,
   nftTransfered,
   handleCollectNFT,
   uri,
 }: {
   isLoading: boolean;
+  isDisabled?: boolean;
   status: MintStatus;
   nftTransfered: boolean;
   handleCollectNFT: () => void;
@@ -52,38 +54,41 @@ export const MintCard7702 = ({
         <h3 className="text-fg-primary text-xl font-semibold">
           Gasless transactions
         </h3>
-        <p className="text-fg-primary text-sm">
-          Sponsor gas and sign in the background for a one-click transaction
-          experience.
-        </p>
       </div>
       {!nftTransfered ? (
-        <div className="flex justify-between items-center">
-          <p className="text-fg-secondary text-base">Gas Fee</p>
-          <p>
-            <span className="line-through mr-1 text-base text-fg-primary align-top">
-              $0.02
-            </span>
-            <span
-              className="text-base align-top"
-              style={{
-                background: "linear-gradient(132deg, #FF9C27 0%, #FD48CE 100%)",
-                WebkitBackgroundClip: "text",
-                backgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-              }}
-            >
-              Free
-            </span>
+        <>
+          <p className="text-fg-primary text-sm">
+            Sponsor gas and sign in the background for a one-click transaction
+            experience.
           </p>
-        </div>
+          <div className="flex justify-between items-center">
+            <p className="text-fg-secondary text-base">Gas Fee</p>
+            <p>
+              <span className="line-through mr-1 text-base text-fg-primary align-top">
+                $0.02
+              </span>
+              <span
+                className="text-base align-top"
+                style={{
+                  background:
+                    "linear-gradient(132deg, #FF9C27 0%, #FD48CE 100%)",
+                  WebkitBackgroundClip: "text",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                Free
+              </span>
+            </p>
+          </div>
+        </>
       ) : (
         <MintStages status={status} />
       )}
       <Button
         className="w-full mt-auto"
         onClick={handleCollectNFT}
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
       >
         {!nftTransfered
           ? "Collect NFT"

diff --git a/examples/ui-demo/src/components/shared/7702/Transactions.tsx b/examples/ui-demo/src/components/shared/7702/Transactions.tsx
@@ -27,7 +27,7 @@ const Transaction = ({
 }: TransactionType & { className?: string }) => {
   const getText = () => {
     if (state === "initial") {
-      return "";
+      return "...";
     }
     if (state === "initiating") {
       return "Initiating buy...";

diff --git a/examples/ui-demo/src/components/shared/7702/TransactionsCard.tsx b/examples/ui-demo/src/components/shared/7702/TransactionsCard.tsx
@@ -6,16 +6,18 @@ import { TransactionType } from "./useTransaction";
 
 export const TransactionsCard = ({
   isLoading,
+  isDisabled,
   transactions,
   handleTransactions,
 }: {
   isLoading: boolean;
+  isDisabled?: boolean;
   transactions: TransactionType[];
   handleTransactions: () => void;
 }) => {
-  const [isFiring, setIsFiring] = useState(false);
+  const [hasClicked, setHasClicked] = useState(false);
   const handleClick = () => {
-    setIsFiring(true);
+    setHasClicked(true);
     handleTransactions();
   };
   return (
@@ -37,7 +39,7 @@ export const TransactionsCard = ({
       <h3 className="text-fg-primary text-xl font-semibold">
         Recurring transactions
       </h3>
-      {!isFiring ? (
+      {!hasClicked ? (
         <p className="text-fg-primary text-sm">
           Set up a dollar-cost average order by creating a session key with
           permission to buy ETH every 10 seconds.
@@ -46,8 +48,16 @@ export const TransactionsCard = ({
         <Transactions transactions={transactions} />
       )}
 
-      <Button className="mt-auto" onClick={handleClick} disabled={isLoading}>
-        Create session key
+      <Button
+        className="mt-auto"
+        onClick={handleClick}
+        disabled={isLoading || isDisabled}
+      >
+        {!hasClicked
+          ? "Create session key"
+          : isLoading
+          ? "Creating session key..."
+          : "Restart session key"}
       </Button>
     </div>
   );

diff --git a/examples/ui-demo/src/components/shared/7702/Wrapper.tsx b/examples/ui-demo/src/components/shared/7702/Wrapper.tsx
@@ -20,12 +20,14 @@ export const Wrapper7702 = () => {
     <div className="flex gap-6">
       <MintCard7702
         isLoading={isLoadingMint || isLoadingTransactions}
+        isDisabled={isLoadingTransactions}
         status={status}
         nftTransfered={nftTransfered}
         handleCollectNFT={handleCollectNFT}
         uri={uri}
       />
       <TransactionsCard
+        isDisabled={isLoadingMint}
         isLoading={isLoadingTransactions}
         transactions={transactions}
         handleTransactions={handleTransactions}

diff --git a/examples/ui-demo/src/components/shared/7702/useTransaction.ts b/examples/ui-demo/src/components/shared/7702/useTransaction.ts
@@ -11,17 +11,17 @@ const initialState: TransactionType[] = [
   {
     state: "initial",
     description: "Bought 1 ETH for 4,000 USDC",
-    externalLink: "",
+    externalLink: "www.alchemy.com",
   },
   {
     state: "initial",
     description: "Bought 1 ETH for 3,500 USDC",
-    externalLink: "",
+    externalLink: "www.alchemy.com",
   },
   {
     state: "initial",
     description: "Bought 1 ETH for 4,200 USDC",
-    externalLink: "",
+    externalLink: "www.alchemy.com",
   },
 ];
 
@@ -56,17 +56,17 @@ export const useTransactions = () => {
       {
         state: "initial",
         description: "Bought 1 ETH for 4,000 USDC",
-        externalLink: "",
+        externalLink: "www.alchemy.com",
       },
       {
         state: "initial",
         description: "Bought 1 ETH for 3,500 USDC",
-        externalLink: "",
+        externalLink: "www.alchemy.com",
       },
       {
         state: "initial",
         description: "Bought 1 ETH for 4,200 USDC",
-        externalLink: "",
+        externalLink: "www.alchemy.com",
       },
     ]);
     for (let i = 0; i < transactions.length; i++) {