Merge branch 'caleb/wallet-type-switch' into rob/7702

alchemyplatform · Dec 19, 2024 · dc2d88b · dc2d88b
2 parents 26bc147 + c81276e
commit dc2d88b
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 0 deletions.
diff --git a/account-kit/react/src/components/auth/hooks/useTransaction.ts b/account-kit/react/src/components/auth/hooks/useTransaction.ts
@@ -0,0 +1,84 @@
+import { useState } from "react";
+
+export enum TransactionStatus {
+  none = "none",
+  pending = "pending",
+  success = "success",
+  error = "error",
+}
+
+export interface Transaction {
+  title: string;
+  status: TransactionStatus;
+}
+
+export interface TransactionConfig {
+  stepsNumber?: number;
+}
+
+export interface UseTransaction {
+  makeRequest: () => void;
+  result: Transaction[];
+  reset: () => void;
+}
+
+const randomDelay = (min = 2, max = 6) => {
+  const delay = Math.floor(Math.random() * (max - min + 1)) + min;
+  return delay * 1000;
+};
+
+export const useTransaction = (
+  { stepsNumber = 3 }: TransactionConfig = { stepsNumber: 3 }
+): UseTransaction => {
+  const baseRequest = Array.from({ length: stepsNumber }).map(
+    (_item, index) => ({
+      title: `Transaction ${index + 1}`,
+      status: TransactionStatus.none,
+    })
+  );
+
+  const [result, setResult] = useState(baseRequest);
+
+  const reset = () => {
+    setResult(baseRequest);
+  };
+
+  const simulateApiCall = async (
+    transaction: Transaction
+  ): Promise<Transaction> => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({ ...transaction, status: TransactionStatus.success });
+      }, randomDelay());
+    });
+  };
+
+  const makeRequest = async () => {
+    for (let i = 0; i < result.length; i++) {
+      const response = await simulateApiCall(result[i]);
+
+      setResult((prevState) => {
+        const newState = [...prevState];
+        newState[i] = response;
+        return newState;
+      });
+    }
+  };
+
+  const startRequest = () => {
+    setResult((prevState) => {
+      return [...prevState].map((item) => ({
+        ...item,
+        status: TransactionStatus.pending,
+      }));
+    });
+
+    makeRequest();
+  };
+
+  return {
+    makeRequest: startRequest,
+    result,
+    reset,
+  };
+};
diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
@@ -20,6 +20,7 @@ import { AuthCardWrapper } from "../components/preview/AuthCardWrapper";
 import { CodePreview } from "../components/preview/CodePreview";
 import { CodePreviewSwitch } from "../components/shared/CodePreviewSwitch";
 import { TopNav } from "../components/topnav/TopNav";
