React example

This page demonstrate how to set qwestive client SDK method in React component hierarchy properly

React Context Provider

// hooks/useQwestiveSDK.tsx

import React, {
  createContext,
  useContext,
  ReactNode,
  useEffect,
  useState,
} from 'react';
import QwestiveClientSDK from 'qwestive-client-sdk';

const QWESTIVE_REFERRAL_PROJECT_ID = 'ADD_YOUR_PROJECT_ID';
const QWESTIVE_REFERRAL_API_KEY = 'ADD_YOUR_PUBLIC_API_KEY';

type TQwestiveTracker = {
  /** keeps track of whether the tracker methods have been loaded or not */
  isLoading: boolean;
  /** Here id denotes the user's wallet publicKey, registers invitee with qwestive */
  setReferral?: (setReferralInput: { publicKey: string }) => Promise<void>;
};

interface IQwestiveContext {
  qwestiveTracker: TQwestiveTracker;
}

function useQwestiveSDKProvider() {
  const [trackerQwestiveMethods, setTrackerQwestiveMethods] =
    useState<TQwestiveTracker>({
      isLoading: true,
    });

  useEffect(() => {
    async function initializeClientSDK() {
      try {
        const qwestiveClient = new QwestiveClientSDK(
          QWESTIVE_REFERRAL_PROJECT_ID,
          QWESTIVE_REFERRAL_API_KEY
        );
        await qwestiveClient.init();
        setTrackerQwestiveMethods({
          setReferral: qwestiveClient.setReferral.bind(qwestiveClient),
          isLoading: false,
        });
      } catch (err) {
        console.error('Error occured while initializing qwestive client');
        setTrackerQwestiveMethods({ isLoading: false });
      }
    }

    initializeClientSDK();
  }, []);

  return {
    qwestiveTracker: {
      isLoading: trackerQwestiveMethods?.isLoading,
      setReferral: trackerQwestiveMethods?.setReferral,
    },
  };
}

const SDKContext = createContext<IQwestiveContext | null>(null);

export function QwestiveSDKContextProvider({
  children,
}: {
  children: ReactNode;
}): JSX.Element {
  const scriptContext = useQwestiveSDKProvider();
  return (
    <SDKContext.Provider value={scriptContext}>{children}</SDKContext.Provider>
  );
}

export function useQwestiveSDK(): IQwestiveContext {
  const context = useContext(SDKContext);
  if (!context)
    throw new Error(
      'useQwestiveSDK must be called from within the corresponding ContextProvider'
    );
  return context;
}

Add above context provider at the top of your component hierarchy

// App.tsx

import "./styles.css";
import { QwestiveSDKContextProvider } from "../hooks/useQwestiveSDK";
import { DummyComponent } from "./DummyComponent";

export default function App() {
  return (
    <QwestiveSDKContextProvider>
      <div className="App">
        <DummyComponent />
      </div>
    </QwestiveSDKContextProvider>
  );
}

Use state and methods exposed by the provider

// DummyComponent.tsx

import { FC } from "react";
import { useQwestiveSDK } from "../hooks/useQwestiveSDK";

export const DummyComponent: FC = (): JSX.Element => {
  const { isLoading } = useQwestiveSDK();
  return isLoading ? <span>SDK: Loading ...</span> : <span>SDK: Loaded</span>;
};