Improve proof UI

examples/add-example-Web3Id/index.html

@@ -19,6 +19,7 @@
 
                 function sendStatement(statement) {
                     // Should be not be hardcoded
+                    console.log(statement);
                     const challenge = '94d3e85bbc8ff0091e562ad8ef6c30d57f29b19f17c98ce155df2a30100dAAAA';
                     provider
                         .requestVerifiablePresentation(challenge, statement)
@@ -38,18 +39,37 @@
                 // Request proofs
                 document.getElementById('web3ProofWeb3IdOnly').addEventListener('click', () => {
                     const statement = new concordiumSDK.Web3StatementBuilder()
-                        .addForVerifiableCredentials([{ index: 5463n, subindex: 0n }], (b) =>
+                        .addForVerifiableCredentials([{ index: 6105n, subindex: 0n }], (b) =>
                             b
                                 .revealAttribute('degreeType')
+                                .revealAttribute('degreeName')
+                                .revealAttribute('graduationDate')
+                                .revealAttribute('test')
+                        )
+                        .addForVerifiableCredentials([{ index: 6105n, subindex: 0n }], (b) =>
+                            b
+                                .addNonMembership('degreeType', ['test', 'test2'])
                                 .addMembership('degreeName', ['Bachelor of Science and Arts', 'Bachelor of Finance'])
+                                .addRange(
+                                    'graduationDate',
+                                    new Date('1900-08-28T00:00:00.000Z'),
+                                    new Date('2030-08-28T00:00:00.000Z')
+                                )
                         )
+
                         .getStatements();
                     sendStatement(statement);
                 });
                 document.getElementById('web3ProofIdOnly').addEventListener('click', () => {
                     const statement = new concordiumSDK.Web3StatementBuilder()
                         .addForIdentityCredentials([0, 1, 2], (b) =>
-                            b.revealAttribute('firstName').addRange('dob', '08000101', '20000101')
+                            b
+                                .revealAttribute('idDocType')
+                                .revealAttribute('firstName')
+                                .revealAttribute('lastName')
+                                .revealAttribute('countryOfResidence')
+                                .addRange('dob', '19410101', '20050202')
+                                .addMembership('nationality', ['FR', 'ES', 'DK'])
                         )
                         .getStatements();
                     sendStatement(statement);
@@ -64,6 +84,10 @@
                                 .revealAttribute('degreeType')
                                 .addMembership('degreeName', ['Bachelor of Science and Arts', 'Bachelor of Finance'])
                         )
+                        .addForVerifiableCredentials([{ index: 6105n, subindex: 0n }], (b) =>
+                            b.revealAttribute('graduationDate')
+                        )
+
                         .getStatements();
                     sendStatement(statement);
                 });
@@ -72,7 +96,7 @@
                     const values = {
                         degreeType: degreeType.value,
                         degreeName: degreeName.value,
-                        graduationDate: graduationDate.valueAsDate.toISOString(),
+                        graduationDate: graduationDate.valueAsDate,
                     };
                     const metadataUrl = {
                         url: web3metadataUrl.value,
@@ -90,15 +114,22 @@
                                 attributes: values,
                             },
                             credentialSchema: {
-                                id: 'https://raw.githubusercontent.com/Concordium/concordium-web3id/main/examples/json-schemas/education-certificate/JsonSchema2023-education-certificate.json',
+                                id: web3Schema.value,
                                 type: 'JsonSchema2023',
                             },
                         },
                         metadataUrl,
                         async (id) => {
                             const body = {
                                 credentialSubject: {
-                                    attributes: values,
+                                    attributes: {
+                                        degreeType: degreeType.value,
+                                        degreeName: degreeName.value,
+                                        graduationDate: {
+                                            timestamp: graduationDate.valueAsDate.toISOString(),
+                                            type: 'date-time',
+                                        },
+                                    },
                                     id,
                                 },
                                 validFrom: new Date().toISOString(),
@@ -145,7 +176,14 @@ <h3 id="accountAddress">Account address:</h3>
             value="https://raw.githubusercontent.com/Concordium/concordium-web3id/credential-metadata-example/examples/json-schemas/metadata/credential-metadata.json"
         />
         <br />
-        issuer Index: <input type="number" id="issuerIndex" value="5463" />
+        Web3Id Schema:
+        <input
+            type="text"
+            id="web3Schema"
+            value="https://gist.githubusercontent.com/shjortConcordium/a2dc69761d2007c308f6511abaa3eb70/raw/11ad6745dcfa57e7049b08be146858a928a7aa82/gistfile1.txt"
+        />
+        <br />
+        issuer Index: <input type="number" id="issuerIndex" value="6105" />
         <br />
         <h3>Attribute values:</h3>
         degreeType: <input type="text" id="degreeType" value="BachelorDegree" />

packages/browser-wallet/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Added
+
+-   Indicator on proof request page, to show how many credential statements are requested, and the current position.
+
 ### Fixed
 
 -   An issue where Date attributes were saved as strings when exported. This would mean that they would lose typing and the credential would be broken.

packages/browser-wallet/src/background/window-management.ts

@@ -8,7 +8,7 @@ import {
     WalletMessage,
 } from '@concordium/browser-wallet-message-hub';
 
-import { Dimensions, small } from '@popup/constants/dimensions';
+import { Dimensions, large, small } from '@popup/constants/dimensions';
 import { spawnedPopupUrl } from '@shared/constants/url';
 import { noOp } from 'wallet-common-helpers';
 import bgMessageHandler, { onMessage } from './message-handler';
@@ -25,15 +25,19 @@ const getTopLeft = async (): Promise<{ top: number; left: number }> => {
 /**
  * Spawns a new popup on screen. Returning promise resolves when it receives a ready event from the popup
  */
-export const spawnPopup = async (): Promise<chrome.windows.Window> => {
+export const spawnPopup = async (messageType?: MessageType | InternalMessageType): Promise<chrome.windows.Window> => {
     const { top, left } = await getTopLeft();
 
     const window = chrome.windows.create({
-        url: spawnedPopupUrl,
+        // The Web3 ID proof popup has a separate size from other windows. Convery this by adjusting the URL, so that
+        // the scaling adjusts the window correctly.
+        url: messageType === MessageType.Web3IdProof ? `${spawnedPopupUrl}&web3idproof` : spawnedPopupUrl,
         type: 'popup',
         ...small,
         top,
         left,
+        width: large.width,
+        height: large.height,
     });
 
     // As the react app needs a chance to bootstrap, we need to wait for the ready signal.
@@ -79,11 +83,11 @@ export const setPopupSize = async ({ width, height }: Dimensions) => {
     }
 };
 
-export const openWindow = async () => {
+export const openWindow = async (messageType?: MessageType | InternalMessageType) => {
     const isOpen = await testPopupOpen();
 
     if (!isOpen) {
-        const { id } = await spawnPopup();
+        const { id } = await spawnPopup(messageType);
         popupId = id;
     } else {
         focusExisting();
@@ -97,7 +101,7 @@ const ensureAvailableWindow =
     (handler: ExtensionMessageHandler): ExtensionMessageHandler =>
     (...args) => {
         (async () => {
-            await openWindow();
+            await openWindow(args[0].messageType);
             handler(...args);
         })();
 

packages/browser-wallet/src/popup/index.scss

@@ -1,3 +1,9 @@
+// New styling
+
+@import 'styles-new/config/bundle';
+
+// Old styling
+
 @import 'styles/config/bundle';
 @import 'styles/elements/bundle';
 

packages/browser-wallet/src/popup/page-layouts/ExternalRequestLayout/ExternalRequestLayout.scss

@@ -4,7 +4,6 @@
     background-color: $color-bg;
 
     &__main {
-        padding: rem(10px);
         height: calc(100% - $account-page-details-height);
         overflow: overlay;
     }

packages/browser-wallet/src/popup/page-layouts/ExternalRequestLayout/ExternalRequestLayout.tsx

@@ -8,6 +8,7 @@ import Toast from '@popup/shared/Toast/Toast';
 import { useCredential } from '@popup/shared/utils/account-helpers';
 import AccountDetails from '@popup/pages/Account/AccountDetails';
 import clsx from 'clsx';
+import { ClassName } from 'wallet-common-helpers';
 
 function Header() {
     const { t } = useTranslation('mainLayout');
@@ -61,7 +62,7 @@ interface Props {
     children?: ReactNode;
 }
 
-export default function ExternalRequestLayout({ children }: Props) {
+export default function ExternalRequestLayout({ children, className }: Props & ClassName) {
     const { state } = useLocation() as Location;
     const account = useCredential(state.payload.accountAddress);
 
@@ -70,7 +71,9 @@ export default function ExternalRequestLayout({ children }: Props) {
             <Header />
             <div className="external-request-layout">
                 {account && <AccountDetails expanded={false} account={account} />}
-                <main className={clsx('external-request-layout__main', !account && 'h-full')}>{children}</main>
+                <main className={clsx('external-request-layout__main', !account && 'h-full', className)}>
+                    {children}
+                </main>
                 <Toast />
             </div>
         </>

packages/browser-wallet/src/popup/page-layouts/MainLayout/i18n/en.ts

@@ -20,7 +20,7 @@ const t = {
         connectAccountsRequest: 'Connect accounts',
         addTokens: 'Add tokens',
         idProof: 'Proof of identity',
-        web3IdProof: 'Proof of identity',
+        web3IdProof: 'Proof of identity request',
         request: 'Signature Request',
         connect: 'New connection',
         allowlistingRequest: 'Allowlisting request',

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

@@ -229,7 +229,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
 
     const urlDisplay = displayUrl(url);
     return (
-        <ExternalRequestLayout>
+        <ExternalRequestLayout className="p-10">
             <div className="flex-column h-full">
                 {error && (
                     <div className="add-web3Id-credential__error">

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

@@ -18,7 +18,7 @@ type Props = {
 };
 
 function LoadingConnectAccountsRequest() {
-    return <ExternalRequestLayout />;
+    return <ExternalRequestLayout className="p-10" />;
 }
 
 export default function ConnectAccountsRequest({ onAllow, onReject }: Props) {
@@ -51,7 +51,7 @@ export default function ConnectAccountsRequest({ onAllow, onReject }: Props) {
     const urlDisplay = displayUrl(url);
 
     return (
-        <ExternalRequestLayout>
+        <ExternalRequestLayout className="p-10">
             <div className="h-full flex-column align-center">
                 <header className="text-center">
                     <h3 className="m-v-5">{t('header', { url: urlDisplay })}</h3>

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

@@ -52,7 +52,7 @@ export default function ConnectionRequest({ onAllow, onReject }: Props) {
     const urlDisplay = displayUrl(url);
 
     return (
-        <ExternalRequestLayout>
+        <ExternalRequestLayout className="p-10">
             <div className="account-page__connection-box connection-request__connection-box">{t('waiting')}</div>
             <div className="h-full flex-column align-center">
                 <header className="m-v-20">

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

@@ -118,7 +118,7 @@ export default function SignMessage({ respond }: Props) {
     const allExisting = addingTokens.every(({ status }) => status === ChoiceStatus.existing);
 
     return (
-        <ExternalRequestLayout>
+        <ExternalRequestLayout className="p-10">
             <ConnectedBox accountAddress={accountAddress} url={new URL(url).origin} />
             {detailView !== undefined && (
                 <TokenDetails

packages/browser-wallet/src/popup/pages/IdProofRequest/DisplayStatement/DisplayStatement.tsx

@@ -34,11 +34,11 @@ export type StatementLine = {
     isRequirementMet: boolean;
 };
 
-type StatementLineProps = StatementLine;
+type StatementLineProps = StatementLine & ClassName;
 
-export function DisplayStatementLine({ attribute, value, isRequirementMet }: StatementLineProps) {
+export function DisplayStatementLine({ attribute, value, isRequirementMet, className }: StatementLineProps) {
     return (
-        <li className="display-statement__line">
+        <li className={clsx(className, 'display-statement__line')}>
             <div className="display-statement__line-attribute">{attribute}:</div>
             <div className="display-statement__line-value">
                 {value}

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

@@ -105,7 +105,7 @@ export default function IdProofRequest({ onReject, onSubmit }: Props) {
     }
 
     return (
-        <ExternalRequestLayout>
+        <ExternalRequestLayout className="p-10">
             <div className="id-proof-request">
                 <div>
                     <h3 className="m-t-0 text-center">{t('header', { dappName })}</h3>

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

@@ -110,7 +110,7 @@ export default function SendTransaction({ onSubmit, onReject }: Props) {
     }, [payload, key, cost]);
 
     return (
-        <ExternalRequestLayout>
+        <ExternalRequestLayout className="p-10">
             <ConnectedBox accountAddress={accountAddress} url={new URL(url).origin} />
             <div className="h-full flex-column align-center">
                 <h3 className="m-t-0 text-center">{t('description', { dApp: displayUrl(url) })}</h3>