Withdrawals with the Halliday JS SDK

For apps that define an account for the user, like an embedded wallet or smart contract wallet, the withdraw widget allows the user to move assets out of their account. The destination of a withdrawal can be any valid address like the user’s EOA or a centralized exchange account deposit address. The destination also can be a different asset on a different chain from the origin. E.g. withdraw pUSD from a user’s prediction market account on Polygon to an EOA on MegaETH as USDC, executed in one user interaction. In practice, the withdrawal widget (openWithdrawal) is opened by a different button in the app user interface than the standard deposit. For complete example implementations of opening the Halliday SDK withdrawal widget, see the Payments SDK Example Apps page. Before the withdraw button is clicked, the withdraw configuration must be set.

Configuring the Withdrawal options

Withdrawal configuration options are part of the Halliday config which is documented on the widget documentation page.

React

With the React SDK, the constant withdraw options can be defined in the properties of a HallidayPaymentsProvider.

<HallidayPaymentsProvider
  apiKey={ HALLIDAY_PUBLIC_API_KEY }
  withdrawal={{
    inputs: [ "base:0x" ], // Optional, defaults to deposit.outputs
    outputs: [ "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913" ],
    funder: owner, // Can be any FunderRole object
    destinationAddress: "0x...",
  }}>
  <App />
</HallidayPaymentsProvider>

A connected wallet funder object can be passed using the updateWallets function after a user connects their wallet to the app.

// Action for use in useEffect block
updateWallets({
  withdrawal: {
    inputs: [ "base:0x" ], // Optional, defaults to deposit.outputs
    outputs: [ "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913" ],
    funder: { getAddress, sendTransaction, walletName: "MetaMask" },
    destinationAddress: "0x...",
  },
});

JavaScript

Constant withdraw options can be passed to the constructor of a HallidayPayments object or passed later using the updateConfig function. Partial configurations are valid for either function.

const halliday = new HallidayPayments({
  apiKey: HALLIDAY_PUBLIC_API_KEY,
  deposit,
  withdrawal: {
    inputs: [ "base:0x" ], // Optional, defaults to deposit.outputs
    outputs: [ "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913" ],
    funder: { getAddress, sendTransaction, walletName: "MetaMask" },
    destinationAddress: "0x...",
  },
});

// Also can be modified after initialization
halliday.updateConfig({
  withdrawal: {
    inputs: [ "base:0x" ], // Optional, defaults to deposit.outputs
    outputs: [ "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913" ],
    funder: { getAddress, sendTransaction, walletName: "MetaMask" },
    destinationAddress: "0x...",
  },
});

To display the withdrawal widget, use the openWithdrawal function.

React
JavaScript

copy

import { HallidayPaymentsProvider, useHallidayPayments } from "@halliday-sdk/payments/react";

// ...

const { openWithdrawal } = useHallidayPayments();

// ...

<button onClick={openWithdrawal}>
  Withdraw
</button>

copy

const halliday = new HallidayPayments({ /* ... */});

// ...

button.addEventListener("click", halliday.openWithdrawal);

Withdrawal session parameters

A withdrawal session can optionally have values passed to it such as a preset input asset and amount, a preset output asset, or a destination address. If the developer does not want for the user to be able to modify the asset setting or input amount, they can lock the session to the developer’s chosen settings. An input will take precedent over the inputFiatValue settings.

openWithdrawal({
  input: {
    asset: "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
    amount: "50",
  },
  output: "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
  inputFiatValue: {
    currency: "USD",
    amount: "50",
  },
  destination: "0xDest...",
  locked: true,
});

See the type definitions on the SDK documentation page for more information.

SDK Integrations

API Integrations

Example Apps

Frequently Asked Questions

Concepts & Info

Withdrawals with the Halliday JS SDK

Withdrawal Widget

Configuring the Withdrawal options

React

JavaScript

Opening the Withdrawal widget

Withdrawal session parameters

​Withdrawal Widget

​Configuring the Withdrawal options

​React

​JavaScript

​Opening the Withdrawal widget

​Withdrawal session parameters

Withdrawal Widget

Configuring the Withdrawal options

React

JavaScript

Opening the Withdrawal widget

Withdrawal session parameters