thirdweb 5.34.4-nightly-88fa60d4ad7ee6ce0a8305ce35e023d1a858ea85-20240716000333 → 5.35.0-nightly-aadbd33e9d696bd7dd77561fa3f3a0a0fa7747f5-20240716082511

package/src/react/native/ui/connect/ConnectModal.tsx

@@ -6,11 +6,13 @@ import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/typ
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
+import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
+import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
 import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
@@ -19,7 +21,7 @@ import {
   WalletImage,
   getAuthProviderImage,
 } from "../components/WalletImage.js";
-import { ThemedButtonWithIcon } from "../components/button.js";
+import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
@@ -34,7 +36,8 @@ export type ModalState =
   | { screen: "connecting"; wallet: Wallet; authMethod?: InAppWalletAuth }
   | { screen: "error"; error: string }
   | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
-  | { screen: "external_wallets" };
+  | { screen: "external_wallets" }
+  | { screen: "auth" };
 
 /**
  * A component that allows the user to connect their wallet.
@@ -57,12 +60,20 @@ export type ModalState =
 export function ConnectEmbed(props: ConnectEmbedProps) {
   const theme = parseTheme(props.theme);
   const wallet = useActiveWallet();
+  const siweAuth = useSiweAuth(wallet, props.auth);
+  const needsAuth = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
+  const isConnected = wallet && !needsAuth;
   const adaptedProps = {
     ...props,
     connectModal: { ...props },
   } as ConnectButtonProps;
-  return wallet ? null : (
-    <ConnectModal {...adaptedProps} theme={theme} containerType="embed" />
+  return isConnected ? null : (
+    <ConnectModal
+      {...adaptedProps}
+      theme={theme}
+      containerType="embed"
+      siweAuth={siweAuth}
+    />
   );
 }
 
@@ -71,6 +82,7 @@ export function ConnectModal(
     theme: Theme;
     onClose?: () => void;
     containerType: ContainerType;
+    siweAuth: ReturnType<typeof useSiweAuth>;
   },
 ) {
   const {
@@ -80,8 +92,20 @@ export function ConnectModal(
     accountAbstraction,
     onConnect,
     onClose,
+    siweAuth,
   } = props;
-  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
+  const wallet = useActiveWallet();
+  const needsAuth = wallet && siweAuth.requiresAuth && !siweAuth.isLoggedIn;
+  const [modalState, setModalState] = useState<ModalState>(
+    needsAuth ? { screen: "auth" } : { screen: "base" },
+  );
+  const wallets = props.wallets || getDefaultWallets(props);
+  const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
+    | Wallet<"inApp">
+    | undefined;
+  const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
+  const showBranding = props.connectModal?.showThirdwebBranding !== false;
+
   const connector = useCallback(
     async (args: {
       wallet: Wallet;
@@ -100,22 +124,30 @@ export function ConnectModal(
           accountAbstraction,
           onConnect,
         });
-        onClose?.();
+        if (siweAuth.requiresAuth && !siweAuth.isLoggedIn) {
+          // if in-app wallet, signin headlessly
+          // TODO (rn) handle signless smart wallets as well
+          if (w.id === "inApp") {
+            await siweAuth.doLogin();
+            onClose?.();
+          } else {
+            setModalState({
+              screen: "auth",
+            });
+          }
+        } else {
+          onClose?.();
+        }
       } catch (error) {
         setModalState({
           screen: "error",
-          error: (error as Error)?.message || "unknown error",
+          error: (error as Error)?.message || "Unknown error",
         });
       }
     },
-    [client, accountAbstraction, onConnect, onClose],
+    [client, accountAbstraction, onConnect, onClose, siweAuth],
   );
-  const wallets = props.wallets || getDefaultWallets(props);
-  const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
-    | Wallet<"inApp">
-    | undefined;
-  const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
-  const showBranding = props.connectModal?.showThirdwebBranding !== false;
+
   let content: JSX.Element;
 
   switch (modalState.screen) {
@@ -192,7 +224,7 @@ export function ConnectModal(
           ) : (
             <Spacer size="lg" />
           )}
-          <LoadingView
+          <WalletLoadingView
             theme={theme}
             wallet={modalState.wallet}
             authProvider={modalState.authMethod}
@@ -206,6 +238,37 @@ export function ConnectModal(
       );
       break;
     }
+    case "auth": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={props.onClose}
+            title={props.connectModal?.title || "Sign in"}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <SignInView
+            theme={theme}
+            siweAuth={siweAuth}
+            onSignIn={() => props.onClose?.()}
+            onError={(error) => setModalState({ screen: "error", error })}
+            onDisconnect={() => setModalState({ screen: "base" })}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
+        </>
+      );
+      break;
+    }
     case "error": {
       content = (
         <>
@@ -319,11 +382,15 @@ export function ConnectModal(
   );
 }
 
-function LoadingView({
+function WalletLoadingView({
   theme,
   wallet,
   authProvider,
-}: { theme: Theme; wallet: Wallet; authProvider?: InAppWalletAuth }) {
+}: {
+  theme: Theme;
+  wallet: Wallet;
+  authProvider?: InAppWalletAuth;
+}) {
   const walletInfo = useWalletInfo(wallet.id);
   return (
     <View
@@ -335,7 +402,7 @@ function LoadingView({
         paddingVertical: spacing.xl,
       }}
     >
-      <WalletLoadingThumbnail theme={theme} imageSize={100}>
+      <WalletLoadingThumbnail theme={theme} imageSize={100} animate={true}>
         {authProvider ? (
           <View
             style={{
@@ -363,13 +430,108 @@ function LoadingView({
       <Spacer size="sm" />
       <ThemedText theme={theme} type="subtext">
         {authProvider
-          ? `Sign into your ${capitalizeFirstLetter(authProvider)} account`
+          ? `Signing into your ${capitalizeFirstLetter(authProvider)} account`
           : `Accept the connection request in ${walletInfo.data?.name}`}
       </ThemedText>
     </View>
   );
 }
 
+function SignInView({
+  theme,
+  siweAuth,
+  onSignIn,
+  onError,
+  onDisconnect,
+}: {
+  theme: Theme;
+  siweAuth: ReturnType<typeof useSiweAuth>;
+  onSignIn: () => void;
+  onError: (error: string) => void;
+  onDisconnect: () => void;
+}) {
+  const wallet = useActiveWallet();
+  const walletInfo = useWalletInfo(wallet?.id);
+  const { disconnect } = useDisconnect();
+  const isSigningIn = siweAuth.isLoggingIn || siweAuth.isLoading;
+  return (
+    wallet && (
+      <View
+        style={{
+          flexDirection: "column",
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          padding: spacing.xl,
+        }}
+      >
+        <WalletLoadingThumbnail
+          theme={theme}
+          imageSize={100}
+          animate={isSigningIn}
+        >
+          <WalletImage theme={theme} size={90} wallet={wallet} />
+        </WalletLoadingThumbnail>
+        <Spacer size="xl" />
+        <ThemedText theme={theme} type="subtitle">
+          {"Complete sign in"}
+        </ThemedText>
+        <Spacer size="xs" />
+        <ThemedText theme={theme} type="subtext">
+          Sign login request in {walletInfo.data?.name} to continue
+        </ThemedText>
+        <Spacer size="xl" />
+        <ThemedButton
+          theme={theme}
+          variant="accent"
+          disabled={isSigningIn}
+          style={{ width: "100%" }}
+          onPress={async () => {
+            try {
+              await siweAuth.doLogin();
+              onSignIn();
+            } catch (e) {
+              onError((e as Error)?.message || "Unknown error");
+            }
+          }}
+        >
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{
+              color: theme.colors.accentButtonText,
+            }}
+          >
+            Sign Login Request
+          </ThemedText>
+        </ThemedButton>
+        <Spacer size="md" />
+        <ThemedButton
+          theme={theme}
+          variant="secondary"
+          disabled={isSigningIn}
+          style={{ width: "100%" }}
+          onPress={async () => {
+            disconnect(wallet);
+            siweAuth.doLogout();
+            onDisconnect();
+          }}
+        >
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{
+              color: theme.colors.accentButtonText,
+            }}
+          >
+            Disconnect
+          </ThemedText>
+        </ThemedButton>
+      </View>
+    )
+  );
+}
+
 function OrDivider({ theme }: { theme: Theme }) {
   return (
     <View

package/src/react/native/ui/connect/ConnectedModal.tsx

@@ -5,6 +5,7 @@ import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
+import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainName } from "../../../core/hooks/others/useChainQuery.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
@@ -290,12 +291,14 @@ const ViewFunds = (props: ConnectedModalPropsInner) => {
 const DisconnectWallet = (props: ConnectedModalProps) => {
   const { wallet, theme, onClose } = props;
   const { disconnect } = useDisconnect();
+  const siweAuth = useSiweAuth(wallet, props.auth);
   return (
     <TouchableOpacity
       style={styles.walletMenuRow}
       onPress={() => {
         onClose?.();
         disconnect(wallet);
+        siweAuth.doLogout();
       }}
     >
       <RNImage

package/src/react/native/ui/connect/WalletLoadingThumbnail.tsx

@@ -14,6 +14,7 @@ interface Props {
   children?: React.ReactNode;
   imageSize: number;
   showError?: boolean;
+  animate: boolean;
 }
 
 function WalletLoadingThumbnail({
@@ -21,10 +22,12 @@ function WalletLoadingThumbnail({
   children,
   showError,
   imageSize,
+  animate,
 }: Props) {
   const spinValue = useRef(new Animated.Value(0));
 
   useEffect(() => {
+    if (!animate) return;
     const animation = Animated.timing(spinValue.current, {
       toValue: 1,
       duration: 1150,
@@ -38,7 +41,7 @@ function WalletLoadingThumbnail({
     return () => {
       loop.stop();
     };
-  }, []);
+  }, [animate]);
 
   const spin = spinValue.current.interpolate({
     inputRange: [0, 1],
@@ -53,18 +56,20 @@ function WalletLoadingThumbnail({
         viewBox={`0 0 ${imageSize + PADDING} ${imageSize + PADDING}`}
         style={styles.loader}
       >
-        <AnimatedRect
-          x="2"
-          y="2"
-          width={imageSize + INTERNAL_PADDING}
-          height={imageSize + INTERNAL_PADDING}
-          rx={15}
-          stroke={showError ? "transparent" : theme.colors.accentButtonBg}
-          strokeWidth={3}
-          fill="transparent"
-          strokeDasharray={"100 300"}
-          strokeDashoffset={spin}
-        />
+        {animate && (
+          <AnimatedRect
+            x="2"
+            y="2"
+            width={imageSize + INTERNAL_PADDING}
+            height={imageSize + INTERNAL_PADDING}
+            rx={15}
+            stroke={showError ? "transparent" : theme.colors.accentButtonBg}
+            strokeWidth={3}
+            fill="transparent"
+            strokeDasharray={"100 300"}
+            strokeDashoffset={spin}
+          />
+        )}
       </Svg>
       {showError && (
         <View

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -536,7 +536,9 @@ function DetailsModal(props: {
           >
             <CoinsIcon size={iconSize.md} />
             <Text color="primaryText">
-              {props.supportedNFTs ? "View Assets" : "View Funds"}
+              {props.supportedNFTs
+                ? locale.viewFunds.viewAssets
+                : locale.viewFunds.title}
             </Text>
           </MenuButton>
 
@@ -550,7 +552,7 @@ function DetailsModal(props: {
             }}
           >
             <OutlineWalletIcon size={iconSize.md} />
-            <Text color="primaryText">Manage Wallet</Text>
+            <Text color="primaryText">{props.locale.manageWallet.title}</Text>
           </MenuButton>
 
           {/* Switch to Personal Wallet  */}
