Merge pull request #29 from lidofinance/feature/si-1880-new-main-screen

ev-d · web-flow · commit d85ed3ed817a · 2025-04-24T13:30:59.000+03:00
New main screen
diff --git a/features/home/all-vaults/all-vaults.tsx b/features/home/all-vaults/all-vaults.tsx
@@ -1,5 +1,5 @@
 import { Loader, Pagination } from '@lidofinance/lido-ui';
-import { VaultTable } from 'features/home/vault-table';
+import { VaultTable } from 'features/home/components/vault-table';
 import { AllVaultsWrapper } from './styles';
 import { useVaultsDataAll } from 'modules/vaults';
 
diff --git a/features/home/all-vaults/styles.ts b/features/home/all-vaults/styles.ts
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 export const AllVaultsWrapper = styled.div`
   display: flex;
   align-items: center;
+  justify-content: center;
   flex-direction: column;
+  width: 100%;
   gap: ${({ theme }) => theme.spaceMap.md}px;
 `;
diff --git a/features/home/components/index.ts b/features/home/components/index.ts
diff --git a/features/home/components/vault-table/cells/address-cell.tsx b/features/home/components/vault-table/cells/address-cell.tsx
@@ -6,7 +6,7 @@ import { useEnsName } from 'wagmi';
 import { AddressBadge } from 'shared/components/address-badge';
 import { AddressWrapper } from './styles';
 
