thirdweb 5.50.1-nightly-b407bc9fd8379bf304ffb963f8cb8e64493914b5-20240904000351 → 5.50.1

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

@@ -373,6 +373,11 @@ function DetailsModal(props: {
   const avatarSrc =
     props.detailsModal?.connectedAccountAvatarUrl ?? ensAvatarQuery.data;
 
+  const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
+    props.detailsModal || {};
+
+  const hideAllButtons = hideSendFunds && hideReceiveFunds && hideBuyFunds;
+
   const avatarContent = (
     <Container
       style={{
@@ -438,7 +443,16 @@ function DetailsModal(props: {
   let content = (
     <div>
       <Spacer y="xs" />
-      <Container p="lg" gap="sm" flex="row" center="y">
+      <Container
+        px="lg"
+        gap="sm"
+        flex="row"
+        center="y"
+        style={{
+          paddingTop: spacing.lg,
+          paddingBottom: hideAllButtons ? spacing.md : spacing.lg,
+        }}
+      >
         {props.detailsModal?.hideSwitchWallet ? (
           avatarContent
         ) : (
@@ -481,81 +495,99 @@ function DetailsModal(props: {
           <InAppWalletUserInfo client={client} locale={locale} />
         </Container>
       </Container>
-      <Container px="lg">
-        {/* Send, Receive, Swap */}
-        <Container
-          style={{
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr 1fr",
-            gap: spacing.xs,
-          }}
-        >
-          <Button
-            variant="outline"
-            style={{
-              fontSize: fontSize.sm,
-              display: "flex",
-              gap: spacing.xs,
-              alignItems: "center",
-              padding: spacing.sm,
-            }}
-            onClick={() => {
-              setScreen("send");
-            }}
-          >
-            <Container color="secondaryText" flex="row" center="both">
-              <PaperPlaneIcon
-                width={iconSize.sm}
-                height={iconSize.sm}
-                style={{
-                  transform: "translateY(-10%) rotate(-45deg) ",
-                }}
-              />
-            </Container>
-
-            {locale.send}
-          </Button>
 
-          <Button
-            variant="outline"
-            style={{
-              fontSize: fontSize.sm,
-              display: "flex",
-              gap: spacing.xs,
-              alignItems: "center",
-              padding: spacing.sm,
-            }}
-            onClick={() => {
-              setScreen("receive");
-            }}
-          >
-            <Container color="secondaryText" flex="row" center="both">
-              <PinBottomIcon width={iconSize.sm} height={iconSize.sm} />{" "}
+      {!hideAllButtons && (
+        <>
+          <Container px="lg">
+            {/* Send, Receive, Swap */}
+            <Container
+              style={{
+                display: "flex",
+                gap: spacing.xs,
+              }}
+            >
+              {!hideSendFunds && (
+                <Button
+                  variant="outline"
+                  style={{
+                    fontSize: fontSize.sm,
+                    display: "flex",
+                    gap: spacing.xs,
+                    alignItems: "center",
+                    padding: spacing.sm,
+                    flex: 1,
+                  }}
+                  onClick={() => {
+                    setScreen("send");
+                  }}
+                >
+                  <Container color="secondaryText" flex="row" center="both">
+                    <PaperPlaneIcon
+                      width={iconSize.sm}
+                      height={iconSize.sm}
+                      style={{
+                        transform: "translateY(-10%) rotate(-45deg) ",
+                      }}
+                    />
+                  </Container>
+
+                  {locale.send}
+                </Button>
+              )}
+
+              {!hideReceiveFunds && (
+                <Button
+                  variant="outline"
+                  style={{
+                    fontSize: fontSize.sm,
+                    display: "flex",
+                    gap: spacing.xs,
+                    alignItems: "center",
+                    padding: spacing.sm,
+                    flex: 1,
+                  }}
+                  onClick={() => {
+                    setScreen("receive");
+                  }}
+                >
+                  <Container color="secondaryText" flex="row" center="both">
+                    <PinBottomIcon
+                      width={iconSize.sm}
+                      height={iconSize.sm}
+                    />{" "}
+                  </Container>
+                  {locale.receive}{" "}
+                </Button>
+              )}
+
+              {!hideBuyFunds && (
+                <Button
+                  variant="outline"
+                  style={{
+                    fontSize: fontSize.sm,
+                    display: "flex",
+                    gap: spacing.xs,
+                    alignItems: "center",
+                    padding: spacing.sm,
+                    flex: 1,
+                  }}
+                  onClick={() => {
+                    setScreen("buy");
+                  }}
+                >
+                  <Container color="secondaryText" flex="row" center="both">
+                    <PlusIcon width={iconSize.sm} height={iconSize.sm} />
+                  </Container>
+                  {locale.buy}
+                </Button>
+              )}
             </Container>
-            {locale.receive}{" "}
-          </Button>
+          </Container>
+
+          <Spacer y="md" />
+        </>
+      )}
 
-          <Button
-            variant="outline"
-            style={{
-              fontSize: fontSize.sm,
-              display: "flex",
-              gap: spacing.xs,
-              alignItems: "center",
-              padding: spacing.sm,
-            }}
-            onClick={() => {
-              setScreen("buy");
-            }}
-          >
-            <Container color="secondaryText" flex="row" center="both">
-              <PlusIcon width={iconSize.sm} height={iconSize.sm} />
-            </Container>
-            {locale.buy}
-          </Button>
-        </Container>
-      </Container>
-      <Spacer y="md" />
       <Container px="md">
         <Container
           flex="column"
@@ -1122,6 +1154,9 @@ export type DetailsModalConnectOptions = {
   chains?: Chain[];
   recommendedWallets?: Wallet[];
   showAllWallets?: boolean;
+  hideSendFunds?: boolean;
+  hideReceiveFunds?: boolean;
+  hideBuyFunds?: boolean;
 };
 
 export type UseWalletDetailsModalOptions = {

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

@@ -59,7 +59,11 @@ import {
   type PaymentMethods,
   useEnabledPaymentMethods,
 } from "./main/useEnabledPaymentMethods.js";
-import { useUISelectionStates } from "./main/useUISelectionStates.js";
+import {
+  useFiatCurrencySelectionStates,
+  useFromTokenSelectionStates,
+  useToTokenSelectionStates,
+} from "./main/useUISelectionStates.js";
 import { openOnrampPopup } from "./openOnRamppopup.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatFees, SwapFees } from "./swap/Fees.js";
@@ -134,33 +138,26 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     id: "main",
   });
 
-  const [hasEditedAmount, setHasEditedAmount] = useState(false);
-
-  const onDone = useCallback(() => {
-    setScreen({ id: "main" });
-    props.onDone();
-  }, [props.onDone]);
-
-  // UI selection
   const {
     tokenAmount,
     setTokenAmount,
     toChain,
     setToChain,
     deferredTokenAmount,
-    fromChain,
-    setFromChain,
     toToken,
     setToToken,
-    fromToken,
-    setFromToken,
-    selectedCurrency,
-    setSelectedCurrency,
-  } = useUISelectionStates({
+  } = useToTokenSelectionStates({
     payOptions,
     supportedDestinations,
   });
 
+  const [hasEditedAmount, setHasEditedAmount] = useState(false);
+
+  const onDone = useCallback(() => {
+    setScreen({ id: "main" });
+    props.onDone();
+  }, [props.onDone]);
+
   // check if the screen is expanded or not
 
   // update supportedSources whenever toToken or toChain is updated
@@ -186,21 +183,24 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     }
 
     const supportedSources = supportedSourcesQuery.data;
-    if (supportedSources[0]?.chain) {
-      setFromChain(supportedSources[0]?.chain);
-    }
 
     return createSupportedTokens(
       supportedSources,
       payOptions,
       props.supportedTokens,
     );
-  }, [
-    props.supportedTokens,
-    supportedSourcesQuery.data,
-    payOptions,
-    setFromChain,
-  ]);
+  }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
+
+  const { fromChain, setFromChain, fromToken, setFromToken } =
+    useFromTokenSelectionStates({
+      payOptions,
+      supportedSources: supportedSourcesQuery.data || [],
+    });
+
+  const { selectedCurrency, setSelectedCurrency } =
+    useFiatCurrencySelectionStates({
+      payOptions,
+    });
 
   const enabledPaymentMethods = useEnabledPaymentMethods({
     payOptions: props.payOptions,
@@ -1081,13 +1081,21 @@ function SwapScreenContent(props: {
 
   function showSwapFlow() {
     if (
-      (props.payOptions.mode === "transaction" ||
-        props.payOptions.mode === "direct_payment") &&
+      props.payOptions.mode === "direct_payment" &&
+      !isNotEnoughBalance &&
+      !swapRequired
+    ) {
+      // same currency, just direct transfer
+      setScreen({
+        id: "transfer-flow",
+      });
+    } else if (
+      props.payOptions.mode === "transaction" &&
       !isNotEnoughBalance &&
       !swapRequired
     ) {
       if (payer.account.address !== receiverAddress) {
-        // same currency, just transfer, but from another wallet
+        // needs transfer from another wallet before executing the transaction
         setScreen({
           id: "transfer-flow",
         });
@@ -1130,7 +1138,7 @@ function SwapScreenContent(props: {
                   Fees
                 </Text>
                 <Spacer y="lg" />
-                <SwapFees quote={quoteQuery.data} align="left" />
+                <SwapFees quote={quoteQuery.data} />
               </div>
             )}
           </Drawer>

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

@@ -15,25 +15,32 @@ import {
 } from "../fiat/currencies.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
 
-// handle states for token and chain selection
+type SupportedSourcesInputData = {
+  chain: Chain;
+  tokens: {
+    address: string;
+    buyWithCryptoEnabled: boolean;
+    buyWithFiatEnabled: boolean;
+    name: string;
+    symbol: string;
+  }[];
+};
 
-export function useUISelectionStates(options: {
+// handle states for token and chain selection
+export function useToTokenSelectionStates(options: {
   payOptions: PayUIOptions;
   supportedDestinations: SupportedChainAndTokens;
 }) {
-  const activeChain = useActiveWalletChain();
   const { payOptions, supportedDestinations } = options;
-
+  // --------------------------------------------------------------------------
   // buy token amount ---------------------------------------------------------
   // NOTE - for transaction / direct payment modes, the token amount is set when the user tap continue
   const prefillBuy = (payOptions as FundWalletOptions)?.prefillBuy;
+  const activeChain = useActiveWalletChain();
   const initialTokenAmount = prefillBuy?.amount || "";
-
   const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
 
-  // --------------------------------------------------------------------------
-
   // Destination chain and token selection -----------------------------------
   const [toChain, setToChain] = useState<Chain>(
     // use prefill chain if available
@@ -52,27 +59,73 @@ export function useUISelectionStates(options: {
       (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
       NATIVE_TOKEN,
   );
+
+  return {
+    toChain,
+    setToChain,
+    toToken,
+    setToToken,
+    tokenAmount,
+    setTokenAmount,
+    deferredTokenAmount,
+  };
+}
+
+export function useFromTokenSelectionStates(options: {
+  payOptions: PayUIOptions;
+  supportedSources: SupportedSourcesInputData[];
+}) {
+  const { payOptions, supportedSources } = options;
+
   // --------------------------------------------------------------------------
+  const firstSupportedSource = supportedSources?.length
+    ? supportedSources[0]
+    : undefined;
 
   // Source token and chain selection ---------------------------------------------------
-  const [fromChain, setFromChain] = useState<Chain>(
-    // use prefill chain if available
+  const [fromChain_, setFromChain] = useState<Chain>();
+
+  // use prefill chain if available
+  const fromChainDevSpecified =
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.chain) ||
-      (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain) ||
-      // default to polygon
-      polygon,
-  );
+    (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
+    (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
+
+  const fromChainFromApi = firstSupportedSource?.chain
+    ? firstSupportedSource.chain
+    : undefined;
 
-  const [fromToken, setFromToken] = useState<ERC20OrNativeToken>(
-    // use prefill token if available
+  const fromChain =
+    fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon;
+
+  const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
+
+  // use prefill token if available
+  const fromTokenDevSpecified =
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.token) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
-      // default to native token
-      NATIVE_TOKEN,
-  );
+    (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
+
+  // May be updated in the future
+  const fromTokenFromApi = NATIVE_TOKEN;
+
+  // supported tokens query in here
+  const fromToken =
+    fromToken_ || fromTokenDevSpecified || fromTokenFromApi || NATIVE_TOKEN;
+
+  return {
+    fromChain,
+    setFromChain,
+    fromToken,
+    setFromToken,
+  };
+}
+
+export function useFiatCurrencySelectionStates(options: {
+  payOptions: PayUIOptions;
+}) {
+  const { payOptions } = options;
 
   // --------------------------------------------------------------------------
   const devSpecifiedDefaultCurrency =
@@ -89,20 +142,7 @@ export function useUISelectionStates(options: {
   );
 
   return {
-    tokenAmount,
-    setTokenAmount,
-
-    toChain,
-    setToChain,
-    deferredTokenAmount,
-    fromChain,
-    setFromChain,
-    toToken,
-    setToToken,
-    fromToken,
-    setFromToken,
     selectedCurrency,
-
     setSelectedCurrency,
   };
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -27,7 +27,6 @@ import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
-import { SwapFees } from "./Fees.js";
 import { formatSeconds } from "./formatSeconds.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
@@ -111,7 +110,7 @@ export function SwapConfirmationScreen(props: {
 
       {/* Fees  */}
       <ConfirmItem label="Fees">
-        <SwapFees quote={props.quote} align="right" />
+        <SwapFeesRightAligned quote={props.quote} />
       </ConfirmItem>
 
       {/* Time  */}
@@ -329,3 +328,39 @@ function ConfirmItem(props: {
     </>
   );
 }
+
+/**
+ * @internal
+ */
+export function SwapFeesRightAligned(props: {
+  quote: BuyWithCryptoQuote;
+}) {
+  return (
+    <Container
+      flex="column"
+      gap="xs"
+      style={{
+        alignItems: "flex-end",
+      }}
+    >
+      {props.quote.processingFees.map((fee) => {
+        const feeAmount = formatNumber(Number(fee.amount), 6);
+        return (
+          <Container
+            key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
+            flex="row"
+            gap="xxs"
+          >
+            <Text color="primaryText" size="sm">
+              {feeAmount === 0 ? "~" : ""}
+              {feeAmount} {fee.token.symbol}
+            </Text>
+            <Text color="secondaryText" size="sm">
+              (${(fee.amountUSDCents / 100).toFixed(2)})
+            </Text>
+          </Container>
+        );
+      })}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx

@@ -10,14 +10,13 @@ import { Text } from "../../../../components/text.js";
  */
 export function SwapFees(props: {
   quote: BuyWithCryptoQuote;
-  align: "left" | "right";
 }) {
   return (
     <Container
       flex="column"
       gap="xs"
       style={{
-        alignItems: props.align === "right" ? "flex-end" : "flex-start",
+        alignItems: "flex-start",
       }}
     >
       {props.quote.processingFees.map((fee) => {
@@ -25,19 +24,15 @@ export function SwapFees(props: {
         return (
           <Container
             key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-            flex="column"
+            flex="row"
             gap="xxs"
           >
-            <Text color="primaryText" size="sm" style={{ textAlign: "right" }}>
+            <Text color="primaryText" size="sm">
               {feeAmount === 0 ? "~" : ""}
               {feeAmount} {fee.token.symbol}
             </Text>
-            <Text
-              color="secondaryText"
-              size="xs"
-              style={{ textAlign: "right" }}
-            >
-              ${(fee.amountUSDCents / 100).toFixed(2)}
+            <Text color="secondaryText" size="sm">
+              (${(fee.amountUSDCents / 100).toFixed(2)})
             </Text>
           </Container>
         );