widget

Sygmaprotocol Lit Widget

Dependencies

To integrate the Widget into any project that uses web components you will need to add the following dependencies:

yarn add @buildwithsygma/sygmaprotocol-widget @buildwithsygma/sygma-sdk-core

Code integration

To add the Wdiget to your existing codebase import the dependency and add the custom tag into your render method.

import { LitElement, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import '@buildwithsygma/sygmaprotocol-widget'

@customElement('my-element')
export class MyElement extends LitElement {
  render() {
    return html`
      <div>
        <sygmaprotocol-widget></sygmaprotocol-widget>
      </div>
    `
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'my-element': MyElement
  }
}

You can also pass properties into the Widget to customize it's behaviour:

render() {
    return html`
      <div>
        <sygmaprotocol-widget 
        .environment=${'mainnet'} 
        .whitelistedSourceNetworks=${['sepolia']} 
        .whitelistedDestinationNetworks=${['cronos']}
        ></sygmaprotocol-widget>
      </div>
    `
  }

You can check here all the available properties.