move token selection to modal

MananTank · MananTank · commit b3fe76a5275d · 2025-09-17T02:22:56.000+05:30
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
@@ -23,7 +23,7 @@ export function BuyTokenEmbed(props: {
   const themeObj = getSDKTheme(theme === "light" ? "light" : "dark");
   return (
     <div className="bg-card rounded-2xl border overflow-hidden flex flex-col">
-      <div className="flex gap-2 p-4 border-b border-dashed">
+      <div className="flex gap-2.5 p-4 border-b border-dashed">
         <TabButton
           label="Swap"
           onClick={() => setTab("swap")}
diff --git a/packages/thirdweb/src/react/core/design-system/index.ts b/packages/thirdweb/src/react/core/design-system/index.ts
@@ -177,6 +177,7 @@ export const spacing = {
   "4xs": "2px",
   lg: "24px",
   md: "16px",
+  "md+": "20px",
   sm: "12px",
   xl: "32px",
   xs: "8px",
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx b/packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
@@ -249,7 +249,7 @@ export function StepRunner({
   };
 
   return (
-    <Container flex="column" fullHeight p="md">
+    <Container flex="column" fullHeight px="md" pb="md" pt="md+">
       <ModalHeader onBack={onBack} title={title || "Processing Payment"} />
 
       <Spacer y="xl" />
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx b/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx
@@ -40,7 +40,7 @@ export function WithHeader({
       )}
 
       <Container flex="column" px="md">
-        <Spacer y="md" />
+        <Spacer y="md+" />
 
         {(showTitle || uiOptions.metadata?.description) && (
           <>
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
@@ -266,7 +266,7 @@ export function PaymentDetails({
   const displayData = getDisplayData();
 
   return (
-    <Container flex="column" fullHeight p="md">
+    <Container flex="column" fullHeight px="md" pb="md" pt="md+">
       <ModalHeader onBack={onBack} title={title || "Payment Details"} />
 
       <Spacer y="lg" />
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
@@ -280,7 +280,7 @@ export function PaymentSelection({
   }
 
   return (
-    <Container flex="column" p="md">
+    <Container flex="column" px="md" pb="md" pt="md+">
       <ModalHeader onBack={getBackHandler()} title={getStepTitle()} />
       <Spacer y="lg" />
 
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
@@ -6,7 +6,7 @@ import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize } from "../../../../core/design-system/index.js";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
 import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
 import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
 import { Container, ModalHeader } from "../../components/basic.js";
@@ -91,10 +91,10 @@ export function SuccessScreen({
   }
 
   return (
-    <Container flex="column" fullHeight p="md">
+    <Container flex="column" fullHeight px="md" pb="md" pt="md+">
       <ModalHeader title="Payment Complete" />
 
-      <Spacer y="xl" />
+      <Spacer y="xxl" />
 
       <Container center="x" flex="column" gap="md">
         {/* Success Icon with Animation */}
@@ -103,7 +103,6 @@ export function SuccessScreen({
           flex="row"
           style={{
             animation: "successBounce 0.6s ease-out",
-            backgroundColor: theme.colors.tertiaryBg,
             border: `2px solid ${theme.colors.success}`,
             borderRadius: "50%",
             height: "64px",
@@ -121,19 +120,31 @@ export function SuccessScreen({
           />
         </Container>
 
-        <Text center color="primaryText" size="xl" weight={600} trackingTight>
-          Payment Successful!
-        </Text>
-
-        <Text center color="secondaryText" size="sm">
-          {hasPaymentId
-            ? "You can now close this page and return to the application."
-            : uiOptions.mode === "transaction"
-              ? "Click continue to execute your transaction."
-              : "Your payment has been completed successfully."}
-        </Text>
+        <div>
+          <Text
+            center
+            color="primaryText"
+            size="xl"
+            weight={600}
+            trackingTight
+            style={{
+              marginBottom: spacing.xxs,
+            }}
+          >
+            Payment Successful!
+          </Text>
+
+          <Text center color="secondaryText" size="sm">
+            {hasPaymentId
+              ? "You can now close this page and return to the application."
+              : uiOptions.mode === "transaction"
+                ? "Click continue to execute your transaction."
+                : "Your payment has been completed successfully."}
+          </Text>
+        </div>
       </Container>
-      <Spacer y="lg" />
+
+      <Spacer y="xxl" />
 
       {/* Action Buttons */}
       <Container flex="column" gap="sm" style={{ width: "100%" }}>
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
@@ -346,6 +346,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
     }
     return undefined;
   });
+
   const [sellToken, setSellToken] = useState<TokenSelection | undefined>(() => {
     if (props.prefill?.sellToken) {
       return {
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
@@ -51,7 +51,7 @@ export function SelectBridgeChainUI(
 
   return (
     <div>
-      <Container px="lg" py="md">
+      <Container px="md" py="md+">
         <ModalHeader onBack={props.onBack} title="Select Chain" />
       </Container>
       <Line />
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
@@ -182,7 +182,7 @@ function SelectTokenUI(
   if (screen === "select-token") {
     return (
       <Container>
-        <Container px="lg" py="md">
+        <Container px="md" py="md+">
           <ModalHeader onBack={props.onBack} title="Select Token" />
         </Container>
         <Line />
@@ -193,7 +193,7 @@ function SelectTokenUI(
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              minHeight: "400px",
+              height: "400px",
             }}
           >
             <Spinner color="secondaryText" size="xl" />
@@ -231,9 +231,9 @@ function SelectTokenUI(
                 }}
               >
                 {props.isFetching &&
-                  new Array(20).fill(0).map(() => (
-                    // biome-ignore lint/correctness/useJsxKeyInIterable: ok
-                    <TokenButtonSkeleton />
+                  new Array(20).fill(0).map((_, i) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: ok
+                    <TokenButtonSkeleton key={i} />
                   ))}
 
                 {!props.isFetching && sortedOwnedTokens.length > 0 && (
@@ -267,8 +267,8 @@ function SelectTokenUI(
                       client={props.client}
                       onSelect={props.setSelectedToken}
                       isSelected={
-                        props.selectedToken?.tokenAddress ===
-                        token.token_address
+                        props.selectedToken?.tokenAddress.toLowerCase() ===
+                        token.token_address.toLowerCase()
                       }
                     />
                   ))}
@@ -307,7 +307,8 @@ function SelectTokenUI(
                       client={props.client}
                       onSelect={props.setSelectedToken}
                       isSelected={
-                        props.selectedToken?.tokenAddress === token.address
+                        props.selectedToken?.tokenAddress.toLowerCase() ===
+                        token.address.toLowerCase()
                       }
                     />
                   ))}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -43,6 +43,7 @@ import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Input } from "../../components/formElements.js";
 import { Img } from "../../components/Img.js";
+import { Modal } from "../../components/Modal.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
@@ -85,71 +86,6 @@ type SwapUIProps = {
   }) => void;
 };
 
-export function SwapUI(props: SwapUIProps) {
-  const [screen, setScreen] = useState<
-    "base" | "select-buy-token" | "select-sell-ui"
-  >("base");
-
-  if (screen === "base") {
-    return (
-      <SwapUIBase
-        {...props}
-        onSelectToken={(type) => {
-          setScreen(type === "buy" ? "select-buy-token" : "select-sell-ui");
-        }}
-      />
-    );
-  }
-
-  if (screen === "select-buy-token") {
-    return (
-      <SelectToken
-        activeWalletInfo={props.activeWalletInfo}
-        onBack={() => setScreen("base")}
-        client={props.client}
-        selectedToken={props.buyToken}
-        setSelectedToken={(token) => {
-          props.setBuyToken(token);
-          setScreen("base");
-          // if buy token is same as sell token, unset sell token
-          if (
-            props.sellToken &&
-            token.tokenAddress === props.sellToken.tokenAddress &&
-            token.chainId === props.sellToken.chainId
-          ) {
-            props.setSellToken(undefined);
-          }
-        }}
-      />
-    );
-  }
-
-  if (screen === "select-sell-ui") {
-    return (
-      <SelectToken
-        onBack={() => setScreen("base")}
-        client={props.client}
-        selectedToken={props.sellToken}
-        setSelectedToken={(token) => {
-          props.setSellToken(token);
-          setScreen("base");
-          // if sell token is same as buy token, unset buy token
-          if (
-            props.buyToken &&
-            token.tokenAddress === props.buyToken.tokenAddress &&
-            token.chainId === props.buyToken.chainId
-          ) {
-            props.setBuyToken(undefined);
-          }
-        }}
-        activeWalletInfo={props.activeWalletInfo}
-      />
-    );
-  }
-
-  return null;
-}
-
 function useTokenPrice(options: {
   token: TokenSelection | undefined;
   client: ThirdwebClient;
@@ -172,23 +108,11 @@ function useTokenPrice(options: {
   });
 }
 
-function SwapUIBase(
-  props: SwapUIProps & {
-    onSelectToken: (type: "buy" | "sell") => void;
-    buyToken: TokenSelection | undefined;
-    sellToken: TokenSelection | undefined;
-    setBuyToken: (token: TokenSelection | undefined) => void;
-    setSellToken: (token: TokenSelection | undefined) => void;
-    amountSelection: {
-      type: "buy" | "sell";
-      amount: string;
-    };
-    setAmountSelection: (amountSelection: {
-      type: "buy" | "sell";
-      amount: string;
-    }) => void;
-  },
-) {
+export function SwapUI(props: SwapUIProps) {
+  const [modalState, setModalState] = useState<
+    "select-buy-token" | "select-sell-token" | undefined
+  >(undefined);
+
   // Token Prices ----------------------------------------------------------------------------
   const buyTokenQuery = useTokenPrice({
     token: props.buyToken,
@@ -271,6 +195,66 @@ function SwapUIBase(
 
   return (
     <Container p="md">
+      <Modal
+        size="compact"
+        title="Select Token"
+        open={!!modalState}
+        crossContainerStyles={{
+          right: spacing.md,
+          top: spacing["md+"],
+          transform: "none",
+        }}
+        setOpen={(v) => {
+          if (!v) {
+            setModalState(undefined);
+          }
+        }}
+      >
+        {modalState === "select-buy-token" && (
+          <SelectToken
+            activeWalletInfo={props.activeWalletInfo}
+            onBack={() => setModalState(undefined)}
+            client={props.client}
+            selectedToken={props.buyToken}
+            setSelectedToken={(token) => {
+              props.setBuyToken(token);
+              setModalState(undefined);
+              // if buy token is same as sell token, unset sell token
+              if (
+                props.sellToken &&
+                token.tokenAddress.toLowerCase() ===
+                  props.sellToken.tokenAddress.toLowerCase() &&
+                token.chainId === props.sellToken.chainId
+              ) {
+                props.setSellToken(undefined);
+              }
+            }}
+          />
+        )}
+
+        {modalState === "select-sell-token" && (
+          <SelectToken
+            onBack={() => setModalState(undefined)}
+            client={props.client}
+            selectedToken={props.sellToken}
+            setSelectedToken={(token) => {
+              props.setSellToken(token);
+              setModalState(undefined);
+              // if sell token is same as buy token, unset buy token
+              if (
+                props.buyToken &&
+                token.tokenAddress.toLowerCase() ===
+                  props.buyToken.tokenAddress.toLowerCase() &&
+                token.chainId === props.buyToken.chainId
+              ) {
+                props.setBuyToken(undefined);
+              }
+            }}
+            activeWalletInfo={props.activeWalletInfo}
+          />
+        )}
+      </Modal>
+
       {/* Sell  */}
       <TokenSection
         isConnected={!!props.activeWalletInfo}
@@ -297,7 +281,7 @@ function SwapUIBase(
         }
         client={props.client}
         currency={props.currency}
-        onSelectToken={() => props.onSelectToken("sell")}
+        onSelectToken={() => setModalState("select-sell-token")}
       />
 
       {/* Switch */}
@@ -340,7 +324,7 @@ function SwapUIBase(
         }}
         client={props.client}
         currency={props.currency}
-        onSelectToken={() => props.onSelectToken("buy")}
+        onSelectToken={() => setModalState("select-buy-token")}
       />
 
       {/* error message */}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
@@ -543,6 +543,7 @@ function ConnectButtonInner(
             )}
           </Button>
           <Modal
+            title="Sign in"
             open={showSignatureModal}
             setOpen={setShowSignatureModal}
             size="compact"
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
diff --git a/packages/thirdweb/src/react/web/ui/components/Modal.tsx b/packages/thirdweb/src/react/web/ui/components/Modal.tsx
diff --git a/packages/thirdweb/src/react/web/ui/components/basic.tsx b/packages/thirdweb/src/react/web/ui/components/basic.tsx

Original file line number	Diff line number	Diff line change
`@@ -280,7 +280,7 @@ export function PaymentSelection({`
`280`	`280`	`}`
`281`	`281`
`282`	`282`	`return (`
`283`		`- <Container flex="column" p="md">`
	`283`	`+ <Container flex="column" px="md" pb="md" pt="md+">`
`284`	`284`	`<ModalHeader onBack={getBackHandler()} title={getStepTitle()} />`
`285`	`285`	`<Spacer y="lg" />`
`286`	`286`
Original file line number	Diff line number	Diff line change
`@@ -346,6 +346,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {`
`346`	`346`	`}`
`347`	`347`	`return undefined;`
`348`	`348`	`});`
	`349`	`+`
`349`	`350`	`const [sellToken, setSellToken] = useState<TokenSelection \| undefined>(() => {`
`350`	`351`	`if (props.prefill?.sellToken) {`
`351`	`352`	`return {`