Stargate Transfer Widget

This widget allows you to embed the Stargate Transfer module in any application created with React/NextJS, giving users instant ability to swap native assets cross-chain, accessing Stargate’s unified liquidity pools.

Instalation

yarn add @layerzerolabs/stargate-ui

npm i @layerzerolabs/stargate-ui

pnpm i @layerzerolabs/stargate-ui

Usage

This package exports a custom HTML element. To use it, import the widget file like any other javascript file in your HTML (either from your own static file serving service or from npm through unpkg), which will add an element named stargate-widget to the local custom elements registry. This way the widget dependencies will remain in the local scope of the widget and will not affect the rest of the application.

The size and position of the stargate-widget can be modified by setting its parent's attributes.

<script src="https://unpkg.com/@layerzerolabs/stargate-ui@latest/element.js" defer async></script>
<div style="width: 320px; height: 640px;">
  <stargate-widget theme="dark" />
</div>

Attributes

| Name | Type | Description | Default value | | -------------- | ---------------- | ----------------------------------------------------------------------------------------------------------- | ------------- | | theme | string\|object | Theme preset name (light, dark) or JSON-stringified MUI Theme | dark | | partnerId | number | Numeric ID of a Stargate partner (decimal base) | | | feeCollector | string | Address of the fee collector contract / wallet | | | tenthBps | number | | |

The scripts checksum can be find in the element.js.sha384 file.

Example configurations

<!-- Default - dark theme -->
<stargate-widget />

<!-- Light theme with partner configuration -->
<stargate-widget
  theme="light"
  partnerId="105"
  feeCollector="0xc13b65f7c53Cd6db2EA205a4b574b4a0858720A6"
  tenthBps="10"
/>

<!-- Custom theme -->
<stargate-widget theme="{ ...your MUI theme options }" />