refactor: rename IsMobileUAProvider to LayoutProvider, update all occ…

…urrences

apps/shell/src/providers/app-providers.tsx

@@ -6,8 +6,8 @@ import {
   CosmosProvider,
   ReactQueryProvider,
   Toaster,
-  IsMobileUAProvider,
   WalletProvider,
+  LayoutProvider,
 } from '@haqq/shell-shared';
 import { WalletModals } from '../components/wallet-modals';
 import { createWagmiConfig } from '../config/wagmi-config';
@@ -31,18 +31,18 @@ export function AppProviders({
     : createWagmiConfig(walletConnectProjectId);
 
   return (
-    <IsMobileUAProvider isMobileUA={isMobileUA}>
-      <WagmiProvider config={actualWagmiConfig} initialState={initialState}>
-        <ReactQueryProvider withDevtools dehydratedState={dehydratedState}>
-          <CosmosProvider>
-            <WalletProvider>
+    <WagmiProvider config={actualWagmiConfig} initialState={initialState}>
+      <ReactQueryProvider withDevtools dehydratedState={dehydratedState}>
+        <CosmosProvider>
+          <WalletProvider>
+            <LayoutProvider isMobileUA={isMobileUA}>
               {children}
               <Toaster />
-              <WalletModals />
-            </WalletProvider>
-          </CosmosProvider>
-        </ReactQueryProvider>
-      </WagmiProvider>
-    </IsMobileUAProvider>
+            </LayoutProvider>
+            <WalletModals />
+          </WalletProvider>
+        </CosmosProvider>
+      </ReactQueryProvider>
+    </WagmiProvider>
   );
 }

libs/shared/src/index.ts

@@ -8,7 +8,7 @@ export * from './providers/cosmos-provider';
 export * from './providers/react-query-provider';
 export * from './providers/toaster';
 export * from './providers/wallet-provider';
-export * from './providers/is-mobile-ua-provider';
+export * from './providers/layout-provider';
 
 export * from './hooks/use-account-info/use-account-info';
 export * from './hooks/use-address/use-address';

libs/shared/src/providers/layout-provider.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+export interface ILayoutContext {
+  isMobileUA: boolean;
+}
+
+const LayoutContext = createContext<ILayoutContext | null>(null);
+
+export function useLayout() {
+  const layoutContext = useContext(LayoutContext);
+
+  if (!layoutContext) {
+    throw new Error(
+      'useLayout should be used only from child of LayoutProvider',
+    );
+  }
+
+  return layoutContext;
+}
+
+export function LayoutProvider({
+  isMobileUA,
+  children,
+}: PropsWithChildren<ILayoutContext>) {
+  return (
+    <LayoutContext.Provider value={{ isMobileUA }}>
+      {children}
+    </LayoutContext.Provider>
+  );
+}

libs/ui-kit/src/lib/header-mobile.tsx

@@ -11,7 +11,7 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useScrollLock } from 'usehooks-ts';
-import { useIsMobileUA } from '@haqq/shell-shared';
+import { useLayout } from '@haqq/shell-shared';
 import { BurgerButton } from './burger-button';
 import { Container } from './container';
 import { HeaderNavLink } from './header-nav-link';
@@ -143,7 +143,7 @@ function AnimatedOrNot({
   baseHeaderStyles,
   children,
 }: PropsWithChildren<{ baseHeaderStyles: string }>) {
-  const isMobileUA = useIsMobileUA();
+  const { isMobileUA } = useLayout();
 
   return isMobileUA ? (
     <StaticHeader baseHeaderStyles={baseHeaderStyles}>{children}</StaticHeader>