Skip to content

Commit de8f287

Browse files
stefanbitcrstefanbitcr
authored
Display network and version (#71)
* Display version * Use contact as key * Display description new line breaks * Rearrange home layout * Add slight padding to heading * Improve error handling * Remove useSuspenseQuery
1 parent dee5210 commit de8f287

File tree

4 files changed

+174
-66
lines changed

4 files changed

+174
-66
lines changed

‎src/components/Headings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { PropsWithChildren } from "react"
22

33
export function H2({ children }: PropsWithChildren<unknown>) {
4-
return <h2 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">{children}</h2>
4+
return <h2 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6 pt-4">{children}</h2>
55
}
66

77
export function H3({ children }: PropsWithChildren<unknown>) {

‎src/generated/client/sdk.gen.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// This file is auto-generated by @hey-api/openapi-ts
22

33
import type { Options as ClientOptions, TDataShape, Client } from '@hey-api/client-fetch';
4-
import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData, KeysetInfoData, KeySetInfo, RequestToMintData, RequestToMintResponseInfo, IdentityDetailData, IdentityDetailInfo, BillPaymentData, BillPaymentState} from './types.gen';
4+
import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData, KeysetInfoData, KeySetInfo, RequestToMintData, RequestToMintResponseInfo, IdentityDetailData, IdentityDetailInfo, BillPaymentData, BillPaymentState, MintInfo, MintInfoData} from './types.gen';
55

66
import { client as _heyApiClient } from './client.gen';
77

@@ -183,3 +183,19 @@ export const paymentStatus = <ThrowOnError extends boolean = false>(options?: Op
183183
}
184184
});
185185
};
186+
187+
188+
/**
189+
* --------------------------- MintInfo
190+
*/
191+
192+
export const mintInfo = <ThrowOnError extends boolean = false>(options?: Options<MintInfoData, ThrowOnError>) => {
193+
return (_heyApiClient).get<MintInfo, unknown, ThrowOnError>({
194+
url: '/v1/admin/info',
195+
...options,
196+
headers: {
197+
'Content-Type': 'application/json',
198+
...options?.headers
199+
}
200+
});
201+
};

‎src/generated/client/types.gen.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -597,3 +597,23 @@ export type BillPaymentData = {
597597
query?: never;
598598
url: '/v1/admin/bill/payment_status/{bill_id}';
599599
};
600+
601+
/**
602+
* Mint Info
603+
*/
604+
605+
export type MintInfo = {
606+
name: string,
607+
pubkey: string | null,
608+
version: string | null,
609+
description: string | null,
610+
description_long: string | null,
611+
contact: Array<string> | null,
612+
}
613+
614+
export type MintInfoData = {
615+
body?: never;
616+
path?: never;
617+
query?: never;
618+
url: '/v1/admin/info'
619+
};

‎src/pages/home/HomePage.tsx‎

Lines changed: 136 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { PageTitle } from "@/components/PageTitle"
22
import { Skeleton } from "@/components/ui/skeleton"
3-
import { identityDetail } from "@/generated/client/sdk.gen"
4-
import { useSuspenseQuery } from "@tanstack/react-query"
3+
import { identityDetail, mintInfo } from "@/generated/client/sdk.gen"
4+
import { useQuery } from "@tanstack/react-query"
55
import { Suspense } from "react"
66

