Usages with embedded widget

Embedded Swap using TxWidget with customization options

XPay Integration using TxWidget

This example demonstrates how to integrate swap functionality directly into your website using the TxWidget component. By embedding the widget, users can interact with the swap interface directly on the page without needing a modal pop-up. Here's an example of how the component is implemented within the project:

<TxWidget
  integratorId="YOUR_INTEGRATOR_ID"
  dstChain="8453"
  dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
  defaultWalletPicker={true}
/>

On-Page Chain and Token Selection

Users can directly choose the source chain and token on the page. After confirming the transaction details, the component seamlessly manages transaction approval and execution.

Wallet Connection Workflow:

By default, the button displays "Connect wallet first," indicating that XPay expects the wallet to already be connected within the app. If an external provider is unavailable, you can set the defaultWalletProvider to true, allowing the widget to use a built-in wallet picker.

For example:

<TxWidget
    integratorId="YOUR_INTEGRATOR_ID"
    dstChain="8453"
    dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
    defaultWalletPicker={true}
/>

When configured this way, the SDK handles connecting to user's wallet directly within the XPay interface. Do not use this option if your app already can be connected to wallets.

Connecting wallet within XPay interface

Enabling light mode

For a more versatile user experience, you can switch the swap widget to a light theme by enabling the lightMode prop. This is useful if your website predominantly uses a light color scheme, ensuring a consistent look and feel.

To activate the light mode, simply include the lightMode={true} prop in your component configuration:

<TxWidget
  integratorId="YOUR_INTEGRATOR_ID"
  dstChain="8453"
  dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
  lightMode={true}
/>

By setting lightMode={true}, the swap widget automatically transitions to a clean and bright design, offering a consistent user experience across your platform.

Light mode view

Theme customization

In addition to enabling light mode, you can fully customize the appearance of the widget using the styles prop. The styles property allows you to pass a JSON string with custom styling options, following the same format as ModalIntegrationStyles. This gives you control over key UI elements such as colors and text styles.

For example:

<TxWidget
  integratorId="YOUR_INTEGRATOR_ID"
  dstChain="8453"
  dstToken="0x8fe815417913a93ea99049fc0718ee1647a2a07c"
  styles={JSON.stringify({
    mainAccentLight: '#ff69b4',
    mainAccentDark: '#aa336a',
    textSecondary: '#ff69b4',
  })}
/>

Customized widget theme

In this example, the widget applies a pink accent color and customizes the secondary text color to align with your branding. The structure of the styles object should match the ModalIntegrationStyles type. Note: When using openTransactionModal, the styles object does not need to be stringified. You can directly pass the styles as a standard object. For example:

openTransactionModal({
  integratorId: "YOUR_INTEGRATOR_ID",
  dstChain: "8453",
  dstToken: "0x8fe815417913a93ea99049fc0718ee1647a2a07c",
  styles: {
    mainAccentLight: '#ff69b4',
    mainAccentDark: '#aa336a',
    textSecondary: '#ff69b4',
  }
});

Using Props Across TxWidget and openTransactionModal

The customization options, such as enabling light mode or setting the default wallet picker, are available across both the TxWidget component and the openTransactionModal function. This consistency allows you to seamlessly integrate the swap functionality in different ways based on your application’s needs.