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 devCheck respective READMES to follow instructions on how to integrate the Widget into your codebase.
- for web component based projects, you can directly install, import and use the Widget. You can find further instructions here
- for React based projects, please refer to this README file to get further instructions
- a react example is provided here for a more detailed reference
- a vanilla example is provided here for a more detailed reference on a bare bones implementation
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"]}
/>
);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent