Version Packages (#1963 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[react] use custom theme context in styled components (#1954 )
2023-11-16 10:21:09 -08:00 · 2023-11-16 17:53:44 +00:00 · 2023-11-16 13:31:22 +00:00 · 2023-11-15 20:26:55 -08:00 · 2023-11-15 16:56:19 -08:00 · 2023-11-15 15:20:43 -08:00
213 changed files with 2810 additions and 1950 deletions
@@ -1,5 +1,26 @@
 # @thirdweb-dev/auth

+## 4.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091)]:
+  - @thirdweb-dev/wallets@2.1.5
+
+## 4.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`9f993dcc`](https://github.com/thirdweb-dev/js/commit/9f993dcc1e60cc087850b8fb9ce09524073ce0b5)]:
+  - @thirdweb-dev/wallets@2.1.4
+
+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies [[`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`42c74368`](https://github.com/thirdweb-dev/js/commit/42c743682739de77c264c11cc1692ed752f929a6), [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd), [`16e9e8b6`](https://github.com/thirdweb-dev/js/commit/16e9e8b64d7d1a97a5b32fc855479e992b7ed3a8), [`b1190914`](https://github.com/thirdweb-dev/js/commit/b1190914a97a9c4d9019c4ce8ee49ad345aed18c)]:
+  - @thirdweb-dev/wallets@2.1.3
+
 ## 4.1.5

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/auth",
-  "version": "4.1.5",
+  "version": "4.1.8",
  "main": "dist/thirdweb-dev-auth.cjs.js",
  "module": "dist/thirdweb-dev-auth.esm.js",
  "browser": {
@@ -1,5 +1,31 @@
 # thirdweb

+## 0.13.16
+
+### Patch Changes
+
+- Updated dependencies [[`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091)]:
+  - @thirdweb-dev/wallets@2.1.5
+  - @thirdweb-dev/auth@4.1.8
+
+## 0.13.15
+
+### Patch Changes
+
+- Updated dependencies [[`9f993dcc`](https://github.com/thirdweb-dev/js/commit/9f993dcc1e60cc087850b8fb9ce09524073ce0b5)]:
+  - @thirdweb-dev/wallets@2.1.4
+  - @thirdweb-dev/auth@4.1.7
+
+## 0.13.14
+
+### Patch Changes
+
+- Updated dependencies [[`23ab897e`](https://github.com/thirdweb-dev/js/commit/23ab897e329cdd5b316fbe554ea0f64add91f2b4), [`a3f3e160`](https://github.com/thirdweb-dev/js/commit/a3f3e160e07328655a4f0332f41f4edd210a1a8a), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`42c74368`](https://github.com/thirdweb-dev/js/commit/42c743682739de77c264c11cc1692ed752f929a6), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd), [`16e9e8b6`](https://github.com/thirdweb-dev/js/commit/16e9e8b64d7d1a97a5b32fc855479e992b7ed3a8), [`b1190914`](https://github.com/thirdweb-dev/js/commit/b1190914a97a9c4d9019c4ce8ee49ad345aed18c)]:
+  - @thirdweb-dev/sdk@4.0.13
+  - @thirdweb-dev/storage@2.0.4
+  - @thirdweb-dev/wallets@2.1.3
+  - @thirdweb-dev/auth@4.1.6
+
 ## 0.13.13

 ### Patch Changes
@@ -1,7 +1,7 @@
 {
  "name": "thirdweb",
  "main": "dist/cli/index.js",
-  "version": "0.13.13",
+  "version": "0.13.16",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/cli",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -3,7 +3,7 @@ module.exports = {
  extends: ["thirdweb"],
  plugins: ["better-tree-shaking", "eslint-plugin-tsdoc"],
  rules: {
-    "tsdoc/syntax": "warn",
+    "tsdoc/syntax": "error",
    "better-tree-shaking/no-top-level-side-effects": "error",
  },
 };
@@ -1,5 +1,37 @@
 # @thirdweb-dev/react-core

+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies [[`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091)]:
+  - @thirdweb-dev/wallets@2.1.5
+  - @thirdweb-dev/auth@4.1.8
+
+## 4.1.5
+
+### Patch Changes
+
+- Updated dependencies [[`9f993dcc`](https://github.com/thirdweb-dev/js/commit/9f993dcc1e60cc087850b8fb9ce09524073ce0b5)]:
+  - @thirdweb-dev/wallets@2.1.4
+  - @thirdweb-dev/auth@4.1.7
+
+## 4.1.4
+
+### Patch Changes
+
+- [#1951](https://github.com/thirdweb-dev/js/pull/1951) [`e79a9520`](https://github.com/thirdweb-dev/js/commit/e79a95206116ea09de0126fdbe30fb4413fdff28) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Fix caching issue with useTotalCirculatingSupply
+
+- [#1944](https://github.com/thirdweb-dev/js/pull/1944) [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5) Thanks [@iketw](https://github.com/iketw)! - Adds tsdoc warnings to enforce a common comments format
+
+- [#1950](https://github.com/thirdweb-dev/js/pull/1950) [`b1190914`](https://github.com/thirdweb-dev/js/commit/b1190914a97a9c4d9019c4ce8ee49ad345aed18c) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Smart Wallet autoconnect fixes and performance improvements
+
+- Updated dependencies [[`23ab897e`](https://github.com/thirdweb-dev/js/commit/23ab897e329cdd5b316fbe554ea0f64add91f2b4), [`a3f3e160`](https://github.com/thirdweb-dev/js/commit/a3f3e160e07328655a4f0332f41f4edd210a1a8a), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`42c74368`](https://github.com/thirdweb-dev/js/commit/42c743682739de77c264c11cc1692ed752f929a6), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd), [`16e9e8b6`](https://github.com/thirdweb-dev/js/commit/16e9e8b64d7d1a97a5b32fc855479e992b7ed3a8), [`b1190914`](https://github.com/thirdweb-dev/js/commit/b1190914a97a9c4d9019c4ce8ee49ad345aed18c)]:
+  - @thirdweb-dev/sdk@4.0.13
+  - @thirdweb-dev/storage@2.0.4
+  - @thirdweb-dev/wallets@2.1.3
+  - @thirdweb-dev/auth@4.1.6
+
 ## 4.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/react-core",
-  "version": "4.1.3",
+  "version": "4.1.6",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-core",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -335,7 +335,7 @@ export function ThirdwebWalletProvider(
              },
            );
          } catch (e) {
-            console.error("Failed to auto connect wallet");
+            console.error("Failed to auto connect personal wallet");
            console.error(e);
            setConnectionStatus("disconnected");
            return;
@@ -366,9 +366,14 @@ export function ThirdwebWalletProvider(
      } catch (e) {
        console.error("Failed to auto connect wallet");
        console.error(e);
-        lastConnectedWalletStorage.removeItem(
-          LAST_CONNECTED_WALLET_STORAGE_KEY,
-        );
+        if (
+          e instanceof Error &&
+          e.message === autoConnectTimeoutErrorMessage
+        ) {
+          lastConnectedWalletStorage.removeItem(
+            LAST_CONNECTED_WALLET_STORAGE_KEY,
+          );
+        }
        setConnectionStatus("disconnected");
      }
    }
@@ -193,7 +193,10 @@ export function useTotalCirculatingSupply(
  const { erc721, erc1155 } = getErcs(contract);

  return useQueryWithNetwork<BigNumber>(
-    cacheKeys.contract.nft.query.totalCirculatingSupply(contractAddress),
+    cacheKeys.contract.nft.query.totalCirculatingSupply(
+      contractAddress,
+      tokenId ?? undefined,
+    ),
    async () => {
      requiredParamInvariant(contract, "No Contract instance provided");

@@ -182,10 +182,12 @@ export const cacheKeys = {
          ),
        totalCirculatingSupply: (
          contractAddress: RequiredParam<ContractAddress>,
+          tokenId?: BigNumberish,
        ) =>
          createContractCacheKey(contractAddress, [
            "query",
            "totalCirculatingSupply",
+            tokenId ?? "0",
          ]),
        totalCount: (contractAddress: RequiredParam<ContractAddress>) =>
          createContractCacheKey(contractAddress, ["query", "totalCount"]),
@@ -1,5 +1,11 @@
 # @thirdweb-dev/react-native-compat

+## 0.4.6
+
+## 0.4.5
+
+## 0.4.4
+
 ## 0.4.3

 ## 0.4.2
@@ -1,7 +1,7 @@
 {
  "name": "@thirdweb-dev/react-native-compat",
  "description": "Shims for Thirdweb in React Native Projects",
-  "version": "0.4.3",
+  "version": "0.4.6",
  "author": "thirdweb eng <[email protected]>",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native-compat",
  "license": "Apache-2.0",
@@ -3,7 +3,7 @@ module.exports = {
  extends: ["thirdweb"],
  plugins: ["i18next", "eslint-plugin-tsdoc"],
  rules: {
-    "tsdoc/syntax": "warn",
+    "tsdoc/syntax": "error",
    "i18next/no-literal-string": 2,
  },
  settings: {
@@ -1,5 +1,35 @@
 # @thirdweb-dev/react-native

+## 0.4.6
+
+### Patch Changes
+
+- [#1945](https://github.com/thirdweb-dev/js/pull/1945) [`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091) Thanks [@iketw](https://github.com/iketw)! - Enable Facebook Sign In for embedded wallet
+
+- Updated dependencies [[`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091)]:
+  - @thirdweb-dev/wallets@2.1.5
+  - @thirdweb-dev/react-core@4.1.6
+
+## 0.4.5
+
+### Patch Changes
+
+- Updated dependencies [[`9f993dcc`](https://github.com/thirdweb-dev/js/commit/9f993dcc1e60cc087850b8fb9ce09524073ce0b5)]:
+  - @thirdweb-dev/wallets@2.1.4
+  - @thirdweb-dev/react-core@4.1.5
+
+## 0.4.4
+
+### Patch Changes
+
+- [#1944](https://github.com/thirdweb-dev/js/pull/1944) [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5) Thanks [@iketw](https://github.com/iketw)! - Adds tsdoc warnings to enforce a common comments format
+
+- Updated dependencies [[`23ab897e`](https://github.com/thirdweb-dev/js/commit/23ab897e329cdd5b316fbe554ea0f64add91f2b4), [`a3f3e160`](https://github.com/thirdweb-dev/js/commit/a3f3e160e07328655a4f0332f41f4edd210a1a8a), [`e79a9520`](https://github.com/thirdweb-dev/js/commit/e79a95206116ea09de0126fdbe30fb4413fdff28), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`42c74368`](https://github.com/thirdweb-dev/js/commit/42c743682739de77c264c11cc1692ed752f929a6), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd), [`16e9e8b6`](https://github.com/thirdweb-dev/js/commit/16e9e8b64d7d1a97a5b32fc855479e992b7ed3a8), [`b1190914`](https://github.com/thirdweb-dev/js/commit/b1190914a97a9c4d9019c4ce8ee49ad345aed18c)]:
+  - @thirdweb-dev/sdk@4.0.13
+  - @thirdweb-dev/react-core@4.1.4
+  - @thirdweb-dev/storage@2.0.4
+  - @thirdweb-dev/wallets@2.1.3
+
 ## 0.4.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/react-native",
-  "version": "0.4.3",
+  "version": "0.4.6",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -176,16 +176,17 @@ export const ExportLocalWalletModal = ({
          <Text variant="bodySmall" color="red" mt="xs" textAlign="left">
            {error}
          </Text>
-          <Box flexDirection="row" justifyContent="flex-end" mt="lg">
+          <Box flexDirection="row" justifyContent="flex-end" mt="xs">
            <BaseButton
-              backgroundColor="white"
+              backgroundColor="accentButtonColor"
+              borderColor="accentButtonColor"
              style={styles.modalButton}
              onPress={onContinuePress}
            >
              {isExporting ? (
                <ActivityIndicator size="small" color="black" />
              ) : (
-                <Text variant="bodySmall" color="black">
+                <Text variant="bodySmall" color="accentButtonTextColor">
                  {l.connect_wallet_details.backup}
                </Text>
              )}
@@ -1,7 +1,7 @@
 import { walletIds } from "@thirdweb-dev/wallets";
 import { ModalHeaderTextClose } from "../../base/modal/ModalHeaderTextClose";
 import { WalletConfig } from "@thirdweb-dev/react-core";
-import { ReactNode, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import Box from "../../base/Box";
 import Text from "../../base/Text";
 import ThirdwebLogo from "../../../assets/thirdweb-logo";
@@ -33,7 +33,6 @@ export function ChooseWallet({
  onChooseWallet,
  modalTitleIconUrl,
  onClose,
-  excludeWalletIds = [],
  termsOfServiceUrl,
  privacyPolicyUrl,
 }: ChooseWalletProps) {
@@ -49,14 +48,25 @@ export function ChooseWallet({
      w.id === walletIds.magicLink ||
      (w.id === walletIds.embeddedWallet && w.selectUI),
  );
-  const connectionWallets = wallets
-    .filter(
+
+  const walletsToDisplay = useMemo(() => {
+    const filteredWallets = wallets.filter(
      (wallet) =>
        wallet.id !== walletIds.magicLink &&
        wallet.id !== walletIds.embeddedWallet &&
        wallet.id !== walletIds.localWallet,
-    )
-    .slice(0, 2);
+    );
+
+    const trueItems = filteredWallets.filter(
+      (item) => item.recommended === true,
+    );
+    const falseItems = filteredWallets.filter(
+      (item) => item.recommended !== true,
+    );
+    const sortedWallets = [...trueItems, ...falseItems];
+
+    return sortedWallets;
+  }, [wallets]);

  const showToSPrivacyPolicy = termsOfServiceUrl || privacyPolicyUrl;

@@ -74,7 +84,7 @@ export function ChooseWallet({
  };

  const onSingleWalletPress = () => {
-    onChooseWallet(connectionWallets[0]);
+    onChooseWallet(walletsToDisplay[0]);
  };

  const onBackPress = () => {
@@ -135,13 +145,7 @@ export function ChooseWallet({
      {!emailWallet || isConnectAWalletEnabled ? (
        <>
          <ChooseWalletContent
-            wallets={wallets}
-            excludeWalletIds={[
-              ...excludeWalletIds,
-              walletIds.localWallet,
-              walletIds.magicLink,
-              walletIds.embeddedWallet,
-            ]}
+            wallets={walletsToDisplay}
            onChooseWallet={onChooseWallet}
          />

@@ -176,7 +180,7 @@ export function ChooseWallet({
      ) : null}
      {emailWallet &&
      !isConnectAWalletEnabled &&
-      (guestWallet || connectionWallets.length > 0) ? (
+      (guestWallet || walletsToDisplay.length > 0) ? (
        <Box
          mt="md"
          marginHorizontal="xl"
@@ -193,15 +197,15 @@ export function ChooseWallet({
      ) : null}
      {emailWallet &&
      !isConnectAWalletEnabled &&
-      connectionWallets.length > 0 ? (
-        connectionWallets.length === 1 ? (
+      walletsToDisplay.length > 0 ? (
+        walletsToDisplay.length === 1 ? (
          <WalletButton
            marginHorizontal="xl"
            paddingHorizontal="none"
            paddingVertical="none"
            mt="md"
-            walletIconUrl={connectionWallets[0].meta.iconURL}
-            name={connectionWallets[0].meta.name}
+            walletIconUrl={walletsToDisplay[0].meta.iconURL}
+            name={walletsToDisplay[0].meta.name}
            onPress={onSingleWalletPress}
          />
        ) : (
@@ -217,7 +221,10 @@ export function ChooseWallet({
            borderWidth={1}
            onPress={onConnectAWalletPress}
          >
-            {connectionWallets.map((wallet) => {
+            {walletsToDisplay.map((wallet, index) => {
+              if (index > 1) {
+                return null;
+              }
              return (
                <Box key={wallet.meta.name} mr="xxs">
                  <ImageSvgUri
@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import type { WalletConfig } from "@thirdweb-dev/react-core";
 import { Dimensions, ScrollView, View } from "react-native";
 import { WalletButton } from "../../base/WalletButton";
@@ -7,7 +6,6 @@ import { useTheme } from "@shopify/restyle";

 interface ChooseWalletContentProps {
  wallets: WalletConfig[];
-  excludeWalletIds?: string[];
  onChooseWallet: (wallet: WalletConfig, data?: any) => void;
 }

@@ -15,27 +13,10 @@ const MAX_HEIGHT = Dimensions.get("window").height * 0.3;

 export const ChooseWalletContent = ({
  wallets,
-  excludeWalletIds,
  onChooseWallet,
 }: ChooseWalletContentProps) => {
  const theme = useTheme();

-  const walletsToDisplay = useMemo(() => {
-    const filteredWallets = wallets.filter(
-      (w) => !!!excludeWalletIds?.find((ewId) => ewId === w.id),
-    );
-
-    const trueItems = filteredWallets.filter(
-      (item) => item.recommended === true,
-    );
-    const falseItems = filteredWallets.filter(
-      (item) => item.recommended !== true,
-    );
-    const sortedWallets = [...trueItems, ...falseItems];
-
-    return sortedWallets;
-  }, [wallets, excludeWalletIds]);
-
  return (
    <View style={{ flexDirection: "column", maxHeight: MAX_HEIGHT }}>
      <ScrollView
@@ -45,9 +26,8 @@ export const ChooseWalletContent = ({
          paddingHorizontal: 16,
        }}
      >
-        {walletsToDisplay.map((item, index) => {
-          const marginBottom =
-            index === walletsToDisplay.length - 1 ? "none" : "xxs";
+        {wallets.map((item, index) => {
+          const marginBottom = index === wallets.length - 1 ? "none" : "xxs";
          return (
            <Box key={item.id}>
              {item.selectUI ? (
@@ -188,14 +188,21 @@ export const LocalWalletImportModal = ({
            {l.common.password}
          </Text>
          <PasswordInput onChangeText={onChangeText} />
-          <Text variant="bodySmall" color="red" mt="xs" textAlign="left">
-            {error}
-          </Text>
+          {error ? (
+            <Text
+              variant="bodySmall"
+              color="red"
+              marginVertical="xxs"
+              textAlign="left"
+            >
+              {error}
+            </Text>
+          ) : null}
          <Box
-            mb="xs"
            flexDirection="row"
            justifyContent="center"
            alignItems="center"
+            mt="sm"
          >
            <Box height={1} flex={1} backgroundColor="border" />
            <Text variant="bodySmall" textAlign="center" marginHorizontal="xxs">
@@ -214,23 +221,19 @@ export const LocalWalletImportModal = ({
                fontFamily: theme.textVariants.defaults.fontFamily,
              },
            }}
-            containerProps={{ pl: "xxs" }}
+            containerProps={{ pl: "xxs", mt: "sm" }}
          />
-          <Box
-            flexDirection="row"
-            justifyContent="center"
-            paddingHorizontal="md"
-            mt="lg"
-          >
+          <Box flexDirection="row" justifyContent="flex-end" mt="lg">
            <BaseButton
-              backgroundColor="white"
+              backgroundColor="accentButtonColor"
+              borderColor="accentButtonColor"
              style={styles.modalButton}
              onPress={onImportPress}
            >
              {isImporting ? (
-                <ActivityIndicator size="small" color="black" />
+                <ActivityIndicator size="small" color="accentButtonTextColor" />
              ) : (
-                <Text variant="bodySmall" color="black">
+                <Text variant="bodySmall" color="accentButtonTextColor">
                  {l.common.import}
                </Text>
              )}
@@ -338,6 +338,7 @@ const SendFundsForm = ({
      <BaseButton
        mt="md"
        backgroundColor="accentButtonColor"
+        borderColor="accentButtonColor"
        flexDirection="row"
        alignItems="center"
        justifyContent="center"
@@ -85,7 +85,7 @@ export const NetworkButton = ({
      >
        <Box flexDirection="row" alignItems="center">
          <ChainIcon chainIconUrl={chain?.icon?.url} size={28} />
-          <Box ml="md" alignItems="flex-start" justifyContent="center">
+          <Box ml="sm" alignItems="flex-start" justifyContent="center">
            <Text variant="bodyLarge">
              {chain?.name || l.common.unknown_network}
            </Text>
@@ -161,8 +161,10 @@ export const SwitchChainModal = ({
                return (
                  <NetworkButton
                    mt="xxs"
+                    padding="none"
                    key={chain.chainId}
-                    backgroundColor="backgroundHighlight"
+                    backgroundColor="transparent"
+                    borderColor="transparent"
                    chain={chain}
                    enableSwitchModal={false}
                    switchChainOnPress={true}
@@ -1,5 +1,4 @@
 import BaseButton from "./BaseButton";
-import Box from "./Box";
 import ImageSvgUri from "./ImageSvgUri";
 import Text from "./Text";

@@ -22,16 +21,14 @@ export const SquareButton = ({
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
-      borderWidth={0}
+      borderWidth={1}
      borderRadius="sm"
-      width={size}
-      height={size}
+      borderColor="border"
+      padding="sm"
      onPress={onPress}
      {...props}
    >
-      <Box borderWidth={0} borderRadius="lg">
-        <ImageSvgUri imageUrl={iconUrl} width={size} height={size} />
-      </Box>
+      <ImageSvgUri imageUrl={iconUrl} width={size} height={size} />
      {name ? (
        <Text
          variant="bodySmallSecondary"
@@ -26,6 +26,7 @@ export type Palette = {
  black: string;
  white: string;
  red: string;
+  transparent: string;

  warning: string;

@@ -38,6 +39,7 @@ export const paletteBase = {
  red: "red",
  warning: "#F46565",
  error: "#D85252",
+  transparent: "transparent",
 };

 export const paletteLight: Palette = {
@@ -19,8 +19,11 @@ import {
 import { getEthersSigner } from "./embedded/signer";
 import { logoutUser } from "./embedded/helpers/auth/logout";
 import {
+  clearConnectedAuthStrategy,
  clearConnectedEmail,
+  getConnectedAuthStrategy,
  getConnectedEmail,
+  saveConnectedAuthStrategy,
  saveConnectedEmail,
 } from "./embedded/helpers/storage/local";
 import {
@@ -39,11 +42,15 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA

  email?: string;

+  connectedAuthStrategy?: AuthParams["strategy"];
+
  constructor(options: EmbeddedWalletConnectorOptions) {
    super();
    this.options = options;

    this.email = getConnectedEmail();
+
+    this.connectedAuthStrategy = getConnectedAuthStrategy();
  }

  async connect(options?: EmbeddedWalletConnectionArgs) {
@@ -59,14 +66,12 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
      await this.switchChain(options.chainId);
    }

-    if (this.email) {
-      saveConnectedEmail(this.email);
-    }
    return this.getAddress();
  }

  async authenticate(params: AuthParams): Promise<AuthResult> {
    const strategy = params.strategy;
+    this.connectedAuthStrategy = strategy;
    switch (strategy) {
      case "email_verification": {
        return await this.validateEmailOTP({
@@ -172,7 +177,6 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
        this.options.clientId,
      );
      this.email = email;
-      saveConnectedEmail(email);

      return {
        user: {
@@ -228,6 +232,7 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA

  async disconnect(): Promise<void> {
    clearConnectedEmail();
+    clearConnectedAuthStrategy();
    await logoutUser(this.options.clientId);
    await this.onDisconnect();
    this.signer = undefined;
@@ -274,6 +279,13 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
      );
    }

+    if (this.email) {
+      saveConnectedEmail(this.email);
+    }
+    if (this.connectedAuthStrategy) {
+      saveConnectedAuthStrategy(this.connectedAuthStrategy);
+    }
+
    return signer;
  }

@@ -347,6 +359,10 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
  getEmail() {
    return this.email;
  }
+
+  getConnectedAuthStrategy() {
+    return this.connectedAuthStrategy;
+  }
 }

 function assertUnreachable(x: never): never {
@@ -220,7 +220,7 @@ export async function socialLogin(oauthOptions: OauthOption, clientId: string) {
  if (parts.length < 2) {
    // assume error
    const error = decodedUrl.split("?error=")?.[1];
-    throw new Error(`Something went wrong. Please, try again later: ${error}`);
+    throw new Error(`Something went wrong: ${error}`);
  }

  const authResult = parts[1];
@@ -6,8 +6,11 @@ import {
 } from "@paperxyz/embedded-wallet-service-sdk";
 import { MMKV } from "react-native-mmkv";
 import { DEVICE_SHARE_MISSING_MESSAGE } from "../constants";
+import { AuthParams } from "../../../types";

 const CONNECTED_EMAIL_LOCAL_STORAGE_NAME = "embedded-wallet-connected-email";
+const CONNECTED_AUTH_STRATEGY_LOCAL_STORAGE_NAME =
+  "embedded-wallet-connected-auth-params";

 const storage = new MMKV();

@@ -34,6 +37,23 @@ export function clearConnectedEmail() {
  removeItemInAsyncStorage(CONNECTED_EMAIL_LOCAL_STORAGE_NAME);
 }

+export function getConnectedAuthStrategy(): AuthParams["strategy"] | undefined {
+  return getItemFromAsyncStorage(CONNECTED_AUTH_STRATEGY_LOCAL_STORAGE_NAME) as
+    | AuthParams["strategy"]
+    | undefined;
+}
+
+export function saveConnectedAuthStrategy(authStrategy: string) {
+  setItemInAsyncStorage(
+    CONNECTED_AUTH_STRATEGY_LOCAL_STORAGE_NAME,
+    authStrategy,
+  );
+}
+
+export function clearConnectedAuthStrategy() {
+  removeItemInAsyncStorage(CONNECTED_AUTH_STRATEGY_LOCAL_STORAGE_NAME);
+}
+
 export async function isDeviceSharePresentForUser(
  clientId: string,
  walletUserId?: string,
@@ -1,9 +1,14 @@
-import { APPLE_ICON, EMAIL_WALLET_ICON, GOOGLE_ICON } from "../../assets";
+import {
+  APPLE_ICON,
+  EMAIL_WALLET_ICON,
+  FACEBOOK_ICON,
+  GOOGLE_ICON,
+} from "../../assets";
 import { LocaleType } from "../../i18n/types";

 export type AuthOption = "email" | SocialLogin;

-export type SocialLogin = "google" | "apple";
+export type SocialLogin = "google" | "apple" | "facebook";

 export type AuthOptionDictionary = Record<AuthOption, string>;

@@ -11,6 +16,7 @@ export const AUTH_OPTIONS_ICONS: AuthOptionDictionary = {
  google: GOOGLE_ICON,
  email: EMAIL_WALLET_ICON,
  apple: APPLE_ICON,
+  facebook: FACEBOOK_ICON,
 };

 export const AUTH_OPTIONS_TEXT: Record<
@@ -20,4 +26,5 @@ export const AUTH_OPTIONS_TEXT: Record<
  google: "sign_in_google",
  email: "sign_in_email",
  apple: "sign_in_apple",
+  facebook: "sign_in_facebook",
 };
@@ -108,9 +108,9 @@ export const EmailSelectionUI: React.FC<
                iconWidth={28}
                borderRadius="lg"
                borderWidth={1}
-                borderColor="buttonBackgroundColor"
-                backgroundColor="buttonBackgroundColor"
-                nameColor="buttonTextColor"
+                borderColor="backgroundHighlight"
+                backgroundColor="backgroundHighlight"
+                nameColor="textPrimary"
                flex={1}
                justifyContent="center"
                name={l.embedded_wallet[AUTH_OPTIONS_TEXT[socialLogins[0]]]}
@@ -118,15 +118,18 @@ export const EmailSelectionUI: React.FC<
                onPress={() => onProviderPress(socialLogins[0])}
              />
            ) : (
-              socialLogins.map((provider, index) => (
-                <SquareButton
-                  key={provider}
-                  ml={index === 0 ? 0 : "md"}
-                  onPress={() => onProviderPress(provider)}
-                  iconUrl={AUTH_OPTIONS_ICONS[provider]}
-                  size={40}
-                />
-              ))
+              <Box flexDirection="row" width="100%">
+                {socialLogins.map((provider, index) => (
+                  <SquareButton
+                    key={provider}
+                    ml={index === 0 ? 0 : "md"}
+                    flex={1}
+                    onPress={() => onProviderPress(provider)}
+                    iconUrl={AUTH_OPTIONS_ICONS[provider]}
+                    size={32}
+                  />
+                ))}
+              </Box>
            )}
          </Box>
          {isEmailEnabled && supportedWallets.length === 1 ? (
@@ -148,7 +151,7 @@ export const EmailSelectionUI: React.FC<
              <Box height={1} flex={1} backgroundColor="border" />
            </Box>
          ) : (
-            <Box mt="md" />
+            <Box mt={isEmailEnabled ? "md" : "none"} />
          )}
        </Box>
      ) : null}
@@ -187,8 +190,8 @@ export const EmailSelectionUI: React.FC<
            paddingVertical="md"
            borderRadius="lg"
            borderWidth={1}
-            borderColor="border"
            backgroundColor="accentButtonColor"
+            borderColor="accentButtonColor"
            onPress={handleNetworkCall}
          >
            {isFetching ? (
@@ -11,6 +11,8 @@ import {
  EmbeddedWalletConnectionArgs,
 } from "../../connectors/embedded-wallet/types";
 import { EMAIL_WALLET_ICON } from "../../../assets/svgs";
+import { WalletMeta } from "@thirdweb-dev/wallets/dist/declarations/src/evm/wallets/base";
+import { AUTH_OPTIONS_ICONS } from "../../types/embedded-wallet";

 export type EmbeddedWalletOptions = WalletOptions<
  EmbeddedWalletAdditionalOptions & WalletConnectReceiverConfig
@@ -79,6 +81,22 @@ export class EmbeddedWallet extends AbstractClientWallet<
    return connector.authenticate(params);
  }

+  getMeta(): WalletMeta {
+    const strategy = this.connector?.getConnectedAuthStrategy();
+    const meta = (this.constructor as typeof AbstractClientWallet).meta;
+    switch (strategy) {
+      case "facebook":
+      case "apple":
+      case "google":
+        return {
+          ...meta,
+          iconURL: AUTH_OPTIONS_ICONS[strategy],
+        };
+      default:
+        return meta;
+    }
+  }
+
  onConnected = () => {
    this.emit("message", { type: "connected" });
  };
@@ -3,7 +3,7 @@ module.exports = {
  extends: ["thirdweb", "plugin:i18next/recommended"],
  plugins: ["better-tree-shaking", "eslint-plugin-tsdoc"],
  rules: {
-    "tsdoc/syntax": "warn",
+    "tsdoc/syntax": "error",
    "@next/next/no-img-element": "off",
    "better-tree-shaking/no-top-level-side-effects": "error",
    "i18next/no-literal-string": 2,
@@ -1,5 +1,38 @@
 # @thirdweb-dev/react

+## 4.1.6
+
+### Patch Changes
+
+- [#1954](https://github.com/thirdweb-dev/js/pull/1954) [`7912c263`](https://github.com/thirdweb-dev/js/commit/7912c263237708e9d2e9471873db7679e783b6f8) Thanks [@MananTank](https://github.com/MananTank)! - use Custom Theme context in styled components to prevent theme conflicts
+
+- [#1945](https://github.com/thirdweb-dev/js/pull/1945) [`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091) Thanks [@iketw](https://github.com/iketw)! - Enable Facebook Sign In for embedded wallet
+
+- Updated dependencies [[`69d68f5a`](https://github.com/thirdweb-dev/js/commit/69d68f5a25877bf5ea694719d2cf4ca8388f3091)]:
+  - @thirdweb-dev/wallets@2.1.5
+  - @thirdweb-dev/react-core@4.1.6
+
+## 4.1.5
+
+### Patch Changes
+
+- Updated dependencies [[`9f993dcc`](https://github.com/thirdweb-dev/js/commit/9f993dcc1e60cc087850b8fb9ce09524073ce0b5)]:
+  - @thirdweb-dev/wallets@2.1.4
+  - @thirdweb-dev/react-core@4.1.5
+
+## 4.1.4
+
+### Patch Changes
+
+- [#1944](https://github.com/thirdweb-dev/js/pull/1944) [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5) Thanks [@iketw](https://github.com/iketw)! - Adds tsdoc warnings to enforce a common comments format
+
+- [#1948](https://github.com/thirdweb-dev/js/pull/1948) [`42c74368`](https://github.com/thirdweb-dev/js/commit/42c743682739de77c264c11cc1692ed752f929a6) Thanks [@iketw](https://github.com/iketw)! - Deprecates PaperWallet in favor of EmbeddedWallet
+
+- Updated dependencies [[`23ab897e`](https://github.com/thirdweb-dev/js/commit/23ab897e329cdd5b316fbe554ea0f64add91f2b4), [`a3f3e160`](https://github.com/thirdweb-dev/js/commit/a3f3e160e07328655a4f0332f41f4edd210a1a8a), [`e79a9520`](https://github.com/thirdweb-dev/js/commit/e79a95206116ea09de0126fdbe30fb4413fdff28), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`42c74368`](https://github.com/thirdweb-dev/js/commit/42c743682739de77c264c11cc1692ed752f929a6), [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd), [`16e9e8b6`](https://github.com/thirdweb-dev/js/commit/16e9e8b64d7d1a97a5b32fc855479e992b7ed3a8), [`b1190914`](https://github.com/thirdweb-dev/js/commit/b1190914a97a9c4d9019c4ce8ee49ad345aed18c)]:
+  - @thirdweb-dev/sdk@4.0.13
+  - @thirdweb-dev/react-core@4.1.4
+  - @thirdweb-dev/wallets@2.1.3
+
 ## 4.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/react",
-  "version": "4.1.3",
+  "version": "4.1.6",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -1,7 +1,6 @@
-import type { Theme } from "../design-system";
-import styled from "@emotion/styled";
 import { Chain } from "@thirdweb-dev/chains";
 import { useStorage } from "@thirdweb-dev/react-core";
+import { StyledDiv } from "../design-system/elements";

 const defaultChainIcon =
  "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/ethereum/512.png";
@@ -52,13 +51,13 @@ export const ChainIcon: React.FC<{
  );
 };

-const ActiveDot = styled.div<{ theme?: Theme }>`
-  width: 28%;
-  height: 28%;
-  border-radius: 50%;
-  position: absolute;
-  top: 60%;
-  right: 0px;
-  background-color: #00d395;
-  box-shadow: 0 0 0 2px var(--bg);
-`;
+const ActiveDot = /* @__PURE__ */ StyledDiv({
+  width: "28%",
+  height: "28%",
+  borderRadius: "50%",
+  position: "absolute",
+  top: "60%",
+  right: 0,
+  backgroundColor: "#00d395",
+  boxShadow: `0 0 0 2px var(--bg)`,
+});
@@ -1,4 +1,4 @@
-import type { Theme } from "../design-system";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";
 import { useClipboard } from "../evm/components/hooks/useCopyClipboard";
 import { ToolTip } from "./Tooltip";
 import styled from "@emotion/styled";
@@ -29,6 +29,9 @@ export const CopyIcon: React.FC<{
  );
 };

-const CheckIconStyled = /* @__PURE__ */ styled(CheckIcon)<{ theme?: Theme }>`
-  color: ${(p) => p.theme.colors.success};
-`;
+const CheckIconStyled = /* @__PURE__ */ styled(CheckIcon)(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.success,
+  };
+});
@@ -1,12 +1,14 @@
 import { useState } from "react";
 import { UploadIcon } from "@radix-ui/react-icons";
-import { Theme, iconSize, radius, spacing } from "../design-system";
+import { iconSize, radius, spacing } from "../design-system";
 import styled from "@emotion/styled";
 import { Spacer } from "./Spacer";
 import { isMobile } from "../evm/utils/isMobile";
 import type { IconFC } from "../wallet/ConnectWallet/icons/types";
 import { Text } from "./text";
 import { Container } from "./basic";
+import { StyledDiv } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export const DragNDrop: React.FC<{
  extension: string;
@@ -132,37 +134,38 @@ export const DragNDrop: React.FC<{
  );
 };

-const UploadIconSecondary = /* @__PURE__ */ styled(UploadIcon)<{
-  theme?: Theme;
-}>`
-  color: ${(props) => props.theme.colors.secondaryIconColor};
-  transition:
-    transform 200ms ease,
-    color 200ms ease;
-`;
+const UploadIconSecondary = /* @__PURE__ */ styled(UploadIcon)(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.secondaryIconColor,
+    transition: "transform 200ms ease, color 200ms ease",
+  };
+});

-const DropContainer = styled.div<{ theme?: Theme }>`
-  border: 2px solid ${(p) => p.theme.colors.borderColor};
-  border-radius: ${radius.md};
-  padding: ${spacing.xl} ${spacing.md};
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  cursor: pointer;
-  transition: border-color 200ms ease;
+const DropContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    border: `2px solid ${theme.colors.borderColor}`,
+    borderRadius: radius.md,
+    padding: `${spacing.xl} ${spacing.md}`,
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "column",
+    cursor: "pointer",
+    transition: "border-color 200ms ease",

-  &:hover,
-  &[data-is-dragging="true"] {
-    border-color: ${(p) => p.theme.colors.accentText};
-    svg {
-      color: ${(p) => p.theme.colors.accentText};
-    }
-  }
+    "&:hover, &[data-is-dragging='true']": {
+      borderColor: theme.colors.accentText,
+      svg: {
+        color: theme.colors.accentText,
+      },
+    },

-  &[data-error="true"] {
-    border-color: ${(p) => p.theme.colors.danger};
-  }
-`;
+    "&[data-error='true']": {
+      borderColor: theme.colors.danger,
+    },
+  };
+});

 const CheckCircleIcon: IconFC = (props) => (
  <svg
@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
 import { fadeInAnimation } from "../design-system/animations";
+import { StyledDiv } from "../design-system/elements";

-export const FadeIn = styled.div`
-  animation: ${fadeInAnimation} 0.15s ease-in;
-`;
+export const FadeIn = /* @__PURE__ */ StyledDiv({
+  animation: `${fadeInAnimation} 0.15s ease-in`,
+});
@@ -1,11 +1,4 @@
-import {
-  Theme,
-  media,
-  spacing,
-  shadow,
-  radius,
-  iconSize,
-} from "../design-system";
+import { media, spacing, shadow, radius, iconSize } from "../design-system";
 import {
  wideModalMaxHeight,
  modalMaxWidthCompact,
@@ -17,11 +10,12 @@ import { Overlay } from "./Overlay";
 import { noScrollBar } from "./basic";
 import { IconButton } from "./buttons";
 import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { DynamicHeight } from "./DynamicHeight";
 import { useEffect, useRef, useState } from "react";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";
+import { StyledDiv } from "../design-system/elements";

 export const Modal: React.FC<{
  trigger?: React.ReactNode;
@@ -127,16 +121,15 @@ export const Modal: React.FC<{
  );
 };

-export const CrossContainer = styled.div`
-  position: absolute;
-  top: ${spacing.lg};
-  right: ${spacing.lg};
-  transform: translateX(15%);
-
-  ${media.mobile} {
-    right: ${spacing.md};
-  }
-`;
+export const CrossContainer = /* @__PURE__ */ StyledDiv({
+  position: "absolute",
+  top: spacing.lg,
+  right: spacing.lg,
+  transform: "translateX(15%)",
+  [media.mobile]: {
+    right: spacing.md,
+  },
+});

 const modalAnimationDesktop = keyframes`
  from {
@@ -160,46 +153,45 @@ const modalAnimationMobile = keyframes`
  }
 `;

-const DialogContent = styled.div<{ theme?: Theme }>`
-  z-index: 10000;
-  background: ${(p) => p.theme.colors.modalBg};
-  --bg: ${(p) => p.theme.colors.modalBg};
-  color: ${(p) => p.theme.colors.primaryText};
-  border-radius: ${radius.xl};
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: calc(100vw - 40px);
-  box-sizing: border-box;
-  animation: ${modalAnimationDesktop} 300ms ease;
-  box-shadow: ${shadow.lg};
-  line-height: normal;
-  border: 1px solid ${(p) => p.theme.colors.borderColor};
-  outline: none;
-  overflow: hidden;
-  font-family: ${(p) => p.theme.fontFamily};
+const DialogContent = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();

-  ${noScrollBar}
-
-  /* open from bottom on mobile */
-  ${media.mobile} {
-    top: auto;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    max-width: 100vw;
-    transform: none;
-    width: 100vw;
-    animation: ${modalAnimationMobile} 0.35s cubic-bezier(0.15, 1.15, 0.6, 1);
-    border-radius: ${radius.xxl};
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    max-width: none !important;
-  }
-
-  & *::selection {
-    background-color: ${(p) => p.theme.colors.selectedTextBg};
-    color: ${(p) => p.theme.colors.selectedTextColor};
-  }
-`;
+  return {
+    zIndex: 10000,
+    background: theme.colors.modalBg,
+    "--bg": theme.colors.modalBg,
+    color: theme.colors.primaryText,
+    borderRadius: radius.xl,
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "calc(100vw - 40px)",
+    boxSizing: "border-box",
+    animation: `${modalAnimationDesktop} 300ms ease`,
+    boxShadow: shadow.lg,
+    lineHeight: "normal",
+    border: `1px solid ${theme.colors.borderColor}`,
+    outline: "none",
+    overflow: "hidden",
+    fontFamily: theme.fontFamily,
+    [media.mobile]: {
+      top: "auto",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      transform: "none",
+      width: "100vw",
+      animation: `${modalAnimationMobile} 0.35s cubic-bezier(0.15, 1.15, 0.6, 1)`,
+      borderRadius: radius.xxl,
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0,
+      maxWidth: "none !important",
+    },
+    "& *::selection": {
+      backgroundColor: theme.colors.selectedTextBg,
+      color: theme.colors.selectedTextColor,
+    },
+    ...noScrollBar,
+  };
+});
@@ -3,6 +3,7 @@ import { Input } from "./formElements";
 import { Container } from "./basic";
 import { media, fontSize, spacing } from "../design-system";
 import styled from "@emotion/styled";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export function OTPInput(props: {
  digits: number;
@@ -115,20 +116,23 @@ export function OTPInput(props: {
  );
 }

-const OTPInputBox = /* @__PURE__ */ styled(Input)`
-  appearance: none;
-  -webkit-appearance: none;
-  width: 40px;
-  height: 40px;
-  text-align: center;
-  font-size: ${fontSize.md};
-  padding: ${spacing.xs};
-  ${media.mobile} {
-    width: 35px;
-    height: 35px;
-  }
-  &[data-verify-status="invalid"] {
-    color: ${(p) => p.theme.colors.danger};
-    border-color: ${(p) => p.theme.colors.danger};
-  }
-`;
+const OTPInputBox = /* @__PURE__ */ styled(Input)(() => {
+  const theme = useCustomTheme();
+  return {
+    appearance: "none",
+    WebkitAppearance: "none",
+    width: "40px",
+    height: "40px",
+    textAlign: "center",
+    fontSize: fontSize.md,
+    padding: spacing.xs,
+    [media.mobile]: {
+      width: "35px",
+      height: "35px",
+    },
+    "&[data-verify-status='invalid']": {
+      color: theme.colors.danger,
+      borderColor: theme.colors.danger,
+    },
+  };
+});
@@ -1,6 +1,6 @@
-import type { Theme } from "../design-system";
 import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
+import { StyledDiv } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 const overlayEnter = keyframes`
 from {
@@ -11,11 +11,14 @@ const overlayEnter = keyframes`
  }
 `;

-export const Overlay = styled.div<{ theme?: Theme }>`
-  background-color: ${(p) => p.theme.colors.modalOverlayBg};
-  z-index: 9999;
-  position: fixed;
-  inset: 0;
-  animation: ${overlayEnter} 400ms cubic-bezier(0.16, 1, 0.3, 1);
-  backdrop-filter: blur(10px);
-`;
+export const Overlay = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    backgroundColor: theme.colors.modalOverlayBg,
+    zIndex: 9999,
+    position: "fixed",
+    inset: 0,
+    animation: `${overlayEnter} 400ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    backdropFilter: "blur(10px)",
+  };
+});
@@ -1,14 +1,9 @@
-import {
-  fontSize,
-  radius,
-  shadow,
-  spacing,
-  type Theme,
-} from "../design-system";
+import { fontSize, radius, shadow, spacing } from "../design-system";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import * as RXPopover from "@radix-ui/react-popover";
 import { Container } from "./basic";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export type PopoverProps = {
  children: React.ReactNode;
@@ -53,21 +48,25 @@ from {
  }
 `;

-const PopoverContent = /* @__PURE__ */ (() => styled(RXPopover.Content)<{
-  theme?: Theme;
-}>`
-  border-radius: ${radius.sm};
-  padding: ${spacing.sm} ${spacing.md};
-  background-color: ${(p) => p.theme.colors.tooltipBg};
-  box-shadow: ${shadow.md};
-  will-change: transform, opacity;
-  animation: ${slideUpAndFade} 400ms cubic-bezier(0.16, 1, 0.3, 1);
-  color: ${(p) => p.theme.colors.tooltipText};
-  font-size: ${fontSize.md};
-`)();
+const PopoverContent = /* @__PURE__ */ (() =>
+  styled(RXPopover.Content)(() => {
+    const theme = useCustomTheme();
+    return {
+      borderRadius: radius.sm,
+      padding: `${spacing.sm} ${spacing.md}`,
+      backgroundColor: theme.colors.tooltipBg,
+      boxShadow: shadow.md,
+      willChange: "transform, opacity",
+      animation: `${slideUpAndFade} 400ms cubic-bezier(0.16, 1, 0.3, 1)`,
+      color: theme.colors.tooltipText,
+      fontSize: fontSize.md,
+    };
+  }))();

-const PopoverArrow = /* @__PURE__ */ (() => styled(RXPopover.Arrow)<{
-  theme?: Theme;
-}>`
-  fill: ${(p) => p.theme.colors.tooltipBg};
-`)();
+const PopoverArrow = /* @__PURE__ */ (() =>
+  styled(RXPopover.Arrow)(() => {
+    const theme = useCustomTheme();
+    return {
+      fill: theme.colors.tooltipBg,
+    };
+  }))();
@@ -1,9 +1,10 @@
 import { keyframes } from "@emotion/react";
-import { Theme, radius } from "../design-system";
-import styled from "@emotion/styled";
+import { radius } from "../design-system";
 import QRCodeUtil from "qrcode";
 import React, { ReactElement, useMemo } from "react";
 import { fadeInAnimation } from "../design-system/animations";
+import { StyledDiv } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export const QRCode: React.FC<{
  qrCodeUri?: string;
@@ -48,23 +49,26 @@ export const QRCode: React.FC<{
  );
 };

-const IconContainer = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  z-index: 1000;
-`;
+const IconContainer = /* @__PURE__ */ StyledDiv({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  display: "flex",
+  justifyContent: "center",
+  alignContent: "center",
+  zIndex: 1000,
+});

-const QRCodeContainer = styled.div<{ theme?: Theme }>`
-  animation: ${fadeInAnimation} 600ms ease;
-  --ck-qr-dot-color: ${(p) => p.theme.colors.primaryText};
-  --ck-body-background: ${(p) => p.theme.colors.modalBg};
-  --ck-qr-background: ${(p) => p.theme.colors.modalBg};
-`;
+const QRCodeContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    animation: `${fadeInAnimation} 600ms ease`,
+    "--ck-qr-dot-color": theme.colors.primaryText,
+    "--ck-body-background": theme.colors.modalBg,
+    "--ck-qr-background": theme.colors.modalBg,
+  };
+});

 const generateMatrix = (
  value: string,
@@ -98,82 +102,76 @@ export const PlaceholderKeyframes = keyframes`
  100%{ background-position: -100% 0; }
 `;

-export const QRPlaceholder = styled.div<{ theme?: Theme }>`
-  --color: ${(p) => p.theme.colors.skeletonBg};
-  --bg: ${(p) => p.theme.colors.modalBg};
-
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${radius.md};
-
-  > div {
-    z-index: 4;
-    position: relative;
-    width: 28%;
-    height: 28%;
-    border-radius: 5px;
-    background: var(--bg);
-    box-shadow: 0 0 0 7px var(--bg);
-  }
-
-  > span {
-    z-index: 4;
-    position: absolute;
-    background: var(--color);
-    border-radius: 12px;
-    width: 13.25%;
-    height: 13.25%;
-    box-shadow: 0 0 0 4px var(--bg);
-    &:before {
-      content: "";
-      position: absolute;
-      inset: 9px;
-      border-radius: 3px;
-      box-shadow: 0 0 0 4px var(--bg);
-    }
-    &[data-v1] {
-      top: 0;
-      left: 0;
-    }
-    &[data-v2] {
-      top: 0;
-      right: 0;
-    }
-    &[data-v3] {
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &:before {
-    z-index: 3;
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: repeat;
-    background-size: 1.888% 1.888%;
-    background-image: radial-gradient(var(--color) 41%, transparent 41%);
-  }
-
-  &:after {
-    z-index: 100;
-    content: "";
-    position: absolute;
-    inset: 0;
-    transform: scale(1.5) rotate(45deg);
-    background-image: linear-gradient(
-      90deg,
-      transparent 50%,
-      ${(p) => p.theme.colors.skeletonBg},
-      transparent
-    );
-    background-size: 200% 100%;
-    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
-  }
-`;
+export const QRPlaceholder = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    "--color": theme.colors.skeletonBg,
+    "--bg": theme.colors.modalBg,
+    overflow: "hidden",
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: radius.md,
+    "> div": {
+      zIndex: 4,
+      position: "relative",
+      width: "28%",
+      height: "28%",
+      borderRadius: "5px",
+      background: "var(--bg)",
+      boxShadow: "0 0 0 7px var(--bg)",
+    },
+    "> span": {
+      zIndex: 4,
+      position: "absolute",
+      background: "var(--color)",
+      borderRadius: "12px",
+      width: "13.25%",
+      height: "13.25%",
+      boxShadow: "0 0 0 4px var(--bg)",
+      "&:before": {
+        content: '""',
+        position: "absolute",
+        inset: "9px",
+        borderRadius: "3px",
+        boxShadow: "0 0 0 4px var(--bg)",
+      },
+      "&[data-v1]": {
+        top: 0,
+        left: 0,
+      },
+      "&[data-v2]": {
+        top: 0,
+        right: 0,
+      },
+      "&[data-v3]": {
+        bottom: 0,
+        left: 0,
+      },
+    },
+    "&:before": {
+      zIndex: 3,
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      background: "repeat",
+      backgroundSize: "1.888% 1.888%",
+      backgroundImage: "radial-gradient(var(--color) 41%, transparent 41%)",
+    },
+    "&::after": {
+      zIndex: 100,
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      transform: "scale(1.5) rotate(45deg)",
+      background:
+        "linear-gradient(90deg, transparent 50%, var(--color), transparent)",
+      backgroundSize: "200% 100%",
+      animation: `${PlaceholderKeyframes} 1000ms linear infinite both`,
+    },
+  };
+});

 export function QRCodeRenderer({
  ecl = "M",
@@ -1,6 +1,7 @@
-import { radius, Theme } from "../design-system";
+import { radius } from "../design-system";
 import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
+import { StyledDiv } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export const Skeleton: React.FC<{
  height: string;
@@ -25,9 +26,12 @@ const skeletonAnimation = keyframes`
  }
 `;

-const SkeletonDiv = styled.div<{ theme?: Theme }>`
-  background-size: 200% 200%;
-  background-color: ${(p) => p.theme.colors.skeletonBg};
-  animation: ${skeletonAnimation} 500ms ease-in-out infinite alternate;
-  border-radius: ${radius.sm};
-`;
+const SkeletonDiv = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    backgroundSize: "200% 200%",
+    backgroundColor: theme.colors.skeletonBg,
+    animation: `${skeletonAnimation} 500ms ease-in-out infinite alternate`,
+    borderRadius: radius.sm,
+  };
+});
@@ -1,12 +1,13 @@
 import { iconSize, type Theme } from "../design-system";
-import { keyframes, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { StyledCircle, StyledSvg } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export const Spinner: React.FC<{
  color: keyof Theme["colors"];
  size: keyof typeof iconSize;
 }> = (props) => {
-  const theme = useTheme() as Theme;
+  const theme = useCustomTheme();
  return (
    <Svg
      style={{
@@ -29,7 +30,7 @@ export const Spinner: React.FC<{

 // animations
 const dashAnimation = keyframes`
- 0% {
+  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
@@ -44,19 +45,18 @@ const dashAnimation = keyframes`
 `;

 const rotateAnimation = keyframes`
-100% {
+  100% {
    transform: rotate(360deg);
  }
 `;

-// styles
-const Svg = styled.svg`
-  animation: ${rotateAnimation} 2s linear infinite;
-  width: 1em;
-  height: 1em;
-`;
+const Svg = /* @__PURE__ */ StyledSvg({
+  animation: `${rotateAnimation} 2s linear infinite`,
+  width: "1em",
+  height: "1em",
+});

-const Circle = styled.circle`
-  stroke-linecap: round;
-  animation: ${dashAnimation} 1.5s ease-in-out infinite;
-`;
+const Circle = /* @__PURE__ */ StyledCircle({
+  strokeLinecap: "round",
+  animation: `${dashAnimation} 1.5s ease-in-out infinite`,
+});
@@ -1,5 +1,6 @@
-import styled from "@emotion/styled";
-import { fontSize, spacing, Theme } from "../design-system";
+import { fontSize, spacing } from "../design-system";
+import { StyledDiv } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export const TextDivider = (props: {
  text: string;
@@ -16,19 +17,20 @@ export const TextDivider = (props: {
  );
 };

-export const TextDividerEl = styled.div<{ theme?: Theme }>`
-  display: flex;
-  align-items: center;
-  color: ${(p) => p.theme.colors.secondaryText};
-  font-size: ${fontSize.sm};
-  &::before,
-  &::after {
-    content: "";
-    flex: 1;
-    border-bottom: 1px solid ${(p) => p.theme.colors.separatorLine};
-  }
-
-  span {
-    margin: 0 1rem;
-  }
-`;
+export const TextDividerEl = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    display: "flex",
+    alignItems: "center",
+    color: theme.colors.secondaryText,
+    fontSize: fontSize.sm,
+    "&::before, &::after": {
+      content: '""',
+      flex: 1,
+      borderBottom: `1px solid ${theme.colors.separatorLine}`,
+    },
+    span: {
+      margin: "0 16px",
+    },
+  };
+});
@@ -1,7 +1,8 @@
-import { fontSize, radius, shadow, spacing, Theme } from "../design-system";
+import { fontSize, radius, shadow, spacing } from "../design-system";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

 export const ToolTip: React.FC<{
  children: React.ReactNode;
@@ -40,26 +41,29 @@ to {
 }
 `;

-const TooltipContent = /* @__PURE__ */ (() => styled(RadixTooltip.Content)<{
-  theme?: Theme;
-}>`
-  background: ${(p) => p.theme.colors.tooltipBg};
-  color: ${(p) => p.theme.colors.tooltipText};
-  border-radius: ${radius.sm};
-  line-height: normal;
-  padding: ${spacing.sm} ${spacing.md};
-  font-size: ${fontSize.sm};
-  box-shadow: ${shadow.sm};
-  user-select: none;
-  will-change: transform, opacity;
-  animation: ${slideUpAndFade} 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 999999999999999;
-  max-width: 300px;
-  line-height: 1.5;
-`)();
+const TooltipContent = /* @__PURE__ */ (() =>
+  styled(RadixTooltip.Content)(() => {
+    const theme = useCustomTheme();
+    return {
+      background: theme.colors.tooltipBg,
+      color: theme.colors.tooltipText,
+      borderRadius: radius.sm,
+      padding: `${spacing.sm} ${spacing.md}`,
+      fontSize: fontSize.sm,
+      boxShadow: shadow.sm,
+      userSelect: "none",
+      willChange: "transform, opacity",
+      animation: `${slideUpAndFade} 200ms cubic-bezier(0.16, 1, 0.3, 1)`,
+      zIndex: 999999999999999,
+      maxWidth: "300px",
+      lineHeight: 1.5,
+    };
+  }))();

-const TooltipArrow = /* @__PURE__ */ (() => styled(RadixTooltip.Arrow)<{
-  theme?: Theme;
-}>`
-  fill: ${(p) => p.theme.colors.tooltipBg};
-`)();
+const TooltipArrow = /* @__PURE__ */ (() =>
+  styled(RadixTooltip.Arrow)(() => {
+    const theme = useCustomTheme();
+    return {
+      fill: theme.colors.tooltipBg,
+    };
+  }))();
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { Theme, iconSize, spacing } from "../design-system";
 import { BackButton, ModalTitle } from "./modalElements";
 import { Img } from "./Img";
@@ -7,22 +6,28 @@ import {
  floatDownAnimation,
  floatUpAnimation,
 } from "../design-system/animations";
+import { StyledDiv } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";
+import type { CSSObject } from "@emotion/react";

-export const ScreenBottomContainer = styled.div<{ theme?: Theme }>`
-  border-top: 1px solid ${(p) => p.theme.colors.separatorLine};
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.lg};
-  padding: ${spacing.lg};
-`;
+export const ScreenBottomContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    borderTop: `1px solid ${theme.colors.separatorLine}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: spacing.lg,
+    padding: spacing.lg,
+  };
+});

-export const noScrollBar = `
-scrollbar-width: none;
-&::-webkit-scrollbar {
-  width: 0px;
-  display: none;
-}
-`;
+export const noScrollBar: CSSObject = /* @__PURE__ */ {
+  scrollbarWidth: "none",
+  "&::-webkit-scrollbar": {
+    width: 0,
+    display: "none",
+  },
+};

 export function ModalHeader(props: {
  onBack?: () => void;
@@ -59,12 +64,13 @@ export function ModalHeader(props: {
  );
 }

-export const Line = styled.div<{
-  theme?: Theme;
-}>`
-  height: 1px;
-  background: ${(p) => p.theme.colors.separatorLine};
-`;
+export const Line = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    height: "1px",
+    background: theme.colors.separatorLine,
+  };
+});

 export function Container(props: {
  animate?: "fadein" | "floatup" | "floatdown";
@@ -165,26 +171,29 @@ export function Container(props: {
  );
 }

-const Box = styled.div<{ theme?: Theme; color?: keyof Theme["colors"] }>`
-  color: ${(p) => (p.color ? p.theme.colors[p.color] : "inherit")};
+type BoxProps = {
+  color?: keyof Theme["colors"];
+};

-  &[data-animate="fadein"] {
-    opacity: 0;
-    animation: ${fadeInAnimation} 350ms ease forwards;
-  }
-
-  &[data-animate="floatup"] {
-    opacity: 0;
-    animation: ${floatUpAnimation} 350ms ease forwards;
-  }
-
-  &[data-animate="floatdown"] {
-    opacity: 0;
-    animation: ${floatDownAnimation} 350ms ease forwards;
-  }
-
-  &[data-scrolly="true"] {
-    overflow-y: auto;
-    ${noScrollBar}
-  }
-`;
+const Box = /* @__PURE__ */ StyledDiv((props: BoxProps) => {
+  const theme = useCustomTheme();
+  return {
+    color: props.color ? theme.colors[props.color] : "inherit",
+    "&[data-animate='fadein']": {
+      opacity: 0,
+      animation: `${fadeInAnimation} 350ms ease forwards`,
+    },
+    "&[data-animate='floatup']": {
+      opacity: 0,
+      animation: `${floatUpAnimation} 350ms ease forwards`,
+    },
+    "&[data-animate='floatdown']": {
+      opacity: 0,
+      animation: `${floatDownAnimation} 350ms ease forwards`,
+    },
+    "&[data-scrolly='true']": {
+      overflowY: "auto",
+      ...noScrollBar,
+    },
+  };
+});
@@ -1,135 +1,134 @@
 import { fontSize, radius, spacing, Theme } from "../design-system";
-import styled from "@emotion/styled";
+import { StyledButton } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

-export const Button = styled.button<{
+type ButtonProps = {
  variant: "primary" | "secondary" | "link" | "accent" | "outline";
  theme?: Theme;
  fullWidth?: boolean;
  gap?: keyof typeof spacing;
-}>`
-  all: unset;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${radius.md};
-  padding: ${fontSize.sm} ${fontSize.sm};
-  font-size: ${fontSize.md};
-  font-weight: 500;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  line-height: normal;
-  flex-shrink: 0;
-  transition: border 200ms ease;
-  gap: ${(p) => (p.gap && spacing[p.gap]) || 0};
+};

-  ${(p) => p.fullWidth && `width: 100%;`};
-
-  background: ${(p) => {
-    switch (p.variant) {
-      case "primary":
-        return p.theme.colors.primaryButtonBg;
-      case "accent":
-        return p.theme.colors.accentButtonBg;
-      case "secondary":
-        return p.theme.colors.secondaryButtonBg;
-      default:
-        return "none";
-    }
-  }};
-
-  color: ${(p) => {
-    switch (p.variant) {
-      case "primary":
-        return p.theme.colors.primaryButtonText;
-      case "accent":
-        return p.theme.colors.accentButtonText;
-      case "secondary":
-        return p.theme.colors.secondaryButtonText;
-      case "outline":
-        return p.theme.colors.secondaryButtonText;
-      case "link":
-        return p.theme.colors.accentText;
-      default:
-        return p.theme.colors.primaryButtonText;
-    }
-  }};
-
-  ${(p) => {
-    if (p.variant === "outline") {
-      return `
-      border: 1.5px solid ${p.theme.colors.borderColor};
-      &:hover {
-        border-color: ${p.theme.colors.accentText};
+export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: radius.md,
+    padding: `${fontSize.sm} ${fontSize.sm}`,
+    fontSize: fontSize.md,
+    fontWeight: 500,
+    boxSizing: "border-box",
+    WebkitTapHighlightColor: "transparent",
+    lineHeight: "normal",
+    flexShrink: 0,
+    transition: "border 200ms ease",
+    gap: (props.gap && spacing[props.gap]) || 0,
+    width: props.fullWidth ? "100%" : undefined,
+    background: (() => {
+      switch (props.variant) {
+        case "primary":
+          return theme.colors.primaryButtonBg;
+        case "accent":
+          return theme.colors.accentButtonBg;
+        case "secondary":
+          return theme.colors.secondaryButtonBg;
+        default:
+          return "none";
      }
-    `;
-    }
-
-    if (p.variant === "secondary") {
-      return `
-      &:hover {
-        background: ${p.theme.colors.secondaryButtonHoverBg};
+    })(),
+    color: (() => {
+      switch (props.variant) {
+        case "primary":
+          return theme.colors.primaryButtonText;
+        case "accent":
+          return theme.colors.accentButtonText;
+        case "secondary":
+          return theme.colors.secondaryButtonText;
+        case "outline":
+          return theme.colors.secondaryButtonText;
+        case "link":
+          return theme.colors.accentText;
+        default:
+          return theme.colors.primaryButtonText;
+      }
+    })(),
+    "&:active": {
+      transform: "translateY(1px)",
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+    },
+    ...(() => {
+      if (props.variant === "outline") {
+        return {
+          border: `1.5px solid ${theme.colors.borderColor}`,
+          "&:hover": {
+            borderColor: theme.colors.accentText,
+          },
+        };
      }
-    `;
-    }
-  }}

-  ${(p) => {
-    if (p.variant === "link") {
-      return `
-      padding: 0;
-      &:hover {
-        color: ${p.theme.colors.primaryText};
-      }`;
-    }
-  }}
+      if (props.variant === "secondary") {
+        return {
+          "&:hover": {
+            background: theme.colors.secondaryButtonHoverBg,
+          },
+        };
+      }

-  /* pressed effect */
-  &:active {
-    transform: translateY(1px);
-  }
+      if (props.variant === "link") {
+        return {
+          padding: 0,
+          "&:hover": {
+            color: theme.colors.primaryText,
+          },
+        };
+      }
+    })(),
+  };
+});

-  &[disabled] {
-    cursor: not-allowed;
-  }
-`;
+export const IconButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: radius.sm,
+    WebkitTapHighlightColor: "transparent",
+    color: theme.colors.secondaryIconColor,
+    padding: "2px",
+    transition: "background 200ms ease, color 200ms ease",
+    "&:hover": {
+      background: theme.colors.secondaryIconHoverBg,
+      color: theme.colors.secondaryIconHoverColor,
+    },
+  };
+});

-export const IconButton = styled.button<{
-  theme?: Theme;
-}>`
-  all: unset;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${radius.sm};
-  -webkit-tap-highlight-color: transparent;
-  color: ${(p) => p.theme.colors.secondaryIconColor};
-  padding: 2px;
-  transition:
-    background 0.2s ease,
-    color 0.2s ease;
-
-  &:hover {
-    background: ${(p) => p.theme.colors.secondaryIconHoverBg};
-    color: ${(p) => p.theme.colors.secondaryIconHoverColor};
-  }
-`;
-
-export const InputButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${radius.sm};
-  padding: ${spacing.sm};
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  color: ${(p) => p.theme.colors.secondaryText};
-  &:hover {
-    color: ${(p) => p.theme.colors.primaryText};
-  }
-  &[disabled] {
-    cursor: not-allowed;
-  }
-`;
+export const InputButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: radius.sm,
+    padding: spacing.sm,
+    cursor: "pointer",
+    WebkitTapHighlightColor: "transparent",
+    color: theme.colors.secondaryText,
+    "&:hover": {
+      color: theme.colors.primaryText,
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+    },
+  };
+});
@@ -1,113 +1,100 @@
 import { fontSize, radius, Theme, spacing } from "../design-system";
-import styled from "@emotion/styled";
+import { StyledDiv, StyledInput, StyledLabel } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

-export const Label = styled.label<{
-  theme?: Theme;
+type LabelProps = {
  color?: keyof Theme["colors"];
-}>`
-  font-size: ${fontSize.sm};
-  color: ${(p) => p.theme.colors[p.color || "primaryText"]};
-  display: block;
-  font-weight: 500;
-`;
+};

-export const Input = styled.input<{
+export const Label = /* @__PURE__ */ StyledLabel((props: LabelProps) => {
+  const theme = useCustomTheme();
+  return {
+    fontSize: fontSize.sm,
+    color: theme.colors[props.color || "primaryText"],
+    display: "block",
+    fontWeight: 500,
+  };
+});
+
+type InputProps = {
  variant: "outline" | "transparent";
  sm?: boolean;
  theme?: Theme;
-}>`
-  font-size: ${fontSize.md};
-  display: block;
-  padding: ${(p) => (p.sm ? spacing.sm : fontSize.sm)};
-  box-sizing: border-box;
-  width: 100%;
-  outline: none;
-  border: none;
-  border-radius: 6px;
-  color: ${(p) => p.theme.colors.primaryText};
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
+};

-  &::placeholder {
-    color: ${(p) => p.theme.colors.secondaryText};
-  }
-
-  box-shadow: 0 0 0 1.5px
-    ${(p) => {
-      switch (p.variant) {
-        case "outline":
-          return p.theme.colors.borderColor;
-        default:
-          return "transparent";
-      }
-    }};
-
-  /* when browser auto-fills the input  */
-  &:-webkit-autofill {
-    -webkit-text-fill-color: ${(p) => p.theme.colors.primaryText};
-    -webkit-box-shadow: 0 0 0px 1000px ${(p) => p.theme.colors.inputAutofillBg}
-      inset !important;
-    box-shadow: 0 0 0px 1000px ${(p) => p.theme.colors.inputAutofillBg} inset !important;
-    transition: background-color 5000s ease-in-out 0s;
-  }
-
-  &:-webkit-autofill:focus {
-    -webkit-box-shadow:
-      0 0 0px 1000px ${(p) => p.theme.colors.inputAutofillBg} inset,
-      0 0 0 2px ${(p) => p.theme.colors.accentText} !important;
-    box-shadow:
-      0 0 0px 1000px ${(p) => p.theme.colors.inputAutofillBg} inset,
-      0 0 0 2px ${(p) => p.theme.colors.accentText} !important;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 2px ${(p) => p.theme.colors.accentText};
-  }
-
-  /* show overflow ellipsis for long text - but not if it's a type="password"  */
-  &:not([type="password"]) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &[data-error="true"] {
-    box-shadow: 0 0 0 2px ${(p) => p.theme.colors.danger} !important;
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-  }
-
-  &[type="number"]::-webkit-outer-spin-button,
-  &[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &[type="number"] {
-    appearance: none;
-    -moz-appearance: textfield;
-  }
-`;
+export const Input = /* @__PURE__ */ StyledInput((props: InputProps) => {
+  const theme = useCustomTheme();
+  return {
+    fontSize: fontSize.md,
+    display: "block",
+    padding: props.sm ? spacing.sm : fontSize.sm,
+    boxSizing: "border-box",
+    width: "100%",
+    outline: "none",
+    border: "none",
+    borderRadius: "6px",
+    color: theme.colors.primaryText,
+    WebkitAppearance: "none",
+    appearance: "none",
+    background: "transparent",
+    "&::placeholder": {
+      color: theme.colors.secondaryText,
+    },
+    boxShadow: `0 0 0 1.5px ${
+      props.variant === "outline" ? theme.colors.borderColor : "transparent"
+    }`,
+    "&:-webkit-autofill": {
+      WebkitTextFillColor: theme.colors.primaryText,
+      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.inputAutofillBg} inset !important`,
+      boxShadow: `0 0 0px 1000px ${theme.colors.inputAutofillBg} inset !important`,
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+    "&:-webkit-autofill:focus": {
+      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.inputAutofillBg} inset, 0 0 0 2px ${theme.colors.accentText} !important`,
+      boxShadow: `0 0 0px 1000px ${theme.colors.inputAutofillBg} inset, 0 0 0 2px ${theme.colors.accentText} !important`,
+    },
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.accentText}`,
+    },
+    "&:not([type='password'])": {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    "&[data-error='true']": {
+      boxShadow: `0 0 0 2px ${theme.colors.danger} !important`,
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+    },
+    "&[type='number']::-webkit-outer-spin-button, &[type='number']::-webkit-inner-spin-button":
+      {
+        WebkitAppearance: "none",
+        margin: 0,
+      },
+    "&[type='number']": {
+      appearance: "none",
+      MozAppearance: "textfield",
+    },
+  };
+});

 // for rendering a input and a button side by side
-export const InputContainer = styled.div<{ theme?: Theme }>`
-  display: flex;
-  border-radius: ${radius.sm};
-  box-shadow: 0 0 0px 1.5px ${(p) => p.theme.colors.borderColor};
-
-  /* show focus ring on container instead of input  */
-  &:focus-within {
-    box-shadow: 0 0 0px 2px ${(p) => p.theme.colors.accentText};
-  }
-
-  input:focus {
-    box-shadow: none;
-  }
-
-  /* show error ring on container instead of input  */
-  &[data-error="true"] {
-    box-shadow: 0 0 0px 2px ${(p) => p.theme.colors.danger};
-  }
-`;
+export const InputContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    display: "flex",
+    borderRadius: radius.sm,
+    boxShadow: `0 0 0px 1.5px ${theme.colors.borderColor}`,
+    "&:focus-within": {
+      boxShadow: `0 0 0px 2px ${theme.colors.accentText}`,
+    },
+    "input:focus": {
+      boxShadow: "none",
+    },
+    // show error ring on container instead of input
+    "&[data-error='true']": {
+      boxShadow: `0 0 0px 2px ${theme.colors.danger}`,
+    },
+  };
+});
@@ -1,38 +1,47 @@
-import { type Theme, fontSize, media } from "../design-system";
+import { fontSize, media } from "../design-system";
 import { iconSize } from "../design-system";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";
+import { StyledAnchor, StyledH2, StyledP } from "../design-system/elements";
 import { IconButton } from "./buttons";
-import styled from "@emotion/styled";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";

-export const ModalTitle = /* @__PURE__ */ styled.h2<{
-  theme?: Theme;
-  centerOnMobile?: boolean;
-}>`
-  margin: 0;
-  font-weight: 600;
-  font-size: ${fontSize.lg};
-  color: ${(p) => p.theme.colors.primaryText};
-  line-height: 1.3;
-  text-align: left;
-  ${media.mobile} {
-    text-align: ${(p) => (p.centerOnMobile ? "center" : "left")};
-  }
-`;
+export const ModalTitle = /* @__PURE__ */ StyledH2(
+  (props: { centerOnMobile?: boolean }) => {
+    const theme = useCustomTheme();
+    return {
+      margin: 0,
+      fontWeight: 600,
+      fontSize: fontSize.lg,
+      color: theme.colors.primaryText,
+      lineHeight: 1.3,
+      textAlign: "left",
+      [media.mobile]: {
+        textAlign: props.centerOnMobile ? "center" : "left",
+      },
+    };
+  },
+);

-export const ModalDescription = styled.p<{
-  theme?: Theme;
+type ModalDescriptionProps = {
  centerOnMobile?: boolean;
  sm?: boolean;
-}>`
-  all: unset;
-  display: block;
-  font-size: ${(p) => (p.sm ? fontSize.sm : fontSize.md)};
-  color: ${(p) => p.theme.colors.secondaryText};
-  line-height: 1.5;
-  ${media.mobile} {
-    text-align: ${(p) => (p.centerOnMobile ? "center" : "left")};
-  }
-`;
+};
+
+export const ModalDescription = /* @__PURE__ */ StyledP(
+  (props: ModalDescriptionProps) => {
+    const theme = useCustomTheme();
+    return {
+      all: "unset",
+      display: "block",
+      fontSize: props.sm ? fontSize.sm : fontSize.md,
+      color: theme.colors.secondaryText,
+      lineHeight: 1.5,
+      [media.mobile]: {
+        textAlign: props.centerOnMobile ? "center" : "left",
+      },
+    };
+  },
+);

 export const BackButton: React.FC<{
  onClick: () => void;
@@ -49,19 +58,24 @@ export const BackButton: React.FC<{
  );
 };

-export const HelperLink = styled.a<{ theme?: Theme; md?: boolean }>`
-  all: unset;
-  cursor: pointer;
-  color: ${(p) => p.theme.colors.accentText};
-  font-size: ${(p) => (p.md ? fontSize.md : fontSize.sm)};
-  text-decoration: none;
-  display: block;
-  line-height: 1.5;
-  ${media.mobile} {
-    text-align: center;
-  }
-  &:hover {
-    color: ${(p) => p.theme.colors.primaryText};
-    text-decoration: none;
-  }
-`;
+export const HelperLink = /* @__PURE__ */ StyledAnchor(
+  (props: { md?: boolean }) => {
+    const theme = useCustomTheme();
+    return {
+      all: "unset",
+      cursor: "pointer",
+      color: theme.colors.accentText,
+      fontSize: props.md ? fontSize.md : fontSize.sm,
+      textDecoration: "none",
+      display: "block",
+      lineHeight: 1.5,
+      [media.mobile]: {
+        textAlign: "center",
+      },
+      "&:hover": {
+        color: theme.colors.primaryText,
+        textDecoration: "none",
+      },
+    };
+  },
+);
@@ -1,7 +1,8 @@
-import styled from "@emotion/styled";
 import { fontSize, Theme } from "../design-system";
+import { StyledAnchor, StyledSpan } from "../design-system/elements";
+import { useCustomTheme } from "../design-system/CustomThemeProvider";

-export const Text = styled.span<{
+type TextProps = {
  theme?: Theme;
  color?: keyof Theme["colors"];
  center?: boolean;
@@ -10,21 +11,26 @@ export const Text = styled.span<{
  weight?: 400 | 500 | 600 | 700;
  multiline?: boolean;
  balance?: boolean;
-}>`
-  font-size: ${(p) => fontSize[p.size || "md"]};
-  color: ${(p) => p.theme.colors[p.color || "secondaryText"]};
-  margin: 0;
-  display: ${(p) => (p.inline ? "inline" : "block")};
-  font-weight: ${(p) => p.weight || 500};
-  line-height: ${(p) => (p.multiline ? 1.5 : "normal")};
-  ${(p) => (p.center ? `text-align: center;` : "")};
-  text-wrap: ${(p) => (p.balance ? "balance" : "inherit")};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
+};

-export const Link = styled.a<{
+export const Text = /* @__PURE__ */ StyledSpan((p: TextProps) => {
+  const theme = useCustomTheme();
+  return {
+    fontSize: fontSize[p.size || "md"],
+    color: theme.colors[p.color || "secondaryText"],
+    margin: 0,
+    display: p.inline ? "inline" : "block",
+    fontWeight: p.weight || 500,
+    lineHeight: p.multiline ? 1.5 : "normal",
+    textAlign: p.center ? "center" : "left",
+    textWrap: p.balance ? "balance" : "inherit",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  };
+});
+
+type LinkProps = {
  theme?: Theme;
  size?: keyof typeof fontSize;
  weight?: 400 | 500 | 600 | 700;
@@ -32,20 +38,24 @@ export const Link = styled.a<{
  center?: boolean;
  color?: keyof Theme["colors"];
  hoverColor?: keyof Theme["colors"];
-}>`
-  all: unset;
-  cursor: pointer;
-  color: ${(p) => p.theme.colors[p.color || "accentText"]};
-  font-size: ${(p) => fontSize[p.size || "md"]};
-  text-decoration: none;
-  text-align: ${(p) => (p.center ? "center" : "left")};
-  display: ${(p) => (p.inline ? "inline" : "block")};
-  font-weight: ${(p) => p.weight || 500};
-  line-height: normal;
-  transition: color 0.2s ease;
+};

-  &:hover {
-    color: ${(p) => p.theme.colors[p.hoverColor || "primaryText"]};
-    text-decoration: none;
-  }
-`;
+export const Link = /* @__PURE__ */ StyledAnchor((p: LinkProps) => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    cursor: "pointer",
+    color: theme.colors[p.color || "accentText"],
+    fontSize: fontSize[p.size || "md"],
+    textDecoration: "none",
+    textAlign: p.center ? "center" : "left",
+    display: p.inline ? "inline" : "block",
+    fontWeight: p.weight || 500,
+    lineHeight: "normal",
+    transition: "color 0.2s ease",
+    "&:hover": {
+      color: theme.colors[p.hoverColor || "primaryText"],
+      textDecoration: "none",
+    },
+  };
+});
@@ -1,5 +1,7 @@
-import { ThemeProvider } from "@emotion/react";
 import { Theme, darkThemeObj, lightThemeObj } from "./index";
+import { createContext, useContext } from "react";
+
+const CustomThemeCtx = /* @__PURE__ */ createContext(darkThemeObj);

 export function CustomThemeProvider(props: {
  children: React.ReactNode;
@@ -14,5 +16,13 @@ export function CustomThemeProvider(props: {
    themeObj = theme;
  }

-  return <ThemeProvider theme={themeObj}>{children}</ThemeProvider>;
+  return (
+    <CustomThemeCtx.Provider value={themeObj}>
+      {children}
+    </CustomThemeCtx.Provider>
+  );
+}
+
+export function useCustomTheme() {
+  return useContext(CustomThemeCtx);
 }
@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+export const StyledDiv = /* @__PURE__ */ styled.div;
+export const StyledSvg = /* @__PURE__ */ styled.svg;
+export const StyledCircle = /* @__PURE__ */ styled.circle;
+export const StyledSpan = /* @__PURE__ */ styled.span;
+export const StyledAnchor = /* @__PURE__ */ styled.a;
+export const StyledButton = /* @__PURE__ */ styled.button;
+export const StyledLabel = /* @__PURE__ */ styled.label;
+export const StyledInput = /* @__PURE__ */ styled.input;
+export const StyledH2 = /* @__PURE__ */ styled.h2;
+export const StyledP = /* @__PURE__ */ styled.p;
+export const StyledUl = /* @__PURE__ */ styled.ul;
+export const StyledSelect = /* @__PURE__ */ styled.select;
@@ -142,26 +142,32 @@ export const shadow = {
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
 };

-export function lightTheme(overrides: ThemeOverrides): Theme {
+export function lightTheme(overrides?: ThemeOverrides): Theme {
+  if (!overrides) {
+    return lightThemeObj;
+  }
  return applyThemeOverrides(lightThemeObj, overrides);
 }

-export function darkTheme(overrides: ThemeOverrides): Theme {
+export function darkTheme(overrides?: ThemeOverrides): Theme {
+  if (!overrides) {
+    return darkThemeObj;
+  }
  return applyThemeOverrides(darkThemeObj, overrides);
 }

 export function applyThemeOverrides(
  baseTheme: Theme,
-  themeOverides: ThemeOverrides,
+  themeOverrides: ThemeOverrides,
 ): Theme {
  const theme = { ...baseTheme };

-  if (themeOverides.colors) {
-    theme.colors = { ...theme.colors, ...themeOverides.colors };
+  if (themeOverrides.colors) {
+    theme.colors = { ...theme.colors, ...themeOverrides.colors };
  }

-  if (themeOverides.fontFamily) {
-    theme.fontFamily = themeOverides.fontFamily;
+  if (themeOverrides.fontFamily) {
+    theme.fontFamily = themeOverrides.fontFamily;
  }

  return theme;
@@ -1,7 +1,7 @@
 import { Popover } from "../../../components/Popover";
 import { Spinner } from "../../../components/Spinner";
 import { Button } from "../../../components/buttons";
-import { Theme, ThemeObjectOrType } from "../../../design-system";
+import { Theme } from "../../../design-system";
 import {
  ConnectWallet,
  ConnectWalletProps,
@@ -20,8 +20,10 @@ import type { SmartContract } from "@thirdweb-dev/sdk";
 import type { CallOverrides, ContractInterface } from "ethers";
 import { PropsWithChildren, useState } from "react";
 import invariant from "tiny-invariant";
-import { CustomThemeProvider } from "../../../design-system/CustomThemeProvider";
-import { useTheme } from "@emotion/react";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../../design-system/CustomThemeProvider";
 import { useTWLocale } from "../../providers/locale-provider";

 type ActionFn = (contract: SmartContract) => any;
@@ -106,7 +108,7 @@ export const Web3Button = <TAction extends ActionFn>(
  const requiresConfirmation = !useIsHeadlessWallet();

  const { contract } = useContract(contractAddress, contractAbi || "custom");
-  const contextTheme = useTheme() as ThemeObjectOrType;
+  const contextTheme = useCustomTheme();
  const theme = props.theme || contextTheme || "dark";

  const locale = useTWLocale();
@@ -2,6 +2,7 @@ import {
  useCreateWalletInstance,
  useSetConnectedWallet,
  useSetConnectionStatus,
+  useWallet,
  useWalletContext,
  useWallets,
 } from "@thirdweb-dev/react-core";
@@ -10,8 +11,13 @@ import {
  type AuthParams,
  EmbeddedWallet,
 } from "@thirdweb-dev/wallets";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { embeddedWallet } from "../../../wallet/wallets/embeddedWallet/embeddedWallet";
+import {
+  UseQueryResult,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";

 /**
 * Hook to authenticate and connect to an embedded wallet
@@ -72,3 +78,30 @@ export function useEmbeddedWallet() {
    sendVerificationEmail,
  };
 }
+
+export function useEmbeddedWalletUserEmail(): UseQueryResult<
+  string | undefined
+> {
+  const wallet = useWallet();
+  const queryClient = useQueryClient();
+
+  const emailQuery = useQuery<string | undefined, string>(
+    [wallet?.walletId, "embeddedWallet-email"],
+    () => {
+      if (wallet && wallet.walletId === walletIds.embeddedWallet) {
+        return (wallet as EmbeddedWallet).getEmail();
+      }
+    },
+    {
+      retry: false,
+      enabled: wallet?.walletId === walletIds.embeddedWallet,
+    },
+  );
+
+  // Invalidate the query when the wallet changes
+  useEffect(() => {
+    queryClient.invalidateQueries([wallet?.walletId, "embeddedWallet-email"]);
+  }, [wallet, queryClient]);
+
+  return emailQuery;
+}
@@ -117,6 +117,7 @@ export function enDefault() {
          approveTransactionInSafe: "Approve transaction in Safe",
          tryAgain: "Try Again",
          failedToSignIn: "Failed to Sign in",
+          inProgress: "Awaiting Confirmation",
        },
      },
    },
@@ -120,6 +120,7 @@ export function esDefault(): ThirdwebLocale {
          approveTransactionInSafe: "Aprobar transacción en Safe",
          tryAgain: "Intentar de nuevo",
          failedToSignIn: "Error al iniciar sesión",
+          inProgress: "Esperando confirmación",
        },
      },
    },
@@ -119,6 +119,7 @@ export function jaDefault(): ThirdwebLocale {
          approveTransactionInSafe: "Safeで取引を承認",
          tryAgain: "再試行",
          failedToSignIn: "サインインに失敗しました",
+          inProgress: "確認待ち",
        },
      },
    },
@@ -1,4 +1,4 @@
-import { Theme, ThemeObjectOrType, iconSize } from "../../design-system";
+import { Theme, iconSize } from "../../design-system";
 import { ConnectedWalletDetails, type DropDownPosition } from "./Details";
 import {
  useAddress,
@@ -24,9 +24,11 @@ import styled from "@emotion/styled";
 import type { NetworkSelectorProps } from "./NetworkSelector";
 import { onModalUnmount } from "./constants";
 import { isMobile } from "../../evm/utils/isMobile";
-import { CustomThemeProvider } from "../../design-system/CustomThemeProvider";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../design-system/CustomThemeProvider";
 import { WelcomeScreen } from "./screens/types";
-import { useTheme } from "@emotion/react";
 import { fadeInAnimation } from "../../design-system/animations";
 import { SupportedTokens, defaultTokens } from "./defaultTokens";
 import { Container } from "../../components/basic";
@@ -153,7 +155,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
 */
 export const ConnectWallet: React.FC<ConnectWalletProps> = (props) => {
  const activeWallet = useWallet();
-  const contextTheme = useTheme() as ThemeObjectOrType;
+  const contextTheme = useCustomTheme();
  const theme = props.theme || contextTheme || "dark";
  const connectionStatus = useConnectionStatus();
  const locale = useTWLocale();
@@ -397,6 +399,6 @@ function SwitchNetworkButton(props: {
  );
 }

-const AnimatedButton = /* @__PURE__ */ styled(Button)`
-  animation: ${fadeInAnimation} 300ms ease;
-`;
+const AnimatedButton = /* @__PURE__ */ styled(Button)({
+  animation: `${fadeInAnimation} 300ms ease`,
+});
@@ -46,6 +46,7 @@ import {
  MetaMaskWallet,
  type SmartWallet,
  walletIds,
+  type EmbeddedWallet,
 } from "@thirdweb-dev/wallets";
 import { Container } from "../../components/basic";
 import { FundsIcon } from "./icons/FundsIcon";
@@ -61,6 +62,18 @@ import { ReceiveFunds } from "./ReceiveFunds";
 import { smartWalletIcon } from "./icons/dataUris";
 import { useTWLocale } from "../../evm/providers/locale-provider";
 import { shortenString } from "@thirdweb-dev/react-core";
+import {
+  StyledButton,
+  StyledDiv,
+  StyledLabel,
+} from "../../design-system/elements";
+import { useCustomTheme } from "../../design-system/CustomThemeProvider";
+import {
+  appleIconUri,
+  facebookIconUri,
+  googleIconUri,
+} from "./icons/socialLogins";
+import { useEmbeddedWalletUserEmail } from "../../evm/hooks/wallets/useEmbeddedWallet";

 export type DropDownPosition = {
  side: "top" | "bottom" | "left" | "right";
@@ -108,7 +121,9 @@ export const ConnectedWalletDetails: React.FC<{
  >();
  const walletContext = useWalletContext();

-  let activeWalletIconURL = activeWalletConfig?.meta.iconURL || "";
+  const [overrideWalletIconUrl, setOverrideWalletIconUrl] = useState<
+    string | undefined
+  >(undefined);

  // modals
  const [showNetworkSelector, setShowNetworkSelector] = useState(false);
@@ -137,15 +152,35 @@ export const ConnectedWalletDetails: React.FC<{

  const shortAddress = address ? shortenString(address) : "";

-  const isSmartWallet = activeWallet?.walletId === walletIds.smartWallet;
-
-  if (isSmartWallet) {
-    activeWalletIconURL = smartWalletIcon;
-  }
-
  const addressOrENS = ensQuery.data?.ens || shortAddress;
  const avatarUrl = ensQuery.data?.avatarUrl;

+  useEffect(() => {
+    if (activeWallet) {
+      if (activeWallet.walletId === walletIds.embeddedWallet) {
+        (activeWallet as EmbeddedWallet)
+          .getLastUsedAuthStrategy()
+          .then((auth) => {
+            if (auth === "apple") {
+              setOverrideWalletIconUrl(appleIconUri);
+            } else if (auth === "google") {
+              setOverrideWalletIconUrl(googleIconUri);
+            } else if (auth === "facebook") {
+              setOverrideWalletIconUrl(facebookIconUri);
+            }
+          });
+      } else if (activeWallet.walletId === walletIds.smartWallet) {
+        setOverrideWalletIconUrl(smartWalletIcon);
+      }
+    } else {
+      setOverrideWalletIconUrl(undefined);
+    }
+  }, [activeWallet]);
+
+  const walletIconUrl =
+    overrideWalletIconUrl || activeWalletConfig?.meta.iconURL || "";
+  const avatarOrWalletIconUrl = avatarUrl || walletIconUrl;
+
  const trigger = props.detailsBtn ? (
    <div>
      <props.detailsBtn />
@@ -160,7 +195,7 @@ export const ConnectedWalletDetails: React.FC<{
      <Img
        width={iconSize.lg}
        height={iconSize.lg}
-        src={avatarUrl || activeWalletIconURL}
+        src={avatarOrWalletIconUrl}
        className={`${TW_CONNECTED_WALLET}__wallet-icon`}
        style={{
          borderRadius: radius.sm,
@@ -254,7 +289,7 @@ export const ConnectedWalletDetails: React.FC<{
        <Img
          width={iconSize.xl}
          height={iconSize.xl}
-          src={avatarUrl || activeWalletIconURL}
+          src={avatarOrWalletIconUrl}
          alt=""
          style={{
            borderRadius: radius.sm,
@@ -328,6 +363,7 @@ export const ConnectedWalletDetails: React.FC<{
      <Spacer y="lg" />

      <ConnectedToSmartWallet />
+      <EmbeddedWalletEmail />

      {/* Send and Receive */}
      <Container
@@ -580,7 +616,7 @@ export const ConnectedWalletDetails: React.FC<{
        open={showReceiveModal}
        setOpen={setShowReceiveModal}
      >
-        <ReceiveFunds iconUrl={activeWalletIconURL} />
+        <ReceiveFunds iconUrl={walletIconUrl} />
      </Modal>
    </>
  );
@@ -597,129 +633,127 @@ const dropdownContentFade = keyframes`
  }
 `;

-const DropDownContent = /* @__PURE__ */ (() => styled(DropdownMenu.Content)<{
-  theme?: Theme;
-}>`
-  width: 360px;
-  box-sizing: border-box;
-  max-width: 100%;
-  border-radius: ${radius.lg};
-  padding: ${spacing.lg};
-  animation: ${dropdownContentFade} 400ms cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-  border: 1px solid ${(props) => props.theme.colors.borderColor};
-  background-color: ${(props) => props.theme.colors.dropdownBg};
-  --bg: ${(props) => props.theme.colors.dropdownBg};
-  z-index: 1000000;
-  line-height: normal;
-`)();
+const DropDownContent = /* @__PURE__ */ (() =>
+  styled(DropdownMenu.Content)(() => {
+    const theme = useCustomTheme();
+    return {
+      width: "360px",
+      boxSizing: "border-box",
+      maxWidth: "100%",
+      borderRadius: radius.lg,
+      padding: spacing.lg,
+      animation: `${dropdownContentFade} 400ms cubic-bezier(0.16, 1, 0.3, 1)`,
+      willChange: "transform, opacity",
+      border: `1px solid ${theme.colors.borderColor}`,
+      backgroundColor: theme.colors.dropdownBg,
+      "--bg": theme.colors.dropdownBg,
+      zIndex: 1000000,
+      lineHeight: "normal",
+    };
+  }))();

-const WalletInfoButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  background: ${(props) => props.theme.colors.connectedButtonBg};
-  border: 1px solid ${(props) => props.theme.colors.borderColor};
-  padding: ${spacing.sm} ${spacing.sm};
-  border-radius: ${radius.lg};
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  min-width: 180px;
-  gap: ${spacing.sm};
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  line-height: normal;
-  animation: ${fadeInAnimation} 300ms ease;
+const WalletInfoButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    background: theme.colors.connectedButtonBg,
+    border: `1px solid ${theme.colors.borderColor}`,
+    padding: `${spacing.sm} ${spacing.sm}`,
+    borderRadius: radius.lg,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    minWidth: "180px",
+    gap: spacing.sm,
+    boxSizing: "border-box",
+    WebkitTapHighlightColor: "transparent",
+    lineHeight: "normal",
+    animation: `${fadeInAnimation} 300ms ease`,
+    [media.mobile]: {
+      gap: spacing.sm,
+      padding: `${spacing.xs} ${spacing.sm}`,
+      img: {
+        width: `${iconSize.md}px`,
+        height: `${iconSize.md}px`,
+      },
+    },
+    "&:hover": {
+      transition: "background 250ms ease",
+      background: theme.colors.connectedButtonBgHover,
+    },
+  };
+});

-  ${media.mobile} {
-    gap: ${spacing.sm};
-    padding: ${spacing.xs} ${spacing.sm};
-    img {
-      width: ${iconSize.md}px;
-      height: ${iconSize.md}px;
-    }
-  }
+const DropdownLabel = /* @__PURE__ */ StyledLabel(() => {
+  const theme = useCustomTheme();
+  return {
+    fontSize: fontSize.sm,
+    color: theme.colors.secondaryText,
+    fontWeight: 500,
+  };
+});

-  &:hover {
-    transition: background 250ms ease;
-    background: ${(props) => props.theme.colors.connectedButtonBgHover};
-  }
-`;
-
-const DropdownLabel = styled.label<{ theme?: Theme }>`
-  font-size: ${fontSize.sm};
-  color: ${(props) => props.theme.colors.secondaryText};
-  font-weight: 500;
-`;
-
-const MenuButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  padding: ${spacing.sm} ${spacing.sm};
-  border-radius: ${radius.md};
-  background-color: transparent;
-  border: 1px solid ${(props) => props.theme.colors.borderColor};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  cursor: pointer;
-  font-size: ${fontSize.md};
-  font-weight: 500;
-  color: ${(props) => props.theme.colors.primaryText} !important;
-  gap: ${spacing.sm};
-  -webkit-tap-highlight-color: transparent;
-  line-height: 1.3;
-
-  &:not([disabled]):hover {
-    transition:
-      box-shadow 250ms ease,
-      border-color 250ms ease;
-    border: 1px solid ${(props) => props.theme.colors.accentText};
-    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.accentText};
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-    svg {
-      display: none;
-    }
-  }
-
-  &[disabled]:hover {
-    transition:
-      box-shadow 250ms ease,
-      border-color 250ms ease;
-    border: 1px solid ${(props) => props.theme.colors.danger};
-    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.danger};
-  }
-`;
+const MenuButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    padding: `${spacing.sm} ${spacing.sm}`,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    border: `1px solid ${theme.colors.borderColor}`,
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: "pointer",
+    fontSize: fontSize.md,
+    fontWeight: 500,
+    color: `${theme.colors.primaryText} !important`,
+    gap: spacing.sm,
+    WebkitTapHighlightColor: "transparent",
+    lineHeight: 1.3,
+    "&:not([disabled]):hover": {
+      transition: "box-shadow 250ms ease, border-color 250ms ease",
+      border: `1px solid ${theme.colors.accentText}`,
+      boxShadow: `0 0 0 1px ${theme.colors.accentText}`,
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+      svg: {
+        display: "none",
+      },
+    },
+    "&[disabled]:hover": {
+      transition: "box-shadow 250ms ease, border-color 250ms ease",
+      border: `1px solid ${theme.colors.danger}`,
+      boxShadow: `0 0 0 1px ${theme.colors.danger}`,
+    },
+  };
+});

 const MenuLink = /* @__PURE__ */ (() => MenuButton.withComponent("a"))();

-export const DropdownMenuItem = /* @__PURE__ */ (() => styled(
-  DropdownMenu.Item,
-)<{ theme?: Theme }>`
-  outline: none;
-`)();
-
 export const StyledChevronRightIcon = /* @__PURE__ */ styled(
  /* @__PURE__ */ ChevronRightIcon,
-)<{
-  theme?: Theme;
-}>`
-  color: ${(props) => props.theme.colors.secondaryText};
-`;
+)(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.secondaryText,
+  };
+});

-const DisconnectIconButton = /* @__PURE__ */ styled(IconButton)<{
-  theme?: Theme;
-}>`
-  margin-right: -${spacing.xxs};
-  margin-left: auto;
-  color: ${(props) => props.theme.colors.secondaryText};
-  &:hover {
-    color: ${(props) => props.theme.colors.danger};
-    background: none;
-  }
-`;
+const DisconnectIconButton = /* @__PURE__ */ styled(IconButton)(() => {
+  const theme = useCustomTheme();
+  return {
+    marginRight: `-${spacing.xxs}`,
+    marginLeft: "auto",
+    color: theme.colors.secondaryText,
+    "&:hover": {
+      color: theme.colors.danger,
+      background: "none",
+    },
+  };
+});

 function WalletSwitcher({
  wallet,
@@ -752,12 +786,15 @@ function WalletSwitcher({
  );
 }

-const ActiveDot = styled.div<{ theme?: Theme }>`
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.colors.success};
-`;
+const ActiveDot = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: theme.colors.success,
+  };
+});

 function ConnectedToSmartWallet() {
  const activeWallet = useWallet();
@@ -822,3 +859,21 @@ function ConnectedToSmartWallet() {

  return null;
 }
+
+function EmbeddedWalletEmail() {
+  const emailQuery = useEmbeddedWalletUserEmail();
+
+  if (emailQuery.data) {
+    return (
+      <Container
+        style={{
+          paddingBottom: spacing.md,
+        }}
+      >
+        <Text color="primaryText">{emailQuery.data}</Text>
+      </Container>
+    );
+  }
+
+  return undefined;
+}
@@ -22,13 +22,15 @@ import {
  onModalUnmount,
 } from "../constants";
 import { HeadlessConnectUI } from "../../wallets/headlessConnectUI";
-import styled from "@emotion/styled";
 import { Container, noScrollBar } from "../../../components/basic";
 import { ScreenContext, useScreen } from "./screen";
 import { StartScreen } from "../screens/StartScreen";
-import { CustomThemeProvider } from "../../../design-system/CustomThemeProvider";
-import { Theme } from "../../../design-system";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../../design-system/CustomThemeProvider";
 import { SignatureScreen } from "../SignatureScreen";
+import { StyledDiv } from "../../../design-system/elements";

 export const ConnectModalContent = (props: {
  screen: string | WalletConfig;
@@ -293,13 +295,14 @@ export const ConnectModal = () => {
  );
 };

-const LeftContainer = /* @__PURE__ */ styled.div<{
-  theme?: Theme;
-}>`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  ${noScrollBar}
-  position: relative;
-  border-right: 1px solid ${(p) => p.theme.colors.separatorLine};
-`;
+const LeftContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    ...noScrollBar,
+    position: "relative",
+    borderRight: `1px solid ${theme.colors.separatorLine}`,
+  };
+});
@@ -1,5 +1,3 @@
-import { Theme } from "../../../design-system";
-import styled from "@emotion/styled";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { CrossContainer } from "../../../components/Modal";
 import { IconButton } from "../../../components/buttons";
@@ -12,17 +10,20 @@ import {
  wideModalMaxHeight,
  modalMaxWidthCompact,
  modalMaxWidthWide,
-  defaultTheme,
 } from "../constants";
 import { ConnectModalContent } from "./ConnectModal";
 import { useScreen } from "./screen";
 import { isMobile } from "../../../evm/utils/isMobile";
 import { useWallets } from "@thirdweb-dev/react-core";
 import { DynamicHeight } from "../../../components/DynamicHeight";
-import { CustomThemeProvider } from "../../../design-system/CustomThemeProvider";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../../design-system/CustomThemeProvider";
 import { ComponentProps, useContext, useEffect } from "react";
 import { ConnectWalletProps } from "../ConnectWallet";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledDiv } from "../../../design-system/elements";

 export const ConnectModalInline = (
  props: Omit<
@@ -43,6 +44,7 @@ export const ConnectModalInline = (
  const walletConfigs = useWallets();
  const modalSize =
    isMobile() || walletConfigs.length === 1 ? "compact" : props.modalSize;
+  const ctxTheme = useCustomTheme();

  const content = (
    <>
@@ -73,7 +75,7 @@ export const ConnectModalInline = (
  );

  const walletUIStatesProps = {
-    theme: props.theme || defaultTheme,
+    theme: props.theme || ctxTheme,
    modalSize: modalSize,
    title: props.modalTitle,
    termsOfServiceUrl: props.termsOfServiceUrl,
@@ -140,21 +142,24 @@ function SyncedWalletUIStates(
  return <WalletUIStatesProvider {...props} />;
 }

-const ConnectModalInlineContainer = styled.div<{ theme?: Theme }>`
-  background: ${(p) => p.theme.colors.modalBg};
-  color: ${(p) => p.theme.colors.primaryText};
-  transition: background 0.2s ease;
-  border-radius: ${radius.xl};
-  width: 100%;
-  box-sizing: border-box;
-  box-shadow: ${shadow.lg};
-  position: relative;
-  border: 1px solid ${(p) => p.theme.colors.borderColor};
-  line-height: normal;
-  overflow: hidden;
-  font-family: ${(p) => p.theme.fontFamily};
-  & *::selection {
-    background-color: ${(p) => p.theme.colors.primaryText};
-    color: ${(p) => p.theme.colors.modalBg};
-  }
-`;
+const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    background: theme.colors.modalBg,
+    color: theme.colors.primaryText,
+    transition: "background 0.2s ease",
+    borderRadius: radius.xl,
+    width: "100%",
+    boxSizing: "border-box",
+    boxShadow: shadow.lg,
+    position: "relative",
+    border: `1px solid ${theme.colors.borderColor}`,
+    lineHeight: "normal",
+    overflow: "hidden",
+    fontFamily: theme.fontFamily,
+    "& *::selection": {
+      backgroundColor: theme.colors.primaryText,
+      color: theme.colors.modalBg,
+    },
+  };
+});
@@ -10,7 +10,6 @@ import {
  radius,
  spacing,
  Theme,
-  ThemeObjectOrType,
 } from "../../design-system";
 import styled from "@emotion/styled";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
@@ -28,9 +27,12 @@ import { useEffect } from "react";
 import { Container, Line } from "../../components/basic";
 import { Text } from "../../components/text";
 import { ModalTitle } from "../../components/modalElements";
-import { CustomThemeProvider } from "../../design-system/CustomThemeProvider";
-import { useTheme } from "@emotion/react";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../design-system/CustomThemeProvider";
 import { useTWLocale } from "../../evm/providers/locale-provider";
+import { StyledButton, StyledP, StyledUl } from "../../design-system/elements";

 type RenderChain = React.FC<{
  chain: Chain;
@@ -69,7 +71,7 @@ const fuseConfig = {
 export const NetworkSelector: React.FC<NetworkSelectorProps> = (props) => {
  const [searchTerm, setSearchTerm] = useState("");
  const deferredSearchTerm = useDeferredValue(searchTerm);
-  const themeFromContext = useTheme() as ThemeObjectOrType;
+  const themeFromContext = useCustomTheme();
  const theme = props.theme || themeFromContext || "dark";
  const supportedChains = useSupportedChains();
  const chains = props.chains || supportedChains;
@@ -544,72 +546,81 @@ const NetworkList = /* @__PURE__ */ memo(function NetworkList(props: {
  );
 });

-const TabButton = /* @__PURE__ */ (() => styled(Tabs.Trigger)<{
-  theme?: Theme;
-}>`
-  all: unset;
-  font-size: ${fontSize.sm};
-  font-weight: 500;
-  color: ${(p) => p.theme.colors.secondaryText};
-  cursor: pointer;
-  padding: ${spacing.sm} ${spacing.sm};
-  -webkit-tap-highlight-color: transparent;
-  border-radius: ${radius.lg};
-  transition:
-    background 0.2s ease,
-    color 0.2s ease;
+const TabButton = /* @__PURE__ */ (() =>
+  styled(Tabs.Trigger)(() => {
+    const theme = useCustomTheme();
+    return {
+      all: "unset",
+      fontSize: fontSize.sm,
+      fontWeight: 500,
+      color: theme.colors.secondaryText,
+      cursor: "pointer",
+      padding: `${spacing.sm} ${spacing.sm}`,
+      WebkitTapHighlightColor: "transparent",
+      borderRadius: radius.lg,
+      transition: "background 0.2s ease, color 0.2s ease",

-  &[data-state="active"] {
-    background: ${(p) => p.theme.colors.secondaryButtonBg};
-    color: ${(p) => p.theme.colors.primaryText};
-  }
-`)();
+      "&[data-state='active']": {
+        background: theme.colors.secondaryButtonBg,
+        color: theme.colors.primaryText,
+      },
+    };
+  }))();

-const SectionLabel = styled.p<{ theme?: Theme }>`
-  font-size: ${fontSize.sm};
-  color: ${(p) => p.theme.colors.secondaryText};
-  margin: 0;
-  display: block;
-  padding: 0 ${spacing.xs};
-`;
+const SectionLabel = /* @__PURE__ */ StyledP(() => {
+  const theme = useCustomTheme();
+  return {
+    fontSize: fontSize.sm,
+    color: theme.colors.secondaryText,
+    margin: 0,
+    display: "block",
+    padding: `0 ${spacing.xs}`,
+  };
+});

-const NetworkListUl = styled.ul<{ theme?: Theme }>`
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.xs};
-  box-sizing: border-box;
-`;
+const NetworkListUl = /* @__PURE__ */ StyledUl({
+  padding: 0,
+  margin: 0,
+  listStyle: "none",
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing.xs,
+  boxSizing: "border-box",
+});

-const NetworkButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  align-items: center;
-  gap: ${spacing.md};
-  padding: ${spacing.xs} ${spacing.sm};
-  border-radius: ${radius.md};
-  cursor: pointer;
-  transition: background 0.2s ease;
-  color: ${(p) => p.theme.colors.primaryText};
-  font-weight: 500;
-  font-size: ${fontSize.md};
-  &:hover {
-    background: ${(p) => p.theme.colors.secondaryButtonBg};
-  }
+const NetworkButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    display: "flex",
+    width: "100%",
+    boxSizing: "border-box",
+    alignItems: "center",
+    gap: spacing.md,
+    padding: `${spacing.xs} ${spacing.sm}`,
+    borderRadius: radius.md,
+    cursor: "pointer",
+    transition: "background 0.2s ease",
+    color: theme.colors.primaryText,
+    fontWeight: 500,
+    fontSize: fontSize.md,
+    "&:hover": {
+      background: theme.colors.secondaryButtonBg,
+    },

-  ${media.mobile} {
-    font-size: ${fontSize.sm};
-  }
-`;
+    [media.mobile]: {
+      fontSize: fontSize.sm,
+    },
+  };
+});

-const StyledMagnifyingGlassIcon = /* @__PURE__ */ styled(MagnifyingGlassIcon)<{
-  theme?: Theme;
-}>`
-  color: ${(p) => p.theme.colors.secondaryText};
-  position: absolute;
-  left: ${spacing.sm};
-`;
+const StyledMagnifyingGlassIcon = /* @__PURE__ */ styled(MagnifyingGlassIcon)(
+  () => {
+    const theme = useCustomTheme();
+    return {
+      color: theme.colors.secondaryText,
+      position: "absolute",
+      left: spacing.sm,
+    };
+  },
+);
@@ -3,13 +3,14 @@ import { Spacer } from "../../components/Spacer";
 import { Container, ModalHeader } from "../../components/basic";
 import { Text } from "../../components/text";
 import { CopyIcon } from "../../components/CopyIcon";
-import styled from "@emotion/styled";
-import { Theme, iconSize, radius, spacing } from "../../design-system";
+import { iconSize, radius, spacing } from "../../design-system";
 import { QRCode } from "../../components/QRCode";
 import { Img } from "../../components/Img";
 import { useClipboard } from "../../evm/components/hooks/useCopyClipboard";
 import { useTWLocale } from "../../evm/providers/locale-provider";
 import { shortenString } from "@thirdweb-dev/react-core";
+import { StyledButton } from "../../design-system/elements";
+import { useCustomTheme } from "../../design-system/CustomThemeProvider";

 export function ReceiveFunds(props: { iconUrl: string }) {
  const address = useAddress();
@@ -57,18 +58,21 @@ export function ReceiveFunds(props: { iconUrl: string }) {
  );
 }

-const WalletAddressContainer = styled.button<{ theme?: Theme }>`
-  all: unset;
-  width: 100%;
-  box-sizing: border-box;
-  cursor: pointer;
-  padding: ${spacing.md};
-  display: flex;
-  justify-content: space-between;
-  border: 1px solid ${(p) => p.theme.colors.borderColor};
-  border-radius: ${radius.md};
-  transition: border-color 200ms ease;
-  &:hover {
-    border-color: ${(p) => p.theme.colors.accentText};
-  }
-`;
+const WalletAddressContainer = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    width: "100%",
+    boxSizing: "border-box",
+    cursor: "pointer",
+    padding: spacing.md,
+    display: "flex",
+    justifyContent: "space-between",
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: radius.md,
+    transition: "border-color 200ms ease",
+    "&:hover": {
+      borderColor: theme.colors.accentText,
+    },
+  };
+});
@@ -10,7 +10,7 @@ import {
  useWallet,
 } from "@thirdweb-dev/react-core";
 import { ChainIcon } from "../../components/ChainIcon";