77
function Loader() {
@@ -13,87 +13,159 @@ function Loader() {
1313
}
1414

1515
function PageBody() {
16-
const { data } = useSuspenseQuery({
16+
const { data: identityData } = useQuery({
1717
queryKey: ["identity-detail"],
1818
queryFn: async () => {
1919
const response = await identityDetail()
2020
return response.data ?? null
2121
},
2222
staleTime: Infinity,
2323
gcTime: Infinity,
24+
throwOnError: false,
2425
})
2526

26-
if (!data) {
27-
return (
28-
<div className="bg-card text-card-foreground rounded-lg border p-6">
29-
<div className="text-center text-muted-foreground">No identity found</div>
30-
</div>
31-
)
32-
}
27+
const { data: mintData } = useQuery({
28+
queryKey: ["mint-info"],
29+
queryFn: async () => {
30+
const response = await mintInfo()
31+
return response.data ?? null
32+
},
33+
staleTime: Infinity,
34+
gcTime: Infinity,
35+
throwOnError: false,
36+
})
3337

3438
return (
3539
<div className="flex flex-col gap-4">
36-
<div className="bg-card text-card-foreground rounded-lg border p-6">
37-
<h3 className="text-lg font-semibold mb-4">Information</h3>
38-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
39-
<div className="flex flex-col gap-1">
40-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
41-
<span className="font-semibold text-base">{data.name}</span>
42-
</div>
43-
{data.email && (
44-
<div className="flex flex-col gap-1">
45-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Email</span>
46-
<span className="font-mono text-sm text-muted-foreground">{data.email}</span>
47-
</div>
48-
)}
49-
{data.date_of_birth && (
50-
<div className="flex flex-col gap-1">
51-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Date of Birth</span>
52-
<span className="text-sm">{data.date_of_birth}</span>
40+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
41+
<div className="bg-card text-card-foreground rounded-lg border p-6">
42+
<h3 className="text-lg font-semibold mb-4">Identity</h3>
43+
{identityData ? (
44+
<div className="flex flex-col gap-4">
45+
<div className="flex flex-col gap-1">
46+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
47+
<span className="font-semibold text-base">{identityData.name}</span>
48+
</div>
49+
{identityData.email && (
50+
<div className="flex flex-col gap-1">
51+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Email</span>
52+
<span className="font-mono text-sm text-muted-foreground">{identityData.email}</span>
53+
</div>
54+
)}
55+
{identityData.date_of_birth && (
56+
<div className="flex flex-col gap-1">
57+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
58+
Date of Birth
59+
</span>
60+
<span className="text-sm">{identityData.date_of_birth}</span>
61+
</div>
62+
)}
63+
64+
<div className="border-t pt-4 mt-4">
65+
<h4 className="text-md font-semibold mb-4">Keys</h4>
66+
<div className="flex flex-col gap-4">
67+
<div className="flex flex-col gap-1">
68+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Node ID</span>
69+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
70+
{identityData.node_id}
71+
</span>
72+
</div>
73+
<div className="flex flex-col gap-1">
74+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
75+
Bitcoin Public Key
76+
</span>
77+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
78+
{identityData.bitcoin_public_key}
79+
</span>
80+
</div>
81+
<div className="flex flex-col gap-1">
82+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
83+
Nostr Public Key
84+
</span>
85+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
86+
{identityData.npub}
87+
</span>
88+
</div>
89+
</div>
90+
</div>
91+
92+
{identityData.postal_address && (
93+
<div className="border-t pt-4 mt-4">
94+
<h4 className="text-md font-semibold mb-4">Address</h4>
95+
<div className="flex flex-col gap-1">
96+
<div className="text-sm leading-relaxed">
97+
<div className="font-medium">{identityData.postal_address.address}</div>
98+
<div className="text-muted-foreground">
99+
{identityData.postal_address.city}
100+
{identityData.postal_address.zip && `, ${identityData.postal_address.zip}`}
101+
</div>
102+
<div className="text-muted-foreground">{identityData.postal_address.country}</div>
103+
</div>
104+
</div>
105+
</div>
106+
)}
53107
</div>
108+
) : (
109+
<div className="text-center text-muted-foreground">No identity found</div>
54110
)}
55111
</div>
56-
</div>
57-
58-
<div className="bg-card text-card-foreground rounded-lg border p-6">
59-
<h3 className="text-lg font-semibold mb-4">Keys</h3>
60-
<div className="flex flex-col gap-4">
61-
<div className="flex flex-col gap-1">
62-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Node ID</span>
63-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
64-
{data.node_id}
65-
</span>
66-
</div>
67-
<div className="flex flex-col gap-1">
68-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
69-
Bitcoin Public Key
70-
</span>
71-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
72-
{data.bitcoin_public_key}
73-
</span>
74-
</div>
75-
<div className="flex flex-col gap-1">
76-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Nostr Public Key</span>
77-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">{data.npub}</span>
78-
</div>
79-
</div>
80-
</div>
81112

82-
{data.postal_address && (
83113
<div className="bg-card text-card-foreground rounded-lg border p-6">
84-
<h3 className="text-lg font-semibold mb-4">Address</h3>
85-
<div className="flex flex-col gap-1">
86-
<div className="text-sm leading-relaxed">
87-
<div className="font-medium">{data.postal_address.address}</div>
88-
<div className="text-muted-foreground">
89-
{data.postal_address.city}
90-
{data.postal_address.zip && `, ${data.postal_address.zip}`}
91-
</div>
92-
<div className="text-muted-foreground">{data.postal_address.country}</div>
114+
<h3 className="text-lg font-semibold mb-4">Mint Information</h3>
115+
{mintData ? (
116+
<div className="flex flex-col gap-4">
117+
{mintData.name && (
118+
<div className="flex flex-col gap-1">
119+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
120+
<span className="font-semibold text-base">{mintData.name}</span>
121+
</div>
122+
)}
123+
{mintData.version && (
124+
<div className="flex flex-col gap-1">
125+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Version</span>
126+
<span className="text-sm">{mintData.version}</span>
127+
</div>
128+
)}
129+
{mintData.description && (
130+
<div className="flex flex-col gap-1">
131+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Description</span>
132+
<span className="text-sm">{mintData.description}</span>
133+
</div>
134+
)}
135+
{mintData.description_long && (
136+
<div className="flex flex-col gap-1">
137+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
138+
Long Description
139+
</span>
140+
<span className="text-sm whitespace-pre-line">{mintData.description_long}</span>
141+
</div>
142+
)}
143+
{mintData.pubkey && (
144+
<div className="flex flex-col gap-1">
145+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Public Key</span>
146+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
147+
{mintData.pubkey}
148+
</span>
149+
</div>
150+
)}
151+
{mintData.contact && mintData.contact.length > 0 && (
152+
<div className="flex flex-col gap-1">
153+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Contact</span>
154+
<div className="flex flex-wrap gap-2">
155+
{mintData.contact.map((contact) => (
156+
<span key={contact} className="text-sm bg-muted px-2 py-1 rounded">
157+
{contact}
158+
</span>
159+
))}
160+
</div>
161+
</div>
162+
)}
93163
</div>
94-
</div>
164+
) : (
165+
<div className="text-center text-muted-foreground">No mint information available</div>
166+
)}
95167
</div>
96-
)}
168+
</div>
97169
</div>
98170
)
99171
}

0 commit comments

Comments
 (0)