thirdweb 5.58.4-nightly-e9ae98084af24199155f997f724c7ea8ff860876-20240923000346 → 5.58.5

package/src/react/native/ui/connect/TokenListScreen.tsx

@@ -18,7 +18,7 @@ import { TokenIcon } from "../components/TokenIcon.js";
 import { ThemedText } from "../components/text.js";
 import { RIGHT_CHEVRON } from "../icons/svgs.js";
 
-export type TokenListScreenProps = {
+type TokenListScreenProps = {
   theme: Theme;
   client: ThirdwebClient;
   supportedTokens?: SupportedTokens;
@@ -91,7 +91,7 @@ export const TokenRow = (props: {
         {address &&
           (balanceQuery.data ? (
             <ThemedText theme={theme} type="subtext">
-              {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
+              {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}
               {balanceQuery.data?.symbol}
             </ThemedText>
           ) : (

package/src/react/native/ui/connect/WalletLoadingThumbnail.tsx

@@ -70,7 +70,7 @@ function WalletLoadingThumbnail({
             stroke={showError ? "transparent" : theme.colors.accentText}
             strokeWidth={3}
             fill="transparent"
-            strokeDasharray={"100 300"}
+            strokeDasharray="100 300"
             strokeDashoffset={spin}
           />
         )}

package/src/react/native/ui/icons/svgs.ts

@@ -198,8 +198,6 @@ export const COINS_ICON = `<svg
       />
     </svg>`;
 
-export const TRANSACTIONS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-logs"><path d="M13 12h8"/><path d="M13 18h8"/><path d="M13 6h8"/><path d="M3 12h1"/><path d="M3 18h1"/><path d="M3 6h1"/><path d="M8 12h1"/><path d="M8 18h1"/><path d="M8 6h1"/></svg>`;
-
 export const RIGHT_CHEVRON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/react/native/ui/transaction/TransactionButton.tsx

@@ -51,7 +51,7 @@ export function TransactionButton(props: TransactionButtonProps) {
   return (
     <ThemedButton
       disabled={!account || disabled || isPending}
-      variant={"primary"}
+      variant="primary"
       onPress={() => handleClick()}
       style={buttonProps.style as StyleProp<ViewStyle>}
       theme={theme}

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

@@ -1,7 +1,5 @@
 "use client";
-import { useEffect } from "react";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
-import { useSetActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
 import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
 
 /**
@@ -44,21 +42,3 @@ export function AutoConnect(props: AutoConnectProps) {
   useAutoConnect(props);
   return <></>;
 }
-
-let noAutoConnectDone = false;
-
-/**
- * @internal
- */
-export function NoAutoConnect() {
-  const setConnectionStatus = useSetActiveWalletConnectionStatus();
-  useEffect(() => {
-    if (noAutoConnectDone) {
-      return;
-    }
-    noAutoConnectDone = true;
-    setConnectionStatus("disconnected");
-  });
-
-  return null;
-}

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

@@ -313,12 +313,11 @@ export function ConnectButton(props: ConnectButtonProps) {
   );
 
   if (!localeQuery.data) {
+    const combinedClassName = `${props.connectButton?.className || ""} ${TW_CONNECT_WALLET}`;
     return (
       <AnimatedButton
         disabled={true}
-        className={`${
-          props.connectButton?.className || ""
-        } ${TW_CONNECT_WALLET}`}
+        className={combinedClassName}
         variant="primary"
         type="button"
         style={{
@@ -413,12 +412,11 @@ function ConnectButtonInner(
 
   if (!activeAccount) {
     // Connect Wallet button
+    const combinedClassName = `${props.connectButton?.className || ""} ${TW_CONNECT_WALLET}`;
     return (
       <AnimatedButton
         disabled={isLoading}
-        className={`${
-          props.connectButton?.className || ""
-        } ${TW_CONNECT_WALLET}`}
+        className={combinedClassName}
         data-theme={theme}
         data-is-loading={isLoading}
         variant="primary"
@@ -454,12 +452,11 @@ function ConnectButtonInner(
     // loading state if loading
     // TODO: figure out a way to consolidate the loading states with the ones from locale loading
     if (siweAuth.isLoading || siweAuth.isLoggingIn || siweAuth.isLoggingOut) {
+      const combinedClassName = `${props.connectButton?.className || ""} ${TW_CONNECT_WALLET}`;
       return (
         <AnimatedButton
           disabled={true}
-          className={`${
-            props.connectButton?.className || ""
-          } ${TW_CONNECT_WALLET}`}
+          className={combinedClassName}
           variant="primary"
           type="button"
           style={{

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

@@ -200,12 +200,14 @@ export const ConnectedWalletDetails: React.FC<{
 
   const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;
 
+  const combinedClassName = `${TW_CONNECTED_WALLET} ${
+    props.detailsButton?.className || ""
+  }`;
+
   return (
     <WalletInfoButton
       type="button"
-      className={`${TW_CONNECTED_WALLET} ${
-        props.detailsButton?.className || ""
-      }`}
+      className={combinedClassName}
       style={props.detailsButton?.style}
       data-test="connected-wallet-details"
       onClick={openModal}
@@ -258,7 +260,7 @@ export const ConnectedWalletDetails: React.FC<{
             color="secondaryText"
             weight={400}
           >
-            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
+            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}
             {balanceQuery.data.symbol}
           </Text>
         ) : (
@@ -355,7 +357,7 @@ function DetailsModal(props: {
       </div>
 
       {chainNameQuery.isLoading ? (
-        <Skeleton height={"16px"} width={"150px"} />
+        <Skeleton height="16px" width="150px" />
       ) : (
         <Text color="primaryText" size="md" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
@@ -364,7 +366,7 @@ function DetailsModal(props: {
               formatNumber(Number(balanceQuery.data.displayValue), 5)
             ) : (
               <Skeleton height="1em" width="100px" />
-            )}{" "}
+            )}
             {balanceQuery.data?.symbol}
           </Text>
         </Text>
@@ -561,12 +563,9 @@ function DetailsModal(props: {
                   }}
                 >
                   <Container color="secondaryText" flex="row" center="both">
-                    <PinBottomIcon
-                      width={iconSize.sm}
-                      height={iconSize.sm}
-                    />{" "}
+                    <PinBottomIcon width={iconSize.sm} height={iconSize.sm} />
                   </Container>
-                  {locale.receive}{" "}
+                  {locale.receive}
                 </Button>
               )}
 
@@ -951,7 +950,7 @@ function DetailsModal(props: {
       <WalletUIStatesProvider theme={props.theme} isOpen={false}>
         <ScreenSetupContext.Provider value={screenSetup}>
           <Modal
-            size={"compact"}
+            size="compact"
             open={isOpen}
             setOpen={(_open) => {
               if (!_open) {
@@ -1201,7 +1200,7 @@ function SwitchNetworkButton(props: {
   );
 }
 
-export type DetailsModalConnectOptions = {
+type DetailsModalConnectOptions = {
   connectModal?: ConnectButton_connectModalOptions;
   walletConnect?: {
     projectId?: string;

package/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -94,7 +94,7 @@ function AllWalletsUI(props: {
             }}
             tabIndex={-1}
             variant="outline"
-            placeholder={"Search Wallet"}
+            placeholder="Search Wallet"
             value={searchTerm}
             onChange={(e) => {
               listContainer.current?.parentElement?.scroll({

package/src/react/web/ui/ConnectWallet/Modal/DeepLinkConnectUI.tsx

@@ -33,7 +33,7 @@ export const DeepLinkConnectUI = (props: {
 
       <Container flex="row" center="x" animate="fadein" py="3xl">
         <PulsatingContainer>
-          <WalletImage id={props.wallet.id} client={props.client} size={"80"} />
+          <WalletImage id={props.wallet.id} client={props.client} size="80" />
         </PulsatingContainer>
       </Container>
 

package/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx

@@ -243,7 +243,6 @@ function SmartWalletConnecting(props: {
                   }
                 }}
               >
-                {" "}
                 {personalWalletChainSwitchStatus === "switching"
                   ? "Switching"
                   : "Switch Network"}

package/src/react/web/ui/ConnectWallet/Modal/TOS.tsx

@@ -49,7 +49,7 @@ export function TOS(props: {
             disabled={!requireApproval}
           />
         )}
-        {locale.prefix}{" "}
+        {locale.prefix}
         {termsOfServiceUrl && (
           <Link
             inline
@@ -60,8 +60,7 @@ export function TOS(props: {
               whiteSpace: "nowrap",
             }}
           >
-            {" "}
-            {locale.termsOfService}{" "}
+            {locale.termsOfService}
           </Link>
         )}
         {bothGiven && `${locale.and} `}

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

@@ -916,7 +916,7 @@ export function useNetworkSwitcherModal() {
       setRootEl(
         <CustomThemeProvider theme={props.theme}>
           <Modal
-            size={"compact"}
+            size="compact"
             open={true}
             setOpen={(value) => {
               if (!value) {

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

@@ -29,7 +29,7 @@ export function PoweredByThirdweb() {
             color: "currentColor",
           }}
         >
-          {"Powered by"}
+          Powered by
         </Text>
         <ThirdwebTextIcon height={13} />
       </Container>

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

@@ -134,7 +134,7 @@ export function TransactionsScreen(props: {
             color: "inherit",
           }}
         >
-          View on Explorer{" "}
+          View on Explorer
           <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
         </ButtonLink>
       </Container>

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

@@ -51,7 +51,7 @@ const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
 // const localWalletId = "local";
 const inAppWalletId: WalletId = "inApp";
 
-export type WalletSelectorProps = {
+type WalletSelectorProps = {
   wallets: Wallet[];
   selectWallet: (wallet: Wallet) => void;
   title: string;

package/src/react/web/ui/ConnectWallet/constants.ts

@@ -14,8 +14,6 @@ export const wideModalScreenThreshold = wideModalWidth + 40;
 export const wideModalMaxHeight = "570px";
 export const compactModalMaxHeight = "660px";
 
-export const defaultTheme = "dark";
-
 export const modalCloseFadeOutDuration = 250;
 
 /**

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

@@ -1234,7 +1234,7 @@ function SwapScreenContent(props: {
         <div>
           {errorMsg.minAmount && (
             <Text color="danger" size="sm" center multiline>
-              Minimum amount is {errorMsg.minAmount}{" "}
+              Minimum amount is {errorMsg.minAmount}
               <TokenSymbol
                 token={toToken}
                 chain={toChain}
@@ -1482,7 +1482,7 @@ function FiatScreenContent(props: {
         <div>
           {errorMsg.minAmount && (
             <Text color="danger" size="sm" center multiline>
-              Minimum amount is {errorMsg.minAmount}{" "}
+              Minimum amount is {errorMsg.minAmount}
               <TokenSymbol
                 token={toToken}
                 chain={toChain}

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

@@ -159,7 +159,7 @@ export function DirectPaymentModeScreen(props: {
         <Container flex="row">
           <Container flex="column" expand>
             <Text size="md" color="primaryText" weight={700}>
-              {"Price"}
+              Price
             </Text>
           </Container>
           <Container expand>

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

@@ -113,7 +113,7 @@ export function TransactionModeScreen(props: {
         <Container flex="row">
           <Container flex="column" expand>
             <Text size="md" color="primaryText" weight={700}>
-              {"Price"}
+              Price
             </Text>
           </Container>
           <Container expand>
@@ -140,7 +140,7 @@ export function TransactionModeScreen(props: {
                     ),
                     6,
                   ),
-                )}{" "}
+                )}
                 {transactionCostAndData.token.symbol}
               </Text>
             </Container>

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

@@ -118,7 +118,7 @@ export function OnrampStatusScreen(props: {
           <StepBar steps={2} currentStep={1} />
           <Spacer y="sm" />
           <Text size="xs">
-            Step 1 of 2 - Buying {props.quote.onRampToken.token.symbol} with{" "}
+            Step 1 of 2 - Buying {props.quote.onRampToken.token.symbol} with
             {props.quote.fromCurrencyWithFees.currencySymbol}
           </Text>
         </>

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

@@ -164,7 +164,7 @@ export function FiatSteps(props: {
   const onRampTokenInfo = (
     <div>
       <Text color="primaryText" size="sm">
-        {formatNumber(Number(onRampTokenAmount), 6)}{" "}
+        {formatNumber(Number(onRampTokenAmount), 6)}
         <TokenSymbol token={onRampToken} chain={onRampChain} size="sm" inline />
       </Text>
     </div>
@@ -204,7 +204,7 @@ export function FiatSteps(props: {
             textDecoration: "line-through",
           }}
         >
-          {formatNumber(Number(toTokenAmount), 6)}{" "}
+          {formatNumber(Number(toTokenAmount), 6)}
           <TokenSymbol
             token={toToken}
             chain={toChain}
@@ -212,9 +212,9 @@ export function FiatSteps(props: {
             inline
             color="secondaryText"
           />
-        </Text>{" "}
+        </Text>
         <Text color="danger" size="sm" inline>
-          {formatNumber(Number(props.status.destination.amount), 6)}{" "}
+          {formatNumber(Number(props.status.destination.amount), 6)}
           <TokenSymbol
             token={{
               address: props.status.destination.token.tokenAddress,
@@ -232,7 +232,7 @@ export function FiatSteps(props: {
 
   const toTokenInfo = partialSuccessToTokenInfo || (
     <Text color="primaryText" size="sm">
-      {formatNumber(Number(toTokenAmount), 6)}{" "}
+      {formatNumber(Number(toTokenAmount), 6)}
       <TokenSymbol token={toToken} chain={toChain} size="sm" inline />
     </Text>
   );
@@ -251,7 +251,7 @@ export function FiatSteps(props: {
           }}
         >
           {toChainName.name}
-        </Text>{" "}
+        </Text>
         <Text size="xs" inline>
           {destinationName.name}
         </Text>
@@ -316,13 +316,13 @@ export function FiatSteps(props: {
       <PaymentStep
         title={
           <Text color="primaryText" size="md">
-            Get{" "}
+            Get
             <TokenSymbol
               token={onRampToken}
               chain={onRampChain}
               size="md"
               inline
-            />{" "}
+            />
             with {props.partialQuote.fromCurrencySymbol}
           </Text>
         }
@@ -356,13 +356,13 @@ export function FiatSteps(props: {
       <PaymentStep
         title={
           <Text color="primaryText" size="md">
-            Convert{" "}
+            Convert
             <TokenSymbol
               token={onRampToken}
               chain={onRampChain}
               size="md"
               inline
-            />{" "}
+            />
             to <TokenSymbol token={toToken} chain={toChain} size="md" inline />
           </Text>
         }
@@ -396,7 +396,7 @@ export function FiatSteps(props: {
           <>
             <Spacer y="md" />
             <Text color="danger" size="sm" center>
-              Expected {props.status.source?.token.symbol}, Got{" "}
+              Expected {props.status.source?.token.symbol}, Got
               {props.status.destination?.token.symbol} instead
             </Text>
             <Spacer y="sm" />
@@ -490,7 +490,7 @@ function PaymentStep(props: {
             gap="xxs"
             target="_blank"
           >
-            {props.explorer.label}{" "}
+            {props.explorer.label}
             <ExternalLinkIcon width={iconSize.xs} height={iconSize.xs} />
           </ButtonLink>
         </>

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

@@ -72,7 +72,7 @@ export function OnRampTxDetailsTable(props: {
           <Container flex="row" gap="xs" center="y">
             <currencyMeta.icon size={iconSize.sm} />
             <Text color="primaryText">
-              {formatNumber(Number(props.fiat.amount), 2)}{" "}
+              {formatNumber(Number(props.fiat.amount), 2)}
               {props.fiat.currencySymbol}
             </Text>
           </Container>

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

@@ -140,10 +140,7 @@ export function useTransactionCostAndData(args: {
   });
 }
 
-export async function getTransactionGasCost(
-  tx: PreparedTransaction,
-  from?: string,
-) {
+async function getTransactionGasCost(tx: PreparedTransaction, from?: string) {
   try {
     const gasCost = await estimateGasCost({
       transaction: tx,

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

@@ -1,106 +1,25 @@
 "use client";
-import {
-  ArrowRightIcon,
-  CrossCircledIcon,
-  ExternalLinkIcon,
-} from "@radix-ui/react-icons";
-import { useState } from "react";
+import { ArrowRightIcon, CrossCircledIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import {
   fontSize,
   iconSize,
   spacing,
 } from "../../../../../../core/design-system/index.js";
-import { useChainExplorers } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../../../../../core/hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/useActiveWalletChain.js";
-import { LoadingScreen } from "../../../../../wallets/shared/LoadingScreen.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spinner } from "../../../../components/Spinner.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
-import { Button, ButtonLink } from "../../../../components/buttons.js";
+import { Container } from "../../../../components/basic.js";
+import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
-import type { PayerInfo } from "../types.js";
 import {
   BuyTxHistoryButton,
   BuyTxHistoryButtonHeight,
 } from "./BuyTxHistoryButton.js";
-import { TxDetailsScreen } from "./TxDetailsScreen.js";
 import {
   type TxStatusInfo,
   useBuyTransactionsToShow,
 } from "./useBuyTransactionsToShow.js";
 
-/**
- * @internal
- */
-export function PayTxHistoryScreen(props: {
-  title: string;
-  onBack?: () => void;
-  client: ThirdwebClient;
-  onDone: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-}) {
-  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={props.onDone}
-        transactionMode={props.transactionMode}
-        isEmbed={props.isEmbed}
-        payer={payer}
-      />
-    );
-  }
-
-  return (
-    <Container animate="fadein">
-      <Container p="lg">
-        <ModalHeader title="Transactions" onBack={props.onBack} />
-      </Container>
-      <PayTxHistoryList {...props} onSelectTx={setSelectedTx} />
-      <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>
-  );
-}
-
 /**
  * @internal
  */

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

@@ -72,7 +72,7 @@ export function BuyTxHistoryButton(props: {
             }}
           >
             <Text size="sm" color="primaryText">
-              Buy{" "}
+              Buy
               {formatNumber(
                 Number(
                   props.txInfo.type === "swap"
@@ -80,9 +80,9 @@ export function BuyTxHistoryButton(props: {
                     : props.txInfo.status.quote.estimatedToTokenAmount,
                 ),
                 6,
-              )}{" "}
+              )}
               {props.txInfo.status.quote.toToken.symbol}
-            </Text>{" "}
+            </Text>
           </Container>
 
           <Spacer y="xxs" />

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

@@ -121,9 +121,7 @@ export function FiatDetailsScreen(props: {
 }
 
 // if the toToken is the same as the onRampToken, no swap is required
-export function isSwapRequiredAfterOnRamp(
-  buyWithFiatStatus: BuyWithFiatStatus,
-) {
+function isSwapRequiredAfterOnRamp(buyWithFiatStatus: BuyWithFiatStatus) {
   if (buyWithFiatStatus.status === "NOT_FOUND") {
     return false;
   }

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

@@ -247,7 +247,7 @@ export function SwapTxDetailsTable(
         <TokenInfoRow
           chainId={toToken.chainId}
           client={client}
-          label={"Receive"}
+          label="Receive"
           tokenAmount={toToken.amount}
           tokenSymbol={toToken.symbol || ""}
           tokenAddress={toToken.address}

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

@@ -76,7 +76,7 @@ export function SwapConfirmationScreen(props: {
           <StepBar steps={2} currentStep={2} />
           <Spacer y="sm" />
           <Text size="xs">
-            Step 2 of 2 - Converting {props.fromTokenSymbol} to{" "}
+            Step 2 of 2 - Converting {props.fromTokenSymbol} to
             {props.toTokenSymbol}
           </Text>
           <Spacer y="md" />
@@ -352,7 +352,7 @@ function RenderTokenInfo(props: {
       {name ? (
         <Text size="xs">{name}</Text>
       ) : (
-        <Skeleton width={"100px"} height={fontSize.xs} />
+        <Skeleton width="100px" height={fontSize.xs} />
       )}
     </Container>
   );
@@ -385,7 +385,7 @@ function ConfirmItem(props: {
 /**
  * @internal
  */
-export function SwapFeesRightAligned(props: {
+function SwapFeesRightAligned(props: {
   quote: BuyWithCryptoQuote;
 }) {
   return (