Usage Overview

How to use Royco SDK in your application

Provider

Under the hood, it's a wrapper around our Supabase client (for fetching data) and React Query (for caching it on client-side). In order to use Royco SDK, you need to wrap your application with RoycoProvider and provide two values -- originUrl and originKey, which are the URL and API key of your Royco Protocol instance respectively. It also takes an optional defaultOptions prop which can be used to configure the default options for React Query Provider.

import { RoycoProvider } from "royco";
 
const App = () => {
  return (
    <RoycoProvider originUrl="YOUR_ACCESS_URL" originKey="YOUR_ACCESS_API_KEY">
      <YourApp />
    </RoycoProvider>
  );
};

RoycoProvider Props

Default Options for React Query Provider

Hooks

These are used to fetch relevant data and interact with Royco Protocol. They take care of caching and invalidating data on client-side using React Query. Hooks are available for most of the common operations like fetching pools, fetching tokens, fetching user data, etc.

import { useRoycoHook } from "royco/hooks";
 
const YourComponent = () => {
  const { data, isLoading, isError } = useRoycoHook();
 
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching data</div>;
  return <div>{JSON.stringify(data)}</div>;
};

Queries

These are your entry point into our managed data endpoints. They are used to fetch data from Royco Protocol and are used internally by hooks. You can also use them directly to fetch data without caching. Queries return the type options provided to useQuery from React Query.

You can use these queryOptions in 2 ways:

import { useQuery } from "react-query";
import { getRoycoQueryOptions1, getRoycoQueryOptions2 } from "royco/queries";
 
const useCustomRoycoHook = () => {
  const {
    data: data1,
    isLoading: isLoadingData1,
    isError: isErrorData1,
  } = useQuery(getRoycoQueryOptions1);
 
  const {
    data: data2,
    isLoading: isLoadingData2,
    isError: isErrorData2,
  } = useQuery(getRoycoQueryOptions2);
 
  const isLoading = isLoadingData1 || isLoadingData2;
  const isError = isErrorData1 || isErrorData2;
 
  let data = null;
 
  if (!isLoading && !isError && !!data1 && !!data2) {
    data = {
      ...data1,
      ...data2,
    };
  }
 
  return { data, isLoading, isError };
};

import { useQuery } from "react-query";
import { getRoycoQueryOptions } from "royco/queries";
 
const YourComponent = () => {
  const { data, isLoading, isError } = useQuery({
    ...getRoycoQueryOptions,
    yourCustomOptions: "yourCustomOptions",
  });
 
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching data</div>;
  return <div>{JSON.stringify(data)}</div>;
};