🏟️Examples

Example Usage in a React Application

AutoFetch True:

import React, { useState } from 'react';
import { Onairos } from 'onairos';

function App() {
  return (
      <Onairos className="w-20 h-20 py-2 px-4 ml-5" 
        textColor={"black"} textLayout="right"
        webpageName="Onairos Test App"  
        requestData={requestData} 
        autoFetch={true} onComplete={onComplete} inferenceData={data}  
        proofMode={false} />
  );
}
const requestData = { 
    Small: {
      type:"Personality",
      descriptions:"Insight into your Interests",
      reward:"10% Discount"
    },
    Medium:{
      type:"Personality",
      descriptions:"Insight into your Interests",
      reward:"2 USDC"
    },
    Large:{
      type:"Personality",
      descriptions:"Insight into your Interests",
      reward:"2 USDC"
    },
  };
export default InferenceComponent;

AutoFetch False : Manually get User Data via Request API:

import React, { useState } from 'react';
import { Onairos } from 'onairos';

function App() {

    async function UseAPIURL(event){
     if (event.data && event.data.source === 'content-script' && event.data.type === 'API_URL_RESPONSE' && event.data.unique =="Onairos-Response") {
      const { apiUrl, accessToken } = event.data;
       await fetch(apiUrl, {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'Authorization': `Bearer ${accessToken}` // Include the access token in the Authorization header
           },
           body: JSON.stringify(InputData),
       }).then(async (data)=>{
             // process Onairos Data
       })
       .catch(error => console.error(error));
    }}

  const requestData = { 
    Small: {
      type:"Personality",
      descriptions:"Insight into your Interests",
      reward:"10% Discount"
    },
    Medium:{
      type:"Personality",
      descriptions:"Insight into your Interests",
      reward:"2 USDC"
    },
    Large:{
      type:"Personality",
      descriptions:"Insight into your Interests",
      reward:"2 USDC"
    },
  };
  useEffect(() => {
    window.addEventListener('message', UseAPIURL);
    return () => {
      window.removeEventListener('message', UseAPIURL);
    };
    }, []);

  const onairosID = 'test';
  return (
      <Onairos requestData={requestData} webpageName={webpageName} proofMode={proofMode} />

  );
}
export default InferenceComponent;