110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import SectionMain from '../components/SectionMain';
|
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
|
import { Button } from '../components/BaseButton';
|
|
import * as icon from '@mdi/js';
|
|
|
|
const StrategyBuilderPage: React.FC = () => {
|
|
const [maxOpenDeals, setMaxOpenDeals] = useState(false);
|
|
const [multiplier, setMultiplier] = useState(1);
|
|
const [orderVolumeEnabled, setOrderVolumeEnabled] = useState(false);
|
|
const [orderVolume, setOrderVolume] = useState(1);
|
|
const [backtestEnabled, setBacktestEnabled] = useState(false);
|
|
|
|
return (
|
|
<SectionMain>
|
|
{/* Top toolbar */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<Button variant="ghost" icon={icon.mdiArrowLeft}>Back</Button>
|
|
<div className="flex space-x-4">
|
|
<Button variant="outline">Overview</Button>
|
|
<Button variant="outline">Editor</Button>
|
|
<Button variant="outline">Trades</Button>
|
|
<Button variant="outline">Export CSV</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buy/Sell panels */}
|
|
<div className="grid grid-cols-2 gap-6 mb-6">
|
|
{/* Buy Panel */}
|
|
<div className="p-4 border rounded-lg">
|
|
<h3 className="text-lg font-semibold mb-4">Buy</h3>
|
|
<div className="flex items-center mb-3">
|
|
<span className="mr-2">Max. open deals</span>
|
|
<input type="checkbox" checked={maxOpenDeals} onChange={() => setMaxOpenDeals(!maxOpenDeals)} />
|
|
</div>
|
|
<div className="flex items-center mb-3">
|
|
<label className="mr-2">Multiplier</label>
|
|
<input
|
|
type="number"
|
|
className="border p-1 w-16"
|
|
value={multiplier}
|
|
onChange={e => setMultiplier(Number(e.target.value))}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center mb-3">
|
|
<span className="mr-2">Order volume</span>
|
|
<input type="checkbox" checked={orderVolumeEnabled} onChange={() => setOrderVolumeEnabled(!orderVolumeEnabled)} />
|
|
<input
|
|
type="number"
|
|
className="border p-1 w-16 ml-2"
|
|
value={orderVolume}
|
|
onChange={e => setOrderVolume(Number(e.target.value))}
|
|
disabled={!orderVolumeEnabled}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center mb-3">
|
|
<span className="mr-2">Backtest</span>
|
|
<input type="checkbox" checked={backtestEnabled} onChange={() => setBacktestEnabled(!backtestEnabled)} />
|
|
</div>
|
|
<div className="mt-4">
|
|
<h4 className="font-medium">Entry when <Button size="sm">+ Add rule</Button></h4>
|
|
<p className="text-sm text-gray-500 ml-4">Enter every 10 ticks below last entry</p>
|
|
</div>
|
|
<div className="mt-4">
|
|
<h4 className="font-medium">Exit when <Button size="sm">+ Add rule</Button></h4>
|
|
<ul className="list-disc ml-6 text-sm">
|
|
<li>close at SL</li>
|
|
<li>close at TP</li>
|
|
<li>close if lifetime</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sell Panel */}
|
|
<div className="p-4 border rounded-lg">
|
|
<h3 className="text-lg font-semibold mb-4">Sell</h3>
|
|
<div className="mt-4">
|
|
<h4 className="font-medium">Entry when <Button size="sm">+ Add rule</Button></h4>
|
|
<p className="text-sm text-gray-500 ml-4">Enter every 0 ticks above last entry</p>
|
|
</div>
|
|
<div className="mt-4">
|
|
<h4 className="font-medium">Exit when <Button size="sm">+ Add rule</Button></h4>
|
|
<ul className="list-disc ml-6 text-sm">
|
|
<li>close at SL</li>
|
|
<li>close at TP</li>
|
|
<li>close if lifetime</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer actions */}
|
|
<div className="flex justify-between">
|
|
<Button variant="link">Help</Button>
|
|
<div className="flex space-x-2">
|
|
<Button variant="outline">Discard</Button>
|
|
<Button>Save changes</Button>
|
|
<Button variant="ghost" icon={icon.mdiCogOutline} />
|
|
</div>
|
|
</div>
|
|
</SectionMain>
|
|
);
|
|
};
|
|
|
|
StrategyBuilderPage.getLayout = (page: React.ReactElement) => (
|
|
<LayoutAuthenticated>{page}</LayoutAuthenticated>
|
|
);
|
|
|
|
export default StrategyBuilderPage;
|