DO NOT MERGE - Add Your tokens tab

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -213,6 +213,8 @@
       >
         <SelectToken
           type="buy"
+          theme={props.theme}
+          connectOptions={props.connectOptions}
           currency={props.currency}
           selections={{
             buyChainId: props.selectedToken?.chainId,
@@ -645,7 +647,7 @@
         gap="xs"
         color="secondaryText"
       >
-        <WalletDotIcon size={iconSize.xs} color="secondaryText" />
+        <WalletDotIcon size={iconSize.xs} />
         <Text size="sm" color="primaryText">
           {ensNameQuery.data || shortenAddress(props.address)}
         </Text>

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -13,7 +13,7 @@
 import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
 import type { SupportedTokens } from "../../../../core/utils/defaultTokens.js";
 import type { ConnectLocale } from "../../ConnectWallet/locale/types.js";
-import { WalletSwitcherConnectionScreen } from "../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js";
+import { WalletConnectionScreen } from "../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js";
 import { Container, ModalHeader } from "../../components/basic.js";
 import { Spacer } from "../../components/Spacer.js";
 import type { PayEmbedConnectOptions } from "../../PayEmbed.js";
@@ -239,7 +239,9 @@
       : connectOptions?.chains;
 
     return (
-      <WalletSwitcherConnectionScreen
+      <WalletConnectionScreen
+        shouldSetActive={false}
+        size="compact"
         accountAbstraction={connectOptions?.accountAbstraction}
         appMetadata={connectOptions?.appMetadata}
         chain={destinationChain || connectOptions?.chain}

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

@@ -1,50 +1,134 @@
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
   iconSize,
   radius,
   spacing,
 } from "../../../../core/design-system/index.js";
+import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Img } from "../../components/Img.js";
+import { Spacer } from "../../components/Spacer.js";
+import type { SelectedTab } from "./types.js";
 import { cleanedChainName } from "./utils.js";
 
-export function SelectChainButton(props: {
-  selectedChain: BridgeChain;
+export function MobileTabSelector(props: {
+  selectedTab: SelectedTab;
+  onSelect: (tab: "your-tokens" | "all-tokens" | "chain-selector") => void;
   client: ThirdwebClient;
-  onClick: () => void;
 }) {
+  if (props.selectedTab.type === "your-tokens") {
+    return <Tabs selectedTab={props.selectedTab} onSelect={props.onSelect} />;
+  }
+
+  if (props.selectedTab.type === "chain") {
+    return (
+      <div>
+        <Tabs selectedTab={props.selectedTab} onSelect={props.onSelect} />
+        <Spacer y="sm" />
+        <Container px="md">
+          <Button
+            variant="outline"
+            bg="tertiaryBg"
+            fullWidth
+            style={{
+              justifyContent: "flex-start",
+              fontWeight: 500,
+              fontSize: fontSize.md,
+              padding: `${spacing.sm} ${spacing.sm}`,
+              borderRadius: radius.lg,
+              minHeight: "48px",
+            }}
+            gap="sm"
+            onClick={() => props.onSelect("chain-selector")}
+          >
+            <Img
+              src={props.selectedTab.chain.icon}
+              client={props.client}
+              width={iconSize.md}
+              height={iconSize.md}
+            />
+            <span> {cleanedChainName(props.selectedTab.chain.name)} </span>
+            <ChevronDownIcon
+              width={iconSize.sm}
+              height={iconSize.sm}
+              style={{ marginLeft: "auto" }}
+            />
+          </Button>
+        </Container>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function Tabs(props: {
+  selectedTab: SelectedTab;
+  onSelect: (tab: "your-tokens" | "all-tokens") => void;
+}) {
+  const theme = useCustomTheme();
   return (
-    <Button
-      variant="outline"
-      bg="tertiaryBg"
-      fullWidth
+    <Container
+      flex="row"
+      gap="xs"
+      px="md"
+      style={{ borderBottom: `1px solid ${theme.colors.borderColor}` }}
+    >
+      <TabButton
+        isSelected={props.selectedTab.type === "your-tokens"}
+        onSelect={() => props.onSelect("your-tokens")}
+        label="Your Tokens"
+      />
+      <TabButton
+        isSelected={props.selectedTab.type === "chain"}
+        onSelect={() => props.onSelect("all-tokens")}
+        label="All Tokens"
+      />
+    </Container>
+  );
+}
+
+function TabButton(props: {
+  isSelected: boolean;
+  onSelect: () => void;
+  label: string;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <div
       style={{
-        justifyContent: "flex-start",
-        fontWeight: 500,
-        fontSize: fontSize.md,
-        padding: `${spacing.sm} ${spacing.sm}`,
-        borderRadius: radius.lg,
-        minHeight: "48px",
+        paddingBottom: "4px",
+        position: "relative",
       }}
-      gap="sm"
-      onClick={props.onClick}
     >
-      <Img
-        src={props.selectedChain.icon}
-        client={props.client}
-        width={iconSize.lg}
-        height={iconSize.lg}
-      />
-      <span> {cleanedChainName(props.selectedChain.name)} </span>
+      <Button
+        variant="ghost-solid"
+        onClick={props.onSelect}
+        style={{
+          fontSize: fontSize.sm,
+          padding: `10px ${spacing.xs}`,
+          color: props.isSelected
+            ? theme.colors.primaryText
+            : theme.colors.secondaryText,
+        }}
+      >
+        {props.label}
+      </Button>
 
-      <ChevronDownIcon
-        width={iconSize.sm}
-        height={iconSize.sm}
-        style={{ marginLeft: "auto" }}
-      />
-    </Button>
+      {props.isSelected && (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: "-1.5px",
+            borderBottom: `2px solid ${theme.colors.primaryText}`,
+          }}
+        ></div>
+      )}
+    </div>
   );
 }