thirdweb 5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346 → 5.48.1-nightly-886094fbac4f25735438a651cdb0747c6d5de6c5-20240821000347

package/src/react/web/ui/components/IconContainer.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+
+/**
+ * @internal
+ */
+export const IconContainer: React.FC<{
+  children: ReactNode | ReactNode[];
+  padding?: string;
+  style?: React.CSSProperties;
+}> = (props) => {
+  const theme = useCustomTheme();
+  return (
+    <div
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        display: "flex",
+        justifyItems: "center",
+        flexShrink: 0,
+        alignItems: "center",
+        padding: props.padding ?? "6px",
+        borderRadius: "100%",
+        border: `1px solid ${theme.colors.borderColor}`,
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/react/web/ui/components/Modal.tsx

@@ -114,7 +114,7 @@ export const Modal: React.FC<{
               {!props.hideCloseIcon && (
                 <CrossContainer>
                   <Dialog.Close asChild>
-                    <IconButton type="button" aria-label="Close">
+                    <IconButton autoFocus type="button" aria-label="Close">
                       <Cross2Icon
                         width={iconSize.md}
                         height={iconSize.md}

package/src/react/web/ui/components/WalletImage.tsx

@@ -4,7 +4,6 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
-import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
@@ -33,13 +32,7 @@ export function WalletImage(props: {
       // show auth provider icon for in-app wallets
       // show the admin EOA icon for smart
       const storage = webLocalStorage;
-      let activeEOAId = props.id;
-      if (props.id === "smart") {
-        const storedId = await getStoredActiveWalletId(storage);
-        if (storedId) {
-          activeEOAId = storedId;
-        }
-      }
+      const activeEOAId = props.id;
       let image: string | undefined;
 
       if (

package/src/react/web/ui/components/formElements.tsx

@@ -110,16 +110,16 @@ export const InputContainer = /* @__PURE__ */ StyledDiv(() => {
   return {
     display: "flex",
     borderRadius: radius.md,
-    boxShadow: `0 0 0px 1.5px ${theme.colors.borderColor}`,
+    boxShadow: `0 0 0px 1px ${theme.colors.borderColor}`,
     "&:focus-within": {
-      boxShadow: `0 0 0px 2px ${theme.colors.accentText}`,
+      boxShadow: `0 0 0px 1px ${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}`,
+      boxShadow: `0 0 0px 1px ${theme.colors.danger}`,
     },
   };
 });

package/src/react/web/wallets/in-app/CountrySelector.tsx

@@ -2,11 +2,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import {
-  fontSize,
-  radius,
-  spacing,
-} from "../../../core/design-system/index.js";
+import { radius, spacing } from "../../../core/design-system/index.js";
 import { StyledOption, StyledSelect } from "../../ui/design-system/elements.js";
 
 export function CountrySelector({
@@ -47,8 +43,7 @@ export function CountrySelector({
           setCountryCode(e.target.value);
         }}
         style={{
-          paddingLeft: spacing.md,
-          paddingRight: "0",
+          padding: `${spacing.sm} ${spacing.md}`,
         }}
       >
         <Option
@@ -89,7 +84,6 @@ const Option = /* @__PURE__ */ StyledOption(() => {
 const Select = /* @__PURE__ */ StyledSelect((_) => {
   const theme = useCustomTheme();
   return {
-    fontSize: fontSize.sm,
     display: "block",
     padding: spacing.sm,
     boxSizing: "border-box",

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -34,6 +34,7 @@ import {
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
 import { Img } from "../../ui/components/Img.js";
+import { Spacer } from "../../ui/components/Spacer.js";
 import { TextDivider } from "../../ui/components/TextDivider.js";
 import { Container } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
@@ -90,6 +91,13 @@ export const ConnectWalletSocialOptions = (
   ) => void;
 
   const themeObj = useCustomTheme();
+  const optionalImageMetadata = useMemo(
+    () =>
+      props.wallet.id === "inApp"
+        ? props.wallet.getConfig()?.metadata?.image
+        : undefined,
+    [props.wallet],
+  );
 
   const loginMethodsLabel = {
     google: locale.signInWithGoogle,
@@ -261,6 +269,19 @@ export const ConnectWalletSocialOptions = (
         position: "relative",
       }}
     >
+      {optionalImageMetadata && (
+        <>
+          <Img
+            client={props.client}
+            src={optionalImageMetadata.src}
+            alt={optionalImageMetadata.alt}
+            width={`${optionalImageMetadata.width}`}
+            height={`${optionalImageMetadata.height}`}
+            style={{ margin: "auto" }}
+          />
+          <Spacer y="xxs" />
+        </>
+      )}
       {/* Social Login */}
       {hasSocialLogins && (
         <Container

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346";
+export const version = "5.48.1-nightly-886094fbac4f25735438a651cdb0747c6d5de6c5-20240821000347";

package/src/wallets/custom/smart/image.ts

@@ -1,4 +1,4 @@
 const image =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiByeD0iMTIiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xXzkxKSIvPgo8cGF0aCBkPSJNMzkuOTk2OSAxOEw0MC4yMzMzIDE4LjAxNTZMNDAuMzUxMyAxOC4wMzMzTDQwLjQ3MzYgMTguMDYyMkw0MC42OTU4IDE4LjEzNzhDNDAuODQ5NCAxOC4yMDA2IDQwLjk5NTQgMTguMjg0MiA0MS4xMzA1IDE4LjM4NjdMNDEuMzM4NyAxOC41Njg5TDQxLjg0OTMgMTkuMDUzM0M0NS44ODkxIDIyLjc3NjggNTAuOTk0NyAyNC43NzYyIDU2LjI0NTggMjQuNjkxMUw1Ni45MzA3IDI0LjY2ODlDNTcuMzc4MyAyNC42NDYyIDU3LjgyIDI0Ljc5MDkgNTguMTg0OSAyNS4wNzk4QzU4LjU0OTggMjUuMzY4NyA1OC44MTY3IDI1Ljc4NSA1OC45NDMxIDI2LjI2MjJDNTkuOTI3MSAyOS45NzY5IDYwLjIyODMgMzMuODczMSA1OS44Mjg3IDM3LjcxOTRDNTkuNDI4OSA0MS41NjU4IDU4LjMzNjcgNDUuMjgzNiA1Ni42MTY1IDQ4LjY1MjNDNTQuODk2NSA1Mi4wMjA3IDUyLjU4MzYgNTQuOTcxNCA0OS44MTU2IDU3LjMyODVDNDcuMDQ3NiA1OS42ODU2IDQzLjg4MDkgNjEuNDAxMiA0MC41MDM2IDYyLjM3MzRDNDAuMTc0IDYyLjQ2ODMgMzkuODI4IDYyLjQ2ODMgMzkuNDk4MiA2Mi4zNzM0QzM2LjEyMDkgNjEuNDAxNCAzMi45NTM4IDU5LjY4NiAzMC4xODU2IDU3LjMyODlDMjcuNDE3NiA1NC45NzE4IDI1LjEwNDUgNTIuMDIxNCAyMy4zODQyIDQ4LjY1MjlDMjEuNjYzOCA0NS4yODQzIDIwLjU3MTMgNDEuNTY2MiAyMC4xNzE1IDM3LjcxOThDMTkuNzcxNyAzMy44NzM0IDIwLjA3MjcgMjkuOTc2OSAyMS4wNTY3IDI2LjI2MjJDMjEuMTgzMSAyNS43ODUgMjEuNDUwMSAyNS4zNjg3IDIxLjgxNSAyNS4wNzk4QzIyLjE3OTkgMjQuNzkwOSAyMi42MjE1IDI0LjY0NjIgMjMuMDY5MyAyNC42Njg5QzI4LjU1MTMgMjQuOTQ3IDMzLjkyOTMgMjIuOTQ0NCAzOC4xNTA3IDE5LjA1MzNMMzguNjc3MyAxOC41NTMzTDM4Ljg2OTYgMTguMzg2N0MzOS4wMDQ3IDE4LjI4NDIgMzkuMTUwNSAxOC4yMDA2IDM5LjMwNCAxOC4xMzc4TDM5LjUyODIgMTguMDYyMkMzOS42MDY5IDE4LjA0MTIgMzkuNjg2NSAxOC4wMjU2IDM5Ljc2NjcgMTguMDE1NkwzOS45OTY5IDE4Wk00MC4wMDA5IDMzLjU1NTZDMzguOTkwNSAzMy41NTUxIDM4LjAxNzMgMzMuOTc4NyAzNy4yNzY1IDM0Ljc0MTFDMzYuNTM1NiAzNS41MDM2IDM2LjA4MTYgMzYuNTQ4NSAzNi4wMDU4IDM3LjY2NjdMMzUuOTk1OCAzOEwzNi4wMDU4IDM4LjMzMzRDMzYuMDU1MSAzOS4wNTQ3IDM2LjI2MjUgMzkuNzUxOCAzNi42MDk4IDQwLjM2NEMzNi45NTY5IDQwLjk3NjIgMzcuNDMzNiA0MS40ODUxIDM3Ljk5ODUgNDEuODQ2N1Y0NS43Nzc4TDM4LjAxMjUgNDYuMDM3OEMzOC4wNzI3IDQ2LjYwMDMgMzguMzI0MiA0Ny4xMTU4IDM4LjcxNTYgNDcuNDc5NEMzOS4xMDcxIDQ3Ljg0MjkgMzkuNjA4NyA0OC4wMjY5IDQwLjExODIgNDcuOTkzOEM0MC42Mjc4IDQ3Ljk2MDUgNDEuMTA2NyA0Ny43MTI3IDQxLjQ1NzEgNDcuMzAwOUM0MS44MDc2IDQ2Ljg4ODkgNDIuMDAyOSA0Ni4zNDQzIDQyLjAwMzYgNDUuNzc3OEw0Mi4wMDU2IDQxLjg0ODlDNDIuNzY5MSA0MS4zNTk2IDQzLjM2NiA0MC42MDQyIDQzLjcwMzQgMzkuNzAwMkM0NC4wNDA3IDM4Ljc5NiA0NC4wOTk2IDM3Ljc5MzggNDMuODcxMSAzNi44NDg3QzQzLjY0MjcgMzUuOTAzNiA0My4xMzk2IDM1LjA2ODUgNDIuNDM5OCAzNC40NzMxQzQxLjc0IDMzLjg3NzYgNDAuODgyNyAzMy41NTUxIDQwLjAwMDkgMzMuNTU1NloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xXzkxKSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzFfOTEiIHgxPSI0MCIgeTE9IjAiIHgyPSI0MCIgeTI9IjgwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU2QkQiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0MyMEY0Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl8xXzkxIiB4MT0iNDAiIHkxPSIxOCIgeDI9IjQwIiB5Mj0iNjIuNDQ0NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNFMUQ4RkIiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K";
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDEzLjAwMDRDMjAgMTguMDAwNCAxNi41IDIwLjUwMDUgMTIuMzQgMjEuOTUwNUMxMi4xMjIyIDIyLjAyNDMgMTEuODg1NSAyMi4wMjA3IDExLjY3IDIxLjk0MDVDNy41IDIwLjUwMDUgNCAxOC4wMDA0IDQgMTMuMDAwNFY2LjAwMDQ1QzQgNS43MzUyMyA0LjEwNTM2IDUuNDgwODggNC4yOTI4OSA1LjI5MzM0QzQuNDgwNDMgNS4xMDU4MSA0LjczNDc4IDUuMDAwNDUgNSA1LjAwMDQ1QzcgNS4wMDA0NSA5LjUgMy44MDA0NSAxMS4yNCAyLjI4MDQ1QzExLjQ1MTkgMi4wOTk0NSAxMS43MjE0IDIgMTIgMkMxMi4yNzg2IDIgMTIuNTQ4MSAyLjA5OTQ1IDEyLjc2IDIuMjgwNDVDMTQuNTEgMy44MTA0NSAxNyA1LjAwMDQ1IDE5IDUuMDAwNDVDMTkuMjY1MiA1LjAwMDQ1IDE5LjUxOTYgNS4xMDU4MSAxOS43MDcxIDUuMjkzMzRDMTkuODk0NiA1LjQ4MDg4IDIwIDUuNzM1MjMgMjAgNi4wMDA0NVYxMy4wMDA0WiIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOSAxMkwxMSAxNEwxNSAxMCIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
 
 export default image;

package/src/wallets/in-app/core/authentication/types.ts

@@ -93,7 +93,7 @@ export type OauthOption = {
 };
 
 export type Profile = {
-  type: AuthOption;
+  type: AuthOption | "wallet";
   details: {
     id?: string;
     email?: string;