stimmy analytics, additional ui fixes (#1596)

Co-authored-by: Daniel Sinclair <[email protected]>
Co-authored-by: Christopher Howard <[email protected]>

src/analytics/event.ts

@@ -139,6 +139,33 @@ export const event = {
    * Called when a keyboard shortcut is triggered
    */
   keyboardShortcutTriggered: 'keyboard.shortcut.triggered',
+  /**
+   * Called when user views the Leaderboard tab within Points
+   */
+  pointsLeaderboardViewed: 'points.leaderboard.viewed',
+  /**
+   * Called when user copies their referral link
+   * within Points and tracks if it was a code or link
+   */
+  pointsReferralCopied: 'points.referral.copied',
+  /**
+   * Called when user taps the claim button
+   * within the Points / Eth rewards screen
+   */
+  pointsRewardsClaimButtonClicked: 'points.rewards.claim_button.clicked',
+  /**
+   * Called when user chooses which network to claim rewards on and the
+   * code to claim is executed within the Points / Eth rewards screen
+   */
+  pointsRewardsClaimSubmitted: 'points.rewards.claim.submitted',
+  /**
+   * Called when user views the Rewards tab within Points
+   */
+  pointsRewardsViewed: 'points.rewards.viewed',
+  /**
+   * Called when user views the Points tab
+   */
+  pointsViewed: 'points.viewed',
   /**
    * Called when the popup entry is opened, including:
    * - extension popup
@@ -549,6 +576,35 @@ export type EventProperties = {
      */
     type: KeyboardEventDescription;
   };
+  [event.pointsLeaderboardViewed]: undefined;
+  [event.pointsReferralCopied]: {
+    /**
+     * Was a `link` or `code` copied
+     */
+    type: 'link' | 'code';
+  };
+  [event.pointsRewardsClaimButtonClicked]: {
+    /**
+     * Claim amount in ETH
+     */
+    claimAmount: number;
+  };
+  [event.pointsRewardsClaimSubmitted]: {
+    /**
+     * claim amount in ETH
+     */
+    claimAmount: number;
+    /**
+     * claim amount in USD
+     */
+    claimAmountUSD: number;
+    /**
+     * which network of the three possible was selected
+     */
+    networkSelected: 'optimism' | 'base' | 'zora';
+  };
+  [event.pointsRewardsViewed]: undefined;
+  [event.pointsViewed]: undefined;
   [event.popupOpened]: undefined;
   [event.settingsAnalyticsTrackingDisabled]: undefined;
   [event.revokeSubmitted]: {

src/analytics/userProperties.ts

@@ -1,13 +1,23 @@
 // these can be reported separately so they must be optional
 export interface UserProperties {
+  // number of imported or generated accounts
   ownedAccounts?: number;
+  // number of accounts tied to paired hardware wallets
   hardwareAccounts?: number;
+  // number of watched addresses or ens
   watchedAccounts?: number;
+  // number of imported or generated secret recovery phrases
   recoveryPhrases?: number;
+  // number of imported secret recovery phrases
   importedRecoveryPhrases?: number;
+  // number of unique private keys
   privateKeys?: number;
+  // number of imported unique private keys
   importedPrivateKeys?: number;
+  // number of paired trezor hardware wallets
   trezorDevices?: number;
+  // number of paired ledger hardware wallets
   ledgerDevices?: number;
+  // whether a recovery phrase or private key has been imported
   hasImported?: boolean;
 }

src/core/raps/actions/claim.ts

@@ -22,7 +22,7 @@ export async function claim({
       ? CLAIM_MOCK_DATA
       : await metadataPostClient.claimUserRewards({ address });
 
-  // Checking ig we got the tx hash
+  // Checking if we got the tx hash
   const txHash = claimInfo.claimUserRewards?.txHash;
   if (!txHash) {
     // If there's no transaction hash the relayer didn't submit the transaction

src/entries/popup/pages/home/Points/ClaimOverview.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { PointsErrorType } from '~/core/graphql/__generated__/metadata';
 import { i18n } from '~/core/languages';
@@ -47,7 +47,7 @@ export function ClaimOverview({
   const showSuccess = !waitToDisplay && success && preparingClaim && !error;
 
   useEffect(() => {
-    setTimeout(() => setWaitToDisplay(false), 3000);
+    setTimeout(() => setWaitToDisplay(false), 4000);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -186,7 +186,7 @@ function ErrorText({ error }: { error?: string }) {
   );
 }
 
-function RainbowSlant() {
+const RainbowSlant = memo(function () {
   return (
     <Box paddingTop="30px">
       <Stack space="12px">
@@ -208,7 +208,8 @@ function RainbowSlant() {
       </Stack>
     </Box>
   );
-}
+});
+RainbowSlant.displayName = 'RainbowSlant';
 
 function ClaimSummary({ amount, price }: { amount: string; price: string }) {
   return (

src/entries/popup/pages/home/Points/ClaimSheet.tsx

@@ -2,12 +2,14 @@ import { useMutation } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
+import { analytics } from '~/analytics';
+import { event } from '~/analytics/event';
 import config from '~/core/firebase/remoteConfig';
 import { i18n } from '~/core/languages';
 import { RapClaimActionParameters } from '~/core/raps/references';
 import { chainsLabel } from '~/core/references/chains';
 import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state';
-import { ChainId } from '~/core/types/chains';
+import { ChainId, chainIdToNameMapping } from '~/core/types/chains';
 import { GasSpeed } from '~/core/types/gas';
 import {
   convertAmountAndPriceToNativeDisplay,
@@ -149,7 +151,15 @@ export function ClaimSheet() {
     setSelectedChainId(chain);
     setInitialClaimableAmount(claimableBalance.amount);
     setInitialClaimableDisplay(claimablePriceDisplay.display);
-    setTimeout(() => claimRewards(), 500);
+    claimRewards();
+    analytics.track(event.pointsRewardsClaimSubmitted, {
+      claimAmount: Number(claimableBalance.amount),
+      claimAmountUSD: Number(claimablePriceDisplay.display.slice(1)),
+      networkSelected: chainIdToNameMapping[chain] as
+        | 'optimism'
+        | 'zora'
+        | 'base',
+    });
   };
 
   const baseInfo = {
@@ -170,7 +180,7 @@ export function ClaimSheet() {
 
   useEffect(() => {
     if (showSuccess && !showSummary) {
-      setTimeout(() => setShowSummary(true), 5000);
+      setTimeout(() => setShowSummary(true), 7000);
     }
   }, [showSuccess, showSummary]);
 

src/entries/popup/pages/home/Points/PointsDashboard.tsx

@@ -13,6 +13,8 @@ import {
 import { Address } from 'viem';
 
 import rainbowIcon from 'static/images/[email protected]';
+import { analytics } from '~/analytics';
+import { event } from '~/analytics/event';
 import { PointsQuery } from '~/core/graphql/__generated__/metadata';
 import { i18n } from '~/core/languages';
 import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state';
@@ -273,25 +275,28 @@ function TextWithMoreInfo({ children }: PropsWithChildren) {
   );
 }
 
-export const copyReferralLink = (referralCode: string) =>
+export const copyReferralLink = (referralCode: string) => {
+  analytics.track(event.pointsReferralCopied, { type: 'link' });
   copy({
     value: `https://rainbow.me/points?ref=${referralCode}`,
     title: i18n.t('points.copied_referral_link'),
     description: `rainbow.me/points?ref=${referralCode}`,
   });
+};
 
 const formatReferralCode = (referralCode: string) =>
   referralCode.slice(0, 3) + '-' + referralCode.slice(-3);
 function ReferralCode() {
   const { currentAddress } = useCurrentAddressStore();
   const { data, isSuccess } = usePoints(currentAddress);
-  const copyReferralCode = () =>
+  const copyReferralCode = () => {
+    analytics.track(event.pointsReferralCopied, { type: 'code' });
     copy({
       value: data?.user.referralCode || '',
       title: i18n.t('points.copied_referral_code'),
       description: formatReferralCode(data?.user.referralCode || ''),
     });
-
+  };
   return (
     <Stack gap="12px">
       <Text size="16pt" weight="bold" color="label">
@@ -716,7 +721,15 @@ function ClaimYourPointsCta({
       whileTap={{ scale: 0.98 }}
       whileFocus={{ scale: 1.02 }}
       whileHover={{ scale: 1.02 }}
-      onClick={() => showClaimSheet()}
+      onClick={() => {
+        // TODO: Also track amount in USD
+        analytics.track(event.pointsRewardsClaimButtonClicked, {
+          claimAmount: Number(
+            convertRawAmountToDecimalFormat(claimableReward, 18),
+          ),
+        });
+        showClaimSheet();
+      }}
     >
       <RainbowText size="20pt" weight="heavy">
         {i18n.t('points.rewards.claim_reward', {
@@ -894,12 +907,6 @@ function MyEarnings({ earnings = '0' }: { earnings?: string }) {
               {i18n.t('points.rewards.my_earnings')}
             </Text>
           </Inline>
-          <Symbol
-            symbol="questionmark.circle.fill"
-            weight="heavy"
-            size={16}
-            color="labelQuaternary"
-          />
         </Box>
         <Box display="flex" justifyContent="space-between">
           <Inline space="10px" alignVertical="center">
@@ -1101,6 +1108,14 @@ export function PointsDashboard() {
   const [displayMode, setDisplayMode] = useState<'rewards' | 'leaderboard'>(
     'rewards',
   );
+  useEffect(() => {
+    if (displayMode === 'rewards') {
+      analytics.track(event.pointsRewardsViewed);
+    } else if (displayMode === 'leaderboard') {
+      analytics.track(event.pointsLeaderboardViewed);
+    }
+    analytics.track(event.pointsViewed);
+  }, [displayMode]);
   return (
     <>
       <Stack

static/json/languages/en_US.json

@@ -1485,7 +1485,7 @@
       "claimed_earnings": "Claimed Earnings",
       "current_value": "Current Value",
       "earn_eth_rewards": "Earn ETH Rewards",
-      "points_explanation": "Every week, top points holders and the biggest weekly points earners will receive a portion of Rainbow’s onchain revenue. Collect points by swapping or transacting in Rainbow.",
+      "points_explanation": "The top weekly points earners will receive a weekly airdrop of Rainbow's own hard earned ETH. Collect points by swapping or transacting in Rainbow, using dapps, or referring friends.",
       "your_reward_is_ready": "> Your reward is ready",
       "claim_complete": "> Claim Complete",
       "already_claimed": "> Your reward has already been claimed",