feat(ui): implement redux store for wallet connections

src/routes/backRoute/backRoute.test.ts

@@ -1,9 +1,8 @@
 import { RootState } from "../../store";
-import { DataProps } from "../nextRoute/nextRoute.types";
-import { calcPreviousRoute, getBackRoute, getPreviousRoute } from "./backRoute";
-import { setAuthentication } from "../../store/reducers/stateCache";
 import { FIFTEEN_WORDS_BIT_LENGTH } from "../../ui/globals/constants";
 import { OperationType } from "../../ui/globals/types";
+import { DataProps } from "../nextRoute/nextRoute.types";
+import { calcPreviousRoute, getBackRoute, getPreviousRoute } from "./backRoute";
 
 jest.mock("../../store/reducers/stateCache", () => ({
   removeCurrentRoute: jest.fn(),
@@ -49,6 +48,10 @@ describe("getBackRoute", () => {
       connectionsCache: {
         connections: [],
       },
+      walletConnectionsCache: {
+        walletConnections: [],
+        connectedWallet: null,
+      },
     };
   });
 
@@ -153,6 +156,10 @@ describe("getPreviousRoute", () => {
       connectionsCache: {
         connections: [],
       },
+      walletConnectionsCache: {
+        walletConnections: [],
+        connectedWallet: null,
+      },
     };
   });
 

src/routes/nextRoute/nextRoute.test.ts

@@ -50,6 +50,10 @@ describe("NextRoute", () => {
       connectionsCache: {
         connections: [],
       },
+      walletConnectionsCache: {
+        walletConnections: [],
+        connectedWallet: null,
+      },
     };
     data = {
       store: storeMock,
@@ -152,6 +156,10 @@ describe("getNextRoute", () => {
     connectionsCache: {
       connections: [],
     },
+    walletConnectionsCache: {
+      walletConnections: [],
+      connectedWallet: null,
+    },
   };
   const state = {};
   const payload = {};

src/store/index.ts

@@ -4,6 +4,7 @@ import { stateCacheSlice } from "./reducers/stateCache";
 import { identifiersCacheSlice } from "./reducers/identifiersCache";
 import { credsCacheSlice } from "./reducers/credsCache";
 import { connectionsCacheSlice } from "./reducers/connectionsCache";
+import { walletConnectionsCacheSlice } from "./reducers/walletConnectionsCache";
 
 const store = configureStore({
   reducer: {
@@ -12,6 +13,7 @@ const store = configureStore({
     identifiersCache: identifiersCacheSlice.reducer,
     credsCache: credsCacheSlice.reducer,
     connectionsCache: connectionsCacheSlice.reducer,
+    walletConnectionsCache: walletConnectionsCacheSlice.reducer,
   },
 });
 

src/store/reducers/walletConnectionsCache/index.ts

@@ -0,0 +1,2 @@
+export * from "./walletConnectionsCache";
+export * from "./walletConnectionsCache.types";

src/store/reducers/walletConnectionsCache/walletConnectionsCache.test.ts

@@ -0,0 +1,101 @@
+import { PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../index";
+import {
+  getConnectedWallet,
+  getWalletConnectionsCache,
+  setConnectedWallet,
+  setWalletConnectionsCache,
+  walletConnectionsCacheSlice,
+} from "./walletConnectionsCache";
+import {
+  ConnectionData,
+  WalletConnectState,
+} from "./walletConnectionsCache.types";
+
+describe("walletConnectionsCacheSlice", () => {
+  const initialState: WalletConnectState = {
+    walletConnections: [],
+    connectedWallet: null,
+  };
+
+  it("should return the initial state", () => {
+    expect(
+      walletConnectionsCacheSlice.reducer(undefined, {} as PayloadAction)
+    ).toEqual(initialState);
+  });
+
+  it("should handle setWalletConnectionsCache", () => {
+    const connections: ConnectionData[] = [
+      {
+        id: 2,
+        name: "Wallet name #2",
+        owner: "Yoroi",
+        url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+      },
+    ];
+    const newState = walletConnectionsCacheSlice.reducer(
+      initialState,
+      setWalletConnectionsCache(connections)
+    );
+    expect(newState.walletConnections).toEqual(connections);
+  });
+  it("should handle setConnectedWallet", () => {
+    const connection: ConnectionData = {
+      id: 2,
+      name: "Wallet name #2",
+      owner: "Yoroi",
+      url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+    };
+    const newState = walletConnectionsCacheSlice.reducer(
+      initialState,
+      setConnectedWallet(connection)
+    );
+    expect(newState.connectedWallet).toEqual(connection);
+  });
+});
+
+describe("Get wallet connections cache", () => {
+  it("should return the wallet connetions cache from RootState", () => {
+    const state = {
+      walletConnectionsCache: {
+        walletConnections: [
+          {
+            id: 1,
+            name: "Wallet name #1",
+            owner: "Nami",
+            image: "",
+            url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+          },
+          {
+            id: 2,
+            name: "Wallet name #2",
+            owner: "Yoroi",
+            url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+          },
+        ],
+      },
+    } as RootState;
+    const connectionCache = getWalletConnectionsCache(state);
+    expect(connectionCache).toEqual(
+      state.walletConnectionsCache.walletConnections
+    );
+  });
+
+  it("should return connected wallet from RootState", () => {
+    const state = {
+      walletConnectionsCache: {
+        connectedWallet: {
+          id: 1,
+          name: "Wallet name #1",
+          owner: "Nami",
+          image: "",
+          url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+        },
+      },
+    } as RootState;
+    const connectionCache = getConnectedWallet(state);
+    expect(connectionCache).toEqual(
+      state.walletConnectionsCache.connectedWallet
+    );
+  });
+});

src/store/reducers/walletConnectionsCache/walletConnectionsCache.ts

@@ -0,0 +1,42 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../index";
+import {
+  ConnectionData,
+  WalletConnectState,
+} from "./walletConnectionsCache.types";
+
+const initialState: WalletConnectState = {
+  walletConnections: [],
+  connectedWallet: null,
+};
+const walletConnectionsCacheSlice = createSlice({
+  name: "walletConnectionsCache",
+  initialState,
+  reducers: {
+    setWalletConnectionsCache: (
+      state,
+      action: PayloadAction<ConnectionData[]>
+    ) => {
+      state.walletConnections = action.payload;
+    },
+    setConnectedWallet: (
+      state,
+      action: PayloadAction<ConnectionData | null>
+    ) => {
+      state.connectedWallet = action.payload;
+    },
+  },
+});
+
+export { initialState, walletConnectionsCacheSlice };
+
+export const { setWalletConnectionsCache, setConnectedWallet } =
+  walletConnectionsCacheSlice.actions;
+
+const getWalletConnectionsCache = (state: RootState) =>
+  state.walletConnectionsCache.walletConnections;
+
+const getConnectedWallet = (state: RootState) =>
+  state.walletConnectionsCache.connectedWallet;
+
+export { getWalletConnectionsCache, getConnectedWallet };

src/store/reducers/walletConnectionsCache/walletConnectionsCache.types.ts

@@ -0,0 +1,15 @@
+// TODO: mock data type for connect wallet ui. Need update after core function completed.
+interface ConnectionData {
+  id: number;
+  name: string;
+  owner: string;
+  image?: string;
+  url: string;
+}
+
+interface WalletConnectState {
+  walletConnections: ConnectionData[];
+  connectedWallet: ConnectionData | null;
+}
+
+export type { ConnectionData, WalletConnectState };

src/ui/__fixtures__/walletConnectionsFix.ts

@@ -25,7 +25,7 @@ const walletConnectionsFix: ConnectionData[] = [
   {
     id: 4,
     name: "Wallet name #4",
-    owner: "",
+    owner: "Yume",
     url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
   },
 ];

src/ui/components/AppWrapper/AppWrapper.tsx

@@ -43,6 +43,8 @@ import { CredentialStatus } from "../../../core/agent/services/credentialService
 import { FavouriteIdentifier } from "../../../store/reducers/identifiersCache/identifiersCache.types";
 import "./AppWrapper.scss";
 import { ConfigurationService } from "../../../core/configuration";
+import { setWalletConnectionsCache } from "../../../store/reducers/walletConnectionsCache";
+import { walletConnectionsFix } from "../../__fixtures__/walletConnectionsFix";
 
 const connectionStateChangedHandler = async (
   event: ConnectionStateChangedEvent,
@@ -166,6 +168,8 @@ const AppWrapper = (props: { children: ReactNode }) => {
     dispatch(setIdentifiersCache(storedIdentifiers));
     dispatch(setCredsCache(credentials));
     dispatch(setConnectionsCache(connectionsDetails));
+    // TODO: Need update after core function completed.
+    dispatch(setWalletConnectionsCache(walletConnectionsFix));
   };
 
   const loadPreferences = async () => {