fix refunding not displayed & clean up

ui/components/child-key-creator.tsx

@@ -50,6 +50,7 @@ export function ChildKeyCreator({
 }: ChildKeyCreatorProps) {
   const [internalApiKey, setInternalApiKey] = useState('');
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [configs, setConfigs] = useState<KeyConfig[]>([
     {
       id: crypto.randomUUID(),
@@ -112,6 +113,7 @@ export function ChildKeyCreator({
     }
 
     setLoading(true);
+    setError(null);
     try {
       let allNewKeys: string[] = [];
       let totalCost = 0;
@@ -152,9 +154,14 @@ export function ChildKeyCreator({
       );
     } catch (error) {
       console.error('Failed to create child key:', error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to create child key'
-      );
+      let errorMessage =
+        error instanceof Error ? error.message : 'Failed to create child key';
+      try {
+        const parsed = JSON.parse(errorMessage);
+        errorMessage = parsed.detail || parsed.message || errorMessage;
+      } catch {}
+      setError(errorMessage);
+      toast.error(errorMessage);
     } finally {
       setLoading(false);
     }
@@ -362,11 +369,18 @@ export function ChildKeyCreator({
                   )}
                 </Button>
               </div>
-            </div>
 
-            <p className='text-muted-foreground text-xs'>
-              Each key creation has a small one-time fee.
-            </p>
+              {error && (
+                <Alert variant='destructive'>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <p className='text-muted-foreground text-xs'>
+                Each key creation has a small one-time fee.
+              </p>
+            </div>
 
             {newKeys.length > 0 && (
               <div className='mt-6 space-y-4'>
@@ -458,89 +472,6 @@ export function ChildKeyCreator({
           </div>
         </CardContent>
       </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className='text-lg'>Check Child Key Status</CardTitle>
-          <CardDescription>
-            View the current spending, limit, and expiration status of any child
-            key.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className='space-y-4'>
-            <div className='space-y-2'>
-              <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
-                Child API Key
-              </Label>
-              <Input
-                value={childKeyToCheck}
-                onChange={(e) => setChildKeyToCheck(e.target.value)}
-                placeholder='sk-...'
-                className='font-mono text-sm'
-              />
-            </div>
-            <Button
-              onClick={handleCheckKey}
-              disabled={checking || !childKeyToCheck}
-              variant='outline'
-              className='w-full'
-            >
-              {checking ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  Checking...
-                </>
-              ) : (
-                <>
-                  <RotateCcw className='mr-2 h-4 w-4' />
-                  Check Status
-                </>
-              )}
-            </Button>
-
-            {keyStatus && (
-              <div className='bg-muted/30 mt-4 space-y-3 rounded-lg border p-4 text-sm'>
-                <div className='flex justify-between'>
-                  <span className='text-muted-foreground'>Total Spent:</span>
-                  <span className='font-mono font-medium'>
-                    {keyStatus.total_spent} mSats
-                  </span>
-                </div>
-                {keyStatus.balance_limit !== null && (
-                  <div className='flex justify-between'>
-                    <span className='text-muted-foreground'>Limit:</span>
-                    <span className='font-mono font-medium'>
-                      {keyStatus.balance_limit} mSats
-                    </span>
-                  </div>
-                )}
-                {keyStatus.validity_date !== null && (
-                  <div className='flex justify-between'>
-                    <span className='text-muted-foreground'>Expires:</span>
-                    <span className='font-mono font-medium'>
-                      {new Date(
-                        keyStatus.validity_date * 1000
-                      ).toLocaleDateString()}
-                    </span>
-                  </div>
-                )}
-                <div className='flex gap-2 pt-2'>
-                  {keyStatus.is_drained && (
-                    <Badge variant='destructive'>Drained</Badge>
-                  )}
-                  {keyStatus.is_expired && (
-                    <Badge variant='destructive'>Expired</Badge>
-                  )}
-                  {!keyStatus.is_drained && !keyStatus.is_expired && (
-                    <Badge>Active</Badge>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 }

ui/components/landing/api-key-manager.tsx

@@ -239,7 +239,7 @@ export function ApiKeyManager({
                     className='gap-2'
                   >
                     <Trash2 className='h-4 w-4' />
-                    {isRefunding ? 'Processing...' : 'Refund & Delete Key'}
+                    {isRefunding ? 'Processing...' : 'Refund Key'}
                   </Button>
                   <span className='text-muted-foreground text-xs'>
                     Burns the key and returns a fresh Cashu token.

ui/components/landing/cashu-payment-workflow.tsx

@@ -2,6 +2,7 @@
 
 import { type JSX, useCallback, useState } from 'react';
 import { Copy, RefreshCcw, Trash2 } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { toast } from 'sonner';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -43,7 +44,15 @@ async function fetchWalletInfo(
 
   if (!response.ok) {
     const errorText = await response.text();
-    throw new Error(errorText || 'Unable to load wallet info');
+    let errorMessage = errorText || 'Unable to load wallet info';
+    try {
+      const parsed = JSON.parse(errorText);
+      // The error structure seems to be { detail: { error: { message: ... } } }
+      errorMessage =
+        parsed.detail?.error?.message ||
+        (typeof parsed.detail === 'string' ? parsed.detail : errorMessage);
+    } catch {}
+    throw new Error(errorMessage);
   }
 
   const payload = (await response.json()) as {
@@ -84,22 +93,20 @@ export function CashuPaymentWorkflow({
   apiKey = '',
   walletInfo = null,
   onApiKeyCreated,
-  onApiKeyChanged,
   onWalletInfoUpdated,
-  onRefundComplete,
 }: CashuPaymentWorkflowProps): JSX.Element {
   const [initialToken, setInitialToken] = useState('');
   const [topupToken, setTopupToken] = useState('');
   const [apiKeyInput, setApiKeyInput] = useState(apiKey);
   const [isCreatingKey, setIsCreatingKey] = useState(false);
   const [isTopupLoading, setIsTopupLoading] = useState(false);
-  const [isRefunding, setIsRefunding] = useState(false);
   const [isSyncingBalance, setIsSyncingBalance] = useState(false);
   const [hasInteractedManage, setHasInteractedManage] = useState(false);
   const [hasInteractedTopup, setHasInteractedTopup] = useState(false);
   const [balanceLimit, setBalanceLimit] = useState<string>('');
   const [balanceLimitReset, setBalanceLimitReset] = useState<string>('');
   const [validityDate, setValidityDate] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
 
   const activeApiKey = apiKeyInput.trim();
 
@@ -204,15 +211,17 @@ export function CashuPaymentWorkflow({
     }
 
     setIsSyncingBalance(true);
+    setError(null);
     try {
       const snapshot = await fetchWalletInfo(baseUrl, activeApiKey);
       onWalletInfoUpdated?.(snapshot);
       toast.success('Balance synced');
     } catch (error) {
       console.error(error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to sync balance'
-      );
+      const message =
+        error instanceof Error ? error.message : 'Failed to sync balance';
+      setError(message);
+      toast.error(message);
     } finally {
       setIsSyncingBalance(false);
     }
@@ -255,46 +264,14 @@ export function CashuPaymentWorkflow({
     }
   }, [activeApiKey, baseUrl, topupToken, onApiKeyCreated]);
 
-  const handleRefund = useCallback(async (): Promise<void> => {
-    if (!activeApiKey) {
-      toast.error('Paste an API key first');
-      return;
-    }
-
-    setIsRefunding(true);
-    try {
-      const response = await fetch(`${baseUrl}/v1/balance/refund`, {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${activeApiKey}`,
-        },
-      });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || 'Refund failed');
-      }
-      const payload = (await response.json()) as RefundReceipt;
-      onRefundComplete?.(payload);
-      onWalletInfoUpdated?.(null);
-      setApiKeyInput('');
-      toast.success('Refund requested');
-    } catch (error) {
-      console.error(error);
-      toast.error(error instanceof Error ? error.message : 'Refund failed');
-    } finally {
-      setIsRefunding(false);
-    }
-  }, [activeApiKey, baseUrl, onRefundComplete, onWalletInfoUpdated]);
-
   const handleApiKeyChange = useCallback(
     (newKey: string) => {
       setApiKeyInput(newKey);
-      onApiKeyChanged?.(newKey);
       if (newKey !== apiKey) {
         onWalletInfoUpdated?.(null);
       }
     },
-    [apiKey, onApiKeyChanged, onWalletInfoUpdated]
+    [apiKey]
   );
 
   const showManageDetails = hasInteractedManage || Boolean(walletInfo);
@@ -376,12 +353,12 @@ export function CashuPaymentWorkflow({
               <Button
                 variant='outline'
                 size='icon'
-                className='h-10 w-10'
                 onClick={() => handleCopy(activeApiKey)}
                 disabled={!activeApiKey}
               >
                 <Copy className='h-4 w-4' />
               </Button>
+
               <Button
                 variant='secondary'
                 size='sm'
@@ -394,11 +371,11 @@ export function CashuPaymentWorkflow({
               </Button>
             </div>
           </div>
-          {showManageDetails && (
-            <WalletBalanceStats
-              balanceMsats={walletInfo?.balanceMsats}
-              reservedMsats={walletInfo?.reservedMsats}
-            />
+          {error && (
+            <Alert variant='destructive' className='mt-2'>
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
           )}
         </section>
 
@@ -444,28 +421,6 @@ export function CashuPaymentWorkflow({
             </div>
           )}
         </section>
-
-        <Separator />
-
-        <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
-            <span>4 · Refund</span>
-          </header>
-          <div className='flex flex-wrap gap-2'>
-            <Button
-              onClick={handleRefund}
-              disabled={isRefunding || !activeApiKey}
-              variant='destructive'
-              className='gap-2'
-            >
-              <Trash2 className='h-4 w-4' />
-              {isRefunding ? 'Processing…' : 'Refund remaining balance'}
-            </Button>
-            <span className='text-muted-foreground text-xs'>
-              Burns the key and returns a fresh Cashu token.
-            </span>
-          </div>
-        </section>
       </CardContent>
     </Card>
   );

ui/components/landing/cheat-sheet.tsx

@@ -18,7 +18,6 @@ import {
   type RefundReceipt,
 } from './cashu-payment-workflow';
 import { LightningPaymentWorkflow } from './lightning-payment-workflow';
-import { ApiKeyManager } from './api-key-manager';
 import { KeyInfoDetails, type WalletSnapshot } from './key-info-details';
 import { ChildKeyCreator } from '@/components/child-key-creator';
 
@@ -135,8 +134,8 @@ export function CheatSheet(): JSX.Element {
 
   const handleRefundComplete = useCallback((receipt: RefundReceipt) => {
     setRefundReceipt(receipt);
-    setWalletInfo(null);
-    setApiKeyInput('');
+    // setWalletInfo(null); // Keep info
+    // setApiKeyInput(''); // Keep input
   }, []);
 
   const handleRefreshInfo = useCallback(async (): Promise<void> => {
@@ -391,12 +390,11 @@ export function CheatSheet(): JSX.Element {
         </section>
 
         <Tabs defaultValue='cashu' className='w-full'>
-          <TabsList className='grid w-full grid-cols-5'>
+          <TabsList className='grid w-full grid-cols-4'>
             <TabsTrigger value='cashu'>Cashu</TabsTrigger>
             <TabsTrigger value='lightning'>Lightning</TabsTrigger>
-            <TabsTrigger value='manage'>Manage Keys</TabsTrigger>
-            <TabsTrigger value='details'>Key Details</TabsTrigger>
             <TabsTrigger value='child-keys'>Child Keys</TabsTrigger>
+            <TabsTrigger value='management'>Key Management</TabsTrigger>
           </TabsList>
 
           <TabsContent value='cashu' className='space-y-4'>
@@ -413,8 +411,8 @@ export function CheatSheet(): JSX.Element {
             />
           </TabsContent>
 
-          <TabsContent value='manage' className='space-y-4'>
-            <ApiKeyManager
+          <TabsContent value='management' className='space-y-4'>
+            <KeyInfoDetails
               baseUrl={normalizedBaseUrl}
               apiKey={apiKeyInput}
               walletInfo={walletInfo}
@@ -445,7 +443,7 @@ export function CheatSheet(): JSX.Element {
                     <Textarea
                       value={refundToken}
                       readOnly
-                      rows={4}
+                      rows={15}
                       className='font-mono text-xs'
                     />
                   </div>
@@ -454,16 +452,6 @@ export function CheatSheet(): JSX.Element {
             )}
           </TabsContent>
 
-          <TabsContent value='details' className='space-y-4'>
-            <KeyInfoDetails
-              baseUrl={normalizedBaseUrl}
-              apiKey={apiKeyInput}
-              walletInfo={walletInfo}
-              onApiKeyChanged={handleApiKeyChanged}
-              onWalletInfoUpdated={handleWalletInfoUpdated}
-            />
-          </TabsContent>
-
           <TabsContent value='child-keys' className='space-y-4'>
             <ChildKeyCreator
               baseUrl={normalizedBaseUrl}

ui/components/landing/key-info-details.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { type JSX, useState, useCallback, useEffect } from 'react';
-import { Copy, RefreshCcw, RotateCcw } from 'lucide-react';
+import { Copy, RefreshCcw, RotateCcw, Trash2 } from 'lucide-react';
+import type { RefundReceipt } from './cashu-payment-workflow';
 import { toast } from 'sonner';
 import {
   Card,
@@ -44,6 +45,7 @@ interface KeyInfoDetailsProps {
   walletInfo?: WalletSnapshot | null;
   onApiKeyChanged?: (apiKey: string) => void;
   onWalletInfoUpdated?: (walletInfo: WalletSnapshot | null) => void;
+  onRefundComplete?: (receipt: RefundReceipt) => void;
 }
 
 export function KeyInfoDetails({
@@ -52,10 +54,12 @@ export function KeyInfoDetails({
   walletInfo = null,
   onApiKeyChanged,
   onWalletInfoUpdated,
+  onRefundComplete,
 }: KeyInfoDetailsProps): JSX.Element {
   const [apiKeyInput, setApiKeyInput] = useState(apiKey);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [isResetting, setIsResetting] = useState<string | null>(null);
+  const [isRefunding, setIsRefunding] = useState(false);
 
   // Sync internal state with props if they change
   useEffect(() => {
@@ -135,6 +139,37 @@ export function KeyInfoDetails({
     }
   };
 
+  const handleRefund = useCallback(async (): Promise<void> => {
+    if (!apiKeyInput) {
+      toast.error('Paste an API key first');
+      return;
+    }
+
+    setIsRefunding(true);
+    try {
+      const response = await fetch(`${baseUrl}/v1/balance/refund`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${apiKeyInput}`,
+        },
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Refund failed');
+      }
+      const receipt = (await response.json()) as RefundReceipt;
+      onRefundComplete?.(receipt);
+      // Removed onWalletInfoUpdated?.(null); // Prevents card disappearance
+      toast.success('Refund completed');
+      await fetchDetails(apiKeyInput); // Refresh to show burned status
+    } catch (error) {
+      console.error(error);
+      toast.error(error instanceof Error ? error.message : 'Refund failed');
+    } finally {
+      setIsRefunding(false);
+    }
+  }, [apiKeyInput, baseUrl, onRefundComplete, onWalletInfoUpdated]);
+
   const formatSats = (msats: number) =>
     new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
   const formatMsats = (msats: number) =>
@@ -163,7 +198,6 @@ export function KeyInfoDetails({
               <Button
                 variant='outline'
                 size='icon'
-                className='h-10 w-10 shrink-0'
                 onClick={() => handleCopy(apiKeyInput)}
                 disabled={!apiKeyInput}
               >
@@ -177,7 +211,7 @@ export function KeyInfoDetails({
                 disabled={isRefreshing || !apiKeyInput}
               >
                 <RefreshCcw
-                  className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                  className={`h-8 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
                 />
                 {isRefreshing ? 'Syncing...' : 'Sync'}
               </Button>
@@ -228,6 +262,14 @@ export function KeyInfoDetails({
                     {formatDate(walletInfo.validityDate)}
                   </span>
                 </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className='pb-2'>
+                <CardTitle className='text-lg'>Infos</CardTitle>
+              </CardHeader>
+              <CardContent className='space-y-4'>
                 <div className='flex items-center justify-between'>
                   <span className='text-muted-foreground text-sm'>
                     Spendable Balance
@@ -236,14 +278,6 @@ export function KeyInfoDetails({
                     {formatSats(walletInfo.balanceMsats)} sats
                   </span>
                 </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className='pb-2'>
-                <CardTitle className='text-lg'>Consumption</CardTitle>
-              </CardHeader>
-              <CardContent className='space-y-4'>
                 <div className='flex items-center justify-between'>
                   <span className='text-muted-foreground text-sm'>
                     Total Requests
@@ -390,7 +424,7 @@ export function KeyInfoDetails({
               </Card>
             )}
 
-          <div className='flex justify-center'>
+          <div className='flex justify-center gap-4'>
             <Button
               variant='ghost'
               size='sm'
@@ -403,6 +437,16 @@ export function KeyInfoDetails({
               />
               Last synced: {new Date().toLocaleTimeString()}
             </Button>
+            <Button
+              onClick={handleRefund}
+              disabled={isRefunding || !apiKeyInput}
+              variant='destructive'
+              size='sm'
+              className='gap-2'
+            >
+              <Trash2 className='h-4 w-4' />
+              {isRefunding ? 'Processing...' : 'Refund Key'}
+            </Button>
           </div>
         </>
       )}