feat(ui): Managing Connections Through Connect Wallet Connection Hist…

…ory (#457)

* feat(ui): remove unused style of modal

* feat(ui): create common list

* feat(ui): implement confirm connect wallet modal

* feat(ui): implement confirm connect wallet action

* feat(ui): implement redux store for wallet connections

* feat(ui): implement wallet connection histories

* feat(ui): update style for confirm connect wallet modal

* feat(ui): create enum for action type

* feat(ui): remove unecessary text func

---------

Co-authored-by: Vu Van Duc <vuvanduc@Vus-MacBook-Pro.local>

src/locales/en/en.json

@@ -870,6 +870,22 @@
       "cancel": "Cancel",
       "scanqr": "Scan QR code",
       "pastePID": "Paste Peer ID"
+    },
+    "connectionhistory": {
+      "title": "Connection History",
+      "action": {
+        "delete": "Delete"
+      },
+      "deletealert": {
+        "message": "Are you sure you want to delete this connection?",
+        "confirm": "Yes, I’m sure",
+        "cancel": "Cancel"
+      },
+      "confirmconnect": {
+        "done": "Done",
+        "connectbtn": "Connect",
+        "disconnectbtn": "Disconnect"
+      }
     }
   },
   "settings": {
@@ -1085,7 +1101,10 @@
     "noteremoved": "Note removed successfully",
     "maxfavouritesreached": "Maximum of 5 favourites reached",
     "usernamecreationsuccess": "Welcome, {{username}}!",
-    "usernamecreationerror": "Unable to set name. Please try again."
+    "usernamecreationerror": "Unable to set name. Please try again.",
+    "walletconnectiondeleted": "Delete successfully",
+    "connectwalletsuccess": "Connected successfully",
+    "disconnectwallet": "Disconnected successfully"
   },
   "request": {
     "connection": {

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/App.scss

@@ -267,55 +267,3 @@ ion-segment {
     }
   }
 }
-
-/* Legacy styles that we need to keep for now */
-.modal {
-  padding-inline: 1.25rem;
-  background-color: var(--ion-color-light);
-  border-radius: 1rem 1rem 0px 0px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  ion-toolbar {
-    padding: 0.5rem 0 0 !important;
-    height: 4rem;
-  }
-
-  ion-content {
-    &.ios {
-      height: calc(
-        calc(var(--scale-h) * 100) - (6rem + env(safe-area-inset-top))
-      );
-    }
-
-    &.md {
-      height: calc(calc(var(--scale-h) * 100) - 6rem);
-    }
-  }
-
-  ion-title {
-    position: absolute;
-    width: 100%;
-    height: 3rem;
-    top: 0;
-    left: 0;
-  }
-
-  h2 {
-    margin: 0 auto;
-    font-size: 1.5rem;
-  }
-
-  .action-button-label,
-  .close-button-label {
-    color: var(--ion-color-primary);
-  }
-}
-
-.extended-modal::part(content) {
-  height: 50rem;
-}
-/* End of legacy styles */

src/ui/__fixtures__/walletConnectionsFix.ts

@@ -0,0 +1,33 @@
+import { ConnectionData } from "../../store/reducers/walletConnectionsCache";
+import KeriLogo from "../assets/images/KeriGeneric.jpg";
+
+const walletConnectionsFix: ConnectionData[] = [
+  {
+    id: 1,
+    name: "Wallet name #1",
+    owner: "Nami",
+    image: KeriLogo,
+    url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+  },
+  {
+    id: 2,
+    name: "Wallet name #2",
+    owner: "Yoroi",
+    url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+  },
+  {
+    id: 3,
+    name: "Wallet name #3",
+    owner: "Flint",
+    url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+    image: KeriLogo,
+  },
+  {
+    id: 4,
+    name: "Wallet name #4",
+    owner: "Yume",
+    url: "ED4KeyyTKFj-72B008OTGgDCrFo6y7B2B73kfyzu5Inb",
+  },
+];
+
+export { walletConnectionsFix };

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 () => {