Refactor hooks and providers for additional simplification

packages/ui-components/src/components/Badges/BadgePopupModal.tsx

@@ -25,10 +25,10 @@ import React, {useState} from 'react';
 import config from '@unstoppabledomains/config';
 
 import ComposeMessage from '../../components/Badges/ComposeMessage';
-import useUnstoppableMessaging from '../../components/Chat/hooks/useUnstoppableMessaging';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import {DomainPreview} from '../../components/Domain/DomainPreview';
 import Link from '../../components/Link';
+import useUnstoppableMessaging from '../../hooks/useUnstoppableMessaging';
 import useTranslationContext from '../../lib/i18n';
 import type {Web3Dependencies} from '../../lib/types/web3';
 import useStyles from '../../styles/components/badgePopupModalStyles';

packages/ui-components/src/components/Chat/IncomingSnackbar.tsx

@@ -8,9 +8,9 @@ import React, {useEffect, useState} from 'react';
 
 import {makeStyles} from '@unstoppabledomains/ui-kit/styles';
 
+import {useIsTabActive} from '../../hooks/useIsTabActive';
 import {notifyError} from '../../lib/error';
 import useTranslationContext from '../../lib/i18n';
-import {useIsTabActive} from './hooks/useIsTabActive';
 import {getAddressMetadata} from './protocol/resolution';
 
 const useStyles = makeStyles<{variant: SnackbarVariant}>()(

packages/ui-components/src/components/Chat/UnstoppableMessaging.tsx

@@ -24,8 +24,9 @@ import {
   getReverseResolution,
 } from '../../actions/domainActions';
 import {isAddressSpam, joinBadgeGroupChat} from '../../actions/messageActions';
-import useUnstoppableMessaging from '../../components/Chat/hooks/useUnstoppableMessaging';
 import {AccessWalletModal} from '../../components/Wallet/AccessWallet';
+import {parsePartnerMetadata} from '../../hooks/useFetchNotification';
+import useUnstoppableMessaging from '../../hooks/useUnstoppableMessaging';
 import useWeb3Context from '../../hooks/useWeb3Context';
 import {isDomainValidForManagement} from '../../lib';
 import {notifyError} from '../../lib/error';
@@ -36,7 +37,6 @@ import type {Web3Dependencies} from '../../lib/types/web3';
 import {Web3Context} from '../../providers/Web3ContextProvider';
 import {IncomingChatSnackbar, IncomingSnackbar} from './IncomingSnackbar';
 import SupportBubble from './SupportBubble';
-import {parsePartnerMetadata} from './hooks/useFetchNotification';
 import ChatModal from './modal/ChatModal';
 import SetupModal from './modal/SetupModal';
 import {acceptGroupInvite, getPushUser} from './protocol/push';

packages/ui-components/src/components/Chat/index.ts

@@ -1,5 +1,3 @@
 export * from './SupportBubble';
 export * from './UnstoppableMessaging';
-export * from './hooks';
 export * from './types';
-export {default as UnstoppableMessagingProvider} from './provider/UnstoppableMessagingProvider';

packages/ui-components/src/components/Chat/modal/ChatModal.tsx

@@ -39,13 +39,13 @@ import {
   getDomainSignatureExpiryKey,
   getDomainSignatureValueKey,
 } from '../../../components/Wallet/ProfileManager';
+import useFetchNotifications from '../../../hooks/useFetchNotification';
 import {isDomainValidForManagement} from '../../../lib';
 import {notifyError} from '../../../lib/error';
 import useTranslationContext from '../../../lib/i18n';
 import type {SerializedCryptoWalletBadge} from '../../../lib/types/badge';
 import type {SerializedUserDomainProfileData} from '../../../lib/types/domain';
 import type {Web3Dependencies} from '../../../lib/types/web3';
-import useFetchNotifications from '../hooks/useFetchNotification';
 import {registerClientTopics} from '../protocol/registration';
 import {getAddressMetadata} from '../protocol/resolution';
 import type {ConversationMeta} from '../protocol/xmtp';

packages/ui-components/src/components/Domain/DomainPreview.tsx

@@ -15,7 +15,7 @@ import {makeStyles} from '@unstoppabledomains/ui-kit/styles';
 
 import {getProfileData} from '../../actions';
 import {useFeatureFlags} from '../../actions/featureFlagActions';
-import useUnstoppableMessaging from '../../components/Chat/hooks/useUnstoppableMessaging';
+import useUnstoppableMessaging from '../../hooks/useUnstoppableMessaging';
 import {splitDomain} from '../../lib/domain/format';
 import getImageUrl from '../../lib/domain/getImageUrl';
 import {notifyError} from '../../lib/error';

packages/ui-components/src/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from './useEnsDomainStatus';
-export {default as usePrevious} from './usePrevious';
 export {default as useTokenGallery} from './useTokenGallery';
+export {default as useUnstoppableMessaging} from './useUnstoppableMessaging';
 export {default as useWeb3Context} from './useWeb3Context';

packages/ui-components/src/components/Chat/hooks/useFetchNotification.ts → packages/ui-components/src/hooks/useFetchNotification.ts

@@ -4,7 +4,7 @@ import {useCallback, useState} from 'react';
 
 import config from '@unstoppabledomains/config';
 
-import type {PushNotification} from '../types';
+import type {PushNotification} from '../components/Chat/types';
 
 interface fetchNotification {
   page: number;

packages/ui-components/src/components/Chat/hooks/useUnstoppableMessaging.tsx → packages/ui-components/src/hooks/useUnstoppableMessaging.tsx

@@ -1,6 +1,6 @@
 import {useContext} from 'react';
 
-import {UnstoppableMessagingContext} from '../../../components/Chat/provider/UnstoppableMessagingProvider';
+import {UnstoppableMessagingContext} from '../providers/UnstoppableMessagingProvider';
 
 const useUnstoppableMessaging = () => {
   const {

packages/ui-components/src/providers/BaseProvider.tsx

@@ -0,0 +1,57 @@
+import CssBaseline from '@mui/material/CssBaseline';
+import {ThemeProvider} from '@mui/material/styles';
+import {SnackbarProvider} from 'notistack';
+import React from 'react';
+import {QueryClient, QueryClientProvider} from 'react-query';
+import {createEmotionSsrAdvancedApproach} from 'tss-react/nextJs';
+
+import {lightTheme} from '@unstoppabledomains/ui-kit/styles';
+
+import {TranslationProvider} from '../lib';
+import Web3ContextProvider from './Web3ContextProvider';
+
+// setup query client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // We want cacheTime to be a balance - long enough to improve load speed for frequently used
+      // queries, while short enough to avoid using too much memory for long browsing sessions. While
+      // it makes sense for react-query to have an aggressive 5 minute default, 24 hours seems more
+      // appropriate for our app. For comparison, the `swr` module never clears cache keys.
+      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+});
+
+// setup emotion cache for MUI
+const {EmotionCacheProvider, withEmotionCache} =
+  createEmotionSsrAdvancedApproach({key: 'css'});
+export {withEmotionCache};
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const BaseProvider: React.FC<Props> = ({children}) => {
+  return (
+    <TranslationProvider>
+      <EmotionCacheProvider>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider theme={lightTheme}>
+            <CssBaseline enableColorScheme />
+            <SnackbarProvider
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+            >
+              <Web3ContextProvider>{children}</Web3ContextProvider>
+            </SnackbarProvider>
+          </ThemeProvider>
+        </QueryClientProvider>
+      </EmotionCacheProvider>
+    </TranslationProvider>
+  );
+};
+
+export default BaseProvider;

packages/ui-components/src/providers/TokenGalleryProvider.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 
 import type {Nft} from '../lib';
-import {TranslationProvider} from '../lib';
+import BaseProvider from './BaseProvider';
 
 type Props = {
   children: React.ReactNode;
@@ -33,11 +33,11 @@ const TokenGalleryProvider: React.FC<Props> = ({children}) => {
   };
 
   return (
-    <TranslationProvider>
+    <BaseProvider>
       <TokenGalleryContext.Provider value={value}>
         {children}
       </TokenGalleryContext.Provider>
-    </TranslationProvider>
+    </BaseProvider>
   );
 };
 

packages/ui-components/src/components/Chat/provider/UnstoppableMessagingProvider.tsx → packages/ui-components/src/providers/UnstoppableMessagingProvider.tsx

@@ -1,8 +1,6 @@
-import {SnackbarProvider} from 'notistack';
 import React, {useState} from 'react';
 
-import {TranslationProvider} from '../../../lib';
-import {Web3ContextProvider} from '../../../providers';
+import BaseProvider from './BaseProvider';
 
 type Props = {
   children: React.ReactNode;
@@ -45,20 +43,11 @@ const UnstoppableMessagingProvider: React.FC<Props> = ({children}) => {
   };
 
   return (
-    <TranslationProvider>
-      <SnackbarProvider
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-      >
-        <Web3ContextProvider>
-          <UnstoppableMessagingContext.Provider value={value}>
-            {children}
-          </UnstoppableMessagingContext.Provider>
-        </Web3ContextProvider>
-      </SnackbarProvider>
-    </TranslationProvider>
+    <BaseProvider>
+      <UnstoppableMessagingContext.Provider value={value}>
+        {children}
+      </UnstoppableMessagingContext.Provider>
+    </BaseProvider>
   );
 };
 

packages/ui-components/src/providers/index.ts

@@ -1,5 +1,9 @@
+export * from './BaseProvider';
 export * from './TokenGalleryProvider';
+export * from './UnstoppableMessagingProvider';
 export * from './Web3ContextProvider';
 
+export {default as BaseProvider} from './BaseProvider';
 export {default as TokenGalleryProvider} from './TokenGalleryProvider';
+export {default as UnstoppableMessagingProvider} from './UnstoppableMessagingProvider';
 export {default as Web3ContextProvider} from './Web3ContextProvider';

server/pages/_app.page.tsx

@@ -6,34 +6,14 @@ import type {AppProps} from 'next/app';
 import Head from 'next/head';
 import React from 'react';
 import 'react-medium-image-zoom/dist/styles.css';
-import {QueryClient, QueryClientProvider} from 'react-query';
 import 'swiper/css/bundle';
-import {createEmotionSsrAdvancedApproach} from 'tss-react/nextJs';
 
 import {
   TokenGalleryProvider,
   UnstoppableMessagingProvider,
 } from '@unstoppabledomains/ui-components';
 import {darkTheme, lightTheme} from '@unstoppabledomains/ui-kit/styles';
 
-// setup query client
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      // We want cacheTime to be a balance - long enough to improve load speed for frequently used
-      // queries, while short enough to avoid using too much memory for long browsing sessions. While
-      // it makes sense for react-query to have an aggressive 5 minute default, 24 hours seems more
-      // appropriate for our app. For comparison, the `swr` module never clears cache keys.
-      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
-    },
-  },
-});
-
-// setup emotion cache for MUI
-const {EmotionCacheProvider, withEmotionCache} =
-  createEmotionSsrAdvancedApproach({key: 'css'});
-export {withEmotionCache};
-
 // setup wrapped app props
 export type NextPageWithLayout = NextPage & {
   themeMode?: 'light' | 'dark';
@@ -60,19 +40,15 @@ const WrappedApp = (props: WrappedAppProps) => {
         />
       </Head>
       <NextSeo title="Unstoppable Domains" />
-      <EmotionCacheProvider>
-        <QueryClientProvider client={queryClient}>
-          <ThemeProvider theme={pageTheme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline enableColorScheme />
-            <UnstoppableMessagingProvider>
-              <TokenGalleryProvider>
-                <Component {...pageProps} />
-              </TokenGalleryProvider>
-            </UnstoppableMessagingProvider>
-          </ThemeProvider>
-        </QueryClientProvider>
-      </EmotionCacheProvider>
+      <ThemeProvider theme={pageTheme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline enableColorScheme />
+        <UnstoppableMessagingProvider>
+          <TokenGalleryProvider>
+            <Component {...pageProps} />
+          </TokenGalleryProvider>
+        </UnstoppableMessagingProvider>
+      </ThemeProvider>
     </>
   );
 };

server/pages/_document.page.tsx

@@ -1,8 +1,7 @@
 import Document, {Head, Html, Main, NextScript} from 'next/document';
-import {withEmotionCache} from 'pages/_app.page';
 import React from 'react';
 
-import {getImageUrl} from '@unstoppabledomains/ui-components';
+import {getImageUrl, withEmotionCache} from '@unstoppabledomains/ui-components';
 import theme from '@unstoppabledomains/ui-kit/styles';
 
 class MyDocument extends Document {