Skip to content

Feature: Implement Identity Mint Page UI #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kushbosamiya wants to merge 1 commit into from
Closed

Feature: Implement Identity Mint Page UI #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions app/(dashboard)/identity/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import { PageContainer } from "@/components/PageContainer";
import { Button } from "@/components/ui/Button";

export default function IdentityPage() {
return (
<PageContainer className="min-h-[calc(100vh-80px)] items-center justify-center py-12 md:py-24">
<div className="flex w-full max-w-lg flex-col items-center justify-center space-y-8 rounded-3xl bg-white p-8 shadow-xl md:p-12 dark:bg-dark-bg">
<div className="flex flex-col items-center space-y-4 text-center">
<h1 className="font-utsaha text-4xl font-bold tracking-tight text-brand-blue md:text-5xl dark:text-white">
Mint Your DIT
</h1>
<p className="text-base text-gray-600 dark:text-gray-300">
Create your Decentralized Identity Token to start exploring the
Stability Nexus ecosystem. Secure, unique, and entirely yours.
</p>
</div>

<div className="w-full space-y-4">
<div className="rounded-xl border border-gray-100 bg-gray-50 p-6 dark:border-gray-800 dark:bg-[#15161A]">
<div className="flex justify-between text-sm">
<span className="text-gray-500 dark:text-gray-400">Network</span>
<span className="font-medium text-gray-900 dark:text-gray-100">
Sepolia
</span>
</div>
<div className="mt-2 flex justify-between text-sm">
<span className="text-gray-500 dark:text-gray-400">Mint Fee</span>
<span className="font-medium text-gray-900 dark:text-gray-100">
Free
</span>
Comment on lines +22 to +31

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Network and fee values are hardcoded.

"Sepolia" and "Free" are hardcoded values that may vary based on environment or contract configuration. Consider sourcing these from configuration, environment variables, or blockchain context.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(dashboard)/identity/page.tsx around lines 22 - 31, The JSX hardcodes
"Sepolia" and "Free" in app/(dashboard)/identity/page.tsx; replace those
literals with dynamic values (e.g., networkName and mintFee variables) sourced
from configuration or runtime data: fetch or compute networkName from your
environment/config or web3 provider (e.g., a getNetworkName() helper or
provider.network.chainName) and compute mintFee from contract state or config
(e.g., await contract.mintFee() or process.env.MINT_FEE), then render
{networkName} and {mintFee} in place of the hardcoded strings; ensure any async
data is loaded before render (use server-side props, useEffect + useState, or a
Suspense/loader) and provide sensible defaults/fallbacks while loading.

</div>
</div>

<Button className="w-full py-4 text-lg">Mint Identity</Button>

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Button has no click handler and is non-functional.

The "Mint Identity" button renders as a clickable element but has no onClick handler, making it a no-op. Per the relevant code snippet, the Button component accepts onClick through ButtonHTMLAttributes but none is provided here. Users will click the button expecting action but nothing will happen.

At minimum, add a placeholder handler or disable the button until functionality is implemented.

Proposed placeholder implementation 
-          <Button className="w-full py-4 text-lg">Mint Identity</Button>
+          <Button 
+            className="w-full py-4 text-lg"
+            onClick={() => {
+              // TODO: Implement mint modal/form
+              console.log("Mint identity clicked");
+            }}
+          >
+            Mint Identity
+          </Button>

Or disable until ready:

-          <Button className="w-full py-4 text-lg">Mint Identity</Button>
+          <Button className="w-full py-4 text-lg" disabled>
+            Mint Identity
+          </Button>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(dashboard)/identity/page.tsx at line 35, The "Mint Identity" Button in
page.tsx is rendered without an onClick handler so it does nothing; update the
Button element (the Button component used on the page) to either provide a
placeholder onClick handler (e.g., call a local async handler like
handleMintIdentity or a no-op that shows a toast/modal) or mark the button
disabled until real mint logic is implemented; add a succinct handler function
name (handleMintIdentity) in the same component file and wire it to the Button
via onClick or set disabled={true} and include aria-disabled for accessibility.

</div>

<p className="text-sm text-gray-500 dark:text-gray-400">
By minting, you agree to our Terms of Service and Privacy Policy.
</p>
Comment on lines +10 to +40

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Multiple hardcoded user-visible strings require i18n.

Per coding guidelines, user-visible strings should be externalized to resource files. The following strings need externalization:

  • "Mint Your DIT" (line 11)
  • Description text (lines 14-15)
  • "Network", "Sepolia" (lines 22-24)
  • "Mint Fee", "Free" (lines 28-30)
  • "Mint Identity" (line 35)
  • Terms/Privacy notice (line 39)
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(dashboard)/identity/page.tsx around lines 10 - 40, Replace the
hardcoded user-facing strings in the identity page JSX with i18n keys: import
and use your translation hook (e.g., useTranslation/useIntl) at the top of the
page component and replace the h1 ("Mint Your DIT"), the paragraph description,
the labels/spans ("Network", "Sepolia", "Mint Fee", "Free"), the Button text
("Mint Identity"), and the terms notice with t('identity.title'),
t('identity.description'), t('identity.networkLabel'),
t('identity.networkName'), t('identity.mintFeeLabel'),
t('identity.mintFeeValue'), t('identity.mintButton'), and t('identity.terms')
respectively; then add these keys and translations into the locale resource
files. Locate the JSX around the h1 and the Button component usage to make the
replacements and ensure any props expecting strings receive the translated
values.

Comment on lines +38 to +40

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Legal text mentions Terms and Privacy Policy but provides no links.

The text references "Terms of Service and Privacy Policy" but these are not clickable links. Users should be able to access these documents.

Proposed fix 
         <p className="text-sm text-gray-500 dark:text-gray-400">
-          By minting, you agree to our Terms of Service and Privacy Policy.
+          By minting, you agree to our{" "}
+          <a href="/terms" className="underline hover:text-gray-700 dark:hover:text-gray-200">
+            Terms of Service
+          </a>{" "}
+          and{" "}
+          <a href="/privacy" className="underline hover:text-gray-700 dark:hover:text-gray-200">
+            Privacy Policy
+          </a>.
         </p>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p className="text-sm text-gray-500 dark:text-gray-400">
By minting, you agree to our Terms of Service and Privacy Policy.
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
By minting, you agree to our{" "}
<a href="/terms" className="underline hover:text-gray-700 dark:hover:text-gray-200">
Terms of Service
</a>{" "}
and{" "}
<a href="/privacy" className="underline hover:text-gray-700 dark:hover:text-gray-200">
Privacy Policy
</a>.
</p>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(dashboard)/identity/page.tsx around lines 38 - 40, Update the legal
notice paragraph in app/(dashboard)/identity/page.tsx (the <p className="text-sm
text-gray-500 dark:text-gray-400"> element) so that "Terms of Service" and
"Privacy Policy" are clickable links; replace the plain text with anchor
elements or Next.js Link components pointing to the canonical URLs (e.g., /terms
and /privacy or external URLs), ensure links open appropriately (target and rel
attributes for external links) and include accessible link text so screen
readers can identify them.

</div>
</PageContainer>
);
}
9 changes: 9 additions & 0 deletions app/(dashboard)/token/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { PageContainer } from "@/components/PageContainer";

export default function TokenPage() {
return (
<PageContainer className="min-h-screen items-center justify-center">
<h1 className="text-2xl font-semibold">Token</h1>
</PageContainer>
);
}
Comment on lines +3 to +9

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Hardcoded user-visible string.

The "Token" heading text should be externalized to a resource file for internationalization (i18n) per coding guidelines. This applies when the placeholder is replaced with actual content.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(dashboard)/token/page.tsx around lines 3 - 9, The "Token" heading in
TokenPage is a hardcoded user-visible string; replace it with an i18n resource
lookup. Update TokenPage to import and use the translations API (e.g.,
t('token.title') or useTranslations('token')) and pass that value into the <h1>
instead of the literal "Token"; ensure the key (token.title) is added to your
locale resource file(s) and exported for both default and any supported locales
so the PageContainer and <h1> render the localized string.

19 changes: 19 additions & 0 deletions components/PageContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";

interface PageContainerProps {
children: React.ReactNode;
className?: string;
}

export function PageContainer({
children,
className = "",
}: PageContainerProps) {
return (
<main
className={`mx-auto flex w-full max-w-7xl flex-col px-4 sm:px-6 lg:px-8 ${className}`}
>
{children}
</main>
);
}
Loading