-import { Theme, fontSize, iconSize, spacing } from "../../design-system";
+import { fontSize, iconSize, spacing } from "../../design-system";
 import { Text } from "../../components/text";
 import { Skeleton } from "../../components/Skeleton";
 import { useMutation } from "@tanstack/react-query";
@@ -24,6 +24,8 @@ import { Img } from "../../components/Img";
 import styled from "@emotion/styled";
 import { NATIVE_TOKEN_ADDRESS } from "@thirdweb-dev/sdk";
 import { useTWLocale } from "../../evm/providers/locale-provider";
+import { StyledDiv } from "../../design-system/elements";
+import { useCustomTheme } from "../../design-system/CustomThemeProvider";

 // TODO - use a better way to fetch token Info instead of useBalance

@@ -529,19 +531,20 @@ function SelectTokenButton(props: { token?: TokenInfo; onClick: () => void }) {
  );
 }

-const SelectTokenBtn = /* @__PURE__ */ styled(Button)<{ theme?: Theme }>`
-  background: transparent;
-  justify-content: flex-start;
-  gap: ${spacing.sm};
-  padding: ${fontSize.xs};
-  &:hover {
-    background: ${(p) => p.theme.colors.secondaryButtonBg};
-    transform: scale(1.01);
-  }
-  transition:
-    background 200ms ease,
-    transform 150ms ease;
-`;
+const SelectTokenBtn = /* @__PURE__ */ styled(Button)(() => {
+  const theme = useCustomTheme();
+  return {
+    background: "transparent",
+    justifyContent: "flex-start",
+    gap: spacing.sm,
+    padding: spacing.sm,
+    "&:hover": {
+      background: theme.colors.secondaryButtonBg,
+      transform: "scale(1.01)",
+    },
+    transition: "background 200ms ease, transform 150ms ease",
+  };
+});

 function formatBalance(balanceData: {
  symbol: string;
@@ -552,9 +555,9 @@ function formatBalance(balanceData: {
  return Number(balanceData.displayValue).toFixed(3) + " " + balanceData.symbol;
 }

-const CurrencyBadge = styled.div<{ theme?: Theme }>`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: ${spacing.sm};
-`;
+const CurrencyBadge = /* @__PURE__ */ StyledDiv({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  right: spacing.sm,
+});
@@ -15,20 +15,21 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ModalConfigCtx } from "../../evm/providers/wallet-ui-states-provider";
 import { wait } from "../../utils/wait";
 import { Button } from "../../components/buttons";
-import { Theme, iconSize, radius, spacing } from "../../design-system";
+import { iconSize, radius, spacing } from "../../design-system";
 import {
  CrossCircledIcon,
  ExternalLinkIcon,
  ReloadIcon,
 } from "@radix-ui/react-icons";
 import { Img } from "../../components/Img";
-import styled from "@emotion/styled";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { safeChainIdToSlug } from "../wallets/safe/safeChainSlug";
 import { TOS } from "./Modal/TOS";
 import { keyframes } from "@emotion/react";
 import { Spinner } from "../../components/Spinner";
 import { useTWLocale } from "../../evm/providers/locale-provider";
+import { StyledDiv } from "../../design-system/elements";
+import { useCustomTheme } from "../../design-system/CustomThemeProvider";

 type Status = "signing" | "failed" | "idle";

@@ -160,8 +161,8 @@ export const SignatureScreen: React.FC<{
            <Container flex="column" gap="md" animate="fadein" key={status}>
              <Text size="lg" center color="primaryText">
                {status === "failed"
-                  ? "Failed to sign in"
-                  : "Awaiting Confirmation"}
+                  ? locale.signingScreen.failedToSignIn
+                  : locale.signingScreen.inProgress}
              </Text>

              {status === "signing" && (
@@ -314,21 +315,22 @@ const plusAnimation = keyframes`
 }
 `;

-const PulsatingContainer = styled.div<{ theme?: Theme }>`
-  position: relative;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    background: ${(p) => p.theme.colors.accentText};
-    animation: ${plusAnimation} 2s cubic-bezier(0.175, 0.885, 0.32, 1.1)
-      infinite;
-    z-index: -1;
-    border-radius: ${radius.xl};
-  }
-`;
+const PulsatingContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    position: "relative",
+    "&::before": {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      background: theme.colors.accentText,
+      animation: `${plusAnimation} 2s cubic-bezier(0.175, 0.885, 0.32, 1.1) infinite`,
+      zIndex: -1,
+      borderRadius: radius.xl,
+    },
+  };
+});
@@ -9,8 +9,7 @@ import {
 } from "../../components/basic";
 import { Button } from "../../components/buttons";
 import { ModalTitle } from "../../components/modalElements";
-import { iconSize, radius, spacing, Theme } from "../../design-system";
-import styled from "@emotion/styled";
+import { iconSize, radius, spacing } from "../../design-system";
 import {
  WalletConfig,
  useConnectionStatus,
@@ -27,6 +26,8 @@ import { Spacer } from "../../components/Spacer";
 import { TextDivider } from "../../components/TextDivider";
 import { TOS } from "./Modal/TOS";
 import { useTWLocale } from "../../evm/providers/locale-provider";
+import { StyledButton, StyledUl } from "../../design-system/elements";
+import { useCustomTheme } from "../../design-system/CustomThemeProvider";

 export const WalletSelector: React.FC<{
  walletConfigs: WalletConfig[];
@@ -454,50 +455,44 @@ export function WalletEntryButton(props: {
  );
 }

-const WalletList = styled.ul<{ theme?: Theme }>`
-  all: unset;
-  list-style-type: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow-y: auto;
-  flex: 1;
-  ${noScrollBar}
+const WalletList = /* @__PURE__ */ StyledUl({
+  all: "unset",
+  listStyleType: "none",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+  boxSizing: "border-box",
+  overflowY: "auto",
+  flex: 1,
+  ...noScrollBar,
+  // to show the box-shadow of inputs that overflows
+  padding: "2px",
+  margin: "-2px",
+  marginBottom: 0,
+  paddingBottom: spacing.lg,
+});

-  /* to show the box-shadow of inputs that overflows  */
-  padding: 2px;
-  margin: -2px;
-  padding-bottom: 0;
-  margin-bottom: 0;
-  padding-bottom: ${spacing.lg};
-`;
-
-const WalletButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  display: flex;
-  align-items: center;
-  gap: ${spacing.sm};
-  cursor: pointer;
-  box-sizing: border-box;
-  width: 100%;
-  color: ${(p) => p.theme.colors.secondaryText};
-  position: relative;
-  border-radius: ${radius.md};
-  padding: ${spacing.xs} ${spacing.xs};
-
-  &:hover {
-    background-color: ${(p) => p.theme.colors.walletSelectorButtonHoverBg};
-  }
-
-  transition:
-    background-color 200ms ease,
-    transform 200ms ease;
-
-  &:hover {
-    transform: scale(1.01);
-  }
-`;
+const WalletButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    display: "flex",
+    alignItems: "center",
+    gap: spacing.sm,
+    cursor: "pointer",
+    boxSizing: "border-box",
+    width: "100%",
+    color: theme.colors.secondaryText,
+    position: "relative",
+    borderRadius: radius.md,
+    padding: `${spacing.xs} ${spacing.xs}`,
+    "&:hover": {
+      backgroundColor: theme.colors.walletSelectorButtonHoverBg,
+      transform: "scale(1.01)",
+    },
+    transition: "background-color 200ms ease, transform 200ms ease",
+  };
+});

 function sortWalletConfigs(walletConfigs: WalletConfig[]) {
  return (
@@ -3,16 +3,16 @@ import { QRCode } from "../../../components/QRCode";
 import { Spacer } from "../../../components/Spacer";
 import { Container, ModalHeader } from "../../../components/basic";
 import { iconSize, radius, spacing } from "../../../design-system";
-import type { Theme } from "../../../design-system/index";
 import { isMobile } from "../../../evm/utils/isMobile";
 import { openWindow } from "../../utils/openWindow";
-import styled from "@emotion/styled";
 import { useState } from "react";
 import { AppleIcon } from "../icons/AppleIcon";
 import { ChromeIcon } from "../icons/ChromeIcon";
 import { PlayStoreIcon } from "../icons/PlayStoreIcon";
 import { Text } from "../../../components/text";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledButton } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const GetStartedScreen: React.FC<{
  onBack?: () => void;
@@ -206,24 +206,27 @@ const InstallScanScreen: React.FC<{
  );
 };

-export const ButtonLink = styled.button<{ theme?: Theme }>`
-  all: unset;
-  text-decoration: none;
-  padding: ${spacing.sm} ${spacing.md};
-  border-radius: ${radius.sm};
-  display: flex;
-  align-items: center;
-  gap: ${spacing.md};
-  cursor: pointer;
-  box-sizing: border-box;
-  width: 100%;
-  font-weight: 500;
-  color: ${(p) => p.theme.colors.secondaryButtonText};
-  background: ${(p) => p.theme.colors.secondaryButtonBg};
-  transition: 100ms ease;
-  &:hover {
-    background: ${(p) => p.theme.colors.secondaryButtonHoverBg};
-    text-decoration: none;
-    color: ${(p) => p.theme.colors.primaryText};
-  }
-`;
+export const ButtonLink = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    textDecoration: "none",
+    padding: `${spacing.sm} ${spacing.md}`,
+    borderRadius: radius.sm,
+    display: "flex",
+    alignItems: "center",
+    gap: spacing.md,
+    cursor: "pointer",
+    boxSizing: "border-box",
+    width: "100%",
+    fontWeight: 500,
+    color: theme.colors.secondaryButtonText,
+    background: theme.colors.secondaryButtonBg,
+    transition: "100ms ease",
+    "&:hover": {
+      background: theme.colors.secondaryButtonHoverBg,
+      textDecoration: "none",
+      color: theme.colors.primaryText,
+    },
+  };
+});
@@ -5,11 +5,11 @@ import { useContext } from "react";
 import { ModalConfigCtx } from "../../../evm/providers/wallet-ui-states-provider";
 import { TOS } from "../Modal/TOS";
 import { GlobeIcon } from "../icons/GlobalIcon";
-import styled from "@emotion/styled";
-import { Theme } from "../../../design-system";
 import { keyframes } from "@emotion/react";
 import { Img } from "../../../components/Img";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledDiv } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export function StartScreen() {
  const {
@@ -111,8 +111,11 @@ const floatingAnimation = keyframes`
  }
 `;

-const GlobalContainer = styled.div<{ theme?: Theme }>`
-  color: ${(p) => p.theme.colors.accentText};
-  filter: drop-shadow(0px 6px 10px ${(p) => p.theme.colors.accentText});
-  animation: ${floatingAnimation} 2s ease infinite alternate;
-`;
+const GlobalContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.accentText,
+    filter: `drop-shadow(0px 6px 10px ${theme.colors.accentText})`,
+    animation: `${floatingAnimation} 2s ease infinite alternate`,
+  };
+});
@@ -1,8 +1,9 @@
 import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
 import { Img } from "../../../components/Img";
-import { radius, Theme } from "../../../design-system";
+import { radius } from "../../../design-system";
 import { fadeInAnimation } from "../../../design-system/animations";
+import { StyledDiv } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export function WalletLogoSpinner(props: { error: boolean; iconUrl: string }) {
  const loaderRadius = 20;
@@ -84,50 +85,52 @@ const plusAnimation = keyframes`
 }
 `;

-const LogoContainer = styled.div<{ theme?: Theme }>`
-  display: flex;
-  justify-content: center;
-  position: relative;
-  border-radius: ${radius.xl};
+const LogoContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    display: "flex",
+    justifyContent: "center",
+    position: "relative",
+    borderRadius: radius.xl,

-  [data-img-container] {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  }
+    "[data-img-container]": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+    },

