feat(ui): implement paste connection peer id modal

src/locales/en/en.json

@@ -1121,9 +1121,30 @@
     "usernamecreationerror": "Unable to set name. Please try again.",
     "walletconnectiondeleted": "Delete successfully",
     "connectwalletsuccess": "Connected successfully",
-    "disconnectwallet": "Disconnected successfully"
+    "disconnectwallet": "Disconnected successfully",
+    "unableconnectwallet": "Unable to connect",
+    "peeridsuccess": "Peer ID successful",
+    "peeridnotrecognised": "Peer ID not recognised"
   },
   "request": {
+    "walletconnection": {
+      "stageone": {
+        "title": "Connect Cardano",
+        "back": "Back",
+        "message": "Would you like to establish a CIP-45 Connection?",
+        "alert": {
+          "titleconfirm": "Are you sure you want to decline this connection?",
+          "confirm": "Decline",
+          "cancel": "Cancel"
+        }
+      },
+      "stagetwo": {
+        "title": "Choose identifier",
+        "back": "Back",
+        "message": "Which KERI AID identifier would you like to make the connection with?",
+        "confirm": "Confirm"
+      }
+    },
     "connection": {
       "title": "Connect",
       "requestconnection": " request from",
@@ -1192,4 +1213,4 @@
       "usernameError": "Unable to set name. Please try again."
     }
   }
-}
+}

src/ui/components/CardList/CardList.tsx

@@ -40,7 +40,7 @@ const CardInfo = <T extends object = object>({
 
   return (
     <IonItem
-      onClick={() => onCardClick?.(card.data)}
+      onClick={(e) => onCardClick?.(card.data, e)}
       data-testid={`card-item-${card.id}`}
       className="card-item"
     >

src/ui/components/CardList/CardList.types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, MouseEvent as ReactMouseEvent } from "react";
 
 interface CardItem<T> {
   title: string;
@@ -11,7 +11,7 @@ interface CardItem<T> {
 interface CardItemProps<T> {
   card: CardItem<T>;
   onRenderCardAction?: (data: T) => ReactNode;
-  onCardClick?: (data: T) => void;
+  onCardClick?: (data: T, e: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
   onRenderEndSlot?: (data: T) => ReactNode;
 }
 

src/ui/components/ConnectModal/ConnectModal.tsx

@@ -19,6 +19,7 @@ const ConnectModal = ({
       icon: scanCircleOutline,
       label: i18n.t("connectmodal.scan"),
       onClick: () => {
+        setConnectModalIsOpen(false);
         dispatch(setCurrentOperation(OperationType.SCAN_CONNECTION));
       },
       testId: "add-connection-modal-scan-qr-code",

src/ui/components/VerifyPasscode/VerifyPasscode.tsx

@@ -113,6 +113,7 @@ const VerifyPasscode = ({
       onDidDismiss={() => handleClearState()}
     >
       <ResponsivePageLayout
+        activeStatus={isOpen}
         header={
           <PageHeader
             closeButton={true}

src/ui/pages/Menu/components/PasteConnectionPeerIdModal/PasteConnectionPeerIdModal.scss

@@ -0,0 +1,42 @@
+.input-pid-modal {
+  & ion-buttons.buttons-last-slot {
+    min-width: auto !important;
+
+    .action-button-label {
+      & > p {
+        color: var(--ion-color-action-blue) !important;
+      }
+    }
+  }
+
+  ion-input {
+    border-radius: 0.5rem;
+    border: 1px solid var(--ion-color-dark-grey);
+    margin-top: 0.5rem;
+    min-height: 1.25rem;
+
+    input {
+      overflow: hidden;
+      padding: 0.875rem 1.25rem !important;
+      font-size: 1rem;
+      font-weight: 400 !important;
+      color: var(--ion-color-secondary) !important;
+    }
+
+    &.has-focus {
+      border-color: var(--ion-color-secondary);
+    }
+  }
+
+  .secondary-button {
+    width: 100%;
+  }
+
+  @media screen and (min-width: 250px) and (max-width: 370px) {
+    ion-input {
+      input {
+        padding: 0.5rem 1rem !important;
+      }
+    }
+  }
+}

src/ui/pages/Menu/components/PasteConnectionPeerIdModal/PasteConnectionPeerIdModal.tsx

@@ -0,0 +1,63 @@
+import { IonButton, IonInput } from "@ionic/react";
+import { useState } from "react";
+import { i18n } from "../../../../../i18n";
+import { OptionModal } from "../../../../components/OptionsModal";
+import { PasteConnectionPeerIdModalProps } from "./PasteConnectionPeerIdModal.types";
+import "./PasteConnectionPeerIdModal.scss";
+
+const PasteConnectionPeerIdModal = ({
+  openModal,
+  onCloseModal,
+  onConfirm,
+  onScanQR,
+}: PasteConnectionPeerIdModalProps) => {
+  const [pid, setPid] = useState("");
+
+  const handleClose = () => {
+    setPid("");
+    onCloseModal();
+  };
+
+  const confirm = () => {
+    onConfirm(pid);
+    handleClose();
+  };
+
+  const handleScanQR = () => {
+    onScanQR();
+    handleClose();
+  };
+
+  return (
+    <OptionModal
+      modalIsOpen={openModal}
+      componentId="input-pid-modal"
+      onDismiss={handleClose}
+      customClasses="input-pid-modal"
+      header={{
+        closeButton: true,
+        closeButtonAction: handleClose,
+        closeButtonLabel: `${i18n.t("connectwallet.inputpidmodal.cancel")}`,
+        actionButton: true,
+        actionButtonLabel: `${i18n.t("connectwallet.inputpidmodal.confirm")}`,
+        actionButtonAction: confirm,
+        title: `${i18n.t("connectwallet.inputpidmodal.header")}`,
+      }}
+    >
+      <IonInput
+        data-testid="input-pid"
+        value={pid}
+        onIonInput={(event) => setPid(event.target.value as string)}
+      />
+      <IonButton
+        className="secondary-button"
+        data-testid="scanqr-btn"
+        onClick={handleScanQR}
+      >
+        {i18n.t("connectwallet.inputpidmodal.scanQR")}
+      </IonButton>
+    </OptionModal>
+  );
+};
+
+export { PasteConnectionPeerIdModal };

src/ui/pages/Menu/components/PasteConnectionPeerIdModal/PasteConnectionPeerIdModal.types.ts

@@ -0,0 +1,8 @@
+interface PasteConnectionPeerIdModalProps {
+  onConfirm: (pid: string) => void;
+  openModal: boolean;
+  onCloseModal: () => void;
+  onScanQR: () => void;
+}
+
+export type { PasteConnectionPeerIdModalProps };

src/ui/pages/Menu/components/PasteConnectionPeerIdModal/index.ts

@@ -0,0 +1 @@
+export * from "./PasteConnectionPeerIdModal";