thirdweb 5.36.0 → 5.37.0-nightly-6a94696c7e7db3d4e0920e039bdc187ab42e3c50-20240720000333

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

@@ -9,6 +9,7 @@ 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 { Spacer } from "../components/Spacer.js";
 import Tabs from "../components/Tabs.js";
 import { Container, Line, ModalHeader } from "../components/basic.js";
 import { ButtonLink } from "../components/buttons.js";
@@ -26,13 +27,14 @@ 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");
+  const [activeTab, setActiveTab] = useState("Transactions");
   // For now, you can only select pay transactions (purcahses)
   const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
 
@@ -53,6 +55,7 @@ export function TransactionsScreen(props: {
   if (selectedTx) {
     return (
       <TxDetailsScreen
+        title={props.title}
         client={props.client}
         statusInfo={selectedTx}
         onBack={() => setSelectedTx(null)}
@@ -71,33 +74,32 @@ export function TransactionsScreen(props: {
       </Container>
       <Line />
       <Container
-        px="sm"
+        px="lg"
         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>
+        <Spacer y="md" />
+        <Tabs
+          options={["Transactions", "Purchases"]}
+          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>
       <Line />
       <Container p="lg">

package/src/react/web/ui/ConnectWallet/icons/ShuffleIconLucide.tsx

@@ -0,0 +1,24 @@
+import type { IconFC } from "./types.js";
+
+export const ShuffleIconLucide: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="presentation"
+    >
+      <path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22" />
+      <path d="m18 2 4 4-4 4" />
+      <path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2" />
+      <path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8" />
+      <path d="m18 14 4 4-4 4" />
+    </svg>
+  );
+};

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

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.tsx

@@ -36,6 +36,7 @@ import {
  * @internal
  */
 export function PayTxHistoryScreen(props: {
+  title: string;
   onBack?: () => void;
   client: ThirdwebClient;
   onDone: () => void;
@@ -60,6 +61,7 @@ export function PayTxHistoryScreen(props: {
   if (selectedTx) {
     return (
       <TxDetailsScreen
+        title={props.title}
         client={props.client}
         statusInfo={selectedTx}
         onBack={() => setSelectedTx(null)}
@@ -123,11 +125,12 @@ export function PayTxHistoryList(props: {
       flex="column"
       fullHeight
       style={{
+        width: "100%",
         minHeight: "250px",
         maxHeight: "370px",
       }}
     >
-      <Container flex="column" gap="xs" px="lg" expand>
+      <Container flex="column" gap="xs" expand>
         {noTransactions && !isLoading && (
           <Container
             flex="column"
@@ -183,7 +186,7 @@ export function PayTxHistoryList(props: {
         )}
       </Container>
 
-      <Container p="lg">
+      <Container py="lg">
         {pagination && !hidePagination && (
           <div
             style={{

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/FiatDetailsScreen.tsx

@@ -12,6 +12,7 @@ import type { PayerInfo } from "../types.js";
 import { getBuyWithFiatStatusMeta } from "./statusMeta.js";
 
 export function FiatDetailsScreen(props: {
+  title: string;
   status: ValidBuyWithFiatStatus;
   onBack: () => void;
   client: ThirdwebClient;
@@ -43,7 +44,7 @@ export function FiatDetailsScreen(props: {
     const fiatQuote = status.quote;
     return (
       <PostOnRampSwapFlow
-        title="Buy"
+        title={props.title}
         client={props.client}
         status={status}
         onBack={props.onBack}

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/TxDetailsScreen.tsx

@@ -5,6 +5,7 @@ import { SwapDetailsScreen } from "./SwapDetailsScreen.js";
 import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
 
 export function TxDetailsScreen(props: {
+  title: string;
   client: ThirdwebClient;
   statusInfo: TxStatusInfo;
   onBack: () => void;
@@ -28,6 +29,7 @@ export function TxDetailsScreen(props: {
   if (statusInfo.type === "fiat") {
     return (
       <FiatDetailsScreen
+        title={props.title}
         client={props.client}
         status={statusInfo.status}
         onBack={props.onBack}

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

@@ -46,43 +46,39 @@ export function WalletTransactionHistory(props: {
       fullHeight
       style={{
         minHeight: "250px",
-        maxHeight: "370px",
+        maxHeight: "350px",
+        paddingBottom: spacing.lg,
       }}
     >
-      <Container
-        flex="column"
-        gap="xs"
-        style={{ paddingBottom: "24px" }}
-        expand
-      >
-        {transactions.length === 0 && (
+      <Container flex="column" gap="xs" expand>
+        {transactions.length === 0 ? (
           <Container
             flex="column"
             gap="md"
             center="both"
             color="secondaryText"
             style={{
-              minHeight: "250px",
+              flex: "1",
             }}
           >
             <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
             <Text>No Transactions</Text>
           </Container>
+        ) : (
+          <Container animate="fadein" flex="column" gap="xs">
+            {transactions.map((tx) => {
+              return (
+                <TransactionButton
+                  key={tx.transactionHash}
+                  explorerUrl={chainExplorers.explorers[0]?.url}
+                  client={props.client}
+                  hash={tx.transactionHash}
+                  chainId={tx.chainId}
+                />
+              );
+            })}
+          </Container>
         )}
-
-        <Container animate="fadein" flex="column" gap="xs">
-          {transactions.map((tx) => {
-            return (
-              <TransactionButton
-                key={tx.transactionHash}
-                explorerUrl={chainExplorers.explorers[0]?.url}
-                client={props.client}
-                hash={tx.transactionHash}
-                chainId={tx.chainId}
-              />
-            );
-          })}
-        </Container>
       </Container>
     </Container>
   );

package/src/react/web/ui/PayEmbed.tsx

@@ -213,6 +213,7 @@ export function PayEmbed(props: PayEmbedProps) {
         {/* this does not need to persist so we can just show-hide it with JS */}
         {screen === "tx-history" && (
           <PayTxHistoryScreen
+            title={props.metadata?.title || "Buy"}
             client={props.client}
             onBack={() => {
               setScreen("buy");

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

@@ -138,10 +138,7 @@ export const CrossContainer = /* @__PURE__ */ StyledDiv({
   position: "absolute",
   top: spacing.lg,
   right: spacing.lg,
-  transform: "translateX(15%)",
-  [media.mobile]: {
-    right: spacing.md,
-  },
+  transform: "translateX(6px)",
 });
 
 const modalAnimationDesktop = keyframes`

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

@@ -1,6 +1,9 @@
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../core/design-system/index.js";
 import { Text } from "../components/text.js";
-import { Container, Line } from "./basic.js";
+import { Spacer } from "./Spacer.js";
+import { Container } from "./basic.js";
+import { Button } from "./buttons.js";
 
 export default function Tabs({
   selected,
@@ -15,42 +18,44 @@ export default function Tabs({
 }) {
   const theme = useCustomTheme();
   return (
-    <Container>
-      <Container flex="row" center="y" style={{ width: "100%" }}>
+    <div>
+      <Container
+        flex="row"
+        center="y"
+        style={{ width: "100%", borderRadius: radius.lg }}
+        p="xxs"
+        bg="secondaryButtonBg"
+      >
         {options.map((option) => (
-          <button
+          <Button
+            variant="accent"
             type="button"
             key={option}
             onClick={() => onSelect(option)}
             style={{
               flex: 1,
-              height: "50px",
+              paddingBlock: spacing.sm,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               position: "relative",
+              borderRadius: radius.md,
+              backgroundColor:
+                option === selected ? theme.colors.modalBg : "transparent",
             }}
           >
             <Text
               color={option === selected ? "primaryText" : "secondaryText"}
               style={{ textAlign: "center" }}
+              size="sm"
             >
               {option}
             </Text>
-            <Line
-              style={{
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                backgroundColor:
-                  option === selected ? "white" : theme.colors.separatorLine,
-              }}
-            />
-          </button>
+          </Button>
         ))}
       </Container>
-      <Container py="sm">{children}</Container>
-    </Container>
+      <Spacer y="sm" />
+      {children}
+    </div>
   );
 }

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

@@ -9,6 +9,7 @@ import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import {
   appleIconUri,
+  discordIconUri,
   emailIcon,
   facebookIconUri,
   genericWalletIcon,
@@ -73,6 +74,9 @@ export function WalletImage(props: {
           case "passkey":
             image = passkeyIcon;
             break;
+          case "discord":
+            image = discordIconUri;
+            break;
         }
       } else {
         const mipdImage = getInstalledWalletProviders().find(

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

@@ -141,7 +141,7 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: radius.md,
+    borderRadius: radius.sm,
     WebkitTapHighlightColor: "transparent",
     color: theme.colors.secondaryIconColor,
     padding: "2px",