npm package: @layerzerolabs/stargate-ui
Description: <!-- The badges section --> <p align="center">   <!-- Shields.io NPM published package version -->   <a href="https://www.npmjs.com/package/@layerzerolabs/stargate-ui"><img alt="NPM Version" src="https://img.shields.io/npm/v/@layerzerolabs/stargate-ui"/><
Latest version: 0.0.33

# Stargate Transfer Widget

<!-- The badges section -->
<p align="center">
  <!-- Shields.io NPM published package version -->
  <a href="https://www.npmjs.com/package/@layerzerolabs/stargate-ui"><img alt="NPM Version" src="https://img.shields.io/npm/v/@layerzerolabs/stargate-ui"/></a>
  <!-- Shields.io NPM downloads -->
  <a href="https://www.npmjs.com/package/@layerzerolabs/stargate-ui"><img alt="Downloads" src="https://img.shields.io/npm/dm/@layerzerolabs/stargate-ui"/></a>
  <!-- Shields.io vulnerabilities -->
  <a href="https://www.npmjs.com/package/@layerzerolabs/stargate-ui"><img alt="Snyk Vulnerabilities for npm package version" src="https://img.shields.io/snyk/vulnerabilities/npm/@layerzerolabs/stargate-ui"/></a>
  <!-- Shields.io license badge -->
  <a href="https://www.npmjs.com/package/@layerzerolabs/stargate-ui"><img alt="NPM License" src="https://img.shields.io/npm/l/@layerzerolabs/stargate-ui"/></a>
</p>

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

```bash
yarn add @layerzerolabs/stargate-ui
```

```bash
npm i @layerzerolabs/stargate-ui
```

```bash
pnpm i @layerzerolabs/stargate-ui
```

## Usage

This package exports a [custom HTML element](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements). 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](https://unpkg.com/@layerzerolabs/stargate-ui@latest/element.js)), 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.

```html
<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](https://mui.com/customization/theming/) | `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](https://unpkg.com/@layerzerolabs/stargate-ui@latest/element.js.sha384).

### Example configurations

```html
<!-- 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 }" />
```