Improve credential selector

packages/browser-wallet/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Fixed
+
+-   UI improvements to the credential selector.
+
 ## 1.1.5
 
 ### Added

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
+            showCloseButton={false}
             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>

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 {

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 show the close button if disableClose === true.
+    showCloseButton?: 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,
+    showCloseButton = true,
     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 && showCloseButton && (
+                                    <CloseButton className="modal__close" onClick={() => close()} />
+                                )}
                                 {children}
                             </DetectClickOutside>
                         )}