Skip to content

Commit

Permalink
rework did display
Browse files Browse the repository at this point in the history
  • Loading branch information
@eike-hass
eike-hass committed Aug 20, 2024
1 parent 507de94 commit 083a47f
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 62 deletions.
65 changes: 65 additions & 0 deletions web/src/components/DIDCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React, { useState } from 'react';
import { Card, Popover, Space } from 'antd';
import { ExportOutlined } from '@ant-design/icons';
import DomainCheck from './DomainCheck';
import { ParsedDIDResult, ValidationResult } from '../context/globalState';
import { getExplorerLinkFromDID } from '../utils/explorer';
import Link from 'antd/es/typography/Link';

const shortenDID = (did: string):string => {
const substringLength = 6;
const splitDID = did.split(':');
const methodSpecificIdentifier = splitDID.pop();
if (!methodSpecificIdentifier) {
return "";
}
const shortMethodSpecificIdentifier = methodSpecificIdentifier.substring(0,substringLength) + "..." + methodSpecificIdentifier.substring(methodSpecificIdentifier?.length-substringLength,methodSpecificIdentifier?.length);
return [...splitDID, shortMethodSpecificIdentifier].join(':');
}


const DIDCard = ({ did, parsedDID, domains, loading }: {
did: string | null,
parsedDID: ParsedDIDResult | "in-flight" | null,
domains: ValidationResult | "in-flight" | null,
loading: boolean
}) => {
const actions: React.ReactNode[] = [];
if (did && parsedDID && parsedDID !== "in-flight") {
actions.push(
<Popover content={<p>IOTA Explorer</p>}>
<Link
href={getExplorerLinkFromDID(did, parsedDID)}
target="_blank"
>
<ExportOutlined key="explorer" />
</Link>
</Popover>
);
};

return (

<Card loading={loading} actions={actions} style={{ minWidth: 300 }}>
<Card.Meta
// avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}
title={
<Popover
content={
<pre style={{ maxWidth: 300, wordBreak: "break-all", whiteSpace: "pre-wrap" }}>{did}</pre>
}>
{did && shortenDID(did)}
</Popover>
}
description={
<>
{domains && domains !== "in-flight" && <DomainCheck validatedDomains={domains} />}
</>
}
/>
</Card>

)
};

export default DIDCard;
108 changes: 46 additions & 62 deletions web/src/pages/Company/CompanyData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React, { useState, useEffect } from 'react';
import { App, Popover, Typography } from 'antd';
import { App, Space, Typography } from 'antd';
import { Layout, Loading, Form, PrefilledForm } from '../../components';
import { useTranslation } from 'react-i18next';
import { Actions, ParsedDIDResult, State, useCredentialsDispatch, useGlobalState } from '../../context/globalState';
import { Actions, State, useCredentialsDispatch, useGlobalState } from '../../context/globalState';
import { useNavigate } from 'react-router-dom';
import useStep from '../../utils/useStep';
import { Scopes } from '@shared/types/Scopes';
import CitizenCredentialConfig from '@shared/credentials/CitizenCredential.json';
import DomainCheck from '../../components/DomainCheck';
import { ExportOutlined } from '@ant-design/icons';
import { routes } from '../../steps';
import i18n from '../../i18n';
import { getExplorerLinkFromDID } from '../../utils/explorer';
import DIDCard from '../../components/DIDCard';

const { Link } = Typography;

Expand Down Expand Up @@ -134,67 +132,53 @@ const CompanyData: React.FC = () => {
<h3>{t("pages.company.companyData.subTitle")}</h3>
<section>
<h3 className='section-header'>{t("pages.company.companyData.businessOwner")}</h3>

{relevantCredential && relevantCredential.issuer &&
<>
<p>Issued by {(state.parsedDID[relevantCredential.issuer] && state.parsedDID[relevantCredential.issuer] !== "in-flight") ?
<Popover content={
<Link
href={getExplorerLinkFromDID(relevantCredential.issuer, state.parsedDID[relevantCredential.issuer] as ParsedDIDResult)}
target="_blank"
>
IOTA Explorer <ExportOutlined />
</Link>
}><b>{relevantCredential.issuer}</b>
</Popover>
:
relevantCredential.issuer
}
</p>
{credentialsDomains && (credentialsDomains !== 'in-flight') && (
<DomainCheck validatedDomains={credentialsDomains} />
)}
<p>to <Popover content={relevantCredential.credentialSubject.id}><b style={{display: "inline-block", verticalAlign: "bottom", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", width: "350px"}}>{relevantCredential.credentialSubject.id}</b></Popover></p>
</>
}
{
// Object.keys(prefilledFormData.dataFields).length &&
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>

<p>Issued by:</p>
<DIDCard
loading={!relevantCredential?.issuer || !state.parsedDID[relevantCredential.issuer] || state.parsedDID[relevantCredential.issuer] === "in-flight"}
did={relevantCredential?.issuer ?? null}
parsedDID={relevantCredential?.issuer ? state.parsedDID[relevantCredential?.issuer] : null}
domains={credentialsDomains}
/>

<PrefilledForm dataFields={prefilledData} />
}

</Space>
</section>
<section>
<h3 className='section-header'>{t("pages.company.companyData.companyDetails")}</h3>

{issuerDID &&
<>
<p>Will be issued by {(state.parsedDID[issuerDID] && state.parsedDID[issuerDID] !== "in-flight") ? <Popover content={ //TODO
<Link
href={getExplorerLinkFromDID(issuerDID, state.parsedDID[issuerDID] as ParsedDIDResult)}
target="_blank"
>
IOTA Explorer <ExportOutlined />
</Link>
}><b>{issuerDID}</b></Popover> : issuerDID }</p>

{issuerDomains && (issuerDomains !== 'in-flight') && (
<DomainCheck validatedDomains={issuerDomains} />
)}
<p>to <Popover content={state.COMPANY_HOUSE?.connectedDID}><b style={{display: "inline-block", verticalAlign: "bottom", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", width: "350px"}}>{state.COMPANY_HOUSE?.connectedDID}</b></Popover></p>
</>
}
<Form dataFields={emptyFields} onSubmit={onSubmit} submitLabel={t("actions.continue")} />
</section>
{
status && (
<div className='loading'>
<p className='bold'>{t(status)}</p>
{
status === messages.waiting && <Loading />
}
</div>
)
}
</div>
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>

<p>Will be issued by:</p>
<DIDCard
loading={!issuerDID || !state.parsedDID[issuerDID] || state.parsedDID[issuerDID] === "in-flight"}
did={issuerDID ?? null}
parsedDID={issuerDID ? state.parsedDID[issuerDID] : null}
domains={issuerDomains}
/>
<p>to</p>
<DIDCard
loading={!state.COMPANY_HOUSE?.connectedDID}
did={state.COMPANY_HOUSE?.connectedDID ?? null}
parsedDID={null}
domains={null}
/>

<Form dataFields={emptyFields} onSubmit={onSubmit} submitLabel={t("actions.continue")} />
</Space>
</section>
{
status && (
<div className='loading'>
<p className='bold'>{t(status)}</p>
{
status === messages.waiting && <Loading />
}
</div>
)
}
</div>

</Layout >
);
Expand Down

0 comments on commit 083a47f

Please sign in to comment.