@pngfi/react-hooks

Docs Link

Installation

yarn add @pngfi/react-hooks
// or
npm i @pngfi/react-hooks --save

Usage

• How to claim rewards
• How to create distributor
• How to get distributor
• How to update distributor
• How to delete distributor
• How to bond
• How to stake

Api Host

• Staging Version https://api-staging.png.fi
• Online Version https://api.png.fi

react hooks base api

PngfiProvider

import { PngfiProvider } from '@pngfi/react-hooks';

const App = ({ children }) => {
  const wallet = useWallet();
  return (
    <PngfiProvider
      cluster="mainnet-beta"
      userPublicKey={wallet.publicKey}
      >
      {/* You can use useBonding in children now */}
      {children}
    </PngfiProvider>
  )
}

usePngfiConfig

import { usePngfiConfig } from '@pngfi/react-hooks';
const {
  fallback: {
    cluster,
    pngfiApi,
    userPublicKey
    //...
  }
  //...
} = usePngfiConfig()

useAnchorProvider

import { useAnchorProvider } from '@pngfi/react-hooks';
const provider = useAnchorProvider({
  connection,
  wallet,
  connected
});

Distributors

useDistributors

import { useDistributors } from '@pngfi/react-hooks';
const { data, error, loading } = useDistributors(user: string);

useMerkleRewards

import { useMerkleRewards } from '@pngfi/react-hooks';
const { data, error, loading } = useMerkleRewards(user: string);

useDistributorEpochs

import { useDistributorEpochs } from '@pngfi/react-hooks';
const { data, error, loading } = useDistributorEpochs(distributor: string);

useMerkleRewardsDistributor

import { useMerkleRewardsDistributor } from '@pngfi/react-hooks';
const { data, error, loading } = useMerkleRewardsDistributor(distributor: string);

useDistributorRewardsEpoch

import { useDistributorRewardsEpoch } from '@pngfi/react-hooks';
const { data, error, loading } = useDistributorRewardsEpoch(distributor: string, epoch: string);

useTokens

import { useTokens } from '@pngfi/react-hooks';
const { data, error, loading } = useTokens();

usePools

import { usePools } from '@pngfi/react-hooks';
const { data, error, loading } = usePools();

useMarkets

import { useMarkets } from '@pngfi/react-hooks';
const { data, error, loading } = useMarkets();

usePrices

import { usePrices } from '@pngfi/react-hooks';
const { data, error, loading } = usePrices(['SOL', 'UST']);

useBonding

import { useBonding } from '@pngfi/react-hooks';
const { data, error, loading } = useBonding();

useStaking

import { useStaking } from '@pngfi/react-hooks';
const { data, error, loading } = useStaking();

useBalances

import { useBalances } from '@pngfi/react-hooks';
const { data, error, loading } = useBalances(user);

useUserVesting

import { useUserVesting } from '@pngfi/react-hooks';
const { data, error, loading } = useUserVesting(owner, vestConfig);

useRewards

How to claim rewards

1. use useMerkleRewards to get rewards

import {
  useMerkleRewards
} from "@pngfi/react-hooks";
const { publicKey: userPublicKey } = useWallet();
const { data = [] } = useMerkleRewards(userPublicKey.toString());

2. use claimRewards to claim rewards

import {
  useConnection, useWallet
} from '@solana/wallet-adapter-react';
import {
  useAnchorProvider,
  useRewards
} from "@pngfi/react-hooks";

const { connection } = useConnection();
const { wallet, connected } = useWallet();

const { claimRewards } = useRewards();
const provider = useAnchorProvider({
  connection,
  wallet,
  connected
});
const { publicKey: userPublicKey } = useWallet();

const onClaim = async (data) => {
  try {
    const claimTx = await claimRewards(provider, userPublicKey, {
      distributor: data.distributor,
      amount: data.amount.toString(),
      claimAddress: data.claimAddress || '',
      proof: data.proof,
      mint: data.mint,
      index: data.index,
    });
    console.log('claimTx', claimTx);

    const { signature } = await claimTx.confirm();
    console.log('claimTx result', signature);

  } catch (e) {
    console.log('e', e);
  }
}

// ...

onClaim(item) // item of useMerkleRewards data

How to create distributor

1. use insertDistributor to insert distributor

import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { useAnchorProvider, useRewards, useTokenByMint, signAuth, ISignMessage } from '@pngfi/react-hooks';
import { Keypair } from '@solana/web3.js';

const { publicKey, wallet, connected, signMessage } = useWallet();
const { connection } = useConnection();
const provider = useAnchorProvider({ connection, wallet, connected });

const { insertDistributor, confirmInsertDistributor } = useRewards();

const token = useTokenByMint(tokenMint);

const { txe, distributor } = await insertDistributor({
  provider,
  base: Keypair.generate().publicKey.toString(),
  adminAuth: publicKey.toString(),
  data: {
    "title": title,
    token,
    "rewards": distributors.map(v => {
      return {
        dest: v.distributor,
        amount: v.amount
      }
    })
  }
});

2. use txe.confirm to confirm sendTransaction

const { signature, response } = await txe.confirm();

3. use confirmInsertDistributor to update distributor status.

