Sending funds to multiple addresses (multiple outputs)

[danwag06]

When a user clicks send from the main wallet page that shows the user's balance, the UI should be updated to support sending to multiple recipients.

The sendBsv method found in Bsv.service.tx already supports multi send so this should be a fairly straightforward UI/UX update.

A user should be able to dynamically enter n number of recipients (address or paymail) along with a BSV or USD amount based on the unit setting for the transaction.

[TEMHITHORPHE]

hey @danwag06 , please can I take this, it looks fairly straight forward and a good first issue, good opportunity to familiarize myself with the codebase on my planned PR streak, morning from over here 😃

[Jemiiah]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a front-end web 3 developer with good experience in contributing to OD Project and over 50+ contributions in OD Hack this is my github profile : https://github.com/Jemiiah And my onlydust profile : https://app.onlydust.com/u/Jemiiah

How I plan on tackling this issue

1. UI Updates to Support Multiple Recipients: I’ll extend the current send form to allow dynamically adding recipient input fields. Users should be able to input both addresses (or paymail) and amounts (either in BSV or USD, depending on the unit setting).

i. Dynamically Adding Inputs: I’ll add a button (e.g., "Add Recipient") that allows users to dynamically create new sets of input fields for recipient addresses/paymails and their respective amounts.

Example snippet (React/JSX):

const handleAddRecipient = () => {
  setRecipients([...recipients, { address: '', amount: '' }]);
};

const handleRecipientChange = (index, field, value) => {
  const updatedRecipients = [...recipients];
  updatedRecipients[index][field] = value;
  setRecipients(updatedRecipients);
};

return (
  <form>
    {recipients.map((recipient, index) => (
      <div key={index}>
        <input
          type="text"
          placeholder="Address or Paymail"
          value={recipient.address}
          onChange={(e) => handleRecipientChange(index, 'address', e.target.value)}
        />
        <input
          type="number"
          placeholder="Amount"
          value={recipient.amount}
          onChange={(e) => handleRecipientChange(index, 'amount', e.target.value)}
        />
      </div>
    ))}
    <button type="button" onClick={handleAddRecipient}>Add Recipient</button>
  </form>
);

2. Backend Transaction Logic: The multi-send logic is already supported by sendBsv in Bsv.service.tx, so I’ll simply pass the recipient array (containing the address/paymail and amount) to that method.

E.g:

  const formattedRecipients = recipients.map(({ address, amount }) => ({
    address,
    amount: convertToBSV(amount), // converting if the user inputs in USD
  }));

  Bsv.service.tx.sendBsv({
    recipients: formattedRecipients,
  });
}; 

3. Handling USD or BSV Input: I’ll add a toggle that allows the user to switch between BSV or USD inputs, and handle conversion on the backend or frontend before passing the amounts to sendBsv.

const convertToBSV = (amount) => {
  // conversion logic, using exchange rate from API if necessary
  return isBSV ? amount : amount / exchangeRate;
};

// Toggle handler for BSV/USD

4. UX Considerations: i. Validation: I’ll add form validation to ensure all recipients have valid addresses/paymails and amounts greater than zero before sending. ii. Clear feedback: I’ll ensure the user gets proper feedback upon success or failure when sending the transaction (e.g., success toast, error messages).

[aniruddhaaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a blockchain developer and want to contribute to open source.

How I plan on tackling this issue

I would update the UI of the main wallet page to allow the addition of functionality for dynamically having multiple recipients either based on address or paymail when BSV is being sent. Then leveraging the existing sendBsv method in Bsv.service.tx to implement multi-sends functionality with the user allowed to input either BSV or USD amounts depending on their unit settings for each recipient.

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in front-end development and user experience design, with extensive experience in building responsive web applications using frameworks like React and Vue.js. My expertise includes integrating payment functionalities and developing intuitive user interfaces that enhance user interactions. I have previously worked on projects that required dynamic forms and real-time updates, making me well-equipped to implement the necessary UI changes for supporting multiple recipients in the send transaction process.

How I plan on tackling this issue

To address the requirement for allowing users to send BSV to multiple recipients, I would follow these steps:

Review Existing UI/UX: I would begin by examining the current wallet page layout to understand how transactions are initiated. This would help identify where to add the functionality for multiple recipients.

Design Dynamic Input Fields: I would implement a dynamic input field component that allows users to add or remove recipient entries. Each entry would include input fields for the recipient's address (or paymail) and the amount (in BSV or USD). I would ensure that the design is user-friendly, allowing users to easily add as many recipients as needed.

Implement State Management: Using React’s state management (or a similar method), I would track the input values for recipient addresses and amounts. This would ensure that the UI remains responsive as users modify their entries.

Integrate with sendBsv Method: Since the existing sendBsv method in Bsv.service.tx already supports multi-send, I would ensure that the dynamic input data is correctly structured and passed to this method when the user initiates the transaction. I would validate the input data to ensure addresses and amounts are correct before submission.

Update Transaction Logic: I would modify the logic for handling the send action to accommodate multiple recipients. This includes preparing the data payload and handling the response from the sendBsv method.

User Feedback and Validation: I would implement real-time validation to provide feedback on the input fields (e.g., valid address formats, non-negative amounts). After submitting the transaction, I would display success or error messages based on the transaction result to keep the user informed.

Testing: Finally, I would conduct thorough testing across various scenarios, including adding multiple recipients, ensuring proper input validation, and verifying that the transaction completes successfully. I would also test for responsiveness and usability on different devices.

By following this structured approach, I would ensure that the UI update for sending BSV to multiple recipients is effectively implemented, providing a seamless and intuitive experience for users.

[MPSxDev]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I am Manuel, a process engineer and web3 developer. I have participated in Starknet Bootcamps, ETHGlobal and am an Elite winner of Speedrunstark. I have a high capacity to solve problems. I am a member of the DojoCoding community. I hope this issue is assigned to me. I am available to work immediately to achieve what is required in the shortest time possible.

How I plan on tackling this issue

Update the UI on the main wallet page to allow sending to multiple recipients. The existing sendBsv method in Bsv.service.tx supports multi-send, so this should be a straightforward UI/UX adjustment. Users should be able to dynamically add multiple recipients (address or paymail) and specify a BSV or USD amount based on the transaction's unit setting. I'll work diligently to achieve the desired functionality.

[Jemiiah]

@danwag06 may I proceed to work on this

[danwag06]

@Jemiiah it's yours. Go for it.