feat(ui): implement confirm connect wallet modal

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/ui/pages/Menu/components/ConfirmConnectModal/ConfirmConnectModal.scss

@@ -0,0 +1,93 @@
+.confirm-connect-modal {
+  .add-connection-modal-content {
+    align-items: center;
+  }
+
+  &.responsive-modal .responsive-modal-content {
+    & > * {
+      margin-bottom: 0;
+    }
+
+    .wallet-connect-logo {
+      border-radius: 50%;
+      width: 2.75rem;
+      height: 2.75rem;
+      margin-bottom: 1rem;
+    }
+
+    .wallet-connect-fallback-logo {
+      background-color: var(--ion-color-primary);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      ion-icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .confirm-modal-name-title {
+      margin-bottom: 0.25rem;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+
+    .confirm-modal-name {
+      margin: 0;
+      font-size: 0.875rem;
+      line-height: 1rem;
+    }
+
+    .confirm-modal-id {
+      margin: 1.25rem 0 1.5rem;
+      padding: 1rem 1.5rem;
+      background-color: #fff;
+      border-radius: 1.875rem;
+
+      display: flex;
+      align-items: center;
+
+      & > span {
+        font-weight: 500;
+        color: var(--ion-color-secondary);
+      }
+
+      & > ion-icon {
+        margin-left: 0.625rem;
+        width: 1.375rem;
+        height: 1.375rem;
+      }
+    }
+
+    .confirm-connect-submit {
+      width: 100%;
+      --border-radius: 2rem;
+    }
+  }
+
+  .buttons-last-slot {
+    min-width: fit-content !important;
+
+    .action-button {
+      background: var(--ion-color-danger) !important;
+
+      & > ion-icon {
+        --ion-color-base: #fff !important;
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  }
+
+  @media screen and (min-width: 250px) and (max-width: 370px) {
+    .buttons-last-slot {
+      .action-button {
+        & > ion-icon {
+          width: 1.15rem;
+          height: 1.15rem;
+        }
+      }
+    }
+  }
+}

src/ui/pages/Menu/components/ConfirmConnectModal/ConfirmConnectModal.test.tsx

@@ -0,0 +1,165 @@
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import EN_TRANSLATIONS from "../../../../../locales/en/en.json";
+import { TabsRoutePath } from "../../../../../routes/paths";
+import { setToastMsg } from "../../../../../store/reducers/stateCache";
+import { walletConnectionsFix } from "../../../../__fixtures__/walletConnectionsFix";
+import { ToastMsgType } from "../../../../globals/types";
+import { ellipsisBetweenText } from "../../../../utils/text";
+import { ConfirmConnectModal } from "./ConfirmConnectModal";
+
+jest.mock("@ionic/react", () => ({
+  ...jest.requireActual("@ionic/react"),
+  IonModal: ({ children, isOpen }: any) => (
+    <div
+      style={{ display: isOpen ? "block" : "none" }}
+      data-testid="add-connection-modal"
+    >
+      {children}
+    </div>
+  ),
+}));
+
+const mockStore = configureStore();
+const dispatchMock = jest.fn();
+const initialState = {
+  stateCache: {
+    routes: [TabsRoutePath.IDENTIFIERS],
+    authentication: {
+      loggedIn: true,
+      time: Date.now(),
+      passcodeIsSet: true,
+      passwordIsSet: true,
+    },
+  },
+};
+
+const storeMocked = {
+  ...mockStore(initialState),
+  dispatch: dispatchMock,
+};
+
+describe("Confirm connect modal", () => {
+  test("Confirm connect modal render", async () => {
+    const closeFn = jest.fn();
+    const confirmFn = jest.fn();
+    const deleteFn = jest.fn();
+
+    const { getByTestId, getByText } = render(
+      <Provider store={storeMocked}>
+        <ConfirmConnectModal
+          openModal={true}
+          closeModal={closeFn}
+          onConfirm={confirmFn}
+          onDeleteConnection={deleteFn}
+          connectionData={{
+            ...walletConnectionsFix[0],
+            image: "imagelink",
+          }}
+          isConnectModal={true}
+        />
+      </Provider>
+    );
+
+    expect(getByTestId("wallet-connection-logo")).toBeVisible();
+
+    expect(getByText(walletConnectionsFix[0].name)).toBeVisible();
+    expect(getByText(walletConnectionsFix[0].owner)).toBeVisible();
+
+    const ellipsisLink = ellipsisBetweenText(walletConnectionsFix[0].url);
+
+    expect(getByText(ellipsisLink)).toBeVisible();
+
+    act(() => {
+      fireEvent.click(getByTestId("connection-id"));
+    });
+
+    await waitFor(() => {
+      expect(dispatchMock).toBeCalledWith(
+        setToastMsg(ToastMsgType.COPIED_TO_CLIPBOARD)
+      );
+    });
+
+    act(() => {
+      fireEvent.click(getByTestId("action-button"));
+    });
+
+    expect(deleteFn).toBeCalled();
+
+    act(() => {
+      fireEvent.click(getByTestId("confirm-connect-btn"));
+    });
+
+    expect(confirmFn).toBeCalled();
+  });
+  test("Confirm connect modal render: display fallback logo", async () => {
+    const closeFn = jest.fn();
+    const confirmFn = jest.fn();
+    const deleteFn = jest.fn();
+
+    const { getByTestId, getByText } = render(
+      <Provider store={storeMocked}>
+        <ConfirmConnectModal
+          openModal={true}
+          closeModal={closeFn}
+          onConfirm={confirmFn}
+          onDeleteConnection={deleteFn}
+          connectionData={{
+            ...walletConnectionsFix[0],
+            image: undefined,
+          }}
+          isConnectModal={false}
+        />
+      </Provider>
+    );
+
+    expect(getByTestId("wallet-connection-fallback-logo")).toBeVisible();
+    expect(
+      getByText(
+        EN_TRANSLATIONS.connectwallet.connectionhistory.confirmconnect
+          .disconnectbtn
+      )
+    ).toBeVisible();
+  });
+
+  test("Confirm connect modal render: has no data", async () => {
+    const closeFn = jest.fn();
+    const confirmFn = jest.fn();
+    const deleteFn = jest.fn();
+
+    const { getByTestId, getByText } = render(
+      <Provider store={storeMocked}>
+        <ConfirmConnectModal
+          openModal={true}
+          closeModal={closeFn}
+          onConfirm={confirmFn}
+          onDeleteConnection={deleteFn}
+          isConnectModal={false}
+        />
+      </Provider>
+    );
+
+    expect(getByTestId("wallet-connection-fallback-logo")).toBeVisible();
+    expect(
+      getByText(
+        EN_TRANSLATIONS.connectwallet.connectionhistory.confirmconnect
+          .disconnectbtn
+      )
+    ).toBeVisible();
+
+    act(() => {
+      fireEvent.click(getByTestId("connection-id"));
+    });
+
+    await waitFor(() => {
+      expect(dispatchMock).not.toBeCalled();
+    });
+
+    act(() => {
+      fireEvent.click(getByTestId("action-button"));
+    });
+
+    expect(deleteFn).not.toBeCalled();
+  });
+});