thirdweb 5.30.0-nightly-e7434891354f351d2a399daebdddae9cf1fc817b-20240623000619 → 5.30.0-nightly-3979ff0238ae9b3a0a216e6c2d562eb7206a9fe8-20240626085813

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

@@ -0,0 +1,45 @@
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import type { iconSize } from "../../../../../core/design-system/index.js";
+import { TokenIcon } from "../../../components/TokenIcon.js";
+import { type NativeToken, isNativeToken } from "../nativeToken.js";
+import { useBuySupportedDestinations } from "./swap/useSwapSupportedChains.js";
+
+// This is a temporary solution to get the token icon working for ERC20 tokens
+// TODO: The proper solutioon is to include the token icon in the quotes / status response objects, currently it is missing.
+
+export function PayTokenIcon(props: {
+  token:
+    | {
+        address: string;
+        icon?: string;
+      }
+    | NativeToken;
+  chain: Chain;
+  client: ThirdwebClient;
+  size: keyof typeof iconSize;
+}) {
+  const supportedDestinationsQuery = useBuySupportedDestinations(props.client);
+  const token = props.token;
+  const tokenIcon = !isNativeToken(token)
+    ? supportedDestinationsQuery.data
+        ?.find((c) => c.chain.id === props.chain.id)
+        ?.tokens.find((t) => t.address === token.address)?.icon
+    : undefined;
+
+  return (
+    <TokenIcon
+      token={
+        isNativeToken(token)
+          ? { nativeToken: true }
+          : {
+              address: token.address,
+              icon: token.icon || tokenIcon,
+            }
+      }
+      chain={props.chain}
+      client={props.client}
+      size={props.size}
+    />
+  );
+}

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

