Integrate Ante using React
The Ante widget has been published as an npm package:
npm: @antefinance/ante-widget-react

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'>
Copy link
On this page
Install ante-widget-react
Using AnteWidget
Example of usage