SAMPLE IMPLEMENTATION: CRA v4

import { NotifyType, useTokenClaimer } from "@jeeh/tokenclaim-ui"; import { useWallet } from "@solana/wallet-adapter-react";

export const TokenClaimer = () => { const { publicKey, signAllTransactions } = useWallet();

const notify = (msg: string, notifyType: NotifyType) => { console.log({msg, notifyType}) }; const { availableAmount, totalWhitelistedAmount, claimedAmount, onClick, isFetching, isExecuting, isError, } = useTokenClaimer( { /// replace with your quickdrop id from https://quickdrop.neft.world quickdropId: "ErpN8n2Z82CebwyJnEgc6qU7owJHrjqheB65B7uA6PHa", /// leave this as it is unless you're doing DEVNET work apiBaseUrl: 'https://quickdrop.neft.world', /// using the default env variable name as specified in the candy machine ref implementation solanaRpcHost: process.env.REACT_APP_SOLANA_RPC_HOST!, }, notify, publicKey?.toBase58(), signAllTransactions, "1" /// remove this parameter if you want to claim all tokens at once );

return ( QUICKDROP SAMPLE IMPLEMENTATION <div

  >
    {isError ? (
      <div>
        Could not connect to quickdrop API
      </div>
    ) : isFetching || isExecuting ? (
        <div>
            Executing2 {isFetching?'y':'n'}
        </div>
    ) : totalWhitelistedAmount > 0 ? (
      <div

      >
        <button
          disabled={availableAmount === BigInt(0)}
          onClick={onClick}
        >
          Claim
        </button>
        <div>
          You have claimed: {claimedAmount.toString()} tokens.
        </div>
        <div>
          Left to claim: {availableAmount.toString()} tokens.
        </div>
      </div>
    ) : (
      <div>Wallet not whitelisted</div>
    )}
  </div>
</div>

); };