Add social login customization in ConnectWallet playground (#1966)

* Add social login methods in playground * add PAPER_DEV
2023-11-16 17:46:39 +00:00
parent b6c15ce8e2
commit 17f95ccfd5
6 changed files with 281 additions and 129 deletions
@@ -27,11 +27,12 @@ import {
  useSetIsNetworkConfigModalOpen,
 } from "hooks/networkConfigModal";
 import { del, get, set } from "idb-keyval";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Heading } from "tw-components";
 import { ComponentWithChildren } from "types/component-with-children";
 import { bigNumberReplacer } from "utils/bignumber";
 import { isBrowser } from "utils/isBrowser";
+import { isProd } from "constants/rpc";

 const __CACHE_BUSTER = "3.14.40-nightly-1e6f9dcc-20230831023648";

@@ -106,6 +107,18 @@ export const AppLayout: ComponentWithChildren<AppLayoutProps> = (props) => {
        },
      }),
  );
+
+  useEffect(() => {
+    if (!isProd) {
+      console.debug("IS_PAPER_DEV");
+      localStorage.setItem("IS_PAPER_DEV", "true");
+      localStorage.setItem(
+        "PAPER_DEV_URL",
+        "http://embedded-wallet.thirdweb-dev.com",
+      );
+    }
+  }, []);
+
  return (
    <PersistQueryClientProvider
      client={queryClient}
@@ -29,7 +29,11 @@ import estree from "prettier/plugins/estree";
 import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { walletInfoRecord, WalletId } from "./walletInfoRecord";
 import { getCode } from "./getCode";
-import { WalletButton } from "./WalletButton";
+import {
+  RecommendedIconButton,
+  SocialButton,
+  WalletButton,
+} from "./WalletButton";
 import {
  ConnectModalInlinePreview,
  WelcomeScreen,
@@ -97,6 +101,8 @@ export const ConnectWalletPlayground: React.FC<{
    smartWalletOptions,
    setSmartWalletOptions,
    supportedWallets,
+    socialOptions,
+    setSocialOptions,
  } = usePlaygroundWallets({
    MetaMask: true,
    Coinbase: "recommended",
@@ -118,6 +124,7 @@ export const ConnectWalletPlayground: React.FC<{
      return `[${walletIds
        .map((walletId) => {
          const recommended = walletInfoRecord[walletId].component.recommended;
+          let walletCode = walletInfoRecord[walletId].code(recommended);

          if (walletId === "Safe") {
            const personalWalletIds = walletIds.filter((w) => w !== "Safe");
@@ -134,7 +141,27 @@ export const ConnectWalletPlayground: React.FC<{
            })`;
          }

-          const walletCode = walletInfoRecord[walletId].code(recommended);
+          if (walletId === "Email Wallet") {
+            if (!recommended && !socialOptions.length) {
+              walletCode = `embeddedWallet()`;
+            } else {
+              const options: Record<string, any> = {};
+              if (recommended) {
+                options.recommended = true;
+              }
+              if (socialOptions.length) {
+                options.auth = {
+                  options: socialOptions,
+                };
+              }
+
+              walletCode = `embeddedWallet(${JSON.stringify(
+                options,
+                null,
+                2,
+              )})`;
+            }
+          }

          return smartWalletOptions.enabled
            ? `smartWallet(${walletCode}, smartWalletOptions)`
@@ -208,6 +235,7 @@ export const ConnectWalletPlayground: React.FC<{
    tosUrl,
    privacyPolicyUrl,
    locale,
+    socialOptions,
  ]);

  const welcomeScreenContent = (
@@ -353,48 +381,98 @@ export const ConnectWalletPlayground: React.FC<{
    </Flex>
  );

+  const socialLoginMethods = [
+    {
+      name: "Sign in with Email",
+      key: "email",
+    },
+    {
+      name: "Sign in with Google",
+      key: "google",
+    },
+    {
+      name: "Sign in with Apple",
+      key: "apple",
+    },
+    {
+      name: "Sign in with Facebook",
+      key: "facebook",
+    },
+  ] as const;
+
  const socialLogins = (
    <>
-      <Heading size="label.md" color="heading">
-        Email & Social Logins
-      </Heading>
-      <Spacer height={3} />
-      <Grid gap={2} flexDir="column" templateColumns="1fr">
-        {/* Email Wallet */}
-        <WalletButton
-          name="Embedded Wallet"
-          subtitle="Email and Google sign in"
-          icon={walletInfoRecord["Email Wallet"].component.meta.iconURL}
-          onRecommendedClick={() => {
-            const current = walletSelection["Email Wallet"];
-            const newState = current === "recommended" ? true : "recommended";
+      <Flex justifyContent={"space-between"}>
+        <Flex gap={3} alignItems="center">
+          <Heading size="label.md" color="heading">
+            Email & Social Logins
+          </Heading>
+          <RecommendedIconButton
+            onClick={() => {
+              const current = walletSelection["Email Wallet"];
+              const newState = current === "recommended" ? true : "recommended";

-            if (newState === "recommended") {
-              trackCustomize("recommend-wallet", {
-                walletName: "Embedded Wallet",
+              if (newState === "recommended") {
+                trackCustomize("recommend-wallet", {
+                  walletName: "Embedded Wallet",
+                });
+              }
+
+              setWalletSelection({
+                ...walletSelection,
+                "Email Wallet":
+                  current === "recommended" ? true : "recommended",
              });
-            }
+            }}
+            isRecommended={walletSelection["Email Wallet"] === "recommended"}
+          />
+        </Flex>

-            setWalletSelection({
-              ...walletSelection,
-              "Email Wallet": current === "recommended" ? true : "recommended",
-            });
-          }}
-          recommended={walletSelection["Email Wallet"] === "recommended"}
+        <Switch
+          size="lg"
          isChecked={!!walletSelection["Email Wallet"]}
-          onSelect={() => {
-            const selected = !walletSelection["Email Wallet"];
-
+          onChange={() => {
            trackCustomize("wallet", {
              walletName: "Embedded Wallet",
            });

            setWalletSelection({
              ...walletSelection,
-              "Email Wallet": selected,
+              "Email Wallet": !walletSelection["Email Wallet"],
            });
          }}
        />
+      </Flex>
+
+      <Spacer height={3} />
+      <Grid
+        gap={2}
+        flexDir="column"
+        templateColumns="1fr"
+        opacity={walletSelection["Email Wallet"] ? 1 : 0.4}
+        pointerEvents={walletSelection["Email Wallet"] ? "auto" : "none"}
+      >
+        {socialLoginMethods.map((x) => {
+          return (
+            <SocialButton
+              key={x.key}
+              icon={x.key}
+              name={x.name}
+              isSelected={socialOptions.includes(x.key)}
+              onClick={() => {
+                trackCustomize("socialLogin", {
+                  option: x.key,
+                });
+
+                // do not allow to unselect all
+                if (socialOptions.length === 1 && socialOptions[0] === x.key) {
+                  return;
+                }
+                setSocialOptions(addOrRemoveFromList(socialOptions, x.key));
+              }}
+            />
+          );
+        })}
      </Grid>
    </>
  );
@@ -642,7 +720,10 @@ export const ConnectWalletPlayground: React.FC<{
      {eoalWallets}
      <Spacer height={8} />
      {socialLogins}
-      <Spacer height={10} />
+
+      <Spacer height={5} />
+      <Box borderTop="1px solid" borderColor="borderColor" />
+      <Spacer height={5} />

      {/* Guest Mode */}
      <SwitchFormItem
@@ -1184,3 +1265,10 @@ function CustomTab(props: {
    </Button>
  );
 }
+
+function addOrRemoveFromList<T>(list: T[], item: T) {
+  if (list.includes(item)) {
+    return list.filter((x) => x !== item);
+  }
+  return [...list, item];
+}
@@ -68,27 +68,105 @@ export function WalletButton(props: {
        </Flex>
      </Flex>

-      <Tooltip
-        hasArrow
-        label={props.recommended ? "Recommended" : "Not Recommended"}
-        placement="top"
-      >
-        <Flex
-          justifyContent="center"
-          alignItems="center"
-          onClick={props.onRecommendedClick}
-          cursor="pointer"
-          role="button"
-          aria-label="Toggle Recommended"
-        >
-          <Icon
-            as={props.recommended ? AiFillStar : AiOutlineStar}
-            w={4}
-            h={4}
-            color={props.recommended ? "blue.500" : "faded"}
-          />
-        </Flex>
-      </Tooltip>
+      <RecommendedIconButton
+        onClick={props.onRecommendedClick}
+        isRecommended={props.recommended}
+      />
    </Flex>
  );
 }
+
+export function RecommendedIconButton(props: {
+  isRecommended?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Tooltip
+      hasArrow
+      label={props.isRecommended ? "Recommended" : "Not Recommended"}
+      placement="top"
+    >
+      <Flex
+        justifyContent="center"
+        alignItems="center"
+        onClick={props.onClick}
+        cursor="pointer"
+        role="button"
+        aria-label="Toggle Recommended"
+      >
+        <Icon
+          as={props.isRecommended ? AiFillStar : AiOutlineStar}
+          w={4}
+          h={4}
+          color={props.isRecommended ? "blue.500" : "faded"}
+        />
+      </Flex>
+    </Tooltip>
+  );
+}
+
+export function SocialButton(props: {
+  name: string;
+  icon: "email" | "google" | "facebook" | "apple";
+  onClick: () => void;
+  isSelected: boolean;
+}) {
+  return (
+    <Flex
+      borderRadius="lg"
+      border="1px solid transparent"
+      bg={props.isSelected ? "hsl(215.88deg 100% 60% / 15%)" : "inputBg"}
+      _hover={
+        !props.isSelected
+          ? {
+              bg: "inputBg",
+              borderColor: "borderColor",
+            }
+          : {
+              borderColor: "blue.500",
+            }
+      }
+      transition="background 100ms ease, border-color 100ms ease"
+      alignItems="center"
+      userSelect={"none"}
+      pr={1}
+      gap={1}
+    >
+      <Flex
+        gap={3}
+        alignItems="center"
+        flexGrow={1}
+        p={2}
+        onClick={props.onClick}
+        cursor="pointer"
+      >
+        <Image
+          width={7}
+          height={7}
+          alt={props.name}
+          src={socialIconMap[props.icon]}
+        />
+
+        <Text fontWeight={500} fontSize={14} color={"heading"}>
+          {props.name}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+export const googleIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDUuNiIgaGVpZ2h0PSI3MjAiIHZpZXdCb3g9IjAgMCAxODYuNjkgMTkwLjUiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE4NC41ODMgNzY1LjE3MSkiPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMDg5LjMzMy02ODcuMjM5djM2Ljg4OGg1MS4yNjJjLTIuMjUxIDExLjg2My05LjAwNiAyMS45MDgtMTkuMTM3IDI4LjY2MmwzMC45MTMgMjMuOTg2YzE4LjAxMS0xNi42MjUgMjguNDAyLTQxLjA0NCAyOC40MDItNzAuMDUyIDAtNi43NTQtLjYwNi0xMy4yNDktMS43MzItMTkuNDgzeiIgZmlsbD0iIzQyODVmNCIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTQyLjcxNC02NTEuNzkxbC02Ljk3MiA1LjMzNy0yNC42NzkgMTkuMjIzaDBjMTUuNjczIDMxLjA4NiA0Ny43OTYgNTIuNTYxIDg1LjAzIDUyLjU2MSAyNS43MTcgMCA0Ny4yNzgtOC40ODYgNjMuMDM4LTIzLjAzM2wtMzAuOTEzLTIzLjk4NmMtOC40ODYgNS43MTUtMTkuMzEgOS4xNzktMzIuMTI1IDkuMTc5LTI0Ljc2NSAwLTQ1LjgwNi0xNi43MTItNTMuMzQtMzkuMjI2eiIgZmlsbD0iIzM0YTg1MyIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTc0LjM2NS03MTIuNjFjLTYuNDk0IDEyLjgxNS0xMC4yMTcgMjcuMjc2LTEwLjIxNyA0Mi42ODlzMy43MjMgMjkuODc0IDEwLjIxNyA0Mi42ODljMCAuMDg2IDMxLjY5My0yNC41OTIgMzEuNjkzLTI0LjU5Mi0xLjkwNS01LjcxNS0zLjAzMS0xMS43NzYtMy4wMzEtMTguMDk4czEuMTI2LTEyLjM4MyAzLjAzMS0xOC4wOTh6IiBmaWxsPSIjZmJiYzA1Ii8+PHBhdGggZD0iTS0xMDg5LjMzMy03MjcuMjQ0YzE0LjAyOCAwIDI2LjQ5NyA0Ljg0OSAzNi40NTUgMTQuMjAxbDI3LjI3Ni0yNy4yNzZjLTE2LjUzOS0xNS40MTMtMzguMDEzLTI0Ljg1Mi02My43MzEtMjQuODUyLTM3LjIzNCAwLTY5LjM1OSAyMS4zODgtODUuMDMyIDUyLjU2MWwzMS42OTIgMjQuNTkyYzcuNTMzLTIyLjUxNCAyOC41NzUtMzkuMjI2IDUzLjM0LTM5LjIyNnoiIGZpbGw9IiNlYTQzMzUiIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIvPjwvZz48L3N2Zz4=";
+export const facebookIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iRWJlbmUgMSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgaWQ9ImZhY2Vib29rLWxvZ28tMjAxOSI+PHBhdGggZmlsbD0iIzE4NzdmMiIgZD0iTTEwMjQsNTEyQzEwMjQsMjI5LjIzMDE2LDc5NC43Njk3OCwwLDUxMiwwUzAsMjI5LjIzMDE2LDAsNTEyYzAsMjU1LjU1NCwxODcuMjMxLDQ2Ny4zNzAxMiw0MzIsNTA1Ljc3Nzc3VjY2MEgzMDJWNTEySDQzMlYzOTkuMkM0MzIsMjcwLjg3OTgyLDUwOC40Mzg1NCwyMDAsNjI1LjM4OTIyLDIwMCw2ODEuNDA3NjUsMjAwLDc0MCwyMTAsNzQwLDIxMFYzMzZINjc1LjQzNzEzQzYxMS44MzUwOCwzMzYsNTkyLDM3NS40NjY2Nyw1OTIsNDE1Ljk1NzI4VjUxMkg3MzRMNzExLjMsNjYwSDU5MnYzNTcuNzc3NzdDODM2Ljc2OSw5NzkuMzcwMTIsMTAyNCw3NjcuNTU0LDEwMjQsNTEyWiI+PC9wYXRoPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MTEuMyw2NjAsNzM0LDUxMkg1OTJWNDE1Ljk1NzI4QzU5MiwzNzUuNDY2NjcsNjExLjgzNTA4LDMzNiw2NzUuNDM3MTMsMzM2SDc0MFYyMTBzLTU4LjU5MjM1LTEwLTExNC42MTA3OC0xMEM1MDguNDM4NTQsMjAwLDQzMiwyNzAuODc5ODIsNDMyLDM5OS4yVjUxMkgzMDJWNjYwSDQzMnYzNTcuNzc3NzdhNTE3LjM5NjE5LDUxNy4zOTYxOSwwLDAsMCwxNjAsMFY2NjBaIj48L3BhdGg+PC9zdmc+";
+export const appleIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDM4IiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCA0OTYuMjU1IDYwOC43MjgiIGlkPSJhcHBsZSI+PHBhdGggZmlsbD0iIzk5OSIgZD0iTTI3My44MSA1Mi45NzNDMzEzLjgwNi4yNTcgMzY5LjQxIDAgMzY5LjQxIDBzOC4yNzEgNDkuNTYyLTMxLjQ2MyA5Ny4zMDZjLTQyLjQyNiA1MC45OC05MC42NDkgNDIuNjM4LTkwLjY0OSA0Mi42MzhzLTkuMDU1LTQwLjA5NCAyNi41MTItODYuOTcxek0yNTIuMzg1IDE3NC42NjJjMjAuNTc2IDAgNTguNzY0LTI4LjI4NCAxMDguNDcxLTI4LjI4NCA4NS41NjIgMCAxMTkuMjIyIDYwLjg4MyAxMTkuMjIyIDYwLjg4M3MtNjUuODMzIDMzLjY1OS02NS44MzMgMTE1LjMzMWMwIDkyLjEzMyA4Mi4wMSAxMjMuODg1IDgyLjAxIDEyMy44ODVzLTU3LjMyOCAxNjEuMzU3LTEzNC43NjIgMTYxLjM1N2MtMzUuNTY1IDAtNjMuMjE1LTIzLjk2Ny0xMDAuNjg4LTIzLjk2Ny0zOC4xODggMC03Ni4wODQgMjQuODYxLTEwMC43NjYgMjQuODYxQzg5LjMzIDYwOC43MyAwIDQ1NS42NjYgMCAzMzIuNjI4YzAtMTIxLjA1MiA3NS42MTItMTg0LjU1NCAxNDYuNTMzLTE4NC41NTQgNDYuMTA1IDAgODEuODgzIDI2LjU4OCAxMDUuODUyIDI2LjU4OHoiPjwvcGF0aD48L3N2Zz4=";
+export const emailIcon =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODY0OSkiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjQ5KSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODY0OSkiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzM1ODlfODY0OSkiPgo8cGF0aCBkPSJNMjQgMTQuMjVDMTguNjE3MiAxNC4yNSAxNC4yNSAxOC42MTcyIDE0LjI1IDI0QzE0LjI1IDI5LjM4MjggMTguNjE3MiAzMy43NSAyNCAzMy43NUMyNC44OTg4IDMzLjc1IDI1LjYyNSAzNC40NzYyIDI1LjYyNSAzNS4zNzVDMjUuNjI1IDM2LjI3MzggMjQuODk4OCAzNyAyNCAzN0MxNi44MTk1IDM3IDExIDMxLjE4MDUgMTEgMjRDMTEgMTYuODE5NSAxNi44MTk1IDExIDI0IDExQzMxLjE4MDUgMTEgMzcgMTYuODE5NSAzNyAyNFYyNS42MjVDMzcgMjguMzE2NCAzNC44MTY0IDMwLjUgMzIuMTI1IDMwLjVDMzAuNjM3MSAzMC41IDI5LjMwMTYgMjkuODI5NyAyOC40MDc4IDI4Ljc3ODVDMjcuMjUgMjkuODQ0OSAyNS43MDEyIDMwLjUgMjQgMzAuNUMyMC40MDk4IDMwLjUgMTcuNSAyNy41OTAyIDE3LjUgMjRDMTcuNSAyMC40MDk4IDIwLjQwOTggMTcuNSAyNCAxNy41QzI1LjQxNjggMTcuNSAyNi43MjcgMTcuOTUyIDI3Ljc5MzQgMTguNzIzOEMyOC4wODI4IDE4LjQ2OTkgMjguNDU4NiAxOC4zMTI1IDI4Ljg3NSAxOC4zMTI1QzI5Ljc3MzggMTguMzEyNSAzMC41IDE5LjAzODcgMzAuNSAxOS45Mzc1VjI1LjYyNUMzMC41IDI2LjUyMzggMzEuMjI2MiAyNy4yNSAzMi4xMjUgMjcuMjVDMzMuMDIzOCAyNy4yNSAzMy43NSAyNi41MjM4IDMzLjc1IDI1LjYyNVYyNEMzMy43NSAxOC42MTcyIDI5LjM4MjggMTQuMjUgMjQgMTQuMjVaTTI3LjI1IDI0QzI3LjI1IDIzLjEzOCAyNi45MDc2IDIyLjMxMTQgMjYuMjk4MSAyMS43MDE5QzI1LjY4ODYgMjEuMDkyNCAyNC44NjIgMjAuNzUgMjQgMjAuNzVDMjMuMTM4IDIwLjc1IDIyLjMxMTQgMjEuMDkyNCAyMS43MDE5IDIxLjcwMTlDMjEuMDkyNCAyMi4zMTE0IDIwLjc1IDIzLjEzOCAyMC43NSAyNEMyMC43NSAyNC44NjIgMjEuMDkyNCAyNS42ODg2IDIxLjcwMTkgMjYuMjk4MUMyMi4zMTE0IDI2LjkwNzYgMjMuMTM4IDI3LjI1IDI0IDI3LjI1QzI0Ljg2MiAyNy4yNSAyNS42ODg2IDI2LjkwNzYgMjYuMjk4MSAyNi4yOTgxQzI2LjkwNzYgMjUuNjg4NiAyNy4yNSAyNC44NjIgMjcuMjUgMjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zNTg5Xzg2NDkiIHgxPSIyNS41IiB5MT0iLTYuMjk1NzJlLTA2IiB4Mj0iMzAuMjAxNiIgeTI9IjQ3LjUzNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjODM1OEJBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCMUNGNyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMzU4OV84NjQ5IiB4MT0iMjUuNTYyNSIgeTE9Ii0xLjAwMDAxIiB4Mj0iMzAuNDYiIHkyPSI0OC41MTU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzU4OV84NjQ5Ij4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8zNTg5Xzg2NDkiPgo8cmVjdCB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAxMSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
+
+const socialIconMap = {
+  email: emailIcon,
+  google: googleIconUri,
+  facebook: facebookIconUri,
+  apple: appleIconUri,
+};
@@ -1,10 +1,17 @@
-import { WalletConfig, safeWallet, smartWallet } from "@thirdweb-dev/react";
+import {
+  WalletConfig,
+  embeddedWallet,
+  safeWallet,
+  smartWallet,
+} from "@thirdweb-dev/react";
 import { useState } from "react";
 import { walletInfoRecord, WalletId } from "./walletInfoRecord";
 import { isProd } from "constants/rpc";

 type WalletSelection = Record<WalletId, boolean | "recommended">;

+type AuthOption = "google" | "email" | "facebook" | "apple";
+
 export function usePlaygroundWallets(defaultWalletSelection: WalletSelection) {
  const [smartWalletOptions, setSmartWalletOptions] = useState({
    factoryAddress: "0x2e9f5A20c8A7270085F4ed716d58e72dFF8D098f",
@@ -12,6 +19,13 @@ export function usePlaygroundWallets(defaultWalletSelection: WalletSelection) {
    gasless: true,
  });

+  const [socialOptions, setSocialOptions] = useState<AuthOption[]>([
+    "email",
+    "google",
+    "apple",
+    "facebook",
+  ]);
+
  const [walletSelection, setWalletSelection] = useState<
    Record<WalletId, boolean | "recommended">
  >(defaultWalletSelection);
@@ -19,8 +33,18 @@ export function usePlaygroundWallets(defaultWalletSelection: WalletSelection) {
  const enabledWallets = Object.entries(walletSelection)
    .filter((x) => x[1])
    .map((x) => x[0] as WalletId);
+
  const supportedWallets: WalletConfig<any>[] = enabledWallets.map(
    (walletId) => {
+      if (walletId === "Email Wallet") {
+        walletInfoRecord[walletId].component = embeddedWallet({
+          recommended: !!walletSelection[walletId],
+          auth: {
+            options: socialOptions,
+          },
+        });
+      }
+
      // set recommended
      walletInfoRecord[walletId].component.recommended =
        walletSelection[walletId] === "recommended";
@@ -61,5 +85,7 @@ export function usePlaygroundWallets(defaultWalletSelection: WalletSelection) {
    supportedWallets,
    smartWalletOptions,
    setSmartWalletOptions,
+    socialOptions,
+    setSocialOptions,
  };
 }
@@ -31,9 +31,9 @@
    "@tanstack/react-query": "^4.35.7",
    "@tanstack/react-query-persist-client": "^4.35.7",
    "@tanstack/react-table": "^8.10.7",
-    "@thirdweb-dev/auth": "^4.1.6",
+    "@thirdweb-dev/auth": "0.0.0-dev-8b6ffeb-20231116101855",
    "@thirdweb-dev/chains": "^0.1.58",
-    "@thirdweb-dev/react": "4.1.5-nightly-9f993dcc-20231116010115",
+    "@thirdweb-dev/react": "0.0.0-dev-8b6ffeb-20231116101855",
    "@thirdweb-dev/sdk": "^4.0.13",
    "@thirdweb-dev/service-utils": "^0.4.8",
    "@vercel/og": "^0.5.20",
@@ -3628,25 +3628,13 @@
  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.10.7.tgz#577e8a635048875de4c9d6d6a3c21d26ff9f9d08"
  integrity sha512-KQk5OMg5OH6rmbHZxuNROvdI+hKDIUxANaHlV+dPlNN7ED3qYQ/WkpY2qlXww1SIdeMlkIhpN/2L00rof0fXFw==

-"@thirdweb-dev/auth@4.1.7-nightly-9f993dcc-20231116010115":
-  version "4.1.7-nightly-9f993dcc-20231116010115"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/auth/-/auth-4.1.7-nightly-9f993dcc-20231116010115.tgz#d16398da1ee8757d3205d07b350c0eb6d8eeccf9"
-  integrity sha512-jTxi23eNRcMZ2awJovqdIbLq5q9kk+w63+bgrWpdPE4xq5LhXR4MKvkUKMcPPf+6v0lg4SlWhpqqgRV+J5l3wA==
+"@thirdweb-dev/auth@0.0.0-dev-8b6ffeb-20231116101855":
+  version "0.0.0-dev-8b6ffeb-20231116101855"
+  resolved "https://registry.yarnpkg.com/@thirdweb-dev/auth/-/auth-0.0.0-dev-8b6ffeb-20231116101855.tgz#32874a514b90b284138d8450b4b84e1c3a52f2c1"
+  integrity sha512-xHWL63vOBLoYMU7IMOYetVZLVB6SEXd4ajp8D429LBOVJeTbvleAwj4tBHYL9UHagqmN9KEIyqqZswRhZOQpEw==
  dependencies:
    "@fastify/cookie" "^9.1.0"
-    "@thirdweb-dev/wallets" "2.1.4-nightly-9f993dcc-20231116010115"
-    cookie "^0.5.0"
-    fastify-type-provider-zod "^1.1.9"
-    uuid "^9.0.1"
-    zod "^3.22.3"
-
-"@thirdweb-dev/auth@^4.1.6":
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/auth/-/auth-4.1.6.tgz#a9e56b1f72ea1bbf0d229b6e3eac3c2fd0668692"
-  integrity sha512-KUgSlkW3cFNOIjIC1kEFJNOKaIg/CfJPn6XVklNyICdmFKsXgBipqTBu6pQsAxni4d3xD2a4qSXjwuk4gJViYw==
-  dependencies:
-    "@fastify/cookie" "^9.1.0"
-    "@thirdweb-dev/wallets" "2.1.3"
+    "@thirdweb-dev/wallets" "0.0.0-dev-8b6ffeb-20231116101855"
    cookie "^0.5.0"
    fastify-type-provider-zod "^1.1.9"
    uuid "^9.0.1"
@@ -3685,25 +3673,25 @@
  resolved "https://registry.yarnpkg.com/@thirdweb-dev/generated-abis/-/generated-abis-0.0.1.tgz#0d788d6aff0ac08f11e9eeb9ae4c8321845272a8"
  integrity sha512-vO9/3lSLO8smyyH1QVeYravSTzFwV1nf1C/Im1NBDPdH8//YvcbhtETGGiNfHWpyCvSi0vRYwvf+/7FKdwpDGQ==

-"@thirdweb-dev/react-core@4.1.5-nightly-9f993dcc-20231116010115":
-  version "4.1.5-nightly-9f993dcc-20231116010115"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/react-core/-/react-core-4.1.5-nightly-9f993dcc-20231116010115.tgz#73c8121addec67874b10bfe7fd15a0d1aca32250"
-  integrity sha512-V0l5t58bRv4ChVxRG9GTeH1dx2h2MqOqjfg4KfCzZegRm0AuvVJtoLtdaX8N0nQWDdxCc8vQ/j5+7DipCLf41w==
+"@thirdweb-dev/react-core@0.0.0-dev-8b6ffeb-20231116101855":
+  version "0.0.0-dev-8b6ffeb-20231116101855"
+  resolved "https://registry.yarnpkg.com/@thirdweb-dev/react-core/-/react-core-0.0.0-dev-8b6ffeb-20231116101855.tgz#e5afdc7dde12591e0277a551545348beabab4fb1"
+  integrity sha512-kyK2IwuTOaqBRaMcFTAbx8DjaUCqc/jc4JPdV4FmN/sdAI5hivcVILhT8XX9v8JwF0wjLZFIUHnmIMppAGMitQ==
  dependencies:
    "@tanstack/react-query" "^4.33.0"
-    "@thirdweb-dev/auth" "4.1.7-nightly-9f993dcc-20231116010115"
+    "@thirdweb-dev/auth" "0.0.0-dev-8b6ffeb-20231116101855"
    "@thirdweb-dev/chains" "0.1.58"
    "@thirdweb-dev/generated-abis" "^0.0.1"
    "@thirdweb-dev/sdk" "4.0.13"
    "@thirdweb-dev/storage" "2.0.4"
-    "@thirdweb-dev/wallets" "2.1.4-nightly-9f993dcc-20231116010115"
+    "@thirdweb-dev/wallets" "0.0.0-dev-8b6ffeb-20231116101855"
    mime "3.0.0"
    tiny-invariant "^1.2.0"

-"@thirdweb-dev/react@4.1.5-nightly-9f993dcc-20231116010115":
-  version "4.1.5-nightly-9f993dcc-20231116010115"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/react/-/react-4.1.5-nightly-9f993dcc-20231116010115.tgz#317324ad7c3133474f326f6b34236ac5b2b6681e"
-  integrity sha512-8TWdvMdlhRZJHpSGJn15C++iakLvBp4TEgOXoqVFUsI56KgVCE5JjDPYtHocwhdZj1HfYaJdI4QtdeEAy8CSFA==
+"@thirdweb-dev/react@0.0.0-dev-8b6ffeb-20231116101855":
+  version "0.0.0-dev-8b6ffeb-20231116101855"
+  resolved "https://registry.yarnpkg.com/@thirdweb-dev/react/-/react-0.0.0-dev-8b6ffeb-20231116101855.tgz#ef8d98bf3b0699829aa124722e32245eca6f3cd8"
+  integrity sha512-iUcYST8VdxlCg7Lfa+ZU35wIIl2T4ncIBlXGuXEqmpSeO131Ok4Ju3qWwUaqdGZp6gBpChmOHtmmErluI4Ru4w==
  dependencies:
    "@emotion/react" "^11.11.1"
    "@emotion/styled" "^11.11.0"
@@ -3718,8 +3706,8 @@
    "@react-icons/all-files" "^4.1.0"
    "@tanstack/react-query" "^4.33.0"
    "@thirdweb-dev/chains" "0.1.58"
-    "@thirdweb-dev/react-core" "4.1.5-nightly-9f993dcc-20231116010115"
-    "@thirdweb-dev/wallets" "2.1.4-nightly-9f993dcc-20231116010115"
+    "@thirdweb-dev/react-core" "0.0.0-dev-8b6ffeb-20231116101855"
+    "@thirdweb-dev/wallets" "0.0.0-dev-8b6ffeb-20231116101855"
    buffer "^6.0.3"
    copy-to-clipboard "^3.3.2"
    detect-browser "^5.3.0"
@@ -3766,51 +3754,10 @@
    form-data "^4.0.0"
    uuid "^9.0.1"

-"@thirdweb-dev/wallets@2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/wallets/-/wallets-2.1.3.tgz#31b240ee5867ddd2668c38059344a637963a42c8"
-  integrity sha512-peZnRKfy87Q7gWjtg4app5Z/YBf9YfuVQK6Ax9rhv+iCeoRFROqqjtuUF6y7JAHA/5Tp06pcvhA4H1bjJ5/Shg==
-  dependencies:
-    "@account-abstraction/contracts" "^0.5.0"
-    "@account-abstraction/sdk" "^0.5.0"
-    "@account-abstraction/utils" "^0.5.0"
-    "@blocto/sdk" "^0.5.4"
-    "@coinbase/wallet-sdk" "^3.7.1"
-    "@google-cloud/kms" "3.0.1"
-    "@magic-ext/connect" "^6.7.2"
-    "@magic-ext/oauth" "^7.6.2"
-    "@magic-sdk/provider" "^13.6.2"
-    "@metamask/eth-sig-util" "^4.0.0"
-    "@paperxyz/embedded-wallet-service-sdk" "^1.2.5"
-    "@paperxyz/sdk-common-utilities" "^0.1.0"
-    "@safe-global/safe-core-sdk" "^3.3.4"
-    "@safe-global/safe-ethers-adapters" "0.1.0-alpha.17"
-    "@safe-global/safe-ethers-lib" "^1.9.4"
-    "@thirdweb-dev/chains" "0.1.58"
-    "@thirdweb-dev/contracts-js" "1.3.16"
-    "@thirdweb-dev/sdk" "4.0.13"
-    "@walletconnect/core" "^2.9.1"
-    "@walletconnect/ethereum-provider" "^2.9.1"
-    "@walletconnect/jsonrpc-utils" "^1.0.8"
-    "@walletconnect/modal" "^2.6.1"
-    "@walletconnect/types" "^2.9.1"
-    "@walletconnect/utils" "^2.10.2"
-    "@walletconnect/web3wallet" "^1.8.7"
-    asn1.js "5.4.1"
-    bn.js "5.2.0"
-    buffer "^6.0.3"
-    crypto-js "^4.1.1"
-    eth-provider "^0.13.6"
-    ethereumjs-util "^7.1.3"
-    eventemitter3 "^5.0.1"
-    key-encoder "2.0.3"
-    magic-sdk "^13.6.2"
-    web3-core "1.5.2"
-
-"@thirdweb-dev/[email protected]":
-  version "2.1.4-nightly-9f993dcc-20231116010115"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/wallets/-/wallets-2.1.4-nightly-9f993dcc-20231116010115.tgz#e16835fd8150b20f862c19c8d0f53b9590f8ad73"
-  integrity sha512-eX+Z/ZPiJrjJl8gGFDcvZx/YPXGyvj1OMctTNz6Umf3gvnwUoYuQ/v4qNgrVQcUBLzz4g3ptIzTFC93483Hzyw==
+"@thirdweb-dev/wallets@0.0.0-dev-8b6ffeb-20231116101855":
+  version "0.0.0-dev-8b6ffeb-20231116101855"
+  resolved "https://registry.yarnpkg.com/@thirdweb-dev/wallets/-/wallets-0.0.0-dev-8b6ffeb-20231116101855.tgz#86e3cfab1145b5be64a15fd4a892f9c9dc47db75"
+  integrity sha512-yiJqVGzzKmi1Jy/6I0Yt4pWFOBYOWyX/MgWbOeshnVG/cu+BoCBL0qoaAfqxHyPRpxu/+q7ZJG/boQY2/CiUJw==
  dependencies:
    "@account-abstraction/contracts" "^0.5.0"
    "@account-abstraction/sdk" "^0.5.0"