feat: Add redux store (#823)

vitwit · Oct 26, 2023 · 84bf8cf · 84bf8cf
2 parents 08abe55 + c7f1016
commit 84bf8cf
Show file tree

Hide file tree

Showing 9 changed files with 253 additions and 29 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,17 +15,20 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.10",
+    "@reduxjs/toolkit": "^1.9.7",
     "@types/node": "20.6.5",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.16",
+    "axios": "^1.5.1",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.2",
     "next": "13.5.2",
     "postcss": "8.4.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
+    "react-redux": "^8.1.3",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   }

diff --git a/frontend/src/app/(routes)/multisig/Multisig.tsx b/frontend/src/app/(routes)/multisig/Multisig.tsx
@@ -0,0 +1,19 @@
+"use client";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getMultisigAccounts } from "../../../store/features/multisig/multisigSlice";
+import { AppDispatch } from "../../../store/store";
+
+const Multisig = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const multisigAccounts = useSelector(
+    (state: any) => state.multisig.multisigAccounts
+  ); 
+
+  useEffect(() => {
+    dispatch(getMultisigAccounts("cosmos16wnk86wkfj7a84g4d7epa2mf7fk2g7cm0rljjm"));
+  }, [dispatch]);
+  return <div>{JSON.stringify(multisigAccounts)}</div>;
+};
+
+export default Multisig;
diff --git a/frontend/src/app/(routes)/multisig/page.tsx b/frontend/src/app/(routes)/multisig/page.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
+import Multisig from './Multisig'
 
 const page = () => {
   return (
     <div className='page'>
-      multisig
+      <Multisig />
     </div>
   )
 }

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import PermanentSideBar from "../components/PermanentSidebar";
 import { ConnectWalletButton } from "../components/ConnectWalletButton";
+import { StoreProvider } from "staking/store/StoreProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,11 +21,13 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         {
-          <div className="layout">
-            <ConnectWalletButton>
-              <PermanentSideBar> {children}</PermanentSideBar>
-            </ConnectWalletButton>
-          </div>
+          <StoreProvider>
+            <div className="layout">
+              <ConnectWalletButton>
+                <PermanentSideBar> {children}</PermanentSideBar>
+              </ConnectWalletButton>
+            </div>
+          </StoreProvider>
         }
       </body>
     </html>

diff --git a/frontend/src/store/StoreProvider.tsx b/frontend/src/store/StoreProvider.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { Provider } from "react-redux";
+import { store } from "./store";
+import { ReactNode } from "react";
+
+interface StoreProviderProps {
+  children: ReactNode;
+}
+
+export function StoreProvider({ children }: StoreProviderProps) {
+  return <Provider store={store}>{children}</Provider>;
+}
diff --git a/frontend/src/store/features/multisig/multisigService.ts b/frontend/src/store/features/multisig/multisigService.ts
@@ -0,0 +1,14 @@
+"use client";
+
+import Axios from "axios";
+
+const BASE_URL = "http://localhost:1323";
+
+const GET_ACCOUNTS = "/multisig/accounts";
+
+const getAccounts = (address: string) =>
+  Axios.get(`${BASE_URL}${GET_ACCOUNTS}/${address}`);
+
+export default {
+  getAccounts: getAccounts,
+};
diff --git a/frontend/src/store/features/multisig/multisigSlice.ts b/frontend/src/store/features/multisig/multisigSlice.ts
@@ -0,0 +1,53 @@
+"use client";
+
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import multisigService from "./multisigService";
+
+const initialState = {
+  multisigAccounts: {
+    status: "idle",
+    accounts: [],
+    txnCounts: {},
+    total: 0,
+  },
+};
+
+export const getMultisigAccounts = createAsyncThunk(
+  "multisig/getMultisigAccounts",
+  async (address: string, { rejectWithValue }) => {
+    try {
+      const response = await multisigService.getAccounts(address);
+      return response.data;
+    } catch (error) {
+      return rejectWithValue("SOMETHING_WRONG");
+    }
+  }
+);
+
+export const multisigSlice = createSlice({
+  name: "multisig",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(getMultisigAccounts.pending, (state) => {
+        state.multisigAccounts.status = "pending";
+        state.multisigAccounts.accounts = [];
+        state.multisigAccounts.total = 0;
+        state.multisigAccounts.txnCounts = {};
+      })
+      .addCase(getMultisigAccounts.fulfilled, (state, action) => {
+        state.multisigAccounts.accounts = action.payload?.data?.accounts || [];
+        state.multisigAccounts.total = action.payload?.data?.total;
+        state.multisigAccounts.txnCounts =
+          action.payload?.data?.pending_txns || {};
+        state.multisigAccounts.status = "idle";
+      })
+      .addCase(getMultisigAccounts.rejected, (state, action) => {
+        state.multisigAccounts.status = "rejected";
+        state.multisigAccounts.accounts = [];
+      });
+  },
+});
+
+export default multisigSlice.reducer;
diff --git a/frontend/src/store/store.ts b/frontend/src/store/store.ts
@@ -0,0 +1,13 @@
+"use client";
+
+import { configureStore } from "@reduxjs/toolkit";
+import multisigSlice from "./features/multisig/multisigSlice";
+
+export const store = configureStore({
+  reducer: {
+    multisig: multisigSlice
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;