Feat/enhanced UI components

src/app/credentials/[credentialId]/page.tsx

@@ -17,6 +17,9 @@ import {
   CheckCircle,
   Download,
   ShieldCheck,
+  Award,
+  Hash,
+  Key,
 } from "lucide-react";
 import { useState, useCallback } from "react";
 
@@ -143,6 +146,41 @@ export default function CredentialDetailPage({
                 </p>
               </div>
             </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Key className="h-4 w-4 text-gray-400" />
+              <div>
+                <p className="text-gray-500">Credential ID</p>
+                <p className="font-mono text-xs">
+                  {truncateAddress(credential.id, 8)}
+                </p>
+              </div>
+            </div>
+            {credential.metadata.score && (
+              <div className="flex items-center gap-2 text-sm">
+                <Award className="h-4 w-4 text-gray-400" />
+                <div>
+                  <p className="text-gray-500">Score</p>
+                  <p className="font-medium">{credential.metadata.score}%</p>
+                </div>
+              </div>
+            )}
+            {credential.txHash && (
+              <div className="flex items-center gap-2 text-sm">
+                <Hash className="h-4 w-4 text-gray-400" />
+                <div>
+                  <p className="text-gray-500">Transaction</p>
+                  <a
+                    href={`https://stellar.expert/explorer/testnet/tx/${credential.txHash}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="font-mono text-xs text-blue-600 hover:underline flex items-center gap-1"
+                  >
+                    {truncateAddress(credential.txHash, 8)}
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Learner Address */}

src/app/settings/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+// User profile settings page
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";

src/components/rewards/claim-button.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Gift } from "lucide-react";
 import { useState } from "react";
-import { RewardClaimDialog } from "./reward-claim-dialog";
+import { RewardClaimDialog } from "./reward-claim-dialog"; // Reward claim dialog wrapper
 
 interface ClaimButtonProps {
   claimableId: string;

src/lib/hooks/use-auth.ts

@@ -23,6 +23,7 @@ export interface WalletError {
   resolution: string;
 }
 
+// Helper to classify wallet errors
 function classifyWalletError(err: unknown, currentNetwork: string): WalletError {
   const msg = err instanceof Error ? err.message : String(err);
   const lower = msg.toLowerCase();

src/types/stellar.ts

@@ -29,6 +29,7 @@ export interface CredentialNFT {
   courseId: string;
   courseTitle: string;
   issuedAt: string;
+  txHash?: string;
   metadata: CredentialMetadata;
 }