Merge branch 'feature/web3-id' into update-sdk

packages/browser-wallet-api-helpers/src/wallet-api-types.ts

@@ -225,7 +225,7 @@ interface MainWalletApi {
     /**
      * Request that the user provides a proof for the given statements.
      * @param challenge bytes chosen by the verifier. Should be HEX encoded.
-     * @param statement the web3Id statements that should be proven.
+     * @param statements the web3Id statements that should be proven. The promise rejects if the array of statements is empty.
      * @returns The presentation for the statements.
      */
     requestVerifiablePresentation(challenge: string, statements: CredentialStatements): Promise<VerifiablePresentation>;

packages/browser-wallet-api/src/wallet-api.ts

@@ -290,6 +290,10 @@ class WalletApi extends EventEmitter implements IWalletApi {
     }
 
     public async requestVerifiablePresentation(challenge: HexString, statements: CredentialStatements) {
+        if (statements === undefined || statements.length === 0) {
+            throw new Error('A request for a verifiable presentation must contain statements');
+        }
+
         const res = await this.messageHandler.sendMessage<MessageStatusWrapper<string>>(MessageType.Web3IdProof, {
             // We have to stringify the statements because they can contain bigints
             statements: stringify(statements),

packages/browser-wallet/CHANGELOG.md

@@ -12,6 +12,8 @@
 -   Updated the JSON schema for the verifiable credential schema validation, so that invalid schemas are rejected.
 -   An issue where a verifiable with the `NotActivated` status would show as `Pending`.
 -   Enable validation of veriable presentation requests before opening the popup window.
+-   An issue that allowed empty credential statements to be accepted by the wallet-api.
+-   An issue where the wallet allowed for requests adding credentials with more attributes than listed in the schema.
 
 ## 1.1.2
 

packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/AddWeb3IdCredential.tsx

@@ -63,6 +63,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
     const network = useAtomValue(networkConfigurationAtom);
 
     const [error, setError] = useState<string>();
+    const [validationComplete, setValidationComplete] = useState<boolean>(false);
 
     const { credential: rawCredential, url, metadataUrl } = state.payload;
     const credential: APIVerifiableCredential = parse(rawCredential);
@@ -121,10 +122,24 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
             }
 
             if (missingRequiredAttributeKeys.length > 0) {
-                setError(t('error.attribute', { attributeKeys: missingRequiredAttributeKeys }));
+                setError(t('error.attribute.required', { attributeKeys: missingRequiredAttributeKeys }));
+                setValidationComplete(true);
+                return;
             }
+
+            // Ensure that a credential with more attributes than listed by the schema cannot be added.
+            const schemaAttributes = Object.keys(schema.properties.credentialSubject.properties.attributes.properties);
+            for (const credentialAttribute of Object.keys(credential.credentialSubject.attributes)) {
+                if (!schemaAttributes.includes(credentialAttribute)) {
+                    setError(t('error.attribute.additional', { credentialAttribute, schemaAttributes }));
+                    setValidationComplete(true);
+                    return;
+                }
+            }
+
+            setValidationComplete(true);
         }
-    }, [schema?.properties.credentialSubject.properties.attributes.required]);
+    }, [Boolean(schema)]);
 
     useEffect(() => () => controller.abort(), []);
 
@@ -193,7 +208,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
         return credentialSubjectId;
     }
 
-    if (web3IdCredentials.loading || storedWeb3IdCredentials.loading) {
+    if (web3IdCredentials.loading || storedWeb3IdCredentials.loading || !validationComplete) {
         return null;
     }
 
@@ -220,7 +235,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
                         />
                     </>
                 )}
-                <div className="flex justify-center m-t-auto m-b-20">
+                <div className="flex justify-center m-t-auto">
                     <Button width="medium" className="m-r-10" onClick={withClose(onReject)}>
                         {t('reject')}
                     </Button>

packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/i18n/en.ts

