thirdweb 5.116.2-nightly-6e87b9205f60b13757d032fbcec6e26965d1ebae-20251219000342 → 5.117.0-nightly-9c04b3f18042b162de24cb7cf5c296a38a9af4f0-20251221000443

package/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

@@ -47,7 +47,7 @@ export function PaymentOverview(props: {
         flex="column"
         style={{
           border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.lg,
+          borderRadius: radius.xl,
         }}
       >
         {sender && (
@@ -55,9 +55,9 @@ export function PaymentOverview(props: {
             flex="row"
             gap="sm"
             px="md"
-            py="sm"
+            py="md"
             style={{
-              borderBottom: `1px solid ${theme.colors.borderColor}`,
+              borderBottom: `1px dashed ${theme.colors.borderColor}`,
             }}
           >
             <WalletRow
@@ -88,7 +88,7 @@ export function PaymentOverview(props: {
             flex="row"
             gap="sm"
             px="md"
-            py="sm"
+            py="md"
             style={{ justifyContent: "space-between" }}
           >
             {/* left */}
@@ -122,7 +122,7 @@ export function PaymentOverview(props: {
         flex="column"
         style={{
           border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.lg,
+          borderRadius: radius.xl,
         }}
       >
         {isDifferentRecipient && (
@@ -130,9 +130,9 @@ export function PaymentOverview(props: {
             flex="row"
             gap="sm"
             px="md"
-            py="sm"
+            py="md"
             style={{
-              borderBottom: `1px solid ${theme.colors.borderColor}`,
+              borderBottom: `1px dashed ${theme.colors.borderColor}`,
             }}
           >
             <WalletRow

package/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -366,7 +366,7 @@ function SwapWidgetContent(
   }, [buyToken, sellToken, isPersistEnabled]);
 
   // preload requests
-  useBridgeChains(props.client);
+  useBridgeChains({ client: props.client });
 
   // if wallet suddenly disconnects, show screen 1
   if (screen.id === "1:swap-ui" || !activeWalletInfo) {

package/src/react/web/ui/Bridge/swap-widget/select-chain.tsx

@@ -15,7 +15,7 @@ import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
 import { SearchInput } from "./SearchInput.js";
-import { useBridgeChains } from "./use-bridge-chains.js";
+import { useBridgeChainsWithFilters } from "./use-bridge-chains.js";
 import { cleanedChainName } from "./utils.js";
 
 type SelectBuyTokenProps = {
@@ -24,13 +24,23 @@ type SelectBuyTokenProps = {
   onSelectChain: (chain: BridgeChain) => void;
   selectedChain: BridgeChain | undefined;
   isMobile: boolean;
+  type: "buy" | "sell";
+  selections: {
+    buyChainId: number | undefined;
+    sellChainId: number | undefined;
+  };
 };
 
 /**
  * @internal
  */
 export function SelectBridgeChain(props: SelectBuyTokenProps) {
-  const chainQuery = useBridgeChains(props.client);
+  const chainQuery = useBridgeChainsWithFilters({
+    client: props.client,
+    type: props.type,
+    buyChainId: props.selections.buyChainId,
+    sellChainId: props.selections.sellChainId,
+  });
 
   return (
     <SelectBridgeChainUI
@@ -126,7 +136,7 @@ export function SelectBridgeChainUI(
         {props.isPending &&
           new Array(20).fill(0).map(() => (
             // biome-ignore lint/correctness/useJsxKeyInIterable: ok
-            <ChainButtonSkeleton />
+            <ChainButtonSkeleton isMobile={props.isMobile} />
           ))}
 
         {filteredChains.length === 0 && !props.isPending && (
@@ -148,18 +158,24 @@ export function SelectBridgeChainUI(
   );
 }
 
-function ChainButtonSkeleton() {
+function ChainButtonSkeleton(props: { isMobile: boolean }) {
+  const iconSizeValue = props.isMobile ? iconSize.lg : iconSize.md;
   return (
     <div
       style={{
         display: "flex",
         alignItems: "center",
         gap: spacing.sm,
-        padding: `${spacing.sm} ${spacing.sm}`,
+        padding: props.isMobile
+          ? `${spacing.sm} ${spacing.sm}`
+          : `${spacing.xs} ${spacing.xs}`,
       }}
     >
-      <Skeleton height={`${iconSize.lg}px`} width={`${iconSize.lg}px`} />
-      <Skeleton height={fontSize.md} width="160px" />
+      <Skeleton height={`${iconSizeValue}px`} width={`${iconSizeValue}px`} />
+      <Skeleton
+        height={props.isMobile ? fontSize.md : fontSize.sm}
+        width="160px"
+      />
     </div>
   );
 }

package/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx

@@ -26,7 +26,7 @@ import { SearchInput } from "./SearchInput.js";
 import { SelectChainButton } from "./SelectChainButton.js";
 import { SelectBridgeChain } from "./select-chain.js";
 import type { ActiveWalletInfo, TokenSelection } from "./types.js";
-import { useBridgeChains } from "./use-bridge-chains.js";
+import { useBridgeChainsWithFilters } from "./use-bridge-chains.js";
 import {
   type TokenBalance,
   useTokenBalances,
@@ -43,6 +43,11 @@ type SelectTokenUIProps = {
   selectedToken: TokenSelection | undefined;
   setSelectedToken: (token: TokenSelection) => void;
   activeWalletInfo: ActiveWalletInfo | undefined;
+  type: "buy" | "sell";
+  selections: {
+    buyChainId: number | undefined;
+    sellChainId: number | undefined;
+  };
 };
 
 function findChain(chains: BridgeChain[], activeChainId: number | undefined) {
@@ -58,7 +63,13 @@ const INITIAL_LIMIT = 100;
  * @internal
  */
 export function SelectToken(props: SelectTokenUIProps) {
-  const chainQuery = useBridgeChains(props.client);
+  const chainQuery = useBridgeChainsWithFilters({
+    client: props.client,
+    type: props.type,
+    buyChainId: props.selections.buyChainId,
+    sellChainId: props.selections.sellChainId,
+  });
+
   const [search, _setSearch] = useState("");
   const debouncedSearch = useDebouncedValue(search, 500);
   const [limit, setLimit] = useState(INITIAL_LIMIT);
@@ -146,6 +157,11 @@ function SelectTokenUI(
     selectedToken: TokenSelection | undefined;
     setSelectedToken: (token: TokenSelection) => void;
     showMore: (() => void) | undefined;
+    type: "buy" | "sell";
+    selections: {
+      buyChainId: number | undefined;
+      sellChainId: number | undefined;
+    };
   },
 ) {
   const isMobile = useIsMobile();
@@ -203,6 +219,8 @@ function SelectTokenUI(
       >
         <LeftContainer>
           <SelectBridgeChain
+            type={props.type}
+            selections={props.selections}
             onBack={() => setScreen("select-token")}
             client={props.client}
             isMobile={false}
@@ -269,6 +287,8 @@ function SelectTokenUI(
           setScreen("select-token");
         }}
         selectedChain={props.selectedChain}
+        type={props.type}
+        selections={props.selections}
       />
     );
   }
@@ -467,16 +487,16 @@ function TokenSelectionScreen(props: {
       </Container>
 
       {!props.selectedChain && (
-        <div
+        <Container
+          flex="column"
+          center="both"
+          expand
           style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
             minHeight: "300px",
           }}
         >
           <Spinner color="secondaryText" size="xl" />
-        </div>
+        </Container>
       )}
 
       {props.selectedChain && (

package/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx

@@ -11,6 +11,7 @@ import { getToken } from "../../../../../pay/convert/get-token.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { getAddress } from "../../../../../utils/address.js";
 import { toTokens, toUnits } from "../../../../../utils/units.js";
+import { getDefaultWalletsForBridgeComponents } from "../../../../../wallets/defaultWallets.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -21,6 +22,7 @@ import {
 } from "../../../../core/design-system/index.js";
 import type { BridgePrepareRequest } from "../../../../core/hooks/useBridgePrepare.js";
 import { ConnectButton } from "../../ConnectWallet/ConnectButton.js";
+import { onModalUnmount } from "../../ConnectWallet/constants.js";
 import { DetailsModal } from "../../ConnectWallet/Details.js";
 import { ArrowUpDownIcon } from "../../ConnectWallet/icons/ArrowUpDownIcon.js";
 import connectLocaleEn from "../../ConnectWallet/locale/en.js";
@@ -48,7 +50,7 @@ import type {
   SwapWidgetConnectOptions,
   TokenSelection,
 } from "./types.js";
-import { useBridgeChains } from "./use-bridge-chains.js";
+import { useBridgeChain } from "./use-bridge-chains.js";
 
 type SwapUIProps = {
   activeWalletInfo: ActiveWalletInfo | undefined;
@@ -225,8 +227,14 @@ export function SwapUI(props: SwapUIProps) {
           }
         }}
       >
+        {/* buy token modal */}
         {modalState.screen === "select-buy-token" && (
           <SelectToken
+            type="buy"
+            selections={{
+              buyChainId: props.buyToken?.chainId,
+              sellChainId: props.sellToken?.chainId,
+            }}
             activeWalletInfo={props.activeWalletInfo}
             onClose={() => {
               setModalState((v) => ({
@@ -263,6 +271,7 @@ export function SwapUI(props: SwapUIProps) {
           />
         )}
 
+        {/* sell token modal */}
         {modalState.screen === "select-sell-token" && (
           <SelectToken
             onClose={() => {
@@ -291,13 +300,22 @@ export function SwapUI(props: SwapUIProps) {
                 token.tokenAddress.toLowerCase() !==
                   NATIVE_TOKEN_ADDRESS.toLowerCase()
               ) {
-                props.setBuyToken({
-                  tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS),
-                  chainId: token.chainId,
+                // set the buy token after a delay to avoid updating the "selections" prop passed to the <SelectToken> component and trigger unnecessay fetch of chains query that will never be used
+                // we have to do this because the modal does not close immediately onClose - it has a fade out animation
+                onModalUnmount(() => {
+                  props.setBuyToken({
+                    tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS),
+                    chainId: token.chainId,
+                  });
                 });
               }
             }}
             activeWalletInfo={props.activeWalletInfo}
+            type="sell"
+            selections={{
+              buyChainId: props.buyToken?.chainId,
+              sellChainId: props.sellToken?.chainId,
+            }}
           />
         )}
       </Modal>
@@ -319,8 +337,12 @@ export function SwapUI(props: SwapUIProps) {
         />
       )}
 
-      {/* Sell  */}
+      {/* Sell token  */}
       <TokenSection
+        selection={{
+          buyChainId: props.buyToken?.chainId,
+          sellChainId: props.sellToken?.chainId,
+        }}
         onMaxClick={() => {
           if (sellTokenBalanceQuery.data) {
             props.setAmountSelection({
@@ -381,6 +403,10 @@ export function SwapUI(props: SwapUIProps) {
 
       {/* Buy */}
       <TokenSection
+        selection={{
+          buyChainId: props.buyToken?.chainId,
+          sellChainId: props.sellToken?.chainId,
+        }}
         onMaxClick={undefined}
         onWalletClick={() => {
           setDetailsModalOpen(true);
@@ -456,6 +482,13 @@ export function SwapUI(props: SwapUIProps) {
           }}
           theme={props.theme}
           {...props.connectOptions}
+          wallets={
+            props.connectOptions?.wallets ||
+            getDefaultWalletsForBridgeComponents({
+              appMetadata: props.connectOptions?.appMetadata,
+              chains: props.connectOptions?.chains,
+            })
+          }
         />
       ) : (
         <Button
@@ -655,6 +688,10 @@ function useSwapQuote(params: {
 
 function TokenSection(props: {
   type: "buy" | "sell";
+  selection: {
+    buyChainId: number | undefined;
+    sellChainId: number | undefined;
+  };
   amount: {
     data: string;
     isFetching: boolean;
@@ -680,10 +717,12 @@ function TokenSection(props: {
   onMaxClick: (() => void) | undefined;
 }) {
   const theme = useCustomTheme();
-  const chainQuery = useBridgeChains(props.client);
-  const chain = chainQuery.data?.find(
-    (chain) => chain.chainId === props.selectedToken?.data?.chainId,
-  );
+
+  const chainQuery = useBridgeChain({
+    chainId: props.selectedToken?.data?.chainId,
+    client: props.client,
+  });
+  const chain = chainQuery.data;
 
   const fiatPricePerToken = props.selectedToken?.data?.prices[props.currency];
   const totalFiatValue = !props.amount.data

package/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts

@@ -2,11 +2,11 @@ import { useQuery } from "@tanstack/react-query";
 import { chains } from "../../../../../bridge/index.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 
-export function useBridgeChains(client: ThirdwebClient) {
+export function useBridgeChains(options: chains.Options) {
   return useQuery({
-    queryKey: ["bridge-chains"],
+    queryKey: ["bridge-chains", options],
     queryFn: async () => {
-      const data = await chains({ client });
+      const data = await chains(options);
       const dataCopy = [...data];
       // sort by name, but if name starts with number, put it at the end
 
@@ -29,3 +29,52 @@ export function useBridgeChains(client: ThirdwebClient) {
     refetchOnWindowFocus: false,
   });
 }
+
+export function useBridgeChain({
+  chainId,
+  client,
+}: {
+  chainId: number | undefined;
+  client: ThirdwebClient;
+}) {
+  const chainQuery = useBridgeChains({ client });
+  return {
+    data: chainQuery.data?.find((chain) => chain.chainId === chainId),
+    isPending: chainQuery.isPending,
+  };
+}
+
+/**
+ * type=origin: Returns all chains that can be used as origin
+ * type=destination: Returns all chains that can be used as destination
+ * originChainId=X: Returns destination chains reachable from chain X
+ * destinationChainId=X: Returns origin chains that can reach chain X
+ */
+
+// for fetching "buy" (destination) chains:
+// if a "sell" (origin) chain is selected, set originChainId to fetch all "buy" (destination) chains that support given originChainId
+// else - set type="destination"
+
+// for fetching "sell" (origin) chains:
+// if a "buy" (destination) chain is selected, set destinationChainId to fetch all "sell" (origin) chains that support given destinationChainId
+// else - set type="origin"
+
+export function useBridgeChainsWithFilters(options: {
+  client: ThirdwebClient;
+  buyChainId: number | undefined;
+  sellChainId: number | undefined;
+  type: "buy" | "sell";
+}) {
+  return useBridgeChains({
+    client: options.client,
+    ...(options.type === "buy"
+      ? // type = buy
+        options.sellChainId
+        ? { originChainId: options.sellChainId }
+        : { type: "destination" }
+      : // type = sell
+        options.buyChainId
+        ? { destinationChainId: options.buyChainId }
+        : { type: "origin" }),
+  });
+}

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

@@ -20,5 +20,5 @@ export const modalCloseFadeOutDuration = 250;
  * @internal
  */
 export function onModalUnmount(cb: () => void) {
-  setTimeout(cb, modalCloseFadeOutDuration + 100);
+  setTimeout(cb, modalCloseFadeOutDuration + 200);
 }

package/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx

@@ -1,9 +1,11 @@
-import type { IconFC } from "./types.js";
-
 /**
  * @internal
  */
-export const OutlineWalletIcon: IconFC = (props) => {
+export const OutlineWalletIcon = (props: {
+  size?: string;
+  color?: string;
+  style?: React.CSSProperties;
+}) => {
   return (
     <svg
       fill="none"
@@ -12,6 +14,7 @@ export const OutlineWalletIcon: IconFC = (props) => {
       viewBox="0 0 24 24"
       width={props.size}
       xmlns="http://www.w3.org/2000/svg"
+      style={props.style}
     >
       <path
         d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"

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

@@ -1,5 +1,9 @@
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+} from "../../../../../../core/design-system/index.js";
 import { Container } from "../../../../components/basic.js";
 
 export function StepConnectorArrow() {
@@ -9,8 +13,8 @@ export function StepConnectorArrow() {
       center="both"
       flex="row"
       style={{
-        marginBottom: "-10px",
-        marginTop: "-10px",
+        marginBottom: "-12px",
+        marginTop: "-12px",
         position: "relative",
         width: "100%",
         zIndex: 1000,
@@ -18,17 +22,16 @@ export function StepConnectorArrow() {
     >
       <Container
         center="both"
-        color="primaryText"
+        color="secondaryText"
         flex="row"
         style={{
           backgroundColor: theme.colors.modalBg,
           border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: "100%",
-          height: "30px",
-          width: "30px",
+          borderRadius: radius.full,
+          padding: "6px",
         }}
       >
-        <ChevronDownIcon height={16} width={16} />
+        <ChevronDownIcon height={iconSize["sm+"]} width={iconSize["sm+"]} />
       </Container>
     </Container>
   );

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

@@ -5,6 +5,7 @@ import { isSmartWallet } from "../../../../../../../wallets/smart/index.js";
 import {
   fontSize,
   iconSize,
+  radius,
 } from "../../../../../../core/design-system/index.js";
 import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
 import {
@@ -58,7 +59,27 @@ export function WalletRow(props: {
             size={iconSizeValue}
           />
         ) : (
-          <OutlineWalletIcon size={iconSizeValue} />
+          <Container
+            borderColor="borderColor"
+            bg="modalBg"
+            flex="row"
+            center="both"
+            style={{
+              borderStyle: "solid",
+              borderWidth: "1px",
+              borderRadius: radius.full,
+              width: `${iconSizeValue}px`,
+              height: `${iconSizeValue}px`,
+              position: "relative",
+            }}
+          >
+            <OutlineWalletIcon
+              style={{
+                position: "absolute",
+                inset: "25%",
+              }}
+            />
+          </Container>
         )}
         <Container flex="column" gap="3xs">
           {props.label ? (

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

@@ -70,7 +70,6 @@ export function WalletSwitcherConnectionScreen(
       onClose={() => {}}
       onConnect={(w) => {
         props.onSelect(w);
-        props.onBack();
       }}
       recommendedWallets={props.recommendedWallets}
       screenSetup={screenSetup}

package/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta } from "@storybook/react";
+import { lightTheme } from "../../../react/core/design-system/index.js";
+import {
+  BridgeWidget,
+  type BridgeWidgetProps,
+} from "../../../react/web/ui/Bridge/bridge-widget/bridge-widget.js";
+import { createWallet } from "../../../wallets/create-wallet.js";
+import { storyClient } from "../../utils.js";
+
+const meta: Meta<typeof BridgeWidget> = {
+  title: "Bridge/BridgeWidget",
+};
+export default meta;
+
+export function BasicUsage() {
+  return (
+    <Variant client={storyClient} buy={{ chainId: 8453, amount: "0.1" }} />
+  );
+}
+
+export function CurrencySet() {
+  return (
+    <Variant
+      client={storyClient}
+      currency="JPY"
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function NoThirdwebBranding() {
+  return (
+    <Variant
+      client={storyClient}
+      theme="light"
+      buy={{ chainId: 8453, amount: "0.1" }}
+      showThirdwebBranding={false}
+    />
+  );
+}
+
+export function CustomTheme() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <BridgeWidget
+        client={storyClient}
+        currency="JPY"
+        buy={{ chainId: 8453, amount: "0.1" }}
+        showThirdwebBranding={false}
+        theme={lightTheme({
+          colors: {
+            modalBg: "#FFFFF0",
+            tertiaryBg: "#DBE4C9",
+            borderColor: "#8AA624",
+            secondaryText: "#3E3F29",
+            accentText: "#E43636",
+          },
+        })}
+      />
+    </div>
+  );
+}
+
+export function CustomWallets() {
+  return (
+    <Variant
+      client={storyClient}
+      currency="JPY"
+      buy={{ chainId: 8453, amount: "0.1" }}
+      connectOptions={{
+        wallets: [createWallet("io.metamask"), createWallet("me.rainbow")],
+      }}
+    />
+  );
+}
+
+function Variant(props: BridgeWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <BridgeWidget {...props} theme="dark" />
+      <BridgeWidget {...props} theme="light" />
+    </div>
+  );
+}