-  &[data-error="true"] [data-container] {
-    animation: ${shakeErrorAnimation} 0.25s linear;
-  }
+    "&[data-error='true'] [data-container]": {
+      animation: `${shakeErrorAnimation} 0.25s linear`,
+    },

-  &[data-error="true"] [data-img-container]::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    animation: none;
-    background: ${(p) => p.theme.colors.danger};
-    animation: ${plusAnimation} 1.5s ease infinite;
-    border-radius: 20px;
-    z-index: -1;
-  }
+    "&[data-error='true'] [data-img-container]::before": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      background: theme.colors.danger,
+      animation: `${plusAnimation} 1.5s ease infinite`,
+      borderRadius: "20px",
+      zIndex: -1,
+    },

-  svg {
-    position: absolute;
-    /* can't use inset because safari doesn't like it */
-    left: -8px;
-    top: -8px;
-    width: calc(100% + 16px);
-    height: calc(100% + 16px);
-    animation: ${fadeInAnimation} 400ms ease;
-  }
+    svg: {
+      position: "absolute",
+      /* can't use inset because safari doesn't like it */
+      left: "-8px",
+      top: "-8px",
+      width: "calc(100% + 16px)",
+      height: "calc(100% + 16px)",
+      animation: `${fadeInAnimation} 400ms ease`,
+    },

