add simple ui to routstr topup

ui/components/providers/RoutstrProviderCard.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -17,6 +16,8 @@ import {
   ChevronDown,
   ChevronUp,
   RotateCcw,
+  AlertTriangle,
+  Key,
 } from 'lucide-react';
 import { UpstreamProvider } from '@/lib/api/services/admin';
 import { RoutstrProviderService } from '@/lib/api/services/routstr-provider';
@@ -28,6 +29,7 @@ interface RoutstrProviderCardProps {
   onToggleExpand: () => void;
   onEdit: () => void;
   onDelete: () => void;
+  onUpdateKey?: () => void;
   balanceComponent: React.ReactNode;
   children?: React.ReactNode;
 }
@@ -38,11 +40,14 @@ export function RoutstrProviderCard({
   onToggleExpand,
   onEdit,
   onDelete,
+  onUpdateKey,
   balanceComponent,
   children,
 }: RoutstrProviderCardProps) {
   const queryClient = useQueryClient();
 
+  const hasMint = !!provider.provider_settings?.topup_mint_url;
+
   const refundMutation = useMutation({
     mutationFn: () => RoutstrProviderService.refundBalance(provider.id),
     onSuccess: (data) => {
@@ -84,6 +89,16 @@ export function RoutstrProviderCard({
               >
                 NIP-91
               </Badge>
+              {!hasMint && (
+                <Badge
+                  variant='outline'
+                  className='flex items-center gap-1 border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/50 dark:bg-amber-900/20 dark:text-amber-400'
+                  title='Top-up is not possible because no top-up mint is selected in the provider settings. Please edit settings to select a mint from your node configuration.'
+                >
+                  <AlertTriangle className='h-3 w-3' />
+                  Top-up Disabled: No Mint Selected
+                </Badge>
+              )}
             </div>
             <CardDescription className='mt-1 break-all'>
               {provider.base_url}
@@ -92,6 +107,17 @@ export function RoutstrProviderCard({
           <div className='flex flex-wrap items-center gap-2'>
             <div className='flex flex-col gap-1'>{balanceComponent}</div>
 
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onUpdateKey}
+              className='text-blue-600 hover:text-blue-700 dark:text-blue-400'
+              title='Update or Create API Key'
+            >
+              <Key className='mr-1 h-4 w-4' />
+              <span className='hidden sm:inline'>Key</span>
+            </Button>
+
             <Button
               variant='outline'
               size='sm'

ui/components/providers/SimpleCashuTopup.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { type JSX, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { AdminService } from '@/lib/api/services/admin';
+
+interface SimpleCashuTopupProps {
+  providerId: number;
+  baseUrl: string;
+  onSuccess?: () => void;
+}
+
+export function SimpleCashuTopup({
+  providerId,
+  onSuccess,
+}: SimpleCashuTopupProps): JSX.Element {
+  const [token, setToken] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleTopup = async () => {
+    if (!token.trim()) {
+      toast.error('Enter a Cashu token');
+      return;
+    }
+    setIsLoading(true);
+    try {
+      // Use the backend to proxy the token topup
+      // This is safer as the backend has the actual API key
+      const response = await AdminService.topupProviderWithToken(
+        providerId,
+        token.trim()
+      );
+      if (!response.ok) throw new Error(response.message || 'Top-up failed');
+
+      toast.success('Token redeemed successfully!');
+      setToken('');
+      onSuccess?.();
+    } catch (e) {
+      const error = e as Error;
+      toast.error(error.message || 'Top-up failed');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className='bg-muted/20 space-y-3 rounded-lg border p-4'>
+      <div className='space-y-2'>
+        <Textarea
+          placeholder='Paste Cashu token here...'
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+          rows={2}
+          className='font-mono text-xs'
+        />
+        <Button
+          onClick={handleTopup}
+          disabled={isLoading}
+          size='sm'
+          className='w-full'
+        >
+          {isLoading ? 'Redeeming...' : 'Redeem Token'}
+        </Button>
+      </div>
+    </div>
+  );
+}

ui/components/providers/SimpleLightningTopup.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { type JSX, useCallback, useState } from 'react';
+import { Copy, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { AdminService } from '@/lib/api/services/admin';
+
+interface SimpleLightningTopupProps {
+  providerId: number;
+  baseUrl: string;
+  onSuccess?: () => void;
+}
+
+export function SimpleLightningTopup({
+  providerId,
+  onSuccess,
+}: SimpleLightningTopupProps): JSX.Element {
+  const [amount, setAmount] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [invoice, setInvoice] = useState<{
+    bolt11: string;
+    invoice_id: string;
+  } | null>(null);
+  const [isWaiting, setIsWaiting] = useState(false);
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success('Copied to clipboard');
+  };
+
+  const pollStatus = useCallback(
+    async (invoiceId: string) => {
+      const maxAttempts = 60;
+      let attempts = 0;
+
+      const poll = async () => {
+        try {
+          const response = await AdminService.checkTopupStatus(
+            providerId,
+            invoiceId
+          );
+          if (response.paid) {
+            toast.success('Payment received!');
+            setInvoice(null);
+            setIsWaiting(false);
+            onSuccess?.();
+            return;
+          }
+          attempts++;
+          if (attempts < maxAttempts) setTimeout(poll, 5000);
+        } catch (e) {
+          console.error(e);
+        }
+      };
+      poll();
+    },
+    [providerId, onSuccess]
+  );
+
+  const handleCreate = async () => {
+    const amt = parseInt(amount);
+    if (!amt) {
+      toast.error('Enter a valid amount');
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const response = await AdminService.initiateProviderTopup(
+        providerId,
+        amt
+      );
+      if (!response.ok || !response.topup_data)
+        throw new Error('Failed to create invoice');
+
+      setInvoice({
+        bolt11: response.topup_data.payment_request as string,
+        invoice_id: response.topup_data.invoice_id as string,
+      });
+      setIsWaiting(true);
+      pollStatus(response.topup_data.invoice_id as string);
+    } catch (e) {
+      const error = e as Error;
+      toast.error(error.message || 'Failed to request invoice from backend');
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <div className='bg-muted/20 space-y-3 rounded-lg border p-4'>
+      <div className='flex gap-2'>
+        <Input
+          type='number'
+          placeholder='Amount in sats'
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          className='h-9'
+        />
+        <Button
+          onClick={handleCreate}
+          disabled={isCreating || isWaiting}
+          size='sm'
+        >
+          {isCreating ? 'Creating...' : 'Get Invoice'}
+        </Button>
+      </div>
+
+      {invoice && (
+        <div className='space-y-2 border-t pt-2'>
+          <div className='text-muted-foreground flex items-center justify-between text-xs'>
+            <span>Invoice Generated</span>
+            <Button
+              variant='ghost'
+              size='icon'
+              className='h-6 w-6'
+              onClick={() => handleCopy(invoice.bolt11)}
+            >
+              <Copy className='h-3 w-3' />
+            </Button>
+          </div>
+          <div className='bg-muted rounded border p-2 font-mono text-[10px] break-all'>
+            {invoice.bolt11}
+          </div>
+          {isWaiting && (
+            <div className='flex animate-pulse items-center gap-2 text-xs text-orange-600'>
+              <Loader2 className='h-3 w-3 animate-spin' />
+              Waiting for payment...
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

ui/lib/api/services/admin.ts

@@ -938,9 +938,17 @@ export class AdminService {
       ok: boolean;
       topup_data: Record<string, unknown>;
       message: string;
-    }>(`/admin/api/upstream-providers/${providerId}/topup`, {
-      amount: amount,
-    });
+    }>(`/admin/api/upstream-providers/${providerId}/topup`, { amount });
+  }
+
+  static async topupProviderWithToken(
+    providerId: number,
+    token: string
+  ): Promise<{ ok: boolean; message?: string }> {
+    return await apiClient.post<{ ok: boolean; message?: string }>(
+      `/admin/api/upstream-providers/${providerId}/topup-token`,
+      { token }
+    );
   }
 
   static async checkTopupStatus(

ui/lib/api/services/routstr-provider.ts

@@ -0,0 +1,13 @@
+import { apiClient } from '../client';
+
+export class RoutstrProviderService {
+  static async refundBalance(
+    providerId: number
+  ): Promise<{ ok: boolean; message: string; refund_id?: string }> {
+    return await apiClient.post<{
+      ok: boolean;
+      message: string;
+      refund_id?: string;
+    }>(`/admin/api/upstream-providers/${providerId}/routstr/refund`, {});
+  }
+}