Develop to main

.env.example

@@ -1,5 +1,5 @@
 # for supporting of domain agnostic
-SELF_ORIGIN=https://vaults.lido.fi
+SELF_ORIGIN=https://stvaults.lido.fi
 ROOT_ORIGIN=https://lido.fi
 DOCS_ORIGIN=https://docs.lido.fi
 HELP_ORIGIN=https://help.lido.fi

consts/matomo-wallets-events.ts

@@ -1,6 +1,6 @@
 import { trackEvent } from '@lidofinance/analytics-matomo';
 import type { ReefKnotWalletsModalConfig } from '@reef-knot/types';
-import type { WalletIdsEthereum } from '@reef-knot/wallets-list';
+import type { WalletIdsEthereum } from 'reef-knot/wallets';
 import { MATOMO_CLICK_EVENTS } from './matomo-click-events';
 
 type MetricProps = Pick<

consts/routing.ts

@@ -5,15 +5,15 @@ export const appPaths = {
   vaults: {
     all: '/vaults',
     create: '/vaults/create',
-    vault: (vaultAddress: Address) =>
+    vault: (vaultAddress: Address | '[vaultAddress]') =>
       ({
         overview: `/vaults/${vaultAddress}`,
-        eth: (mode: 'supply' | 'withdraw') =>
+        eth: (mode: '[mode]' | 'supply' | 'withdraw') =>
           `/vaults/${vaultAddress}/eth/${mode}` as const,
-        steth: (mode: 'mint' | 'repay') =>
+        steth: (mode: '[mode]' | 'mint' | 'repay') =>
           `/vaults/${vaultAddress}/steth/${mode}` as const,
         claim: `/vaults/${vaultAddress}/claim`,
-        settings: (mode: 'main' | 'permissions' | 'tier') =>
+        settings: (mode: '[mode]' | 'main' | 'permissions' | 'tier') =>
           `/vaults/${vaultAddress}/settings/${mode}`,
         validators: `/vaults/${vaultAddress}/validators`,
       }) as const,

features/adjustment/repay/form/repay-form-context/use-repay.ts

@@ -57,11 +57,15 @@ export const useRepay = () => {
             to: activeVault.dashboard.address,
           });
 
-          const needsAllowance = allowance < amount;
+          const txAmountAllowance = isSteth
+            ? await shares.convertToSteth(txAmount)
+            : amount;
+
+          const needsAllowance = allowance < txAmountAllowance;
           if (needsAllowance) {
             const approveCall = {
               ...(await tokenContract.populateApprove({
-                amount: amount,
+                amount: txAmountAllowance,
                 to: activeVault.dashboard.address,
               })),
               loadingActionText: vaultTexts.actions.approve.loading(token),

features/create-vault/create-vault-form/stages/confirmation/confirmation-entry/confirm-percent.tsx

@@ -1,17 +1,20 @@
 import { FC } from 'react';
+import invariant from 'tiny-invariant';
+
+import { isNumber } from 'utils';
 
 import { TextBold } from './styles';
 
-import { ConfirmDataItemProps } from './types';
-import invariant from 'tiny-invariant';
+import type { ConfirmDataItemProps } from './types';
 
 export const ConfirmPercent: FC<ConfirmDataItemProps> = ({
   payload,
   dataTestId,
 }) => {
   if (!payload) return null;
+
   invariant(
-    typeof payload === 'number' || typeof payload === 'string',
+    isNumber(payload) || typeof payload === 'string',
     'Payload must be a string | number',
   );
   return (

features/create-vault/create-vault-form/stages/confirmation/confirmation-entry/confirm-time.tsx

@@ -1,16 +1,18 @@
 import { FC } from 'react';
+import invariant from 'tiny-invariant';
+
+import { isNumber } from 'utils';
 
 import { TextBold } from './styles';
 
-import { ConfirmDataItemProps } from './types';
-import invariant from 'tiny-invariant';
+import type { ConfirmDataItemProps } from './types';
 
 export const ConfirmTime: FC<ConfirmDataItemProps> = ({
   payload,
   dataTestId,
 }) => {
   invariant(
-    typeof payload === 'number' || typeof payload === 'string',
+    isNumber(payload) || typeof payload === 'string',
     'Payload must be a string | number',
   );
   return (

features/create-vault/create-vault-form/use-create-vault.ts

@@ -4,7 +4,7 @@ import { useEstimateGas } from 'wagmi';
 import { useFormContext, useFormState } from 'react-hook-form';
 
 import {
-  TransactionEntry,
+  type TransactionEntry,
   useSendTransaction,
   withSuccess,
   useDappStatus,

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

@@ -62,7 +62,7 @@ const tableHeaders = [
   },
   {
     title: 'Net Staking APR',
-    sortKey: 'netStakingAprPercent',
+    sortKey: 'netStakingAprSma',
   },
   {
     title: 'Carry Spread',
@@ -81,7 +81,7 @@ const PLACEHOLDER_VAULT: VaultEntry = {
   liabilityStETH: 0n,
   healthFactor: 0,
   carrySpreadAprPercent: 0,
-  netStakingAprPercent: 0,
+  netStakingAprSma: 0,
   bottomLine: 0n,
 };
 
@@ -121,7 +121,7 @@ const VaultTableRowContent = ({ vault, dataTestId }: VaultTableRowProps) => {
         align="right"
         data-testid={dataTestId ? `${dataTestId}-netStakingAprCell` : undefined}
       >
-        <PercentCell value={vault.netStakingAprPercent} />
+        <PercentCell value={vault.netStakingAprSma} />
       </TableCell>
       <TableCell
         align="right"

features/overview/content/connect-vault/components/request-tier/request-tier.tsx

@@ -21,13 +21,22 @@ export const RequestTier = () => {
     }
 
     return [
-      { label: 'Reserve ratio', value: metrics.reserveRatioBPValue },
+      {
+        label: 'Reserve ratio',
+        value: metrics.reserveRatioBP.newValue,
+      },
       {
         label: 'Forced rebalance threshold',
-        value: metrics.forcedRebalanceThresholdBPValue,
+        value: metrics.forcedRebalanceThresholdBP.newValue,
+      },
+      {
+        label: 'Lido infrastructure fee',
+        value: metrics.infraFeeBP.newValue,
+      },
+      {
+        label: 'Lido liquidity fee',
+        value: metrics.liquidityFeeBP.newValue,
       },
-      { label: 'Lido infrastructure fee', value: metrics.infraFeeBPValue },
-      { label: 'Lido liquidity fee', value: metrics.liquidityFeeBPValue },
     ];
   }, [metrics]);
 

features/overview/content/modals/lido-fee-modal/lido-fee-modal.tsx

@@ -33,6 +33,16 @@ const formulasMap: Record<
       type: 'variable',
       hasHighlight: true,
     },
+    {
+      label: '×',
+      type: 'operation',
+      hasHighlight: false,
+    },
+    {
+      label: 'Lido Core APR',
+      type: 'variable',
+      hasHighlight: true,
+    },
   ],
   liquidityFee: [
     {

features/overview/content/modals/net-apr-modal/net-apr-modal.tsx

@@ -98,7 +98,7 @@ export const NetAprModal = () => {
     netStakingRewards,
     grossStakingRewards,
     nodeOperatorRewards,
-    unsettledLidoFees,
+    vaultMetrics,
   } = values || {};
 
   return (
@@ -142,7 +142,7 @@ export const NetAprModal = () => {
       <SectionDivider />
       <ModalSection
         title={netApr.lidoFees.title}
-        amountValue={unsettledLidoFees}
+        amountValue={vaultMetrics?.dailyLidoFees}
         amountType="token"
         amountSymbol="ETH"
         description={netApr.lidoFees.description}

features/overview/hooks/use-tier-request.ts

@@ -36,13 +36,13 @@ export const useTierRequest = () => {
 
     return {
       metrics: calculateTierMetrics({
-        newTier: proposedTier,
+        tier: proposedTier,
         vault: vaultTierInfo.vault,
         newVaultMintingLimit: proposedVaultLimitStETH,
       }),
       proposedTier,
       proposedVaultLimitStETH,
-      proposedVaultLimitShares: proposals.proposedVaultLimit,
+      proposedVaultLimitShares: proposals.proposedVaultLimitShares,
     };
   }, [vaultTierInfo, noTiersInfo]);
 };

features/settings/tier/components/alter-tier-info/alter-tier-info.tsx

@@ -0,0 +1,89 @@
+import { useState, useCallback } from 'react';
+import { Text } from '@lidofinance/lido-ui';
+
+import {
+  useVaultConfirmingRoles,
+  useVaultPermission,
+  useVaultTierInfo,
+} from 'modules/vaults';
+import { ReactComponent as WarningTriangle } from 'assets/icons/warning-triangle.svg';
+import { isNumber } from 'utils';
+
+import { useAlterTier } from 'features/settings/tier/hooks';
+import {
+  AlterTierChanges,
+  AlterTierModal,
+} from 'features/settings/tier/shared';
+
+import {
+  InfoContainer,
+  TitleContainer,
+  Wrapper,
+  TextStyled,
+  ModalButton,
+  ListOfUpdates,
+} from './styles';
+
+export const AlterTierInfo = () => {
+  const [showModal, setModalVisibility] = useState(false);
+  const { data: vaultTierInfo, isLoading } = useVaultTierInfo();
+  const { data } = useAlterTier();
+  const { hasChanges, alterTierList, id, tierName } = data ?? {};
+  const { hasAdmin, isNodeOperator } = useVaultConfirmingRoles();
+  const { hasPermission } = useVaultPermission('vaultConfiguration');
+
+  const closeModal = useCallback(() => setModalVisibility(false), []);
+  const openModal = useCallback(() => setModalVisibility(true), []);
+  const extendLastProposal = vaultTierInfo?.proposals.extendLastProposal;
+  if (
+    isLoading ||
+    !hasChanges ||
+    !(hasAdmin || isNodeOperator || hasPermission) ||
+    !isNumber(id) ||
+    (extendLastProposal?.tierId === BigInt(id) &&
+      extendLastProposal.functionName === 'syncTier')
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      <Wrapper data-testid="syncTier-banner">
+        <InfoContainer>
+          <TitleContainer>
+            <WarningTriangle color="#EC8600" />
+            <Text size="xs" strong data-testid="syncTier-banner-title">
+              {tierName} update available
+            </Text>
+          </TitleContainer>
+          <ListOfUpdates data-testid="syncTier-banner-listOfUpdates">
+            {!!alterTierList && (
+              <AlterTierChanges
+                alterTierList={alterTierList}
+                dataTestId="syncTier-banner"
+              />
+            )}
+            <TextStyled
+              size="xxs"
+              data-testid="syncTier-banner-applyChanges-text"
+            >
+              Apply the new settings to take effect.
+            </TextStyled>
+          </ListOfUpdates>
+        </InfoContainer>
+        <div>
+          <ModalButton
+            size="xs"
+            variant="outlined"
+            color="secondary"
+            onClick={openModal}
+            data-testid="syncTier-banner-reviewSubmitButton"
+          >
+            Review
+          </ModalButton>
+        </div>
+      </Wrapper>
+      <AlterTierModal isOpen={showModal} closeModal={closeModal} />
+    </>
+  );
+};

features/settings/tier/components/alter-tier-info/index.ts

@@ -0,0 +1 @@
+export { AlterTierInfo } from './alter-tier-info';

features/settings/tier/components/alter-tier-info/styles.ts

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { Text, Button } from '@lidofinance/lido-ui';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spaceMap.lg}px;
+  padding: ${({ theme }) => theme.spaceMap.md}px;
+  border-radius: 12px;
+  background-color: color-mix(
+    in display-p3,
+    ${({ theme }) => theme.colors.warning} 20%,
+    transparent
+  );
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spaceMap.xs}px;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spaceMap.sm}px;
+  flex-grow: 1;
+`;
+
+export const ListOfUpdates = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TextStyled = styled(Text)`
+  line-height: 20px;
+`;
+
+export const ModalButton = styled(Button)`
+  background-color: ${({ theme }) => theme.colors.foreground};
+`;

features/settings/tier/components/index.ts

@@ -1,2 +1,3 @@
-export * from './request-change-limit';
+export * from './voting-request';
 export * from './tier-info';
+export * from './alter-tier-info';

features/settings/tier/components/tier-info/tier-info.tsx

@@ -4,6 +4,7 @@ import {
   ContentWrapper,
   SectionContainer,
 } from 'features/settings/shared/components';
+import { AlterTierInfo } from 'features/settings/tier/components/alter-tier-info';
 import {
   ChooseTier,
   Title,
@@ -19,6 +20,7 @@ export const TierInfo = () => {
         <Title data-testid="title" as="h2">
           {vaultTexts.actions.tier.settingsTitle}
         </Title>
+        <AlterTierInfo />
         <ChooseTier />
         <MintingLimit />
         <VaultMetrics />

features/settings/tier/components/voting-request/index.ts

@@ -0,0 +1 @@
+export { VotingRequest } from './voting-request';