Integrate Ante using React

The Ante widget has been published as an npm package:
npm: @antefinance/ante-widget-react
npm
Install ante-widget-react
npm: npm i @antefinance/ante-widget-react
yarn: yarn add @antefinance/ante-widget-react
Build
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 (
    <div>
      // 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' />
    </div>
  );
}
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 https://chainlist.org/.
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 modified 2mo ago