NextJS
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
pages/_app.js
of the Next app.Make sure to include the
async
in the script tag you will see an error when doing yarn build
https://nextjs.org/docs/messages/no-sync-scriptsExample:
return (
<div>
{/* -- Manifold Widgets -- */}
<script src="https://connect.manifoldxyz.dev/latest/connect.umd.js" async></script>
<link rel="stylesheet" href="https://connect.manifoldxyz.dev/latest/connect.css">
....
</div>
)
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>.
To use a widget, simply add a
<div>
into each component you wish to use it in.Example:
<div dangerouslySetInnerHTML={{
__html:
`<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 networks chain id>'
></div>`
}} />
Since the Javascript only injects the widgets on the first page load, reactive apps will need to manually trigger the injection code upon page changes/refreshes. Do this by emitting the m-refresh-widgets event
window.dispatchEvent(new Event("m-refresh-widgets"));
Widgets are styled using standard CSS.
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 modified 1mo ago