crosschain-widget v1.1.2

Cross-chain Governance Widget

The Cross-chain Governance Widget is a user-friendly React component library that enables users to deploy and manage their Avatar's Zodiac Connext Module and easily build the transaction data required for executing desired actions through an xcall function in Connext.

Development

To set up the development environment, first clone the repository:

git clone [this repo link] && cd [this repo name]

Local environment

Install dependencies:

yarn

Start the testing app:

yarn dev

The app should be live at http://localhost:5173/.

Production

To build the production-ready version, run the following command:

yarn build

Now you can use yarn link to test the library.

You can also run yarn build:dev and yarn preview to use the built-in application to try out the widget.

Example

To use the Crosschain Widget in your React application, import the ZodiacConnextWidget component from the package and provide the required props.

import { ZodiacConnextWidget } from "crosschain-widget";

// Inside your React component
const MyComponent = () => {
  const handleTransaction = (tx) => {
    // Handle the transaction data
  };

  return (
    <ZodiacConnextWidget
      originAddress="0x123abc..."
      userChainId={1}
      setTx={handleTransaction}
      text="Open Widget Modal!"
      modal={true}
      provider={myProviderInstance}
      lightTheme={true}
    />
  );
};

Please note that you need to provide appropriate values for the originAddress, userChainId, setTx, and provider props according to your application's requirements.

Props

The following props are available for the ZodiacConnextWidget component:

Live example

You can find the example implementation repository here and the live code example here.

License

This project is licensed under the AGPL-3.0-only License.