Feature Request: Onchainkit Defi Supply/Withdraw/Interest component

[jacobgoren-sb]

Describe the solution you'd like

It would be great to have high quality components for Defi in this kit. I would personally focus on Compound first with Aave and Moonwell as fast-follows.

Describe alternatives you've considered.

For Onchain summer I worked on a chores/app with USDC for children and did direct calls to the compound (Base) contracts, but it was clunky.

[Zizzamia]

Interesting! Tell me more, how you think these component should look or be used?

[jacobgoren-sb]

I am imagining something like your current swap UI. I want to build a 3 section tab (Assets (clean render from cdp_listBalances), Swap (exists), Invest (what we are describing)).

---

Instead of the top section saying "Sell", it would say "Supply" and the token select would be one of the possible tokens that you can deposit into Defi (USDC into compound for the initial case)

The balance would render what is currently in the wallet initially let's say 50 USDC.

Instead of the bottom section saying "Buy" it would say "Deposited & Yielding"

It would show the current amount in compound that is generating yield with the point in time interest rate. Let's say I have 25 USDC deposited growing at 3% (changes block to block, I have a sample calc below)

Both sections have a 25%,50%,Max button to populate/change the counter for how much we will supply and/or withdraw drawing from erc20 balance calls.

Lastly, the swap button would be split into two buttons (Supply & Withdraw) which does the respective compound commands:

Sample Withdraw Code:

        const txHash = await smartAccountClient.sendTransaction({
          to: tx.to,
          data: encodeFunctionData({
            abi: compoundAbiPathToken.abi,
            functionName: "withdraw",
            args: [tx.token?.address, tx.amount],
          }),
        });

Sample Supply Code:

        const txHash = await smartAccountClient.sendTransactions({
          transactions: [
            {
              to: tx.token?.address as `0x${string}`,
              value: parseEther("0.0"),
              data: encodeFunctionData({
                abi: erc20Abi,
                functionName: "approve",
                args: [tx.to, tx.amount],
              }),
            },
            {
              to: tx.to,
              value: parseEther("0.0"),
              data: encodeFunctionData({
                abi: compoundAbiPathToken.abi,
                functionName: "supply",
                args: [tx.token?.address as `0x${string}`, tx.amount],
              }),
            },
          ],
        });

Sample USDC interest rate code:

import { useEffect, useState } from "react";
import { Contract, ethers } from "ethers";
import compoundAbi from "~~/abi/compound.json";
import scaffoldConfig from "~~/scaffold.config";

const cUsdcAddress = scaffoldConfig.CUSDC_ADDRESS;

export const useUSDCSupplyRate = (signer: ethers.Signer | null | undefined): string | null => {
  const [usdcSupplyRate, setUsdcSupplyRate] = useState<string | null>(null);

  useEffect(() => {
    if (!signer) return;

    const compoundContract = new ethers.Contract(cUsdcAddress, compoundAbi.abi, signer) as Contract;

    const fetchSupplyRate = async () => {
      try {
        const currentUtilization = await compoundContract.getUtilization();
        const balance = await compoundContract.getSupplyRate(currentUtilization);
        const rateCalc = Number(balance) / 317100000;

        setUsdcSupplyRate(rateCalc.toFixed(2).toString());
      } catch (error) {
        console.error("Error fetching USDC supply rate:", error);
        setUsdcSupplyRate(null);
      }
    };

    fetchSupplyRate();
  }, [signer]);

  return usdcSupplyRate;
};