1  import { Trans } from '@lingui/macro';
 2  import { Typography, useTheme } from '@mui/material';
 3  import { formatEther } from 'ethers/lib/utils';
 4  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 5  import { TextWithTooltip } from 'src/components/TextWithTooltip';
 6  import { GHO_SYMBOL } from 'src/utils/ghoUtilities';
 7  
 8  import { DetailsNumberLine } from '../FlowCommons/TxModalDetails';
 9  
10  export const BridgeAmount = ({
11    amount,
12    maxAmountToBridgeFormatted,
13    maxAmountReducedDueToBridgeLimit,
14    maxAmountReducedDueToRateLimit,
15    refillRate,
16    maxRateLimitCapacity,
17  }: {
18    amount: string;
19    maxAmountToBridgeFormatted: string;
20    maxAmountReducedDueToBridgeLimit: boolean;
21    maxAmountReducedDueToRateLimit: boolean;
22    refillRate: string;
23    maxRateLimitCapacity: string;
24  }) => {
25    const { palette } = useTheme();
26  
27    const bridgeLimitTooltip = (
28      <Typography variant="caption">
29        Due to bridging limits, the maximum amount currently available to bridge is{' '}
30        <FormattedNumber variant="caption" value={maxAmountToBridgeFormatted} visibleDecimals={2} />
31      </Typography>
32    );
33  
34    const rateLimitTooltip = (
35      <Typography variant="caption">
36        The amount you can bridge is currently reduced because of the rate limit. The limit is raised
37        at a rate of{' '}
38        <FormattedNumber variant="caption" value={formatEther(refillRate)} visibleDecimals={2} /> GHO
39        per second, until the maximum amount of{' '}
40        <FormattedNumber
41          variant="caption"
42          value={formatEther(maxRateLimitCapacity)}
43          visibleDecimals={2}
44        />{' '}
45        is reached.
46      </Typography>
47    );
48  
49    return (
50      <DetailsNumberLine
51        description={
52          amount !== '' && (maxAmountReducedDueToBridgeLimit || maxAmountReducedDueToRateLimit) ? (
53            <TextWithTooltip
54              text={
55                <Typography color={palette.warning.main}>
56                  <Trans>Amount</Trans>
57                </Typography>
58              }
59              iconColor="warning.main"
60            >
61              <>
62                {maxAmountReducedDueToBridgeLimit && bridgeLimitTooltip}
63                {maxAmountReducedDueToRateLimit && rateLimitTooltip}
64              </>
65            </TextWithTooltip>
66          ) : (
67            <Trans>Amount</Trans>
68          )
69        }
70        iconSymbol={GHO_SYMBOL}
71        symbol={GHO_SYMBOL}
72        value={amount}
73      />
74    );
75  };