Skip to content

Commit acf780a

Browse files
ev-dev-d
committed
Merge branch 'develop' into feature/settings-main-form-tx-simulation
2 parents 5b6605f + 0253593 commit acf780a

27 files changed

Lines changed: 278 additions & 78 deletions

File tree

‎consts/threshold.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
export const VAULT_GREEN_HEATH_PERCENT = 100;
2-
export const VAULT_YELLOW_HEATH_PERCENT = 91;
3-
export const VAULT_RED_HEATH_PERCENT = 90;
1+
export const VAULT_HEALTH_PERCENT_GREEN = 125;
2+
export const VAULT_HEALTH_PERCENT_YELLOW = 105;
3+
export const VAULT_HEALTH_PERCENT_RED = 100;
4+
5+
export const VAULT_UTILIZATION_RATIO_GREEN = 90;
6+
export const VAULT_UTILIZATION_RATIO_RED = 100;

‎features/adjustment/repay/form/balance/balance.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import { Loader } from '@lidofinance/lido-ui';
33
import { formatBalance } from 'utils';
44
import { useFormContext } from 'react-hook-form';
55
import { useRepayFormData } from 'features/adjustment/repay/repay-form-context';
6+
import { useVaultInfo } from 'features/overview/contexts';
7+
import { bigIntMin } from 'utils/bigint-math';
68

