@credix/credix-client

Credix Client

Typescript SDK to interact with the Credix smart contract.

Getting started

We will cover both a JS script example and a react example.

JS script example

Before we get started, it is important to note that you should use "@project-serum/anchor": "^0.18.0" to make use of the NodeWallet.

Let's create a script that fetches the instruction data to deposit in the liquidity pool of the Credix Marketplace.

import { CredixClient } from "@credix/credix-client";
import { PublicKey, Keypair, Connection } from "@solana/web3.js";
import { NodeWallet } from "@project-serum/anchor/dist/cjs/provider";

async function getDepositIxData() {
 const connection = new Connection("https://api.mainnet-beta.solana.com");
 const dummy_keypair = Keypair.generate();
 const wallet = new NodeWallet(dummy_keypair);
 const confirmOptions = {
  commitment: "confirmed",
  preflightCommitment: "processed",
 };
 const programId = new PublicKey(
  "CRDx2YkdtYtGZXGHZ59wNv1EwKHQndnRc1gT4p8i2vPX"
 );
  const secondaryMarketProgramId = new PublicKey(
  "MSMTVTYZXBGJB1SCViC4yGY17tcF2S9meV7iGTyfoAn"
 );
 const scowProgramId = new PublicKey("scow5tuk479sWyYbThu6e5MRvf6kFHuqoQSxqaRGbJD");
 const variableRatesProgramId = new PublicKey("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
 const config = { programId: programId, secondaryMarketProgramId, scowProgramId, variableRatesProgramId,confirmOptions: confirmOptions };
 const client = new CredixClient(connection, wallet, config);

 // the market for which we want to deposit in the liquidity pool
 const market = await client.fetchMarket("credix-marketplace");

 // the investor for which we want to get the deposit instruction data
 const investor = new PublicKey("CwyQtt6xGptR7PaxrrksgqBSRCZ3Zb2GjUYjKD9jH3tf");
 
 // amount to deposit
 const amount = 1_000_000 * 10**6; 

 const depositIx = await market.depositIx(amount, investor)

 return (depositIx); 
}

React app example

Create a Client provider (components/ClientProvider.tsx):

import React, { FC, ReactNode } from "react";
import { Wallet } from "@project-serum/anchor";
import { useAnchorWallet, useConnection } from "@solana/wallet-adapter-react";
import { ConfirmOptions, PublicKey } from "@solana/web3.js";
import { CredixClientProvider } from "@credix/credix-client";

const confirmOptions: ConfirmOptions = {
  commitment: "confirmed",
  preflightCommitment: "processed",
 };

const programId = new PublicKey("CRDx2YkdtYtGZXGHZ59wNv1EwKHQndnRc1gT4p8i2vPX")
const secondaryMarketProgramId = new PublicKey(
  "MSMTVTYZXBGJB1SCViC4yGY17tcF2S9meV7iGTyfoAn"
 );

export const ClientProvider: FC<{ children: ReactNode }> = ({ children }) => {
 const { connection } = useConnection();
 const wallet = useAnchorWallet();

 return (
  <CredixClientProvider
   connection={connection}
   wallet={wallet as Wallet}
   config={{
    programId: programId,
    secondaryMarketProgramId,
    confirmOptions: confirmOptions,
   }}
  >
   {children}
  </CredixClientProvider>
 );
};

In your app.tsx, use the provider:

import React, { FC, useMemo } from "react";
import { AppProps } from "next/app";
import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import {
 LedgerWalletAdapter,
 PhantomWalletAdapter,
 SlopeWalletAdapter,
 SolflareWalletAdapter,
 TorusWalletAdapter,
} from "@solana/wallet-adapter-wallets";
import { ClientProvider } from "@components/ClientProvider";

const App: FC<> = ({ Component }) => {
 const RPCEndpoint = "https://api.mainnet-beta.solana.com"
 const wallets = useMemo(
  () => [
   new PhantomWalletAdapter(),
   new SolflareWalletAdapter(),
   new TorusWalletAdapter(),
   new LedgerWalletAdapter(),
  ],
  []
 );

 return (
  <>
   <ConnectionProvider endpoint={RPCEndpoint}>
    <WalletProvider wallets={wallets} autoConnect>
     <WalletModalProvider>
      <ClientProvider>
  {Component}
      </ClientProvider>
     </WalletModalProvider>
    </WalletProvider>
   </ConnectionProvider>
  </>
 );
};

export default App;

Start using the client in your components:

import { Market, useCredixClient } from "@credix/credix-client";
import { useState } from 'react';

function Invest() {
 const [amount, setAmount] = useState(0);
 const client = useCredixClient();
 const marketSeed = "credix-marketplace"
 const market = await client.fetchMarket(marketSeed);

 const handleChangeAmount = (event) => {
 setAmount(event.target.value);
 }

 const invest = async () => {
  try {
   await market.deposit(amount);
  } catch (error) {
   console.log(error)
  }
 };

 return (
 <div>
  <h3>Enter the amount you would like to deposit.</h3>
  <input
   name="depositAmount"
   type="number"
   onChange={handleChangeAmount}
  />
  <Button
   onClick={invest}
  >
   Deposit! 
  </Button>
 </div>
 );
}