86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
'use client';
|
|
|
|
import FormInput from '@/components/ui/FormInput';
|
|
import FormSelect from '@/components/ui/FormSelect';
|
|
import { BROKER_OPTIONS, STATUS_OPTIONS } from '@/constants/brokers';
|
|
|
|
export default function BrokerForm({ formData, onChange, mode, selectedBroker }) {
|
|
return (
|
|
<>
|
|
<p className="text-sm text-gray-500 mb-6">
|
|
Choose your preferred exchange to add a broker.
|
|
</p>
|
|
|
|
<div className="space-y-4 mb-6">
|
|
<h3 className="font-semibold text-gray-900">Broker Details</h3>
|
|
|
|
<FormInput
|
|
label="Name"
|
|
value={formData.name}
|
|
onChange={(val) => onChange({ ...formData, name: val })}
|
|
placeholder="Enter a Name"
|
|
required
|
|
/>
|
|
|
|
<FormSelect
|
|
label="Select Broker"
|
|
value={formData.broker}
|
|
onChange={(val) => onChange({ ...formData, broker: val })}
|
|
options={BROKER_OPTIONS}
|
|
placeholder="Select Broker"
|
|
/>
|
|
|
|
<FormInput
|
|
label="Balance"
|
|
value={formData.balance}
|
|
onChange={(val) => onChange({ ...formData, balance: val })}
|
|
placeholder="$0.00"
|
|
type="text"
|
|
/>
|
|
|
|
<FormSelect
|
|
label="Status"
|
|
value={formData.status}
|
|
onChange={(val) => onChange({ ...formData, status: val })}
|
|
options={STATUS_OPTIONS}
|
|
placeholder="Select Status"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-gray-900">API Details</h3>
|
|
{mode === 'edit' ? (
|
|
<button className="text-sm text-teal-500 hover:text-teal-600">
|
|
Update Key 🔄
|
|
</button>
|
|
) : (
|
|
<button className="text-sm text-teal-500 hover:text-teal-600">
|
|
Help me connect to API
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<FormInput
|
|
label="API Key"
|
|
value={formData.apiKey}
|
|
onChange={(val) => onChange({ ...formData, apiKey: val })}
|
|
placeholder="api_key_1234567890abcdef"
|
|
helperText={
|
|
mode === 'edit' && selectedBroker
|
|
? `Date Created: ${selectedBroker.dateCreated}`
|
|
: ''
|
|
}
|
|
/>
|
|
|
|
<FormInput
|
|
label="Secret API Key"
|
|
value={formData.secretKey}
|
|
onChange={(val) => onChange({ ...formData, secretKey: val })}
|
|
placeholder="sk_412345LH..."
|
|
type="password"
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
} |