79
export const Balance = () => {
810
const { watch } = useFormContext();
11+
const { isLoadingVault, error: vaultError, activeVault } = useVaultInfo();
912
const {
1013
stEthBalance,
1114
wstEthBalance,
@@ -15,22 +18,33 @@ export const Balance = () => {
1518
isWstEthError,
1619
} = useRepayFormData();
1720
const token = watch('token');
18-
const isLoading = isStEthLoading || isWstEthLoading;
19-
const isError = isStEthError || isWstEthError;
20-
const balance = token === 'stETH' ? stEthBalance : wstEthBalance;
21+
const isSteth = token === 'stETH';
22+
23+
const isError = (isSteth ? isStEthError : isWstEthError) || !!vaultError;
24+
25+
const isLoading =
26+
(isSteth ? isStEthLoading : isWstEthLoading) || isLoadingVault;
27+
28+
const balance = isSteth ? stEthBalance : wstEthBalance;
29+
30+
const liability = isSteth
31+
? activeVault?.liabilityStETH
32+
: activeVault?.liabilityShares;
33+
34+
const availableToRepay = bigIntMin(liability ?? 0n, balance ?? 0n);
2135

2236
return (
2337
<Wrapper>
2438
<InfoRow>
2539
<span>Available to repay</span>
2640
{isLoading && <Loader size="small" />}
27-
{!isLoading && !isError && balance !== undefined && (
41+
{!isLoading && !isError && (
2842
<AmountInfo>
29-
{formatBalance(balance).trimmed} {token}
43+
{formatBalance(availableToRepay).trimmed} {token}
3044
</AmountInfo>
3145
)}
3246
{isError && !isLoading && (
33-
<AmountInfo>stEth amount is not available</AmountInfo>
47+
<AmountInfo>{token} amount is not available</AmountInfo>
3448
)}
3549
</InfoRow>
3650
</Wrapper>

‎features/create-vault/create-vault-form/permissions/address-list/address-item/address-item.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export interface AddressItemProps {
2424
field: PermissionField;
2525
}
2626

27+
// TODO: use shared/components/AddressWithPopover component
2728
export const AddressItem: FC<AddressItemProps> = ({
2829
index,
2930
permission,

‎features/create-vault/create-vault-form/submit-modal/submit-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,11 @@ export const SubmitModal: FC<ModalProps> = () => {
105105
tx && <TxLinkEtherscan txHash={tx} />}
106106

107107
{step === SubmitStepEnum.reject && (
108-
<ButtonLink onClick={retryFire}>retry</ButtonLink>
108+
<ButtonLink onClick={retryFire}>Retry</ButtonLink>
109109
)}
110110

111111
{step === SubmitStepEnum.error && (
112-
<ButtonLink onClick={handleCancelSubmit}>close</ButtonLink>
112+
<ButtonLink onClick={handleCancelSubmit}>Close</ButtonLink>
113113
)}
114114
</Content>
115115
</Modal>

‎features/home/components/vault-table/cells/percent-cell.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ import { Percent } from './styles';
55
import { formatPercent } from 'utils/format-number';
66
import { BaseCellProps } from '../types';
77

8-
export const PercentCell: FC<BaseCellProps<number>> = ({ value }) => {
8+
interface PercentCellProps extends BaseCellProps<number> {
9+
color: string;
10+
}
11+
12+
export const PercentCell: FC<PercentCellProps> = ({ value, color }) => {
913
const percent = formatPercent.format(value / 100);
1014

11-
return <Percent value={value}>{percent}</Percent>;
15+
return <Percent color={color}>{percent}</Percent>;
1216
};

‎features/home/components/vault-table/cells/styles.ts‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
1-
import styled, { DefaultTheme } from 'styled-components';
2-
import {
3-
VAULT_GREEN_HEATH_PERCENT,
4-
VAULT_YELLOW_HEATH_PERCENT,
5-
VAULT_RED_HEATH_PERCENT,
6-
} from 'consts/threshold';
7-
8-
const getColorByValue = (theme: DefaultTheme, value: number) => {
9-
const percent = value * 100;
10-
if (percent >= VAULT_GREEN_HEATH_PERCENT) return theme.colors.success;
11-
if (percent >= VAULT_YELLOW_HEATH_PERCENT) return theme.colors.warning;
12-
if (percent <= VAULT_RED_HEATH_PERCENT) return theme.colors.error;
13-
return theme.colors.text;
14-
};
1+
import styled from 'styled-components';
152

163
export const Mintable = styled.span`
174
color: ${({ theme }) => theme.colors.textSecondary};
185
`;
196

20-
export const Percent = styled.span<{ value: number }>`
21-
color: ${({ theme, value }) => getColorByValue(theme, value)};
7+
export const Percent = styled.span<{ color: string }>`
8+
color: ${({ color }) => color};
229
font-weight: 700;
2310
`;
2411

‎features/home/components/vault-table/vault-table.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
HeaderCell,
1111
} from 'features/home/components/vault-table/cells';
1212
import { VaultTableInfo } from 'modules/vaults';
13+
import { getHealthFactorColor } from 'utils';
1314

1415
import {
1516
TableTitle,
@@ -77,6 +78,8 @@ export const VaultTable: FC<VaultTableProps> = (props) => {
7778
</TableHead>
7879
<Tbody>
7980
{vaults?.map((vault) => {
81+
const healthColor = getHealthFactorColor(vault.healthScore);
82+
8083
return (
8184
<TableRow key={vault.address}>
8285
<TableCell>
@@ -89,7 +92,10 @@ export const VaultTable: FC<VaultTableProps> = (props) => {
8992
<MintCell value={vault.liabilityStETH} />
9093
</TableCell>
9194
<TableCell>
92-
<PercentCell value={vault.healthScore} />
95+
<PercentCell
96+
value={vault.healthScore}
97+
color={healthColor}
98+
/>
9399
</TableCell>
94100
</TableRow>
95101
);

‎features/overview/components/balance/balance.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ const sectionPayloadList: SectionPayload[] = [
1111
{
1212
title: 'Idle capital',
1313
key: 'balanceEth',
14-
actionText: 'Deposit to validators',
14+
actionText: 'Supply ETH',
1515
actionLink: '/supply/fund',
1616
},
17-
{
18-
title: 'Deposited to validators',
19-
key: 'depositedToValidators',
20-
},
17+
// TODO: add this after the metrics are implemented
18+
// {
19+
// title: 'Deposited to validators',
20+
// key: 'depositedToValidators',
21+
// },
2122
{
2223
title: 'Total locked',
2324
key: 'totalLocked',

‎features/overview/components/capacity/capacity.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { OverviewItem, OverviewSection } from 'features/overview/shared';
22
import { SectionPayload, useVaultOverview } from 'features/overview/contexts';
3+
import { getUtilizationRatioColor } from 'utils';
34

45
const sectionPayloadList: SectionPayload[] = [
56
{
@@ -22,14 +23,22 @@ export const Capacity = () => {
2223

2324
return (
2425
<OverviewSection title="stETH capacity utilization">
25-
{renderData.map((item) => (
26-
<OverviewItem
27-
key={item.title}
28-
title={item.title}
29-
content={item.payload}
30-
isLoading={item.isLoading}
31-
/>
32-
))}
26+
{renderData.map((item) => {
27+
const isUtilizationRatio = item.key === 'utilizationRatio';
28+
const color = isUtilizationRatio
29+
? getUtilizationRatioColor(item.payload)
30+
: undefined;
31+
32+
return (
33+
<OverviewItem
34+
key={item.title}
35+
title={item.title}
36+
content={item.payload}
37+
isLoading={item.isLoading}
38+
color={color}
39+
/>
40+
);
41+
})}
3342
</OverviewSection>
3443
);
3544
};

‎features/overview/components/general/address-section/address-section.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useVaultOverview } from 'features/overview/contexts';
22

3-
import { AddressBadge } from 'shared/components';
3+
import { AddressWithPopover } from 'shared/components';
44
import { Text } from '@lidofinance/lido-ui';
55
import { NodeOperator, Title, Wrapper } from './styles';
66

@@ -11,14 +11,14 @@ export const AddressSection = () => {
1111

1212
return (
1313
<Wrapper>
14-
<AddressBadge size="lg" address={address} />
14+
<AddressWithPopover size="lg" address={address} />
1515
<NodeOperator>
1616
<Title>
1717
<Text color="secondary" size="xxs">
1818
Node operator
1919
</Text>
2020
</Title>
21-
<AddressBadge weight={400} address={nodeOperator} />
21+
<AddressWithPopover weight={400} address={nodeOperator} />
2222
</NodeOperator>
2323
</Wrapper>
2424
);

0 commit comments

Comments
 (0)