fix: rename functions and vars in frontend, document ducks and hooks (#…

…876)
CryptKeeperZK · Sep 15, 2023 · 123e7f0 · 123e7f0
1 parent b7e33b5
commit 123e7f0
Show file tree

Hide file tree

Showing 23 changed files with 396 additions and 400 deletions.
diff --git a/packages/app/src/background/cryptKeeper.ts b/packages/app/src/background/cryptKeeper.ts
@@ -231,7 +231,7 @@ export default class CryptKeeperController {
     this.handler.add(
       RPCAction.GET_ALL_VERIFIABLE_CREDENTIALS,
       this.lockService.ensure,
-      this.verifiableCredentialsService.getAllVC,
+      this.verifiableCredentialsService.getAllVCs,
     );
     this.handler.add(
       RPCAction.DELETE_VERIFIABLE_CREDENTIAL,
@@ -241,7 +241,7 @@ export default class CryptKeeperController {
     this.handler.add(
       RPCAction.DELETE_ALL_VERIFIABLE_CREDENTIALS,
       this.lockService.ensure,
-      this.verifiableCredentialsService.deleteAllVC,
+      this.verifiableCredentialsService.deleteAllVCs,
     );
     this.handler.add(
       RPCAction.ANNOUNCE_VERIFIABLE_PRESENTATION,

diff --git a/packages/app/src/background/services/credentials/__tests__/credentials.test.ts b/packages/app/src/background/services/credentials/__tests__/credentials.test.ts
@@ -261,7 +261,7 @@ describe("background/services/credentials", () => {
       });
 
       credentialsStorage.get.mockReturnValue(credentialsStorageString);
-      const verifiableCredentials = await verifiableCredentialsService.getAllVC();
+      const verifiableCredentials = await verifiableCredentialsService.getAllVCs();
 
       expect(verifiableCredentials.length).toBe(2);
       expect(verifiableCredentials[0].verifiableCredential).toEqual(exampleCredential);
@@ -319,7 +319,7 @@ describe("background/services/credentials", () => {
       credentialsStorage.get.mockReturnValue(credentialsStorageString);
       credentialsStorage.set.mockReturnValue(undefined);
 
-      await verifiableCredentialsService.deleteAllVC();
+      await verifiableCredentialsService.deleteAllVCs();
 
       expect(credentialsStorage.clear).toBeCalledTimes(1);
     });
@@ -329,7 +329,7 @@ describe("background/services/credentials", () => {
       credentialsStorage.get.mockReturnValue(undefined);
       credentialsStorage.set.mockReturnValue(undefined);
 
-      await expect(verifiableCredentialsService.deleteAllVC()).rejects.toThrow("No Verifiable Credentials to delete.");
+      await expect(verifiableCredentialsService.deleteAllVCs()).rejects.toThrow("No Verifiable Credentials to delete.");
       expect(credentialsStorage.clear).toBeCalledTimes(0);
     });
   });

diff --git a/packages/app/src/background/services/credentials/index.ts b/packages/app/src/background/services/credentials/index.ts
@@ -70,13 +70,13 @@ export default class VerifiableCredentialsService implements IBackupable {
 
   /**
    * Handle a request to add a Verifiable Credential. Opens a popup to confirm the request.
-   * @param serializedVerifiableCredential - The serialized Verifiable Credential to add.
+   * @param serializedVC - The serialized Verifiable Credential to add.
    * @returns A promise that resolves when the popup is opened.
    */
-  handleVCRequest = async (serializedVerifiableCredential: string): Promise<void> => {
-    await validateSerializedVC(serializedVerifiableCredential);
+  handleVCRequest = async (serializedVC: string): Promise<void> => {
+    await validateSerializedVC(serializedVC);
     await this.browserController.openPopup({
-      params: { redirect: Paths.ADD_VERIFIABLE_CREDENTIAL, serializedVerifiableCredential },
+      params: { redirect: Paths.ADD_VERIFIABLE_CREDENTIAL, serializedVerifiableCredential: serializedVC },
     });
   };
 
@@ -97,12 +97,12 @@ export default class VerifiableCredentialsService implements IBackupable {
 
   /**
    * Adds a Verifiable Credential to the store.
-   * @param addVCArgs - The arguments to add a Verifiable Credential.
+   * @param serializedVerifiableCredential - The serialized Verifiable Credential to add.
+   * @param verifiableCredentialName - User defined name for the Verifiable Credential.
    * @returns A promise that resolves when the Verifiable Credential is added.
    * @throws An error if the Verifiable Credential is invalid or already exists.
    */
-  addVC = async (addVCArgs: IAddVCArgs): Promise<void> => {
-    const { serializedVerifiableCredential, verifiableCredentialName } = addVCArgs;
+  addVC = async ({ serializedVerifiableCredential, verifiableCredentialName }: IAddVCArgs): Promise<void> => {
     if (!serializedVerifiableCredential) {
       throw new Error("Serialized Verifiable Credential is required.");
     }
@@ -128,18 +128,18 @@ export default class VerifiableCredentialsService implements IBackupable {
 
   /**
    * Renames a Verifiable Credential.
-   * @param renameVCArgs - The arguments to rename a Verifiable Credential.
+   * @param verifiableCredentialHash - The hash of the Verifiable Credential to rename.
+   * @param newVerifiableCredentialName - The new name for the Verifiable Credential.
    * @returns A promise that resolves when the Verifiable Credential is renamed.
    * @throws An error if the Verifiable Credential does not exist.
    * @throws An error if the Verifiable Credential hash or name is missing.
    */
-  renameVC = async (renameVCArgs: IRenameVCArgs): Promise<void> => {
-    const { verifiableCredentialHash, newVerifiableCredentialName } = renameVCArgs;
+  renameVC = async ({ verifiableCredentialHash, newVerifiableCredentialName }: IRenameVCArgs): Promise<void> => {
     if (!verifiableCredentialHash || !newVerifiableCredentialName) {
       throw new Error("Verifiable Credential hash and name are required.");
     }
 
-    const cryptkeeperVCs = await this.getCryptkeeperVCFromStore();
+    const cryptkeeperVCs = await this.getCryptkeeperVCsFromStore();
 
     if (!cryptkeeperVCs.has(verifiableCredentialHash)) {
       throw new Error("Verifiable Credential does not exist.");
@@ -150,7 +150,7 @@ export default class VerifiableCredentialsService implements IBackupable {
 
     cryptkeeperVC.metadata.name = newVerifiableCredentialName;
     cryptkeeperVCs.set(verifiableCredentialHash, serializeCryptkeeperVC(cryptkeeperVC));
-    await this.writeCryptkeeperVC(cryptkeeperVCs);
+    await this.writeCryptkeeperVCs(cryptkeeperVCs);
     await this.announce({
       notificationTitle: "Verifiable Credential renamed.",
       notificationMessage: `Renamed 1 Verifiable Credential.`,
@@ -163,33 +163,33 @@ export default class VerifiableCredentialsService implements IBackupable {
    * Gets all Verifiable Credentials from the store.
    * @returns A promise that resolves with the list of Verifiable Credentials.
    */
-  getAllVC = async (): Promise<ICryptkeeperVerifiableCredential[]> => {
-    const cryptkeeperVCs = await this.getCryptkeeperVCFromStore();
+  getAllVCs = async (): Promise<ICryptkeeperVerifiableCredential[]> => {
+    const cryptkeeperVCs = await this.getCryptkeeperVCsFromStore();
     const cryptkeeperVCList = Array.from(cryptkeeperVCs.values());
 
     return Promise.all(cryptkeeperVCList.map(async (cryptkeeperVC) => deserializeCryptkeeperVC(cryptkeeperVC)));
   };
 
   /**
    * Deletes a Verifiable Credential from the store.
-   * @param verifiableCredentialHash - The hash of the Verifiable Credential to delete.
+   * @param vcHash - The hash of the Verifiable Credential to delete.
    * @returns A promise that resolves when the Verifiable Credential is deleted.
    * @throws An error if the Verifiable Credential does not exist.
    * @throws An error if the Verifiable Credential hash is missing.
    */
-  deleteVC = async (verifiableCredentialHash: string): Promise<void> => {
-    if (!verifiableCredentialHash) {
+  deleteVC = async (vcHash: string): Promise<void> => {
+    if (!vcHash) {
       throw new Error("Verifiable Credential hash is required.");
     }
 
-    const cryptkeeperVCs = await this.getCryptkeeperVCFromStore();
+    const cryptkeeperVCs = await this.getCryptkeeperVCsFromStore();
 
-    if (!cryptkeeperVCs.has(verifiableCredentialHash)) {
+    if (!cryptkeeperVCs.has(vcHash)) {
       throw new Error("Verifiable Credential does not exist.");
     }
 
-    cryptkeeperVCs.delete(verifiableCredentialHash);
-    await this.writeCryptkeeperVC(cryptkeeperVCs);
+    cryptkeeperVCs.delete(vcHash);
+    await this.writeCryptkeeperVCs(cryptkeeperVCs);
 
     await this.announce({
       notificationTitle: "Verifiable Credential deleted.",
@@ -204,8 +204,8 @@ export default class VerifiableCredentialsService implements IBackupable {
    * @returns A promise that resolves when all Verifiable Credentials are deleted.
    * @throws An error if there are no Verifiable Credentials to delete.
    */
-  deleteAllVC = async (): Promise<void> => {
-    const cryptkeeperVCs = await this.getCryptkeeperVCFromStore();
+  deleteAllVCs = async (): Promise<void> => {
+    const cryptkeeperVCs = await this.getCryptkeeperVCsFromStore();
 
     if (cryptkeeperVCs.size === 0) {
       throw new Error("No Verifiable Credentials to delete.");
@@ -309,7 +309,7 @@ export default class VerifiableCredentialsService implements IBackupable {
   private insertCryptkeeperVCIntoStore = async (cryptkeeperVC: ICryptkeeperVerifiableCredential): Promise<void> => {
     const vcHash = cryptkeeperVC.metadata.hash;
 
-    const cryptkeeperVCs = await this.getCryptkeeperVCFromStore();
+    const cryptkeeperVCs = await this.getCryptkeeperVCsFromStore();
 
     if (cryptkeeperVCs.has(vcHash)) {
       await this.announce({
@@ -322,7 +322,7 @@ export default class VerifiableCredentialsService implements IBackupable {
     }
 
     cryptkeeperVCs.set(vcHash, serializeCryptkeeperVC(cryptkeeperVC));
-    await this.writeCryptkeeperVC(cryptkeeperVCs);
+    await this.writeCryptkeeperVCs(cryptkeeperVCs);
 
     await this.announce({
       notificationTitle: "Verifiable Credential added.",
@@ -338,7 +338,7 @@ export default class VerifiableCredentialsService implements IBackupable {
    * Gets all Verifiable Credentials from the store.
    * @returns A promise that resolves with a map from Verifiable Credential hash to serialized Verifiable Credential.
    */
-  private getCryptkeeperVCFromStore = async (): Promise<Map<string, string>> => {
+  private getCryptkeeperVCsFromStore = async (): Promise<Map<string, string>> => {
     const ciphertext = await this.verifiableCredentialsStore.get<string>();
 
     if (!ciphertext) {
@@ -356,7 +356,7 @@ export default class VerifiableCredentialsService implements IBackupable {
    * @param cryptkeeperVCs - The map from Verifiable Credential hash to serialized Verifiable Credential.
    * @returns A promise that resolves when the Verifiable Credentials are written.
    */
-  private writeCryptkeeperVC = async (cryptkeeperVCs: Map<string, string>): Promise<void> => {
+  private writeCryptkeeperVCs = async (cryptkeeperVCs: Map<string, string>): Promise<void> => {
     const serializedCredentials = JSON.stringify(Array.from(cryptkeeperVCs));
     const ciphertext = this.cryptoService.encrypt(serializedCredentials, { mode: ECryptMode.MNEMONIC });
 
@@ -470,9 +470,9 @@ export default class VerifiableCredentialsService implements IBackupable {
     const backup = this.cryptoService.decrypt(encryptedBackup, { secret: backupPassword });
 
     const backupCredentials = new Map(JSON.parse(backup) as [string, string][]);
-    const cryptkeeperVCs = await this.getCryptkeeperVCFromStore();
+    const cryptkeeperVCs = await this.getCryptkeeperVCsFromStore();
     const mergedCredentials = new Map([...cryptkeeperVCs, ...backupCredentials]);
 
-    await this.writeCryptkeeperVC(mergedCredentials);
+    await this.writeCryptkeeperVCs(mergedCredentials);
   };
 }
diff --git a/packages/app/src/ui/components/VerifiableCredential/Display/VerifiableCredentialDisplay.tsx b/packages/app/src/ui/components/VerifiableCredential/Display/VerifiableCredentialDisplay.tsx
@@ -10,21 +10,21 @@ import { ICryptkeeperVerifiableCredential } from "@src/types";
 import { useVerifiableCredentialDisplay } from "./useVerifiableCredentialDisplay";
 
 export interface VerifiableCredentialDisplayProps {
-  cryptkeeperVerifiableCredential: ICryptkeeperVerifiableCredential;
-  onRenameVerifiableCredential: (name: string) => void;
+  cryptkeeperVC: ICryptkeeperVerifiableCredential;
+  onRenameVC: (name: string) => void;
 }
 
 export const VerifiableCredentialDisplay = ({
-  cryptkeeperVerifiableCredential,
-  onRenameVerifiableCredential,
+  cryptkeeperVC,
+  onRenameVC,
 }: VerifiableCredentialDisplayProps): JSX.Element => {
-  const initialName = cryptkeeperVerifiableCredential.metadata.name;
+  const initialName = cryptkeeperVC.metadata.name;
   const { isRenaming, name, register, onSubmit, onToggleRenaming } = useVerifiableCredentialDisplay({
     initialName,
-    onRename: onRenameVerifiableCredential,
+    onRename: onRenameVC,
   });
 
-  const { verifiableCredential } = cryptkeeperVerifiableCredential;
+  const { verifiableCredential } = cryptkeeperVC;
   const issuerId =
     typeof verifiableCredential.issuer === "string" ? verifiableCredential.issuer : verifiableCredential.issuer.id;
   const expirationDate = verifiableCredential.expirationDate ? verifiableCredential.expirationDate.toString() : "N/A";
@@ -35,11 +35,16 @@ export const VerifiableCredentialDisplay = ({
         display: "flex",
         flexDirection: "column",
         alignItems: "left",
-        m: 1,
+        mt: 1,
         width: "100%",
         overflowX: "hidden",
         overflowY: "auto",
         overflowWrap: "anywhere",
+        scrollbarWidth: "none",
+
+        "&::-webkit-scrollbar": {
+          display: "none",
+        },
       }}
     >
       {isRenaming ? (

diff --git a/...ui/components/VerifiableCredential/Display/__tests__/VerifiableCredentialDisplay.test.tsx b/...ui/components/VerifiableCredential/Display/__tests__/VerifiableCredentialDisplay.test.tsx
@@ -23,7 +23,7 @@ jest.mock("@src/ui/ducks/verifiableCredentials", (): unknown => ({
 
 describe("ui/components/VerifiableCredential/Display", () => {
   const defaultProps: VerifiableCredentialDisplayProps = {
-    cryptkeeperVerifiableCredential: {
+    cryptkeeperVC: {
       verifiableCredential: {
         context: ["https://www.w3.org/2018/credentials/v1"],
         id: "http://example.edu/credentials/3732",
@@ -43,7 +43,7 @@ describe("ui/components/VerifiableCredential/Display", () => {
         name: "Credential #0",
       },
     },
-    onRenameVerifiableCredential: jest.fn(),
+    onRenameVC: jest.fn(),
   };
 
   beforeEach(() => {
@@ -57,13 +57,11 @@ describe("ui/components/VerifiableCredential/Display", () => {
   test("should render properly", async () => {
     render(<VerifiableCredentialDisplay {...defaultProps} />);
 
-    const name = await screen.findByText(defaultProps.cryptkeeperVerifiableCredential.metadata.name);
-    const type = await screen.findByText(defaultProps.cryptkeeperVerifiableCredential.verifiableCredential.type[0]);
-    const issuer = await screen.findByText(
-      defaultProps.cryptkeeperVerifiableCredential.verifiableCredential.issuer as string,
-    );
+    const name = await screen.findByText(defaultProps.cryptkeeperVC.metadata.name);
+    const type = await screen.findByText(defaultProps.cryptkeeperVC.verifiableCredential.type[0]);
+    const issuer = await screen.findByText(defaultProps.cryptkeeperVC.verifiableCredential.issuer as string);
     const issuanceDate = await screen.findByText(
-      defaultProps.cryptkeeperVerifiableCredential.verifiableCredential.issuanceDate.toString(),
+      defaultProps.cryptkeeperVC.verifiableCredential.issuanceDate.toString(),
     );
 
     expect(name).toBeInTheDocument();
@@ -73,7 +71,7 @@ describe("ui/components/VerifiableCredential/Display", () => {
   });
 
   test("should rename identity properly", async () => {
-    (defaultProps.onRenameVerifiableCredential as jest.Mock).mockResolvedValue(true);
+    (defaultProps.onRenameVC as jest.Mock).mockResolvedValue(true);
 
     render(<VerifiableCredentialDisplay {...defaultProps} />);
 
@@ -89,7 +87,7 @@ describe("ui/components/VerifiableCredential/Display", () => {
     const submitRenameIcon = await screen.findByTestId("verifiable-credential-display-submit-rename");
     fireEvent.click(submitRenameIcon);
 
-    expect(defaultProps.onRenameVerifiableCredential).toBeCalledTimes(1);
-    expect(defaultProps.onRenameVerifiableCredential).toBeCalledWith("My Favorite Credential");
+    expect(defaultProps.onRenameVC).toBeCalledTimes(1);
+    expect(defaultProps.onRenameVC).toBeCalledWith("My Favorite Credential");
   });
 });
diff --git a/...ages/app/src/ui/components/VerifiableCredential/Display/useVerifiableCredentialDisplay.ts b/...ages/app/src/ui/components/VerifiableCredential/Display/useVerifiableCredentialDisplay.ts
@@ -33,10 +33,16 @@ export const useVerifiableCredentialDisplay = (
 
   const [isRenaming, setIsRenaming] = useState(false);
 
+  /**
+   * Toggles the renaming state.
+   */
   const onToggleRenaming = useCallback(() => {
     setIsRenaming((value) => !value);
   }, [setIsRenaming]);
 
+  /**
+   * Triggers renaming of the Verifiable Credential.
+   */
   const onSubmit = useCallback(
     (event: ReactFormEvent<HTMLFormElement>) => {
       event.preventDefault();

diff --git a/packages/app/src/ui/components/VerifiableCredential/Item/VerifiableCredentialItem.tsx b/packages/app/src/ui/components/VerifiableCredential/Item/VerifiableCredentialItem.tsx
@@ -18,25 +18,25 @@ export interface VerifiableCredentialItemProps {
   verifiableCredential: IVerifiableCredential;
   metadata: IVerifiableCredentialMetadata;
   selected?: boolean;
-  onRenameVerifiableCredential?: (hash: string, name: string) => Promise<void>;
-  onDeleteVerifiableCredential?: (hash: string) => Promise<void>;
-  onToggleSelectVerifiableCredential?: (hash: string) => void;
+  onRenameVC?: (hash: string, name: string) => Promise<void>;
+  onDeleteVC?: (hash: string) => Promise<void>;
+  onToggleSelectVC?: (hash: string) => void;
 }
 
 export const VerifiableCredentialItem = ({
   verifiableCredential,
   metadata,
   selected = undefined,
-  onRenameVerifiableCredential = undefined,
-  onDeleteVerifiableCredential = undefined,
-  onToggleSelectVerifiableCredential = undefined,
+  onRenameVC = undefined,
+  onDeleteVC = undefined,
+  onToggleSelectVC = undefined,
 }: VerifiableCredentialItemProps): JSX.Element => {
   const { isRenaming, name, register, onSubmit, onToggleRenaming, onDelete, onToggleSelect } =
     useVerifiableCredentialItem({
       metadata,
-      onRename: onRenameVerifiableCredential,
-      onDelete: onDeleteVerifiableCredential,
-      onSelect: onToggleSelectVerifiableCredential,
+      onRename: onRenameVC,
+      onDelete: onDeleteVC,
+      onSelect: onToggleSelectVC,
     });
 
   const menuItems = [
@@ -51,7 +51,7 @@ export const VerifiableCredentialItem = ({
 
   const isSelectorEnabled = selected !== undefined;
 
-  const isMenuEnabled = onRenameVerifiableCredential !== undefined && onDeleteVerifiableCredential !== undefined;
+  const isMenuEnabled = onRenameVC !== undefined && onDeleteVC !== undefined;
 
   return (
     <Box