use react context

src/App.tsx

@@ -13,6 +13,7 @@ import { AccountsProvider } from '@/hooks/useAccounts';
 import { DialogAreaProvider, useDialogArea } from './hooks/useDialogArea';
 import { LocaleProvider } from './hooks/useLocaleSeparators';
 import { NotificationsProvider } from './hooks/useNotifications';
+import { LocalNotificationsProvider } from './hooks/useLocalNotifications';
 import { SubaccountProvider } from './hooks/useSubaccount';
 import { SquidProvider } from '@/hooks/useSquid';
 
@@ -98,29 +99,33 @@ const Content = () => {
   );
 };
 
-const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <GrazProvider>
-      <WagmiConfig config={config}>
-        <LocaleProvider>
-          <DydxProvider>
-            <AccountsProvider>
-              <SubaccountProvider>
-                <SquidProvider>
-                  <NotificationsProvider>
-                    <DialogAreaProvider>
-                      <Content />
-                    </DialogAreaProvider>
-                  </NotificationsProvider>
-                </SquidProvider>
-              </SubaccountProvider>
-            </AccountsProvider>
-          </DydxProvider>
-        </LocaleProvider>
-      </WagmiConfig>
-    </GrazProvider>
-  </QueryClientProvider>
-);
+type ProviderWrapperProps = {
+  children: React.ReactNode;
+};
+
+const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
+  return ({ children }: ProviderWrapperProps) => <Component {...props}>{children}</Component>;
+};
+
+const providers = [
+  wrapProvider(QueryClientProvider, { client: queryClient }),
+  wrapProvider(GrazProvider),
+  wrapProvider(WagmiConfig, { config }),
+  wrapProvider(LocaleProvider),
+  wrapProvider(DydxProvider),
+  wrapProvider(AccountsProvider),
+  wrapProvider(SubaccountProvider),
+  wrapProvider(SquidProvider),
+  wrapProvider(LocalNotificationsProvider),
+  wrapProvider(NotificationsProvider),
+  wrapProvider(DialogAreaProvider)
+];
+
+const App = () => {
+  return [...providers].reverse().reduce((children, Provider) => {
+    return <Provider>{children}</Provider>;
+  }, <Content />);
+};
 
 const Styled: Record<string, AnyStyledComponent> = {};
 

src/hooks/useLocalNotifications.tsx

@@ -1,10 +1,8 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
 
 import { LocalStorageKey } from '@/constants/localStorage';
-import {
-  type TransferNotifcation,
-} from '@/constants/notifications';
+import { type TransferNotifcation } from '@/constants/notifications';
 
 import { useAccounts } from '@/hooks/useAccounts';
 import { useSquid } from '@/hooks/useSquid';
@@ -12,22 +10,30 @@ import { useLocalStorage } from './useLocalStorage';
 
 import { StatusResponse } from '@0xsquid/sdk';
 
-export const useLocalNotifications = () => {
+const LocalNotificationsContext = createContext<
+  ReturnType<typeof useLocalNotificationsContext> | undefined
+>(undefined);
 
+LocalNotificationsContext.displayName = 'LocalNotifications';
+
+export const LocalNotificationsProvider = ({ ...props }) => (
+  <LocalNotificationsContext.Provider value={useLocalNotificationsContext()} {...props} />
+);
+
+export const useLocalNotifications = () => useContext(LocalNotificationsContext)!;
+
+const useLocalNotificationsContext = () => {
   // transfer notifications
-  const [allTransferNotifications, setAllTransferNotifications] = useLocalStorage<{[key: `dydx${string}`]: TransferNotifcation[]}>({
+  const [allTransferNotifications, setAllTransferNotifications] = useLocalStorage<{
+    [key: `dydx${string}`]: TransferNotifcation[];
+  }>({
     key: LocalStorageKey.TransferNotifications,
     defaultValue: {},
   });
 
   const { dydxAddress } = useAccounts();
 
-  const transferNotifications = useMemo(() => {
-    if (!dydxAddress) return [];
-    console.log({allTransferNotifications, transferNotifications: allTransferNotifications[dydxAddress]})
-    return allTransferNotifications[dydxAddress] || [];
-  }, [allTransferNotifications, dydxAddress]);
-
+  const transferNotifications = dydxAddress ? allTransferNotifications[dydxAddress] || [] : [];
 
   const setTransferNotifications = useCallback(
     (notifications: TransferNotifcation[]) => {

src/hooks/useNotificationTypes.tsx

@@ -110,7 +110,7 @@ export const notificationTypes = [
   } as NotificationTypeConfig<string, [string, number]>,
   {
     type: NotificationType.SquidTransfer,
-    useTrigger: ({ trigger, lastUpdated }) => {
+    useTrigger: ({ trigger }) => {
       const stringGetter = useStringGetter();
       const { transferNotifications } = useLocalNotifications();