+import { Configuration } from "@/components/configuration/Configuration";
 
 const publicSans = Public_Sans({
   subsets: ["latin"],
@@ -47,6 +48,7 @@ export default function Home() {
       >
         <div className="hidden lg:flex flex-1 gap-6 overflow-hidden">
           <div className=" flex-col w-[272px] lg:w-[392px] bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none gap-10">
+            <Configuration />
             <Authentication />
             <Styling />
           </div>

diff --git a/examples/ui-demo/src/components/configuration/Configuration.tsx b/examples/ui-demo/src/components/configuration/Configuration.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+import { SettingsIcon } from "../icons/settings";
+// import { HelpTooltip } from "../shared/HelpTooltip";
+import { WalletTypeSwitch } from "../shared/WalletTypeSwitch";
+import ExternalLink from "../shared/ExternalLink";
+
+enum WalletTypes {
+  smart = "smart",
+  smart7702 = "7702",
+}
+export const Configuration = ({ className }: { className?: string }) => {
+  const [walletType, setWalletType] = useState(WalletTypes.smart);
+
+  const onSwitchWalletType = () => {
+    setWalletType(
+      walletType === WalletTypes.smart
+        ? WalletTypes.smart7702
+        : WalletTypes.smart
+    );
+  };
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="flex flex-row gap-2 items-center pb-5">
+        <SettingsIcon />
+        <span className="font-semibold">Configuration</span>
+      </div>
+      <div className="flex flex-row items-center gap-2 pb-2">
+        <h4 className="font-normal text-sm text-secondary-foreground">
+          Embedded Wallet Type{" "}
+        </h4>
+        {/* <HelpTooltip text="An account powered by a smart contract to enable more features. Not an EOA. Recommended for new wallets." /> */}
+      </div>
+      <WalletTypeSwitch
+        id="theme-switch"
+        checked={walletType === WalletTypes.smart7702}
+        onCheckedChange={onSwitchWalletType}
+      />
+      <p className="text-active text-xs font-medium pt-3">
+        On sign up, create a smart account or create an EOA that delegates to a
+        smart account.{" "}
+        <ExternalLink className="text-[#363FF9]" href="https://google.com">
+          Learn more.
+        </ExternalLink>
+      </p>
+      <div className="w-full border-b border-border pb-5 mb-8" />
+    </div>
+  );
+};
diff --git a/examples/ui-demo/src/components/icons/settings.tsx b/examples/ui-demo/src/components/icons/settings.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from "react";
+
+export const SettingsIcon = ({
+  stroke = "currentColor",
+  ...props
+}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.29652 3.54606L8.30602 2.09533C8.49297 1.82667 8.79955 1.6665 9.12685 1.6665H10.4573C10.7834 1.6665 11.089 1.82549 11.2762 2.0925L12.2745 3.51677M7.29652 3.54606C7.00748 3.95843 6.52702 4.16049 6.01707 4.12447M7.29652 3.54606C7.00607 3.95744 6.52702 4.16217 6.01707 4.12447M6.01707 4.12447L4.22798 4.01215C3.90714 3.99201 3.59617 4.12734 3.39225 4.37587L2.55379 5.39776C2.33759 5.66125 2.27048 6.01672 2.37575 6.3409L2.89413 7.93737M2.89413 7.93737C2.96823 8.17765 2.97771 8.43506 2.92468 8.67817M2.89413 7.93737C2.96929 8.17722 2.97842 8.43412 2.92433 8.68066M2.92468 8.67817C2.87095 8.91841 2.75575 9.14525 2.58471 9.32894M2.92468 8.67817L2.92433 8.68066M2.58471 9.32894L1.40725 10.5953C1.17885 10.841 1.08882 11.1848 1.1675 11.5108L1.46105 12.7273C1.53947 13.0523 1.77512 13.3166 2.08902 13.4316L3.70682 14.0246C3.94424 14.1164 4.14934 14.2658 4.30458 14.4539M2.58471 9.32894C2.7568 9.14675 2.87095 8.92064 2.92433 8.68066M4.30458 14.4539C4.45876 14.6426 4.56377 14.8703 4.60451 15.1168M4.30458 14.4539C4.46016 14.6426 4.56553 14.8697 4.60451 15.1168M4.30458 14.4539L4.30212 14.4512C4.29194 14.4389 4.28105 14.426 4.27051 14.414M4.60451 15.1168L4.88004 16.8093C4.9333 17.1364 5.14526 17.416 5.44593 17.5556L6.64518 18.1124C6.93625 18.2475 7.27449 18.2348 7.55454 18.0781L9.07504 17.2274M9.07504 17.2274C9.29595 17.1033 9.5425 17.0411 9.78905 17.0408M9.07504 17.2274C9.16249 17.1776 9.25416 17.1379 9.34828 17.1081C9.49122 17.0628 9.64013 17.0405 9.78905 17.0408M9.78905 17.0408C9.91724 17.041 10.0454 17.058 10.1705 17.0915C10.2867 17.1226 10.3998 17.168 10.5069 17.2274M9.78905 17.0408C10.0366 17.0404 10.2846 17.1027 10.5069 17.2274M10.5069 17.2274L12.1019 18.0908C12.3831 18.2431 12.7203 18.2516 13.0089 18.1138L14.2026 17.5437C14.5022 17.4006 14.7113 17.1181 14.7605 16.7897L15.0069 15.1481M15.0069 15.1481C15.0459 14.9002 15.1495 14.6708 15.3034 14.4805M15.0069 15.1481C15.0445 14.8997 15.1488 14.6706 15.3034 14.4805M15.3034 14.4805C15.4561 14.2921 15.6588 14.1421 15.8948 14.0493M15.3034 14.4805C15.4558 14.2914 15.6577 14.1409 15.8948 14.0493M15.8948 14.0493L17.5319 13.4077C17.8399 13.287 18.0683 13.0218 18.1419 12.6993L18.4241 11.4638C18.4976 11.1421 18.4077 10.805 18.1839 10.5626L16.9976 9.27814M16.9976 9.27814C16.8234 9.09381 16.7019 8.87363 16.6429 8.63962M16.9976 9.27814C16.9158 9.19205 16.8455 9.09793 16.7883 8.99815C16.7229 8.88483 16.6741 8.76422 16.6429 8.63962M16.6429 8.63962C16.5849 8.40728 16.5884 8.16108 16.6618 7.92277L17.1739 6.2815C17.2743 5.9597 17.2058 5.60898 16.9917 5.3486L16.1767 4.3573C15.9704 4.10641 15.6551 3.97134 15.3312 3.99506L13.5645 4.12447M13.5645 4.12447C13.311 4.14237 13.0616 4.09407 12.8396 3.99016M13.5645 4.12447C13.3106 4.1434 13.0616 4.09471 12.8396 3.99016M12.8396 3.99016C12.6163 3.88492 12.4203 3.72309 12.2745 3.51677M12.8396 3.99016C12.6159 3.88531 12.4196 3.7239 12.2745 3.51677M2.92433 8.68066L2.92503 8.67702M12.6131 10.0087C12.6131 11.5628 11.3249 12.8226 9.73601 12.8226C8.14715 12.8226 6.85892 11.5628 6.85892 10.0087C6.85892 8.45456 8.14715 7.19472 9.73601 7.19472C11.3249 7.19472 12.6131 8.45456 12.6131 10.0087Z"
+      stroke="#020617"
+      stroke-width="1.5"
+    />
+  </svg>
+);
diff --git a/examples/ui-demo/src/components/shared/WalletTypeSwitch.tsx b/examples/ui-demo/src/components/shared/WalletTypeSwitch.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { Root, Thumb } from "@radix-ui/react-switch";
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const selectedStyles = "text-[#475569]";
+const unselectedStyles = "text-[#020617]";
+
+const WalletTypeSwitch = forwardRef<
+  ElementRef<typeof Root>,
+  ComponentPropsWithoutRef<typeof Root>
+>(({ className, checked, ...props }, ref) => (
+  <Root
+    className={cn(
+      "relative peer inline-flex w-full h-9 shrink-0 cursor-pointer items-center rounded-[8px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-active border border-[#94A3B8]",
+      className
+    )}
+    checked={checked}
+    {...props}
+    ref={ref}
+  >
+    <Thumb
+      className={cn(
+        "pointer-events-none block h-full w-2/4 rounded-[7px] bg-background ring-0 transition-transform data-[state=checked]:translate-x-[100%] data-[state=unchecked]:translate-x-[0%] border border-active"
+      )}
+    ></Thumb>
+    <div className="absolute flex text-sm items-center inset-1 z-10 justify-between bg-transparent">
+      <div className="flex items-center data-[state=unchecked]:font-medium justify-center gap-1 flex-1 basis-0">
+        <p
+          className={`${
+            checked ? selectedStyles : unselectedStyles
+          } font-semibold`}
+        >
+          Smart account
+        </p>
+      </div>
+      <div className="flex items-center justify-center gap-1 flex-1 basis-0">
+        <p
+          className={`${
+            checked ? unselectedStyles : selectedStyles
+          } font-semibold`}
+        >
+          7702 Smart Account
+        </p>
+      </div>
+    </div>
+  </Root>
+));
+WalletTypeSwitch.displayName = Root.displayName;
+
+export { WalletTypeSwitch };