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.