Merge pull request #220 from lidofinance/develop

Merge develop to main
lidofinance · Jan 29, 2024 · 6d99877 · 6d99877
2 parents 7471c21 + 09340f1
commit 6d99877
Show file tree

Hide file tree

Showing 37 changed files with 353 additions and 409 deletions.
diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap.svg
diff --git a/features/stake/stake-form/stake-form-modal.tsx b/features/stake/stake-form/stake-form-modal.tsx
@@ -1,7 +1,6 @@
 import { useTransactionModal } from 'shared/transaction-modal';
 import { convertTxStageToLegacy } from 'features/wsteth/shared/utils/convertTxModalStageToLegacy';
 import { TxStageModal } from 'shared/components';
-import { formatBalance } from 'utils';
 import { TX_OPERATION as TX_OPERATION_LEGACY } from 'shared/components/tx-stage-modal';
 import { useStakeFormData } from './stake-form-context';
 
@@ -24,9 +23,9 @@ export const StakeFormModal = () => {
       txStage={convertTxStageToLegacy(txStage)}
       txOperation={TX_OPERATION_LEGACY.STAKING}
       txHash={txHash}
-      amount={amount ? formatBalance(amount) : ''}
+      amount={amount}
       amountToken="ETH"
-      willReceiveAmount={amount ? formatBalance(amount) : undefined}
+      willReceiveAmount={amount}
       willReceiveAmountToken="stETH"
       balance={stethBalance}
       balanceToken="stETH"

diff --git a/features/withdrawals/claim/tx-modal/tx-claim-modal.tsx b/features/withdrawals/claim/tx-modal/tx-claim-modal.tsx
@@ -14,6 +14,7 @@ import {
   trackMatomoEvent,
   MATOMO_CLICK_EVENTS_TYPES,
 } from 'config/trackMatomoEvent';
+import { withOptionaTooltip } from 'shared/components/tx-stage-modal/text-utils';
 
 export const TxClaimModal = () => {
   const {
@@ -26,21 +27,26 @@ export const TxClaimModal = () => {
     dispatchModalState,
   } = useTransactionModal();
 
-  const amountAsString = useMemo(
-    () => (amount ? formatBalance(amount, 4) : ''),
-    [amount],
-  );
+  const content = useMemo(() => {
+    const amountDisplay = amount
+      ? formatBalance(amount, 4, { adaptive: true, elipsis: true })
+      : '';
+    const amountFull = amount ? formatBalance(amount, 18) : '';
+    const amountEl = withOptionaTooltip(
+      amountDisplay,
+      amountFull,
+      <span data-testid="sendAmount">{amountDisplay}</span>,
+    );
 
-  const successDescription = 'Claiming operation was successful';
-  const successTitle = `${amountAsString} ETH has been claimed`;
+    const successDescription = 'Claiming operation was successful';
+    const successTitle = <>{amountEl} ETH has been claimed</>;
 
-  const pendingDescription = 'Awaiting block confirmation';
-  const pendingTitle = `You are now claiming ${amountAsString} ETH`;
+    const pendingDescription = 'Awaiting block confirmation';
+    const pendingTitle = <>You are now claiming {amountEl} ETH</>;
 
-  const signDescription = 'Processing your request';
-  const signTitle = `You are now claiming ${amountAsString} ETH`;
+    const signDescription = 'Processing your request';
+    const signTitle = <>You are now claiming {amountEl} ETH</>;
 
-  const content = useMemo(() => {
     switch (txStage) {
       case TX_STAGE.SIGN:
         return <TxStageSign description={signDescription} title={signTitle} />;
@@ -74,15 +80,7 @@ export const TxClaimModal = () => {
       default:
         return null;
     }
-  }, [
-    errorText,
-    pendingTitle,
-    signTitle,
-    onRetry,
-    successTitle,
-    txHash,
-    txStage,
-  ]);
+  }, [amount, txStage, txHash, errorText, onRetry]);
 
   return (
     <TxStageModal

diff --git a/features/withdrawals/request/form/bunker-info.tsx b/features/withdrawals/request/form/bunker-info.tsx
@@ -1,14 +1,18 @@
-import Link from 'next/link';
-
+import { useInpageNavigation } from 'providers/inpage-navigation';
 import { InfoBoxStyled } from 'features/withdrawals/shared';
 
 export const BunkerInfo = () => {
+  const { navigateInpageAnchor } = useInpageNavigation();
+
   return (
     <InfoBoxStyled>
       Lido protocol is in &quot;Bunker mode&quot;. The withdrawal requests are
       slowed down until the consequences of the incident that caused
       &quot;Bunker mode&quot; are not resolved. For more details,{' '}
-      <Link href="#bunkerModeScenarios">see here</Link>.
+      <a href="#bunkerModeScenarios" onClick={navigateInpageAnchor}>
+        see here
+      </a>
+      .
     </InfoBoxStyled>
   );
 };
diff --git a/features/withdrawals/request/form/options/lido-option.tsx b/features/withdrawals/request/form/options/lido-option.tsx
@@ -1,11 +1,11 @@
-import Link from 'next/link';
 import { useWatch } from 'react-hook-form';
 import { formatEther } from '@ethersproject/units';
 
 import { Tooltip, Question } from '@lidofinance/lido-ui';
 import { TOKENS } from '@lido-sdk/constants';
 
 import { useEthAmountByStethWsteth } from 'features/withdrawals/hooks';
+import { useInpageNavigation } from 'providers/inpage-navigation';
 import { RequestFormInputType } from 'features/withdrawals/request/request-form-context';
 
 import {
@@ -21,6 +21,8 @@ import {
 } from './styles';
 
 const TooltipWithdrawalAmount = () => {
+  const { navigateInpageAnchor } = useInpageNavigation();
+
   return (
     <Tooltip
       data-testid="lidoOptionToolTip"
@@ -29,19 +31,18 @@ const TooltipWithdrawalAmount = () => {
         <>
           The final amount of claimable ETH can differ
           <br /> For more info, please read{' '}
-          <Link href="#amountDifferentFromRequested">
-            <a
-              data-testid="lidoOptionToolTipFAQ"
-              aria-hidden="true"
-              onClick={() =>
-                trackMatomoEvent(
-                  MATOMO_CLICK_EVENTS_TYPES.withdrawalFAQtooltipEthAmount,
-                )
-              }
-            >
-              FAQ
-            </a>
-          </Link>
+          <a
+            data-testid="lidoOptionToolTipFAQ"
+            href="#amountDifferentFromRequested"
+            onClick={(e) => {
+              trackMatomoEvent(
+                MATOMO_CLICK_EVENTS_TYPES.withdrawalFAQtooltipEthAmount,
+              );
+              navigateInpageAnchor(e);
+            }}
+          >
+            FAQ
+          </a>
         </>
       }
     >

diff --git a/features/withdrawals/request/tx-modal/tx-request-modal.tsx b/features/withdrawals/request/tx-modal/tx-request-modal.tsx
@@ -18,6 +18,7 @@ import {
 
 import { getTokenDisplayName } from 'utils/getTokenDisplayName';
 import { TxRequestStageSuccess } from './tx-request-stage-success';
+import { withOptionaTooltip } from 'shared/components/tx-stage-modal/text-utils';
 
 export const TxRequestModal = () => {
   const modalState = useTransactionModal();
@@ -35,7 +36,16 @@ export const TxRequestModal = () => {
     } = modalState;
 
     const tokenName = token ? getTokenDisplayName(token) : '';
-    const amountAsString = requestAmount ? formatBalance(requestAmount, 4) : '';
+
+    const amountDisplay = requestAmount
+      ? formatBalance(requestAmount, 4, { adaptive: true, elipsis: true })
+      : '';
+    const amountFull = requestAmount ? formatBalance(requestAmount, 18) : '';
+    const amountEl = withOptionaTooltip(
+      amountDisplay,
+      amountFull,
+      <span data-testid="sendAmount">{amountDisplay}</span>,
+    );
 
     // if more dialogs are added convert to switch on dialog type
     if (dialog)
@@ -53,11 +63,27 @@ export const TxRequestModal = () => {
         />
       );
 
-    const approvingTitle = `You are now approving ${amountAsString} ${tokenName}`;
-    const approvingSingDescription = `Approving for ${amountAsString} ${tokenName}`;
+    const approvingTitle = (
+      <>
+        You are now approving {amountEl} {tokenName}
+      </>
+    );
+    const approvingSingDescription = (
+      <>
+        Approving for {amountEl} {tokenName}
+      </>
+    );
 
-    const withdrawalTitle = `You are requesting withdrawal for ${amountAsString} ${tokenName}`;
-    const withdrawalSingDescription = `Requesting withdrawal for ${amountAsString} ${tokenName}`;
+    const withdrawalTitle = (
+      <>
+        You are requesting withdrawal for {amountEl} {tokenName}
+      </>
+    );
+    const withdrawalSingDescription = (
+      <>
+        Requesting withdrawal for {amountEl} {tokenName}
+      </>
+    );
 
     const renderSign = () => {
       switch (txOperation) {
@@ -116,7 +142,7 @@ export const TxRequestModal = () => {
           <TxRequestStageSuccess
             txHash={txHash}
             tokenName={tokenName}
-            amountAsString={amountAsString}
+            amount={amountEl}
           />
         );
       case TX_STAGE.SUCCESS_MULTISIG:

diff --git a/features/withdrawals/request/tx-modal/tx-request-stage-success.tsx b/features/withdrawals/request/tx-modal/tx-request-stage-success.tsx
@@ -26,13 +26,13 @@ const LINK_ADD_NFT_GUIDE =
 type TxRequestStageSuccessProps = {
   txHash: string | null;
   tokenName: string;
-  amountAsString: string;
+  amount: React.ReactNode;
 };
 
 export const TxRequestStageSuccess = ({
   txHash,
   tokenName,
-  amountAsString,
+  amount,
 }: TxRequestStageSuccessProps) => {
   const { providerWeb3 } = useSDK();
   const { data: nftData, initialLoading: nftLoading } =
@@ -43,7 +43,7 @@ export const TxRequestStageSuccess = ({
 
   const successDescription = (
     <span>
-      Withdrawal request for {amountAsString} {tokenName} has been sent.
+      Withdrawal request for {amount} {tokenName} has been sent.
       <br />
       Check <LocalLink href={WITHDRAWALS_CLAIM_PATH}>Claim tab</LocalLink> to
       view your withdrawal requests or view your transaction on{' '}

diff --git a/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx b/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx
@@ -1,5 +1,4 @@
 import { Question, Tooltip } from '@lidofinance/lido-ui';
-import Link from 'next/link';
 
 import { FormatToken } from 'shared/formatters';
 import { useWaitingTime } from 'features/withdrawals/hooks';
@@ -10,10 +9,12 @@ import {
 } from 'config/trackMatomoEvent';
 import { QueueInfoStyled, DataTableRowStyled } from './styles';
 import { useRequestFormData } from '../request-form-context';
+import { useInpageNavigation } from 'providers/inpage-navigation';
 
 export const WalletQueueTooltip = () => {
   const waitingTime = useWaitingTime('');
   const { unfinalizedStETH } = useRequestFormData();
+  const { navigateInpageAnchor } = useInpageNavigation();
 
   const queueInfo = (
     <QueueInfoStyled>
@@ -38,19 +39,18 @@ export const WalletQueueTooltip = () => {
     <>
       The withdrawal request time depends on the mode, overall amount of stETH
       in queue and{' '}
-      <Link href="#withdrawalsPeriod">
-        <a
-          aria-hidden="true"
-          data-testid="otherFactorsLink"
-          onClick={() =>
-            trackMatomoEvent(
-              MATOMO_CLICK_EVENTS_TYPES.withdrawalOtherFactorsTooltipMode,
-            )
-          }
-        >
-          other factors
-        </a>
-      </Link>
+      <a
+        href="#withdrawalsPeriod"
+        data-testid="otherFactorsLink"
+        onClick={(e) => {
+          trackMatomoEvent(
+            MATOMO_CLICK_EVENTS_TYPES.withdrawalOtherFactorsTooltipMode,
+          );
+          navigateInpageAnchor(e);
+        }}
+      >
+        other factors
+      </a>
       .{queueInfo}
     </>
   );

diff --git a/features/withdrawals/shared/tx-stage-modal/stages/tx-stage-pending.tsx b/features/withdrawals/shared/tx-stage-modal/stages/tx-stage-pending.tsx
@@ -7,8 +7,8 @@ import { getStageIcon } from './icons';
 import { TX_STAGE } from 'shared/transaction-modal';
 
 type TxStagePendingProps = {
-  description: string;
-  title: string;
+  description: React.ReactNode;
+  title: React.ReactNode;
   txHash: string | null;
 };
 

diff --git a/features/withdrawals/shared/tx-stage-modal/stages/tx-stage-sign.tsx b/features/withdrawals/shared/tx-stage-modal/stages/tx-stage-sign.tsx
@@ -6,8 +6,8 @@ import { getStageIcon } from './icons';
 import { TX_STAGE } from 'shared/transaction-modal';
 
 type TxStageSignProps = {
-  description: string;
-  title: string;
+  description: React.ReactNode;
+  title: React.ReactNode;
 };
 
 export const TxStageSign: FC<TxStageSignProps> = (props) => {

diff --git a/features/withdrawals/shared/tx-stage-modal/stages/tx-stage-success.tsx b/features/withdrawals/shared/tx-stage-modal/stages/tx-stage-success.tsx
@@ -9,7 +9,7 @@ import { TX_STAGE } from 'shared/transaction-modal';
 type TxStageSuccessProps = {
   txHash: string | null;
   description: React.ReactNode;
-  title: string;
+  title: React.ReactNode;
   showEtherscan?: boolean;
   onClickEtherscan?: React.MouseEventHandler<HTMLAnchorElement>;
 };

diff --git a/features/withdrawals/withdrawals-faq/list/bunker-mode-reasons.tsx b/features/withdrawals/withdrawals-faq/list/bunker-mode-reasons.tsx
@@ -1,8 +1,8 @@
-import { Accordion } from '@lidofinance/lido-ui';
+import { AccordionNavigatable } from 'shared/components/accordion-navigatable';
 
 export const BunkerModeReasons: React.FC = () => {
   return (
-    <Accordion
+    <AccordionNavigatable
       summary="What scenarios can cause Bunker mode?"
       id="bunkerModeScenarios"
     >
@@ -22,6 +22,6 @@ export const BunkerModeReasons: React.FC = () => {
           the end of&nbsp;it.
         </li>
       </ol>
-    </Accordion>
+    </AccordionNavigatable>
   );
 };
diff --git a/features/withdrawals/withdrawals-faq/list/claimable-amount-difference.tsx b/features/withdrawals/withdrawals-faq/list/claimable-amount-difference.tsx
@@ -1,4 +1,4 @@
-import { Accordion } from '@lidofinance/lido-ui';
+import { AccordionNavigatable } from 'shared/components/accordion-navigatable';
 
 type ClaimableAmountDifferenceProps = {
   title: string;
@@ -8,12 +8,12 @@ export const ClaimableAmountDifference: React.FC<
   ClaimableAmountDifferenceProps
 > = ({ title }) => {
   return (
-    <Accordion summary={title} id="amountDifferentFromRequested">
+    <AccordionNavigatable summary={title} id="amountDifferentFromRequested">
       <p>
         The amount you can claim may differ from your initial request due to a
         slashing occurrence and penalties. For these reasons, the total
         claimable reward amount could be reduced.
       </p>
-    </Accordion>
+    </AccordionNavigatable>
   );
 };
diff --git a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx
@@ -1,8 +1,8 @@
-import { Accordion } from '@lidofinance/lido-ui';
+import { AccordionNavigatable } from 'shared/components/accordion-navigatable';
 
 export const WithdrawalPeriodCircumstances: React.FC = () => {
   return (
-    <Accordion
+    <AccordionNavigatable
       summary="What are the factors affecting the withdrawal time?"
       id="withdrawalsPeriod"
     >
@@ -12,6 +12,6 @@ export const WithdrawalPeriodCircumstances: React.FC = () => {
         <li>Exit queue on the Beacon chain.</li>
         <li>Demand for staking and unstaking.</li>
       </ul>
-    </Accordion>
+    </AccordionNavigatable>
   );
 };