alchemyplatform · RobChangCA · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024
@@ -36,9 +36,15 @@ export type Config = {
         }
       | undefined;
   };
+  walletType: WalletTypes;
   supportUrl?: string;
 };
 
+export enum WalletTypes {
+  smart = "smart",
+  hybrid7702 = "7702",
+}
+
 export const DEFAULT_CONFIG: Config = {
   auth: {
     showEmail: true,
@@ -65,6 +71,7 @@ export const DEFAULT_CONFIG: Config = {
     logoLight: undefined,
     logoDark: undefined,
   },
+  walletType: WalletTypes.smart,
 };
 
 export const queryClient = new QueryClient();

@@ -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>

@@ -0,0 +1,53 @@
+// 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";
+import { useConfigStore } from "@/state";
+import { WalletTypes } from "@/app/config";
+
+export const Configuration = ({ className }: { className?: string }) => {
+  const { setWalletType, walletType } = useConfigStore();
+  // const [walletType, setWalletType] = useState(WalletTypes.smart);
+
+  const onSwitchWalletType = () => {
+    setWalletType(
+      walletType === WalletTypes.smart
+        ? WalletTypes.hybrid7702
+        : 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.hybrid7702}
+        onCheckedChange={onSwitchWalletType}
+      />
+      <p className="text-active text-xs font-normal pt-3">
+        Sentence describing all of the value props fo 7702 and educating the
+        user. Curious about what this means?
+        <ExternalLink
+          className="text-[#363FF9] whitespace-nowrap"
+          href="https://google.com"
+        >
+          Learn more.
+        </ExternalLink>
+      </p>
+      <div className="w-full border-b border-border pb-5 mb-8" />
+    </div>
+  );
+};
@@ -0,0 +1,24 @@
+export const Key = ({ className }: { className?: string }) => (
+  <svg
+    width="94"
+    height="94"
+    viewBox="0 0 94 94"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      opacity="0.4"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M79.9001 34.4667C79.9001 43.9844 72.1844 51.7001 62.6667 51.7001C60.4556 51.7001 58.3418 51.2837 56.3993 50.525L53.2667 50.1334L50.1334 50.9167L47.7834 62.6667L33.6834 65.0167L32.9001 73.6334L17.2334 75.9834V72.0667L47.6664 42.9569C46.245 40.4509 45.4334 37.5536 45.4334 34.4667C45.4334 24.949 53.149 17.2334 62.6667 17.2334C72.1844 17.2334 79.9001 24.949 79.9001 34.4667ZM70.5001 28.2001C70.5001 31.661 67.6944 34.4667 64.2334 34.4667C60.7724 34.4667 57.9667 31.661 57.9667 28.2001C57.9667 24.7391 60.7724 21.9334 64.2334 21.9334C67.6944 21.9334 70.5001 24.7391 70.5001 28.2001Z"
+      fill="#363FF9"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M44.893 17.2863C53.164 9.01525 66.574 9.01525 74.845 17.2863C83.116 25.5573 83.116 38.9672 74.845 47.2383C68.48 53.6033 59.0747 55.068 51.3105 51.641L49.5929 62.2535C49.3405 63.8133 48.0549 64.9987 46.4798 65.124L35.2172 66.0204C35.0658 66.0324 34.9482 66.157 34.9449 66.3088L34.8061 72.6164C34.7673 74.3802 33.3966 75.8268 31.6375 75.9604L18.2405 76.978C16.2582 77.1285 14.5637 75.5674 14.5516 73.5795L14.502 65.4329C14.4974 64.6822 14.7936 63.9609 15.3245 63.43L39.7777 38.9768C37.3217 31.6101 39.0239 23.1554 44.893 17.2863ZM72.6294 19.5019C65.582 12.4545 54.156 12.4545 47.1086 19.5019C42.0769 24.5336 40.6355 31.7995 42.7934 38.1135C43.1338 39.1096 42.9203 40.2654 42.1237 41.062L17.6361 65.5496L17.6849 73.5604C17.6859 73.7319 17.8321 73.8666 18.0031 73.8536L31.4002 72.836C31.5519 72.8245 31.6702 72.6997 31.6735 72.5475L31.8123 66.2399C31.851 64.4808 33.2147 63.0365 34.9686 62.8969L46.2312 62.0006C46.3672 61.9898 46.4781 61.8875 46.4998 61.7529L48.2724 50.8006C48.5931 48.8192 50.7216 47.9277 52.3547 48.6751C59.0164 51.7239 67.1487 50.5034 72.6294 45.0227C79.6768 37.9753 79.6768 26.5492 72.6294 19.5019ZM59.3913 22.9591C62.092 20.2584 66.4707 20.2584 69.1714 22.9591C71.8721 25.6598 71.8721 30.0385 69.1714 32.7392C66.4707 35.4399 62.092 35.4399 59.3913 32.7392C56.6906 30.0385 56.6906 25.6598 59.3913 22.9591ZM66.9558 25.1747C65.4787 23.6977 63.084 23.6977 61.6069 25.1747C60.1299 26.6518 60.1299 29.0466 61.6069 30.5236C63.084 32.0007 65.4787 32.0007 66.9558 30.5236C68.4328 29.0466 68.4328 26.6518 66.9558 25.1747Z"
+      fill="#020617"
+    />
+  </svg>
+);
@@ -1,5 +1,5 @@
 import { useTheme } from "@/state/useTheme";
-export const LoadingIcon = () => {
+export const LoadingIcon = ({ className }: { className?: string }) => {
   const theme = useTheme();
   const animationClass =
     theme === "dark" ? "animate-ui-loading-dark" : "animate-ui-loading-light";
@@ -11,6 +11,7 @@ export const LoadingIcon = () => {
       viewBox="0 0 48 48"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <circle
         className={animationClass}

@@ -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>
+);
@@ -4,6 +4,9 @@ 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 { Wrapper7702 } from "../shared/7702/Wrapper";
+import { useConfigStore } from "@/state";
+import { WalletTypes } from "@/app/config";
 import { MintCard } from "../shared/mint-card/MintCard";
 
 export function AuthCardWrapper({ className }: { className?: string }) {
@@ -25,6 +28,7 @@ export function AuthCardWrapper({ className }: { className?: string }) {
 }
 
 const RenderContent = () => {
+  const { walletType } = useConfigStore();
   const user = useUser();
   const hasUser = !!user;
 
@@ -54,5 +58,5 @@ const RenderContent = () => {
     );
   }
 
-  return <MintCard />;
+  return walletType === WalletTypes.smart ? <MintCard /> : <Wrapper7702 />;
 };
@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react";
+
+export const Button = ({
+  children,
+  className,
+  ...rest
+}: PropsWithChildren<
+  React.ComponentProps<"button"> & { className?: string }
+>) => {
+  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 disabled:bg-bg-surface-disabled disabled:text-fg-disabled ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
@@ -0,0 +1,100 @@
+import Image from "next/image";
+import { LoadingIcon } from "@/components/icons/loading";
+import { Button } from "./Button";
+import { MintStages } from "./MintStages";
+
+type NFTLoadingState = "initial" | "loading" | "success";
+export type MintStatus = {
+  signing: NFTLoadingState;
+  gas: NFTLoadingState;
+  batch: NFTLoadingState;
+};
+
+export const MintCard7702 = ({
+  isLoading,
+  isDisabled,
+  status,
+  nftTransfered,
+  handleCollectNFT,
+  uri,
+}: {
+  isLoading: boolean;
+  isDisabled?: boolean;
+  status: MintStatus;
+  nftTransfered: boolean;
+  handleCollectNFT: () => void;
+  uri?: string;
+}) => {
+  return (
+    <div
+      className="bg-bg-surface-default rounded-lg p-6 w-[326px] h-[478px] flex flex-col"
+      style={{
+        boxShadow:
+          "0px 50px 50px 0px rgba(0, 0, 0, 0.09), 0px 12px 27px 0px rgba(0, 0, 0, 0.10)",
+      }}
+    >
+      {uri ? (
+        <div className="relative flex flex-col items-center">
+          <Image
+            className="mb-4 rounded-xl object-cover h-[222px] w-[326px]"
+            width={326}
+            height={222}
+            src={uri}
+            alt="An NFT"
+            priority
+          />
+        </div>
+      ) : (
+        <div className="flex justify-center items-center h-[170px]">
+          <LoadingIcon />
+        </div>
+      )}
+      <div className="mb-3">
+        <h3 className="text-fg-primary text-xl font-semibold">
+          Gasless transactions
+        </h3>
+      </div>
+      {!nftTransfered ? (
+        <>
+          <p className="text-fg-primary text-sm mb-3">
+            Sponsor gas and sign in the background for a one-click transaction
+            experience.
+          </p>
+          <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 || isDisabled}
+      >
+        {!nftTransfered
+          ? "Collect NFT"
+          : isLoading
+          ? "Collecting NFT..."
+          : "Re-collect NFT"}
+      </Button>
+    </div>
+  );
+};
@@ -0,0 +1,52 @@
+import { CheckCircleFilledIcon } from "@/components/icons/check-circle-filled";
+import { LoadingIcon } from "@/components/icons/loading";
+import { MintStatus } from "./MintCard7702";
+import { loadingState } from "./Transactions";
+
+export const MintStages = ({ status }: { status: MintStatus }) => {
+  return (
+    <div>
+      <Stage
+        icon={status.signing}
+        description="Invisibly signing txs for you..."
+      />
+      <Stage
+        icon={status.gas}
+        description="Sponsoring gas behind the scenes..."
+      />
+      <Stage
+        icon={status.batch}
+        description="Deploying your smart account..."
+      />
+    </div>
+  );
+};
+
+const Stage = ({
+  icon,
+  description,
+  className,
+}: {
+  icon: loadingState;
+  description: string | JSX.Element;
+  className?: string;
+}) => {
+  return (
+    <div className={`flex mb-4 items-center ${className}`}>
+      <div className="w-4 h-4 mr-2">{getMintIcon(icon)}</div>
+      <p className="text-sm text-fg-secondary">{description}</p>
+    </div>
+  );
+};
+
+export const getMintIcon = (icon: loadingState) => {
+  switch (icon) {
+    case "loading":
+    case "initial":
+      return <LoadingIcon className="h-4 w-4" />;
+    case "success":
+      return (
+        <CheckCircleFilledIcon className=" h-4 w-4 fill-demo-surface-success" />
+      );
+  }
+};