@@ -702,6 +704,7 @@ function DetailsModal(props: {
           }}
           setScreen={setScreen}
           client={client}
+          connectLocale={locale}
         />
       );
     } else {
@@ -713,6 +716,7 @@ function DetailsModal(props: {
             setScreen("main");
           }}
           client={client}
+          connectLocale={locale}
         />
       );
     }
@@ -725,6 +729,7 @@ function DetailsModal(props: {
           setScreen("main");
         }}
         client={client}
+        connectLocale={locale}
       />
     );
   } else if (screen === "view-tokens") {
@@ -735,6 +740,7 @@ function DetailsModal(props: {
           setScreen("main");
         }}
         client={client}
+        connectLocale={locale}
       />
     );
   } else if (screen === "private-key") {

package/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -98,6 +98,17 @@ const connectLocaleEn: ConnectLocale = {
       inProgress: "Awaiting Confirmation",
     },
   },
+  manageWallet: {
+    title: "Manage Wallet",
+    connectAnApp: "Connect an App",
+    exportPrivateKey: "Export Private Key",
+  },
+  viewFunds: {
+    title: "View Funds",
+    viewNFTs: "View NFTs",
+    viewTokens: "View Tokens",
+    viewAssets: "View Assets",
+  },
 };
 
 export default connectLocaleEn;

