Display network and version

[stefanbitcr]

User description

📝 Description

Displays information from the /v1/info endpoint on the home page, which includes versions of the backend software as well as the Bitcoin network type. The version is contained in the long description fetched from the Wildcat mint.

Requires exposure of v1/info on the admin proxy to be merged

---

📸 Screenshots/Screen record

---

✅ Checklist

Please ensure the following tasks are completed before requesting a review:

• My code adheres to the style guidelines of this project.
• I have run npm run lint or the equivalent linting command.
• I have added or updated tests (if applicable).
• My changes have been tested thoroughly in different browsers/resolutions (if applicable).
• I have updated the documentation (if applicable).
• I have checked that there are no console errors or warnings.
• I have verified that the application builds without errors.
• I have tested responsiveness for mobile and desktop views (if applicable).

---

PR Type

Enhancement

---

Description

• Add mint information display on home page

• Integrate /v1/admin/info endpoint for version data

• Generate new API client types and methods

• Create responsive grid layout for mint details

---

Changes diagram

flowchart LR
  A["API Client"] --> B["Mint Info Endpoint"]
  B --> C["Home Page Component"]
  C --> D["Mint Information Card"]
  D --> E["Version Display"]

Loading

---

Changes walkthrough 📝

Relevant files

Enhancement

sdk.gen.ts Add mint info API client method                                                    src/generated/client/sdk.gen.ts Add MintInfo and MintInfoData type imports Create mintInfo function for /v1/admin/info endpoint Export new API method with proper headers +17/-1    types.gen.ts Define mint information TypeScript types                                  src/generated/client/types.gen.ts Define MintInfo type with name, version, description fields Add MintInfoData type for API request structure Include optional contact and pubkey properties +20/-0    HomePage.tsx Display mint information on home page                                        src/pages/home/HomePage.tsx Import mintInfo API function Add mint info query with React Query Create mint information card with responsive grid Display version, name, description, pubkey, and contact +66/-2

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The new mint info query lacks error handling. If the API call fails, the component may not render properly or display confusing states to users. const { data: mintData } = useSuspenseQuery({ queryKey: ["mint-info"], queryFn: async () => { const response = await mintInfo() return response.data ?? null }, staleTime: Infinity, gcTime: Infinity, }) Conditional Logic The mint information card is only rendered when mintData exists, but there's no fallback or indication when the data is unavailable, which could lead to inconsistent UI states. {mintData && ( <div className="bg-card text-card-foreground rounded-lg border p-6"> <h3 className="text-lg font-semibold mb-4">Mint Information</h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {mintData.name && ( <div className="flex flex-col gap-1"> <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span> <span className="font-semibold text-base">{mintData.name}</span> </div> )} {mintData.version && ( <div className="flex flex-col gap-1"> <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Version</span> <span className="text-sm">{mintData.version}</span> </div> )} {mintData.description && ( <div className="flex flex-col gap-1 md:col-span-2"> <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Description</span> <span className="text-sm">{mintData.description}</span> </div> )} {mintData.description_long && ( <div className="flex flex-col gap-1 md:col-span-2"> <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium"> Long Description </span> <span className="text-sm">{mintData.description_long}</span> </div> )} {mintData.pubkey && ( <div className="flex flex-col gap-1 md:col-span-2"> <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Public Key</span> <span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground"> {mintData.pubkey} </span> </div> )} {mintData.contact && mintData.contact.length > 0 && ( <div className="flex flex-col gap-1 md:col-span-2"> <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Contact</span> <div className="flex flex-wrap gap-2"> {mintData.contact.map((contact, index) => ( <span key={index} className="text-sm bg-muted px-2 py-1 rounded"> {contact} </span> ))} </div> </div> )} </div> </div> )}

[Copilot]

Pull Request Overview

Adds a new section to display mint information fetched from the /v1/info endpoint and renames the existing info card to “Identity.”

• Imported the mintInfo SDK method.
• Added a useSuspenseQuery call to fetch mint info with infinite caching.
• Rendered a “Mint Information” card and updated the old “Information” header to “Identity.”

Comments suppressed due to low confidence (1)

src/pages/home/HomePage.tsx:46

• The newly added Mint Information UI isn't covered by existing tests. Consider adding unit or integration tests to verify the fetch logic and rendering of each field.

      {mintData && (

[Copilot]

[nitpick] Using the array index as a React key can lead to rendering issues if the list changes. Use a unique identifier like the contact value instead (e.g., key={contact}).

Suggested change

	{mintData.contact.map((contact, index) => (
	<span key={index} className="text-sm bg-muted px-2 py-1 rounded">
	{mintData.contact.map((contact) => (
	<span key={contact} className="text-sm bg-muted px-2 py-1 rounded">

[qodo-merge-pro]

PR Code Suggestions ✨

No code suggestions found for the PR.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 129 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/pages/home/HomePage.tsx	0.00%	118 Missing ⚠️
src/generated/client/sdk.gen.ts	0.00%	10 Missing ⚠️
src/components/Headings.tsx	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[cloudflare-workers-and-pages]

Deploying wildcat-dashboard with    Cloudflare Pages

Latest commit:	fd31bc1
Status:	✅  Deploy successful!
Preview URL:	https://d856afbf.wildcat-dashboard.pages.dev
Branch Preview URL:	https://stefan-version.wildcat-dashboard.pages.dev

View logs