Fix theme in select-sell ui

Author: MananTank

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsx

@@ -12,6 +12,7 @@ import {
   iconSize,
   radius,
   spacing,
+  type Theme,
 } from "../../../../core/design-system/index.js";
 import { ConnectButton } from "../../ConnectWallet/ConnectButton.js";
 import { formatTokenAmount } from "../../ConnectWallet/screens/formatTokenBalance.js";
@@ -46,6 +47,7 @@ function getDefaultSelectedChain(
 export function SelectSellToken(
   props: SelectSellTokenProps & {
     activeWalletInfo: ActiveWalletInfo | undefined;
+    theme: Theme | "light" | "dark";
   },
 ) {
   if (props.activeWalletInfo) {
@@ -60,13 +62,15 @@ export function SelectSellToken(
     <SelectSellTokenDisconnectedUI
       onBack={props.onBack}
       client={props.client}
+      theme={props.theme}
     />
   );
 }
 
 export function SelectSellTokenDisconnectedUI(props: {
   onBack: () => void;
   client: ThirdwebClient;
+  theme: Theme | "light" | "dark";
 }) {
   return (
     <Container>
@@ -111,6 +115,7 @@ export function SelectSellTokenDisconnectedUI(props: {
         <ConnectButton
           client={props.client}
           connectButton={{ style: { width: "100%" }, label: "Connect Wallet" }}
+          theme={props.theme}
         />
       </Container>
     </Container>

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx

@@ -184,6 +184,7 @@ export function SwapUI(props: SwapUIProps) {
         onBack={() => setScreen("base")}
         client={props.client}
         selectedToken={sellToken}
+        theme={props.theme}
         setSelectedToken={(token) => {
           setSellToken(token);
           setScreen("base");

packages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx

@@ -72,7 +72,11 @@ export function ChainLoading() {
 export function Disconnected() {
   return (
     <SwapWidgetContainer theme="dark" className="w-full">
-      <SelectSellTokenDisconnectedUI client={storyClient} onBack={() => {}} />
+      <SelectSellTokenDisconnectedUI
+        client={storyClient}
+        onBack={() => {}}
+        theme="dark"
+      />
     </SwapWidgetContainer>
   );
 }

packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta } from "@storybook/react-vite";
+import { lightTheme } from "../../../react/core/design-system/index.js";
 import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
 import { storyClient } from "../../utils.js";
 
@@ -21,3 +22,21 @@ export function CurrencySet() {
 export function LightMode() {
   return <SwapWidget client={storyClient} currency="JPY" theme="light" />;
 }
+
+export function CustomTheme() {
+  return (
+    <SwapWidget
+      client={storyClient}
+      currency="JPY"
+      theme={lightTheme({
+        colors: {
+          modalBg: "#FFFFF0",
+          tertiaryBg: "#DBE4C9",
+          borderColor: "#8AA624",
+          secondaryText: "#3E3F29",
+          accentText: "#E43636",
+        },
+      })}
+    />
+  );
+}