diff --git a/src/App.tsx b/src/App.tsx index 7040e37..2183c18 100644 --- a/src/App.tsx +++ b/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 = () => ( - - - - - - - - - - - - - - - - - - - - - -); +type ProviderWrapperProps = { + children: React.ReactNode; +}; + +const wrapProvider = (Component: React.ComponentType, props?: any) => { + return ({ children }: ProviderWrapperProps) => {children}; +}; + +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 {children}; + }, ); +}; const Styled: Record = {}; diff --git a/src/hooks/useLocalNotifications.tsx b/src/hooks/useLocalNotifications.tsx index f85c1fd..c1ae891 100644 --- a/src/hooks/useLocalNotifications.tsx +++ b/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 | undefined +>(undefined); +LocalNotificationsContext.displayName = 'LocalNotifications'; + +export const LocalNotificationsProvider = ({ ...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[]) => { diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index 6fd9dd5..200afd9 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/src/hooks/useNotificationTypes.tsx @@ -110,7 +110,7 @@ export const notificationTypes = [ } as NotificationTypeConfig, { type: NotificationType.SquidTransfer, - useTrigger: ({ trigger, lastUpdated }) => { + useTrigger: ({ trigger }) => { const stringGetter = useStringGetter(); const { transferNotifications } = useLocalNotifications();