@lifi/widget 3.4.0-beta.5 → 3.4.0

package/components/AppContainer.tsx

@@ -1,60 +1,105 @@
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
+import {
+  maxHeaderHeight,
+  minHeaderHeight,
+} from '../components/Header/Header.js';
+import { defaultMaxHeight } from '../config/constants.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { WidgetVariant } from '../types/widget.js';
 import { ElementId, createElementId } from '../utils/elements.js';
 
-export const maxHeight = 682;
-
 export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ variant }) => ({
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'start',
   flex: 1,
-  height: variant === 'drawer' ? 'none' : maxHeight,
+  height:
+    variant === 'drawer'
+      ? 'none'
+      : theme.container?.display === 'flex'
+        ? '100%'
+        : theme.container?.maxHeight
+          ? 'auto'
+          : theme.container?.height || 'auto',
 }));
 
 export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
-  position: 'relative',
-  boxSizing: 'content-box',
-  width: '100%',
-  minWidth: theme.breakpoints.values.xs,
-  maxWidth: theme.breakpoints.values.sm,
-  maxHeight: variant === 'drawer' ? 'none' : maxHeight,
-  background: theme.palette.background.default,
-  overflow: 'auto',
-  flex: 1,
-  zIndex: 0,
-  ...theme.container,
-}));
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => {
+  const container = { ...theme.container };
+
+  if (variant === 'drawer') {
+    container.height = '100%';
+  }
+
+  return {
+    position: 'relative',
+    boxSizing: 'content-box',
+    width: '100%',
+    minWidth: theme.breakpoints.values.xs,
+    maxWidth: theme.breakpoints.values.sm,
+    background: theme.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    zIndex: 0,
+    ...container,
+    maxHeight:
+      variant === 'drawer'
+        ? 'none'
+        : theme.container?.display === 'flex' && !theme.container?.height
+          ? '100%'
+          : theme.container?.maxHeight
+            ? theme.container?.maxHeight
+            : theme.container?.height || defaultMaxHeight,
+  };
+});
+
+interface CssBaselineContainerProps {
+  variant?: WidgetVariant;
+  paddingTopAdjustment: number;
+}
 
 const CssBaselineContainer = styled(ScopedCssBaseline, {
-  shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ variant }) => ({
+  shouldForwardProp: (prop) =>
+    !['variant', 'paddingTopAdjustment'].includes(prop as string),
+})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => ({
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
   overflowX: 'clip',
   margin: 0,
   width: '100%',
-  maxHeight: variant === 'drawer' ? 'none' : maxHeight,
+  maxHeight:
+    variant === 'drawer' || theme.container?.display === 'flex'
+      ? 'none'
+      : theme.container?.maxHeight
+        ? theme.container?.maxHeight
+        : theme.container?.height || defaultMaxHeight,
   overflowY: 'auto',
-  height: '100%',
+  height: theme.container?.display === 'flex' ? 'auto' : '100%',
+  paddingTop: paddingTopAdjustment,
 }));
 
-export const FlexContainer = styled(Container)({
+export const FlexContainer = styled(Container)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-});
+}));
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   // const ref = useRef<HTMLDivElement>(null);
-  const { variant, elementId } = useWidgetConfig();
+  const { variant, elementId, hiddenUI, theme } = useWidgetConfig();
+
+  const positionFixedAdjustment =
+    theme?.header?.position === 'fixed'
+      ? hiddenUI?.includes('walletMenu')
+        ? minHeaderHeight
+        : maxHeaderHeight
+      : 0;
+
   return (
     <RelativeContainer
       variant={variant}
@@ -64,6 +109,7 @@ export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
         id={createElementId(ElementId.ScrollableContainer, elementId)}
         variant={variant}
         enableColorScheme
+        paddingTopAdjustment={positionFixedAdjustment}
         // ref={ref}
       >
         <FlexContainer disableGutters>{children}</FlexContainer>

package/components/ChainSelect/useChainSelect.ts

@@ -2,16 +2,18 @@ import type { EVMChain } from '@lifi/sdk';
 import { useChains } from '../../hooks/useChains.js';
 import { useSwapOnly } from '../../hooks/useSwapOnly.js';
 import { useToAddressReset } from '../../hooks/useToAddressReset.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useChainOrder } from '../../stores/chains/useChainOrder.js';
 import type { FormType } from '../../stores/form/types.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldController } from '../../stores/form/useFieldController.js';
+import type { DisabledUI } from '../../types/widget.js';
 
 export const useChainSelect = (formType: FormType) => {
+  const { disabledUI } = useWidgetConfig();
   const chainKey = FormKeyHelper.getChainKey(formType);
   const { onChange } = useFieldController({ name: chainKey });
-
   const { setFieldValue, getFieldValues } = useFieldActions();
   const { chains, isLoading, getChainById } = useChains(formType);
   const [chainOrder, setChainOrder] = useChainOrder(formType);
@@ -35,8 +37,14 @@ export const useChainSelect = (formType: FormType) => {
         isTouched: true,
       });
     }