-  img {
-    z-index: 100;
-  }
+    img: {
+      zIndex: 100,
+    },

-  rect {
-    animation: ${dashRotateAnimation} 1.2s linear infinite;
-    stroke: ${(p) => p.theme.colors.accentText};
-  }
-`;
+    rect: {
+      animation: `${dashRotateAnimation} 1.2s linear infinite`,
+      stroke: theme.colors.accentText,
+    },
+  };
+});
@@ -14,8 +14,8 @@ function getBodyTitle(authOption: EmbeddedWalletOauthStrategy) {

 function getWidthAndHeight(authOption: EmbeddedWalletOauthStrategy) {
  switch (authOption) {
-    // case "facebook":
-    //   return { width: 715, height: 555 };
+    case "facebook":
+      return { width: 715, height: 555 };
    default:
      return { width: 350, height: 500 };
  }
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import {
  WalletConfig,
@@ -15,12 +14,13 @@ import { Spacer } from "../../../components/Spacer";
 import { TextDivider } from "../../../components/TextDivider";
 import { Container, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
-import { Theme, fontSize, iconSize, spacing } from "../../../design-system";
+import { fontSize, iconSize, spacing } from "../../../design-system";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { openOauthSignInWindow } from "../../utils/openOauthSignInWindow";
 import { InputSelectionUI } from "../InputSelectionUI";
 import { socialIcons } from "./socialIcons";
 import type { AuthOption, EmbeddedWalletLoginType } from "./types";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const EmbeddedWalletFormUI = (props: {
  onSelect: (loginType: EmbeddedWalletLoginType) => void;
@@ -33,11 +33,11 @@ export const EmbeddedWalletFormUI = (props: {
  const createWalletInstance = useCreateWalletInstance();
  const setConnectionStatus = useSetConnectionStatus();
  const setConnectedWallet = useSetConnectedWallet();
-  const themeObj = useTheme() as Theme;
+  const themeObj = useCustomTheme();

  const loginMethodsLabel: Record<EmbeddedWalletOauthStrategy, string> = {
    google: locale.signInWithGoogle,
-    // facebook: locale.signInWithFacebook,
+    facebook: locale.signInWithFacebook,
    apple: locale.signInWithApple,
  };

@@ -76,13 +76,20 @@ export const EmbeddedWalletFormUI = (props: {
    }
  };

-  const showOnlyIcons = socialLogins.length > 2;
+  const showOnlyIcons = socialLogins.length > 1;

  return (
    <Container flex="column" gap="lg">
      {/* Social Login */}
      {hasSocialLogins && (
-        <Container flex={showOnlyIcons ? "row" : "column"} center="x" gap="sm">
+        <Container
+          flex={showOnlyIcons ? "row" : "column"}
+          center="x"
+          gap="sm"
+          style={{
+            justifyContent: "space-between",
+          }}
+        >
          {socialLogins.map((loginMethod) => {
            const imgIconSize = showOnlyIcons ? iconSize.lg : iconSize.md;
            return (
@@ -176,19 +183,19 @@ export const EmbeddedWalletFormUIScreen: React.FC<{
  );
 };

-const SocialButton = /* @__PURE__ */ styled(Button)<{ theme?: Theme }>`
-  &[data-variant="full"] {
-    display: flex;
-    justify-content: flex-start;
-    gap: ${spacing.md};
-    font-size: ${fontSize.md};
-    transition: background-color 0.2s ease;
-    &:active {
-      box-shadow: none;
-    }
-  }
-
-  &[data-variant="icon"] {
-    padding: ${spacing.sm};
-  }
-`;
+const SocialButton = /* @__PURE__ */ styled(Button)({
+  "&[data-variant='full']": {
+    display: "flex",
+    justifyContent: "flex-start",
+    gap: spacing.md,
+    fontSize: fontSize.md,
+    transition: "background-color 0.2s ease",
+    "&:active": {
+      boxShadow: "none",
+    },
+  },
+  "&[data-variant='icon']": {
+    padding: spacing.sm,
+    flexGrow: 1,
+  },
+});
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { ConnectUIProps, useWalletContext } from "@thirdweb-dev/react-core";
 import { EmbeddedWallet, SendEmailOtpReturnType } from "@thirdweb-dev/wallets";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -9,10 +8,12 @@ import { Spinner } from "../../../components/Spinner";
 import { Container, Line, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
 import { Text } from "../../../components/text";
-import { Theme, fontSize } from "../../../design-system";
+import { fontSize } from "../../../design-system";
 import { CreatePassword } from "./USER_MANAGED/CreatePassword";
 import { EnterPasswordOrRecovery } from "./USER_MANAGED/EnterPassword";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledButton } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 type EmbeddedWalletOTPLoginUIProps = ConnectUIProps<EmbeddedWallet>;

@@ -28,7 +29,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
 > = (props) => {
  const email = props.selectionData;
  const isWideModal = props.modalSize === "wide";
-  const locale = useTWLocale().wallets.embeddedWallet.emailLoginScreen;
+  const locale = useTWLocale().wallets.embeddedWallet;

  const [otpInput, setOtpInput] = useState("");
  const { createWalletInstance, setConnectedWallet, setConnectionStatus } =
@@ -212,7 +213,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
    return (
      <Container fullHeight flex="column" animate="fadein">
        <Container p="lg">
-          <ModalHeader title="Sign in" onBack={props.goBack} />
+          <ModalHeader title={locale.signIn} onBack={props.goBack} />
        </Container>

        <Container expand flex="column" center="y">
@@ -227,7 +228,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
              }}
            >
              {!isWideModal && <Spacer y="xl" />}
-              <Text>{locale.enterCodeSendTo}</Text>
+              <Text>{locale.emailLoginScreen.enterCodeSendTo}</Text>
              <Spacer y="sm" />
              <Text color="primaryText">{email}</Text>
              <Spacer y="xl" />
@@ -251,7 +252,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
              <FadeIn>
                <Spacer y="md" />
                <Text size="sm" color="danger" center>
-                  {locale.invalidCode}
+                  {locale.emailLoginScreen.invalidCode}
                </Text>
              </FadeIn>
            )}
@@ -275,7 +276,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
                      width: "100%",
                    }}
                  >
-                    {locale.verify}
+                    {locale.emailLoginScreen.verify}
                  </Button>
                </Container>
              )}
@@ -289,7 +290,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
              {emailStatus === "error" && (
                <>
                  <Text size="sm" center color="danger">
-                    {locale.failedToSendCode}
+                    {locale.emailLoginScreen.failedToSendCode}
                  </Text>
                </>
              )}
@@ -303,14 +304,14 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
                    textAlign: "center",
                  }}
                >
-                  <Text size="sm">{locale.sendingCode}</Text>
+                  <Text size="sm">{locale.emailLoginScreen.sendingCode}</Text>
                  <Spinner size="xs" color="secondaryText" />
                </Container>
              )}

              {typeof emailStatus === "object" && (
                <LinkButton onClick={sendEmail} type="button">
-                  {locale.resendCode}
+                  {locale.emailLoginScreen.resendCode}
                </LinkButton>
              )}
            </Container>
@@ -323,15 +324,18 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
  return null;
 };

-const LinkButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  color: ${(p) => p.theme.colors.accentText};
-  font-size: ${fontSize.sm};
-  cursor: pointer;
-  text-align: center;
-  font-weight: 500;
-  width: 100%;
-  &:hover {
-    color: ${(p) => p.theme.colors.primaryText};
-  }
-`;
+const LinkButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    color: theme.colors.accentText,
+    fontSize: fontSize.sm,
+    cursor: "pointer",
+    textAlign: "center",
+    fontWeight: 500,
+    width: "100%",
+    "&:hover": {
+      color: theme.colors.primaryText,
+    },
+  };
+});
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import {
  ConnectUIProps,
  useConnectionStatus,
@@ -16,9 +15,9 @@ import { Spinner } from "../../../components/Spinner";
 import { Container, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
 import { Text } from "../../../components/text";
-import { Theme } from "../../../design-system";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { openOauthSignInWindow } from "../../utils/openOauthSignInWindow";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const EmbeddedWalletSocialLogin = (
  props: ConnectUIProps<EmbeddedWallet> & {
@@ -31,19 +30,19 @@ export const EmbeddedWalletSocialLogin = (
  const setConnectionStatus = useSetConnectionStatus();
  const setConnectedWallet = useSetConnectedWallet();
  const connectionStatus = useConnectionStatus();
-  const themeObj = useTheme() as Theme;
+  const themeObj = useCustomTheme();

-  const googleLogin = async () => {
+  const socialLogin = async () => {
    try {
      const embeddedWallet = createWalletInstance(props.walletConfig);
      setConnectionStatus("connecting");
-      const googleWindow = openOauthSignInWindow("google", themeObj);
-      if (!googleWindow) {
-        throw new Error("Failed to open google login window");
+      const socialWindow = openOauthSignInWindow(props.strategy, themeObj);
+      if (!socialWindow) {
+        throw new Error(`Failed to open ${props.strategy} login window`);
      }
      const authResult = await embeddedWallet.authenticate({
-        strategy: "google",
-        openedWindow: googleWindow,
+        strategy: props.strategy,
+        openedWindow: socialWindow,
        closeOpenedWindow: (openedWindow) => {
          openedWindow.close();
        },
@@ -55,7 +54,7 @@ export const EmbeddedWalletSocialLogin = (
      props.connected();
    } catch (e) {
      setConnectionStatus("disconnected");
-      console.error("Error logging into google", e);
+      console.error(`Error sign in with ${props.strategy}`, e);
    }
  };

@@ -94,6 +93,7 @@ export const EmbeddedWalletSocialLogin = (
            <Container animate="fadein">
              <Text
                color="primaryText"
+                center
                multiline
                style={{
                  maxWidth: "250px",
@@ -114,7 +114,7 @@ export const EmbeddedWalletSocialLogin = (
            <Container animate="fadein">
              <Text color="danger">{locale.failed}</Text>
              <Spacer y="lg" />
-              <Button variant="primary" onClick={googleLogin}>
+              <Button variant="primary" onClick={socialLogin}>
                {locale.retry}
              </Button>
              <Spacer y="xxl" />
@@ -5,11 +5,13 @@ import { Spacer } from "../../../../components/Spacer";
 import { Spinner } from "../../../../components/Spinner";
 import { Container, ModalHeader, Line } from "../../../../components/basic";
 import { Button, IconButton } from "../../../../components/buttons";
-import { spacing, Theme, radius, iconSize } from "../../../../design-system";
+import { spacing, radius, iconSize } from "../../../../design-system";
 import { Text } from "../../../../components/text";
 import styled from "@emotion/styled";
 import { useClipboard } from "../../../../evm/components/hooks/useCopyClipboard";
 import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+import { StyledDiv } from "../../../../design-system/elements";
+import { useCustomTheme } from "../../../../design-system/CustomThemeProvider";

 // TODO (ews) - this is unused right now, no backup codes are generated
 export function BackupAccount(props: {
@@ -214,22 +216,27 @@ function CopyRecoveryCode(props: { code: string }) {
  );
 }

-const CopyContainer = styled.div<{ theme?: Theme }>`
-  padding: ${spacing.md};
-  border: 1px solid ${(p) => p.theme.colors.borderColor};
-  border-radius: ${radius.md};
-`;
+const CopyContainer = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    padding: spacing.md,
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: radius.md,
+  };
+});

-const CheckboxButton = /* @__PURE__ */ styled(IconButton)<{ theme?: Theme }>`
-  border: 2px solid ${(p) => p.theme.colors.accentText};
-  color: ${(p) => p.theme.colors.accentText} !important;
-  padding: 0;
-
-  &[aria-checked="true"] {
-    background: ${(p) => p.theme.colors.accentText};
-    color: ${(p) => p.theme.colors.modalBg} !important;
-  }
-`;
+const CheckboxButton = /* @__PURE__ */ styled(IconButton)(() => {
+  const theme = useCustomTheme();
+  return {
+    border: `2px solid ${theme.colors.accentText}`,
+    color: `${theme.colors.accentText} !important`,
+    padding: 0,
+    "&[aria-checked='true']": {
+      background: theme.colors.accentText,
+      color: `${theme.colors.modalBg} !important`,
+    },
+  };
+});

 function downloadRecoveryCodes(codes: string, fileName: string) {
  const blob = new Blob([codes], {
@@ -11,7 +11,7 @@ import {
  InputButton,
 } from "../../../../components/buttons";
 import { Input, InputContainer } from "../../../../components/formElements";
-import { Theme, iconSize } from "../../../../design-system";
+import { iconSize } from "../../../../design-system";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Text } from "../../../../components/text";
@@ -19,6 +19,8 @@ import { useState } from "react";
 import { Spinner } from "../../../../components/Spinner";
 import { CheckIcon } from "@radix-ui/react-icons";
 import { useTWLocale } from "../../../../evm/providers/locale-provider";
+import { StyledDiv } from "../../../../design-system/elements";
+import { useCustomTheme } from "../../../../design-system/CustomThemeProvider";

 export function CreatePassword(props: {
  goBack: () => void;
@@ -173,16 +175,18 @@ export function CreatePassword(props: {
  );
 }

-const CheckboxButton = /* @__PURE__ */ styled(IconButton)<{ theme?: Theme }>`
-  border: 2px solid ${(p) => p.theme.colors.accentText};
-  color: ${(p) => p.theme.colors.accentText} !important;
-  padding: 0;
-
-  &[aria-checked="true"] {
-    background: ${(p) => p.theme.colors.accentText};
-    color: ${(p) => p.theme.colors.modalBg} !important;
-  }
-`;
+const CheckboxButton = /* @__PURE__ */ styled(IconButton)(() => {
+  const theme = useCustomTheme();
+  return {
+    border: `2px solid ${theme.colors.accentText}`,
+    color: `${theme.colors.accentText} !important`,
+    padding: 0,
+    "&[aria-checked='true']": {
+      background: theme.colors.accentText,
+      color: `${theme.colors.modalBg} !important`,
+    },
+  };
+});

 const bounceAnimation = keyframes`
 from {
@@ -193,6 +197,6 @@ to {
 }
 `;

-const BounceContainer = styled.div`
-  animation: ${bounceAnimation} 1s ease-in-out infinite alternate;
-`;
+const BounceContainer = /* @__PURE__ */ StyledDiv({
+  animation: `${bounceAnimation} 1s ease-in-out infinite alternate`,
+});
@@ -14,7 +14,7 @@ import {
  EmbeddedWalletFormUI,
  EmbeddedWalletFormUIScreen,
 } from "./EmbeddedWalletFormUI";
-import { EmbeddedWalletSocialLogin } from "./EmbeddedWalletGoogleLogin";
+import { EmbeddedWalletSocialLogin } from "./EmbeddedWalletSocialLogin";
 import { EmbeddedWalletOTPLoginUI } from "./EmbeddedWalletOTPLoginUI";
 import {
  AuthOption,
@@ -26,7 +26,7 @@ const DEFAULT_AUTH_OPTIONS: AuthOption[] = [
  "email",
  "google",
  "apple",
-  // "facebook",
+  "facebook",
 ];

 export const embeddedWallet = (
@@ -1,11 +1,12 @@
 import { EmbeddedWalletOauthStrategy } from "@thirdweb-dev/wallets";
 import {
  appleIconUri,
+  facebookIconUri,
  googleIconUri,
 } from "../../ConnectWallet/icons/socialLogins";

 export const socialIcons: Record<EmbeddedWalletOauthStrategy, string> = {
  google: googleIconUri,
  apple: appleIconUri,
-  // facebook: facebookIconUri,
+  facebook: facebookIconUri,
 };
@@ -16,7 +16,7 @@ export type EmbeddedWalletConfig = Omit<

  /**
   * Choose which auth providers to show in the wallet connection UI
-   * @defaultValue `auth: { options: ["email", "google", "apple"] }`
+   * @defaultValue `auth: { options: ["email", "google", "apple", "facebook"] }`
   */
  auth?: {
    options: AuthOption[];
@@ -2,8 +2,7 @@ import { Spacer } from "../../../components/Spacer";
 import { Button } from "../../../components/buttons";
 import { Label } from "../../../components/formElements";
 import { ModalDescription } from "../../../components/modalElements";
-import { Theme, iconSize, spacing } from "../../../design-system";
-import styled from "@emotion/styled";
+import { iconSize, spacing } from "../../../design-system";
 import { fontSize } from "../../../design-system";
 import {
  EyeClosedIcon,
@@ -29,6 +28,8 @@ import {
 } from "@thirdweb-dev/react-core";
 import type { LocalWalletConfig } from "./types";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledP } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const ExportLocalWallet: React.FC<{
  onBack?: () => void;
@@ -259,8 +260,11 @@ function downloadJsonWalletFile(data: string) {
  URL.revokeObjectURL(a.href);
 }

-const SavedWalletAddress = styled.p<{ theme?: Theme }>`
-  font-size: ${fontSize.md};
-  color: ${(props) => props.theme.colors.secondaryText};
-  margin: 0;
-`;
+const SavedWalletAddress = /* @__PURE__ */ StyledP(() => {
+  const theme = useCustomTheme();
+  return {
+    fontSize: fontSize.md,
+    color: theme.colors.secondaryText,
+    margin: 0,
+  };
+});
@@ -12,7 +12,7 @@ import { Spinner } from "../../../components/Spinner";
 import { Container, ModalHeader } from "../../../components/basic";
 import { InputSelectionUI } from "../InputSelectionUI";
 import { Img } from "../../../components/Img";
-import { Theme, fontSize, iconSize, spacing } from "../../../design-system";
+import { fontSize, iconSize, spacing } from "../../../design-system";
 import { Button, IconButton } from "../../../components/buttons";
 import { ToolTip } from "../../../components/Tooltip";
 import styled from "@emotion/styled";
@@ -40,6 +40,7 @@ import {
  twitchIconUri,
  twitterIconUri,
 } from "../../ConnectWallet/icons/socialLogins";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export function magicLink(
  config: MagicLinkAdditionalOptions & {
@@ -507,21 +508,32 @@ function upperCaseFirstLetter(string: string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
 }

-const SocialButtonLarge = /* @__PURE__ */ styled(Button)<{ theme?: Theme }>`
-  display: flex;
-  justify-content: flex-start;
-  gap: ${spacing.md};
-  font-size: ${fontSize.md};
-  transition: background-color 0.2s ease;
-  &:hover {
-    background-color: ${(p) => p.theme.colors.secondaryButtonBg};
-  }
-  &:active {
-    box-shadow: none;
-  }
-`;
+const SocialButtonLarge = /* @__PURE__ */ styled(Button)(() => {
+  const theme = useCustomTheme();
+  return {
+    display: "flex",
+    justifyContent: "flex-start",
+    gap: spacing.md,
+    fontSize: fontSize.md,
+    transition: "background-color 0.2s ease",
+    "&:hover": {
+      backgroundColor: theme.colors.secondaryButtonBg,
+    },
+    "&:active": {
+      boxShadow: "none",
+    },
+  };
+});

-const SocialIconButton = /* @__PURE__ */ styled(IconButton)<{ theme?: Theme }>`
-  border: 1px solid ${(p) => p.theme.colors.borderColor};
-  padding: ${spacing.xs};
-`;
+const SocialIconButton = /* @__PURE__ */ styled(IconButton)(() => {
+  const theme = useCustomTheme();
+  return {
+    border: `1px solid ${theme.colors.borderColor}`,
+    padding: spacing.sm,
+    transition: "border-color 0.2s ease",
+    "&:hover": {
+      borderColor: theme.colors.accentText,
+      background: "transparent",
+    },
+  };
+});
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import {
  WalletConfig,
@@ -11,13 +10,14 @@ import { Spacer } from "../../../components/Spacer";
 import { TextDivider } from "../../../components/TextDivider";
 import { Container, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
-import { Theme, iconSize, spacing } from "../../../design-system";
+import { iconSize, spacing } from "../../../design-system";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { openOauthSignInWindow } from "../../utils/openOauthSignInWindow";
 import { InputSelectionUI } from "../InputSelectionUI";
 import { PaperLoginType } from "./types";
 import { Img } from "../../../components/Img";
 import { googleIconUri } from "../../ConnectWallet/icons/socialLogins";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const PaperFormUI = (props: {
  onSelect: (loginType: PaperLoginType) => void;
@@ -29,7 +29,7 @@ export const PaperFormUI = (props: {
  const createWalletInstance = useCreateWalletInstance();
  const setConnectionStatus = useSetConnectionStatus();
  const setConnectedWallet = useSetConnectedWallet();
-  const themeObj = useTheme() as Theme;
+  const themeObj = useCustomTheme();

  // Need to trigger google login on button click to avoid popup from being blocked
  const googleLogin = async () => {
@@ -133,8 +133,8 @@ export const PaperFormUIScreen: React.FC<{
  );
 };

-const SocialButton = /* @__PURE__ */ styled(Button)<{ theme?: Theme }>`
-  display: flex;
-  justify-content: center;
-  gap: ${spacing.sm};
-`;
+const SocialButton = /* @__PURE__ */ styled(Button)({
+  display: "flex",
+  justifyContent: "center",
+  gap: spacing.sm,
+});
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import {
  ConnectUIProps,
  useConnectionStatus,
@@ -14,11 +13,12 @@ import { Container, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
 import { ModalTitle } from "../../../components/modalElements";
 import { Text } from "../../../components/text";
-import { Theme, iconSize } from "../../../design-system";
+import { iconSize } from "../../../design-system";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { openOauthSignInWindow } from "../../utils/openOauthSignInWindow";
 import { Img } from "../../../components/Img";
 import { googleIconUri } from "../../ConnectWallet/icons/socialLogins";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const PaperGoogleLogin = (props: ConnectUIProps<PaperWallet>) => {
  const { goBack, modalSize, connected } = props;
@@ -28,7 +28,7 @@ export const PaperGoogleLogin = (props: ConnectUIProps<PaperWallet>) => {
  const setConnectionStatus = useSetConnectionStatus();
  const setConnectedWallet = useSetConnectedWallet();
  const connectionStatus = useConnectionStatus();
-  const themeObj = useTheme() as Theme;
+  const themeObj = useCustomTheme();

  // Need to trigger google login on button click to avoid popup from being blocked
  const googleLogin = async () => {
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { ConnectUIProps, useWalletContext } from "@thirdweb-dev/react-core";
 import { PaperWallet } from "@thirdweb-dev/wallets";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -9,9 +8,11 @@ import { Container, Line, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
 import { Input } from "../../../components/formElements";
 import { Text } from "../../../components/text";
-import { Theme, fontSize } from "../../../design-system";
+import { fontSize } from "../../../design-system";
 import { RecoveryShareManagement } from "./types";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledButton } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 type PaperOTPLoginUIProps = ConnectUIProps<PaperWallet> & {
  recoveryShareManagement: RecoveryShareManagement;
@@ -273,14 +274,17 @@ export const PaperOTPLoginUI: React.FC<PaperOTPLoginUIProps> = (props) => {
  );
 };

-const LinkButton = styled.button<{ theme?: Theme }>`
-  all: unset;
-  color: ${(p) => p.theme.colors.accentText};
-  font-size: ${fontSize.sm};
-  cursor: pointer;
-  text-align: center;
-  width: 100%;
-  &:hover {
-    color: ${(p) => p.theme.colors.primaryText};
-  }
-`;
+const LinkButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    color: theme.colors.accentText,
+    fontSize: fontSize.sm,
+    cursor: "pointer",
+    textAlign: "center",
+    width: "100%",
+    "&:hover": {
+      color: theme.colors.primaryText,
+    },
+  };
+});
@@ -20,6 +20,15 @@ import { useScreenContext } from "../../ConnectWallet/Modal/screen";
 import { PaperGoogleLogin } from "./PaperGoogleLogin";
 import { emailIcon } from "../../ConnectWallet/icons/dataUris";

+/**
+ * Paper Wallet
+ *
+ * @param _config - Options available to create a paper wallet
+ * @returns The WalletConfig<PaperWallet> object
+ *
+ * @deprecated We have deprecated PaperWallet in favor of our {@link EmbeddedWallet} which adds support for more sign in methods.
+ * Learn more here: https://portal.thirdweb.com/embedded-wallet
+ */
 export const paperWallet = (
  _config?: PaperConfig,
 ): WalletConfig<PaperWallet> => {
@@ -4,7 +4,7 @@ import { Button } from "../../../components/buttons";
 import { Label } from "../../../components/formElements";
 import { FormField } from "../../../components/formFields";
 import { ModalDescription } from "../../../components/modalElements";
-import { iconSize, spacing, Theme, fontSize } from "../../../design-system";
+import { iconSize, spacing, fontSize } from "../../../design-system";
 import styled from "@emotion/styled";
 import {
  ChevronDownIcon,
@@ -28,6 +28,8 @@ import { Link, Text } from "../../../components/text";
 import { ModalConfigCtx } from "../../../evm/providers/wallet-ui-states-provider";
 import { safeSlugToChainId } from "./safeChainSlug";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { StyledSelect } from "../../../design-system/elements";
+import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

 export const SelectAccount: React.FC<{
  onBack: () => void;
@@ -373,38 +375,39 @@ export const SelectAccount: React.FC<{
  );
 };

-const NetworkSelect = styled.select<{ theme?: Theme }>`
-  width: 100%;
-  padding: ${spacing.sm};
-  box-sizing: border-box;
-  outline: none;
-  border: none;
-  border-radius: 6px;
-  color: ${(p) => p.theme.colors.primaryText};
-  background: none;
-  font-size: ${fontSize.md};
-  box-shadow: 0 0 0 1.5px ${(p) => p.theme.colors.secondaryButtonBg};
-  appearance: none;
+const NetworkSelect = /* @__PURE__ */ StyledSelect(() => {
+  const theme = useCustomTheme();
+  return {
+    width: "100%",
+    padding: spacing.sm,
+    boxSizing: "border-box",
+    outline: "none",
+    border: "none",
+    borderRadius: "6px",
+    color: theme.colors.primaryText,
+    background: "none",
+    fontSize: fontSize.md,
+    boxShadow: `0 0 0 1.5px ${theme.colors.secondaryButtonBg}`,
+    appearance: "none",
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.accentText}`,
+    },
+    "&:invalid": {
+      color: theme.colors.secondaryText,
+    },
+    "&[data-error='true']": {
+      boxShadow: `0 0 0 1.5px ${theme.colors.danger}`,
+    },
+    "&[disabled]": {
+      opacity: 1,
+      cursor: "not-allowed",
+    },
+  };
+});

-  &:focus {
-    box-shadow: 0 0 0 2px ${(p) => p.theme.colors.accentText};
-  }
-
-  &:invalid {
-    color: ${(p) => p.theme.colors.secondaryText};
-  }
-  &[data-error="true"] {
-    box-shadow: 0 0 0 1.5px ${(p) => p.theme.colors.danger};
-  }
-
-  &[disabled] {
-    opacity: 1;
-    cursor: not-allowed;
-  }
-`;
-
-const StyledChevronDownIcon = /* @__PURE__ */ styled(ChevronDownIcon)<{
-  theme?: Theme;
-}>`
-  color: ${(p) => p.theme.colors.secondaryText};
-`;
+const StyledChevronDownIcon = /* @__PURE__ */ styled(ChevronDownIcon)(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.secondaryText,
+  };
+});
@@ -3,7 +3,7 @@ module.exports = {
  extends: ["thirdweb"],
  plugins: ["better-tree-shaking", "eslint-plugin-tsdoc"],
  rules: {
-    "tsdoc/syntax": "warn",
+    "tsdoc/syntax": "error",
    "better-tree-shaking/no-top-level-side-effects": "error",
    "no-restricted-imports": [
      "error",
@@ -1,5 +1,23 @@
 # @thirdweb-dev/sdk

+## 4.0.13
+
+### Patch Changes
+
+- [#1947](https://github.com/thirdweb-dev/js/pull/1947) [`23ab897e`](https://github.com/thirdweb-dev/js/commit/23ab897e329cdd5b316fbe554ea0f64add91f2b4) Thanks [@adam-maj](https://github.com/adam-maj)! - Add support for EIP-2612 permit to engine relayer
+
+- [#1936](https://github.com/thirdweb-dev/js/pull/1936) [`a3f3e160`](https://github.com/thirdweb-dev/js/commit/a3f3e160e07328655a4f0332f41f4edd210a1a8a) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Improvements for auto resolving contracts:
+
+  - ~10x performance improvements using shared caching layer at the edge
+  - auto resolves any verified contract on etherscan on supported chains
+
+- [#1944](https://github.com/thirdweb-dev/js/pull/1944) [`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5) Thanks [@iketw](https://github.com/iketw)! - Fixes all tsdoc comments warnings
+
+- [#1949](https://github.com/thirdweb-dev/js/pull/1949) [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd) Thanks [@iketw](https://github.com/iketw)! - Enforces the tsdoc/syntax rule
+
+- Updated dependencies [[`6fcdec7c`](https://github.com/thirdweb-dev/js/commit/6fcdec7c12e4a3c0d10f3a67771e19cfad5c8ab5), [`480ed721`](https://github.com/thirdweb-dev/js/commit/480ed721d1c736049fa8b6ee4cbdbdf3cce18abd)]:
+  - @thirdweb-dev/storage@2.0.4
+
 ## 4.0.12

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/sdk",
-  "version": "4.0.12",
+  "version": "4.0.13",
  "description": "The main thirdweb SDK.",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/sdk",
  "license": "Apache-2.0",
@@ -6,9 +6,9 @@ import { computeDeploymentInfo } from "./computeDeploymentInfo";
 /**
 *
 * @internal
- * @param provider
- * @param storage
- * @param create2Factory
+ * @param provider - The provider to use
+ * @param storage - The storage to use
+ * @param create2Factory - The create2 factory to use
 */
 export async function computeCloneFactoryAddress(
  provider: providers.Provider,
@@ -5,9 +5,9 @@ import { getSaltHash } from "./getSaltHash";
 * Pre-compute a contract's deployment address for a CREATE2 deployment.
 *
 * @public
- * @param bytecode: Creation bytecode of the contract to deploy
- * @param encodedArgs: Abi-encoded constructor params
- * @param create2FactoryAddress
+ * @param bytecode - Creation bytecode of the contract to deploy
+ * @param encodedArgs - Abi-encoded constructor params
+ * @param create2FactoryAddress - The create2 factory address to use
 */
 export function computeDeploymentAddress(
  bytecode: string,
@@ -6,9 +6,9 @@ import { computeDeploymentInfo } from "./computeDeploymentInfo";
 /**
 *
 * @internal
- * @param provider
- * @param storage
- * @param create2Factory
+ * @param provider - The provider to use
+ * @param storage - The storage to use
+ * @param create2Factory - The create2 factory to use
 */
 export async function computeEOAForwarderAddress(
  provider: providers.Provider,
@@ -6,9 +6,9 @@ import { computeDeploymentInfo } from "./computeDeploymentInfo";
 /**
 *
 * @internal
- * @param provider
- * @param storage
- * @param create2Factory
+ * @param provider - The provider to use
+ * @param storage - The storage to use
+ * @param create2Factory - The create2 factory to use
 */
 export async function computeForwarderAddress(
  provider: providers.Provider,
@@ -6,9 +6,9 @@ import { computeDeploymentInfo } from "./computeDeploymentInfo";
 /**
 *
 * @internal
- * @param provider
- * @param storage
- * @param create2Factory
+ * @param provider - The provider to use
+ * @param storage - The storage to use
+ * @param create2Factory - The create2 factory to use
 */
 export async function computeNativeTokenAddress(
  provider: providers.Provider,
@@ -10,10 +10,10 @@ import { isContractDeployed } from "./isContractDeployed";
 *
 * @public
 *
- * @param signer
- * @param bytecode
- * @param encodedArgs
- * @param create2FactoryAddress
+ * @param signer - The signer to use
+ * @param bytecode - The bytecode to deploy
+ * @param encodedArgs - The encoded constructor args to use
+ * @param create2FactoryAddress - The create2 factory address to use
 */
 export async function deployContractDeterministic(
  signer: Signer,
@@ -15,10 +15,10 @@ import { getInitBytecodeWithSalt } from "./getInitBytecodeWithSalt";
 *
 * @public
 *
- * @param type signer
- * @param bytecode
- * @param encodedArgs
- * @param create2FactoryAddress
+ * @param signer - The signer to use
+ * @param bytecode - The bytecode to deploy
+ * @param encodedArgs - The encoded constructor args to use
+ * @param create2FactoryAddress - The create2 factory address to use
 */
 export async function deployContractDeterministicRaw(
  signer: Signer,
@@ -13,7 +13,7 @@ import { getCreate2FactoryDeploymentInfo } from "./getCreate2FactoryDeploymentIn
 * Ref: https://github.com/Arachnid/deterministic-deployment-proxy
 *
 * @public
- * @param signer
+ * @param signer - The signer to use
 */
 export async function deployCreate2Factory(
  signer: Signer,
@@ -24,11 +24,11 @@ import { AbiInput } from "../../schema/contracts/custom";
 *
 * @public
 *
- * @param bytecode
- * @param abi
- * @param signer
- * @param constructorArgs
- * @param saltForCreate2
+ * @param bytecode - The bytecode to deploy
+ * @param abi - The abi to use
+ * @param signer - The signer to use
+ * @param constructorArgs - The constructor args to use
+ * @param saltForCreate2 - The salt to use
 */
 export async function directDeployDeterministic(
  bytecode: string,
@@ -115,11 +115,11 @@ export async function directDeployDeterministic(
 *
 * @public
 *
- * @param publishMetadataUri
- * @param signer
- * @param storage
- * @param constructorArgs
- * @param saltForCreate2
+ * @param publishMetadataUri - The metadata uri to use
+ * @param signer - The signer to use
+ * @param storage - The storage to use
+ * @param constructorArgs - The constructor args to use
+ * @param saltForCreate2 - The salt to use
 */
 export async function directDeployDeterministicWithUri(
  publishMetadataUri: string,
@@ -153,16 +153,16 @@ export async function directDeployDeterministicWithUri(
 *
 * @public
 *
- * @param contractName
- * @param publisherAddress
- * @param contractVersion
- * @param constructorArgs
- * @param signer
- * @param storage
- * @param clientId
- * @param secretKey
- * @param constructorArgs
- * @param saltForCreate2
+ * @param contractName - The name of the contract to deploy
+ * @param publisherAddress - The publisher address to use
+ * @param contractVersion - The contract version to use
+ * @param constructorArgs - The constructor args to use
+ * @param signer - The signer to use
+ * @param storage - The storage to use
+ * @param clientId - The client id to use
+ * @param secretKey - The secret key to use
+ * @param constructorArgs - The constructor args to use
+ * @param saltForCreate2 - The salt to use
 */
 export async function directDeployDeterministicPublished(
  contractName: string,
@@ -11,7 +11,7 @@ import { getCreate2FactoryDeploymentInfo } from "./getCreate2FactoryDeploymentIn
 * https://github.com/Arachnid/deterministic-deployment-proxy/blob/master/source/deterministic-deployment-proxy.yul
 *
 * @internal
- * @param provider
+ * @param provider - The provider to use
 */
 export async function getCreate2FactoryAddress(
  provider: providers.Provider,
@@ -6,8 +6,8 @@ import { getKeylessTxn } from "./getKeylessTxn";
 /**
 *
 * @public
- * @param transaction: Unsigned transaction object
- * @param signature: Signature bytes
+ * @param transaction - Unsigned transaction object
+ * @param signature - Signature bytes
 */
 export function getCreate2FactoryDeploymentInfo(
  chainId: number,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
github-actions[bot]GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	44c9ccd65d	Version Packages (#1963 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-16 10:21:09 -08:00
Manan TankandGitHub	7912c26323	[react] use custom theme context in styled components (#1954 )	2023-11-16 17:53:44 +00:00
iketw GitHub Manan Tank	69d68f5a25	[RN/React] Enables FB and Apple sign in for embedded wallet (#1945 ) Co-authored-by: Manan Tank <[email protected]>	2023-11-16 13:31:22 +00:00
github-actions[bot]GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	836be52724	Version Packages (#1959 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-15 20:26:55 -08:00
Joaquim VergesandGitHub	9f993dcc1e	[EmbeddedWallet] fix switch chains logic (#1958 )	2023-11-15 16:56:19 -08:00
github-actions[bot]GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	61760a180f	Version Packages (#1946 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-15 15:20:43 -08:00
Joaquim VergesandGitHub	a3f3e160e0	[SDK] Performance improvements for getContract (#1936 )	2023-11-15 23:01:25 +00:00
Joaquim VergesandGitHub	b1190914a9	[SmartWallet, React] Smart wallet performance and auto connect fixes (#1950 )	2023-11-15 18:37:30 +00:00
Kien NgoandGitHub	e79a952061	[React-core] Fix caching issue with useTotalCirculatingSupply (#1951 )	2023-11-15 14:34:57 +00:00
iketwandGitHub	480ed721d1	Enforces tsdoc/syntax code comments (#1949 )	2023-11-15 04:30:13 +00:00
iketw GitHub ElasticBottle	42c7436827	[React/Wallets] Deprecates PaperWallet in favor of EmbeddedWallet (#1948 ) Co-authored-by: ElasticBottle <[email protected]>	2023-11-15 03:33:10 +00:00
Adam MajmudarandGitHub	16e9e8b64d	[Wallets] Add EngineWallet & EngineSigner (#1939 )	2023-11-15 00:59:58 +00:00
Adam MajmudarandGitHub	23ab897e32	Add support for EIP-2612 to engine relayer (#1947 )	2023-11-14 23:20:44 +00:00
iketwandGitHub	6fcdec7c12	[SDK] Fixes all tsdoc warnings (#1944 )	2023-11-14 20:04:17 +00:00