Skip to main content

Introduction To The Sygma Widget

The Sygma protocol provides an open source, customizable frontend UI, the Sygma Widget, to make integration of the Sygma interoperability protocol easier.

The source code can be found in the sygma-widget repo.

The repository is organized into two packages and one example:

  • The Widget package is a web component built using the Lit framework.
  • The React package is a wrapper around the Lit widget that allows developers to use this application inside React projects.
  • The [examples/react-widget-app] package is an example of a stylized React widget.

Quick Setup​

  1. Create a Vite template project called my-dapp:
yarn create vite my-dapp --template react-ts
cd ./my-dapp
touch yarn.lock
  1. Install dependencies: 
yarn install
yarn add @buildwithsygma/sygmaprotocol-react-widget @buildwithsygma/sygma-sdk-core
  1. Boot up the local server: 
yarn dev

How To Integrate​

Follow the Lit or React documentation for framework-specific instructions.

Widget Properties​

The behaviour of the Sygma Widget can be customized using configurable properties (props). A complete reference of the properties can be found under packages/widget/src/widget.ts/

Below you will find an example of props being passed to whitelist (i.e enable) the source and destination networks in the React component: 

// App.tsx
import { SygmaProtocolReactWidget } from "@buildwithsygma/sygmaprotocol-react-widget";

function MyDapp() {
  const [count, setCount] = useState(0);

  return (
    <SygmaProtocolReactWidget
      whitelistedSourceNetworks={["sepolia"]}
      whitelistedDestinationNetworks={["cronos"]}
    />
  );
}