-import { BaseCellProps } from 'features/home/vault-table/types';
+import { BaseCellProps } from 'features/home/components/vault-table/types';
 import { AppPaths } from 'consts/urls';
 
 export const AddressCell: FC<BaseCellProps<Address>> = ({ value }) => {
diff --git a/features/home/components/vault-table/cells/default-cell.tsx b/features/home/components/vault-table/cells/default-cell.tsx
diff --git a/features/home/components/vault-table/cells/ether-cell.tsx b/features/home/components/vault-table/cells/ether-cell.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
 import { formatBalance } from 'utils';
-import { BaseCellProps } from 'features/home/vault-table/types';
+import { BaseCellProps } from 'features/home/components/vault-table/types';
 
 export const EtherCell: FC<BaseCellProps<bigint>> = ({ value }) => {
   return <>{formatBalance(value, { maxDecimalDigits: 5 }).trimmed}</>;
diff --git a/features/home/components/vault-table/cells/header-cell.tsx b/features/home/components/vault-table/cells/header-cell.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
 import { Question } from '@lidofinance/lido-ui';
-import { CommonHeader } from 'features/home/vault-table/styles';
+import { CommonHeader } from 'features/home/components/vault-table/styles';
 
 export interface HeaderCellProps {
   title: string;
diff --git a/features/home/components/vault-table/cells/index.ts b/features/home/components/vault-table/cells/index.ts
diff --git a/features/home/components/vault-table/cells/mint-cell.tsx b/features/home/components/vault-table/cells/mint-cell.tsx
@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { formatEther } from 'viem';
+
+import { BaseCellProps } from '../types';
+
+export const MintCell: FC<BaseCellProps<bigint>> = ({ value }) => {
+  if (value == null) {
+    return null;
+  }
+
+  const minted = Number(formatEther(BigInt(value))).toFixed(5);
+
+  return <>{minted}</>;
+};
diff --git a/features/home/components/vault-table/cells/percent-cell.tsx b/features/home/components/vault-table/cells/percent-cell.tsx
diff --git a/features/home/components/vault-table/cells/styles.ts b/features/home/components/vault-table/cells/styles.ts
diff --git a/features/home/components/vault-table/hooks/index.ts b/features/home/components/vault-table/hooks/index.ts
diff --git a/features/home/components/vault-table/hooks/use-table-sort.ts b/features/home/components/vault-table/hooks/use-table-sort.ts
@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 
-import { SortConfig } from 'features/home/vault-table/types';
+import { SortConfig } from 'features/home/components/vault-table/types';
 import { VaultInfo } from 'types';
 
 export const useTableSort = (
diff --git a/features/home/components/vault-table/index.ts b/features/home/components/vault-table/index.ts
@@ -0,0 +1 @@
+export * from './vault-table';
diff --git a/features/home/components/vault-table/sort-header.tsx b/features/home/components/vault-table/sort-header.tsx
diff --git a/features/home/components/vault-table/styles.ts b/features/home/components/vault-table/styles.ts
diff --git a/features/home/components/vault-table/table-cell.tsx b/features/home/components/vault-table/table-cell.tsx
@@ -1,6 +1,6 @@
-import { TableCellStyled } from 'features/home/vault-table/styles';
+import { TableCellStyled } from 'features/home/components/vault-table/styles';
 
-import { TableCellProps } from 'features/home/vault-table/types';
+import { TableCellProps } from 'features/home/components/vault-table/types';
 
 export const TableCell = (props: TableCellProps) => {
   const { children, ...rest } = props;
diff --git a/features/home/components/vault-table/types.ts b/features/home/components/vault-table/types.ts
diff --git a/features/home/components/vault-table/vault-table.tsx b/features/home/components/vault-table/vault-table.tsx
@@ -1,15 +1,15 @@
 import { FC } from 'react';
 
 import { Tbody } from '@lidofinance/lido-ui';
-import { TableCell } from 'features/home/vault-table/table-cell';
+import { TableCell } from 'features/home/components/vault-table/table-cell';
 import {
   DefaultCell,
   EtherCell,
   AddressCell,
   PercentCell,
   MintCell,
   HeaderCell,
-} from 'features/home/vault-table/cells';
+} from 'features/home/components/vault-table/cells';
 import {
   TableTitle,
   TableStyled,
@@ -36,11 +36,15 @@ const tableHeaders = [
     showQuestion: true,
   },
   {
-    title: 'stETH Minted/ Mintable',
+    title: 'stETH Minted',
     showQuestion: true,
   },
   {
-    title: 'APR',
+    title: 'Net Staking APR',
+    showQuestion: true,
+  },
+  {
+    title: 'stVault APY',
     showQuestion: true,
   },
   {
@@ -82,7 +86,10 @@ export const VaultTable: FC<VaultTableProps> = (props) => {
                     <EtherCell value={vault.valuation} />
                   </TableCell>
                   <TableCell>
-                    <MintCell value={vault} />
+                    <MintCell value={vault.minted} />
+                  </TableCell>
+                  <TableCell>
+                    <DefaultCell value="?" />
                   </TableCell>
                   <TableCell>
                     <DefaultCell value="?" />
diff --git a/features/home/home-content/home-content.tsx b/features/home/home-content/home-content.tsx
@@ -0,0 +1,14 @@
+import { useRouter } from 'next/router';
+import { MyVaults } from 'features/home/my-vaults';
+import { AllVaults } from 'features/home/all-vaults';
+
+export const HomeContent = () => {
+  const router = useRouter();
+  const {
+    query: { mode },
+  } = router;
+
+  const showPersonal = mode === 'personal';
+
+  return <>{showPersonal ? <MyVaults /> : <AllVaults />}</>;
+};
diff --git a/features/home/home-content/index.ts b/features/home/home-content/index.ts
@@ -0,0 +1 @@
+export { HomeContent } from './home-content';
diff --git a/features/home/home-page.tsx b/features/home/home-page.tsx
@@ -2,8 +2,7 @@ import type { FC } from 'react';
 import Head from 'next/head';
 
 import { Layout } from 'shared/components';
-import { MyVaults } from 'features/home/my-vaults';
-import { AllVaults } from 'features/home/all-vaults';
+import { HomeContent } from 'features/home/home-content';
 
 import { PageWrapper } from './styles';
 
@@ -14,8 +13,7 @@ export const HomePage: FC = () => {
         <title>Vault | Lido</title>
       </Head>
       <PageWrapper>
-        <MyVaults />
-        <AllVaults />
+        <HomeContent />
       </PageWrapper>
     </Layout>
   );
diff --git a/features/home/my-vaults/auth-content/connected-wallet-content.tsx b/features/home/my-vaults/auth-content/connected-wallet-content.tsx
@@ -1,4 +1,4 @@
-import { VaultTable } from 'features/home/vault-table';
+import { VaultTable } from 'features/home/components/vault-table';
 import { AddVault } from 'features/home/my-vaults/add-vault';
 
 import { useVaultsDataByOwner } from 'modules/vaults/hooks/use-vaults-data-by-owner';
diff --git a/features/home/my-vaults/styles.ts b/features/home/my-vaults/styles.ts
@@ -4,4 +4,5 @@ export const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spaceMap.md}px;
+  width: 100%;
 `;
diff --git a/features/home/styles.ts b/features/home/styles.ts
@@ -4,12 +4,13 @@ import { Button, ButtonIcon, Container } from '@lidofinance/lido-ui';
 
 export const PageWrapper = styled(Container)`
   display: flex;
-  flex-direction: column;
-  gap: 40px;
+  gap: ${({ theme }) => theme.spaceMap.md}px;
+  margin-top: ${({ theme }) => theme.spaceMap.xxl}px;
   padding: 0;
 `;
 
 export const dashboardButton = css`
+  width: 100%;
   padding: 20px 64px;
   box-shadow: none;
 
diff --git a/features/home/types.ts b/features/home/types.ts
@@ -0,0 +1 @@
+export type HomeNavigationMode = 'full' | 'personal';
diff --git a/features/home/vault-table/cells/mint-cell.tsx b/features/home/vault-table/cells/mint-cell.tsx
diff --git a/shared/components/layout/navigation/index.ts b/shared/components/layout/navigation/index.ts
@@ -1 +1,2 @@
 export { Navigation } from './navigation';
+export { ListItem, NavLink, Nav, NavList } from './styles';
diff --git a/shared/components/layout/navigation/navigation.tsx b/shared/components/layout/navigation/navigation.tsx
@@ -9,7 +9,8 @@ import { useConfig } from 'config';
 import { ManifestConfigPage } from 'config/external-config';
 import { useRouterPath } from 'shared/hooks/use-router-path';
 
-import { LocalLink } from 'shared/components/local-link';
+import Link from 'next/link';
+
 import { SelectedVault } from 'shared/components/layout/navigation/selected-vault';
 import {
   ListItem,
@@ -68,6 +69,21 @@ const routes: PageRoute[] = [
   },
 ];
 
+const homeRoutes: PageRoute[] = [
+  {
+    name: 'My vaults',
+    path: `${AppPaths.main}?mode=personal`,
+    icon: <MosaicIcon />,
+    exact: true,
+  },
+  {
+    name: 'All Vaults',
+    path: AppPaths.main,
+    icon: <Stake />,
+    exact: true,
+  },
+];
+
 // TODO: find more clearable way to map routes
 const saturatePathsByAddress = (
   routes: PageRoute[],
@@ -86,14 +102,16 @@ export const Navigation: FC = memo(() => {
   const { vaultAddress } = router.query as {
     vaultAddress: Address | undefined;
   };
-  const showNavigation = pathname !== AppPaths.main;
+
+  const isMainPage = router.pathname === AppPaths.main;
   const showNavList = !pathname.includes(AppPaths.createVault);
 
   const {
     externalConfig: { pages },
   } = useConfig();
 
   const availableRoutes = useMemo(() => {
+    if (isMainPage) return homeRoutes;
     if (!pages) return saturatePathsByAddress(routes, vaultAddress);
 
     const paths = Object.keys(pages) as ManifestConfigPage[];
@@ -104,42 +122,63 @@ export const Navigation: FC = memo(() => {
     });
 
     return saturatePathsByAddress(filteredRoutes, vaultAddress);
-  }, [pages, vaultAddress]);
+  }, [pages, vaultAddress, isMainPage]);
 
   let pathnameWithoutQuery = pathname.split('?')[0];
   if (pathnameWithoutQuery.endsWith('/')) {
     // Remove last '/'
     pathnameWithoutQuery = pathnameWithoutQuery.slice(0, -1);
   }
 
+  const checkIsActivePath = (path: string, subPaths: string[] | undefined) => {
+    if (isMainPage) {
+      const queryString = path.split('?')[1] || '';
+      const queryParams = new URLSearchParams(queryString);
+      const routeMode = queryParams.get('mode');
+
+      const currentMode = Array.isArray(router.query.mode)
+        ? router.query.mode[0]
+        : router.query.mode || '';
+
+      if (!routeMode && !currentMode) {
+        return true;
+      }
+
+      return currentMode === routeMode;
+    }
+
+    return (
+      pathnameWithoutQuery === getPathWithoutFirstSlash(path) ||
+      (path.length > 1 && pathnameWithoutQuery.startsWith(path)) ||
+      (Array.isArray(subPaths) && subPaths.indexOf(pathnameWithoutQuery) > -1)
+    );
+  };
+
   return (
-    <Nav showNavigation={showNavigation}>
-      <AllVaults href={AppPaths.main}>
-        <ArrowBackStyled />
-        &nbsp;
-        <Text size="xxs" strong>
-          All vaults
-        </Text>
-      </AllVaults>
+    <Nav>
+      {!isMainPage && (
+        <AllVaults href={AppPaths.main}>
+          <ArrowBackStyled />
+          &nbsp;
+          <Text size="xxs" strong>
+            All vaults
+          </Text>
+        </AllVaults>
+      )}
       {showNavList && (
         <>
           <SelectedVault />
           <NavList>
             {availableRoutes.map(({ name, path, subPaths, icon }) => {
-              const isActive =
-                pathnameWithoutQuery === getPathWithoutFirstSlash(path) ||
-                (path.length > 1 && pathnameWithoutQuery.startsWith(path)) ||
-                (Array.isArray(subPaths) &&
-                  subPaths?.indexOf(pathnameWithoutQuery) > -1);
-
+              const isActive = checkIsActivePath(path, subPaths);
               return (
                 <ListItem key={path}>
-                  <LocalLink href={path}>
+                  <Link href={path}>
                     <NavLink active={isActive}>
                       {icon}
                       <span>{name}</span>
                     </NavLink>
-                  </LocalLink>
+                  </Link>
                 </ListItem>
               );
             })}
diff --git a/shared/components/layout/navigation/styles.ts b/shared/components/layout/navigation/styles.ts
@@ -3,11 +3,11 @@ import Link from 'next/link';
 import { ArrowBack } from '@lidofinance/lido-ui';
 import { devicesHeaderMedia } from 'styles/global';
 
-export const Nav = styled.nav<{ showNavigation: boolean }>`
+export const Nav = styled.nav`
   --nav-size: 154px;
   grid-area: nav;
   z-index: 6;
-  display: ${({ showNavigation }) => (showNavigation ? 'flex' : 'none')};
+  display: flex;
   flex-direction: column;
   overflow: auto;
   overflow-x: hidden;
diff --git a/shared/components/local-link/index.tsx b/shared/components/local-link/index.tsx
@@ -8,7 +8,7 @@ import { LinkIpfs } from 'shared/components/link-ipfs';
 export const LocalLink: FC<PropsWithChildren<LinkProps>> = (props) => {
   const router = useRouter();
   const { ref, embed, app, theme } = router.query;
-  const { href, ...restProps } = props;
+  const { href, children, ...restProps } = props;
 
   const extraQuery = {} as Record<string, string>;
   // Not support case: ?ref=01234&ref=56789
@@ -27,7 +27,9 @@ export const LocalLink: FC<PropsWithChildren<LinkProps>> = (props) => {
         {...restProps}
         legacyBehavior={false}
         href={{ pathname: href, query: extraQuery }}
-      />
+      >
+        {children}
+      </Link>
     );
   }
 
