React

Basics

Installing Widgets

Each widget comes with a Javascript and CSS file. To add a widgets to your website, you will need to add its corresponding Javascript and CSS to the public/index.html of the react app.

Example:

<head>
  ...
  <!--
    Manifold Widgets
  -->
  <script src="https://connect.manifoldxyz.dev/latest/connect.umd.js"></script>
  <link rel="stylesheet" href="https://connect.manifoldxyz.dev/latest/connect.css">
  ....
</head>

The uri for the Javascript and CSS for each widget is as follows:

https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.umd.min.js
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.css

If you always want the latest version, use latest for the <WIDGET_VERSION>. However, due to the changing nature of the codebase, it is possible that the "newer" latest is no longer compatible with the "previous" latest used to develop the app. It is thus recommended that you use a specific version of a widget for consistent results.

You can find a list of widgets, versions and links here.

Using Widgets

To use a widget, simply add a <div> into each react component you wish to use it in.

Example:

function ManifoldConnect() {
  return (
    <div className="ManifoldConnect">
      <div  
        data-widget="m-connect"
        data-grant-type="<your app grant type, `signature` or `token`>"
        data-client-id="<your app client id>"  
        data-app-name="<your app name>"  
        data-network="<your desired network's chain id>"
      >
      </div>
    </div>
  );
}

You can find a list of widgets, versions and links here.

Styling

Widgets are styled using standard CSS.

Some widgets may include links pointing to additional stylesheets. These additional stylesheets (usually named <WIDGET_NAME>.manifold-light.css or <WIDGET_NAME>.manifold-dark.css) build on top of the base stylesheet (usually named <WIDGET_NAME>.css), thus the additional stylesheets should be included after the base one.

Examples

Examples of commonly used features can be found here. Please feel free to use this as a starting point to building your own dApp.

Last updated 1 year ago