thirdweb 5.35.1-nightly-faaa426bbbde281c2c5fb44aa6787f8a89f0f0f5-20240718000334 → 5.36.1-nightly-af4acc4319fdfb323778694bd8843bd695e52d6b-20240719161043

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

@@ -73,6 +73,7 @@ import {
   NetworkSelectorContent,
   type NetworkSelectorProps,
 } from "./NetworkSelector.js";
+import { TransactionsScreen } from "./TransactionsScreen.js";
 import { onModalUnmount } from "./constants.js";
 import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
@@ -82,7 +83,6 @@ import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
 import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
-import { BuyTxHistory } from "./screens/Buy/tx-history/BuyTxHistory.js";
 import { WalletManagerScreen } from "./screens/Details/WalletManagerScreen.js";
 import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
@@ -513,7 +513,7 @@ function DetailsModal(props: {
           {/* Transactions */}
           <MenuButton
             onClick={() => {
-              setScreen("pending-tx");
+              setScreen("transactions");
             }}
             style={{
               fontSize: fontSize.sm,
@@ -623,27 +623,18 @@ function DetailsModal(props: {
           <Spacer y="sm" />
         </Container>
       )}
-      {/* {activeWallet?.id === "local" && (
-        <>
-          <Line />
-          <Container py="md">
-            <Text size="xs" center multiline color="danger" balance>
-              {locale.guestWalletWarning}
-            </Text>
-          </Container>
-        </>
-      )} */}
     </div>
   );
 
-  if (screen === "pending-tx") {
+  if (screen === "transactions") {
     content = (
-      <BuyTxHistory
-        isBuyForTx={false}
-        isEmbed={false}
+      <TransactionsScreen
+        title="Buy"
         onBack={() => setScreen("main")}
+        closeModal={closeModal}
+        locale={locale}
+        setScreen={setScreen}
         client={client}
-        onDone={closeModal}
       />
     );
   }
@@ -815,7 +806,7 @@ function DetailsModal(props: {
         client={client}
         onBack={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
-        onViewPendingTx={() => setScreen("pending-tx")}
+        onViewPendingTx={() => setScreen("transactions")}
         connectLocale={locale}
         payOptions={props.detailsModal?.payOptions || {}}
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}

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

@@ -0,0 +1,124 @@
+"use client";
+
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { iconSize } from "../../../core/design-system/index.js";
+import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
+import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import Tabs from "../components/Tabs.js";
+import { Container, Line, ModalHeader } from "../components/basic.js";
+import { ButtonLink } from "../components/buttons.js";
+import type { ConnectLocale } from "./locale/types.js";
+import { PayTxHistoryList } from "./screens/Buy/pay-transactions/BuyTxHistory.js";
+import { TxDetailsScreen } from "./screens/Buy/pay-transactions/TxDetailsScreen.js";
+import type { TxStatusInfo } from "./screens/Buy/pay-transactions/useBuyTransactionsToShow.js";
+import type { PayerInfo } from "./screens/Buy/types.js";
+import { WalletTransactionHistory } from "./screens/WalletTransactionHistory.js";
+import type { WalletDetailsModalScreen } from "./screens/types.js";
+
+//
+
+/**
+ * @internal
+ */
+export function TransactionsScreen(props: {
+  title: string;
+  onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
+  closeModal: () => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+}) {
+  const [activeTab, setActiveTab] = useState("Purchases");
+  // For now, you can only select pay transactions (purcahses)
+  const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
+
+  const activeChain = useActiveWalletChain();
+  const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
+  const chainExplorers = useChainExplorers(activeChain);
+
+  const payer: PayerInfo | undefined =
+    activeChain && activeAccount && activeWallet
+      ? { chain: activeChain, account: activeAccount, wallet: activeWallet }
+      : undefined;
+
+  if (!payer) {
+    return <LoadingScreen />;
+  }
+
+  if (selectedTx) {
+    return (
+      <TxDetailsScreen
+        title={props.title}
+        client={props.client}
+        statusInfo={selectedTx}
+        onBack={() => setSelectedTx(null)}
+        onDone={() => setSelectedTx(null)}
+        payer={payer}
+        isBuyForTx={false}
+        isEmbed={false}
+      />
+    );
+  }
+
+  return (
+    <Container animate="fadein">
+      <Container p="lg">
+        <ModalHeader title={props.locale.transactions} onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="sm"
+        scrollY
+        style={{
+          minHeight: "330px",
+        }}
+      >
+        <Container style={{ position: "relative", height: "250px" }}>
+          <Tabs
+            options={["Purchases", "Transactions"]}
+            selected={activeTab}
+            onSelect={setActiveTab}
+          >
+            {activeTab === "Purchases" && (
+              <PayTxHistoryList
+                client={props.client}
+                onSelectTx={setSelectedTx}
+              />
+            )}
+            {activeTab === "Transactions" && (
+              <WalletTransactionHistory
+                locale={props.locale}
+                client={props.client}
+                address={payer.account.address}
+              />
+            )}
+          </Tabs>
+        </Container>
+      </Container>
+      <Line />
+      <Container p="lg">
+        <ButtonLink
+          fullWidth
+          variant="outline"
+          href={`${chainExplorers.explorers[0]?.url}/address/${activeAccount?.address}`}
+          target="_blank"
+          as="a"
+          gap="xs"
+          style={{
+            textDecoration: "none",
+            color: "inherit",
+          }}
+        >
+          View on Explorer{" "}
+          <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
+        </ButtonLink>
+      </Container>
+    </Container>
+  );
+}

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

@@ -22,6 +22,8 @@ const connectLocaleEn: ConnectLocale = {
   switchAccount: "Switch Account",
   requestTestnetFunds: "Request Testnet Funds",
   transactions: "Transactions",
+  payTransactions: "Fiat Transactions",
+  walletTransactions: "Wallet Transactions",
   viewAllTransactions: "View All Transactions",
   backupWallet: "Backup Wallet",
   guestWalletWarning:

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

@@ -18,7 +18,9 @@ const connectWalletLocalEs: ConnectLocale = {
   send: "Enviar",
   receive: "Recibir",
   buy: "Buy", // TODO
-  transactions: "Transactions", // TODO
+  transactions: "Transactions",
+  payTransactions: "Fiat Transactions",
+  walletTransactions: "Wallet Transactions",
   viewAllTransactions: "View All Transactions", // TODO
   currentNetwork: "Red actual",
   switchAccount: "Cambiar cuenta",

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

@@ -21,7 +21,9 @@ const connectWalletLocalJa: ConnectLocale = {
   switchAccount: "アカウントを切り替える",
   requestTestnetFunds: "テストネットの資金をリクエストする",
   buy: "Buy", // TODO
-  transactions: "Transactions", // TODO
+  transactions: "Transactions",
+  payTransactions: "Fiat Transactions",
+  walletTransactions: "Wallet Transactions",
   viewAllTransactions: "View All Transactions", // TODO
   backupWallet: "ウォレットのバックアップ",
   guestWalletWarning:

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

@@ -16,7 +16,9 @@ const connectWalletLocalTl: ConnectLocale = {
   getStarted: "Simulan",
   guest: "Guest",
   buy: "Buy", // TODO
-  transactions: "Transactions", // TODO
+  transactions: "Transactions",
+  payTransactions: "Fiat Transactions",
+  walletTransactions: "Wallet Transactions",
   viewAllTransactions: "View All Transactions", // TODO
   send: "Ipadala",
   receive: "Matanggap",

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

@@ -88,6 +88,8 @@ export type ConnectLocale = {
   switchTo: string;
   switchingNetwork: string;
   transactions: string;
+  payTransactions: string;
+  walletTransactions: string;
   viewAllTransactions: string;
   welcomeScreen: { defaultSubtitle: string; defaultTitle: string };
   manageWallet: {

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

@@ -21,7 +21,9 @@ const connectLocaleVi: ConnectLocale = {
   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",
+  transactions: "Transactions",
+  payTransactions: "Fiat Transactions",
+  walletTransactions: "Wallet Transactions",
   viewAllTransactions: "Tất cả giao dịch",
   backupWallet: "Sao lưu ví",
   guestWalletWarning:

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -6,7 +6,7 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import type { GetBuyWithCryptoQuoteParams } from "../../../../../../pay/buyWithCrypto/getQuote.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
-import { toEther } from "../../../../../../utils/units.js";
+import { toEther, toTokens } from "../../../../../../utils/units.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import {
   type Theme,
@@ -469,6 +469,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   setPayer={setPayer}
                   // pass it even though we are passing payer, because payer might be different
                   activeAccount={activeAccount}
+                  setTokenAmount={setTokenAmount}
+                  setHasEditedAmount={setHasEditedAmount}
                 />
               )}
 
@@ -618,7 +620,10 @@ function MainScreen(props: {
           <Spacer y="lg" />
           <BuyForTxUI
             amountNeeded={String(
-              formatNumber(Number(toEther(amountNeeded)), 6),
+              formatNumber(
+                Number(toTokens(amountNeeded, props.buyForTx.tokenDecimals)),
+                6,
+              ),
             )}
             buyForTx={props.buyForTx}
             client={client}
@@ -826,6 +831,8 @@ function SwapScreenContent(props: {
   connectLocale: ConnectLocale;
   setPayer: (payer: PayerInfo) => void;
   activeAccount: Account;
+  setTokenAmount: (amount: string) => void;
+  setHasEditedAmount: (hasEdited: boolean) => void;
 }) {
   const {
     setScreen,
@@ -894,21 +901,39 @@ function SwapScreenContent(props: {
   const disableContinue = !quoteQuery.data || isNotEnoughBalance;
   const switchChainRequired = props.payer.chain.id !== fromChain.id;
 
-  function getErrorMessage(err: Error) {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  function getErrorMessage(err: any) {
+    type AmountTooLowError = {
+      code: "MINIMUM_PURCHASE_AMOUNT";
+      data: {
+        minimumAmountUSDCents: number;
+        requestedAmountUSDCents: number;
+        minimumAmountWei: string;
+        minimumAmountEth: string;
+      };
+    };
+
     const defaultMessage = "Unable to get price quote";
     try {
-      if (err instanceof Error) {
-        if (err.message.includes("Minimum")) {
-          const msg = err.message;
-          return msg.replace("Fetch failed: Error: ", "");
-        }
+      if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
+        const obj = err.error as AmountTooLowError;
+        const minAmountToken = obj.data.minimumAmountEth;
+        return {
+          minAmount: formatNumber(Number(minAmountToken), 6),
+        };
       }
-      return defaultMessage;
-    } catch {
-      return defaultMessage;
-    }
+    } catch {}
+
+    return {
+      msg: [defaultMessage],
+    };
   }
 
+  const errorMsg =
+    !quoteQuery.isLoading && quoteQuery.error
+      ? getErrorMessage(quoteQuery.error)
+      : undefined;
+
   function showSwapFlow() {
     if (!quoteQuery.data) {
       return;
@@ -1048,18 +1073,46 @@ function SwapScreenContent(props: {
         />
       </div>
 
-      {/* Error */}
-      {quoteQuery.error && (
-        <Text color="danger" size="sm" center>
-          {getErrorMessage(quoteQuery.error)}
-        </Text>
+      {/* Error message */}
+      {errorMsg && (
+        <div>
+          {errorMsg.minAmount && (
+            <Text color="danger" size="sm" center multiline>
+              Minimum amount is {errorMsg.minAmount}{" "}
+              <TokenSymbol
+                token={toToken}
+                chain={toChain}
+                size="sm"
+                inline
+                color="danger"
+              />
+            </Text>
+          )}
+
+          {errorMsg.msg?.map((msg) => (
+            <Text color="danger" size="sm" center multiline key={msg}>
+              {msg}
+            </Text>
+          ))}
+        </div>
       )}
 
       {/* Button */}
-      {switchChainRequired &&
-      !quoteQuery.isLoading &&
-      !isNotEnoughBalance &&
-      !quoteQuery.error ? (
+      {errorMsg?.minAmount ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => {
+            props.setTokenAmount(String(errorMsg.minAmount));
+            props.setHasEditedAmount(true);
+          }}
+        >
+          Set Minimum
+        </Button>
+      ) : switchChainRequired &&
+        !quoteQuery.isLoading &&
+        !isNotEnoughBalance &&
+        !quoteQuery.error ? (
         <SwitchNetworkButton
           variant="accent"
           fullWidth
@@ -1193,6 +1246,8 @@ function FiatScreenContent(props: {
       data: {
         minimumAmountUSDCents: number;
         requestedAmountUSDCents: number;
+        minimumAmountWei: string;
+        minimumAmountEth: string;
       };
     };
 
@@ -1200,27 +1255,9 @@ function FiatScreenContent(props: {
     try {
       if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
         const obj = err.error as AmountTooLowError;
-        const minAmountUSD = obj.data.minimumAmountUSDCents;
-        const currentAmountUSD = obj.data.requestedAmountUSDCents;
-
-        // avoid divide by zero
-        // if we can't calculate the minimum amount in # of tokens, don't show the button to set the minimum amount
-        if (obj.data.requestedAmountUSDCents === 0) {
-          return {
-            msg: [
-              "Purchase amount is too low",
-              "Increase the amount and try again",
-            ],
-          };
-        }
-
-        const currentAmountToken = Number(props.tokenAmount);
-        const minAmountToken =
-          (minAmountUSD * currentAmountToken) / currentAmountUSD;
-        const minAmountTokenWithBuffer = minAmountToken * 1.2; // 20% buffer
-
+        const minAmountToken = obj.data.minimumAmountEth;
         return {
-          minAmount: minAmountTokenWithBuffer,
+          minAmount: formatNumber(Number(minAmountToken), 6),
         };
       }
     } catch {}
@@ -1303,7 +1340,7 @@ function FiatScreenContent(props: {
         <div>
           {errorMsg.minAmount && (
             <Text color="danger" size="sm" center multiline>
-              Minimum amount is {formatNumber(errorMsg.minAmount, 6)}{" "}
+              Minimum amount is {errorMsg.minAmount}{" "}
               <TokenSymbol
                 token={toToken}
                 chain={toChain}

package/src/react/web/ui/ConnectWallet/screens/Buy/PayTokenIcon.tsx

@@ -1,5 +1,6 @@
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { getAddress } from "../../../../../../utils/address.js";
 import type { iconSize } from "../../../../../core/design-system/index.js";
 import { TokenIcon } from "../../../components/TokenIcon.js";
 import { type NativeToken, isNativeToken } from "../nativeToken.js";
@@ -24,7 +25,9 @@ export function PayTokenIcon(props: {
   const tokenIcon = !isNativeToken(token)
     ? supportedDestinationsQuery.data
         ?.find((c) => c.chain.id === props.chain.id)
-        ?.tokens.find((t) => t.address === token.address)?.icon
+        ?.tokens.find(
+          (t) => getAddress(t.address) === getAddress(token.address),
+        )?.icon
     : undefined;
 
   return (

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

@@ -18,7 +18,7 @@ import { Container, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
-import { getBuyWithFiatStatusMeta } from "../tx-history/statusMeta.js";
+import { getBuyWithFiatStatusMeta } from "../pay-transactions/statusMeta.js";
 import { OnRampTxDetailsTable } from "./FiatTxDetailsTable.js";
 
 type UIStatus = "loading" | "failed" | "completed" | "partialSuccess";

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

@@ -34,7 +34,7 @@ import { StepIcon } from "../Stepper.js";
 import {
   type FiatStatusMeta,
   getBuyWithFiatStatusMeta,
-} from "../tx-history/statusMeta.js";
+} from "../pay-transactions/statusMeta.js";
 import { getCurrencyMeta } from "./currencies.js";
 
 export type BuyWithFiatPartialQuote = {

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

@@ -11,8 +11,8 @@ import { Spacer } from "../../../../components/Spacer.js";
 import { Container, Line } from "../../../../components/basic.js";
 import { ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
-import { TokenInfoRow } from "../tx-history/TokenInfoRow.js";
-import type { FiatStatusMeta } from "../tx-history/statusMeta.js";
+import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
+import type { FiatStatusMeta } from "../pay-transactions/statusMeta.js";
 import { getCurrencyMeta } from "./currencies.js";
 
 /**

package/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -7,6 +7,7 @@ export type BuyForTx = {
   balance: bigint;
   tx: PreparedTransaction;
   tokenSymbol: string;
+  tokenDecimals: number;
 };
 
 export type SelectedScreen =

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -28,6 +28,11 @@ export function useBuyTxStates(options: {
 
     let mounted = true;
 
+    if (buyForTx.tx.erc20Value) {
+      // if erc20 value is set, we don't need to poll
+      return;
+    }
+
     async function pollTxCost() {
       if (!buyForTx || !mounted) {
         return;
@@ -50,7 +55,7 @@ export function useBuyTxStates(options: {
             setTokenAmount(toEther(totalCost - buyForTx.balance));
           }
         }
-      } catch {
+      } catch (error) {
         // no op
       }