Merge pull request #439 from lidofinance/feature/change-wrap-success-…

…banner feat: change wrap success banner
lidofinance · Aug 20, 2024 · ea66b4a · ea66b4a
2 parents 80f59c5 + 09dfbab
commit ea66b4a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/consts/matomo-click-events.ts b/consts/matomo-click-events.ts
@@ -18,6 +18,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   obolBannerProceed = 'obolBannerProceed',
   obolBannerDVVLink = 'obolBannerDVVLink',
   exploreAllStrategiesAfterStake = 'exploreAllStrategiesAfterStake',
+  exploreAllStrategiesAfterWrap = 'exploreAllStrategiesAfterWrap',
   // FAQ
   faqSafeWorkWithLidoAudits = 'faqSafeWorkWithLidoAudits',
   faqLidoEthAprEthLandingPage = 'faqLidoEthAprEthLandingPage',
@@ -147,6 +148,11 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push "Explore all strategies" after staking',
     'eth_widget_explore_all_strategies_after_staking',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.exploreAllStrategiesAfterWrap]: [
+    'Ethereum_Staking_Widget',
+    'Push "Explore all strategies" after wrap',
+    'eth_widget_explore_all_strategies_after_wraping',
+  ],
   // FAQ
   [MATOMO_CLICK_EVENTS_TYPES.faqSafeWorkWithLidoAudits]: [
     'Ethereum_Staking_Widget',

diff --git a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx
@@ -12,9 +12,7 @@ import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx
 import type { BigNumber } from 'ethers';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
-
-const LINK_EXPLORE_STRATEGIES =
-  'https://lido.fi/?pk_vid=6c467e14095d5ea11723712888b1fe5f#defi-strategies';
+import { LINK_EXPLORE_STRATEGIES } from 'shared/banners/vaults-banner-info/const';
 
 const STAGE_OPERATION_ARGS = {
   token: 'ETH',

diff --git a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx
@@ -1,16 +1,22 @@
+import { Button, Link } from '@lidofinance/lido-ui';
+import { trackEvent } from '@lidofinance/analytics-matomo';
+
 import {
   TransactionModalTransitStage,
   useTransactionModalStage,
 } from 'shared/transaction-modal/hooks/use-transaction-modal-stage';
 import { getGeneralTransactionModalStages } from 'shared/transaction-modal/hooks/get-general-transaction-modal-stages';
 
-import { VaultsBannerStrategies } from 'shared/banners/vaults-banner-strategies';
 import { TxStageSignOperationAmount } from 'shared/transaction-modal/tx-stages-composed/tx-stage-amount-operation';
 import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown';
+import { LINK_EXPLORE_STRATEGIES } from 'shared/banners/vaults-banner-info/const';
 
 import { getTokenDisplayName } from 'utils/getTokenDisplayName';
 import type { BigNumber } from 'ethers';
 import type { TokensWrappable } from 'features/wsteth/shared/types';
+import { VaultsBannerInfo } from 'shared/banners/vaults-banner-info';
+
+import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
 
 const STAGE_APPROVE_ARGS = {
   willReceiveToken: 'wstETH',
@@ -83,7 +89,22 @@ const getTxModalStagesWrap = (transitStage: TransactionModalTransitStage) => ({
         balance={balance}
         balanceToken={'wstETH'}
         operationText={'Wrapping'}
-        footer={<VaultsBannerStrategies />}
+        footer={
+          <>
+            <VaultsBannerInfo isTitleCompact showLearnMoreButton={false} />
+            <br />
+            <Link
+              href={LINK_EXPLORE_STRATEGIES}
+              onClick={() =>
+                trackEvent(...MATOMO_CLICK_EVENTS.exploreAllStrategiesAfterWrap)
+              }
+            >
+              <Button fullwidth size="sm">
+                Explore strategies
+              </Button>
+            </Link>
+          </>
+        }
       />,
       {
         isClosableOnLedger: true,

diff --git a/shared/banners/vaults-banner-info/const.ts b/shared/banners/vaults-banner-info/const.ts
@@ -0,0 +1 @@
+export const LINK_EXPLORE_STRATEGIES = 'https://lido.fi/#defi-strategies';