Skip to content

Commit 8c67550

Browse files
lucasrosa90lucasrosa90
authored
Merge pull request #13 from KeetaNetwork/feature/add-cert-pem
Improvements on certificates
2 parents a6fa4e1 + 432bd3b commit 8c67550

File tree

13 files changed

+188
-471
lines changed

13 files changed

+188
-471
lines changed

‎apps/web/src/app/account/[accountPublicKey]/certificate/[certificateHash]/page.tsx‎

Lines changed: 1 addition & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1 @@
1-
import NotFoundPage from "@/app/not-found";
2-
import { ContentCard } from "@/components/ContentCard";
3-
import { CopyButton } from "@/components/CopyButton";
4-
import DEPRECATED_Typography from "@/components/core/Typography";
5-
import PageContent from "@/components/layout/PageContent";
6-
import { PageLoader } from "@/components/layout/PageLoader";
7-
import { TableRowItem } from "@/components/Table";
8-
import { TableCard } from "@/components/TableCard";
9-
import { completeDate } from "@/helpers/date";
10-
import { toTitleCase } from "@/helpers/string";
11-
import { useClientSDK } from "@/providers/ClientProvider";
12-
import { Icon, Tag, Typography, useModal } from "@keetanetwork/web-ui";
13-
import { useQuery$ } from "@preact-signals/query";
14-
import { Fragment } from "preact/jsx-runtime";
15-
import { twMerge } from "tailwind-merge";
16-
import { CertificatePemContent } from "./CertificatePemContent";
17-
import { ChainCertificateModal } from "./ChainCertificateModal";
18-
import { IconBoolean } from "./IconBoolean";
19-
20-
export default function CertificatePage({ params: { accountPublicKey, certificateHash } }: { params: { accountPublicKey: string, certificateHash: string }}) {
21-
const sdk = useClientSDK();
22-
const { data, isError, isLoading } = useQuery$(() => ({
23-
queryKey: ['account', accountPublicKey, 'certificate', certificateHash],
24-
queryFn: () => sdk.account.certificate(accountPublicKey, certificateHash),
25-
}))
26-
27-
const { openModal } = useModal();
28-
29-
if (isError) {
30-
return(<NotFoundPage />);
31-
}
32-
33-
if (!data || isLoading) {
34-
return(<PageLoader />);
35-
}
36-
37-
const { certificate } = data;
38-
39-
return (
40-
<PageContent>
41-
<div className='flex flex-col gap-4 mb-4 md:mb-10 w-full text-white'>
42-
<div className='flex gap-2 items-center text-white opacity-50 md:opacity-100'>
43-
<Icon type="verified" className="size-4" />
44-
45-
<DEPRECATED_Typography
46-
className="capitalize md:uppercase"
47-
variant="overline1"
48-
>
49-
Certificate
50-
</DEPRECATED_Typography>
51-
</div>
52-
53-
<div className='flex flex-col gap-4 md:gap-1'>
54-
<div className='flex items-center gap-3'>
55-
<DEPRECATED_Typography
56-
variant='h6'
57-
className={twMerge(
58-
'text-white shrink max-w-[calc(100%-40px)] font-normal',
59-
'md:text-[18px] md:font-semibold'
60-
)}
61-
>
62-
{certificate.hash}
63-
</DEPRECATED_Typography>
64-
<CopyButton text={certificate.hash} iconSize={24} />
65-
</div>
66-
67-
<div className={twMerge(
68-
'bg-white/5 px-5 py-3 rounded-xl flex flex-col gap-1',
69-
' md:flex-row md:items-center md:p-0 md:bg-white/0'
70-
)}>
71-
<DEPRECATED_Typography
72-
variant='body3'
73-
className={
74-
'text-white opacity-70 md:opacity-50 text-[12px] uppercase md:normal-case md:text-[16px]'
75-
}
76-
>
77-
{certificate.issuerName}
78-
</DEPRECATED_Typography>
79-
</div>
80-
</div>
81-
</div>
82-
83-
<div className='flex flex-col gap-8'>
84-
<ContentCard
85-
title="Details"
86-
content={[
87-
{ label: "Account", value: certificate.subjectPublicKey, type: "account" },
88-
{ label: "Issued On", value: certificate.issuedAt, type: "datetime" },
89-
certificate.valid ? (
90-
{ label: "Valid Until", value: certificate.expiresAt, type: "datetime" }
91-
) : (
92-
{ label: "Expired On", value: <Typography size="sm" className="text-error">{completeDate(certificate.expiresAt)}</Typography>, type: "jsx" }
93-
),
94-
{ label: "Serial", value: `${certificate.serial.toString(16).toUpperCase()} (${certificate.serial.toString()})` },
95-
{ label: "Trusted", value: <IconBoolean value={certificate.trusted} />, type: "jsx" },
96-
]}
97-
/>
98-
99-
<ContentCard
100-
title="Subject"
101-
content={certificate.subjectDN.map((item) => ({
102-
label: toTitleCase(item.name),
103-
value: item.value,
104-
}))}
105-
/>
106-
107-
<ContentCard
108-
title="Issuer"
109-
content={certificate.issuerDN.map((item) => ({
110-
label: toTitleCase(item.name),
111-
value: item.value,
112-
}))}
113-
/>
114-
115-
<ContentCard
116-
title="Attributes"
117-
content={certificate.attributes.map((item) => ({
118-
label: toTitleCase(item.name),
119-
value: item.sensitive ? "********" : item.value,
120-
}))}
121-
/>
122-
123-
{/* Chain of Trust */}
124-
<TableCard
125-
title="Chain of Trust"
126-
rows={certificate.chain}
127-
columns={[
128-
{ title: "Trusted", size: 1 },
129-
{ title: "Issuer", size: 5 },
130-
{ title: "Subject", size: 5 },
131-
{ title: "", size: 1 },
132-
]}
133-
renderRow={row => (
134-
<Fragment key={row.hash}>
135-
<TableRowItem className='col-span-1 justify-center' position="first">
136-
<IconBoolean value={row.trusted} />
137-
{/* <Typography size="sm">
138-
{middleSubstring(row.hash, 4)}
139-
</Typography> */}
140-
{/* <TextCertificateLink hash={row.hash} account={row.subjectPublicKey} /> */}
141-
142-
</TableRowItem>
143-
{row.isSelfSigned ? (
144-
<TableRowItem className='col-span-10'>
145-
<Typography size="sm">{row.issuerName}</Typography>
146-
<Tag text="SELF-SIGNED" textClassName="text-[10px] tracking-[0.15em]" className="" />
147-
</TableRowItem>
148-
) : (
149-
<>
150-
<TableRowItem className='col-span-5'>
151-
<Typography size="sm">{row.issuerName}</Typography>
152-
</TableRowItem>
153-
<TableRowItem className='col-span-5'>
154-
<Typography size="sm">{row.subjectName}</Typography>
155-
</TableRowItem>
156-
</>
157-
)}
158-
<TableRowItem position="last">
159-
<a onClick={() => openModal(<ChainCertificateModal certificate={row} />)} className={"text-functional-focused"}><Typography weight="semibold" size="sm">View</Typography></a>
160-
</TableRowItem>
161-
</Fragment>
162-
)}
163-
/>
164-
165-
{/* Certificate PEM Content */}
166-
<CertificatePemContent content={certificate.pem} />
167-
</div>
168-
</PageContent>
169-
)
170-
}
1+
export { default } from "@/components/Certificate/page"

‎apps/web/src/app/storage/[accountPublicKey]/certificate/[certificateHash]/CertificatePemContent.tsx‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎apps/web/src/app/storage/[accountPublicKey]/certificate/[certificateHash]/ChainCertificateModal.tsx‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎apps/web/src/app/storage/[accountPublicKey]/certificate/[certificateHash]/IconBoolean.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)