package/src/react/web/ui/ConnectWallet/locale/es.ts

@@ -100,6 +100,17 @@ const connectWalletLocalEs: ConnectLocale = {
       inProgress: "Esperando confirmación",
     },
   },
+  manageWallet: {
+    title: "Manage Wallet",
+    connectAnApp: "Connect an App",
+    exportPrivateKey: "Export Private Key",
+  },
+  viewFunds: {
+    title: "View Funds",
+    viewNFTs: "View NFTs",
+    viewTokens: "View Tokens",
+    viewAssets: "View Assets",
+  },
 };
 
 export default connectWalletLocalEs;

package/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts

@@ -12,6 +12,9 @@ export async function getConnectLocale(localeId: LocaleId) {
     case "tl_PH": {
       return (await import("./tl.js")).default;
     }
+    case "vi_VN": {
+      return (await import("./vi.js")).default;
+    }
     default: {
       return (await import("./en.js")).default;
     }

package/src/react/web/ui/ConnectWallet/locale/ja.ts

@@ -100,6 +100,17 @@ const connectWalletLocalJa: ConnectLocale = {
       inProgress: "確認待ち",
     },
   },
+  manageWallet: {
+    title: "Manage Wallet",
+    connectAnApp: "Connect an App",
+    exportPrivateKey: "Export Private Key",
+  },
+  viewFunds: {
+    title: "View Funds",
+    viewNFTs: "View NFTs",
+    viewTokens: "View Tokens",
+    viewAssets: "View Assets",
+  },
 };
 
 export default connectWalletLocalJa;

