fix(connect-modal): pass through custom class names

packages/react/stories/ConnectModal.stories.tsx

@@ -30,6 +30,7 @@ function convert(ws: typeof wallets) {
     badge: wallet.extends ? WalletPluginSystem[wallet.extends].text : undefined,
     btmLogo: wallet.extends ? wallet.logo : undefined,
   }));
+  // .slice(0, 2);
 }
 
 export const Primary: Story = {

src/index.ts

@@ -93,13 +93,11 @@ export type { AssetListProps } from "./ui/asset-list/asset-list.types";
 export { default as CrossChain } from "./ui/cross-chain";
 export type {
   CrossChainProps,
-  CrossChainHeaderProps,
   CrossChainListItemProps,
 } from "./ui/cross-chain/cross-chain.types";
 export { default as SingleChain } from "./ui/single-chain";
 export type {
   SingleChainProps,
-  SingleChainHeaderProps,
   SingleChainListItemProps,
 } from "./ui/single-chain/single-chain.types";
 export { default as OverviewTransfer } from "./ui/overview-transfer";

src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts

@@ -11,12 +11,14 @@ export const walletList = style({
   width: "100%",
   overflow: "auto",
   scrollbarWidth: "none",
-  paddingBottom: themeVars.space[8],
   paddingTop: themeVars.space[1],
   selectors: {
     "&::-webkit-scrollbar": {
       display: "none" /* Safari and Chrome */,
     },
+    "&[data-has-list-wallets='true']": {
+      paddingBottom: themeVars.space[8],
+    }
   },
 });
 
@@ -30,7 +32,6 @@ export const squareWallets = style({
 });
 
 export const listWallets = style({
-  display: "grid",
   rowGap: themeVars.space[2],
   gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
   paddingBottom: themeVars.space[4],

src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx

@@ -11,6 +11,7 @@ import {
 import anime from "animejs";
 import type { AnimeInstance } from "animejs";
 import clx from "clsx";
+import Box from "../box";
 import WalletButton from "../connect-modal-wallet-button";
 import {
   walletList,
@@ -44,6 +45,9 @@ export default function ConnectModalWalletList(
         await exec();
       })();
     },
+    getListShapeWallets() {
+      return props.wallets.filter((w) => w.shape === "list");
+    },
   });
 
   onMount(() => {
@@ -115,7 +119,11 @@ export default function ConnectModalWalletList(
 
   return (
     <div className={clx(container, props.className)}>
-      <div ref={measureRef} className={walletList}>
+      <div
+        ref={measureRef}
+        className={walletList}
+        data-has-list-wallets={state.getListShapeWallets().length > 0}
+      >
         <Show
           when={props.wallets
             .slice(0, 2)
@@ -126,7 +134,7 @@ export default function ConnectModalWalletList(
             <For each={props.wallets.slice(0, 2)}>
               {(wallet, index) => (
                 <WalletButton
-                  key={wallet.name}
+                  key={`${wallet.name}-${index}`}
                   variant="square"
                   name={wallet.prettyName ?? wallet.name}
                   logo={wallet.logo}
@@ -141,11 +149,14 @@ export default function ConnectModalWalletList(
           </div>
         </Show>
 
-        <div className={listWallets}>
-          <For each={props.wallets.filter((w) => w.shape === "list")}>
+        <Box
+          display={state.getListShapeWallets().length === 0 ? "none" : "grid"}
+          className={listWallets}
+        >
+          <For each={state.getListShapeWallets()}>
             {(wallet, index) => (
               <WalletButton
-                key={wallet.name}
+                key={`${wallet.name}-${index}`}
                 variant="list"
                 name={wallet.prettyName ?? wallet.name}
                 logo={wallet.logo}
@@ -158,7 +169,7 @@ export default function ConnectModalWalletList(
               />
             )}
           </For>
-        </div>
+        </Box>
       </div>
 
       <div ref={shadowRef} className={bottomShadow[state.theme]} />

src/ui/connect-modal/connect-modal.css.ts

@@ -37,7 +37,7 @@ export const modalContent = styleVariants({
 });
 
 export const modalAnimateContainer = style({
-  minHeight: themeVars.space[30],
+  minHeight: `clamp(100%, ${themeVars.space[30]}px, ${themeVars.space[30]}px)`,
 });
 
 export const modalChildren = style({

src/ui/connect-modal/connect-modal.lite.tsx

@@ -5,6 +5,7 @@ import {
   useMetadata,
   useRef,
 } from "@builder.io/mitosis";
+import clx from "clsx";
 import AnimateLayout from "../animate-layout";
 import { store } from "../../models/store";
 import type { ThemeVariant } from "../../models/system.model";
@@ -58,11 +59,15 @@ export default function ConnectModal(props: ConnectModalProps) {
       onClose={() => props.onClose?.()}
       header={props.header}
       className={props.modalContainerClassName}
-      contentClassName={modalContent[state.theme]}
-      contentStyles={state.overrideManager?.applyOverrides(
-        connectModalOverrides.name
+      contentClassName={clx(
+        modalContent[state.theme],
+        props.modalContentClassName
       )}
-      childrenClassName={modalChildren}
+      contentStyles={{
+        ...state.overrideManager?.applyOverrides(connectModalOverrides.name),
+        ...props.modalContentStyles,
+      }}
+      childrenClassName={clx(modalChildren, props.modalChildrenClassName)}
     >
       <AnimateLayout className={modalAnimateContainer}>
         {props.children}

src/ui/connect-modal/connect-modal.types.tsx

@@ -8,4 +8,7 @@ export interface ConnectModalProps extends BaseComponentProps {
   children?: BaseComponentProps["children"];
   className?: string;
   modalContainerClassName?: string;
+  modalContentClassName?: string;
+  modalChildrenClassName?: string;
+  modalContentStyles?: any;
 }