1  import { Trans } from '@lingui/macro';
 2  import { Typography } from '@mui/material';
 3  import { formatUnits } from 'ethers/lib/utils';
 4  import React from 'react';
 5  
 6  import { ActionFields, TransactionHistoryItem } from '../types';
 7  
 8  export const BorrowRateModeBlock = ({
 9    swapBorrowRateTx,
10    borrowRateMode,
11  }: {
12    swapBorrowRateTx: TransactionHistoryItem<ActionFields['SwapBorrowRate']>;
13    borrowRateMode: string;
14  }) => {
15    if (borrowRateMode === 'Variable' || borrowRateMode === '2') {
16      return (
17        <>
18          <Typography variant="description" color="text.primary" pr={0.5}>
19            <Trans>Variable</Trans>
20          </Typography>
21          <Typography variant="secondary14" color="text.primary" pr={0.5}>
22            {Number(formatUnits(swapBorrowRateTx.variableBorrowRate, 25)).toFixed(2)}%
23          </Typography>
24          <Typography variant="description" color="text.primary">
25            <Trans>APY</Trans>
26          </Typography>
27        </>
28      );
29    } else {
30      return (
31        <>
32          <Typography variant="description" color="text.primary" pr={0.5}>
33            <Trans>Stable</Trans>
34          </Typography>
35          <Typography variant="secondary14" color="text.primary" pr={0.5}>
36            {Number(formatUnits(swapBorrowRateTx.stableBorrowRate, 25)).toFixed(2)}%
37          </Typography>
38          <Typography variant="description" color="text.primary">
39            <Trans>APY</Trans>
40          </Typography>
41        </>
42      );
43    }
44  };