UI update/web3id overview

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

@@ -1,4 +1,4 @@
-import { AccountAddress, TransactionHash } from '@concordium/web-sdk';
+import { AccountAddress, ContractAddress, TransactionHash } from '@concordium/web-sdk';
 import { generatePath } from 'react-router-dom';
 import i18n from '@popup/shell/i18n';
 
@@ -172,6 +172,12 @@ export const relativeRoutes = {
             import: {
                 path: 'import',
             },
+            details: {
+                path: ':sci/:holderId',
+                config: {
+                    backTitle: i18n.t('x:web3Id.credentials.title'),
+                },
+            },
         },
         network: {
             path: 'network',
@@ -344,6 +350,12 @@ export const submittedTransactionRoute = (tx: TransactionHash.Type) =>
 export const sendFundsRoute = (account: AccountAddress.Type) =>
     generatePath(absoluteRoutes.home.sendFunds.path, { account: account.address });
 
+export const web3IdDetailsRoute = (contract: ContractAddress.Type, holderId: string) =>
+    generatePath(absoluteRoutes.settings.web3Id.details.path, {
+        sci: `${contract.index}-${contract.subindex}`,
+        holderId,
+    });
+
 /**
  * Given two absolute routes, returns the relative route between them.
  * Note: fromPath should be a prefix of toPath.

packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3Id.scss

@@ -1,5 +1,12 @@
-.web-id-x {
-    &.credintials {
+.web3-id-x {
+    &__card {
+        background: none;
+        padding: 0;
+        border: none;
+        text-align: left;
+    }
+
+    &.credentials {
         .page__main {
             display: flex;
             flex-direction: column;

packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdCredentials.tsx

@@ -5,21 +5,38 @@ import Page from '@popup/popupX/shared/Page';
 import Button from '@popup/popupX/shared/Button';
 import Web3IdCard from '@popup/popupX/shared/Web3IdCard';
 import { useNavigate } from 'react-router-dom';
-import { relativeRoutes } from '@popup/popupX/constants/routes';
+import { relativeRoutes, web3IdDetailsRoute } from '@popup/popupX/constants/routes';
+import { useAtomValue } from 'jotai';
+import { storedVerifiableCredentialsAtom } from '@popup/store/verifiable-credential';
+import { VerifiableCredential } from '@shared/storage/types';
+import { ContractAddress } from '@concordium/web-sdk';
 
 export default function Web3IdCredentials() {
     const { t } = useTranslation('x', { keyPrefix: 'web3Id.credentials' });
+    const verifiableCredentials = useAtomValue(storedVerifiableCredentialsAtom);
     const nav = useNavigate();
-    const navToImport = () => nav(relativeRoutes.settings.web3Id.import.path);
+
+    const toDetails = (vc: VerifiableCredential) => {
+        const [, index, subindex, id] =
+            vc.id.match(/.*:sci:(\d*):(\d*)\/credentialEntry\/(.*)$/) ??
+            (() => {
+                throw new Error('Invalid ID found in verifiable credential');
+            })();
+        const contract = ContractAddress.create(BigInt(index), BigInt(subindex));
+        nav(web3IdDetailsRoute(contract, id));
+    };
 
     return (
-        <Page className="web-id-x credintials">
-            <Page.Top heading={t('webId')}>
-                <Button.Icon icon={<Plus />} onClick={navToImport} />
+        <Page className="web3-id-x credentials">
+            <Page.Top heading={t('title')}>
+                <Button.Icon icon={<Plus />} onClick={() => nav(relativeRoutes.settings.web3Id.import.path)} />
             </Page.Top>
             <Page.Main>
-                <Web3IdCard />
-                <Web3IdCard />
+                {verifiableCredentials.value.map((vc) => (
+                    <Button.Base key={vc.id} className="web3-id-x__card" onClick={() => toDetails(vc)}>
+                        <Web3IdCard credential={vc} />
+                    </Button.Base>
+                ))}
             </Page.Main>
         </Page>
     );

packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdDetails.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Page from '@popup/popupX/shared/Page';
+import { useTranslation } from 'react-i18next';
+import Web3IdCard from '@popup/popupX/shared/Web3IdCard';
+import { useAtomValue } from 'jotai';
+import { storedVerifiableCredentialsAtom } from '@popup/store/verifiable-credential';
+import { ContractAddress, HexString } from '@concordium/web-sdk';
+import { Navigate, useParams } from 'react-router-dom';
+import { absoluteRoutes } from '@popup/popupX/constants/routes';
+import { networkConfigurationAtom } from '@popup/store/settings';
+import { createCredentialId } from '@shared/utils/verifiable-credential-helpers';
+
+type Props = {
+    contract: ContractAddress.Type;
+    id: HexString;
+};
+
+function Web3IdDetailsParsed({ id, contract }: Props) {
+    const { t } = useTranslation('x', { keyPrefix: 'web3Id.details' });
+    const verifiableCredentials = useAtomValue(storedVerifiableCredentialsAtom);
+    const net = useAtomValue(networkConfigurationAtom);
+    const credential = verifiableCredentials.value.find((c) => c.id === createCredentialId(id, contract, net));
+
+    if (verifiableCredentials.loading) return null;
+    if (credential === undefined) throw new Error('Expected to find credential');
+
+    return (
+        <Page>
+            <Page.Top heading={t('title')} />
+            <Page.Main>
+                <Web3IdCard credential={credential} />
+            </Page.Main>
+        </Page>
+    );
+}
+
+export default function Web3IdDetails() {
+    const params = useParams();
+
+    if (params.sci === undefined || params.holderId === undefined) {
+        return <Navigate to={absoluteRoutes.settings.web3Id.path} replace />;
+    }
+
+    const [index, subindex] = params.sci.split('-');
+    const contract = ContractAddress.create(BigInt(index), BigInt(subindex));
+
+    return <Web3IdDetailsParsed contract={contract} id={params.holderId} />;
+}

packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdImport.tsx

@@ -11,7 +11,7 @@ export default function Web3IdImport() {
     const { t } = useTranslation('x', { keyPrefix: 'web3Id.import' });
 
     return (
-        <Page className="web-id-x import">
+        <Page className="web3-id-x import">
             <Page.Top heading={t('importWeb3Id')} />
             <Page.Main>
                 <Card>

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

@@ -1,13 +1,16 @@
 const t = {
     credentials: {
-        webId: 'Web3 ID Credentials',
-        noCredentials: 'There’s no Web3 ID Credentials',
+        title: 'Web3 ID Credentials',
+        noCredentials: 'There are no Web3 ID Credentials',
     },
     import: {
         importWeb3Id: 'Import Web3 ID Credentials',
         selectFile: 'or Select file to import',
         dragAndDropFile: 'Drag and drop here\nyour Credentials file here',
     },
+    details: {
+        title: 'Credential details',
+    },
 };
 
 export default t;

packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss

@@ -1,11 +1,12 @@
-.web-id-card-x {
+.web3-id-card-x {
     &.card-x.grey {
         padding: rem(8px) rem(0) rem(0) rem(0);
         border: rem(1px) solid $color-input-border;
 
         .row:not(.details) {
             display: flex;
             align-items: center;
+            justify-content: space-between;
             padding: rem(0) rem(14px) rem(8px) rem(14px);
 
             .text__main_medium {
@@ -25,8 +26,36 @@
         }
     }
 
-    svg {
-        width: rem(16px);
-        height: rem(16px);
+    svg, img {
+        width: rem(22px);
+        height: rem(22px);
+        background-color: $color-white;
+        padding: rem(2px);
+        border-radius: rem(4px);
+
+        object-position: center;
+        object-fit: contain;
+
+        path {
+            fill: $color-grey-3;
+        }
+    }
+
+    &__top {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__status {
+        color: $color-grey-4;
+
+        &--success {
+            color: $color-green-success;
+        }
+
+        &--error {
+            color: $color-red-attention;
+        }
     }
 }

packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.stories.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/function-component-definition, react/destructuring-assignment */
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { VerifiableCredentialStatus } from '@shared/storage/types';
+import { Web3IdCardView } from './Web3IdCard';
+
+export default {
+    title: 'X/Shared/Web3IdCard',
+    component: Web3IdCardView,
+    beforeEach: () => {
+        const body = document.getElementsByTagName('body').item(0);
+        body?.classList.add('popup-x');
+
+        return () => {
+            body?.classList.remove('popup-x');
+        };
+    },
+    tags: ['!autodocs'],
+    render(args) {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <Web3IdCardView {...args} />
+            </div>
+        );
+    },
+} as Meta<typeof Web3IdCardView>;
+
+type Story = StoryObj<typeof Web3IdCardView>;
+
+export const Primary: Story = {
+    args: {
+        title: 'Credential title',
+        status: VerifiableCredentialStatus.Active,
+        attributes: [
+            { title: 'Attribute title', value: 'Attribute value' },
+            { title: 'Attribute title', value: 'Attribute value' },
+        ],
+    },
+};
+
+export const Logo: Story = {
+    args: {
+        title: 'Credential title',
+        status: VerifiableCredentialStatus.Active,
+        attributes: [
+            { title: 'Attribute title', value: 'Attribute value' },
+            { title: 'Attribute title', value: 'Attribute value' },
+        ],
+        logo: { url: 'https://img.logoipsum.com/298.svg' },
+    },
+};