Loading...
; if (!isLoggedIn) { return ; } return (Wallet: {address}
...
);
}
export default Component
```
#### Turnkey
Turnkey embedded wallet signatures can be integrated with the Halliday JS SDK using the
`@turnkey/react-wallet-kit` and `@turnkey/viem` SDKs with `viem` and `@halliday-sdk/payments`. The developer is required to create an interface for the Turnkey SDK. A full React.js code example is available here: [Halliday JS SDK Turnkey React.js Example](https://github.com/HallidayInc/HallidaySdkTurnkeyReactExample).
### Initializing the widget before showing
For the best user experience, the widget can be preloaded so it appears instantly when it is ready to be shown.
The `initializeClient` call should be done in the initial loading phase of the app.
Later, the `openHallidayPayments` call can be executed once the widget user interface is ready to be shown to the user, like when a deposit button is clicked or tapped.
Both the `initializeClient` and `openHallidayPayments` functions can have the same configuration parameters passed to them.
If an `initializeClient` call is made with all of the necessary parameters passed to it, the subsequent call to `openHallidayPayments` can be done without including any parameters.
```typescript copy theme={null}
import { initializeClient } from "@halliday-sdk/payments";
// Call early in your app (e.g., on mount)
initializeClient({
apiKey: HALLIDAY_PUBLIC_API_KEY, // required
outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"], // required
onReady: () => { console.log('Preloaded and ready') }, // optional
onError: (error) => { console.error(error) }, // optional
userWallet, // optional
});
// Next, call openHallidayPayments
```
### Withdraw Widget
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 withdraw widget (`openWithdraw`) is opened by a different button in the app user interface than the standard deposit widget defined earlier (`openHallidayPayments`).
It is **required** that the `initializeClient` method is called before `openWithdraw`.
| Name | Type | Description |
| :-------------------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `withdrawInputs` (optional) | Asset\[] | Assets that are able to be withdrawn from the account. If `initializeClient` or `openHallidayPayments` was called prior, and `withdrawInputs` is not passed, the prior `outputs` value will be used. |
| `withdrawFunder` (required) | FunderRole | Funder wallet configuration with signing functions. |
| `withdrawDestinationAddress` (optional) | string | Target address for the withdraw. If not defined, the `withdrawFunder` address is used as the destination of the withdrawal. |
```typescript copy theme={null}
import { openWithdraw } from "@halliday-sdk/payments";
openWithdraw({
withdrawInputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"], // (optional)
withdrawFunder: {
getAddress: async () => "0x...",
sendTransaction: async (tx, chain) => TransactionReceipt,
}, // (required)
withdrawDestinationAddress: '0x...', // (optional)
});
```
### Show Account History
To show the past Halliday payment activity of the account in the widget, the user can click or tap the icon at the top right of the widget. This opens the **Transactions & activity** page of the widget.
To directly open this screen in the widget, use the `openActivity` method. In order to open this, a `userWallet` must be connected beforehand.
This example connects a wallet beforehand with the `initializeClient` method.
```typescript copy theme={null}
import { initializeClient, openActivity } from "@halliday-sdk/payments";
/*
* Call `openHallidayPayments` or `initializeClient` with a `userWallet`
* parameter before calling `openActivity`.
*/
initializeClient({
apiKey: HALLIDAY_PUBLIC_API_KEY, // required
outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"], // required
userWallet, // required for `openActivity` to work properly
});
// For example, show the user an "Account Activity" button within the app UI.
// This would be the button's click event handler
function showAccountActivity() {
openActivity();
}
```
This example connects a wallet beforehand with the `openHallidayPayments` method.
```typescript copy theme={null}
import { openHallidayPayments, openActivity } from "@halliday-sdk/payments";
// Call prior to calling `openActivity`
openHallidayPayments({
apiKey: HALLIDAY_PUBLIC_API_KEY, // required
outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"], // required
userWallet, // required
});
function showAccountActivity() {
openActivity();
}
```
### Multiple Funders
In the scenario that a developer chooses to show multiple possible funding sources for the user, an array of funder objects can be passed to `initializeClient` or `openHallidayPayments`.
Funders can be any address that is expected to fund a payment. The SDK widget will take account of token balances at the time of a payment so the user can select a possible input token and amount.
**Naming Each Funder**
To differentiate funders in the UI, a name string can be supplied that will be shown to the user. Pass `walletName` as a member of each funder object.
```typescript copy theme={null}
import { initializeClient, openHallidayPayments } from "@halliday-sdk/payments";
// First run initialization of the widget
// Create connections to multiple funding source wallets, like shown earlier
userWallet.walletName = "Alice's Cool MetaMask Wallet";
privyWallet.walletName = "Alice's Fun Privy Wallet";
openHallidayPayments({
userWallet,
funders: [
userWallet, // User's MetaMask or the like
privyWallet, // Embedded wallet that the user is signed into with a balance
// More funders can go here
]
});
```
