thirdweb 5.34.4-nightly-88fa60d4ad7ee6ce0a8305ce35e023d1a858ea85-20240716000333 → 5.35.0-nightly-39b329a56e9eb031e1799524d827fdf69a92c854-20240717000718

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/BuyScreen.tsx

@@ -831,7 +831,7 @@ function SwapScreenContent(props: {
   } = props;
 
   const [receiverAddress, setReceiverAddress] = useState(
-    props.activeAccount.address,
+    props.payOptions.recipientAddress || props.activeAccount.address,
   );
   const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
   const [drawerScreen, setDrawerScreen] = useState<
@@ -924,6 +924,8 @@ function SwapScreenContent(props: {
       ? payOptions.buyWithCrypto?.prefillSource
       : undefined;
 
+  const disableReceiverSelection = !!props.payOptions.recipientAddress;
+
   return (
     <Container flex="column" gap="md" animate="fadein">
       {isOpen && (
@@ -1025,6 +1027,8 @@ function SwapScreenContent(props: {
         <Spacer y="xs" />
         <WalletSelectorButton
           client={props.client}
+          disabled={disableReceiverSelection}
+          disableChevron={disableReceiverSelection}
           onClick={() => {
             setIsOpen(true);
             setDrawerScreen("receiver");
@@ -1100,12 +1104,6 @@ function FiatScreenContent(props: {
   setTokenAmount: (amount: string) => void;
   setHasEditedAmount: (hasEdited: boolean) => void;
 }) {
-  const [receiverAddress, setReceiverAddress] = useState(
-    props.payer.account.address,
-  );
-  const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
-  const [drawerScreen, setDrawerScreen] = useState<"fees" | "receiver">("fees");
-
   const {
     toToken,
     tokenAmount,
@@ -1116,6 +1114,11 @@ function FiatScreenContent(props: {
     showCurrencySelector,
     selectedCurrency,
   } = props;
+  const [receiverAddress, setReceiverAddress] = useState(
+    props.payOptions.recipientAddress || props.payer.account.address,
+  );
+  const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
+  const [drawerScreen, setDrawerScreen] = useState<"fees" | "receiver">("fees");
 
   const buyWithFiatOptions = props.payOptions.buyWithFiat;
 
@@ -1219,13 +1222,7 @@ function FiatScreenContent(props: {
 
   const disableSubmit = !fiatQuoteQuery.data;
 
-  // TODO: API should just not return a quote if fromAddress !== toAddress and a swap is required after onramp and return an error message with a specific error id
-
-  // TODO: if the receiver wallet is frozen by the developer, we need to stop the user from clicking continue here
-
-  // Selecting Reciever wallet only allowed if no swap required after onramp
-  const enableReceiverSelection =
-    fiatQuoteQuery.data && !isSwapRequiredPostOnramp(fiatQuoteQuery.data);
+  const disableReceiverSelection = !!props.payOptions.recipientAddress;
 
   const errorMsg =
     !fiatQuoteQuery.isLoading && fiatQuoteQuery.error
@@ -1234,11 +1231,11 @@ function FiatScreenContent(props: {
 
   return (
     <Container flex="column" gap="md" animate="fadein">
-      {isOpen && fiatQuoteQuery.data && (
+      {isOpen && (
         <>
           <DrawerOverlay ref={drawerOverlayRef} />
           <Drawer ref={drawerRef} close={() => setIsOpen(false)}>
-            {drawerScreen === "fees" && (
+            {drawerScreen === "fees" && fiatQuoteQuery.data && (
               <div>
                 <Text size="lg" color="primaryText">
                   Fees
@@ -1285,7 +1282,8 @@ function FiatScreenContent(props: {
             setIsOpen(true);
           }}
           address={receiverAddress}
-          disabled={!enableReceiverSelection}
+          disabled={disableReceiverSelection}
+          disableChevron={disableReceiverSelection}
           walletId={undefined}
         />
       </div>

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx

@@ -177,8 +177,6 @@ function OnrampStatusScreenUI(props: {
             }
           : undefined
       }
-      fromAddress={props.quote.fromAddress.toLowerCase()}
-      toAddress={props.quote.toAddress.toLowerCase()}
     />
   );
 

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx

@@ -1,7 +1,6 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { shortenAddress } from "../../../../../../../utils/address.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import {
   fontSize,
@@ -38,8 +37,6 @@ export function OnRampTxDetailsTable(props: {
     text: FiatStatusMeta["status"];
     txHash?: string;
   };
-  fromAddress?: string;
-  toAddress?: string;
 }) {
   const onRampExplorers = useChainExplorers(
     getCachedChain(props.token.chainId),
@@ -115,26 +112,6 @@ export function OnRampTxDetailsTable(props: {
         </>
       )}
 
-      {props.fromAddress &&
-        props.toAddress &&
-        props.fromAddress !== props.toAddress && (
-          <>
-            {lineSpacer}
-            <Container
-              flex="row"
-              center="y"
-              style={{
-                justifyContent: "space-between",
-              }}
-            >
-              <Text>Send to</Text>
-              <Container flex="row" gap="xs" center="y">
-                <Text>{shortenAddress(props.toAddress)}</Text>
-              </Container>
-            </Container>
-          </>
-        )}
-
       {lineSpacer}
 
       {/* Transaction Hash link */}

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>
           )}
 

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -34,7 +34,10 @@ export function ManageWalletScreen(props: {
       }}
     >
       <Container p="lg">
-        <ModalHeader title="Manage Wallet" onBack={props.onBack} />
+        <ModalHeader
+          title={props.locale.manageWallet.title}
+          onBack={props.onBack}
+        />
       </Container>
       <Line />
       <Container
@@ -62,7 +65,9 @@ export function ManageWalletScreen(props: {
             }}
           >
             <WalletConnectIcon size={iconSize.md} />
-            <Text color="primaryText">Connect an App</Text>
+            <Text color="primaryText">
+              {props.locale.manageWallet.connectAnApp}
+            </Text>
           </MenuButton>
 
           {/* Private Key Export (if enabled) */}
@@ -79,7 +84,9 @@ export function ManageWalletScreen(props: {
                 }}
               >
                 <KeyIcon size={iconSize.md} />
-                <Text color="primaryText">Export Private Key</Text>
+                <Text color="primaryText">
+                  {props.locale.manageWallet.exportPrivateKey}
+                </Text>
               </MenuButton>
             )}
         </Container>

package/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx

@@ -10,6 +10,7 @@ import { Text } from "../../components/text.js";
 import { MenuButton } from "../MenuButton.js";
 import { CoinsIcon } from "../icons/CoinsIcon.js";
 import { ImageIcon } from "../icons/ImageIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
 import type { WalletDetailsModalScreen } from "./types.js";
 
 /**
@@ -21,7 +22,9 @@ export function ViewFunds(props: {
   onBack: () => void;
   setScreen: (screen: WalletDetailsModalScreen) => void;
   client: ThirdwebClient;
+  connectLocale: ConnectLocale;
 }) {
+  const { connectLocale } = props;
   return (
     <Container
       style={{
@@ -29,7 +32,10 @@ export function ViewFunds(props: {
       }}
     >
       <Container p="lg">
-        <ModalHeader title="View Funds" onBack={props.onBack} />
+        <ModalHeader
+          title={connectLocale.viewFunds.title}
+          onBack={props.onBack}
+        />
       </Container>
       <Line />
       <Container
@@ -50,7 +56,7 @@ export function ViewFunds(props: {
           }}
         >
           <CoinsIcon size={iconSize.md} />
-          <Text color="primaryText">View Tokens</Text>
+          <Text color="primaryText">{connectLocale.viewFunds.viewTokens}</Text>
         </MenuButton>
         <MenuButton
           onClick={() => {
@@ -61,7 +67,7 @@ export function ViewFunds(props: {
           }}
         >
           <ImageIcon size={iconSize.md} />
-          <Text color="primaryText">View NFTs</Text>
+          <Text color="primaryText">{connectLocale.viewFunds.viewNFTs}</Text>
         </MenuButton>
         <Spacer y="lg" />
       </Container>

package/src/react/web/ui/ConnectWallet/screens/ViewNFTs.tsx

@@ -16,6 +16,7 @@ import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
+import type { ConnectLocale } from "../locale/types.js";
 
 const fetchNFTs = async (
   client: ThirdwebClient,
@@ -69,6 +70,7 @@ export function ViewNFTs(props: {
   theme: Theme | "light" | "dark";
   onBack: () => void;
   client: ThirdwebClient;
+  connectLocale: ConnectLocale;
 }) {
   const activeAccount = useActiveAccount();
   const activeChain = useActiveWalletChain();
@@ -77,6 +79,8 @@ export function ViewNFTs(props: {
     return null;
   }
 
+  const { connectLocale } = props;
+
   const nftList = useMemo(() => {
     const nfts = [];
     if (!props.supportedNFTs) return [];
@@ -108,7 +112,10 @@ export function ViewNFTs(props: {
       }}
     >
       <Container p="lg">
-        <ModalHeader title="View NFTs" onBack={props.onBack} />
+        <ModalHeader
+          title={connectLocale.viewFunds.viewNFTs}
+          onBack={props.onBack}
+        />
       </Container>
       <Line />
       <Container

package/src/react/web/ui/ConnectWallet/screens/ViewTokens.tsx

@@ -13,6 +13,7 @@ import { Spacer } from "../../components/Spacer.js";
 import { TokenIcon } from "../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
+import type { ConnectLocale } from "../locale/types.js";
 import { formatTokenBalance } from "./formatTokenBalance.js";
 import {
   type ERC20OrNativeToken,
@@ -27,6 +28,7 @@ export function ViewTokens(props: {
   supportedTokens?: SupportedTokens;
   onBack: () => void;
   client: ThirdwebClient;
+  connectLocale: ConnectLocale;
 }) {
   const activeChain = useActiveWalletChain();
   const supportedTokens = props.supportedTokens || defaultTokens;
@@ -37,6 +39,7 @@ export function ViewTokens(props: {
 
   const tokenList =
     (activeChain?.id ? supportedTokens[activeChain.id] : undefined) || [];
+  const { connectLocale } = props;
 
   return (
     <Container
@@ -45,7 +48,10 @@ export function ViewTokens(props: {
       }}
     >
       <Container p="lg">
-        <ModalHeader title="View Funds" onBack={props.onBack} />
+        <ModalHeader
+          title={connectLocale.viewFunds.title}
+          onBack={props.onBack}
+        />
       </Container>
       <Line />
       <Container

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

@@ -1,2 +1,2 @@
 // valid combinations of ISO language code and ISO country code
-export type LocaleId = "en_US" | "es_ES" | "ja_JP" | "tl_PH";
+export type LocaleId = "en_US" | "es_ES" | "ja_JP" | "tl_PH" | "vi_VN";

package/src/react/web/wallets/injected/locale/getInjectedWalletLocale.ts

@@ -14,6 +14,8 @@ export async function getInjectedWalletLocale(
       return (await import("./ja.js")).default;
     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;
   }