Merge pull request osmosis-labs#1131 from osmosis-labs/jose/new-ampli…

…tude-events

Feat Add/Delete Amplitude events

packages/web/components/cards/bond-card.tsx

@@ -15,11 +15,14 @@ import { useTranslation } from "react-multi-lang";
 import { coinFormatter, priceFormatter } from "../../utils/formatter";
 import { UnlockIcon } from "../assets/unlock-icon";
 import { RightArrowIcon } from "../assets/right-arrow-icon";
+import { useAmplitudeAnalytics } from "../../hooks";
+import { EventName } from "../../config";
 
 export const BondCard: FunctionComponent<
   BondDuration & {
     onUnbond: () => void;
     onGoSuperfluid: () => void;
+    onToggleDetails?: (nextValue: boolean) => void;
     splashImageSrc?: string;
   }
 > = ({
@@ -35,6 +38,7 @@ export const BondCard: FunctionComponent<
   onUnbond,
   onGoSuperfluid,
   splashImageSrc,
+  onToggleDetails,
 }) => {
   const [drawerUp, setDrawerUp] = useState(false);
   const t = useTranslation();
@@ -135,7 +139,11 @@ export const BondCard: FunctionComponent<
         incentivesBreakdown={incentivesBreakdown}
         superfluid={superfluid}
         drawerUp={drawerUp}
-        toggleDetailsVisible={() => setDrawerUp(!drawerUp)}
+        toggleDetailsVisible={() => {
+          const nextValue = !drawerUp;
+          onToggleDetails?.(nextValue);
+          setDrawerUp(nextValue);
+        }}
         onGoSuperfluid={onGoSuperfluid}
       />
     </div>
@@ -387,6 +395,7 @@ const SwapFeeBreakdownRow: FunctionComponent<{
   swapFeeDailyReward: PricePretty;
 }> = ({ swapFeeApr, swapFeeDailyReward }) => {
   const t = useTranslation();
+  const { logEvent } = useAmplitudeAnalytics();
   return (
     <div className="flex place-content-between items-start">
       <div className="flex items-center gap-2">
@@ -405,6 +414,11 @@ const SwapFeeBreakdownRow: FunctionComponent<{
           <a
             rel="noreferrer"
             target="_blank"
+            onClick={() => {
+              logEvent([
+                EventName.PoolDetail.CardDetail.swapFeesLinkOutClicked,
+              ]);
+            }}
             href="https://docs.osmosis.zone/overview/getting-started/#swap-fees"
           >
             <u>{t("pool.swapFees")}</u>

packages/web/components/control/token-select-with-drawer.tsx

@@ -4,9 +4,11 @@ import { observer } from "mobx-react-lite";
 import { AppCurrency } from "@keplr-wallet/types";
 import { CoinPretty } from "@keplr-wallet/unit";
 import { useStore } from "../../stores";
-import { useWindowSize } from "../../hooks";
+import { useAmplitudeAnalytics, useWindowSize } from "../../hooks";
 import classNames from "classnames";
 import { TokenSelectDrawer } from "../drawers/token-select-drawer";
+import { useRouter } from "next/router";
+import { EventName } from "../../config";
 
 /** Will display balances if provided `CoinPretty` objects. Assumes denoms are unique. */
 export const TokenSelectWithDrawer: FunctionComponent<{
@@ -20,13 +22,15 @@ export const TokenSelectWithDrawer: FunctionComponent<{
   ({
     selectedTokenDenom,
     tokens,
-    onSelect,
+    onSelect: onSelectProp,
     sortByBalances = false,
     dropdownOpen,
     setDropdownState,
   }) => {
     const { chainStore, priceStore } = useStore();
     const { isMobile } = useWindowSize();
+    const router = useRouter();
+    const { logEvent } = useAmplitudeAnalytics();
 
     // parent overrideable state
     const [isSelectOpenLocal, setIsSelectOpenLocal] = useState(false);
@@ -92,6 +96,14 @@ export const TokenSelectWithDrawer: FunctionComponent<{
 
     const canSelectTokens = tokens.length > 1;
 
+    const onSelect = (tokenDenom: string) => {
+      logEvent([
+        EventName.Swap.dropdownAssetSelected,
+        { tokenName: tokenDenom, isOnHome: router.pathname === "/" },
+      ]);
+      onSelectProp(tokenDenom);
+    };
+
     return (
       <div className="flex items-center justify-center md:justify-start">
         {selectedCurrency && (

packages/web/components/drawers/token-select-drawer.tsx

@@ -336,7 +336,7 @@ export const TokenSelectDrawer: FunctionComponent<{
                           <h6 className="button font-button text-white-full">
                             {justDenom}
                           </h6>
-                          <div className="caption text-left font-semibold font-medium text-osmoverse-400">
+                          <div className="caption text-left font-medium text-osmoverse-400">
                             {showChannel
                               ? `${networkName} ${channel}`
                               : networkName}

packages/web/components/navbar-osmo-price.tsx

@@ -4,7 +4,8 @@ import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTranslation } from "react-multi-lang";
-import { useTransferConfig } from "../hooks";
+import { EventName } from "../config";
+import { useAmplitudeAnalytics, useTransferConfig } from "../hooks";
 import { FiatRampsModal } from "../modals";
 import { useStore } from "../stores";
 import { CoinsIcon } from "./assets/coins-icon";
@@ -27,10 +28,18 @@ function getChartData(prices: PricePretty[] = []) {
 }
 
 const NavbarOsmoPrice = observer(() => {
-  const { accountStore, priceStore, chainStore, queriesExternalStore } =
-    useStore();
+  const {
+    accountStore,
+    priceStore,
+    chainStore,
+    queriesExternalStore,
+    assetsStore,
+  } = useStore();
   const transferConfig = useTransferConfig();
   const t = useTranslation();
+  const { logEvent } = useAmplitudeAnalytics();
+
+  const { nativeBalances } = assetsStore;
 
   const { chainId } = chainStore.osmosis;
   const account = accountStore.getAccount(chainId);
@@ -113,7 +122,27 @@ const NavbarOsmoPrice = observer(() => {
               "button group relative flex !h-11 items-center justify-center gap-2 overflow-hidden !rounded-full !border-osmoverse-700 !py-1 font-bold text-osmoverse-100 !transition-all !duration-300 !ease-in-out",
               "hover:border-none hover:bg-gradient-positive hover:text-osmoverse-1000"
             )}
-            onClick={() => transferConfig.buyOsmo()}
+            onClick={() => {
+              transferConfig.buyOsmo();
+              const tokenName = "OSMO";
+
+              const cryptoBalance = nativeBalances.find(
+                (coin) =>
+                  coin.balance.denom.toLowerCase() === tokenName.toLowerCase()
+              );
+
+              logEvent([
+                EventName.Sidebar.buyOsmoClicked,
+                {
+                  tokenName,
+                  tokenAmount: (
+                    cryptoBalance?.fiatValue ?? cryptoBalance?.balance
+                  )
+                    ?.maxDecimals(4)
+                    .toString(),
+                },
+              ]);
+            }}
           >
             <CreditCardIcon
               classes={{
@@ -140,7 +169,31 @@ const NavbarOsmoPrice = observer(() => {
       )}
 
       {transferConfig?.fiatRampsModal && (
-        <FiatRampsModal {...transferConfig.fiatRampsModal} />
+        <FiatRampsModal
+          transakModalProps={{
+            onCreateOrder: (data) => {
+              logEvent([
+                EventName.Sidebar.buyOsmoCompleted,
+                {
+                  tokenName: data.status.cryptoCurrency,
+                  tokenAmount:
+                    data.status?.fiatAmountInUsd ?? data.status.cryptoAmount,
+                },
+              ]);
+            },
+            onSuccessfulOrder: (data) => {
+              logEvent([
+                EventName.Sidebar.buyOsmoCompleted,
+                {
+                  tokenName: data.status.cryptoCurrency,
+                  tokenAmount:
+                    data.status?.fiatAmountInUsd ?? data.status.cryptoAmount,
+                },
+              ]);
+            },
+          }}
+          {...transferConfig.fiatRampsModal}
+        />
       )}
     </div>
   );

packages/web/components/navbar/index.tsx

@@ -5,11 +5,16 @@ import classNames from "classnames";
 import { WalletStatus } from "@keplr-wallet/stores";
 import { Button } from "../buttons";
 import { useStore } from "../../stores";
-import { useBooleanWithWindowEvent, useWindowSize } from "../../hooks";
+import {
+  useAmplitudeAnalytics,
+  useBooleanWithWindowEvent,
+  useWindowSize,
+} from "../../hooks";
 import { IUserSetting } from "../../stores/user-settings";
 import { useTranslation } from "react-multi-lang";
 import { MainLayoutMenu, CustomClasses } from "../types";
 import { MainMenu } from "../main-menu";
+import { EventName } from "../../config";
 
 export const NavBar: FunctionComponent<
   {
@@ -181,6 +186,7 @@ const WalletInfo: FunctionComponent<CustomClasses> = observer(
     } = useStore();
     const t = useTranslation();
     const { isMobile } = useWindowSize();
+    const { logEvent } = useAmplitudeAnalytics();
 
     // wallet
     const account = accountStore.getAccount(chainId);
@@ -196,6 +202,7 @@ const WalletInfo: FunctionComponent<CustomClasses> = observer(
           <Button
             className="!h-10 w-40 lg:w-36 md:w-full"
             onClick={() => {
+              logEvent([EventName.Topnav.connectWalletClicked]);
               account.init();
               setHoverWalletInfo(false);
             }}
@@ -208,6 +215,7 @@ const WalletInfo: FunctionComponent<CustomClasses> = observer(
             mode="secondary"
             onMouseLeave={() => setHoverWalletInfo(false)}
             onClick={() => {
+              logEvent([EventName.Topnav.signOutClicked]);
               account.disconnect();
               setHoverWalletInfo(false);
             }}

packages/web/components/table/cells/transfer-button.tsx

@@ -95,7 +95,7 @@ const TransferButton: FunctionComponent<{
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      <span>{label}</span>
+      <span className="mb-[3.3px]">{label}</span>
       {isHovering ? (
         <div className="h-fit shrink-0">
           <Image

packages/web/components/trade-clipboard/trade-route.tsx

@@ -122,7 +122,7 @@ const TradeRoute: FunctionComponent<{
             </div>
 
             <div className="relative flex w-full items-center justify-center">
-              <div className="relative flex w-full items-center space-x-1">
+              <div className="relative flex w-full items-center gap-0.5">
                 <Dots className="animate-[pulse_3s_ease-in-out_0s_infinite]" />
                 <Dots className="animate-[pulse_3s_ease-in-out_0.5s_infinite]" />
                 <Dots className="animate-[pulse_3s_ease-in-out_0.7s_infinite]" />

packages/web/config/user-analytics-v2.ts

@@ -65,20 +65,22 @@ export const EventName = {
     switchClicked: "Swap: Switch clicked",
     swapStarted: "Swap: Swap started",
     swapCompleted: "Swap: Swap completed",
+    dropdownAssetSelected: "Swap: Dropdown asset selected",
   },
   // Events in Sidebar UI
   Sidebar: {
     stakeClicked: "Sidebar: Stake clicked",
     voteClicked: "Sidebar: Vote clicked",
     infoClicked: "Sidebar: Info clicked",
-    connectWalletClicked: "Sidebar: Connect wallet clicked",
-    signOutClicked: "Sidebar: Sign out clicked",
-    twitterClicked: "Sidebar: Twitter clicked",
-    mediumClicked: "Sidebar: Medium clicked",
-    commonwealthClicked: "Sidebar: Commonwealth clicked",
-    discordClicked: "Sidebar: Discord clicked",
-    telegramClicked: "Sidebar: Telegram clicked",
     supportClicked: "Sidebar: Support clicked",
+    buyOsmoClicked: "Sidebar: Buy OSMO clicked",
+    buyOsmoStarted: "Sidebar: Buy OSMO started",
+    buyOsmoCompleted: "Sidebar: Buy OSMO completed",
+  },
+  // Events in Topnav UI
+  Topnav: {
+    connectWalletClicked: "Topnav: Connect wallet clicked",
+    signOutClicked: "Topnav: Sign out clicked",
   },
   // Events in Pools page
   Pools: {
@@ -98,20 +100,30 @@ export const EventName = {
   // Events in Pool detail page
   PoolDetail: {
     pageViewed: "Pool detail: Page viewed",
-    addOrRemoveLiquidityClicked: "Pool detail: Add/Remove liquidity clicked",
     swapTokensClicked: "Pool detail: Swap tokens clicked",
-    startEarningClicked: "Pool detail: Start earning clicked",
+    bondSharesClicked: "Pool detail: Bond Shares clicked",
     unbondAllStarted: "Pool detail: Unbond all started",
     unbondAllCompleted: "Pool detail: Unbond all completed",
     singleAssetClicked: "Manage liquidity: Single asset clicked",
     addLiquidityStarted: "Manage liquidity: Add liquidity started",
     addLiquidityCompleted: "Manage liquidity: Add liquidity completed",
     removeLiquidityStarted: "Manage liquidity: Remove liquidity started",
     removeLiquidityCompleted: "Manage liquidity: Remove liquidity completed",
-    bondStarted: "Liquidity bonding: Bond started",
-    bondCompleted: "Liquidity bonding: Bond completed",
+    bondingStarted: "Pool detail: Bonding started",
+    bondingCompleted: "Pool detail: Bonding completed",
     superfluidStakeStarted: "Liquidity bonding: Superfluid stake started",
     superfluidStakeCompleted: "Liquidity bonding: Superfluid stake completed",
+    cardDetailsExpanded: "Pool detail: Card details expanded",
+    earnMoreByBondingClicked: "Pool detail: Earn more by bonding clicked",
+    goSuperfluidClicked: "Pool detail: Go Superfluid clicked",
+    unbondClicked: "Pool detail: Unbond clicked",
+    showHidePoolDetails: "Pool detail: Show/Hide pool details",
+    CardDetail: {
+      swapFeesLinkOutClicked: "Card detail: swap fees link-out clicked",
+    },
+    PutYourAssetsToWork: {
+      learnMoreClicked: "Put your assets to work: Learn more clicked",
+    },
   },
   // Events in assets page
   Assets: {
@@ -129,5 +141,8 @@ export const EventName = {
     depositAssetCompleted: "Deposit asset: Deposit completed",
     withdrawAssetStarted: "Withdraw asset: Withdraw started",
     withdrawAssetCompleted: "Withdraw asset: Withdraw completed",
+    buyOsmoClicked: "Assets: Buy OSMO clicked",
+    buyOsmoStarted: "Assets: Buy OSMO started",
+    buyOsmoCompleted: "Assets: Buy OSMO completed",
   },
 };