await confirmInsertDistributor({
    distributor: distributor.distributor,
    status: 'SUCCESS', // 'CANCEL', 'ERROR'
}, {
    'X-PNG-SIGNATURE': await signAuth(signMessage, ISignMessage.confirmDistributor),
    'X-PNG-ADDRESS': publicKey.toString()
});

How to get distributor

use useDistributors to get distributors

import { useWallet } from '@solana/wallet-adapter-react';
import { useDistributors } from '@pngfi/react-hooks';
const { publicKey } = useWallet();

const { data, loading, error } = await useDistributors(publicKey.toString());

use useDistributor to get distributor

import { useDistributor } from '@pngfi/react-hooks';

const { data, loading, error } = await useDistributor(distributorAddress);

How to update distributor

1. use updateDistributor to update distributor

import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { useAnchorProvider, useRewards, useTokenByMint, signAuth } from '@pngfi/react-hooks';
const { publicKey, wallet, connected, signMessage, ISignMessage } = useWallet();
const { connection } = useConnection();
const provider = useAnchorProvider({ connection, wallet, connected });

const { updateDistributor, confirmUpdateDistributor } = useRewards();

const distributor = useDistributor(address);

const token = useTokenByMint(distributor.tokenMint);

const { txe, distributor } = await updateDistributor({
  provider,
  distributor: distributor.address,
  adminAuth: String(publicKey),
  data: {
    "title": title,
    token,
    "rewards": distributors.map(v => {
      return {
        dest: v.distributor,
        amount: v.amount
      }
    })
  }
});

2. use txe.confirm to confirm sendTransaction

const { signature, response } = await txe.confirm();

3. use confirmUpdateDistributor to update distributor status.

await confirmUpdateDistributor({
    distributor: distributor.distributor,
    previousEpochID: distributor.epochID,
    status: 'SUCCESS', // 'CANCEL', 'ERROR'
}, {
    'X-PNG-SIGNATURE': await signAuth(signMessage, ISignMessage.confirmDistributor),
    'X-PNG-ADDRESS': String(publicKey)
});

How to delete distributor

1. use deleteDistributor to delete distributor

import { useWallet } from '@solana/wallet-adapter-react';
import { useRewards, signAuth, ISignMessage } from '@pngfi/react-hooks';
const { publicKey, signMessage } = useWallet();

const { deleteDistributor } = useRewards();

const result = await deleteDistributor((distributor.address, {
    'X-PNG-SIGNATURE': await signAuth(signMessage, ISignMessage.confirmDistributor),
    'X-PNG-ADDRESS': String(publicKey)
}));

useBond

How to bond

1. use useBond to get bond info

import {
  useConnection, useWallet
} from '@solana/wallet-adapter-react';
import {
  useAnchorProvider,
  useBond
} from "@pngfi/react-hooks";


const [bondingItemData, setBondingItemData] = useState({} as any);
const { connection } = useConnection();
const { wallet, connected } = useWallet();
const provider = useAnchorProvider({
  connection,
  wallet,
  connected
});

const {
  bondingTotalValue,
  getBondingItemData,
  onBond
} = await useBond(provider);

useEffect(() => {
  async function fetchData() {
    const data = await getBondingItemData(pubkey);
    setBondingItemData(data);
  }
  fetchData();
}, [getBondingItemData, pubkey]);

const {
  bondingModel,
  stakingModel,
  bondingInfo // IBondingInfoWithTokens,

  payoutHolderBalance,
  assetTokens,
} = bondingItemData;
const { publicKey: ownerAccount } = useWallet();
const res = onBond({
  ownerAccount,
  bondingInfo,
  bondingModel,
  stakingModel,

  depositToken,
  amount,

  execute: (opTx, amount, token, isSwap) => {
    // const { signature } = await opTx.confirm();
  },
  swap: () => {
    // const { execute } = await jupAg.exchange({
    //   routeInfo: routes[0]
    // });
    // const swapResult = await execute({
    //   wallet: {
    //     sendTransaction,
    //     publicKey,
    //     signAllTransactions,
    //     signTransaction
    //   }
    // });
  },
  userVestingInfo,
});

useStake

How to stake

1. use useStake to get stake info

import {
  useConnection, useWallet
} from '@solana/wallet-adapter-react';
import {
  useAnchorProvider,
  useStake
} from "@pngfi/react-hooks";

const { connection } = useConnection();
const { publicKey, wallet, connected } = useWallet();
const provider = useAnchorProvider({
  connection,
  wallet,
  connected
});

const {
  stakingTotalValue,
  getStakingItemData,
  onStake,
  onUnStake
} = useStake(provider);

const {
  stakingInfo,
  stakingModel,
  // ...
} = getStakingItemData();

// stake
const [toVTokenTx, stakeAllTx, rebaseTx] = await onStake({
  stakingInfo,
  stakingModel,
  amount,
});

const { signature } = await toVTokenTx
  .combine(stakeAllTx)
  .combine(rebaseTx)
  .confirm();

// unstake
const [unstakeTx, vestAllTx, rebaseTx] = await onUnStake({
  stakingInfo,
  stakingModel,
  amount,
});
const { signature } = await unstakeTx
    .combine(vestAllTx)
    .combine(rebaseTx)
    .confirm();