Ante
Ante v0.6
Ante v0.6
  • Introduction to Ante
  • Why use Ante?
  • What's new in Ante v0.6?
  • FAQ
  • Security & Trust
  • Getting Started
    • How Ante works
      • Staking
      • Challenging
      • The Decentralized Trust Score
      • Decentralized Trust Tiers
      • Supported assets
    • User Guides
      • Navigating the app
      • Stake an Ante Test
      • Challenge an Ante Test
      • Withdraw funds
      • Check an Ante Test
      • Claim rewards
      • Using Antegen
  • For Developers
    • Community test repo
    • Writing Ante Tests
      • What to test?
      • Interfaces
      • Ante Test Examples
      • Writing and Testing an Ante Test
    • Integrating Ante
      • Integrate Ante using React
      • Integrate Ante using HTML
    • Deploying an Ante Test
      • Deploy an Ante Test
      • Create an Ante Pool
    • Deployed contracts
Powered by GitBook
On this page
  • Install ante-widget-react
  • Build
  • Using AnteWidget
  • Example of usage
  1. For Developers
  2. Integrating Ante

Integrate Ante using React

PreviousIntegrating AnteNextIntegrate Ante using HTML

Last updated 2 years ago

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

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>
  );
}

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'>

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/
npm: @antefinance/ante-widget-reactnpm
Logo