Skip to main content

React Framework

Dependencies​

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

yarn add @polkadot/extension-inject

And similarly:

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

Integrating The Widget Into Your React Code​

After installation, add the widget into your code using:

import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget';

function MyDapp(){
  return (
    <SygmaProtocolReactWidget />;
  )
}

You can also pass props to the widget component to customize it:

function MyDapp(){
  return (
    <SygmaProtocolReactWidget
      environment={Environment.MAINNET}
      whitelistedSourceNetworks={["sepolia"]}
      whitelistedDestinationNetworks={["cronos"]}
      evmProvider={myEip1193Provider}
    />
  )
}

See widget.ts for all of the available properties.