@velora-dex/widget 0.3.10 → 0.3.11-dev.1

package/dist/components/widget/AppHeader/Activities/hooks.d.ts

@@ -23,8 +23,8 @@ export declare const useUserHasActivities: () => {
     hasActiveMarketDeltaOrders: boolean;
 };
 export declare function useActivityProps(): {
-    selectedNetwork: 1 | 10 | 137 | 56 | 43114 | 42161 | 8453 | 100 | 146 | 130 | "all";
-    setSelectedNetwork: import('react').Dispatch<import('react').SetStateAction<1 | 10 | 137 | 56 | 43114 | 42161 | 8453 | 100 | 146 | 130 | "all">>;
+    selectedNetwork: 1 | 10 | 56 | 42161 | 137 | 43114 | 8453 | 100 | 146 | 130 | "all";
+    setSelectedNetwork: import('react').Dispatch<import('react').SetStateAction<1 | 10 | 56 | 42161 | 137 | 43114 | 8453 | 100 | 146 | 130 | "all">>;
     selectedOrder: OrderItem | null;
     onSelectOrder: (order: OrderItem) => void;
     setSelectedOrder: import('react').Dispatch<import('react').SetStateAction<OrderItem | null>>;

package/dist/components/widget/Dialog/SelectTokenDialog/SelectTokenDialog.d.ts

@@ -2,17 +2,20 @@ import { SelectTokenDialogProps } from './types';
 import { SupportedChainId } from '../../../../lib/web3/wagmi/types';
 import { Token } from '../../../../tokens/state/types';
 import { UseImportTokenDrawerReturn } from '../../ImportToken/types';
-export type SelectTokenScreenProps = Omit<SelectTokenProps, "onSelectImportToken"> & {
+import { GenericScreenHeaderProps } from '../../Screen/GenericScreen';
+import { Prettify } from 'ts-essentials';
+export type SelectTokenScreenProps = Prettify<Pick<SelectTokenProps, "onClose" | "onSelect" | "selectableChains" | "tokenType"> & {
     drawerContainer?: HTMLElement | null;
-};
+}>;
 export declare const SelectTokenScreen: ({ drawerContainer, ...props }: SelectTokenScreenProps) => import("react/jsx-runtime").JSX.Element;
 type SelectTokenProps = SelectTokenDialogProps & SelectTokenContentProps;
-export declare const SelectTokenContent: ({ tokenType, onClose, onSelect, onSelectImportToken, selectableChains, }: SelectTokenProps) => import("react/jsx-runtime").JSX.Element;
-export type SelectTokenContentProps = {
+type SelectTokenContentProps = {
     onSelectImportToken: UseImportTokenDrawerReturn["onOpenImportTokenDrawer"];
     onClose?: () => void;
     onSelect?: (token: Token) => void;
     selectableChains?: SupportedChainId[];
+    showNetworksSidebar: boolean;
+    headerProps: GenericScreenHeaderProps;
 };
 export {};
 //# sourceMappingURL=SelectTokenDialog.d.ts.map

package/dist/components/widget/Dialog/SelectTokenDialog/SelectTokenDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/widget/Dialog/SelectTokenDialog/SelectTokenDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAUtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAGlD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAO1E,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,gBAAgB,EAChB,qBAAqB,CACtB,GAAG;IACF,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,+BAG/B,sBAAsB,4CAmBxB,CAAC;AAEF,KAAK,gBAAgB,GAAG,sBAAsB,GAAG,uBAAuB,CAAC;AAEzE,eAAO,MAAM,kBAAkB,GAAI,0EAMhC,gBAAgB,4CAmBlB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,mBAAmB,EAAE,0BAA0B,CAAC,yBAAyB,CAAC,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACvC,CAAC"}
+{"version":3,"file":"SelectTokenDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/widget/Dialog/SelectTokenDialog/SelectTokenDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAUtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAGlD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAI1E,OAAO,EAGL,KAAK,wBAAwB,EAE9B,MAAM,4BAA4B,CAAC;AAIpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM9C,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAC3C,IAAI,CACF,gBAAgB,EAChB,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,WAAW,CAC1D,GAAG;IACF,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC,CACF,CAAC;AAOF,eAAO,MAAM,iBAAiB,GAAI,+BAG/B,sBAAsB,4CAyCxB,CAAC;AAEF,KAAK,gBAAgB,GAAG,sBAAsB,GAAG,uBAAuB,CAAC;AAYzE,KAAK,uBAAuB,GAAG;IAC7B,mBAAmB,EAAE,0BAA0B,CAAC,yBAAyB,CAAC,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,wBAAwB,CAAC;CACvC,CAAC"}

package/dist/components/widget/Dialog/SelectTokenDialog/SelectTokenDialog.js

@@ -9,14 +9,20 @@ import { useChainId } from 'wagmi';
 import { useSwapChainTo, useLimitChainTo } from '../../../../core/state/chainToAtom.js';
 import { TokenCloud } from './TokenListBody/TokenCloud/index.js';
 import { useTradeMode } from '../../../../core/state/tradeModeAtom.js';
-import { assertProp } from '../../../../lib/utils/index.js';
+import { cn, assertProp } from '../../../../lib/utils/index.js';
 import { useEnabledSrcChains } from '../../../../core/state/enabledChainsAtom.js';
 import { useSelectableDestChains } from '../../../../hooks/useSelectableDestChains.js';
-import { GenericScreen } from '../../Screen/GenericScreen.js';
+import { GenericScreen, GenericScreenHeader } from '../../Screen/GenericScreen.js';
 import { useImportTokenDrawer } from '../../ImportToken/useImportTokenDrawer.js';
+import { useBreakpoints } from '../../../../hooks/useBreakpoints.js';
+import { NetworkSwitcherList } from '../../NetworkSwitcher/NetworkSwitcherList.js';
 
+const headerClasses = {
+  root: "px-4 pt-5 pb-4",
+  title: "text-[16px]"
+};
 const SelectTokenScreen = (t0) => {
-  const $ = distExports.c(14);
+  const $ = distExports.c(21);
   let drawerContainer;
   let props;
   if ($[0] !== t0) {
@@ -49,61 +55,109 @@ const SelectTokenScreen = (t0) => {
     onOpenImportTokenDrawer,
     importTokenDrawer
   } = useImportTokenDrawer(t1);
+  const {
+    isOverMd
+  } = useBreakpoints();
+  const showNetworksSidebar = isOverMd;
   let t2;
-  if ($[7] !== onOpenImportTokenDrawer || $[8] !== props) {
-    t2 = /* @__PURE__ */ jsx(SelectTokenContent, { ...props, onSelectImportToken: onOpenImportTokenDrawer });
-    $[7] = onOpenImportTokenDrawer;
-    $[8] = props;
-    $[9] = t2;
+  if ($[7] !== props.onClose) {
+    t2 = {
+      title: "Select Token",
+      showBackButton: true,
+      onGoBack: props.onClose,
+      classes: headerClasses
+    };
+    $[7] = props.onClose;
+    $[8] = t2;
   } else {
-    t2 = $[9];
+    t2 = $[8];
   }
+  const headerProps = t2;
   let t3;
-  if ($[10] !== importTokenDrawer || $[11] !== props.onClose || $[12] !== t2) {
-    t3 = /* @__PURE__ */ jsxs(GenericScreen, { title: "Select a token...", onGoBack: props.onClose, showBackButton: true, children: [
-      t2,
+  if ($[9] !== headerProps || $[10] !== showNetworksSidebar) {
+    t3 = !showNetworksSidebar ? {
+      title: headerProps.title,
+      showBackButton: headerProps.showBackButton,
+      onGoBack: headerProps.onGoBack,
+      headerClasses: headerProps.classes
+    } : {
+      classes: {
+        root: "bg-contrast-9"
+      }
+    };
+    $[9] = headerProps;
+    $[10] = showNetworksSidebar;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const screenProps = t3;
+  let t4;
+  if ($[12] !== headerProps || $[13] !== onOpenImportTokenDrawer || $[14] !== props || $[15] !== showNetworksSidebar) {
+    t4 = /* @__PURE__ */ jsx(SelectTokenContent, { ...props, headerProps, showNetworksSidebar, onSelectImportToken: onOpenImportTokenDrawer });
+    $[12] = headerProps;
+    $[13] = onOpenImportTokenDrawer;
+    $[14] = props;
+    $[15] = showNetworksSidebar;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  let t5;
+  if ($[17] !== importTokenDrawer || $[18] !== screenProps || $[19] !== t4) {
+    t5 = /* @__PURE__ */ jsxs(GenericScreen, { ...screenProps, children: [
+      t4,
       importTokenDrawer
     ] });
-    $[10] = importTokenDrawer;
-    $[11] = props.onClose;
-    $[12] = t2;
-    $[13] = t3;
+    $[17] = importTokenDrawer;
+    $[18] = screenProps;
+    $[19] = t4;
+    $[20] = t5;
   } else {
-    t3 = $[13];
+    t5 = $[20];
   }
-  return t3;
+  return t5;
 };
 const SelectTokenContent = (t0) => {
   const $ = distExports.c(6);
-  const {
-    tokenType,
-    onClose,
-    onSelect,
-    onSelectImportToken,
-    selectableChains
-  } = t0;
+  let tokenContentProps;
+  let tokenType;
+  if ($[0] !== t0) {
+    ({
+      tokenType,
+      ...tokenContentProps
+    } = t0);
+    $[0] = t0;
+    $[1] = tokenContentProps;
+    $[2] = tokenType;
+  } else {
+    tokenContentProps = $[1];
+    tokenType = $[2];
+  }
+  const SelectTokenContentComp = tokenType === "from" ? SelectTokenFromContent : SelectTokenToContent;
   let t1;
-  if ($[0] !== onClose || $[1] !== onSelect || $[2] !== onSelectImportToken || $[3] !== selectableChains || $[4] !== tokenType) {
-    const content = tokenType === "from" ? /* @__PURE__ */ jsx(SelectTokenFromContent, { onClose, onSelectImportToken, onSelect, selectableChains }) : /* @__PURE__ */ jsx(SelectTokenToContent, { onClose, onSelectImportToken, onSelect, selectableChains });
-    t1 = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-2 h-[448px] pb-6", children: content });
-    $[0] = onClose;
-    $[1] = onSelect;
-    $[2] = onSelectImportToken;
-    $[3] = selectableChains;
-    $[4] = tokenType;
+  if ($[3] !== SelectTokenContentComp || $[4] !== tokenContentProps) {
+    t1 = /* @__PURE__ */ jsx(SelectTokenContentComp, { ...tokenContentProps });
+    $[3] = SelectTokenContentComp;
+    $[4] = tokenContentProps;
     $[5] = t1;
   } else {
     t1 = $[5];
   }
   return t1;
 };
+const networkSwitcherListClasses = {
+  root: "rounded-r-xxl"
+};
 const SelectTokenFromContent = (t0) => {
-  const $ = distExports.c(31);
+  const $ = distExports.c(45);
   const {
     onClose,
     onSelect: _onSelect,
     onSelectImportToken,
-    selectableChains: _selectableChains
+    selectableChains: _selectableChains,
+    showNetworksSidebar,
+    headerProps
   } = t0;
   const appChainId = useChainId();
   const [selectedChainId, setSelectedChainId] = useState(appChainId);
@@ -170,85 +224,130 @@ const SelectTokenFromContent = (t0) => {
   } else {
     t5 = $[9];
   }
-  let t6;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = {
-      align: "end"
-    };
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  const t7 = selectableChains.length <= 1;
-  let t8;
-  if ($[11] !== selectableChains || $[12] !== selectedChainId || $[13] !== t7) {
-    t8 = {
-      selectedNetwork: selectedChainId,
+  const t6 = !showNetworksSidebar;
+  let t7;
+  if ($[10] !== selectableChains || $[11] !== selectedChainId || $[12] !== t6) {
+    t7 = {
       onSelect: t5,
+      selectedNetwork: selectedChainId,
       networks: selectableChains,
-      dropdownProps: t6,
-      disabled: t7
+      showCheckIcon: t6
     };
-    $[11] = selectableChains;
-    $[12] = selectedChainId;
+    $[10] = selectableChains;
+    $[11] = selectedChainId;
+    $[12] = t6;
     $[13] = t7;
-    $[14] = t8;
   } else {
-    t8 = $[14];
+    t7 = $[13];
+  }
+  const networkSwitcherProps = t7;
+  let t8;
+  if ($[14] !== networkSwitcherProps || $[15] !== showNetworksSidebar) {
+    t8 = showNetworksSidebar ? {
+      ...networkSwitcherProps,
+      classes: networkSwitcherListClasses
+    } : void 0;
+    $[14] = networkSwitcherProps;
+    $[15] = showNetworksSidebar;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
   }
   let t9;
-  if ($[15] !== clearInputValue || $[16] !== handleInputValueChange || $[17] !== inputValue || $[18] !== t8) {
-    t9 = /* @__PURE__ */ jsx(TokenSearch, { value: inputValue, onChange: handleInputValueChange, clearSearch: clearInputValue, compactNetworkSwitcherProps: t8 });
-    $[15] = clearInputValue;
-    $[16] = handleInputValueChange;
-    $[17] = inputValue;
-    $[18] = t8;
-    $[19] = t9;
+  if ($[17] !== networkSwitcherProps || $[18] !== selectableChains || $[19] !== showNetworksSidebar) {
+    t9 = !showNetworksSidebar ? {
+      ...networkSwitcherProps,
+      dropdownProps: {
+        align: "end"
+      },
+      disabled: selectableChains.length <= 1
+    } : void 0;
+    $[17] = networkSwitcherProps;
+    $[18] = selectableChains;
+    $[19] = showNetworksSidebar;
+    $[20] = t9;
   } else {
-    t9 = $[19];
+    t9 = $[20];
   }
   let t10;
-  if ($[20] !== onSelect || $[21] !== selectedChainId) {
-    t10 = /* @__PURE__ */ jsx(TokenCloud, { onSelectToken: onSelect, forcedChainId: selectedChainId, showNetworkIcon: true });
-    $[20] = onSelect;
-    $[21] = selectedChainId;
+  if ($[21] !== showNetworksSidebar) {
+    t10 = cn({
+      "pr-[42px] h-[40px] dark:bg-contrast-2": showNetworksSidebar
+    });
+    $[21] = showNetworksSidebar;
     $[22] = t10;
   } else {
     t10 = $[22];
   }
   let t11;
-  if ($[23] !== effectiveInputValue || $[24] !== onSelectToken || $[25] !== selectedChainId) {
-    t11 = /* @__PURE__ */ jsx(RegularTokenList, { tokenFilter: effectiveInputValue, onSelectToken, forcedChainId: selectedChainId, className: "flex-1" });
-    $[23] = effectiveInputValue;
-    $[24] = onSelectToken;
-    $[25] = selectedChainId;
-    $[26] = t11;
+  if ($[23] !== t10) {
+    t11 = {
+      input: t10
+    };
+    $[23] = t10;
+    $[24] = t11;
   } else {
-    t11 = $[26];
+    t11 = $[24];
   }
   let t12;
-  if ($[27] !== t10 || $[28] !== t11 || $[29] !== t9) {
-    t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t9,
-      t10,
-      t11
-    ] });
-    $[27] = t10;
+  if ($[25] !== clearInputValue || $[26] !== handleInputValueChange || $[27] !== inputValue || $[28] !== t11 || $[29] !== t9) {
+    t12 = /* @__PURE__ */ jsx(TokenSearch, { value: inputValue, onChange: handleInputValueChange, clearSearch: clearInputValue, compactNetworkSwitcherProps: t9, classes: t11 });
+    $[25] = clearInputValue;
+    $[26] = handleInputValueChange;
+    $[27] = inputValue;
     $[28] = t11;
     $[29] = t9;
     $[30] = t12;
   } else {
     t12 = $[30];
   }
-  return t12;
+  let t13;
+  if ($[31] !== onSelect || $[32] !== selectedChainId) {
+    t13 = /* @__PURE__ */ jsx(TokenCloud, { onSelectToken: onSelect, forcedChainId: selectedChainId, showNetworkIcon: true });
+    $[31] = onSelect;
+    $[32] = selectedChainId;
+    $[33] = t13;
+  } else {
+    t13 = $[33];
+  }
+  let t14;
+  if ($[34] !== effectiveInputValue || $[35] !== onSelectToken || $[36] !== selectedChainId) {
+    t14 = /* @__PURE__ */ jsx(RegularTokenList, { tokenFilter: effectiveInputValue, onSelectToken, forcedChainId: selectedChainId, className: "flex-1" });
+    $[34] = effectiveInputValue;
+    $[35] = onSelectToken;
+    $[36] = selectedChainId;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  let t15;
+  if ($[38] !== headerProps || $[39] !== showNetworksSidebar || $[40] !== t12 || $[41] !== t13 || $[42] !== t14 || $[43] !== t8) {
+    t15 = /* @__PURE__ */ jsxs(SelectTokenLayout, { showNetworksSidebar, headerProps, networkSwitcherListProps: t8, children: [
+      t12,
+      t13,
+      t14
+    ] });
+    $[38] = headerProps;
+    $[39] = showNetworksSidebar;
+    $[40] = t12;
+    $[41] = t13;
+    $[42] = t14;
+    $[43] = t8;
+    $[44] = t15;
+  } else {
+    t15 = $[44];
+  }
+  return t15;
 };
 const SelectTokenToContent = (t0) => {
-  const $ = distExports.c(44);
+  const $ = distExports.c(58);
   const {
     onClose,
     onSelect: _onSelect,
     onSelectImportToken,
-    selectableChains: _selectableChains
+    selectableChains: _selectableChains,
+    showNetworksSidebar,
+    headerProps
   } = t0;
   const tradeMode = useTradeMode();
   const isSwap = tradeMode === "swap";
@@ -362,76 +461,202 @@ const SelectTokenToContent = (t0) => {
   } else {
     t7 = $[19];
   }
-  let t8;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = {
-      align: "end"
-    };
-    $[20] = t8;
-  } else {
-    t8 = $[20];
-  }
+  const t8 = !showNetworksSidebar;
   let t9;
-  if ($[21] !== chainSwitchingDisabled || $[22] !== selectableChains || $[23] !== selectedChainId) {
+  if ($[20] !== selectableChains || $[21] !== selectedChainId || $[22] !== t8) {
     t9 = {
-      selectedNetwork: selectedChainId,
       onSelect: t7,
+      selectedNetwork: selectedChainId,
       networks: selectableChains,
-      disabled: chainSwitchingDisabled,
-      dropdownProps: t8
+      showCheckIcon: t8
     };
-    $[21] = chainSwitchingDisabled;
-    $[22] = selectableChains;
-    $[23] = selectedChainId;
-    $[24] = t9;
+    $[20] = selectableChains;
+    $[21] = selectedChainId;
+    $[22] = t8;
+    $[23] = t9;
   } else {
-    t9 = $[24];
+    t9 = $[23];
   }
+  const networkSwitcherProps = t9;
   let t10;
-  if ($[25] !== clearInputValue || $[26] !== handleInputValueChange || $[27] !== inputValue || $[28] !== t9) {
-    t10 = /* @__PURE__ */ jsx(TokenSearch, { value: inputValue, onChange: handleInputValueChange, clearSearch: clearInputValue, compactNetworkSwitcherProps: t9 });
-    $[25] = clearInputValue;
-    $[26] = handleInputValueChange;
-    $[27] = inputValue;
-    $[28] = t9;
-    $[29] = t10;
+  if ($[24] !== networkSwitcherProps || $[25] !== showNetworksSidebar) {
+    t10 = showNetworksSidebar ? {
+      ...networkSwitcherProps,
+      classes: networkSwitcherListClasses
+    } : void 0;
+    $[24] = networkSwitcherProps;
+    $[25] = showNetworksSidebar;
+    $[26] = t10;
   } else {
-    t10 = $[29];
+    t10 = $[26];
   }
   let t11;
-  if ($[30] !== acrossMode || $[31] !== appChainId || $[32] !== chainSwitchingDisabled || $[33] !== effectiveInputValue || $[34] !== includeNativeTokenInList || $[35] !== isCrossChain || $[36] !== onSelect || $[37] !== onSelectToken || $[38] !== selectableChains || $[39] !== selectedChainId) {
-    t11 = !isCrossChain ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  if ($[27] !== chainSwitchingDisabled || $[28] !== networkSwitcherProps || $[29] !== showNetworksSidebar) {
+    t11 = !showNetworksSidebar ? {
+      ...networkSwitcherProps,
+      disabled: chainSwitchingDisabled,
+      dropdownProps: {
+        align: "end"
+      }
+    } : void 0;
+    $[27] = chainSwitchingDisabled;
+    $[28] = networkSwitcherProps;
+    $[29] = showNetworksSidebar;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  let t12;
+  if ($[31] !== showNetworksSidebar) {
+    t12 = cn({
+      "pr-[42px] h-[40px] dark:bg-contrast-2": showNetworksSidebar
+    });
+    $[31] = showNetworksSidebar;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== t12) {
+    t13 = {
+      input: t12
+    };
+    $[33] = t12;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  let t14;
+  if ($[35] !== clearInputValue || $[36] !== handleInputValueChange || $[37] !== inputValue || $[38] !== t11 || $[39] !== t13) {
+    t14 = /* @__PURE__ */ jsx(TokenSearch, { value: inputValue, onChange: handleInputValueChange, clearSearch: clearInputValue, compactNetworkSwitcherProps: t11, classes: t13 });
+    $[35] = clearInputValue;
+    $[36] = handleInputValueChange;
+    $[37] = inputValue;
+    $[38] = t11;
+    $[39] = t13;
+    $[40] = t14;
+  } else {
+    t14 = $[40];
+  }
+  let t15;
+  if ($[41] !== acrossMode || $[42] !== appChainId || $[43] !== chainSwitchingDisabled || $[44] !== effectiveInputValue || $[45] !== includeNativeTokenInList || $[46] !== isCrossChain || $[47] !== onSelect || $[48] !== onSelectToken || $[49] !== selectableChains || $[50] !== selectedChainId) {
+    t15 = !isCrossChain ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(TokenCloud, { onSelectToken: onSelect, forcedChainId: selectedChainId, showNetworkIcon: true, withETH: includeNativeTokenInList }),
       /* @__PURE__ */ jsx(RegularTokenList, { tokenFilter: effectiveInputValue, onSelectToken, forcedChainId: selectedChainId, className: "flex-1", withETH: includeNativeTokenInList, singleChainTokensOnly: chainSwitchingDisabled, selectableChains })
     ] }) : /* @__PURE__ */ jsx(AcrossTokenLists, { tokenFilter: effectiveInputValue, onSelect, fromChainId: appChainId, toChainId: selectedChainId, className: "flex-1", mode: acrossMode });
-    $[30] = acrossMode;
-    $[31] = appChainId;
-    $[32] = chainSwitchingDisabled;
-    $[33] = effectiveInputValue;
-    $[34] = includeNativeTokenInList;
-    $[35] = isCrossChain;
-    $[36] = onSelect;
-    $[37] = onSelectToken;
-    $[38] = selectableChains;
-    $[39] = selectedChainId;
-    $[40] = t11;
-  } else {
-    t11 = $[40];
+    $[41] = acrossMode;
+    $[42] = appChainId;
+    $[43] = chainSwitchingDisabled;
+    $[44] = effectiveInputValue;
+    $[45] = includeNativeTokenInList;
+    $[46] = isCrossChain;
+    $[47] = onSelect;
+    $[48] = onSelectToken;
+    $[49] = selectableChains;
+    $[50] = selectedChainId;
+    $[51] = t15;
+  } else {
+    t15 = $[51];
   }
-  let t12;
-  if ($[41] !== t10 || $[42] !== t11) {
-    t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t10,
-      t11
+  let t16;
+  if ($[52] !== headerProps || $[53] !== showNetworksSidebar || $[54] !== t10 || $[55] !== t14 || $[56] !== t15) {
+    t16 = /* @__PURE__ */ jsxs(SelectTokenLayout, { showNetworksSidebar, headerProps, networkSwitcherListProps: t10, children: [
+      t14,
+      t15
+    ] });
+    $[52] = headerProps;
+    $[53] = showNetworksSidebar;
+    $[54] = t10;
+    $[55] = t14;
+    $[56] = t15;
+    $[57] = t16;
+  } else {
+    t16 = $[57];
+  }
+  return t16;
+};
+const SelectTokenLayout = (t0) => {
+  const $ = distExports.c(20);
+  const {
+    showNetworksSidebar,
+    networkSwitcherListProps,
+    headerProps,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== showNetworksSidebar) {
+    t1 = cn({
+      "grid grid-cols-[auto_minmax(0,140px)]": showNetworksSidebar
+    });
+    $[0] = showNetworksSidebar;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== showNetworksSidebar) {
+    t2 = cn({
+      "bg-contrast-8 dark:bg-contrast-1 rounded-xxl": showNetworksSidebar
+    });
+    $[2] = showNetworksSidebar;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== headerProps || $[5] !== showNetworksSidebar) {
+    t3 = showNetworksSidebar && /* @__PURE__ */ jsx(GenericScreenHeader, { ...headerProps });
+    $[4] = headerProps;
+    $[5] = showNetworksSidebar;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== children) {
+    t4 = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-3 h-[448px] pb-6", children });
+    $[7] = children;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+    t5 = /* @__PURE__ */ jsxs("div", { className: t2, children: [
+      t3,
+      t4
     ] });
-    $[41] = t10;
-    $[42] = t11;
-    $[43] = t12;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
   } else {
-    t12 = $[43];
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== networkSwitcherListProps || $[14] !== showNetworksSidebar) {
+    t6 = showNetworksSidebar && networkSwitcherListProps && /* @__PURE__ */ jsx(NetworkSwitcherList, { ...networkSwitcherListProps });
+    $[13] = networkSwitcherListProps;
+    $[14] = showNetworksSidebar;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== t1 || $[17] !== t5 || $[18] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+      t5,
+      t6
+    ] });
+    $[16] = t1;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
   }
-  return t12;
+  return t7;
 };
 
-export { SelectTokenContent, SelectTokenScreen };
+export { SelectTokenScreen };
 //# sourceMappingURL=SelectTokenDialog.js.map