🖥

For Developers

Do you wish to integrate HQ Multisend with your application? Our HQ Javascript Toolkit allows you to do so easily.

Getting started

HQ Multisend allows you to quickly distribute funds to multiple recipients. Using our HQ Javascript Toolkit, you can embed a button into your website that provides a link to pre-fill the HQ Multisend form with a list of recipient wallets and corresponding token amounts.

Initialising the SDK

Javascript
ReactJs
Load the latest SDK into your website. Find the latest version on our HQ Toolkit Github page.
<script src="./hq-0.1.3.min.js"></script>
Initialise the HQ Javascript Toolkit by calling the init function. The parameters name, url and logoUrl are required.
window.addEventListener('DOMContentLoaded', function () {
hq.init({
name: 'My Web Project',
url: 'https://mywebproject.com',
logoUrl: 'https://mywebproject.com/img/logo.svg'
})
})
Import the latest version of HQ Multisend with React using the following command.
npm install hq-toolkit

Using the HQ Multisend Component

Javascript
ReactJs
The multisend function expects a DOM element id as elem which the button will be rendered in. A purpose will describe the transaction and recipients is an array containing objects with the details of each recipient. An optional label text can be passed to change the button label. Calling the function multiple times will update the parameters.
hq.multisend({
elem: 'multisend',
purpose: 'Distribute funds',
label: 'Send transaction with HQ Multisend',
recipients: [{
address: '0xcEe6FeBe294D5591ed3ec94EBfcE35067cBA901F',
token: 'USDC',
amount: 0.01,
remarks: 'Remarks'
}]
})
Import and make a variable available for use in your React component that holds the following configuration:
import { Multisend } from 'hq-toolkit'
const hq_config = {
name: 'My Web Project',
url: 'https://mywebproject.com',
logoUrl: 'https://mywebproject.com/img/logo.svg'
}
In your React function, use the Multisend component in the following way and pass the recipients array, the transfer purpose, and the optional button label.
<Multisend
config={hq_config}
purpose='Distribute funds'
label='Send transaction with HQ Multisend'
recipients={[{
address: '0xcEe6FeBe294D5591ed3ec94EBfcE35067cBA901F',
token: 'USDC',
amount: 0.01,
remarks: 'Remarks'
}]}
/>
Check out our latest version of this toolkit here: