Merge pull request #383 from Concordium/improve-credential-selector

Improve credential selector
Concordium · Sep 5, 2023 · 08aae81 · 08aae81
2 parents 15a2de7 + 3e0b852
commit 08aae81
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/packages/browser-wallet/CHANGELOG.md b/packages/browser-wallet/CHANGELOG.md
@@ -11,6 +11,7 @@
 -   Verifiable credentials are now validated according to the schema when being added. This will e.g. block setting an attribute as an integer if the schema defines it as a string.
 -   Refreshed the schema for credential schemas so that attribute types are now restricted as expected (`string`, `integer` and the special types are allowed).
 -   An issue where credential schemas were not updated with the correct key.
+-   UI improvements to the credential selector.
 
 ## 1.1.5
 

diff --git a/packages/browser-wallet/src/popup/pages/Web3ProofRequest/CredentialSelector.tsx b/packages/browser-wallet/src/popup/pages/Web3ProofRequest/CredentialSelector.tsx
@@ -2,6 +2,7 @@ import Button from '@popup/shared/Button';
 import Modal from '@popup/shared/Modal';
 import React, { ComponentType, useState } from 'react';
 import ArrowIcon from '@assets/svg/down-arrow.svg';
+import CheckmarkIcon from '@assets/svg/check_small.svg';
 
 interface Props<T> {
     /**
@@ -39,7 +40,8 @@ export default function CredentialSelector<T extends string | number | object>({
 
     return (
         <Modal
-            disableClose
+            stableScrollbarGutter
+            hideCloseButton
             open={open}
             onOpen={() => setOpen(true)}
             onClose={() => setOpen(false)}
@@ -63,6 +65,7 @@ export default function CredentialSelector<T extends string | number | object>({
                     onClick={() => onClick(index)}
                 >
                     <DisplayOption option={options[index]} />
+                    {chosenIndex === index && <CheckmarkIcon className="verifiable-credential__selector-item-icon" />}
                 </Button>
             ))}
         </Modal>

diff --git a/packages/browser-wallet/src/popup/pages/Web3ProofRequest/Web3ProofRequest.scss b/packages/browser-wallet/src/popup/pages/Web3ProofRequest/Web3ProofRequest.scss
@@ -226,10 +226,19 @@ $standard-box-shadow: 0 0 15px 0 rgb(0 0 0 / $color-shadow-alpha);
     &__selector-item {
         width: calc(100% - 32px);
         margin: 5px 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
         &:not(:last-child) {
             border-bottom: 1px solid $color-neutral-gray-10;
         }
+
+        &-icon {
+            height: 20px;
+            width: 20px;
+            margin-right: 10px;
+        }
     }
 
     &__selector-header {

diff --git a/packages/browser-wallet/src/popup/shared/Modal/Modal.tsx b/packages/browser-wallet/src/popup/shared/Modal/Modal.tsx
@@ -53,6 +53,8 @@ export type ModalProps<T extends WithOnClick = WithOnClick> = {
     bottom?: boolean;
     middle?: boolean;
     stableScrollbarGutter?: boolean;
+    // Determines whether to hide the close button if disableClose === true.
+    hideCloseButton?: boolean;
     /**
      * Used to overwrite styling for the modal content box
      */
@@ -79,6 +81,7 @@ export default function Modal<T extends WithOnClick = WithOnClick>({
     bottom = false,
     middle = false,
     stableScrollbarGutter = false,
+    hideCloseButton = false,
     children,
 }: PropsWithChildren<ModalProps<T>>): JSX.Element | null {
     const [{ isOpen, isExiting }, setOpenState] = useState<OpenState>({ isOpen: false, isExiting: false });
@@ -167,7 +170,9 @@ export default function Modal<T extends WithOnClick = WithOnClick>({
                                 transition={defaultTransition}
                                 onClickOutside={close}
                             >
-                                {!disableClose && <CloseButton className="modal__close" onClick={() => close()} />}
+                                {!disableClose && !hideCloseButton && (
+                                    <CloseButton className="modal__close" onClick={() => close()} />
+                                )}
                                 {children}
                             </DetectClickOutside>
                         )}