diff --git a/ui/components/providers/ProviderBalance.tsx b/ui/components/providers/ProviderBalance.tsx
new file mode 100644
index 00000000..2ebb3966
--- /dev/null
+++ b/ui/components/providers/ProviderBalance.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { AdminService } from '@/lib/api/services/admin';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Separator } from '@/components/ui/separator';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { SimpleLightningTopup } from './SimpleLightningTopup';
+import { SimpleCashuTopup } from './SimpleCashuTopup';
+
+interface ProviderBalanceProps {
+ providerId: number;
+ platformUrl?: string | null;
+ isRoutstr?: boolean;
+ nodeUrl?: string;
+}
+
+export function ProviderBalance({
+ providerId,
+ platformUrl,
+ isRoutstr = false,
+ nodeUrl,
+}: ProviderBalanceProps) {
+ const [isTopupDialogOpen, setIsTopupDialogOpen] = useState(false);
+ const [isHovered, setIsHovered] = useState(false);
+ const queryClient = useQueryClient();
+
+ const {
+ data: balanceData,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ['provider-balance', providerId],
+ queryFn: () => AdminService.getProviderBalance(providerId),
+ refetchInterval: 30000,
+ refetchOnWindowFocus: true,
+ retry: 1,
+ });
+
+ const handleTopUpClick = () => {
+ if (
+ platformUrl &&
+ (platformUrl.includes('openrouter.ai') ||
+ platformUrl.includes('openai.com'))
+ ) {
+ window.open(platformUrl, '_blank');
+ return;
+ }
+
+ setIsTopupDialogOpen(true);
+ };
+
+ const handleCloseDialog = () => {
+ setIsTopupDialogOpen(false);
+ queryClient.invalidateQueries({
+ queryKey: ['provider-balance', providerId],
+ });
+ };
+
+ if (isLoading) {
+ return
;
+ }
+
+ if (
+ error ||
+ !balanceData?.ok ||
+ balanceData.balance_data === undefined ||
+ balanceData.balance_data === null
+ ) {
+ return null;
+ }
+
+ const balance = balanceData.balance_data;
+ let displayValue = 'N/A';
+
+ if (typeof balance === 'number') {
+ displayValue = isRoutstr
+ ? `${balance.toLocaleString()} sats`
+ : `$${balance.toFixed(2)}`;
+ } else if (balance && typeof balance === 'object') {
+ const b = balance as Record
;
+ if (typeof b.balance === 'number') {
+ displayValue = `$${b.balance.toFixed(2)}`;
+ } else if (typeof b.balance === 'string') {
+ displayValue = b.balance;
+ } else if (b.amount !== undefined) {
+ displayValue = `$${Number(b.amount).toFixed(2)}`;
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/ui/components/providers/RoutstrCreateKeySection.tsx b/ui/components/providers/RoutstrCreateKeySection.tsx
new file mode 100644
index 00000000..0d9de579
--- /dev/null
+++ b/ui/components/providers/RoutstrCreateKeySection.tsx
@@ -0,0 +1,295 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import Image from 'next/image';
+import { Copy, Loader2, Zap, KeyRound } from 'lucide-react';
+import { toast } from 'sonner';
+import QRCode from 'qrcode';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+interface RoutstrCreateKeySectionProps {
+ baseUrl: string;
+ onApiKeyCreated: (apiKey: string) => void;
+}
+
+async function generateQR(text: string): Promise {
+ try {
+ return await QRCode.toDataURL(text, {
+ type: 'image/png',
+ width: 200,
+ margin: 1,
+ color: { dark: '#000000', light: '#FFFFFF' },
+ });
+ } catch {
+ return '';
+ }
+}
+
+export function RoutstrCreateKeySection({
+ baseUrl,
+ onApiKeyCreated,
+}: RoutstrCreateKeySectionProps) {
+ // Lightning state
+ const [lnAmount, setLnAmount] = useState('');
+ const [lnInvoice, setLnInvoice] = useState<{
+ bolt11: string;
+ invoice_id: string;
+ } | null>(null);
+ const [lnQrCode, setLnQrCode] = useState('');
+ const [isCreatingLn, setIsCreatingLn] = useState(false);
+ const [isWaitingLn, setIsWaitingLn] = useState(false);
+
+ // Cashu state
+ const [cashuToken, setCashuToken] = useState('');
+ const [isCreatingCashu, setIsCreatingCashu] = useState(false);
+
+ if (!baseUrl) {
+ return (
+
+
+ Enter the upstream node Base URL above to enable key creation.
+
+
+
+
+
+ External Node
+
+
+
+
+ Create an API key on the upstream Routstr node by paying with Lightning
+ or Cashu.
+
+
+
+
+
+
+ Lightning
+
+
+
+ Cashu
+
+
+
+
+
+ setLnAmount(e.target.value)}
+ className='h-9'
+ disabled={isWaitingLn}
+ />
+
+
+
+ {lnInvoice && (
+
+
+ Pay this invoice to create your key
+
+
+ {lnQrCode && (
+
+
+
+ )}
+
+ {lnInvoice.bolt11}
+
+ {isWaitingLn && (
+
+
+ Waiting for payment...
+
+ )}
+