Integrate Ante using React

The Ante widget has been published as an npm package:

Install ante-widget-react

npm: npm i @antefinance/ante-widget-react

yarn: yarn add @antefinance/ante-widget-react


npm i
npm run build

Using AnteWidget

Import AnteWidget from the ante-widget-react package:

import AnteWidget from '@antefinance/ante-widget-react';
import '@antefinance/ante-widget/dist/widget.css'; // This will import the styles

Then add the appropriate AnteWidget component where desired on your app:

function Example() {
  return (
      // To show the overall trust tier of a protocol
      <AnteWidget.Protocol name='PROTOCOL_NAME' />
      // To show the trust score on a specific Ante Test
      <AnteWidget.Test address='ANTE_TEST_ADDRESS' chain='0x1' />

Note: the protocol name string is case sensitive. If in doubt, check how the protocol name is spelled in the Ante app. Chain IDs can be looked up at

Example of usage

The following code will generate badges for the Ante protocol as well as one of the Ante Tests that tests the ante protocol:

<AnteWidget.Protocol name='Ante' />
<AnteWidget.Test address='0x2EdC35B39BFBca6A52eA35612C2684D3D7654763' chain='0x1'>

Last updated