import { useState, useEffect } from 'react';
import {
getKrakenAccounts,
getKrakenWhitelistedAddresses,
createKrakenExchangeTransfer,
} from '@dynamic-labs-sdk/client';
const KrakenTransfer = () => {
// State
const [accounts, setAccounts] = useState([]);
const [whitelistData, setWhitelistData] = useState(null);
const [selectedAccountId, setSelectedAccountId] = useState('');
const [currency, setCurrency] = useState('');
const [amount, setAmount] = useState('');
const [destination, setDestination] = useState('');
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
// Load accounts and whitelisted addresses on mount
useEffect(() => {
const loadData = async () => {
try {
const [accountsData, whitelistResponse] = await Promise.all([
getKrakenAccounts(),
getKrakenWhitelistedAddresses(),
]);
setAccounts(accountsData);
setWhitelistData(whitelistResponse);
} catch (err) {
setError('Failed to load Kraken data. Is your account connected?');
} finally {
setLoading(false);
}
};
loadData();
}, []);
// Get selected account
const selectedAccount = accounts.find(acc => acc.id === selectedAccountId);
// Get selected balance for the currency
const selectedBalance = selectedAccount?.balances.find(
b => b.currency === currency
);
// Filter whitelisted addresses by currency
const availableDestinations = whitelistData?.destinations.filter(
dest => dest.tokens?.includes(currency)
) || [];
// Reset currency when account changes
useEffect(() => {
if (selectedAccount?.balances.length > 0) {
setCurrency(selectedAccount.balances[0].currency);
}
}, [selectedAccountId]);
const handleSubmit = async (e) => {
e.preventDefault();
setSubmitting(true);
setError(null);
try {
const transfer = await createKrakenExchangeTransfer({
accountId: selectedAccountId,
to: destination,
amount: parseFloat(amount),
currency,
});
setResult(transfer);
} catch (err) {
setError(err.message || 'Transfer failed');
} finally {
setSubmitting(false);
}
};
if (loading) return <div>Loading Kraken data...</div>;
if (error && !accounts.length) return <div>Error: {error}</div>;
if (accounts.length === 0) {
return <div>No Kraken accounts found. Please connect your Kraken account.</div>;
}
if (result) {
return (
<div>
<h3>Transfer Created</h3>
<p>ID: {result.id}</p>
<p>Status: {result.status}</p>
<p>Amount: {result.amount} {result.currency}</p>
<button onClick={() => setResult(null)}>Make Another Transfer</button>
</div>
);
}
return (
<form onSubmit={handleSubmit}>
{error && <div style={{ color: 'red' }}>{error}</div>}
{/* Account Selection */}
<div>
<label>Kraken Account</label>
<select
value={selectedAccountId}
onChange={e => setSelectedAccountId(e.target.value)}
required
>
<option value="">Select an account</option>
{accounts.map(account => (
<option key={account.id} value={account.id}>
{account.name || `Account ${account.id.slice(0, 8)}`}
{' '}({account.balances.length} currencies)
</option>
))}
</select>
</div>
{selectedAccount && (
<>
{/* Currency Selection */}
<div>
<label>Currency</label>
<select
value={currency}
onChange={e => setCurrency(e.target.value)}
required
>
{selectedAccount.balances.map(balance => (
<option key={balance.currency} value={balance.currency}>
{balance.currency} (Balance: {balance.balance})
</option>
))}
</select>
</div>
{/* Amount Input */}
<div>
<label>Amount</label>
<input
type="number"
step="any"
min="0"
value={amount}
onChange={e => setAmount(e.target.value)}
placeholder="0.0"
required
/>
{selectedBalance && (
<small>Available: {selectedBalance.availableBalance ?? selectedBalance.balance}</small>
)}
</div>
{/* Destination Address */}
<div>
<label>Destination Address</label>
{whitelistData?.enforcesAddressWhitelist && availableDestinations.length > 0 ? (
<select
value={destination}
onChange={e => setDestination(e.target.value)}
required
>
<option value="">Select a whitelisted address</option>
{availableDestinations.map(dest => (
<option key={dest.address} value={dest.address}>
{dest.address}
</option>
))}
</select>
) : (
<input
type="text"
value={destination}
onChange={e => setDestination(e.target.value)}
placeholder="0x..."
required
/>
)}
{whitelistData?.enforcesAddressWhitelist && availableDestinations.length === 0 && (
<small style={{ color: 'orange' }}>
No whitelisted addresses for {currency}. Add one in Kraken settings.
</small>
)}
</div>
</>
)}
<button type="submit" disabled={submitting || !selectedAccountId}>
{submitting ? 'Processing...' : 'Transfer'}
</button>
</form>
);
};
export default KrakenTransfer;
