@orderly.network/ui-scaffold 2.1.3 → 2.2.0

package/dist/index.d.mts

@@ -24,6 +24,21 @@ type MainNavItem = {
     children?: MainNavItem[];
     className?: string;
     asChild?: boolean;
+    /**
+     * if true, the item will be shown as a submenu in mobile
+     */
+    isSubMenuInMobile?: boolean;
+    /**
+     * if provided, the item is a submenu in mobile, and this will be the a back nav
+     */
+    subMenuBackNav?: {
+        name: string;
+        href: string;
+    };
+    /**
+     * if true, the item will be shown as a home page in mobile
+     */
+    isHomePageInMobile?: boolean;
 };
 
 type CampaignProps = {
@@ -98,27 +113,32 @@ type MainNavWidgetProps = PropsWithChildren<{
 }> & Pick<MainNavProps, "classNames">;
 declare const MainNavWidget: (props: MainNavWidgetProps) => react_jsx_runtime.JSX.Element;
 
-declare const AccountSummaryWidget: () => react_jsx_runtime.JSX.Element;
+type BottomNavProps$1 = {
+    mainMenus?: BottomNavItem[];
+    current?: string;
+    onRouteChange?: RouterAdapter["onRouteChange"];
+};
+type BottomNavItem = {
+    name: string;
+    href: string;
+    activeIcon: ReactNode;
+    inactiveIcon: ReactNode;
+};
+declare const BottomNavWidget: (props: BottomNavProps$1) => react_jsx_runtime.JSX.Element | null;
 
-declare const ChainMenuWidget: () => react_jsx_runtime.JSX.Element;
+type FooterReturns = {
+    wsStatus: WsNetworkStatus;
+};
 
-type UseChainMenuScriptReturn = ReturnType<typeof useChainMenuScript>;
-declare const useChainMenuScript: () => {
-    isConnected: boolean;
-    currentChainId: number | undefined;
-    wrongNetwork: boolean;
-    disabledConnect: boolean;
-    accountStatus: _orderly_network_types.AccountStatusEnum;
-    networkId: NetworkId;
-    open: boolean;
-    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
-    hide: () => void;
-    onChainChangeBefore: () => void;
-    onChainChangeAfter: () => void;
-    loading: boolean;
+type FooterProps = {
+    telegramUrl?: string;
+    twitterUrl?: string;
+    discordUrl?: string;
+    trailing?: ReactNode;
 };
+declare const FooterWidget: (props: FooterProps) => react_jsx_runtime.JSX.Element;
 
-declare const ChainMenu: (props: UseChainMenuScriptReturn) => react_jsx_runtime.JSX.Element;
+declare const Footer: FC<FooterReturns & FooterProps>;
 
 type SideMenuItem = {
     name: string;
@@ -126,6 +146,7 @@ type SideMenuItem = {
     href?: string;
     disabled?: boolean;
     onClick?: () => void;
+    hide?: boolean;
 };
 type SideBarProps = {
     title?: react__default.ReactNode;
@@ -146,19 +167,92 @@ declare const SideBar: {
 
 declare const SideNavbarWidget: (props?: Partial<SideBarProps>) => react_jsx_runtime.JSX.Element;
 
-type FooterReturns = {
-    wsStatus: WsNetworkStatus;
+type RouteOption = {
+    href: string;
+    name: string;
+    scope?: string;
+    target?: string;
+};
+type RouterAdapter = {
+    onRouteChange: (option: RouteOption) => void;
+    currentPath?: string;
+};
+type ScaffoldState = {
+    routerAdapter?: RouterAdapter;
+    expanded?: boolean;
+    setExpand: (expand: boolean) => void;
+    checkChainSupport: (chainId: number | string) => boolean;
+    topNavbarHeight: number;
+    footerHeight: number;
+    announcementHeight: number;
 };
+declare const ScaffoldContext: react.Context<ScaffoldState>;
+declare const useScaffoldContext: () => ScaffoldState;
 
-type FooterProps = {
-    telegramUrl?: string;
-    twitterUrl?: string;
-    discordUrl?: string;
-    trailing?: React.ReactNode;
+type ScaffoldProps = {
+    /**
+     * Custom left sidebar component,
+     * if provided, the layout will use this component over the default sidebar component
+     */
+    leftSidebar?: react__default.ReactNode;
+    leftSideProps?: SideBarProps;
+    topBar?: react__default.ReactNode;
+    mainNavProps?: MainNavWidgetProps;
+    bottomNavProps?: BottomNavProps$1;
+    footer?: react__default.ReactNode;
+    footerProps?: FooterProps;
+    routerAdapter?: RouterAdapter;
+    classNames?: {
+        root?: string;
+        container?: string;
+        content?: string;
+        body?: string;
+        leftSidebar?: string;
+        topNavbar?: string;
+        footer?: string;
+    };
 };
-declare const FooterWidget: (props: FooterProps) => react_jsx_runtime.JSX.Element;
+declare const Scaffold: (props: PropsWithChildren<ScaffoldProps>) => react_jsx_runtime.JSX.Element;
 
-declare const Footer: FC<FooterReturns & FooterProps>;
+type BottomNavProps = {
+    mainMenus?: BottomNavItem[];
+    current?: string | string[];
+    onRouteChange?: RouterAdapter["onRouteChange"];
+};
+declare const BottomNav: (props: BottomNavProps) => react_jsx_runtime.JSX.Element | null;
+
+type Props = {
+    current?: string;
+    subItems?: {
+        name: string;
+        href: string;
+    }[];
+    routerAdapter?: RouterAdapter;
+} & MainNavWidgetProps;
+declare const MainNavMobile: FC<Props>;
+
+declare const AccountSummaryWidget: () => react_jsx_runtime.JSX.Element;
+
+declare const ChainMenuWidget: () => react_jsx_runtime.JSX.Element;
+
+type UseChainMenuScriptReturn = ReturnType<typeof useChainMenuScript>;
+declare const useChainMenuScript: () => {
+    isConnected: boolean;
+    currentChainId: number | undefined;
+    wrongNetwork: boolean;
+    disabledConnect: boolean;
+    accountStatus: _orderly_network_types.AccountStatusEnum;
+    networkId: NetworkId;
+    open: boolean;
+    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
+    hide: () => void;
+    onChainChangeBefore: () => void;
+    onChainChangeAfter: () => void;
+    loading: boolean;
+    setCurrentChainId: (chainId: number | undefined) => void;
+};
+
+declare const ChainMenu: (props: UseChainMenuScriptReturn) => react_jsx_runtime.JSX.Element;
 
 interface MaintenanceTipInterface {
     tipsContent: string;
@@ -233,66 +327,26 @@ declare const RestrictedInfo: FC<RestrictedInfoProps>;
 type RestrictedInfoWidgetProps = Pick<RestrictedInfoProps, "className">;
 declare const RestrictedInfoWidget: FC<RestrictedInfoWidgetProps>;
 
-type RouteOption = {
-    href: string;
-    name: string;
-    scope?: string;
-    target?: string;
-};
-type RouterAdapter = {
-    onRouteChange: (option: RouteOption) => void;
-    currentPath?: string;
-};
-type ScaffoldState = {
-    routerAdapter?: RouterAdapter;
-    expanded?: boolean;
-    setExpand: (expand: boolean) => void;
-    checkChainSupport: (chainId: number | string) => boolean;
-    topNavbarHeight: number;
-    footerHeight: number;
-    announcementHeight: number;
-};
-declare const ScaffoldContext: react.Context<ScaffoldState>;
-declare const useScaffoldContext: () => ScaffoldState;
-
-type ScaffoldProps = {
-    /**
-     * Custom left sidebar component,
-     * if provided, the layout will use this component over the default sidebar component
-     */
-    leftSidebar?: react__default.ReactNode;
-    leftSideProps?: SideBarProps;
-    topBar?: react__default.ReactNode;
-    mainNavProps?: MainNavWidgetProps;
-    footer?: react__default.ReactNode;
-    footerProps?: FooterProps;
-    routerAdapter?: RouterAdapter;
-    classNames?: {
-        root?: string;
-        container?: string;
-        content?: string;
-        body?: string;
-        leftSidebar?: string;
-        topNavbar?: string;
-        footer?: string;
-    };
-};
-declare const Scaffold: (props: PropsWithChildren<ScaffoldProps>) => react_jsx_runtime.JSX.Element;
-
 type MainLogoProps = {
     src?: string;
     alt?: string;
 };
 declare const MainLogo: FC<MainLogoProps>;
 
-type LanguageSwitcherWidgetProps = Pick<LocaleContextState, "popup">;
+type LanguageSwitcherWidgetProps = Pick<LocaleContextState, "popup"> & {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+};
 declare const LanguageSwitcherWidget: (props: LanguageSwitcherWidgetProps) => react_jsx_runtime.JSX.Element;
 
 type LanguageSwitcherScriptReturn = ReturnType<typeof useLanguageSwitcherScript>;
-type LanguageSwitcherScriptOptions = Pick<LocaleContextState, "popup">;
+type LanguageSwitcherScriptOptions = Pick<LocaleContextState, "popup"> & {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+};
 declare const useLanguageSwitcherScript: (options?: LanguageSwitcherScriptOptions) => {
     open: boolean;
-    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
+    onOpenChange: (open: boolean) => void;
     languages: _orderly_network_i18n.Language[];
     selectedLang: string;
     onLangChange: (lang: string, displayName: string) => Promise<void>;
@@ -307,4 +361,19 @@ declare const useLanguageSwitcherScript: (options?: LanguageSwitcherScriptOption
 type LanguageSwitcherProps = LanguageSwitcherScriptReturn;
 declare const LanguageSwitcher: FC<LanguageSwitcherProps>;
 
-export { AccountMenuWidget, AccountSummaryWidget, Announcement, AnnouncementWidget, type AnnouncementWidgetProps, CampaignPositionEnum, ChainMenu, ChainMenuWidget, Footer, type FooterProps, FooterWidget, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherScriptReturn, LanguageSwitcherWidget, type LanguageSwitcherWidgetProps, MainLogo, MainNavWidget, type MainNavWidgetProps, MaintenanceTipsUI, MaintenanceTipsWidget, RestrictedInfo, RestrictedInfoWidget, type RouteOption, type RouterAdapter, Scaffold, ScaffoldContext, type ScaffoldProps, SideBar, type SideBarProps, type SideMenuItem, SideNavbarWidget, useAnnouncementScript, useLanguageSwitcherScript, useRestrictedInfoScript, useScaffoldContext };
+declare const ScanQRCodeWidget: () => react_jsx_runtime.JSX.Element;
+
+type UseScanQRCodeScriptReturn = ReturnType<typeof useScanQRCodeScript>;
+declare function useScanQRCodeScript(): {
+    open: boolean;
+    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
+    showDialog: () => void;
+    hideDialog: () => void;
+    onScanSuccess: (url: string) => void;
+    showScanTooltip: any;
+};
+
+type ScanQRCodeProps = UseScanQRCodeScriptReturn;
+declare const ScanQRCode: FC<ScanQRCodeProps>;
+
+export { AccountMenuWidget, AccountSummaryWidget, Announcement, AnnouncementWidget, type AnnouncementWidgetProps, BottomNav, type BottomNavProps$1 as BottomNavProps, BottomNavWidget, CampaignPositionEnum, ChainMenu, ChainMenuWidget, Footer, type FooterProps, FooterWidget, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherScriptReturn, LanguageSwitcherWidget, type LanguageSwitcherWidgetProps, MainLogo, MainNavMobile, MainNavWidget, type MainNavWidgetProps, MaintenanceTipsUI, MaintenanceTipsWidget, RestrictedInfo, RestrictedInfoWidget, type RouteOption, type RouterAdapter, Scaffold, ScaffoldContext, type ScaffoldProps, ScanQRCode, ScanQRCodeWidget, SideBar, type SideBarProps, type SideMenuItem, SideNavbarWidget, useAnnouncementScript, useLanguageSwitcherScript, useRestrictedInfoScript, useScaffoldContext, useScanQRCodeScript };

package/dist/index.d.ts

@@ -24,6 +24,21 @@ type MainNavItem = {
     children?: MainNavItem[];
     className?: string;
     asChild?: boolean;
+    /**
+     * if true, the item will be shown as a submenu in mobile
+     */
+    isSubMenuInMobile?: boolean;
+    /**
+     * if provided, the item is a submenu in mobile, and this will be the a back nav
+     */
+    subMenuBackNav?: {
+        name: string;
+        href: string;
+    };
+    /**
+     * if true, the item will be shown as a home page in mobile
+     */
+    isHomePageInMobile?: boolean;
 };
 
 type CampaignProps = {
@@ -98,27 +113,32 @@ type MainNavWidgetProps = PropsWithChildren<{
 }> & Pick<MainNavProps, "classNames">;
 declare const MainNavWidget: (props: MainNavWidgetProps) => react_jsx_runtime.JSX.Element;
 
-declare const AccountSummaryWidget: () => react_jsx_runtime.JSX.Element;
+type BottomNavProps$1 = {
+    mainMenus?: BottomNavItem[];
+    current?: string;
+    onRouteChange?: RouterAdapter["onRouteChange"];
+};
+type BottomNavItem = {
+    name: string;
+    href: string;
+    activeIcon: ReactNode;
+    inactiveIcon: ReactNode;
+};
+declare const BottomNavWidget: (props: BottomNavProps$1) => react_jsx_runtime.JSX.Element | null;
 
-declare const ChainMenuWidget: () => react_jsx_runtime.JSX.Element;
+type FooterReturns = {
+    wsStatus: WsNetworkStatus;
+};
 
-type UseChainMenuScriptReturn = ReturnType<typeof useChainMenuScript>;
-declare const useChainMenuScript: () => {
-    isConnected: boolean;
-    currentChainId: number | undefined;
-    wrongNetwork: boolean;
-    disabledConnect: boolean;
-    accountStatus: _orderly_network_types.AccountStatusEnum;
-    networkId: NetworkId;
-    open: boolean;
-    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
-    hide: () => void;
-    onChainChangeBefore: () => void;
-    onChainChangeAfter: () => void;
-    loading: boolean;
+type FooterProps = {
+    telegramUrl?: string;
+    twitterUrl?: string;
+    discordUrl?: string;
+    trailing?: ReactNode;
 };
+declare const FooterWidget: (props: FooterProps) => react_jsx_runtime.JSX.Element;
 
-declare const ChainMenu: (props: UseChainMenuScriptReturn) => react_jsx_runtime.JSX.Element;
+declare const Footer: FC<FooterReturns & FooterProps>;
 
 type SideMenuItem = {
     name: string;
@@ -126,6 +146,7 @@ type SideMenuItem = {
     href?: string;
     disabled?: boolean;
     onClick?: () => void;
+    hide?: boolean;
 };
 type SideBarProps = {
     title?: react__default.ReactNode;
@@ -146,19 +167,92 @@ declare const SideBar: {
 
 declare const SideNavbarWidget: (props?: Partial<SideBarProps>) => react_jsx_runtime.JSX.Element;
 
-type FooterReturns = {
-    wsStatus: WsNetworkStatus;
+type RouteOption = {
+    href: string;
+    name: string;
+    scope?: string;
+    target?: string;
+};
+type RouterAdapter = {
+    onRouteChange: (option: RouteOption) => void;
+    currentPath?: string;
+};
+type ScaffoldState = {
+    routerAdapter?: RouterAdapter;
+    expanded?: boolean;
+    setExpand: (expand: boolean) => void;
+    checkChainSupport: (chainId: number | string) => boolean;
+    topNavbarHeight: number;
+    footerHeight: number;
+    announcementHeight: number;
 };
+declare const ScaffoldContext: react.Context<ScaffoldState>;
+declare const useScaffoldContext: () => ScaffoldState;
 
-type FooterProps = {
-    telegramUrl?: string;
-    twitterUrl?: string;
-    discordUrl?: string;
-    trailing?: React.ReactNode;
+type ScaffoldProps = {
+    /**
+     * Custom left sidebar component,
+     * if provided, the layout will use this component over the default sidebar component
+     */
+    leftSidebar?: react__default.ReactNode;
+    leftSideProps?: SideBarProps;
+    topBar?: react__default.ReactNode;
+    mainNavProps?: MainNavWidgetProps;
+    bottomNavProps?: BottomNavProps$1;
+    footer?: react__default.ReactNode;
+    footerProps?: FooterProps;
+    routerAdapter?: RouterAdapter;
+    classNames?: {
+        root?: string;
+        container?: string;
+        content?: string;
+        body?: string;
+        leftSidebar?: string;
+        topNavbar?: string;
+        footer?: string;
+    };
 };
-declare const FooterWidget: (props: FooterProps) => react_jsx_runtime.JSX.Element;
+declare const Scaffold: (props: PropsWithChildren<ScaffoldProps>) => react_jsx_runtime.JSX.Element;
 
-declare const Footer: FC<FooterReturns & FooterProps>;
+type BottomNavProps = {
+    mainMenus?: BottomNavItem[];
+    current?: string | string[];
+    onRouteChange?: RouterAdapter["onRouteChange"];
+};
+declare const BottomNav: (props: BottomNavProps) => react_jsx_runtime.JSX.Element | null;
+
+type Props = {
+    current?: string;
+    subItems?: {
+        name: string;
+        href: string;
+    }[];
+    routerAdapter?: RouterAdapter;
+} & MainNavWidgetProps;
+declare const MainNavMobile: FC<Props>;
+
+declare const AccountSummaryWidget: () => react_jsx_runtime.JSX.Element;
+
+declare const ChainMenuWidget: () => react_jsx_runtime.JSX.Element;
+
+type UseChainMenuScriptReturn = ReturnType<typeof useChainMenuScript>;
+declare const useChainMenuScript: () => {
+    isConnected: boolean;
+    currentChainId: number | undefined;
+    wrongNetwork: boolean;
+    disabledConnect: boolean;
+    accountStatus: _orderly_network_types.AccountStatusEnum;
+    networkId: NetworkId;
+    open: boolean;
+    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
+    hide: () => void;
+    onChainChangeBefore: () => void;
+    onChainChangeAfter: () => void;
+    loading: boolean;
+    setCurrentChainId: (chainId: number | undefined) => void;
+};
+
+declare const ChainMenu: (props: UseChainMenuScriptReturn) => react_jsx_runtime.JSX.Element;
 
 interface MaintenanceTipInterface {
     tipsContent: string;
@@ -233,66 +327,26 @@ declare const RestrictedInfo: FC<RestrictedInfoProps>;
 type RestrictedInfoWidgetProps = Pick<RestrictedInfoProps, "className">;
 declare const RestrictedInfoWidget: FC<RestrictedInfoWidgetProps>;
 
-type RouteOption = {
-    href: string;
-    name: string;
-    scope?: string;
-    target?: string;
-};
-type RouterAdapter = {
-    onRouteChange: (option: RouteOption) => void;
-    currentPath?: string;
-};
-type ScaffoldState = {
-    routerAdapter?: RouterAdapter;
-    expanded?: boolean;
-    setExpand: (expand: boolean) => void;
-    checkChainSupport: (chainId: number | string) => boolean;
-    topNavbarHeight: number;
-    footerHeight: number;
-    announcementHeight: number;
-};
-declare const ScaffoldContext: react.Context<ScaffoldState>;
-declare const useScaffoldContext: () => ScaffoldState;
-
-type ScaffoldProps = {
-    /**
-     * Custom left sidebar component,
-     * if provided, the layout will use this component over the default sidebar component
-     */
-    leftSidebar?: react__default.ReactNode;
-    leftSideProps?: SideBarProps;
-    topBar?: react__default.ReactNode;
-    mainNavProps?: MainNavWidgetProps;
-    footer?: react__default.ReactNode;
-    footerProps?: FooterProps;
-    routerAdapter?: RouterAdapter;
-    classNames?: {
-        root?: string;
-        container?: string;
-        content?: string;
-        body?: string;
-        leftSidebar?: string;
-        topNavbar?: string;
-        footer?: string;
-    };
-};
-declare const Scaffold: (props: PropsWithChildren<ScaffoldProps>) => react_jsx_runtime.JSX.Element;
-
 type MainLogoProps = {
     src?: string;
     alt?: string;
 };
 declare const MainLogo: FC<MainLogoProps>;
 
-type LanguageSwitcherWidgetProps = Pick<LocaleContextState, "popup">;
+type LanguageSwitcherWidgetProps = Pick<LocaleContextState, "popup"> & {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+};
 declare const LanguageSwitcherWidget: (props: LanguageSwitcherWidgetProps) => react_jsx_runtime.JSX.Element;
 
 type LanguageSwitcherScriptReturn = ReturnType<typeof useLanguageSwitcherScript>;
-type LanguageSwitcherScriptOptions = Pick<LocaleContextState, "popup">;
+type LanguageSwitcherScriptOptions = Pick<LocaleContextState, "popup"> & {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+};
 declare const useLanguageSwitcherScript: (options?: LanguageSwitcherScriptOptions) => {
     open: boolean;
-    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
+    onOpenChange: (open: boolean) => void;
     languages: _orderly_network_i18n.Language[];
     selectedLang: string;
     onLangChange: (lang: string, displayName: string) => Promise<void>;
@@ -307,4 +361,19 @@ declare const useLanguageSwitcherScript: (options?: LanguageSwitcherScriptOption
 type LanguageSwitcherProps = LanguageSwitcherScriptReturn;
 declare const LanguageSwitcher: FC<LanguageSwitcherProps>;
 
-export { AccountMenuWidget, AccountSummaryWidget, Announcement, AnnouncementWidget, type AnnouncementWidgetProps, CampaignPositionEnum, ChainMenu, ChainMenuWidget, Footer, type FooterProps, FooterWidget, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherScriptReturn, LanguageSwitcherWidget, type LanguageSwitcherWidgetProps, MainLogo, MainNavWidget, type MainNavWidgetProps, MaintenanceTipsUI, MaintenanceTipsWidget, RestrictedInfo, RestrictedInfoWidget, type RouteOption, type RouterAdapter, Scaffold, ScaffoldContext, type ScaffoldProps, SideBar, type SideBarProps, type SideMenuItem, SideNavbarWidget, useAnnouncementScript, useLanguageSwitcherScript, useRestrictedInfoScript, useScaffoldContext };
+declare const ScanQRCodeWidget: () => react_jsx_runtime.JSX.Element;
+
+type UseScanQRCodeScriptReturn = ReturnType<typeof useScanQRCodeScript>;
+declare function useScanQRCodeScript(): {
+    open: boolean;
+    onOpenChange: react.Dispatch<react.SetStateAction<boolean>>;
+    showDialog: () => void;
+    hideDialog: () => void;
+    onScanSuccess: (url: string) => void;
+    showScanTooltip: any;
+};
+
+type ScanQRCodeProps = UseScanQRCodeScriptReturn;
+declare const ScanQRCode: FC<ScanQRCodeProps>;
+
+export { AccountMenuWidget, AccountSummaryWidget, Announcement, AnnouncementWidget, type AnnouncementWidgetProps, BottomNav, type BottomNavProps$1 as BottomNavProps, BottomNavWidget, CampaignPositionEnum, ChainMenu, ChainMenuWidget, Footer, type FooterProps, FooterWidget, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherScriptReturn, LanguageSwitcherWidget, type LanguageSwitcherWidgetProps, MainLogo, MainNavMobile, MainNavWidget, type MainNavWidgetProps, MaintenanceTipsUI, MaintenanceTipsWidget, RestrictedInfo, RestrictedInfoWidget, type RouteOption, type RouterAdapter, Scaffold, ScaffoldContext, type ScaffoldProps, ScanQRCode, ScanQRCodeWidget, SideBar, type SideBarProps, type SideMenuItem, SideNavbarWidget, useAnnouncementScript, useLanguageSwitcherScript, useRestrictedInfoScript, useScaffoldContext, useScanQRCodeScript };