Merge pull request #582 from Concordium/ui-update/verifiable-presenta…

…tion

UI update/verifiable presentation

packages/browser-wallet/package.json

@@ -23,6 +23,7 @@
         "@concordium/browser-wallet-api-helpers": "workspace:^",
         "@concordium/common-sdk": "^9.5.3",
         "@concordium/web-sdk": "^8.1.0",
+        "@floating-ui/react": "^0.27.2",
         "@noble/ed25519": "^1.7.0",
         "@protobuf-ts/grpcweb-transport": "^2.9.1",
         "@protobuf-ts/runtime-rpc": "^2.8.2",

packages/browser-wallet/src/popup/popupX/constants/routes.ts

@@ -316,6 +316,9 @@ export const relativeRoutes = {
         addWeb3IdCredential: {
             path: 'add-web3id-credential',
         },
+        web3IdProof: {
+            path: 'web3Id-proof',
+        },
     },
 };
 

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

@@ -54,7 +54,7 @@ interface Location {
 
 export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
     const { state } = useLocation() as Location;
-    const { t } = useTranslation('x', { keyPrefix: 'prompts.AddWeb3IdCredentialX' });
+    const { t } = useTranslation('x', { keyPrefix: 'prompts.addWeb3IdCredentialX' });
     const { i18n } = useTranslation();
     const { onClose, withClose } = useContext(fullscreenPromptContext);
     const [acceptButtonDisabled, setAcceptButtonDisabled] = useState<boolean>(false);

packages/browser-wallet/src/popup/popupX/pages/prompts/AddWeb3IdCredential/index.ts

@@ -0,0 +1 @@
+export { default } from './AddWeb3IdCredential';

packages/browser-wallet/src/popup/popupX/pages/prompts/IdProofRequest/DisplayStatement/DisplayStatement.scss

@@ -0,0 +1,76 @@
+$display-statement-color-success: $color-cta;
+$display-statement-color-invalid: $color-grey;
+
+.display-statement {
+    display: block;
+    border: 1px solid $display-statement-color-success;
+    border-radius: rem(5px);
+    background-color: $color-bg;
+
+    &--invalid {
+        border-color: $display-statement-color-invalid;
+    }
+
+    &__header {
+        padding: rem(5px);
+        border-radius: rem(4px) rem(4px) 0 0;
+        background-color: $display-statement-color-success;
+        color: $color-off-white;
+        display: flex;
+        justify-content: space-between;
+        font-size: rem(8px);
+
+        .display-statement--invalid & {
+            background-color: $display-statement-color-invalid;
+        }
+    }
+
+    &__header-icon {
+        height: rem(15px);
+        flex: 0 0 auto;
+    }
+
+    &__line {
+        display: flex;
+        width: 100%;
+        align-items: flex-end;
+        justify-content: space-between;
+    }
+
+    &__line-value {
+        display: flex;
+        align-items: center;
+        text-align: right;
+    }
+
+    &__line-check,
+    &__line-cross,
+    &__requirements-icon {
+        height: rem(7px);
+        margin-left: rem(5px);
+    }
+
+    &__line-cross path {
+        fill: $color-error;
+    }
+
+    &__line-check path {
+        .display-statement--invalid & {
+            fill: $color-grey;
+        }
+    }
+
+    &__description {
+        font-size: rem(8px);
+        padding: 0 rem(5px) rem(5px);
+        white-space: break-spaces;
+    }
+
+    &__tooltip-icon {
+        height: rem(10px);
+    }
+
+    &__requirements-icon path {
+        fill: $color-off-white;
+    }
+}

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

@@ -0,0 +1,66 @@
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { DisplayStatementView } from './DisplayStatement';
+
+export default {
+    title: 'Pages/IdProofRequest/DisplayStatement',
+    component: DisplayStatementView,
+} as Meta<typeof DisplayStatementView>;
+
+type Story = StoryObj<typeof DisplayStatementView>;
+
+const render: Story['render'] = (args) => {
+    return (
+        <div style={{ width: 330 }}>
+            <DisplayStatementView className="w-full" {...args} />
+        </div>
+    );
+};
+
+export const ValidRevealAttributes: Story = {
+    args: {
+        dappName: 'Test dApp',
+        header: 'Information to reveal',
+        reveal: true,
+        lines: [
+            { attribute: 'First name', value: 'John', isRequirementMet: true },
+            { attribute: 'Last name', value: 'Johnson', isRequirementMet: true },
+        ],
+    },
+    render,
+};
+export const InvalidRevealAttributes: Story = {
+    args: {
+        dappName: 'Test dApp',
+        header: 'Information to reveal',
+        reveal: true,
+        lines: [
+            { attribute: 'First name', value: 'John', isRequirementMet: true },
+            { attribute: 'Last name', value: 'Johnson', isRequirementMet: true },
+            { attribute: 'ID document type', value: 'Passport', isRequirementMet: false },
+        ],
+    },
+    render,
+};
+export const ValidSecretProof: Story = {
+    args: {
+        dappName: 'Test dApp',
+        header: 'Secret proof of age',
+        reveal: false,
+        description: 'You date of birth is before YYYY-MM-DD.',
+        lines: [{ attribute: 'Age', value: 'More than X years old', isRequirementMet: true }],
+    },
+    render,
+};
+export const InvalidSecretProof: Story = {
+    args: {
+        dappName: 'Test dApp',
+        header: 'Secret proof of identity document issuer',
+        reveal: false,
+        description:
+            'Your identity document issuer is one of the following:\nAndorra, United Arab Emirates, Afghanistan, Antigua and Barbuda, Anguilla, Albania, Benin, Brazil, Bahamas, Bhutan, Belize, Canada, Chile, Spain, Finland, Fiji, Ghana, Hong Kong, Indonesia, Korea, Mali, Malta, Malawi, Mexico, Mozambique, Namibia, Nigeria, Nicaragua, Panama, Peru',
+        lines: [{ attribute: 'Document issuer', value: '1 of 30 issuers', isRequirementMet: false }],
+    },
+    render,
+};