@@ -7,7 +7,11 @@ const t = {
             'We are unable to add the web3Id credential to the wallet due to the following issue, please report this to the issuer:',
         metadata: 'We are unable to load the metadata for the credential.',
         schema: 'We are unable to load the schema specification for the credential.',
-        attribute: 'The received credential is missing one or more required attributes ({{ attributeKeys }})',
+        attribute: {
+            required: 'The received credential is missing one or more required attributes ({{ attributeKeys }})',
+            additional:
+                'The attribute with key [{{ credentialAttribute }}] is not available in the list of schema attributes: [{{ schemaAttributes }}]',
+        },
         localization: 'Failed to get localization',
     },
 };

packages/browser-wallet/src/popup/pages/Allowlist/Allowlist.scss

@@ -47,7 +47,7 @@
         width: 100%;
         padding: rem(10px);
         padding-top: rem(0);
-        background: #eaf0f5;
+        background-color: $color-allowlist-background;
         border: rem(1px) solid #dae4ee;
         border-radius: rem(10px) rem(10px) 0 0;
     }

packages/browser-wallet/src/popup/shared/PopupMenu/PopupMenu.scss

@@ -1,14 +1,15 @@
 .popup-menu {
     width: 200px;
-    box-shadow: 0 0 20px rgb(0 0 0 / 15%);
+    box-shadow: 0 0 20px rgb(0 0 0 / $color-shadow-alpha);
     border-radius: 16px;
     display: flex;
     flex-direction: column;
-    background-color: $color-white;
+    opacity: 0.95;
+    background-color: $color-bg;
 
     &__item {
         &:hover {
-            background-color: lightgray;
+            background-color: rgb(0 0 0 / $color-shadow-alpha);
         }
 
         &:first-child {
@@ -28,7 +29,7 @@
         height: 44px;
 
         &:not(:last-child) {
-            border-bottom: 1px solid lightgray;
+            border-bottom: 1px solid rgb(0 0 0 / $color-shadow-alpha);
         }
 
         &--disabled {
@@ -41,6 +42,10 @@
             display: flex;
             align-items: center;
             justify-content: center;
+
+            path {
+                fill: $color-text;
+            }
         }
     }
 }

packages/browser-wallet/src/popup/shared/Topbar/Topbar.scss

@@ -40,6 +40,8 @@
         &__show {
             z-index: 1;
             display: block;
+            border-radius: 16px;
+            backdrop-filter: blur(2px);
         }
     }
 }

packages/browser-wallet/src/popup/styles/config/_colors.scss

@@ -39,6 +39,8 @@ $color-main-header-light: #f4f5f5;
 $color-highlight-mainnet-light: #e0e9ed;
 $color-highlight-testnet-light: #dde9e5;
 $color-status-box-light: $color-off-black;
+$color-allowlist-background-light: #eaf0f5;
+$color-shadow-alpha-light: 15%;
 
 // Dark mode
 $color-bg-dark: $color-off-black;
@@ -51,6 +53,8 @@ $color-main-header-dark: #111;
 $color-highlight-mainnet-dark: #203e4f;
 $color-highlight-testnet-dark: #1a3d3e;
 $color-status-box-dark: #313131;
+$color-allowlist-background-dark: #171818;
+$color-shadow-alpha-dark: 85%;
 
 // Theme variables
 $color-bg: var(--color-bg, $color-bg-light); // off-white/off-black
@@ -74,3 +78,5 @@ $color-highlight-mainnet: var(--color-highlight-mainnet, $color-highlight-mainne
 $color-highlight-testnet: var(--color-highlight-testnet, $color-highlight-testnet-light);
 $color-highlight: var(--color-highlight, $color-highlight-testnet);
 $color-status-box: var(--color-status-box, $color-status-box-light);
+$color-allowlist-background: var(--color-allowlist-background, $color-allowlist-background-light);
+$color-shadow-alpha: var(--color-shadow-alpha, $color-shadow-alpha-light);

packages/browser-wallet/src/popup/styles/elements/_base.scss

@@ -66,6 +66,8 @@ body {
         --color-main-header: #{$color-main-header-dark};
         --color-disabled-input-bg: #{$color-main-header-dark};
         --color-status-box: #{$color-status-box-dark};
+        --color-allowlist-background: #{$color-allowlist-background-dark};
+        --color-shadow-alpha: #{$color-shadow-alpha-dark};
 
         .bg {
             background-image: url('../assets/images/bg-dark.jpg');