Skip to content

Commit

Permalink
feat: Show apr in borrow modal (and little refactoring)
Browse files Browse the repository at this point in the history
  • Loading branch information
kovipu committed Dec 8, 2024
1 parent 61d4d16 commit a4b2608
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 39 deletions.
25 changes: 4 additions & 21 deletions src/pages/_borrow/BorrowModal/BorrowModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,23 @@ export interface BorrowModalProps {

export const BorrowModal = ({ modalId, onClose, currency, totalSupplied }: BorrowModalProps) => {
const { name, ticker } = currency;
const { wallet, walletBalances, signTransaction, refetchBalances } = useWallet();
const { prices } = usePools();
const { walletBalances, refetchBalances } = useWallet();

const closeModal = () => {
refetchBalances();
onClose();
};

// Modal is impossible to open before the wallet is loaded.
if (!wallet || !walletBalances || !prices) return null;

const isTrustline = walletBalances[ticker].trustLine;
const isTrustline = walletBalances?.[ticker].trustLine;

return (
<dialog id={modalId} className="modal">
<div className="modal-box w-full max-w-full md:w-[700px] p-10">
<h3 className="font-bold text-xl mb-4">Borrow {name}</h3>
{!isTrustline ? (
<TrustLineStep
onClose={closeModal}
currency={currency}
wallet={wallet}
signTransaction={signTransaction}
refetchBalances={refetchBalances}
/>
<TrustLineStep onClose={closeModal} currency={currency} />
) : (
<BorrowStep
onClose={closeModal}
currency={currency}
totalSupplied={totalSupplied}
wallet={wallet}
walletBalances={walletBalances}
prices={prices}
/>
<BorrowStep onClose={closeModal} currency={currency} />
)}
</div>
{/* Invisible backdrop that closes the modal on click */}
Expand Down
25 changes: 12 additions & 13 deletions src/pages/_borrow/BorrowModal/BorrowStep.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Button } from '@components/Button';
import { CryptoAmountSelector } from '@components/CryptoAmountSelector';
import { Loading } from '@components/Loading';
import { type BalanceRecord, type PriceRecord, type Wallet, useWallet } from '@contexts/wallet-context';
import { usePools } from '@contexts/pool-context';
import { useWallet } from '@contexts/wallet-context';
import { contractClient as loanManagerClient } from '@contracts/loan_manager';
import { getIntegerPart, to7decimals } from '@lib/converters';
import { SCALAR_7, fromCents, toCents } from '@lib/formatting';
import { SCALAR_7, formatAPR, fromCents, toCents } from '@lib/formatting';
import type { SupportedCurrency } from 'currencies';
import { type ChangeEvent, useState } from 'react';
import { CURRENCY_BINDINGS, CURRENCY_BINDINGS_ARR, type CurrencyBinding } from 'src/currency-bindings';
Expand All @@ -17,21 +18,22 @@ const HEALTH_FACTOR_EXCELLENT_THRESHOLD = 2.0;
export interface BorrowStepProps {
onClose: () => void;
currency: CurrencyBinding;
totalSupplied: bigint;
wallet: Wallet;
walletBalances: BalanceRecord;
prices: PriceRecord;
}

export const BorrowStep = ({ onClose, currency, totalSupplied, wallet, walletBalances, prices }: BorrowStepProps) => {
export const BorrowStep = ({ onClose, currency }: BorrowStepProps) => {
const { name, ticker, contractId: loanCurrencyId } = currency;
const { signTransaction } = useWallet();
const { signTransaction, wallet, walletBalances } = useWallet();
const { pools, prices } = usePools();

const [isBorrowing, setIsBorrowing] = useState(false);
const [loanAmount, setLoanAmount] = useState<string>('0');
const [collateralTicker, setCollateralTicker] = useState<SupportedCurrency>('XLM');
const [collateralAmount, setCollateralAmount] = useState<string>('0');

if (!pools || !prices || !walletBalances) return null;

const { apr, availableBalance } = pools[ticker];

const collateralOptions: SupportedCurrency[] = CURRENCY_BINDINGS_ARR.filter((c) => c.ticker !== ticker).map(
({ ticker }) => ticker,
);
Expand All @@ -50,9 +52,6 @@ export const BorrowStep = ({ onClose, currency, totalSupplied, wallet, walletBal
const healthFactor =
loanAmountCents && loanAmountCents > 0n ? Number(collateralAmountCents) / Number(loanAmountCents) : 0;

// TODO: get this from the contract.
const interestRate = '7.5%';

const handleCancel = () => {
setLoanAmount('0');
setCollateralAmount('0');
Expand Down Expand Up @@ -124,7 +123,7 @@ export const BorrowStep = ({ onClose, currency, totalSupplied, wallet, walletBal
const isBorrowDisabled =
!isTrustline || loanAmount === '0' || collateralAmount === '0' || healthFactor < HEALTH_FACTOR_MIN_THRESHOLD;

const maxLoan = (totalSupplied / 10_000_000n).toString();
const maxLoan = (availableBalance / 10_000_000n).toString();

const maxCollateral = getIntegerPart(collateralBalance.trustLine ? collateralBalance.balanceLine.balance : '0');

Expand All @@ -147,7 +146,7 @@ export const BorrowStep = ({ onClose, currency, totalSupplied, wallet, walletBal
collateral, causing you to lose some of your collateral.
</p>
<p className="my-4">The interest rate changes as the amount of assets borrowed from the pools changes.</p>
<p className="my-4">The annual interest rate is currently {interestRate}.</p>
<p className="my-4">The annual interest rate is currently {formatAPR(apr)}.</p>

<p className="font-bold mb-2 mt-6">Amount to borrow</p>
<CryptoAmountSelector
Expand Down
11 changes: 6 additions & 5 deletions src/pages/_borrow/BorrowModal/TrustlineStep.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,24 @@ import { useState } from 'react';

import { Button } from '@components/Button';
import { Loading } from '@components/Loading';
import type { SignTransaction, Wallet } from '@contexts/wallet-context';
import { useWallet } from '@contexts/wallet-context';
import { createAddTrustlineTransaction, sendTransaction } from '@lib/horizon';
import type { CurrencyBinding } from 'src/currency-bindings';

export interface TrustLineStepProps {
onClose: () => void;
currency: CurrencyBinding;
wallet: Wallet;
signTransaction: SignTransaction;
refetchBalances: () => void;
}

export const TrustLineStep = ({ onClose, currency, wallet, signTransaction, refetchBalances }: TrustLineStepProps) => {
export const TrustLineStep = ({ onClose, currency }: TrustLineStepProps) => {
const { name, ticker } = currency;
const { wallet, signTransaction, refetchBalances } = useWallet();

const [isCreating, setIsCreating] = useState(false);

// Modal is impossible to open without a wallet connection.
if (!wallet) return null;

const handleAddTrustlineClick = async () => {
try {
setIsCreating(true);
Expand Down

0 comments on commit a4b2608

Please sign in to comment.