-    setFieldValue(FormKeyHelper.getTokenKey(formType), '');
-    setFieldValue(FormKeyHelper.getAmountKey(formType), '');
+    const tokenKey = FormKeyHelper.getTokenKey(formType);
+    if (!disabledUI?.includes(tokenKey as DisabledUI)) {
+      setFieldValue(tokenKey, '');
+    }
+    const amountKey = FormKeyHelper.getAmountKey(formType);
+    if (!disabledUI?.includes(amountKey as DisabledUI)) {
+      setFieldValue(amountKey, '');
+    }
     setFieldValue('tokenSearchFilter', '');
 
     const [toChainId] = getFieldValues('toChain');

package/components/Header/Header.style.ts

@@ -20,17 +20,34 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
 
 export const Container = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'sticky',
-})<{ sticky?: boolean }>(({ theme, sticky }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  backgroundColor: theme.palette.background.default,
-  backdropFilter: 'blur(12px)',
-  position: sticky ? 'sticky' : 'relative',
-  top: 0,
-  zIndex: 1200,
-  gap: theme.spacing(0.5),
-  padding: theme.spacing(1.5, 3, 1.5, 3),
-}));
+})<{ sticky?: boolean }>(({ theme, sticky }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    position: sticky ? 'sticky' : 'relative',
+    top: 0,
+    zIndex: 1200,
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1.5, 3, 1.5, 3),
+    overflow: 'auto',
+    ...theme.header,
+    ...(theme.header?.position === 'fixed'
+      ? {
+          minWidth: theme.breakpoints.values.xs,
+          maxWidth: theme.breakpoints.values.sm,
+          width: '100%',
+        }
+      : {}),
+  };
+});
+
+export const ContainerPlaceholder = styled(Box)(({ theme }) => {
+  return {
+    ...(theme.header?.position === 'fixed' ? {} : { display: 'none' }),
+  };
+});
 
 export const WalletButton = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'subvariant',

package/components/Header/Header.tsx

@@ -1,19 +1,30 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { ElementId, createElementId } from '../../utils/elements.js';
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
 import { Container } from './Header.style.js';
 import { NavigationHeader } from './NavigationHeader.js';
 import { WalletHeader } from './WalletHeader.js';
 
+export const minHeaderHeight = 64;
+export const maxHeaderHeight = 108;
+
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();
   const elementId = useDefaultElementId();
