feat: add ampli tracking

across-protocol · Oct 31, 2023 · befae75 · befae75
1 parent 673752a
commit befae75
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 71 deletions.
diff --git a/src/views/Bridge/hooks/useBridgeDepositTracking.ts b/src/views/Bridge/hooks/useBridgeDepositTracking.ts
diff --git a/src/views/DepositStatus/components/DepositStatusLowerCard.tsx b/src/views/DepositStatus/components/DepositStatusLowerCard.tsx
@@ -50,7 +50,10 @@ export function DepositStatusLowerCard({
 
   return (
     <>
-      <EarnByLpAndStakingCard l1TokenAddress={tokenInfo.mainnetAddress!} />
+      <EarnByLpAndStakingCard
+        l1TokenAddress={tokenInfo.mainnetAddress!}
+        bridgeTokenSymbol={bridgeTokenSymbol}
+      />
       {fromBridgePagePayload && (
         <>
           <Divider />

diff --git a/src/views/DepositStatus/components/DepositTimesCard.tsx b/src/views/DepositStatus/components/DepositTimesCard.tsx
@@ -7,10 +7,12 @@ import { ReactComponent as LoadingIcon } from "assets/loading.svg";
 import { ReactComponent as ExternalLinkIcon } from "assets/icons/external-link-16.svg";
 
 import { Text, CardWrapper } from "components";
+import { getChainInfo } from "utils";
+import { useAmplitude } from "hooks";
+import { ampli } from "ampli";
 
 import { ElapsedTime } from "./ElapsedTime";
 import { DepositStatus } from "../types";
-import { getChainInfo } from "utils";
 
 type Props = {
   status: DepositStatus;
@@ -36,6 +38,8 @@ export function DepositTimesCard({
   const isDepositing = status === "depositing";
   const isFilled = status === "filled";
 
+  const { addToAmpliQueue } = useAmplitude();
+
   return (
     <CardWrapper>
       <Row>
@@ -113,6 +117,16 @@ export function DepositTimesCard({
         href="/transactions"
         target="_blank"
         rel="noreferrer"
+        onClick={() => {
+          addToAmpliQueue(() => {
+            ampli.monitorDepositProgressClicked({
+              action: "onClick",
+              element: "monitorDepositProgressLink",
+              page: "bridgePage",
+              section: "depositConfirmation",
+            });
+          });
+        }}
       >
         <Text>
           View on{" "}

diff --git a/src/views/DepositStatus/components/EarnByLpAndStakingCard.tsx b/src/views/DepositStatus/components/EarnByLpAndStakingCard.tsx
@@ -1,19 +1,28 @@
 import styled from "@emotion/styled";
+import { useHistory } from "react-router-dom";
 
 import { ReactComponent as ArrowStarRingIcon } from "assets/arrow-star-ring.svg";
 import { Text } from "components/Text";
 import { SecondaryButton } from "components/Button";
 import { useStakingPool } from "hooks/useStakingPool";
+import { useAmplitude } from "hooks";
 import { formatWeiPct } from "utils";
+import { ampli } from "ampli";
 
 import { EarnActionCard } from "./EarnActionCard";
 
 type Props = {
   l1TokenAddress: string;
+  bridgeTokenSymbol: string;
 };
 
-export function EarnByLpAndStakingCard({ l1TokenAddress }: Props) {
+export function EarnByLpAndStakingCard({
+  l1TokenAddress,
+  bridgeTokenSymbol,
+}: Props) {
   const { data: selectedRoutePool } = useStakingPool(l1TokenAddress);
+  const { addToAmpliQueue } = useAmplitude();
+  const history = useHistory();
 
   return (
     <EarnActionCard
@@ -42,6 +51,22 @@ export function EarnByLpAndStakingCard({ l1TokenAddress }: Props) {
             textColor="teal"
             borderColor="teal-15"
             backgroundColor="black-700"
+            onClick={() => {
+              const tokenSymbol = ["USDC.e", "USDbC"].includes(
+                bridgeTokenSymbol
+              )
+                ? "USDC"
+                : bridgeTokenSymbol;
+              history.push(`/pool?symbol=${tokenSymbol.toLowerCase()}`);
+              addToAmpliQueue(() => {
+                ampli.earnByAddingLiquidityClicked({
+                  action: "onClick",
+                  element: "earnByAddingLiquidityAndStakingLink",
+                  page: "bridgePage",
+                  section: "depositConfirmation",
+                });
+              });
+            }}
           >
             Add liquidity
           </Button>