🧑‍💻How to Encode Calls in Purchase Mode

Brydge's contracts need to know the following:

• The contract address(es) that will be called and their ABI

• The function name(s) that will be called and their parameters

• Quantity of native tokens each contract will receive (if any)

The calls prop in BrydgeWidget expects to receive an array structured like this:

const calls = [
        { _to: 'contractAddress', _value: 'nativeTokenAmount', _calldata: 'generatedCalldata'},
      ];

For many use cases, the _to address will need to be that of the actively connected wallet, however, if you are integrating via the iFrame component you may not have you own provider with which to dynamically fetch a user's address. Don't worry! Instead, you can fill the _to field with the special placeholder address: 0x0123456789abcdeffedcba9876543210deadbeef and we will swap this out for the connected wallet on our end. Please note that no placeholder address other than the above can be used for this purpose.

You'll find below an example of how to set up calls. If you prefer something more tangible, check out our Zora Marketplace integration example.

const contract1 = {
                address: '0x123...',
                functionName: 'function1Name',
                price: 234,
                parameter1: 'someParameter',
                parameter2: 'someParameter',
                abi: //abiJSONhere
                }
const contract2 = {
                address: '0x456...',
                functionName: 'function2Name',
                price: 0,
                parameter1: 'someParameter',
                abi: //abiJSONhere
                }

const contract1Interface = new ethers.utils.Interface(contract1.abi)
const contract2Interface = new ethers.utils.Interface(contract2.abi)

const contract1Calldata = contract1Interface.encodeFunctionData(contract1.functionName, [contract1.parameter1, contract1.parameter2]);
const contract2Calldata = contract2Interface.encodeFunctionData(contract2.functionName, [contract2.parameter1]);

const calls = [
        { _to: contract1.address, _value: contract1.price, _calldata: contract1Calldata },
        { _to: contract1.address, _value: contract2.price, _calldata: contract2Calldata },
      ];

This calls array can be passed directly into the calls prop in the BrydgeWidget component.

If you run into issues at any point, reach out to our team on Discord. We're always here to help!