diff --git a/example/src/App.styles.ts b/example/src/App.styles.ts index c2e502a..1711868 100644 --- a/example/src/App.styles.ts +++ b/example/src/App.styles.ts @@ -83,6 +83,11 @@ export const Button = styled.button({ backgroundColor: '#ff4d00', cursor: 'not-allowed', }, + '&.secondary': { + backgroundColor: 'transparent', + border: '1px solid #ff4d00', + color: '#ff4d00', + }, }); export const Input = styled.input({ diff --git a/example/src/components/SendBtc/index.tsx b/example/src/components/SendBtc/index.tsx index b3e0e6f..aecd1e6 100644 --- a/example/src/components/SendBtc/index.tsx +++ b/example/src/components/SendBtc/index.tsx @@ -6,20 +6,39 @@ interface Props { network: BitcoinNetworkType; } +interface Recipient { + address: string; + amount: string; +} + const SendBtc = ({ network }: Props) => { - const [amount, setAmount] = useState(''); - const [address, setAddress] = useState(''); + const [recipients, setRecipients] = useState([{ address: '', amount: '' }]); const [txnId, setTxnId] = useState(''); + const addRecipient = () => { + setRecipients([...recipients, { address: '', amount: '' }]); + }; + + const updateRecipient = (index: number, field: keyof Recipient, value: string) => { + const updatedRecipients = [...recipients]; + updatedRecipients[index][field] = value; + setRecipients(updatedRecipients); + }; + + const removeRecipient = (index: number) => { + if (recipients.length > 1) { + const updatedRecipients = recipients.filter((_, i) => i !== index); + setRecipients(updatedRecipients); + } + }; + const onClick = useCallback(() => { (async () => { const response = await Wallet.request('sendTransfer', { - recipients: [ - { - address: address, - amount: +amount, - }, - ], + recipients: recipients.map((r) => ({ + address: r.address, + amount: +r.amount, + })), }); if (response.status === 'error') { @@ -29,10 +48,9 @@ const SendBtc = ({ network }: Props) => { } setTxnId(response.result.txid); - setAmount(''); - setAddress(''); + setRecipients([{ address: '', amount: '' }]); })().catch(console.error); - }, [address, amount]); + }, [recipients]); const explorerUrl = network === BitcoinNetworkType.Mainnet @@ -44,15 +62,46 @@ const SendBtc = ({ network }: Props) => {

Send BTC

{!txnId && ( <> -
-
Amount (sats)
- setAmount(e.target.value)} /> -
-
-
Address
- setAddress(e.target.value)} /> + {recipients.map((recipient, index) => ( +
+ {index > 0 &&
} +

Recipient {index + 1}

+
+
Amount (sats)
+ updateRecipient(index, 'amount', e.target.value)} + /> +
+
+
Address
+ updateRecipient(index, 'address', e.target.value)} + /> +
+
+ ))} +
+ + {recipients.length > 1 && ( + + )}
-