972 lines
48 KiB
TypeScript
972 lines
48 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { QRCodeSVG } from 'qrcode.react';
|
||
import { PageHeader } from '@/components/layout/page-header';
|
||
import {
|
||
useMarketMakerConfig,
|
||
useInitializeMarketMaker,
|
||
useUpdateMarketMakerConfig,
|
||
useDepositCash,
|
||
useWithdrawCash,
|
||
useDepositShares,
|
||
useWithdrawShares,
|
||
useBlockchainWithdrawCash,
|
||
useBlockchainWithdrawShares,
|
||
useStartTaker,
|
||
useStopTaker,
|
||
useTakeOrder,
|
||
useStartMaker,
|
||
useStopMaker,
|
||
useRefreshOrders,
|
||
useCancelAllOrders,
|
||
useDepth,
|
||
useDepthEnabled,
|
||
useSetDepthEnabled,
|
||
} from '@/features/market-maker';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from '@/components/ui/dialog';
|
||
import {
|
||
Play,
|
||
Pause,
|
||
AlertCircle,
|
||
CheckCircle2,
|
||
RefreshCw,
|
||
Wallet,
|
||
TrendingUp,
|
||
TrendingDown,
|
||
BarChart3,
|
||
Zap,
|
||
PlusCircle,
|
||
MinusCircle,
|
||
Copy,
|
||
Check,
|
||
} from 'lucide-react';
|
||
|
||
export default function MarketMakerPage() {
|
||
const { data: configData, isLoading: configLoading, refetch } = useMarketMakerConfig();
|
||
const { data: depthData, isLoading: depthLoading } = useDepth(10);
|
||
const { data: depthEnabled, isLoading: depthEnabledLoading } = useDepthEnabled();
|
||
|
||
const runningStatus = configData?.runningStatus;
|
||
|
||
const initializeMutation = useInitializeMarketMaker();
|
||
const depositCashMutation = useDepositCash();
|
||
const withdrawCashMutation = useWithdrawCash();
|
||
const depositSharesMutation = useDepositShares();
|
||
const withdrawSharesMutation = useWithdrawShares();
|
||
const blockchainWithdrawCashMutation = useBlockchainWithdrawCash();
|
||
const blockchainWithdrawSharesMutation = useBlockchainWithdrawShares();
|
||
const startTakerMutation = useStartTaker();
|
||
const stopTakerMutation = useStopTaker();
|
||
const takeOrderMutation = useTakeOrder();
|
||
const startMakerMutation = useStartMaker();
|
||
const stopMakerMutation = useStopMaker();
|
||
const refreshOrdersMutation = useRefreshOrders();
|
||
const cancelAllOrdersMutation = useCancelAllOrders();
|
||
const setDepthEnabledMutation = useSetDepthEnabled();
|
||
const updateConfigMutation = useUpdateMarketMakerConfig();
|
||
|
||
const [initAccountSeq, setInitAccountSeq] = useState('MM001');
|
||
const [walletAddressInput, setWalletAddressInput] = useState('');
|
||
const [depositCashAmount, setDepositCashAmount] = useState('');
|
||
const [withdrawCashAmount, setWithdrawCashAmount] = useState('');
|
||
const [depositSharesAmount, setDepositSharesAmount] = useState('');
|
||
const [withdrawSharesAmount, setWithdrawSharesAmount] = useState('');
|
||
const [copiedAddress, setCopiedAddress] = useState(false);
|
||
// 区块链提现
|
||
const [blockchainWithdrawCashAddress, setBlockchainWithdrawCashAddress] = useState('');
|
||
const [blockchainWithdrawCashAmount, setBlockchainWithdrawCashAmount] = useState('');
|
||
const [blockchainWithdrawSharesAddress, setBlockchainWithdrawSharesAddress] = useState('');
|
||
const [blockchainWithdrawSharesAmount, setBlockchainWithdrawSharesAmount] = useState('');
|
||
|
||
const handleCopyAddress = async (address: string) => {
|
||
await navigator.clipboard.writeText(address);
|
||
setCopiedAddress(true);
|
||
setTimeout(() => setCopiedAddress(false), 2000);
|
||
};
|
||
|
||
const config = configData?.config;
|
||
|
||
const formatNumber = (value: string | undefined, decimals: number = 2) => {
|
||
if (!value) return '0';
|
||
const num = parseFloat(value);
|
||
if (isNaN(num)) return '0';
|
||
return num.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<PageHeader title="做市商管理" description="管理做市商配置、资金和深度挂单" />
|
||
<Button variant="outline" size="sm" onClick={() => refetch()}>
|
||
<RefreshCw className="h-4 w-4 mr-2" />
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 未初始化状态 */}
|
||
{!configLoading && !config && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>初始化做市商</CardTitle>
|
||
<CardDescription>做市商尚未初始化，请先创建做市商配置</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label>账户序列号</Label>
|
||
<Input
|
||
value={initAccountSeq}
|
||
onChange={(e) => setInitAccountSeq(e.target.value)}
|
||
placeholder="做市商专用账户序列号"
|
||
/>
|
||
</div>
|
||
<Button
|
||
onClick={() => initializeMutation.mutate({ accountSequence: initAccountSeq })}
|
||
disabled={initializeMutation.isPending || !initAccountSeq}
|
||
>
|
||
{initializeMutation.isPending ? '初始化中...' : '初始化做市商'}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{configLoading && (
|
||
<div className="space-y-6">
|
||
<Skeleton className="h-48 w-full" />
|
||
<Skeleton className="h-48 w-full" />
|
||
</div>
|
||
)}
|
||
|
||
{config && (
|
||
<>
|
||
{/* 资金状态卡片 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{/* 现金余额 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Wallet className="h-5 w-5 text-green-500" />
|
||
现金余额（积分值）
|
||
</CardTitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">总余额</p>
|
||
<p className="text-2xl font-bold">{formatNumber(config.cashBalance, 2)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">可用余额</p>
|
||
<p className="text-2xl font-bold text-green-500">{formatNumber(config.availableCash, 2)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">冻结中</p>
|
||
<p className="text-lg text-muted-foreground">{formatNumber(config.frozenCash, 2)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2 pt-4 border-t">
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<PlusCircle className="h-4 w-4 mr-1" />
|
||
充值
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>充值现金（积分值）</DialogTitle>
|
||
<DialogDescription>选择充值方式向做市商账户充值</DialogDescription>
|
||
</DialogHeader>
|
||
<Tabs defaultValue="centralized" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="centralized">中心化充值</TabsTrigger>
|
||
<TabsTrigger value="blockchain">区块链充值</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="centralized" className="space-y-4 pt-4">
|
||
<div>
|
||
<Label>充值金额</Label>
|
||
<Input
|
||
type="number"
|
||
value={depositCashAmount}
|
||
onChange={(e) => setDepositCashAmount(e.target.value)}
|
||
placeholder="请输入金额"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
depositCashMutation.mutate({ amount: depositCashAmount });
|
||
setDepositCashAmount('');
|
||
}}
|
||
disabled={depositCashMutation.isPending || !depositCashAmount}
|
||
>
|
||
{depositCashMutation.isPending ? '处理中...' : '确认充值'}
|
||
</Button>
|
||
</TabsContent>
|
||
<TabsContent value="blockchain" className="space-y-4 pt-4">
|
||
<div className="text-sm text-muted-foreground text-center">
|
||
向以下地址转入 <strong>fUSDT</strong> (积分值代币)
|
||
</div>
|
||
{config.kavaWalletAddress ? (
|
||
<div className="flex flex-col items-center space-y-4">
|
||
<div className="p-4 bg-white rounded-lg">
|
||
<QRCodeSVG value={config.kavaWalletAddress} size={180} />
|
||
</div>
|
||
<div className="w-full">
|
||
<Label className="text-xs text-muted-foreground">钱包地址 (Kava EVM)</Label>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<code className="flex-1 text-xs bg-muted p-2 rounded break-all">
|
||
{config.kavaWalletAddress}
|
||
</code>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleCopyAddress(config.kavaWalletAddress!)}
|
||
>
|
||
{copiedAddress ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded w-full">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
转账后系统将自动检测并入账（约需12个区块确认）
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="text-center text-muted-foreground py-2">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2 text-yellow-500" />
|
||
<p className="text-sm">做市商钱包地址未配置</p>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">配置钱包地址 (Kava EVM)</Label>
|
||
<Input
|
||
value={walletAddressInput}
|
||
onChange={(e) => setWalletAddressInput(e.target.value)}
|
||
placeholder="0x..."
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
updateConfigMutation.mutate({ kavaWalletAddress: walletAddressInput });
|
||
setWalletAddressInput('');
|
||
}}
|
||
disabled={updateConfigMutation.isPending || !walletAddressInput || !walletAddressInput.startsWith('0x')}
|
||
>
|
||
{updateConfigMutation.isPending ? '保存中...' : '保存钱包地址'}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<MinusCircle className="h-4 w-4 mr-1" />
|
||
提现
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>提现现金（积分值）</DialogTitle>
|
||
<DialogDescription>选择提现方式从做市商账户提取</DialogDescription>
|
||
</DialogHeader>
|
||
<Tabs defaultValue="centralized" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="centralized">中心化提现</TabsTrigger>
|
||
<TabsTrigger value="blockchain">区块链提现</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="centralized" className="space-y-4 pt-4">
|
||
<div>
|
||
<Label>提现金额</Label>
|
||
<Input
|
||
type="number"
|
||
value={withdrawCashAmount}
|
||
onChange={(e) => setWithdrawCashAmount(e.target.value)}
|
||
placeholder="请输入金额"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
withdrawCashMutation.mutate({ amount: withdrawCashAmount });
|
||
setWithdrawCashAmount('');
|
||
}}
|
||
disabled={withdrawCashMutation.isPending || !withdrawCashAmount}
|
||
>
|
||
{withdrawCashMutation.isPending ? '处理中...' : '确认提现'}
|
||
</Button>
|
||
</TabsContent>
|
||
<TabsContent value="blockchain" className="space-y-4 pt-4">
|
||
<div className="text-sm text-muted-foreground text-center">
|
||
转账 <strong>fUSDT</strong>（积分值代币）到指定地址
|
||
</div>
|
||
<div>
|
||
<Label>目标地址 (Kava EVM)</Label>
|
||
<Input
|
||
value={blockchainWithdrawCashAddress}
|
||
onChange={(e) => setBlockchainWithdrawCashAddress(e.target.value)}
|
||
placeholder="0x..."
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>提现金额</Label>
|
||
<Input
|
||
type="number"
|
||
value={blockchainWithdrawCashAmount}
|
||
onChange={(e) => setBlockchainWithdrawCashAmount(e.target.value)}
|
||
placeholder="请输入金额"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
blockchainWithdrawCashMutation.mutate({
|
||
toAddress: blockchainWithdrawCashAddress,
|
||
amount: blockchainWithdrawCashAmount,
|
||
});
|
||
setBlockchainWithdrawCashAddress('');
|
||
setBlockchainWithdrawCashAmount('');
|
||
}}
|
||
disabled={
|
||
blockchainWithdrawCashMutation.isPending ||
|
||
!blockchainWithdrawCashAddress ||
|
||
!blockchainWithdrawCashAmount
|
||
}
|
||
>
|
||
{blockchainWithdrawCashMutation.isPending ? '链上转账中...' : '确认区块链提现'}
|
||
</Button>
|
||
<div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
区块链提现将从做市商钱包直接转账到目标地址
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 积分股余额 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<BarChart3 className="h-5 w-5 text-blue-500" />
|
||
积分股余额
|
||
</CardTitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">总余额</p>
|
||
<p className="text-2xl font-bold">{formatNumber(config.shareBalance, 2)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">可用余额</p>
|
||
<p className="text-2xl font-bold text-blue-500">{formatNumber(config.availableShares, 2)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">冻结中</p>
|
||
<p className="text-lg text-muted-foreground">{formatNumber(config.frozenShares, 2)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2 pt-4 border-t">
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<PlusCircle className="h-4 w-4 mr-1" />
|
||
充值
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>充值积分股</DialogTitle>
|
||
<DialogDescription>选择充值方式向做市商账户充值积分股</DialogDescription>
|
||
</DialogHeader>
|
||
<Tabs defaultValue="centralized" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="centralized">中心化充值</TabsTrigger>
|
||
<TabsTrigger value="blockchain">区块链充值</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="centralized" className="space-y-4 pt-4">
|
||
<div>
|
||
<Label>充值数量</Label>
|
||
<Input
|
||
type="number"
|
||
value={depositSharesAmount}
|
||
onChange={(e) => setDepositSharesAmount(e.target.value)}
|
||
placeholder="请输入数量"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
depositSharesMutation.mutate({ amount: depositSharesAmount });
|
||
setDepositSharesAmount('');
|
||
}}
|
||
disabled={depositSharesMutation.isPending || !depositSharesAmount}
|
||
>
|
||
{depositSharesMutation.isPending ? '处理中...' : '确认充值'}
|
||
</Button>
|
||
</TabsContent>
|
||
<TabsContent value="blockchain" className="space-y-4 pt-4">
|
||
<div className="text-sm text-muted-foreground text-center">
|
||
向以下地址转入 <strong>eUSDT</strong> (积分股代币)
|
||
</div>
|
||
{config.kavaWalletAddress ? (
|
||
<div className="flex flex-col items-center space-y-4">
|
||
<div className="p-4 bg-white rounded-lg">
|
||
<QRCodeSVG value={config.kavaWalletAddress} size={180} />
|
||
</div>
|
||
<div className="w-full">
|
||
<Label className="text-xs text-muted-foreground">钱包地址 (Kava EVM)</Label>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<code className="flex-1 text-xs bg-muted p-2 rounded break-all">
|
||
{config.kavaWalletAddress}
|
||
</code>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleCopyAddress(config.kavaWalletAddress!)}
|
||
>
|
||
{copiedAddress ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded w-full">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
转账后系统将自动检测并入账（约需12个区块确认）
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="text-center text-muted-foreground py-2">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2 text-yellow-500" />
|
||
<p className="text-sm">做市商钱包地址未配置</p>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">配置钱包地址 (Kava EVM)</Label>
|
||
<Input
|
||
value={walletAddressInput}
|
||
onChange={(e) => setWalletAddressInput(e.target.value)}
|
||
placeholder="0x..."
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
updateConfigMutation.mutate({ kavaWalletAddress: walletAddressInput });
|
||
setWalletAddressInput('');
|
||
}}
|
||
disabled={updateConfigMutation.isPending || !walletAddressInput || !walletAddressInput.startsWith('0x')}
|
||
>
|
||
{updateConfigMutation.isPending ? '保存中...' : '保存钱包地址'}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<MinusCircle className="h-4 w-4 mr-1" />
|
||
提取
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>提取积分股</DialogTitle>
|
||
<DialogDescription>选择提现方式从做市商账户提取</DialogDescription>
|
||
</DialogHeader>
|
||
<Tabs defaultValue="centralized" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="centralized">中心化提取</TabsTrigger>
|
||
<TabsTrigger value="blockchain">区块链提现</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="centralized" className="space-y-4 pt-4">
|
||
<div>
|
||
<Label>提取数量</Label>
|
||
<Input
|
||
type="number"
|
||
value={withdrawSharesAmount}
|
||
onChange={(e) => setWithdrawSharesAmount(e.target.value)}
|
||
placeholder="请输入数量"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
withdrawSharesMutation.mutate({ amount: withdrawSharesAmount });
|
||
setWithdrawSharesAmount('');
|
||
}}
|
||
disabled={withdrawSharesMutation.isPending || !withdrawSharesAmount}
|
||
>
|
||
{withdrawSharesMutation.isPending ? '处理中...' : '确认提取'}
|
||
</Button>
|
||
</TabsContent>
|
||
<TabsContent value="blockchain" className="space-y-4 pt-4">
|
||
<div className="text-sm text-muted-foreground text-center">
|
||
转账 <strong>eUSDT</strong>（积分股代币）到指定地址
|
||
</div>
|
||
<div>
|
||
<Label>目标地址 (Kava EVM)</Label>
|
||
<Input
|
||
value={blockchainWithdrawSharesAddress}
|
||
onChange={(e) => setBlockchainWithdrawSharesAddress(e.target.value)}
|
||
placeholder="0x..."
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>提取数量</Label>
|
||
<Input
|
||
type="number"
|
||
value={blockchainWithdrawSharesAmount}
|
||
onChange={(e) => setBlockchainWithdrawSharesAmount(e.target.value)}
|
||
placeholder="请输入数量"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
blockchainWithdrawSharesMutation.mutate({
|
||
toAddress: blockchainWithdrawSharesAddress,
|
||
amount: blockchainWithdrawSharesAmount,
|
||
});
|
||
setBlockchainWithdrawSharesAddress('');
|
||
setBlockchainWithdrawSharesAmount('');
|
||
}}
|
||
disabled={
|
||
blockchainWithdrawSharesMutation.isPending ||
|
||
!blockchainWithdrawSharesAddress ||
|
||
!blockchainWithdrawSharesAmount
|
||
}
|
||
>
|
||
{blockchainWithdrawSharesMutation.isPending ? '链上转账中...' : '确认区块链提现'}
|
||
</Button>
|
||
<div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
区块链提现将从做市商钱包直接转账到目标地址
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 运行模式状态 */}
|
||
<Card className="border-2 border-primary/20">
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-lg">当前运行模式</CardTitle>
|
||
{runningStatus?.mode === 'idle' && (
|
||
<Badge variant="secondary" className="text-base px-3 py-1">
|
||
<Pause className="h-4 w-4 mr-1" />
|
||
空闲
|
||
</Badge>
|
||
)}
|
||
{runningStatus?.mode === 'taker' && (
|
||
<Badge variant="default" className="bg-green-500 text-base px-3 py-1">
|
||
<Zap className="h-4 w-4 mr-1" />
|
||
吃单模式运行中
|
||
</Badge>
|
||
)}
|
||
{runningStatus?.mode === 'maker' && (
|
||
<Badge variant="default" className="bg-blue-500 text-base px-3 py-1">
|
||
<BarChart3 className="h-4 w-4 mr-1" />
|
||
挂单模式运行中
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-center gap-6 text-sm text-muted-foreground">
|
||
<div className="flex items-center gap-2">
|
||
<span className={`w-2 h-2 rounded-full ${runningStatus?.takerRunning ? 'bg-green-500' : 'bg-gray-300'}`} />
|
||
<span>吃单模式: {runningStatus?.takerRunning ? '运行中' : '未运行'}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className={`w-2 h-2 rounded-full ${runningStatus?.makerRunning ? 'bg-blue-500' : 'bg-gray-300'}`} />
|
||
<span>挂单模式: {runningStatus?.makerRunning ? '运行中' : '未运行'}</span>
|
||
</div>
|
||
<div className="ml-auto text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
两种模式互斥，启动一个会自动停止另一个
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 运行模式控制 */}
|
||
<Tabs defaultValue="taker">
|
||
<TabsList>
|
||
<TabsTrigger value="taker">吃单模式</TabsTrigger>
|
||
<TabsTrigger value="maker">挂单模式（深度）</TabsTrigger>
|
||
<TabsTrigger value="depth">深度显示</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* 吃单模式 */}
|
||
<TabsContent value="taker">
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Zap className="h-5 w-5" />
|
||
吃单模式
|
||
</CardTitle>
|
||
<CardDescription>
|
||
自动买入用户卖单（Taker 策略）— 做市商作为买方，不触发额外销毁
|
||
</CardDescription>
|
||
</div>
|
||
{runningStatus?.takerRunning ? (
|
||
<Badge variant="default" className="bg-green-500">
|
||
<CheckCircle2 className="h-3 w-3 mr-1" />
|
||
运行中
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="secondary">
|
||
<Pause className="h-3 w-3 mr-1" />
|
||
已停止
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">单次最大买入比例</p>
|
||
<p className="font-semibold">{formatNumber(String(parseFloat(config.maxBuyRatio) * 100), 2)}%</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">最小间隔</p>
|
||
<p className="font-semibold">{config.minIntervalMs}ms</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">最大间隔</p>
|
||
<p className="font-semibold">{config.maxIntervalMs}ms</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">价格策略</p>
|
||
<p className="font-semibold">{config.priceStrategy}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2 pt-4 border-t">
|
||
{runningStatus?.takerRunning ? (
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => stopTakerMutation.mutate()}
|
||
disabled={stopTakerMutation.isPending}
|
||
>
|
||
<Pause className="h-4 w-4 mr-2" />
|
||
{stopTakerMutation.isPending ? '停止中...' : '停止吃单'}
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
onClick={() => startTakerMutation.mutate()}
|
||
disabled={startTakerMutation.isPending}
|
||
>
|
||
<Play className="h-4 w-4 mr-2" />
|
||
{startTakerMutation.isPending ? '启动中...' : '启动吃单'}
|
||
</Button>
|
||
)}
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => takeOrderMutation.mutate()}
|
||
disabled={takeOrderMutation.isPending}
|
||
>
|
||
<Zap className="h-4 w-4 mr-2" />
|
||
{takeOrderMutation.isPending ? '执行中...' : '手动吃单'}
|
||
</Button>
|
||
</div>
|
||
|
||
{runningStatus?.makerRunning && (
|
||
<div className="text-sm text-yellow-600 bg-yellow-50 p-3 rounded">
|
||
<AlertCircle className="h-4 w-4 inline mr-1" />
|
||
启动吃单模式将自动停止当前运行的挂单模式
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* 挂单模式 */}
|
||
<TabsContent value="maker">
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<BarChart3 className="h-5 w-5" />
|
||
挂单模式（双边深度）
|
||
</CardTitle>
|
||
<CardDescription>
|
||
自动挂买卖单形成深度（Maker 策略）— 做市商卖单被吃会触发销毁
|
||
</CardDescription>
|
||
</div>
|
||
{runningStatus?.makerRunning ? (
|
||
<Badge variant="default" className="bg-blue-500">
|
||
<CheckCircle2 className="h-3 w-3 mr-1" />
|
||
运行中
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="secondary">
|
||
<Pause className="h-3 w-3 mr-1" />
|
||
已停止
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{/* 警告提示 */}
|
||
<div className="text-sm text-orange-600 bg-orange-50 p-3 rounded border border-orange-200">
|
||
<AlertCircle className="h-4 w-4 inline mr-1" />
|
||
<strong>注意：</strong>挂单模式下做市商会挂卖单，当卖单被用户买入时会触发销毁机制导致价格上涨。
|
||
如果只想提供流动性而不影响价格，请使用吃单模式。
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">买单档位</p>
|
||
<p className="font-semibold">{config.bidLevels || 5}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">买单价差</p>
|
||
<p className="font-semibold">{formatNumber(String(parseFloat(config.bidSpread || '0.01') * 100), 2)}%</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">每档买单量</p>
|
||
<p className="font-semibold">{formatNumber(config.bidQuantityPerLevel || '1000', 0)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">卖单档位</p>
|
||
<p className="font-semibold">{config.askLevels || 5}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">卖单价差</p>
|
||
<p className="font-semibold">{formatNumber(String(parseFloat(config.askSpread || '0.01') * 100), 2)}%</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">每档卖单量</p>
|
||
<p className="font-semibold">{formatNumber(config.askQuantityPerLevel || '1000', 0)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2 pt-4 border-t">
|
||
{runningStatus?.makerRunning ? (
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => stopMakerMutation.mutate()}
|
||
disabled={stopMakerMutation.isPending}
|
||
>
|
||
<Pause className="h-4 w-4 mr-2" />
|
||
{stopMakerMutation.isPending ? '停止中...' : '停止挂单'}
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => startMakerMutation.mutate()}
|
||
disabled={startMakerMutation.isPending}
|
||
>
|
||
<Play className="h-4 w-4 mr-2" />
|
||
{startMakerMutation.isPending ? '启动中...' : '启动挂单'}
|
||
</Button>
|
||
)}
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => refreshOrdersMutation.mutate()}
|
||
disabled={refreshOrdersMutation.isPending || !runningStatus?.makerRunning}
|
||
>
|
||
<RefreshCw className="h-4 w-4 mr-2" />
|
||
{refreshOrdersMutation.isPending ? '刷新中...' : '刷新挂单'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => cancelAllOrdersMutation.mutate()}
|
||
disabled={cancelAllOrdersMutation.isPending}
|
||
>
|
||
{cancelAllOrdersMutation.isPending ? '取消中...' : '取消所有挂单'}
|
||
</Button>
|
||
</div>
|
||
|
||
{runningStatus?.takerRunning && (
|
||
<div className="text-sm text-yellow-600 bg-yellow-50 p-3 rounded">
|
||
<AlertCircle className="h-4 w-4 inline mr-1" />
|
||
启动挂单模式将自动停止当前运行的吃单模式
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* 深度显示控制 */}
|
||
<TabsContent value="depth">
|
||
<div className="space-y-6">
|
||
{/* 深度开关 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle className="text-lg">深度显示开关</CardTitle>
|
||
<CardDescription>控制App端是否显示买卖深度</CardDescription>
|
||
</div>
|
||
{depthEnabledLoading ? (
|
||
<Skeleton className="h-6 w-16" />
|
||
) : depthEnabled?.enabled ? (
|
||
<Badge variant="default" className="bg-green-500">
|
||
<CheckCircle2 className="h-3 w-3 mr-1" />
|
||
已开启
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="secondary">
|
||
<Pause className="h-3 w-3 mr-1" />
|
||
已关闭
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-center justify-between p-4 bg-muted rounded-lg">
|
||
<div>
|
||
<p className="font-medium">深度显示</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
{depthEnabled?.enabled ? '用户可以在App中查看买卖深度' : '深度功能已关闭，用户无法查看'}
|
||
</p>
|
||
</div>
|
||
<Switch
|
||
checked={depthEnabled?.enabled ?? false}
|
||
onCheckedChange={(checked) => setDepthEnabledMutation.mutate(checked)}
|
||
disabled={setDepthEnabledMutation.isPending || depthEnabledLoading}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 当前深度 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">当前深度</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{depthLoading ? (
|
||
<Skeleton className="h-64 w-full" />
|
||
) : (
|
||
<div className="grid grid-cols-2 gap-6">
|
||
{/* 买单深度 */}
|
||
<div>
|
||
<h4 className="font-medium text-green-500 mb-2 flex items-center gap-1">
|
||
<TrendingUp className="h-4 w-4" />
|
||
买单深度
|
||
</h4>
|
||
{depthData?.bids?.length ? (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>价格</TableHead>
|
||
<TableHead>数量</TableHead>
|
||
<TableHead>累计</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{depthData.bids.map((bid, idx) => (
|
||
<TableRow key={idx}>
|
||
<TableCell className="font-mono text-green-500">{formatNumber(bid.price, 8)}</TableCell>
|
||
<TableCell className="font-mono">{formatNumber(bid.quantity, 2)}</TableCell>
|
||
<TableCell className="font-mono text-muted-foreground">{formatNumber(bid.total, 2)}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
) : (
|
||
<p className="text-center text-muted-foreground py-4">暂无买单</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* 卖单深度 */}
|
||
<div>
|
||
<h4 className="font-medium text-red-500 mb-2 flex items-center gap-1">
|
||
<TrendingDown className="h-4 w-4" />
|
||
卖单深度
|
||
</h4>
|
||
{depthData?.asks?.length ? (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>价格</TableHead>
|
||
<TableHead>数量</TableHead>
|
||
<TableHead>累计</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{depthData.asks.map((ask, idx) => (
|
||
<TableRow key={idx}>
|
||
<TableCell className="font-mono text-red-500">{formatNumber(ask.price, 8)}</TableCell>
|
||
<TableCell className="font-mono">{formatNumber(ask.quantity, 2)}</TableCell>
|
||
<TableCell className="font-mono text-muted-foreground">{formatNumber(ask.total, 2)}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
) : (
|
||
<p className="text-center text-muted-foreground py-4">暂无卖单</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|