package/src/react/web/ui/ConnectWallet/locale/tl.ts

@@ -100,6 +100,17 @@ const connectWalletLocalTl: ConnectLocale = {
       inProgress: "Naghihintay ng Kumpirmasyon",
     },
   },
+  manageWallet: {
+    title: "Manage Wallet",
+    connectAnApp: "Connect an App",
+    exportPrivateKey: "Export Private Key",
+  },
+  viewFunds: {
+    title: "View Funds",
+    viewNFTs: "View NFTs",
+    viewTokens: "View Tokens",
+    viewAssets: "View Assets",
+  },
 };
 
 export default connectWalletLocalTl;

package/src/react/web/ui/ConnectWallet/locale/types.ts

@@ -90,4 +90,15 @@ export type ConnectLocale = {
   transactions: string;
   viewAllTransactions: string;
   welcomeScreen: { defaultSubtitle: string; defaultTitle: string };
+  manageWallet: {
+    title: string;
+    connectAnApp: string;
+    exportPrivateKey: string;
+  };
+  viewFunds: {
+    title: string;
+    viewTokens: string;
+    viewNFTs: string;
+    viewAssets: string;
+  };
 };

package/src/react/web/ui/ConnectWallet/locale/vi.ts

@@ -0,0 +1,114 @@
+import type { ConnectLocale } from "./types.js";
+
+const connectLocaleVi: ConnectLocale = {
+  id: "vi_VN",
+  signIn: "Đăng nhập",
+  defaultButtonTitle: "Kết nối ví",
+  connecting: "Đang kết nối",
+  switchNetwork: "Chuyển mạng",
+  switchingNetwork: "Đang chuyển mạng",
+  defaultModalTitle: "Đăng nhập",
+  recommended: "Khuyên dùng",
+  installed: "Đã cài đặt",
+  buy: "Mua",
+  continueAsGuest: "Continue as guest",
+  connectAWallet: "Kết nối ví",
+  newToWallets: "Tìm hiểu về ví điện tử",
+  getStarted: "Bắt đầu",
+  guest: "Guest",
+  send: "Gửi",
+  receive: "Nhận",
+  currentNetwork: "Mạng lưới hiện tại",
+  switchAccount: "Chuyển tài khoản",
+  requestTestnetFunds: "Nhận Testnet Funds",
+  transactions: "Giao dịch",
+  viewAllTransactions: "Tất cả giao dịch",
+  backupWallet: "Sao lưu ví",
+  guestWalletWarning:
+    "Đây là ví tạm thời cho phiên đăng nhập của bạn. Vui lòng sao lưu ví nếu bạn không muốn dánh mất thông tin",
+  switchTo: "Đổi qua ví", // Used in "Switch to <Wallet-Name>"
+  connectedToSmartWallet: "Ví Thông Minh",
+  confirmInWallet: "Xác nhận bằng ví",
+  disconnectWallet: "Ngắt kết nối ví",
+  copyAddress: "Sao chép địa chỉ",
+  personalWallet: "Ví cá nhân",
+  smartWallet: "Ví Thông Minh",
+  or: "hoặc",
+  goBackButton: "Quay lại",
+  welcomeScreen: {
+    defaultTitle: "Cánh cổng dẫn tới thế giới phi tập trung",
+    defaultSubtitle: "Kết nối ví để bắt đầu",
+  },
+  agreement: {
+    prefix: "Bằng việc kết nối, bạn đồng ý với",
+    termsOfService: "Điều khoản dịch vụ",
+    and: "và",
+    privacyPolicy: "Chính sách bảo mật",
+  },
+  networkSelector: {
+    title: "Chọn mạng lưới",
+    mainnets: "Mainnets",
+    testnets: "Testnets",
+    allNetworks: "Tất cả",
+    addCustomNetwork: "Thêm mạng lưới",
+    inputPlaceholder: "Tìm theo tên hoặc ID",
+    categoryLabel: {
+      recentlyUsed: "Gần đây",
+      popular: "Thông dụng",
+      others: "Tất cả mạng lưới",
+    },
+    loading: "Đang tải",
+    failedToSwitch: "Không thể đổi mạng lưới",
+  },
+  receiveFundsScreen: {
+    title: "Nhận tiền",
+    instruction: "Sử dụng địa chỉ ví này để nhận tiền",
+  },
+  sendFundsScreen: {
+    title: "Gửi tiền",
+    submitButton: "Gửi",
+    token: "Token",
+    sendTo: "Gửi tới",
+    amount: "Số lượng",
+    successMessage: "Giao dịch thành công",
+    invalidAddress: "Địa chỉ không hợp lệ",
+    noTokensFound: "Không tìm thấy token",
+    searchToken: "Tìm kiếm hoặc dán địa chỉ token",
+    transactionFailed: "Giao dịch thất baị",
+    transactionRejected: "Giao dịch bị huỷ",
+    insufficientFunds: "Không đủ vốn",
+    selectTokenTitle: "Chọn Token",
+    sending: "Đang gửi",
+  },
+  signatureScreen: {
+    instructionScreen: {
+      title: "Đăng nhập",
+      instruction: "Kí vào yêu cầu tin nhắn trong ví của bạn để tiếp tục",
+      signInButton: "Đăng nhập",
+      disconnectWallet: "Ngắt kết nối ví",
+    },
+    signingScreen: {
+      title: "Đang đăng nhập",
+      prompt: "Ký vào yêu cầu tin nhắn trong ví của bạn",
+      promptForSafe:
+        "Kí vào yêu cầu tin nhắn trong ví của bạn và chấp nhận giao dịch trong ứng dụng Safe",
+      approveTransactionInSafe: "Xác nhận giao dịch bằng ví Safe",
+      tryAgain: "Thử lại",
+      failedToSignIn: "Đăng nhập thất bại",
+      inProgress: "Đang đợi xác nhận",
+    },
+  },
+  manageWallet: {
+    title: "Quản lý ví",
+    connectAnApp: "Kết nối ứng dụng",
+    exportPrivateKey: "Sao lưu private key",
+  },
+  viewFunds: {
+    title: "Tài sản",
+    viewTokens: "Tokens",
+    viewNFTs: "NFTs",
+    viewAssets: "Tài sản",
+  },
+};
+
+export default connectLocaleVi;

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx

@@ -124,7 +124,7 @@ export function BuyTxHistoryList(props: {
               }}
             >
               <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
-              <Text> No Transactions </Text>
+              <Text>No Transactions </Text>
             </Container>
           )}