@@ -17,7 +17,7 @@ export function CurrencySelection(props: {
   return (
     <Container>
       <Container p="lg">
-        <ModalHeader title="Select Currency" onBack={props.onBack} />
+        <ModalHeader title="Pay with" onBack={props.onBack} />
       </Container>
 
       <Line />

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

@@ -20,13 +20,13 @@ import {
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
 import { Button, ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { TokenInfo } from "../../../defaultTokens.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
+import { PayTokenIcon } from "../PayTokenIcon.js";
 import { StepIcon } from "../Stepper.js";
 import {
   type FiatStatusMeta,
@@ -125,6 +125,8 @@ export function FiatSteps(props: {
       address: toTokenMeta.tokenAddress,
       name: toTokenMeta.name || "",
       symbol: toTokenMeta.symbol || "",
+      // TODO: when icon is available in endpoint
+      // icon: toTokenMeta.icon
     };
     return tokenInfo;
   }, [toTokenMeta]);
@@ -143,6 +145,8 @@ export function FiatSteps(props: {
       address: onRampTokenMeta.tokenAddress,
       name: onRampTokenMeta.name || "",
       symbol: onRampTokenMeta.symbol || "",
+      // TODO: when icon is available in endpoint
+      // icon: onRampTokenMeta.icon,
     };
     return tokenInfo;
   }, [onRampTokenMeta]);
@@ -164,7 +168,7 @@ export function FiatSteps(props: {
   const fiatIcon = <currency.icon size={iconSize.sm} />;
 
   const onRampTokenIcon = (
-    <TokenIcon
+    <PayTokenIcon
       token={onRampToken}
       chain={onRampChain}
       size="sm"
@@ -173,7 +177,7 @@ export function FiatSteps(props: {
   );
 
   const toTokenIcon = (
-    <TokenIcon
+    <PayTokenIcon
       token={toToken}
       chain={toChain}
       size="sm"

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

@@ -52,18 +52,6 @@ export function OnRampTxDetailsTable(props: {
 
   return (
     <div>
-      {/* Receive */}
-      <TokenInfoRow
-        chainId={props.token.chainId}
-        client={props.client}
-        label="Receive"
-        tokenAmount={props.token.amount}
-        tokenSymbol={props.token.symbol}
-        tokenAddress={props.token.address}
-      />
-
-      {lineSpacer}
-
       {/* Pay */}
       <Container
         flex="row"
@@ -89,6 +77,18 @@ export function OnRampTxDetailsTable(props: {
         </Container>
       </Container>
 
+      {lineSpacer}
+
+      {/* Receive */}
+      <TokenInfoRow
+        chainId={props.token.chainId}
+        client={props.client}
+        label="Receive"
+        tokenAmount={props.token.amount}
+        tokenSymbol={props.token.symbol}
+        tokenAddress={props.token.address}
+      />
+
       {/* Status */}
       {props.statusMeta && (
         <>

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

@@ -9,16 +9,25 @@ export type BuyForTx = {
 
 export type SelectedScreen =
   | {
-      type: "node";
+      id: "node";
       node: React.ReactNode;
     }
   | {
-      type: "screen-id";
-      name: "select-from-token" | "select-to-token" | "select-currency";
+      id:
+        | "main"
+        | "select-payment-method"
+        | "buy-with-fiat"
+        | "buy-with-crypto";
     }
   | {
-      type: "main";
+      id: "select-from-token";
+      backScreen: SelectedScreen;
     }
   | {
-      type: "select-currency";
+      id: "select-to-token";
+      backScreen: SelectedScreen;
+    }
+  | {
+      id: "select-currency";
+      backScreen: SelectedScreen;
     };

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

@@ -8,15 +8,12 @@ import type { BuyForTx } from "./types.js";
 
 export function useBuyTxStates(options: {
   setTokenAmount: (value: string) => void;
-  buyForTx?: BuyForTx;
+  buyForTx: BuyForTx | null;
   hasEditedAmount: boolean;
-  isMainScreen: boolean;
-  account?: Account;
+  account: Account | null;
 }) {
-  const { buyForTx, hasEditedAmount, isMainScreen, setTokenAmount, account } =
-    options;
-  const shouldRefreshTokenAmount = !hasEditedAmount && isMainScreen;
-  const stopUpdatingAll = !isMainScreen;
+  const { buyForTx, hasEditedAmount, setTokenAmount, account } = options;
+  const shouldRefreshTokenAmount = !hasEditedAmount;
 
   const [amountNeeded, setAmountNeeded] = useState<bigint | undefined>(
     buyForTx?.cost,
@@ -26,7 +23,7 @@ export function useBuyTxStates(options: {
   // also update the token amount if allowed
   // ( Can't use useQuery because tx can't be added to queryKey )
   useEffect(() => {
-    if (!buyForTx || stopUpdatingAll) {
+    if (!buyForTx) {
       return;
     }
 
@@ -70,13 +67,7 @@ export function useBuyTxStates(options: {
     return () => {
       mounted = false;
     };
-  }, [
-    buyForTx,
-    shouldRefreshTokenAmount,
-    setTokenAmount,
-    stopUpdatingAll,
-    account,
-  ]);
+  }, [buyForTx, shouldRefreshTokenAmount, setTokenAmount, account]);
 
   return {
     amountNeeded,

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

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import type { PayUIOptions } from "../../../ConnectButtonProps.js";
@@ -14,17 +13,8 @@ export function useEnabledPaymentMethods(options: {
   supportedDestinations: SupportedChainAndTokens;
   toChain: Chain;
   toToken: ERC20OrNativeToken;
-  method: "crypto" | "creditCard";
-  setMethod: (method: "crypto" | "creditCard") => void;
 }) {
-  const {
-    payOptions,
-    supportedDestinations,
-    toChain,
-    toToken,
-    method,
-    setMethod,
-  } = options;
+  const { payOptions, supportedDestinations, toChain, toToken } = options;
 
   function getEnabledPayMethodsForSelectedToken(): {
     fiat: boolean;
@@ -64,26 +54,11 @@ export function useEnabledPaymentMethods(options: {
   const buyWithFiatEnabled = payOptions.buyWithFiat !== false && fiat;
   const buyWithCryptoEnabled = payOptions.buyWithCrypto !== false && swap;
 
-  useEffect(() => {
-    // both payment methods are disabled - do nothing
-    if (!buyWithFiatEnabled && !buyWithCryptoEnabled) {
-      return;
-    }
-
-    // if credit card tab is enabled but should be disabled, switch to crypto
-    if (method === "creditCard" && !buyWithFiatEnabled) {
-      setMethod("crypto");
-    }
-
-    // if crypto tab is enabled but should be disabled, switch to credit card
-    if (method === "crypto" && !buyWithCryptoEnabled) {
-      setMethod("creditCard");
-    }
-  }, [buyWithFiatEnabled, buyWithCryptoEnabled, method, setMethod]);
-
   const showPaymentSelection = buyWithFiatEnabled && buyWithCryptoEnabled;
 
   return {
+    buyWithFiatEnabled,
+    buyWithCryptoEnabled,
     showPaymentSelection,
   };
 }

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

@@ -30,7 +30,6 @@ export function useUISelectionStates(options: {
         )
       : "");
 
-  const [hasEditedAmount, setHasEditedAmount] = useState(false);
   const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
 
@@ -81,7 +80,7 @@ export function useUISelectionStates(options: {
   return {
     tokenAmount,
     setTokenAmount,
-    hasEditedAmount,
+
     toChain,
     setToChain,
     deferredTokenAmount,
@@ -92,7 +91,7 @@ export function useUISelectionStates(options: {
     fromToken,
     setFromToken,
     selectedCurrency,
-    setHasEditedAmount,
+
     setSelectedCurrency,
   };
 }

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

@@ -18,6 +18,7 @@ import { Input } from "../../../../components/formElements.js";
 import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
+import { getBuyTokenAmountFontSize } from "../utils.js";
 
 /**
  * @internal
@@ -66,6 +67,7 @@ export function BuyTokenInput(props: {
             variant="outline"
             pattern="^[0-9]*[.,]?[0-9]*$"
             inputMode="decimal"
+            tabIndex={-1}
             placeholder="0"
             type="text"
             data-placeholder={props.value === ""}
@@ -100,13 +102,9 @@ export function BuyTokenInput(props: {
             }}
             style={{
               border: "none",
-              fontSize:
-                props.value.length > 10
-                  ? "26px"
-                  : props.value.length > 6
-                    ? "34px"
-                    : "50px",
+              fontSize: getBuyTokenAmountFontSize(props.value),
               boxShadow: "none",
+              borderRadius: "0",
               padding: "0",
               paddingBlock: "2px",
               fontWeight: 600,

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

@@ -20,12 +20,12 @@ import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { StepBar } from "../../../../components/StepBar.js";
 import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { StyledDiv } from "../../../../design-system/elements.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
+import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import { SwapFees } from "./Fees.js";
 import { formatSeconds } from "./formatSeconds.js";
@@ -272,7 +272,7 @@ function RenderTokenInfo(props: {
         <Text color="primaryText" size="md">
           {props.amount} {props.symbol}
         </Text>
-        <TokenIcon
+        <PayTokenIcon
           token={props.token}
           chain={props.chain}
           size="sm"

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

@@ -12,7 +12,6 @@ import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
 import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
@@ -21,6 +20,7 @@ import type { TokenInfo } from "../../../defaultTokens.js";
 import { GenericWalletIcon } from "../../../icons/GenericWalletIcon.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
+import { PayTokenIcon } from "../PayTokenIcon.js";
 
 /**
  * Shows an amount "value" and renders the selected token and chain
@@ -78,7 +78,7 @@ export function PayWithCrypto(props: {
         }}
         disabled={props.freezeChainAndTokenSelection}
       >
-        <TokenIcon
+        <PayTokenIcon
           token={props.token}
           chain={props.chain}
           size="md"

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

@@ -6,10 +6,10 @@ import { useCustomTheme } from "../../../../../../core/design-system/CustomTheme
 import { spacing } from "../../../../../../core/design-system/index.js";
 import { ChainName } from "../../../../components/ChainName.js";
 import { Spacer } from "../../../../components/Spacer.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
+import { PayTokenIcon } from "../PayTokenIcon.js";
 import {
   getBuyWithCryptoStatusMeta,
   getBuyWithFiatStatusMeta,
@@ -45,7 +45,7 @@ export function BuyTxHistoryButton(props: {
           flex: 1,
         }}
       >
-        <TokenIcon
+        <PayTokenIcon
           client={props.client}
           chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
           size="md"

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

@@ -3,9 +3,9 @@ import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container } from "../../../../components/basic.js";
 import { Text } from "../../../../components/text.js";
+import { PayTokenIcon } from "../PayTokenIcon.js";
 
 export function TokenInfoRow(props: {
   tokenSymbol: string;
@@ -37,7 +37,7 @@ export function TokenInfoRow(props: {
         }}
       >
         <Container flex="row" gap="xs" center="y">
-          <TokenIcon
+          <PayTokenIcon
             chain={chainObj}
             size="sm"
             token={{

package/src/react/web/ui/ConnectWallet/screens/Buy/utils.ts

@@ -0,0 +1,3 @@
+export function getBuyTokenAmountFontSize(value: string) {
+  return value.length > 10 ? "26px" : value.length > 6 ? "34px" : "50px";
+}

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

@@ -10,7 +10,6 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { wait } from "../../../../core/utils/wait.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useDisconnect } from "../../../hooks/wallets/useDisconnect.js";
@@ -38,7 +37,6 @@ export const SignatureScreen: React.FC<{
   client: ThirdwebClient;
   auth: ConnectButtonProps["auth"];
 }> = (props) => {
-  const { client } = useConnectUI();
   const {
     onDone,
     modalSize,
@@ -149,7 +147,7 @@ export const SignatureScreen: React.FC<{
           <>
             <Container py="3xl">
               <WalletLogoSpinner
-                client={client}
+                client={props.client}
                 error={status === "failed"}
                 id={wallet.id}
               />
@@ -210,6 +208,7 @@ export const SignatureScreen: React.FC<{
           <TOS
             termsOfServiceUrl={termsOfServiceUrl}
             privacyPolicyUrl={privacyPolicyUrl}
+            locale={connectLocale.agreement}
           />
         </Container>
       )}

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

@@ -1,7 +1,7 @@
 import { keyframes } from "@emotion/react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { spacing } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { Img } from "../../components/Img.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container } from "../../components/basic.js";
@@ -11,14 +11,23 @@ import { StyledDiv } from "../../design-system/elements.js";
 import { TOS } from "../Modal/TOS.js";
 import { PoweredByThirdweb } from "../PoweredByTW.js";
 import { GlobeIcon } from "../icons/GlobalIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
+import type { WelcomeScreen } from "./types.js";
 
 /**
  * @internal
  */
-export function StartScreen() {
-  const { connectLocale: locale, connectModal, client } = useConnectUI();
-
-  const WelcomeScreen = connectModal.welcomeScreen;
+export function StartScreen(props: {
+  connectLocale: ConnectLocale;
+  client: ThirdwebClient;
+  welcomeScreen: WelcomeScreen | undefined;
+  meta: {
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+}) {
+  const WelcomeScreen = props.welcomeScreen;
   if (WelcomeScreen) {
     if (typeof WelcomeScreen === "function") {
       return <WelcomeScreen />;
@@ -27,17 +36,16 @@ export function StartScreen() {
 
   const title =
     (typeof WelcomeScreen === "object" ? WelcomeScreen?.title : undefined) ||
-    locale.welcomeScreen.defaultTitle;
+    props.connectLocale.welcomeScreen.defaultTitle;
 
   const subtitle =
     (typeof WelcomeScreen === "object" ? WelcomeScreen?.subtitle : undefined) ||
-    locale.welcomeScreen.defaultSubtitle;
+    props.connectLocale.welcomeScreen.defaultSubtitle;
 
   const img =
     typeof WelcomeScreen === "object" ? WelcomeScreen?.img : undefined;
 
-  const showTOS =
-    connectModal.termsOfServiceUrl || connectModal.privacyPolicyUrl;
+  const showTOS = props.meta.termsOfServiceUrl || props.meta.privacyPolicyUrl;
 
   return (
     <Container fullHeight animate="fadein" flex="column">
@@ -56,7 +64,7 @@ export function StartScreen() {
               src={img.src}
               width={img.width ? String(img.width) : undefined}
               height={img.height ? String(img.height) : undefined}
-              client={client}
+              client={props.client}
             />
           ) : (
             <GlobalContainer>
@@ -90,7 +98,7 @@ export function StartScreen() {
           center
           href="https://blog.thirdweb.com/web3-wallet/"
         >
-          {locale.newToWallets}
+          {props.connectLocale.newToWallets}
         </Link>
       </Container>
 
@@ -98,12 +106,13 @@ export function StartScreen() {
         <div>
           {showTOS && (
             <TOS
-              termsOfServiceUrl={connectModal.termsOfServiceUrl}
-              privacyPolicyUrl={connectModal.privacyPolicyUrl}
+              termsOfServiceUrl={props.meta.termsOfServiceUrl}
+              privacyPolicyUrl={props.meta.privacyPolicyUrl}
+              locale={props.connectLocale.agreement}
             />
           )}
 
-          {connectModal.showThirdwebBranding !== false && (
+          {props.meta.showThirdwebBranding !== false && (
             <Container
               style={{
                 paddingTop: spacing.xl,

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

@@ -52,6 +52,7 @@ export function TokenSelector(props: {
   };
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
+  modalTitle?: string;
 }) {
   const [screen, setScreen] = useState<"base" | "select-chain">("base");
   const [input, setInput] = useState("");
@@ -132,7 +133,10 @@ export function TokenSelector(props: {
       }}
     >
       <Container p="lg">
-        <ModalHeader onBack={props.onBack} title={locale.selectTokenTitle} />
+        <ModalHeader
+          onBack={props.onBack}
+          title={props.modalTitle || locale.selectTokenTitle}
+        />
       </Container>
 
       <Line />