Skip to main content

Lit Framework

Dependencies​

Add the following dependencies to integrate the widget into any Lit project: 

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

Integrating The Widget Into Your Lit Code​

Import the sygmaprotocol-widget dependency to add the widget to your existing codebase. 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 its behaviour:

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

See widget.ts for all of the available properties.