Typescript SDK to interact with the Credix smart contract.
We will cover both a JS script example and a react 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 config = { programId: programId, secondaryMarketProgramId, 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);
}
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>
);
}
Generated using TypeDoc