Skip to content

Commit e1e278a

Browse files
JedayJeday
authored
Merge pull request #74 from lidofinance/feature/si-1894-table-separate-vault-list-vault-info-queries
Vaults table rework
2 parents 50fbffd + 349e93c commit e1e278a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+917
-893
lines changed

‎features/create-vault/create-vault-form/stages/confirmation/confirmation-entry/confirmation-entry.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from 'react';
22
import { useFormContext } from 'react-hook-form';
33

4-
import { Hint } from 'features/create-vault/shared/hint';
4+
import { Hint } from 'shared/components';
55

66
import { ConfirmAddress, ConfirmAddressArray } from './confirm-address';
77
import { ConfirmNumber } from './confirm-number';

‎features/create-vault/create-vault-form/stages/main-settings/create-vault-input/create-vault-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { FC } from 'react';
2-
import { Hint } from 'features/create-vault/shared/hint';
2+
import { Hint } from 'shared/components';
33

44
import { GeneralInput, GeneralInputProps } from './general-input';
55
import { AddressInput } from './address-input';

‎features/create-vault/create-vault-form/stages/main-settings/create-vault-input/styles.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { ButtonIcon, Checkbox, Question } from '@lidofinance/lido-ui';
2+
import { ButtonIcon, Checkbox } from '@lidofinance/lido-ui';
33

44
/// CreateVaultInput
55

@@ -18,13 +18,6 @@ export const InputTitle = styled.p`
1818
display: inline-flex;
1919
`;
2020

21-
export const QuestionIcon = styled(Question)`
22-
width: 20px;
23-
height: 20px;
24-
fill: ${({ theme }) => theme.colors.textSecondary};
25-
align-self: center;
26-
`;
27-
2821
export const InputNotes = styled.p`
2922
font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
3023
font-weight: 400;

‎features/create-vault/shared/hint.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎features/home/all-vaults/all-vaults-page.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Head from 'next/head';
2+
3+
import { Layout } from 'shared/components';
4+
5+
import { AllVaults } from './all-vaults';
6+
import { PageWrapper } from '../styles';
7+
8+
export const AllVaultsPage = () => {
9+
return (
10+
<Layout containerSize="content">
11+
<Head>
12+
<title>Vault | Lido</title>
13+
</Head>
14+
<PageWrapper>
15+
<AllVaults />
16+
</PageWrapper>
17+
</Layout>
18+
);
19+
};

‎features/home/all-vaults/all-vaults.tsx‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,29 @@
1-
import { Loader, Pagination } from '@lidofinance/lido-ui';
2-
import { VaultTable } from 'features/home/components/vault-table';
3-
import { AllVaultsWrapper } from './styles';
4-
import { useVaultsDataAll, VAULTS_PER_PAGE } from 'modules/vaults';
5-
import { useConnectedVaultsNumber } from 'features/home/hooks';
1+
import { VaultTable } from 'features/home/vault-table';
2+
import { useConnectedVaultsList } from './use-connected-vaults-list';
63

74
export const AllVaults = () => {
85
const {
96
vaults,
10-
isLoading: isLoadingAllVaults,
11-
handlePagination,
7+
isLoading,
128
page,
13-
vaultsCount,
14-
} = useVaultsDataAll();
15-
const { data } = useConnectedVaultsNumber();
16-
const pagesCount = Math.ceil(Number(data ?? 0) / VAULTS_PER_PAGE);
17-
const showPagination = !!vaults && vaults?.length > 0 && pagesCount > 1;
9+
pagesCount,
10+
setPage,
11+
refetch,
12+
isError,
13+
totalVaultsCount,
14+
} = useConnectedVaultsList();
1815

1916
return (
20-
<AllVaultsWrapper>
21-
<VaultTable
22-
title="All Vaults"
23-
vaults={vaults}
24-
showTitle={!isLoadingAllVaults}
25-
vaultsCount={vaultsCount}
26-
/>
27-
{isLoadingAllVaults && <Loader color="primary" size="large" />}
28-
{showPagination && !isLoadingAllVaults && (
29-
<Pagination
30-
onItemClick={handlePagination}
31-
pagesCount={pagesCount}
32-
siblingCount={1}
33-
activePage={page}
34-
/>
35-
)}
36-
</AllVaultsWrapper>
17+
<VaultTable
18+
title="All Vaults"
19+
vaults={vaults}
20+
vaultsCount={totalVaultsCount}
21+
isError={isError}
22+
isLoading={isLoading}
23+
refetch={refetch}
24+
page={page}
25+
pagesCount={pagesCount}
26+
setPage={setPage}
27+
/>
3728
);
3829
};

‎features/home/all-vaults/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from './all-vaults';
1+
export { AllVaultsPage } from './all-vaults-page';

‎features/home/all-vaults/styles.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎features/home/all-vaults/use-connected-vaults-list.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useState } from 'react';
2+
import { useQuery, keepPreviousData } from '@tanstack/react-query';
3+
4+
import { useLidoSDK } from 'modules/web3';
5+
import {
6+
VAULTS_PER_PAGE,
7+
getVaultViewerContract,
8+
getVaultDataTable,
9+
} from 'modules/vaults';
10+
import { STRATEGY_LAZY } from 'consts/react-query-strategies';
11+
12+
export const useConnectedVaultsList = () => {
13+
const { shares, core } = useLidoSDK();
14+
const [page, setPage] = useState(1);
15+
const publicClient = core.rpcProvider;
16+
17+
const query = useQuery({
18+
queryKey: ['vaults-connected', publicClient?.chain?.id, page],
19+
placeholderData: keepPreviousData,
20+
queryFn: async () => {
21+
const vaultViewer = getVaultViewerContract(publicClient);
22+
const fromCursor = BigInt(VAULTS_PER_PAGE * (page - 1));
23+
const toCursor = BigInt(page * VAULTS_PER_PAGE);
24+
const [vaultAddress, leftOver] =
25+
await vaultViewer.read.vaultsConnectedBound([fromCursor, toCursor]);
26+
const vaults = await Promise.all(
27+
vaultAddress.map((vaultAddress) =>
28+
getVaultDataTable({
29+
publicClient,
30+
vaultAddress,
31+
shares,
32+
}),
33+
),
34+
);
35+
const totalVaultsCount =
36+
Number(fromCursor) + vaultAddress.length + Number(leftOver);
37+
const pagesCount = Math.ceil(totalVaultsCount / VAULTS_PER_PAGE);
38+
39+
return { vaults, totalVaultsCount, pagesCount };
40+
},
41+
...STRATEGY_LAZY,
42+
});
43+
44+
return {
45+
...query,
46+
isLoading: query.isPending || query.isPlaceholderData,
47+
page,
48+
setPage,
49+
vaults: query.data?.vaults,
50+
pagesCount: query.data?.pagesCount,
51+
totalVaultsCount: query.data?.totalVaultsCount,
52+
};
53+
};

‎features/home/components/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)