implemented redux for state management

softstack · May 14, 2024 · 35312a5 · 35312a5
1 parent 6cce4b8
commit 35312a5
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@reduxjs/toolkit": "^2.2.4",
         "@tanstack/react-query": "^5.29.0",
         "@tonconnect/ui-react": "^2.0.0",
         "@twa-dev/sdk": "^7.0.0",
@@ -27,6 +28,7 @@
         "ethers": "^6.11.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^9.1.2",
         "react-router-dom": "^6.22.3",
         "react-spinners": "^0.13.8"
     },

diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -20,6 +20,10 @@ import documentIcon from '../../assets/document_icon.svg';
 
 import { truncateText } from '../../utils/truncateText';
 
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState, AppDispatch } from '../../redux/store';
+import { setConnectionState } from '../../redux/connectionSlice';
+
 import './ConnectOverlay.css';
 
 type Props = {
@@ -29,14 +33,6 @@ type Props = {
     onConnect: () => void;
 };
 
-enum ConnectionState {
-    DISCONNECTED = 'disconnected',
-    CONNECTING = 'connecting',
-    CONNECTED = 'connected',
-    ERROR = 'error',
-    RETRYING = 'retrying',
-}
-
 const BRIDGE_URL = import.meta.env.VITE_BRIDGE_URL || '';
 
 const ConnectOverlay: React.FC<Props> = ({
@@ -45,6 +41,11 @@ const ConnectOverlay: React.FC<Props> = ({
     close,
     onConnect,
 }) => {
+    const connectionState = useSelector(
+        (state: RootState) => state.connection.connectionState
+    );
+    const dispatch = useDispatch<AppDispatch>();
+
     const [networksExpanded, setNetworksExpanded] = useState(true);
     const [ethereumWalletsExpanded, setEthereumWalletsExpanded] =
         useState(false);
@@ -54,14 +55,6 @@ const ConnectOverlay: React.FC<Props> = ({
         setNetworksExpanded(!networksExpanded);
     };
 
-    // const toggleWallets = () => {
-    //     setEthereumWalletsExpanded(!ethereumWalletsExpanded);
-    // };
-
-    const [connectionState, setConnectionState] = useState<string>(
-        ConnectionState.DISCONNECTED
-    );
-
     const [metaMaskSelected, setMetaMaskSelected] = useState<boolean>(false);
     const [trustWalletSelected, setTrustWalletSelected] =
         useState<boolean>(false);
@@ -78,7 +71,7 @@ const ConnectOverlay: React.FC<Props> = ({
         }
 
         try {
-            setConnectionState(ConnectionState.CONNECTING);
+            dispatch(setConnectionState('connecting'));
 
             window.localStorage.removeItem('walletconnect');
             window.localStorage.removeItem('WALLETCONNECT_DEEPLINK_CHOICE');
@@ -119,7 +112,7 @@ const ConnectOverlay: React.FC<Props> = ({
                         }
                     );
                     if (statusResponse.data.connected) {
-                        setConnectionState(ConnectionState.CONNECTED);
+                        dispatch(setConnectionState('connected'));
                         onConnect();
                     } else {
                         console.log('Not Connected, checking again...');
@@ -135,7 +128,7 @@ const ConnectOverlay: React.FC<Props> = ({
             checkConnection();
         } catch (error) {
             console.error('Error during initial connection:', error);
-            setConnectionState(ConnectionState.ERROR);
+            dispatch(setConnectionState('error'));
         }
     };
 
@@ -175,27 +168,27 @@ const ConnectOverlay: React.FC<Props> = ({
     return (
         <div className={`connect-overlay ${slideAnimation}`}>
             <div className="flex justify-between text-left py-3 px-4">
-                {connectionState === ConnectionState.CONNECTING && (
+                {connectionState === 'connecting' && (
                     <p className="m-0 text-lg font-bold text-customBlackText">
                         Connecting
                     </p>
                 )}
-                {connectionState === ConnectionState.DISCONNECTED && (
+                {connectionState === 'disconnected' && (
                     <p className="m-0 text-lg font-bold text-customBlackText">
                         Connect Wallet
                     </p>
                 )}
-                {connectionState === ConnectionState.CONNECTED && (
+                {connectionState === 'connected' && (
                     <p className="m-0 text-lg font-bold text-customBlackText">
                         Account Details
                     </p>
                 )}
-                {connectionState === ConnectionState.ERROR && (
+                {connectionState === 'error' && (
                     <p className="m-0 text-lg font-bold text-customBlackText">
                         Connection Error
                     </p>
                 )}
-                {connectionState === ConnectionState.RETRYING && (
+                {connectionState === 'retrying' && (
                     <p className="m-0 text-lg font-bold text-customBlackText">
                         Retrying
                     </p>
@@ -208,7 +201,7 @@ const ConnectOverlay: React.FC<Props> = ({
                 </div>
             </div>
             <hr className="m-0 border-t-1 border-solid border-customGrayLine" />
-            {connectionState === ConnectionState.CONNECTING && (
+            {connectionState === 'connecting' && (
                 <>
                     <div className="my-10">
                         <PulseLoader size={12} margin={5} color="#2D2D2D" />
@@ -223,7 +216,7 @@ const ConnectOverlay: React.FC<Props> = ({
                     </div>
                 </>
             )}
-            {connectionState === ConnectionState.DISCONNECTED && (
+            {connectionState === 'disconnected' && (
                 <>
                     <div className="flex py-4 px-5 justify-between">
                         <p className="m-0 text-customBlackText text-base font-medium">
@@ -302,7 +295,7 @@ const ConnectOverlay: React.FC<Props> = ({
                     )}
                 </>
             )}
-            {connectionState === ConnectionState.CONNECTED && (
+            {connectionState === 'connected' && (
                 <div className="my-5 mx-7 border-solid border border-gray-200 rounded-lg">
                     <div className="flex align-middle justify-start items-center my-2 mx-1 p-2 gap-4">
                         <div className="w-8 h-8 object-contain">

diff --git a/src/redux/connectionSlice.ts b/src/redux/connectionSlice.ts
@@ -0,0 +1,20 @@
+// src/redux/connectionSlice.ts
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ConnectionSliceState, ConnectionState } from '../types';
+
+const initialState: ConnectionSliceState = {
+    connectionState: 'disconnected',
+};
+
+export const connectionSlice = createSlice({
+    name: 'connection',
+    initialState,
+    reducers: {
+        setConnectionState: (state, action: PayloadAction<ConnectionState>) => {
+            state.connectionState = action.payload;
+        },
+    },
+});
+
+export const { setConnectionState } = connectionSlice.actions;
+export default connectionSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
@@ -0,0 +1,13 @@
+// src/redux/store.ts
+import { configureStore } from '@reduxjs/toolkit';
+import connectionReducer from './connectionSlice';
+
+export const store = configureStore({
+    reducer: {
+        connection: connectionReducer,
+    },
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -0,0 +1,11 @@
+// src/types/index.ts
+export type ConnectionState =
+    | 'disconnected'
+    | 'connecting'
+    | 'connected'
+    | 'error'
+    | 'retrying';
+
+export interface ConnectionSliceState {
+    connectionState: ConnectionState;
+}