+  const { hiddenUI } = useWidgetConfig();
+
+  const headerHeight = hiddenUI?.includes('walletMenu')
+    ? minHeaderHeight
+    : maxHeaderHeight;
+
   return (
     <Container
       id={createElementId(ElementId.Header, elementId)}
       sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
+      maxHeight={headerHeight}
     >
       {children}
     </Container>

package/components/Routes/RoutesExpanded.style.ts

@@ -1,9 +1,20 @@
-import { Box, ScopedCssBaseline, styled } from '@mui/material';
-import { maxHeight } from '../AppContainer.js';
+import type { ScopedCssBaselineProps } from '@mui/material';
+import { Box, Collapse, Grow, ScopedCssBaseline, styled } from '@mui/material';
+import { defaultMaxHeight } from '../../config/constants.js';
 
 export const CollapseContainer = styled(Box)(({ theme }) => ({
-  height: maxHeight,
   zIndex: 0,
+  ...(theme.container.display === 'flex'
+    ? { display: 'flex', maxHeight: '100%' }
+    : { height: 'auto' }),
+}));
+
+export const RoutesExpandedCollapse = styled(Collapse)(({ theme }) => ({
+  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
+}));
+
+export const RouteTopLevelGrow = styled(Grow)(({ theme }) => ({
+  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
 }));
 
 export const ScrollableContainer = styled(Box)({
@@ -15,14 +26,28 @@ export const ScrollableContainer = styled(Box)({
   flexDirection: 'column',
 });
 
-export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
+interface ContainerProps extends ScopedCssBaselineProps {
+  minimumHeight: boolean;
+}
+
+export const Container = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
+})<ContainerProps>(({ theme, minimumHeight }) => ({
   backgroundColor: theme.palette.background.default,
   overflow: 'auto',
   width: 436,
-  maxHeight,
   marginLeft: theme.spacing(3),
   display: 'flex',
   flexDirection: 'column',
+  ...(theme.container?.display !== 'flex'
+    ? {
+        maxHeight:
+          theme.container?.maxHeight ??
+          theme.container?.height ??
+          defaultMaxHeight,
+        ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
+      }
+    : { height: minimumHeight ? 'auto' : '100%' }),
   ...theme.container,
 }));
 

package/components/Routes/RoutesExpanded.tsx

@@ -22,6 +22,8 @@ import {
   CollapseContainer,
   Container,
   Header,
+  RouteTopLevelGrow,
+  RoutesExpandedCollapse,
   ScrollableContainer,
 } from './RoutesExpanded.style.js';
 
@@ -45,11 +47,16 @@ export const RoutesExpanded = () => {
   return (
     <CollapseContainer>
       <Collapse timeout={timeout} in={match} orientation="horizontal">
-        <Grow timeout={timeout} in={match} mountOnEnter unmountOnExit>
+        <RouteTopLevelGrow
+          timeout={timeout}
+          in={match}
+          mountOnEnter
+          unmountOnExit
+        >
           <div>
             <RoutesExpandedElement />
           </div>
-        </Grow>
+        </RouteTopLevelGrow>
       </Collapse>
     </CollapseContainer>
   );
@@ -112,14 +119,14 @@ export const RoutesExpandedElement = () => {
   }, [emitter, expanded]);
 
   return (
-    <Collapse
+    <RoutesExpandedCollapse
       timeout={timeout.enter}
       in={expanded}
       orientation="horizontal"
       onExited={onExit}
     >
       <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
-        <Container enableColorScheme>
+        <Container enableColorScheme minimumHeight={isLoading}>
           <ScrollableContainer>
             <Header>
               <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
@@ -163,6 +170,6 @@ export const RoutesExpandedElement = () => {
           </ScrollableContainer>
         </Container>
       </Grow>
-    </Collapse>
+    </RoutesExpandedCollapse>
   );
 };

package/components/TokenList/TokenList.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
-import { useRef } from 'react';
 import { useAccount } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
@@ -17,10 +16,10 @@ import { filteredTokensComparator } from './utils.js';
 
 export const TokenList: FC<TokenListProps> = ({
   formType,
+  parentRef,
   height,
   onClick,
 }) => {
-  const parentRef = useRef<HTMLUListElement | null>(null);
   const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const [tokenSearchFilter]: string[] = useDebouncedWatch(
     320,

package/components/TokenList/types.ts

@@ -5,6 +5,7 @@ import type { FormType } from '../../stores/form/types.js';
 import type { TokenAmount } from '../../types/token.js';
 
 export interface TokenListProps {
+  parentRef: MutableRefObject<HTMLElement | null>;
   formType: FormType;
   height: number;
   onClick?(): void;

package/components/TokenList/useTokenSelect.ts

@@ -7,9 +7,10 @@ import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldController } from '../../stores/form/useFieldController.js';
 import { WidgetEvent } from '../../types/events.js';
+import type { DisabledUI } from '../../types/widget.js';
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
-  const { subvariant } = useWidgetConfig();
+  const { subvariant, disabledUI } = useWidgetConfig();
   const emitter = useWidgetEvents();
   const { setFieldValue, getFieldValues } = useFieldActions();
   const tokenKey = FormKeyHelper.getTokenKey(formType);
@@ -26,12 +27,16 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
         isDirty: true,
         isTouched: true,
       });
-      setFieldValue(FormKeyHelper.getAmountKey(formType), '');
+      const amountKey = FormKeyHelper.getAmountKey(formType);
+      if (!disabledUI?.includes(amountKey as DisabledUI)) {
+        setFieldValue(amountKey, '');
+      }
       const oppositeFormType = formType === 'from' ? 'to' : 'from';
       const [selectedOppositeToken, selectedOppositeChainId] = getFieldValues(
         FormKeyHelper.getTokenKey(oppositeFormType),
         FormKeyHelper.getChainKey(oppositeFormType),
       );
+      // TODO: remove when we enable same chain/token transfers
       if (
         selectedOppositeToken === tokenAddress &&
         selectedOppositeChainId === selectedChainId &&
@@ -73,6 +78,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
     },
     [
       chainOrderStore,
+      disabledUI,
       emitter,
       formType,
       getFieldValues,

package/config/coinbase.ts

@@ -0,0 +1,7 @@
+import type { CoinbaseWalletParameters } from 'wagmi/connectors';
+import { LiFiToolLogo } from '../icons/lifi.js';
+
+export const defaultCoinbaseConfig: CoinbaseWalletParameters = {
+  appName: 'LI.FI',
+  appLogoUrl: LiFiToolLogo,
+};

package/config/constants.ts

@@ -0,0 +1 @@
+export const defaultMaxHeight = 682;

package/config/metaMask.ts

@@ -0,0 +1,13 @@
+import type { MetaMaskParameters } from 'wagmi/connectors';
+import { LiFiToolLogo } from '../icons/lifi.js';
+
+export const defaultMetaMaskConfig: MetaMaskParameters = {
+  dappMetadata: {
+    name: 'LI.FI',
+    url:
+      typeof window !== 'undefined'
+        ? (window as any)?.location.href
+        : 'https://li.fi/',
+    base64Icon: LiFiToolLogo,
+  },
+};

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.4.0-beta.5';
+export const version = '3.4.0';

package/config/walletConnect.ts

@@ -1 +1,5 @@
-export const defaultWalletConnectProjectId = '5432e3507d41270bee46b7b85bbc2ef8';
+import type { WalletConnectParameters } from 'wagmi/connectors';
+
+export const defaultWalletConnectConfig: WalletConnectParameters = {
+  projectId: '5432e3507d41270bee46b7b85bbc2ef8',
+};

package/hooks/useSetContentHeight.ts

@@ -0,0 +1,24 @@
+import type { MutableRefObject } from 'react';
+import { useLayoutEffect } from 'react';
+import { useDefaultElementId } from './useDefaultElementId.js';
+import { getScrollableContainer } from './useScrollableContainer.js';
+
+export const useSetContentHeight = (
+  ref: MutableRefObject<HTMLElement | undefined>,
+) => {
+  const elementId = useDefaultElementId();
+  useLayoutEffect(() => {
+    const scrollableContainer = getScrollableContainer(elementId);
+    if (
+      !scrollableContainer ||
+      !ref.current ||
+      ref.current?.clientHeight <= scrollableContainer?.clientHeight
+    ) {
+      return;
+    }
+    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+    return () => {
+      scrollableContainer.style.removeProperty('height');
+    };
+  }, [elementId, ref]);
+};

package/hooks/useWallets.ts

@@ -0,0 +1,147 @@
+import { ChainType } from '@lifi/sdk';
+import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
+import {
+  createCoinbaseConnector,
+  createMetaMaskConnector,
+  createWalletConnectConnector,
+  getWalletPriority,
+  isWalletInstalled,
+} from '@lifi/wallet-management';
+import type { Theme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+import type { Wallet } from '@solana/wallet-adapter-react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import type { Connector } from 'wagmi';
+import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
+import { defaultCoinbaseConfig } from '../config/coinbase.js';
+import { defaultMetaMaskConfig } from '../config/metaMask.js';
+import { defaultWalletConnectConfig } from '../config/walletConnect.js';
+import type { WidgetChains, WidgetWalletConfig } from '../types/widget.js';
+import { isItemAllowed } from '../utils/item.js';
+
+export const useWallets = (
+  walletConfig?: WidgetWalletConfig,
+  chains?: WidgetChains,
+) => {
+  const account = useWagmiAccount();
+  const { connectors } = useConnect();
+  const { wallets: solanaWallets } = useWallet();
+
+  const isDesktopView = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.up('sm'),
+  );
+
+  const wallets = useMemo(() => {
+    const evmConnectors: (CreateConnectorFnExtended | Connector)[] =
+      Array.from(connectors);
+    if (
+      !connectors.some((connector) =>
+        connector.id.toLowerCase().includes('walletconnect'),
+      )
+    ) {
+      evmConnectors.unshift(
+        createWalletConnectConnector(
+          walletConfig?.walletConnect ?? defaultWalletConnectConfig,
+        ),
+      );
+    }
+    if (
+      !connectors.some((connector) =>
+        connector.id.toLowerCase().includes('coinbase'),
+      ) &&
+      !isWalletInstalled('coinbase')
+    ) {
+      evmConnectors.unshift(
+        createCoinbaseConnector(
+          walletConfig?.coinbase ?? defaultCoinbaseConfig,
+        ),
+      );
+    }
+    if (
+      !connectors.some((connector) =>
+        connector.id.toLowerCase().includes('metamask'),
+      ) &&
+      !isWalletInstalled('metaMask')
+    ) {
+      evmConnectors.unshift(
+        createMetaMaskConnector(
+          walletConfig?.metaMask ?? defaultMetaMaskConfig,
+        ),
+      );
+    }
+    const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
+      ? evmConnectors.filter(
+          (connector) =>
+            isWalletInstalled(connector.id!) &&
+            // We should not show already connected connectors
+            account.connector?.id !== connector.id,
+        )
+      : [];
+    const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
+      ? evmConnectors.filter((connector) => !isWalletInstalled(connector.id!))
+      : [];
+    const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState === WalletReadyState.Installed &&
+            // We should not show already connected connectors
+            !connector.adapter.connected,
+        )
+      : [];
+    const svmNotDetected = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState !== WalletReadyState.Installed,
+        )
+      : [];
+
+    const installedWallets = [...evmInstalled, ...svmInstalled].sort(
+      walletComparator,
+    );
+
+    if (isDesktopView) {
+      const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(
+        walletComparator,
+      );
+      installedWallets.push(...notDetectedWallets);
+    }
+
+    return installedWallets;
+  }, [
+    account.connector?.id,
+    chains?.types,
+    connectors,
+    isDesktopView,
+    solanaWallets,
+    walletConfig?.coinbase,
+    walletConfig?.metaMask,
+    walletConfig?.walletConnect,
+  ]);
+
+  return wallets;
+};
+
+export const walletComparator = (
+  a: CreateConnectorFnExtended | Connector | Wallet,
+  b: CreateConnectorFnExtended | Connector | Wallet,
+) => {
+  let aId = (a as Connector).id || (a as Wallet).adapter?.name;
+  let bId = (b as Connector).id || (b as Wallet).adapter?.name;
+
+  const priorityA = getWalletPriority(aId);
+  const priorityB = getWalletPriority(bId);
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  if (aId < bId) {
+    return -1;
+  }
+  if (aId > bId) {
+    return 1;
+  }
+  return 0;
+};

package/i18n/en.json

@@ -53,6 +53,7 @@
     "bookmarkedWallets": "Bookmarked wallets",
     "bridge": "Bridge",
     "checkout": "Checkout",
+    "deposit": "Deposit",
     "exchange": "Exchange",
     "from": "Exchange from",
     "gas": "Gas",

package/index.ts

@@ -6,9 +6,11 @@ export * from './components/ContractComponent/NFT/NFT.js';
 export * from './components/ContractComponent/NFT/NFTBase.js';
 export * from './components/ContractComponent/NFT/types.js';
 export * from './components/Skeleton/WidgetSkeleton.js';
+export { defaultMaxHeight } from './config/constants.js';
 export * from './config/version.js';
 export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';
+export { useWallets, walletComparator } from './hooks/useWallets.js';
 export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
 export * from './stores/form/types.js';
 export { useFieldActions } from './stores/form/useFieldActions.js';