The Sygma Widget is a customizable frontend that leverages the Sygma protocol
and can be integrated into any Dapp regardless of the framework used. More information can be found in our docs
This repository is divided into two packages. The Widget package is a web component built using Lit framework that allows you to have a widget for the Sygma
protocol project. The React package is a wrapper around the Lit Widget that allows developers to use this application inside react projects.
yarn create vite my-dapp --template react-ts
cd ./my-dapp
yarn install
yarn add @buildwithsygma/sygmaprotocol-react-widget
yarn dev
Check respective READMES to follow instructions on how to integrate the Widget into your codebase.
You can pass props to the Widget to customize the behaviour of the Widget. You can find the complete reference of the properties avialable here. Below there is an example passing props to whitelist the source and destination network in the react component:
import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";
function MyDapp() {
return (
<SygmaProtocolReactWidget
whitelistedSourceNetworks={["sepolia"]}
whitelistedDestinationNetworks={["cronos"]}
/>
);
}