mirror of
https://github.com/Routstr/routstr-core.git
synced 2026-10-05 12:28:22 +00:00
423 lines
15 KiB
TypeScript
423 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
|
|
import { useWalletInfo } from '@/hooks/use-wallet-info';
|
|
import type { RefundReceipt } from './cashu-payment-workflow';
|
|
import { toast } from 'sonner';
|
|
import { ApiKeyInput } from '../api-key-input';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
} from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { WalletService } from '@/lib/api/services/wallet';
|
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { Copy, RefreshCcw, RotateCcw, Trash2 } from 'lucide-react';
|
|
|
|
export type ChildKeyInfo = {
|
|
api_key: string;
|
|
total_requests: number;
|
|
total_spent: number;
|
|
balance_limit: number | null;
|
|
balance_limit_reset: string | null;
|
|
validity_date: number | null;
|
|
};
|
|
|
|
export type WalletSnapshot = {
|
|
apiKey: string;
|
|
balanceMsats: number;
|
|
reservedMsats: number;
|
|
isChild: boolean;
|
|
parentKey: string | null;
|
|
totalRequests: number;
|
|
totalSpent: number;
|
|
balanceLimit: number | null;
|
|
balanceLimitReset: string | null;
|
|
validityDate: number | null;
|
|
childKeys?: ChildKeyInfo[];
|
|
};
|
|
|
|
interface KeyInfoDetailsProps {
|
|
baseUrl: string;
|
|
apiKey?: string;
|
|
walletInfo?: WalletSnapshot | null;
|
|
onApiKeyChanged?: (apiKey: string) => void;
|
|
onWalletInfoUpdated?: (walletInfo: WalletSnapshot | null) => void;
|
|
onRefundComplete?: (receipt: RefundReceipt) => void;
|
|
}
|
|
|
|
export function KeyInfoDetails({
|
|
baseUrl,
|
|
apiKey = '',
|
|
walletInfo: propWalletInfo = null,
|
|
onApiKeyChanged,
|
|
onWalletInfoUpdated,
|
|
onRefundComplete,
|
|
}: KeyInfoDetailsProps): React.ReactNode {
|
|
const { copy } = useCopyToClipboard();
|
|
const [apiKeyInput, setApiKeyInput] = useState(apiKey);
|
|
const [isResetting, setIsResetting] = useState<string | null>(null);
|
|
const [isRefunding, setIsRefunding] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const {
|
|
data: queryWalletInfo,
|
|
refetch,
|
|
isFetching,
|
|
} = useWalletInfo(baseUrl, apiKeyInput);
|
|
const walletInfo = propWalletInfo ?? queryWalletInfo ?? null;
|
|
|
|
// Sync internal state with props if they change
|
|
useEffect(() => {
|
|
setApiKeyInput(apiKey);
|
|
}, [apiKey]);
|
|
|
|
const handleRefresh = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!apiKeyInput) return;
|
|
await refetch();
|
|
};
|
|
|
|
const handleKeyChange = (newKey: string) => {
|
|
setApiKeyInput(newKey);
|
|
setError(null);
|
|
onApiKeyChanged?.(newKey);
|
|
// Optionally clear info when key changes
|
|
if (newKey !== apiKey) {
|
|
onWalletInfoUpdated?.(null);
|
|
}
|
|
};
|
|
|
|
const handleCopy = async (value: string) => {
|
|
if (await copy(value)) {
|
|
toast.success('Copied to clipboard');
|
|
}
|
|
};
|
|
|
|
const handleResetSpent = async (childKey: string) => {
|
|
if (!walletInfo || walletInfo.isChild) return;
|
|
|
|
setIsResetting(childKey);
|
|
try {
|
|
await WalletService.resetChildKeySpent(baseUrl, apiKeyInput, childKey);
|
|
toast.success('Child key spent reset');
|
|
await refetch();
|
|
} catch (error) {
|
|
toast.error(
|
|
error instanceof Error ? error.message : 'Failed to reset child key'
|
|
);
|
|
} finally {
|
|
setIsResetting(null);
|
|
}
|
|
};
|
|
|
|
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);
|
|
toast.success('Refund completed');
|
|
await refetch();
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(error instanceof Error ? error.message : 'Refund failed');
|
|
} finally {
|
|
setIsRefunding(false);
|
|
}
|
|
}, [apiKeyInput, baseUrl, onRefundComplete, refetch]);
|
|
|
|
const formatSats = (msats: number) =>
|
|
new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
|
|
const formatMsats = (msats: number) =>
|
|
new Intl.NumberFormat('en-US').format(msats);
|
|
const formatDate = (timestamp: number | null) =>
|
|
timestamp ? new Date(timestamp * 1000).toLocaleDateString() : 'Never';
|
|
|
|
return (
|
|
<div className='space-y-6'>
|
|
<Card>
|
|
<CardHeader className='space-y-1'>
|
|
<CardTitle className='text-xl'>Key Information</CardTitle>
|
|
<CardDescription>
|
|
Enter an API key to view its balance, consumption, and child keys.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='flex flex-col gap-2 sm:flex-row'>
|
|
<ApiKeyInput value={apiKeyInput} onApiKeyChange={handleKeyChange} />
|
|
<div className='flex gap-2'>
|
|
<Button
|
|
variant='outline'
|
|
size='icon'
|
|
onClick={() => handleCopy(apiKeyInput)}
|
|
disabled={!apiKeyInput}
|
|
>
|
|
<Copy className='h-4 w-4' />
|
|
</Button>
|
|
<Button
|
|
variant='secondary'
|
|
size='sm'
|
|
className='min-w-[80px] gap-1'
|
|
onClick={handleRefresh}
|
|
disabled={isFetching || !apiKeyInput}
|
|
type='button'
|
|
>
|
|
<RefreshCcw
|
|
className={`h-8 w-4 ${isFetching ? 'animate-spin' : ''}`}
|
|
/>
|
|
{isFetching ? 'Syncing...' : 'Sync'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{error && (
|
|
<Alert variant='destructive' className='mt-2'>
|
|
<AlertTitle>Error</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{walletInfo && (
|
|
<>
|
|
<div className='grid gap-4 md:grid-cols-2'>
|
|
<Card>
|
|
<CardHeader className='pb-2'>
|
|
<CardTitle className='text-lg'>Status & Identity</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='space-y-4'>
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-muted-foreground text-sm'>Type</span>
|
|
<Badge variant={walletInfo.isChild ? 'secondary' : 'default'}>
|
|
{walletInfo.isChild ? 'Child Key' : 'Parent Key'}
|
|
</Badge>
|
|
</div>
|
|
{walletInfo.parentKey && (
|
|
<div className='space-y-1'>
|
|
<span className='text-muted-foreground text-xs tracking-wider'>
|
|
Parent Key
|
|
</span>
|
|
<div className='flex items-center gap-2'>
|
|
<code className='bg-muted flex-1 rounded px-2 py-1 font-mono text-xs break-all'>
|
|
{walletInfo.parentKey}
|
|
</code>
|
|
<Button
|
|
variant='ghost'
|
|
size='icon'
|
|
className='h-8 w-8'
|
|
onClick={() => handleCopy(walletInfo.parentKey!)}
|
|
>
|
|
<Copy className='h-4 w-4' />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-muted-foreground text-sm'>
|
|
Validity
|
|
</span>
|
|
<span className='text-sm font-medium'>
|
|
{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
|
|
</span>
|
|
<span className='text-primary font-mono text-sm font-medium'>
|
|
{formatSats(walletInfo.balanceMsats)} sats
|
|
</span>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-muted-foreground text-sm'>
|
|
Total Requests
|
|
</span>
|
|
<span className='font-mono text-sm font-medium'>
|
|
{walletInfo.totalRequests}
|
|
</span>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-muted-foreground text-sm'>
|
|
Total Spent
|
|
</span>
|
|
<div className='text-right'>
|
|
<p className='font-mono text-sm font-medium'>
|
|
{formatSats(walletInfo.totalSpent)} sats
|
|
</p>
|
|
<p className='text-muted-foreground font-mono text-[0.6rem]'>
|
|
{formatMsats(walletInfo.totalSpent)} msats
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{walletInfo.balanceLimit !== null && (
|
|
<div className='space-y-2'>
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-muted-foreground text-sm'>
|
|
Spend Limit
|
|
</span>
|
|
<span className='font-mono text-sm font-medium'>
|
|
{formatSats(walletInfo.balanceLimit)} sats
|
|
</span>
|
|
</div>
|
|
{walletInfo.balanceLimitReset && (
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-muted-foreground text-sm'>
|
|
Reset Policy
|
|
</span>
|
|
<Badge variant='outline' className='capitalize'>
|
|
{walletInfo.balanceLimitReset}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{!walletInfo.isChild &&
|
|
walletInfo.childKeys &&
|
|
walletInfo.childKeys.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className='text-lg'>
|
|
Child Keys ({walletInfo.childKeys.length})
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Secondary keys using this account's balance
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='space-y-4'>
|
|
{walletInfo.childKeys.map((ck) => (
|
|
<div
|
|
key={ck.api_key}
|
|
className='space-y-3 rounded-lg border p-4'
|
|
>
|
|
<div className='flex items-center justify-between gap-4'>
|
|
<code className='bg-muted flex-1 rounded px-2 py-1 font-mono text-xs break-all'>
|
|
{ck.api_key}
|
|
</code>
|
|
<div className='flex gap-1'>
|
|
<Button
|
|
variant='ghost'
|
|
size='icon'
|
|
className='h-8 w-8'
|
|
onClick={() => handleCopy(ck.api_key)}
|
|
>
|
|
<Copy className='h-4 w-4' />
|
|
</Button>
|
|
<Button
|
|
variant='ghost'
|
|
size='icon'
|
|
className='text-destructive h-8 w-8'
|
|
title='Reset consumption'
|
|
disabled={isResetting === ck.api_key}
|
|
onClick={() => handleResetSpent(ck.api_key)}
|
|
>
|
|
{isResetting === ck.api_key ? (
|
|
<RefreshCcw className='h-4 w-4 animate-spin' />
|
|
) : (
|
|
<RotateCcw className='h-4 w-4' />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className='grid grid-cols-2 gap-4 text-xs sm:grid-cols-5'>
|
|
<div>
|
|
<p className='text-muted-foreground text-[0.6rem] tracking-wider'>
|
|
Requests
|
|
</p>
|
|
<p className='font-mono font-medium'>
|
|
{ck.total_requests}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-muted-foreground text-[0.6rem] tracking-wider'>
|
|
Spent
|
|
</p>
|
|
<p className='font-mono font-medium'>
|
|
{formatSats(ck.total_spent)} sats
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-muted-foreground text-[0.6rem] tracking-wider'>
|
|
Limit
|
|
</p>
|
|
<p className='font-mono font-medium'>
|
|
{ck.balance_limit
|
|
? `${formatSats(ck.balance_limit)} sats`
|
|
: 'None'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-muted-foreground text-[0.6rem] tracking-wider'>
|
|
Policy
|
|
</p>
|
|
<p className='font-medium capitalize'>
|
|
{ck.balance_limit_reset || 'None'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-muted-foreground text-[0.6rem] tracking-wider'>
|
|
Expires
|
|
</p>
|
|
<p className='font-medium'>
|
|
{formatDate(ck.validity_date)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className='flex justify-center gap-4'>
|
|
<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>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|