Merge pull request #1 from rarimo/feature/valtio

Replace redux with Valtio

package.json

@@ -32,15 +32,14 @@
     "rsc": "node scripts/release-sanity-check.mjs"
   },
   "dependencies": {
-    "@distributedlab/tools": "^1.0.0-rc.8",
-    "@distributedlab/w3p": "^1.0.0-rc.8",
+    "@distributedlab/tools": "^1.0.0-rc.9",
+    "@distributedlab/w3p": "^1.0.0-rc.9",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.2",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",
-    "@rarimo/rarime-connector": "^1.0.1",
-    "@reduxjs/toolkit": "^2.0.1",
+    "@rarimo/rarime-connector": "^1.0.2",
     "@walletconnect/modal": "^2.6.2",
     "i18next": "^22.4.3",
     "lodash": "^4.17.21",
@@ -49,9 +48,9 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-i18next": "^12.1.1",
-    "react-redux": "^9.0.1",
     "react-router-dom": "^6.20.1",
     "react-use": "^17.4.2",
+    "valtio": "^1.12.1",
     "yup": "^1.3.2"
   },
   "devDependencies": {

src/contexts/web3.tsx

@@ -8,12 +8,12 @@ import {
   ProviderProxyConstructor,
   PROVIDERS,
 } from '@distributedlab/w3p'
-import { createContext, memo, ReactNode, useCallback, useMemo } from 'react'
+import { createContext, ReactNode, useCallback, useMemo } from 'react'
 
 import { config } from '@/config'
 import { ErrorHandler } from '@/helpers'
-import { useAppDispatch, useAppSelector, useProvider } from '@/hooks'
-import { clearWeb3Storage, providerType, setProviderType } from '@/store'
+import { useProvider } from '@/hooks'
+import { useWeb3State, web3Store } from '@/store'
 import { SUPPORTED_PROVIDERS } from '@/types'
 
 interface Web3ProviderContextValue {
@@ -54,11 +54,10 @@ const SUPPORTED_PROVIDERS_MAP: {
   [PROVIDERS.Metamask]: MetamaskProvider,
 }
 
-export const Web3ProviderContextProvider = memo(({ children }: { children: ReactNode }) => {
+export const Web3ProviderContextProvider = ({ children }: { children: ReactNode }) => {
   const providerDetector = useMemo(() => new ProviderDetector<SUPPORTED_PROVIDERS>(), [])
 
-  const dispatch = useAppDispatch()
-  const storageProviderType = useAppSelector(providerType)
+  const { providerType: storeProviderType } = useWeb3State()
 
   const provider = useProvider()
 
@@ -75,8 +74,8 @@ export const Web3ProviderContextProvider = memo(({ children }: { children: React
       // empty
     }
 
-    dispatch(clearWeb3Storage())
-  }, [dispatch, provider])
+    web3Store.setProviderType(undefined)
+  }, [provider])
 
   const listeners = useMemo(
     () => ({
@@ -88,8 +87,6 @@ export const Web3ProviderContextProvider = memo(({ children }: { children: React
   const init = useCallback(
     async (providerType?: SUPPORTED_PROVIDERS) => {
       try {
-        dispatch(setProviderType(providerType || storageProviderType))
-
         await providerDetector.init()
 
         Provider.setChainsDetails(
@@ -102,7 +99,7 @@ export const Web3ProviderContextProvider = memo(({ children }: { children: React
           ),
         )
 
-        const currentProviderType = providerType || storageProviderType
+        const currentProviderType = providerType || storeProviderType
 
         if (!currentProviderType) return
 
@@ -117,6 +114,8 @@ export const Web3ProviderContextProvider = memo(({ children }: { children: React
         if (!initializedProvider.isConnected) {
           await initializedProvider?.connect?.()
         }
+
+        web3Store.setProviderType(providerType || storeProviderType)
       } catch (error) {
         if (
           error instanceof Error &&
@@ -129,7 +128,7 @@ export const Web3ProviderContextProvider = memo(({ children }: { children: React
         throw error
       }
     },
-    [provider, disconnect, listeners, providerDetector, dispatch, storageProviderType],
+    [providerDetector, storeProviderType, provider, listeners, disconnect],
   )
 
   const addProvider = (provider: ProviderInstance) => {
@@ -183,4 +182,4 @@ export const Web3ProviderContextProvider = memo(({ children }: { children: React
       {children}
     </web3ProviderContext.Provider>
   )
-})
+}

src/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './error-handler'
 export * from './event-bus'
 export * from './promise'
+export * from './store'

src/helpers/store.ts

@@ -0,0 +1,28 @@
+import { INTERNAL_Snapshot, proxy, subscribe, useSnapshot } from 'valtio'
+
+export const createStore = <S extends object, A>(
+  storeName: string,
+  initialState: S,
+  actions: (state: S) => A,
+): [Readonly<S> & A, () => INTERNAL_Snapshot<S>] => {
+  const storageState = localStorage.getItem(storeName)
+
+  let parsedStorageState: S = {} as S
+
+  try {
+    parsedStorageState = JSON.parse(storageState!)
+  } catch (e) {
+    /* empty */
+  }
+
+  const state = proxy<S>({
+    ...initialState,
+    ...parsedStorageState,
+  })
+
+  subscribe(state, () => {
+    localStorage.setItem(storeName, JSON.stringify(state))
+  })
+
+  return [Object.assign(state, actions(state)), () => useSnapshot(state)]
+}

src/hooks/index.ts

@@ -3,7 +3,6 @@ export * from './interval'
 export * from './loading'
 export * from './metamask-zkp-snap'
 export * from './provider'
-export * from './store'
 export * from './theme'
 export * from './viewport'
 export * from './web3'

src/hooks/theme.ts

@@ -2,16 +2,16 @@ import { createTheme } from '@mui/material'
 import { useEffect, useMemo } from 'react'
 
 import { ThemeMode } from '@/enums'
-import { useAppDispatch } from '@/hooks'
-import { setThemeMode } from '@/store'
+import { uiStore, useUiState } from '@/store'
 import { componentsTheme, lightPalette, typographyTheme } from '@/theme'
 
 const THEME_CLASSES = {
   [ThemeMode.Light]: 'Theme__light',
+  [ThemeMode.Dark]: 'Theme__dark',
 }
 
 export const useThemeMode = () => {
-  const dispatch = useAppDispatch()
+  const { themeMode } = useUiState()
 
   const theme = useMemo(
     () =>
@@ -30,10 +30,10 @@ export const useThemeMode = () => {
   )
 
   useEffect(() => {
-    document.body.classList.add(THEME_CLASSES[ThemeMode.Light])
-    dispatch(setThemeMode(ThemeMode.Light))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    if (!themeMode) return
 
-  return { theme }
+    document.body.classList.add(THEME_CLASSES[themeMode])
+  }, [themeMode])
+
+  return { theme, setTheme: uiStore.setThemeMode }
 }

src/hooks/viewport.ts

@@ -1,17 +1,14 @@
 import debounce from 'lodash/debounce'
 import { useEffect } from 'react'
 
-import { setViewportWidth, viewportWidth as _viewportWidth } from '@/store'
-
-import { useAppDispatch, useAppSelector } from './store'
+import { uiStore, useUiState } from '@/store'
 
 export const useViewportSizes = () => {
-  const dispatch = useAppDispatch()
-  const viewportWidth = useAppSelector(_viewportWidth)
+  const { viewportWidth } = useUiState()
 
   const setViewportSizes = () => {
     assignVhCssVariable()
-    dispatch(setViewportWidth(window.innerWidth))
+    uiStore.setViewportWidth(window.innerWidth)
   }
 
   const assignVhCssVariable = () => {

src/main.tsx

@@ -5,17 +5,13 @@ import 'virtual:svg-icons-register'
 
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Provider } from 'react-redux'
 
 import { AppRoutes } from '@/routes'
-import { store } from '@/store'
 
 const root = createRoot(document.getElementById('root') as Element)
 
 root.render(
   <StrictMode>
-    <Provider store={store}>
-      <AppRoutes />
-    </Provider>
+    <AppRoutes />
   </StrictMode>,
 )

src/store/index.ts

@@ -1,25 +1 @@
-import { configureStore } from '@reduxjs/toolkit'
-
-import { uiStorage, web3Storage } from '@/store/storages'
-
-import uiReducer from './ui'
-import web3Reducer from './web3'
-
-export const store = configureStore({
-  reducer: {
-    ui: uiReducer,
-    web3: web3Reducer,
-  },
-  preloadedState: {
-    ui: uiStorage.getStorage(),
-    web3: web3Storage.getStorage(),
-  },
-})
-
-// Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<typeof store.getState>
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
-
-export * from './ui'
-export * from './web3'
+export * from './modules'

src/store/modules/index.ts

@@ -0,0 +1,2 @@
+export * from './ui.module'
+export * from './web3.module'

src/store/modules/ui.module.ts

@@ -0,0 +1,27 @@
+import { ThemeMode } from '@/enums'
+import { createStore } from '@/helpers'
+
+interface UiStore {
+  viewportWidth: number
+  themeMode?: ThemeMode
+}
+
+export const [uiStore, useUiState] = createStore(
+  'ui',
+  {
+    viewportWidth: 0,
+    themeMode: ThemeMode.Light,
+  } as UiStore,
+  state => ({
+    setViewportWidth: (width: number) => {
+      state.viewportWidth = width
+    },
+    setThemeMode: (mode: ThemeMode) => {
+      state.themeMode = mode
+    },
+    clearUiStorage: () => {
+      state.themeMode = '' as ThemeMode
+      state.viewportWidth = 0
+    },
+  }),
+)

src/store/modules/web3.module.ts

@@ -0,0 +1,20 @@
+import { createStore } from '@/helpers'
+import { SUPPORTED_PROVIDERS } from '@/types'
+
+interface Web3State {
+  providerType?: SUPPORTED_PROVIDERS
+}
+
+const [web3Store, useWeb3State] = createStore(
+  'web3',
+  {
+    providerType: undefined,
+  } as Web3State,
+  state => ({
+    setProviderType: (providerType: SUPPORTED_PROVIDERS | undefined) => {
+      state.providerType = providerType
+    },
+  }),
+)
+
+export { useWeb3State, web3Store }