From cf92be3076a590a128d18d38c7d0735fcbe2bcf0 Mon Sep 17 00:00:00 2001 From: Robinnnnn Date: Thu, 5 Oct 2023 15:05:24 -0400 Subject: [PATCH 01/21] ensure correct mobile beta upsell banner is displayed on ios --- .../GlobalBanner/MobileBetaReleaseBanner.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/web/src/contexts/globalLayout/GlobalBanner/MobileBetaReleaseBanner.tsx b/apps/web/src/contexts/globalLayout/GlobalBanner/MobileBetaReleaseBanner.tsx index f7843d80eb..ade2628364 100644 --- a/apps/web/src/contexts/globalLayout/GlobalBanner/MobileBetaReleaseBanner.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalBanner/MobileBetaReleaseBanner.tsx @@ -4,7 +4,6 @@ import appIcon from 'public/gallery-app-ios-icon.png'; import { useCallback } from 'react'; import styled from 'styled-components'; -import { GlobalBanner } from '~/components/core/GlobalBanner/GlobalBanner'; import { HStack, VStack } from '~/components/core/Spacer/Stack'; import { TitleXSBold } from '~/components/core/Text/Text'; import { useTrack } from '~/shared/contexts/AnalyticsContext'; @@ -32,15 +31,6 @@ export default function MobileBetaReleaseBanner({ handleCTAClick }: Props) { handleCTAClick(); }, [handleCTAClick, push, track]); - return ( - - ); - return ( From 48fbdb895cd9f5789640f68c8b1fb73a85f672cd Mon Sep 17 00:00:00 2001 From: Robinnnnn Date: Thu, 5 Oct 2023 15:13:44 -0400 Subject: [PATCH 02/21] update Button to autotrack --- .../web/src/components/core/Button/Button.tsx | 66 ++++++++++++++----- 1 file changed, 49 insertions(+), 17 deletions(-) diff --git a/apps/web/src/components/core/Button/Button.tsx b/apps/web/src/components/core/Button/Button.tsx index cc8bb5db9f..838ae7a1bd 100644 --- a/apps/web/src/components/core/Button/Button.tsx +++ b/apps/web/src/components/core/Button/Button.tsx @@ -1,7 +1,8 @@ import Link from 'next/link'; -import { ButtonHTMLAttributes, forwardRef } from 'react'; +import { ButtonHTMLAttributes, forwardRef, MouseEventHandler, useCallback } from 'react'; import styled, { css } from 'styled-components'; +import { GalleryElementTrackingProps, useTrack } from '~/shared/contexts/AnalyticsContext'; import colors from '~/shared/theme/colors'; import { InternalAnchorElementProps } from '~/types/Elements'; @@ -127,24 +128,55 @@ const StyledButton = styled.button` type ButtonProps = ButtonHTMLAttributes & StyledButtonProps & { pending?: boolean; - }; + } & GalleryElementTrackingProps; export const Button = forwardRef( - ({ type = 'button', pending, disabled, children, ...otherProps }: ButtonProps, ref) => ( - - {children} - - - - - ) + ( + { + type = 'button', + pending, + disabled, + children, + onClick, + eventElementId, + eventName, + properties, + ...otherProps + }: ButtonProps, + ref + ) => { + const track = useTrack(); + + const handleClick = useCallback>( + (event) => { + track('Button Click', { + id: eventElementId, + name: eventName, + ...properties, + }); + + onClick?.(event); + }, + [eventElementId, eventName, onClick, properties, track] + ); + + return ( + + {children} + + + + + ); + } ); Button.displayName = 'Button'; From 891fecca1e2cb16e2794bb8420d3587491f0cd56 Mon Sep 17 00:00:00 2001 From: Robinnnnn Date: Thu, 5 Oct 2023 15:13:58 -0400 Subject: [PATCH 03/21] refactor components, WizardFooter --- apps/web/pages/_/components.tsx | 64 +++++++------------ .../Onboarding/OnboardingFooter.tsx | 1 + apps/web/src/components/WizardFooter.tsx | 15 ++++- 3 files changed, 36 insertions(+), 44 deletions(-) diff --git a/apps/web/pages/_/components.tsx b/apps/web/pages/_/components.tsx index 10c9769164..f17517c2a3 100644 --- a/apps/web/pages/_/components.tsx +++ b/apps/web/pages/_/components.tsx @@ -1,7 +1,7 @@ import React, { PropsWithChildren, useMemo, useState } from 'react'; import styled from 'styled-components'; -import { Button, ButtonLink } from '~/components/core/Button/Button'; +import { Button } from '~/components/core/Button/Button'; import { HStack, VStack } from '~/components/core/Spacer/Stack'; import { BaseM, TitleM } from '~/components/core/Text/Text'; import { ProfilePictureStack } from '~/components/ProfilePicture/ProfilePictureStack'; @@ -48,58 +48,36 @@ export default function DesignPage() {
Button - - - - + + + - - - - + - - - -
- -
- ButtonLink - - primary - - primary - - - primary - - - primary - - - - - secondary - - - secondary - - - secondary - - - secondary - + +
@@ -180,7 +158,9 @@ export default function DesignPage() {
NFT Selector - +
diff --git a/apps/web/src/components/Onboarding/OnboardingFooter.tsx b/apps/web/src/components/Onboarding/OnboardingFooter.tsx index d5152541c8..62876b4601 100644 --- a/apps/web/src/components/Onboarding/OnboardingFooter.tsx +++ b/apps/web/src/components/Onboarding/OnboardingFooter.tsx @@ -27,6 +27,7 @@ export function OnboardingFooter({ return ( void | Promise; }; -export function WizardFooter({ onNext, onPrevious, isNextEnabled, nextText, previousText }: Props) { +export function WizardFooter({ + onNext, + onPrevious, + isNextEnabled, + nextText, + previousText, + step, +}: Props) { const [isLoading, setIsLoading] = useState(false); const reportError = useReportError(); @@ -57,6 +65,9 @@ export function WizardFooter({ onNext, onPrevious, isNextEnabled, nextText, prev )} - - - - - - - - - + + @@ -158,7 +158,7 @@ export default function DesignPage() {
NFT Selector - diff --git a/apps/web/src/components/Debugger/Debugger.tsx b/apps/web/src/components/Debugger/Debugger.tsx index 56b02d4ad2..838c94ce6b 100644 --- a/apps/web/src/components/Debugger/Debugger.tsx +++ b/apps/web/src/components/Debugger/Debugger.tsx @@ -126,7 +126,13 @@ const Debugger = () => { type="password" /> )} - + + Submit diff --git a/apps/web/src/components/Email/EmailForm.tsx b/apps/web/src/components/Email/EmailForm.tsx index 457392fafa..43cc1e8894 100644 --- a/apps/web/src/components/Email/EmailForm.tsx +++ b/apps/web/src/components/Email/EmailForm.tsx @@ -225,11 +225,19 @@ function EmailForm({ setIsEditMode, queryRef, onClose }: Props) { {showCancelButton && ( - )} diff --git a/apps/web/src/components/Feed/Posts/DeletePostConfirmation.tsx b/apps/web/src/components/Feed/Posts/DeletePostConfirmation.tsx index 70732eac7c..02583f00dc 100644 --- a/apps/web/src/components/Feed/Posts/DeletePostConfirmation.tsx +++ b/apps/web/src/components/Feed/Posts/DeletePostConfirmation.tsx @@ -34,7 +34,13 @@ export default function DeletePostConfirmation({ postDbid, communityId }: Props) This cannot be undone. - + Delete diff --git a/apps/web/src/components/GalleryEditor/CollectionCreateOrEditForm.tsx b/apps/web/src/components/GalleryEditor/CollectionCreateOrEditForm.tsx index 578285d6a4..852dd3397a 100644 --- a/apps/web/src/components/GalleryEditor/CollectionCreateOrEditForm.tsx +++ b/apps/web/src/components/GalleryEditor/CollectionCreateOrEditForm.tsx @@ -98,11 +98,22 @@ export function CollectionCreateOrEditForm({ {mode === 'creating' && ( - )} - + diff --git a/apps/web/src/components/GalleryEditor/CollectionSidebar/MoveCollectionModal.tsx b/apps/web/src/components/GalleryEditor/CollectionSidebar/MoveCollectionModal.tsx index c5bd70dbad..6bad779b27 100644 --- a/apps/web/src/components/GalleryEditor/CollectionSidebar/MoveCollectionModal.tsx +++ b/apps/web/src/components/GalleryEditor/CollectionSidebar/MoveCollectionModal.tsx @@ -193,6 +193,8 @@ export default function MoveCollectionModal({ )} - + diff --git a/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialog.tsx b/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialog.tsx index 7775ac71ab..d911699919 100644 --- a/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialog.tsx +++ b/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialog.tsx @@ -132,7 +132,12 @@ export default function OnboardingDialog({ step, text, onNext, onClose, options Tip {step} of {FINAL_STEP} - + {step === FINAL_STEP ? 'Finish' : 'Next'}{' '} diff --git a/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialogContext.tsx b/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialogContext.tsx index 7874f4ccfe..7578903cf0 100644 --- a/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialogContext.tsx +++ b/apps/web/src/components/GalleryEditor/GalleryOnboardingGuide/OnboardingDialogContext.tsx @@ -2,6 +2,7 @@ import { createContext, useCallback, useContext, useMemo, useState } from 'react import { graphql, useFragment } from 'react-relay'; import { OnboardingDialogContextFragment$key } from '~/generated/OnboardingDialogContextFragment.graphql'; +import { useTrack } from '~/shared/contexts/AnalyticsContext'; import useExperience from '~/utils/graphql/experiences/useExperience'; import isMac from '~/utils/isMac'; @@ -58,6 +59,8 @@ export function OnboardingDialogProvider({ children, queryRef }: OnboardingDialo queryRef: query, }); + const track = useTrack(); + const dismissUserExperience = useCallback(async () => { // Trick to dismiss the tooltip immediately while waiting for the mutation to finish setStep(0); @@ -65,13 +68,15 @@ export function OnboardingDialogProvider({ children, queryRef }: OnboardingDialo }, [setUserTooltipsExperienced]); const nextStep = useCallback(() => { + track('Web Editor Onboarding Next Step Click', { step }); + if (step === FINAL_STEP) { dismissUserExperience(); return; } setStep(step + 1); - }, [dismissUserExperience, step]); + }, [dismissUserExperience, step, track]); const currentStep = useMemo(() => { if (isUserTooltipsExperienced) return 0; diff --git a/apps/web/src/components/GalleryEditor/PiecesSidebar/AddWalletSidebar.tsx b/apps/web/src/components/GalleryEditor/PiecesSidebar/AddWalletSidebar.tsx index eff5a8e8d8..25d19781a2 100644 --- a/apps/web/src/components/GalleryEditor/PiecesSidebar/AddWalletSidebar.tsx +++ b/apps/web/src/components/GalleryEditor/PiecesSidebar/AddWalletSidebar.tsx @@ -60,7 +60,13 @@ export function AddWalletSidebar({ handleRefresh, selectedChain, queryRef }: Pro description={`You do not have any ${selectedChain} pieces`} > - diff --git a/apps/web/src/components/GalleryEditor/PiecesSidebar/CreatorEmptyStateSidebar.tsx b/apps/web/src/components/GalleryEditor/PiecesSidebar/CreatorEmptyStateSidebar.tsx index a126158846..90b153defb 100644 --- a/apps/web/src/components/GalleryEditor/PiecesSidebar/CreatorEmptyStateSidebar.tsx +++ b/apps/web/src/components/GalleryEditor/PiecesSidebar/CreatorEmptyStateSidebar.tsx @@ -15,6 +15,7 @@ export default function CreatorEmptyStateSidebar() { window.open('https://forms.gle/yJLK93LLw3618Y8y8', '_blank'); }, [track]); + // TODO: this content needs to be updated / changed return ( Are you a creator? @@ -22,7 +23,9 @@ export default function CreatorEmptyStateSidebar() { If you've created onchain work that you'd like to display in your Gallery, please provide details about your project and our team will handle the rest! - + ); } diff --git a/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx b/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx index dee43a7d0d..dfe15f2826 100644 --- a/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx +++ b/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx @@ -300,7 +300,14 @@ export function PiecesSidebar({ tokensRef, queryRef }: Props) { {!isSearching && shouldDisplayRefreshButtonGroup && ( - + {isLocked ? ( @@ -312,7 +319,13 @@ export function PiecesSidebar({ tokensRef, queryRef }: Props) { )} - + BLANK SPACE diff --git a/apps/web/src/components/ManageWallets/ManageWallets.tsx b/apps/web/src/components/ManageWallets/ManageWallets.tsx index f0e87925ee..a5382fc067 100644 --- a/apps/web/src/components/ManageWallets/ManageWallets.tsx +++ b/apps/web/src/components/ManageWallets/ManageWallets.tsx @@ -132,7 +132,14 @@ function ManageWallets({ newAddress, queryRef, onConnectWalletSuccess }: Props) - + Add new wallet diff --git a/apps/web/src/components/ManageWallets/ManageWalletsRow.tsx b/apps/web/src/components/ManageWallets/ManageWalletsRow.tsx index 0d5730f0de..360f4c9fa0 100644 --- a/apps/web/src/components/ManageWallets/ManageWalletsRow.tsx +++ b/apps/web/src/components/ManageWallets/ManageWalletsRow.tsx @@ -81,6 +81,8 @@ function ManageWalletsRow({ Are you sure you want to delete this gallery? - + Delete diff --git a/apps/web/src/components/NftSelector/NftSelectorView.tsx b/apps/web/src/components/NftSelector/NftSelectorView.tsx index 3424abc8a4..6a4dd9d93d 100644 --- a/apps/web/src/components/NftSelector/NftSelectorView.tsx +++ b/apps/web/src/components/NftSelector/NftSelectorView.tsx @@ -172,7 +172,13 @@ export function NftSelectorView({ No NFTs found, try another wallet? - diff --git a/apps/web/src/components/Notifications/notifications/NewTokens.tsx b/apps/web/src/components/Notifications/notifications/NewTokens.tsx index 4513d09773..6f05ed3da7 100644 --- a/apps/web/src/components/Notifications/notifications/NewTokens.tsx +++ b/apps/web/src/components/Notifications/notifications/NewTokens.tsx @@ -11,7 +11,6 @@ import { useModalActions } from '~/contexts/modal/ModalContext'; import { NewTokensFragment$key } from '~/generated/NewTokensFragment.graphql'; import { NewTokensTokenPreviewFragment$key } from '~/generated/NewTokensTokenPreviewFragment.graphql'; import { useIsMobileWindowWidth } from '~/hooks/useWindowSize'; -import { useTrack } from '~/shared/contexts/AnalyticsContext'; import { useGetSinglePreviewImage } from '~/shared/relay/useGetPreviewImages'; import colors from '~/shared/theme/colors'; @@ -41,7 +40,6 @@ export function NewTokens({ notificationRef, onClose }: Props) { const { token } = notification; const isMobile = useIsMobileWindowWidth(); - const track = useTrack(); const { showModal } = useModalActions(); if (token?.__typename !== 'Token') { @@ -51,14 +49,13 @@ export function NewTokens({ notificationRef, onClose }: Props) { const quantity = notification.count ?? 1; const handleCreatePostClick = useCallback(() => { - track('NFT Detail: Clicked Create Post'); showModal({ content: , headerVariant: 'thicc', isFullPage: isMobile, }); onClose(); - }, [isMobile, onClose, showModal, token, track]); + }, [isMobile, onClose, showModal, token]); return ( @@ -79,7 +76,13 @@ export function NewTokens({ notificationRef, onClose }: Props) { - + Post diff --git a/apps/web/src/components/Posts/DiscardPostConfirmation.tsx b/apps/web/src/components/Posts/DiscardPostConfirmation.tsx index 238c1d3876..b5aa768a44 100644 --- a/apps/web/src/components/Posts/DiscardPostConfirmation.tsx +++ b/apps/web/src/components/Posts/DiscardPostConfirmation.tsx @@ -32,12 +32,21 @@ export default function DiscardPostConfirmation({ onSaveDraft, onDiscard }: Prop If you go back now, this post will be discarded. - + SAVE DRAFT - + DISCARD diff --git a/apps/web/src/components/Posts/PostComposer.tsx b/apps/web/src/components/Posts/PostComposer.tsx index 8a49c7e86d..25c7451d31 100644 --- a/apps/web/src/components/Posts/PostComposer.tsx +++ b/apps/web/src/components/Posts/PostComposer.tsx @@ -168,6 +168,8 @@ export default function PostComposer({ onBackClick, tokenId }: Props) { )} + Learn more about the app diff --git a/apps/web/src/components/Settings/Settings.tsx b/apps/web/src/components/Settings/Settings.tsx index bde547bffb..7fd1cbcd63 100644 --- a/apps/web/src/components/Settings/Settings.tsx +++ b/apps/web/src/components/Settings/Settings.tsx @@ -70,7 +70,12 @@ function Settings({ queryRef, onLogout, header }: Props) { - + Sign Out diff --git a/apps/web/src/components/Twitter/TwitterFollowingModal.tsx b/apps/web/src/components/Twitter/TwitterFollowingModal.tsx index be785cae86..c4f514c54f 100644 --- a/apps/web/src/components/Twitter/TwitterFollowingModal.tsx +++ b/apps/web/src/components/Twitter/TwitterFollowingModal.tsx @@ -274,10 +274,17 @@ export default function TwitterFollowingModal({ followingRef, queryRef }: Props) - + SKIP - @@ -110,7 +115,14 @@ export default function TwitterSetting({ queryRef }: Props) { - CONNECT + + CONNECT + diff --git a/apps/web/src/components/UpsellBanner/UpsellBanner.tsx b/apps/web/src/components/UpsellBanner/UpsellBanner.tsx index 00792b3a60..087d0fbfac 100644 --- a/apps/web/src/components/UpsellBanner/UpsellBanner.tsx +++ b/apps/web/src/components/UpsellBanner/UpsellBanner.tsx @@ -52,6 +52,7 @@ export function UpsellBanner({ queryRef }: Props) { onClose={handleClose} onClick={handleConnectWallet} ctaText="Connect" + experienceFlag="UpsellBanner" /> ); } diff --git a/apps/web/src/components/WalletSelector/GnosisSafePendingMessage.tsx b/apps/web/src/components/WalletSelector/GnosisSafePendingMessage.tsx index 0112590775..fcd1a76e03 100644 --- a/apps/web/src/components/WalletSelector/GnosisSafePendingMessage.tsx +++ b/apps/web/src/components/WalletSelector/GnosisSafePendingMessage.tsx @@ -94,8 +94,20 @@ function GnosisSafePendingMessage({ description="We detected that you previously tried signing a message. Would you like to try authenticating again using the same transaction?" > - - No, sign new message + + + No, sign new message + ) : ( diff --git a/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx b/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx index f657c2b254..a92a82d62d 100644 --- a/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx +++ b/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx @@ -47,7 +47,14 @@ export default function DelegateCashMessage({ reset }: Props) { Twitter. - + ); diff --git a/apps/web/src/components/WalletSelector/multichain/EthereumAddWallet.tsx b/apps/web/src/components/WalletSelector/multichain/EthereumAddWallet.tsx index eadf258cd4..372b474936 100644 --- a/apps/web/src/components/WalletSelector/multichain/EthereumAddWallet.tsx +++ b/apps/web/src/components/WalletSelector/multichain/EthereumAddWallet.tsx @@ -225,7 +225,13 @@ export const EthereumAddWallet = ({ queryRef, reset, onSuccess = noop }: Props) extension and try again. - attemptAddWallet(account)} disabled={isConnecting}> + attemptAddWallet(account)} + disabled={isConnecting} + > {isConnecting ? 'Connecting...' : 'Confirm'} diff --git a/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx b/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx index 0b2c030f2a..a1e851e253 100644 --- a/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx +++ b/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx @@ -121,10 +121,17 @@ export default function MagicLinkLogin({ reset }: Props) { /> {errorMessage && } - + @@ -236,7 +242,13 @@ export default function GlobalAnnouncementPopover({ queryRef }: Props) { Share your taste with the world. - + ) : ( @@ -254,8 +266,19 @@ export default function GlobalAnnouncementPopover({ queryRef }: Props) { - - + @@ -369,7 +392,13 @@ export default function GlobalAnnouncementPopover({ queryRef }: Props) { Share your taste with the world. - + ) diff --git a/apps/web/src/contexts/globalLayout/GlobalNavbar/EditGalleryNavbar/EditGalleryNavbar.tsx b/apps/web/src/contexts/globalLayout/GlobalNavbar/EditGalleryNavbar/EditGalleryNavbar.tsx index e1af8af023..fa2860a29a 100644 --- a/apps/web/src/contexts/globalLayout/GlobalNavbar/EditGalleryNavbar/EditGalleryNavbar.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalNavbar/EditGalleryNavbar/EditGalleryNavbar.tsx @@ -117,7 +117,16 @@ export function EditGalleryNavbar({ const doneButton = useMemo(() => { if (doneAction === 'no-changes') { - return Done; + return ( + + Done + + ); } else if (doneAction === 'saved') { return ( <> @@ -125,7 +134,13 @@ export function EditGalleryNavbar({ Saved - + Done @@ -137,7 +152,13 @@ export function EditGalleryNavbar({ return ( <> Unsaved changes - + Save diff --git a/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx b/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx index d23bcbcff6..72c727a43d 100644 --- a/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx @@ -194,7 +194,13 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR if (showShowMultiGalleryButton) { return ( - diff --git a/apps/web/src/contexts/globalLayout/GlobalNavbar/SignInButton.tsx b/apps/web/src/contexts/globalLayout/GlobalNavbar/SignInButton.tsx index f7e9f8c10d..27993a9576 100644 --- a/apps/web/src/contexts/globalLayout/GlobalNavbar/SignInButton.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalNavbar/SignInButton.tsx @@ -9,7 +9,15 @@ import colors from '~/shared/theme/colors'; export function SignInButton() { const showAuthModal = useAuthModal('sign-in'); - return ; + return ( + + ); } const SignInWrapper = styled(TextButton)` diff --git a/apps/web/src/contexts/globalLayout/GlobalNavbar/SignUpButton.tsx b/apps/web/src/contexts/globalLayout/GlobalNavbar/SignUpButton.tsx index cfb2c50197..44a30bcc9d 100644 --- a/apps/web/src/contexts/globalLayout/GlobalNavbar/SignUpButton.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalNavbar/SignUpButton.tsx @@ -6,7 +6,16 @@ import useAuthModal from '~/hooks/useAuthModal'; export function SignUpButton() { const showAuthModal = useAuthModal('sign-up'); - return Sign up; + return ( + + Sign up + + ); } const StyledButton = styled(Button)` diff --git a/apps/web/src/scenes/CollectionGalleryPage/CollectionGalleryHeader.tsx b/apps/web/src/scenes/CollectionGalleryPage/CollectionGalleryHeader.tsx index ad57efc36b..30eb1c8779 100644 --- a/apps/web/src/scenes/CollectionGalleryPage/CollectionGalleryHeader.tsx +++ b/apps/web/src/scenes/CollectionGalleryPage/CollectionGalleryHeader.tsx @@ -1,4 +1,3 @@ -import { route } from 'nextjs-routes'; import { useCallback, useMemo } from 'react'; import { graphql, useFragment } from 'react-relay'; import styled from 'styled-components'; @@ -97,15 +96,6 @@ function CollectionGalleryHeader({ gallery: { dbid: galleryId }, } = collection; - const handleShareClick = useCallback(() => { - track('Share Collection', { - path: route({ - pathname: '/[username]/[collectionId]', - query: { username: username as string, collectionId }, - }), - }); - }, [collectionId, username, track]); - const showEditActions = username?.toLowerCase() === query.viewer?.user?.username?.toLowerCase(); const collectionUrl = window.location.href; @@ -186,7 +176,13 @@ function CollectionGalleryHeader({ {showEditActions ? ( <> - + {/* On mobile, we show these options in the navbar, not in header */} @@ -214,7 +210,13 @@ function CollectionGalleryHeader({ ) : ( - + )} diff --git a/apps/web/src/scenes/CommunityPage/CommunityPageMetadata.tsx b/apps/web/src/scenes/CommunityPage/CommunityPageMetadata.tsx index e7b5f697a5..02e6a6e693 100644 --- a/apps/web/src/scenes/CommunityPage/CommunityPageMetadata.tsx +++ b/apps/web/src/scenes/CommunityPage/CommunityPageMetadata.tsx @@ -18,7 +18,6 @@ import { CommunityPageMetadataFragment$key } from '~/generated/CommunityPageMeta import { CommunityPageMetadataQueryFragment$key } from '~/generated/CommunityPageMetadataQueryFragment.graphql'; import { useIsMobileWindowWidth } from '~/hooks/useWindowSize'; import { PlusSquareIcon } from '~/icons/PlusSquareIcon'; -import { useTrack } from '~/shared/contexts/AnalyticsContext'; import colors from '~/shared/theme/colors'; import { chains } from '~/shared/utils/chains'; import { getExternalAddressLink, truncateAddress } from '~/shared/utils/wallet'; @@ -94,12 +93,10 @@ export default function CommunityPageMetadata({ communityRef, queryRef }: Props) const { isMemberOfCommunity, refetchIsMemberOfCommunity } = useIsMemberOfCommunity(); - const track = useTrack(); const { showModal } = useModalActions(); const isMobile = useIsMobileWindowWidth(); const handleCreatePostClick = useCallback(() => { - track('Community Page: Clicked Enabled Post Button'); if (query?.viewer?.__typename !== 'Viewer') { return; } @@ -116,10 +113,9 @@ export default function CommunityPageMetadata({ communityRef, queryRef }: Props) headerVariant: 'thicc', isFullPage: isMobile, }); - }, [track, showModal, query, community.name, community.contractAddress?.address, isMobile]); + }, [showModal, query, community.name, community.contractAddress?.address, isMobile]); const handleDisabledPostButtonClick = useCallback(() => { - track('Community Page: Clicked Disabled Post Button'); showModal({ content: ( {showPostButton && (isMemberOfCommunity ? ( - + Post ) : ( - + Post diff --git a/apps/web/src/scenes/CommunityPage/CommunityPageOwnershipRequiredModal.tsx b/apps/web/src/scenes/CommunityPage/CommunityPageOwnershipRequiredModal.tsx index 843ed6e33e..9d114d7667 100644 --- a/apps/web/src/scenes/CommunityPage/CommunityPageOwnershipRequiredModal.tsx +++ b/apps/web/src/scenes/CommunityPage/CommunityPageOwnershipRequiredModal.tsx @@ -53,13 +53,26 @@ export default function CommunityPageOwnershipRequiredModal({ not displaying try refreshing your collection. - - diff --git a/apps/web/src/scenes/CommunityPage/CommunityPagePostsTab.tsx b/apps/web/src/scenes/CommunityPage/CommunityPagePostsTab.tsx index 820f86c62e..dca059ce04 100644 --- a/apps/web/src/scenes/CommunityPage/CommunityPagePostsTab.tsx +++ b/apps/web/src/scenes/CommunityPage/CommunityPagePostsTab.tsx @@ -115,7 +115,14 @@ export default function CommunityPagePostsTab({ communityRef, queryRef }: Props) {community.name ? {community.name} : 'this community'} and inspire others! - Create a Post + + Create a Post + ) : ( diff --git a/apps/web/src/scenes/CommunityPage/CommunityPageViewHeader.tsx b/apps/web/src/scenes/CommunityPage/CommunityPageViewHeader.tsx index f24e31e4a3..b4f165e6af 100644 --- a/apps/web/src/scenes/CommunityPage/CommunityPageViewHeader.tsx +++ b/apps/web/src/scenes/CommunityPage/CommunityPageViewHeader.tsx @@ -132,6 +132,9 @@ export default function CommunityPageViewHeader({ communityRef, queryRef }: Prop if (!description) { return null; } + + const buttonText = showExpandedDescription ? 'Show Less' : 'Show More'; + return ( @@ -139,7 +142,10 @@ export default function CommunityPageViewHeader({ communityRef, queryRef }: Prop {isLineClampEnabled && ( )} diff --git a/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx b/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx index 99fd26f4f1..5077b95919 100644 --- a/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx +++ b/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx @@ -36,7 +36,13 @@ export default function MobileAppLandingPage() { target="_blank" rel="noreferrer" > - Download The App + + Download The App + diff --git a/apps/web/src/scenes/MembershipMintPage/CustomizedGeneralMembershipMintPage.tsx b/apps/web/src/scenes/MembershipMintPage/CustomizedGeneralMembershipMintPage.tsx index a94c20a3ec..a527c9a166 100644 --- a/apps/web/src/scenes/MembershipMintPage/CustomizedGeneralMembershipMintPage.tsx +++ b/apps/web/src/scenes/MembershipMintPage/CustomizedGeneralMembershipMintPage.tsx @@ -162,18 +162,27 @@ export function CustomizedGeneralMembershipMintPage({ - + ); } return active ? ( - ) : ( - + ); }, [ active, diff --git a/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx b/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx index 2b349ae983..7b5ed11984 100644 --- a/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx +++ b/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx @@ -143,11 +143,18 @@ export function MembershipMintPage({ } return active ? ( - ) : ( - + ); }, [ active, diff --git a/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx b/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx index 83db52913c..669de56486 100644 --- a/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx +++ b/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx @@ -57,7 +57,13 @@ export default function MintButton({ onMintSuccess, quantity, tokenId }: Props) return ( <> - + {buttonText} diff --git a/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx b/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx index 73b654fb0e..803d970df2 100644 --- a/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx +++ b/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx @@ -124,7 +124,14 @@ export default function MerchStorePage({ queryRef }: Props) { - Redeem + + Redeem + Physical redemption is now available. diff --git a/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx b/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx index 05f6f4d55c..20ff7afb3e 100644 --- a/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx +++ b/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx @@ -158,7 +158,14 @@ export default function PurchaseBox({ )} {!soldOut && ( - + Purchase )} @@ -251,6 +258,9 @@ export default function PurchaseBox({ ) ) : ( { setIsReceiptState(false); }} diff --git a/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx b/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx index 6a13ebf3ee..e70101d7c4 100644 --- a/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx +++ b/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx @@ -64,7 +64,12 @@ export default function RedeemedPage({ merchTokenRefs }: Props) { })} - + Redeem on shopify @@ -76,7 +81,7 @@ export default function RedeemedPage({ merchTokenRefs }: Props) { You have not redeemed any items yet. - + Close diff --git a/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx b/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx index 72f6f6bca7..69d8081164 100644 --- a/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx +++ b/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx @@ -106,7 +106,13 @@ export default function ToRedeemPage({ onToggle, merchTokenRefs }: Props) { - + Redeem @@ -117,7 +123,9 @@ export default function ToRedeemPage({ onToggle, merchTokenRefs }: Props) { You do not have any merchandise to redeem. - Close + + Close + )} diff --git a/apps/web/src/scenes/MintPages/MintButton.tsx b/apps/web/src/scenes/MintPages/MintButton.tsx index b07cb7c337..6677391f0a 100644 --- a/apps/web/src/scenes/MintPages/MintButton.tsx +++ b/apps/web/src/scenes/MintPages/MintButton.tsx @@ -60,7 +60,13 @@ export default function MintButton({ onMintSuccess }: Props) { return ( <> - + {buttonText} {transactionHash && ( diff --git a/apps/web/src/scenes/Modals/GenericActionModal.tsx b/apps/web/src/scenes/Modals/GenericActionModal.tsx index b6fa6ff573..81f064e59b 100644 --- a/apps/web/src/scenes/Modals/GenericActionModal.tsx +++ b/apps/web/src/scenes/Modals/GenericActionModal.tsx @@ -27,7 +27,14 @@ export default function GenericActionModal({ {bodyText} - {buttonText} + + {buttonText} + ); diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx index 2e259da1dc..bfaf3cf842 100644 --- a/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx +++ b/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx @@ -132,6 +132,9 @@ function NoteEditor({ nftCollectorsNote, tokenId, collectionId }: NoteEditorProp {isEditing ? ( MAX_CHAR_COUNT} text="Save Note" onClick={handleSubmitCollectorsNote} @@ -140,6 +143,9 @@ function NoteEditor({ nftCollectorsNote, tokenId, collectionId }: NoteEditorProp ) : ( diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx index 95da5cec11..5b7dd8d98b 100644 --- a/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx +++ b/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx @@ -151,13 +151,12 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) { const { showModal } = useModalActions(); const handleCreatePostClick = useCallback(() => { - track('NFT Detail: Clicked Create Post'); showModal({ content: , headerVariant: 'thicc', isFullPage: isMobile, }); - }, [isMobile, showModal, token, track]); + }, [isMobile, showModal, token]); return ( @@ -234,14 +233,29 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) { - Buy Now + + Buy Now + )} ) : null} - {authenticatedUserOwnsAsset && } + {authenticatedUserOwnsAsset && ( + + )} {poapMoreInfoUrl || poapUrl ? ( @@ -250,8 +264,24 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) { ) : null} - {!showDetails && } - {showDetails && } + {!showDetails && ( + + )} + {showDetails && ( + + )} ); diff --git a/apps/web/src/scenes/UserGalleryPage/EditUserInfoModal.tsx b/apps/web/src/scenes/UserGalleryPage/EditUserInfoModal.tsx index f413105366..6e3cd9d58a 100644 --- a/apps/web/src/scenes/UserGalleryPage/EditUserInfoModal.tsx +++ b/apps/web/src/scenes/UserGalleryPage/EditUserInfoModal.tsx @@ -94,7 +94,14 @@ function EditUserInfoModal({ queryRef }: Props) { {/* TODO [GAL-256]: This spacer and button should be part of a new ModalFooter */} - diff --git a/apps/web/src/scenes/UserGalleryPage/EmptyGallery.tsx b/apps/web/src/scenes/UserGalleryPage/EmptyGallery.tsx index 24bb553c40..b442b81534 100644 --- a/apps/web/src/scenes/UserGalleryPage/EmptyGallery.tsx +++ b/apps/web/src/scenes/UserGalleryPage/EmptyGallery.tsx @@ -50,7 +50,14 @@ export function EmptyAuthenticatedUsersGallery({ galleryId }: EmptyAuthenticated Get started below and showcase your collection. - + ); } diff --git a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollection.tsx b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollection.tsx index 20543463ef..2ac4f9c8bd 100644 --- a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollection.tsx +++ b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollection.tsx @@ -109,10 +109,6 @@ function UserGalleryCollection({ } }, [collectionElHeight, onLoad, cacheHeight]); - const handleShareClick = useCallback(() => { - track('Share Collection', { path: collectionUrl }); - }, [track, collectionUrl]); - const [updateCollectionInfo] = useUpdateCollectionInfo(); const handleEditNameClick = useCallback(() => { showModal({ @@ -145,7 +141,12 @@ function UserGalleryCollection({ - + diff --git a/apps/web/src/scenes/UserGalleryPage/UserNameAndDescriptionHeader.tsx b/apps/web/src/scenes/UserGalleryPage/UserNameAndDescriptionHeader.tsx index 75b5bb8153..4a99bde140 100644 --- a/apps/web/src/scenes/UserGalleryPage/UserNameAndDescriptionHeader.tsx +++ b/apps/web/src/scenes/UserGalleryPage/UserNameAndDescriptionHeader.tsx @@ -162,7 +162,14 @@ const ExpandableBio = ({ text }: { text: string }) => { CustomInternalLinkComponent={NftDetailViewer} /> - {isExpanded ? null : } + {isExpanded ? null : ( + + )} ); }; diff --git a/apps/web/src/scenes/WelcomeAnimation/WelcomeAnimation.tsx b/apps/web/src/scenes/WelcomeAnimation/WelcomeAnimation.tsx index 739cccd955..952057a996 100644 --- a/apps/web/src/scenes/WelcomeAnimation/WelcomeAnimation.tsx +++ b/apps/web/src/scenes/WelcomeAnimation/WelcomeAnimation.tsx @@ -106,7 +106,14 @@ export default function WelcomeAnimation() { arrange, and display your collection exactly how it was meant to be. - Enter Gallery + + Enter Gallery + {animatedImages.map((animatedImage) => ( diff --git a/packages/shared/src/contexts/AnalyticsContext.tsx b/packages/shared/src/contexts/AnalyticsContext.tsx index 0a34fe08b6..edf44032e0 100644 --- a/packages/shared/src/contexts/AnalyticsContext.tsx +++ b/packages/shared/src/contexts/AnalyticsContext.tsx @@ -19,9 +19,17 @@ export type GalleryElementTrackingProps = { // this should be unique across the app. // e.g. `Feed Username Button` eventElementId: string | null; - // name of the action. this can be duplicated. + // a generalized name of the action. this can be duplicated + // across several elements, if several elements can trigger + // the same event. // e.g. `Follow User` eventName: string | null; + // a bucket, category, or general location for the event. + // e.g. `Authentication`, `Web Editor` + eventContext?: string | null; + // an explicit user flow that the event falls into + // e.g. `Add Wallet Flow` or `Post Flow` + eventFlow?: string | null; // custom metadata. // e.g. { variant: 'Worldwide' } properties?: EventProps; From 39c2640262c0795b0fba083ca50bb9ac9ec8337a Mon Sep 17 00:00:00 2001 From: Robinnnnn Date: Fri, 6 Oct 2023 11:40:55 -0400 Subject: [PATCH 06/21] begin adding contexts --- apps/web/src/components/Email/EmailForm.tsx | 3 +++ .../src/components/Email/EmailVerificationStatus.tsx | 2 ++ .../Feed/Events/UserFollowedUsersFeedEvent.tsx | 11 +++++++---- apps/web/src/components/Feed/LatestFollowingFeed.tsx | 2 ++ packages/shared/src/analytics/constants.ts | 4 ++++ 5 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 packages/shared/src/analytics/constants.ts diff --git a/apps/web/src/components/Email/EmailForm.tsx b/apps/web/src/components/Email/EmailForm.tsx index 43cc1e8894..72a1f2c4ee 100644 --- a/apps/web/src/components/Email/EmailForm.tsx +++ b/apps/web/src/components/Email/EmailForm.tsx @@ -7,6 +7,7 @@ import styled from 'styled-components'; import { useToastActions } from '~/contexts/toast/ToastContext'; import { EmailFormFragment$key } from '~/generated/EmailFormFragment.graphql'; import { EmailFormMutation } from '~/generated/EmailFormMutation.graphql'; +import { contexts } from '~/shared/analytics/constants'; import { AdditionalContext, useReportError } from '~/shared/contexts/ErrorReportingContext'; import useDebounce from '~/shared/hooks/useDebounce'; import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation'; @@ -228,6 +229,7 @@ function EmailForm({ setIsEditMode, queryRef, onClose }: Props) { - - - - - - - - - + +
@@ -158,7 +182,12 @@ export default function DesignPage() {
NFT Selector - diff --git a/apps/web/src/components/Debugger/Debugger.tsx b/apps/web/src/components/Debugger/Debugger.tsx index 838c94ce6b..739c7ab223 100644 --- a/apps/web/src/components/Debugger/Debugger.tsx +++ b/apps/web/src/components/Debugger/Debugger.tsx @@ -130,6 +130,7 @@ const Debugger = () => { diff --git a/apps/web/src/components/Feed/Events/UserFollowedUsersFeedEvent.tsx b/apps/web/src/components/Feed/Events/UserFollowedUsersFeedEvent.tsx index eec80d6372..03d393a5cc 100644 --- a/apps/web/src/components/Feed/Events/UserFollowedUsersFeedEvent.tsx +++ b/apps/web/src/components/Feed/Events/UserFollowedUsersFeedEvent.tsx @@ -130,7 +130,7 @@ export default function UserFollowedUsersFeedEvent({ (e) => { e.preventDefault(); track('Clicked See more followed users event', { - context: contexts['Web Feed'], + context: contexts.Feed, }); showModal({ content: ( @@ -198,6 +198,7 @@ export default function UserFollowedUsersFeedEvent({ // already tracked above eventElementId={null} eventName={null} + eventContext={null} > See All diff --git a/apps/web/src/components/Feed/LatestFollowingFeed.tsx b/apps/web/src/components/Feed/LatestFollowingFeed.tsx index b6a19accab..fe8a021fb8 100644 --- a/apps/web/src/components/Feed/LatestFollowingFeed.tsx +++ b/apps/web/src/components/Feed/LatestFollowingFeed.tsx @@ -90,7 +90,7 @@ export function LatestFollowingFeed({ onSeeAll, queryRef }: Props) { diff --git a/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx b/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx index dfe15f2826..22a2ea2758 100644 --- a/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx +++ b/apps/web/src/components/GalleryEditor/PiecesSidebar/PiecesSidebar.tsx @@ -14,6 +14,7 @@ import { PiecesSidebarFragment$key } from '~/generated/PiecesSidebarFragment.gra import { PiecesSidebarViewerFragment$key } from '~/generated/PiecesSidebarViewerFragment.graphql'; import useSyncTokens from '~/hooks/api/tokens/useSyncTokens'; import { RefreshIcon } from '~/icons/RefreshIcon'; +import { contexts } from '~/shared/analytics/constants'; import colors from '~/shared/theme/colors'; import { ChainMetadata, chainsMap } from '~/shared/utils/chains'; import { doesUserOwnWalletFromChainFamily } from '~/utils/doesUserOwnWalletFromChainFamily'; @@ -303,7 +304,7 @@ export function PiecesSidebar({ tokensRef, queryRef }: Props) { diff --git a/apps/web/src/components/ManageWallets/ManageWallets.tsx b/apps/web/src/components/ManageWallets/ManageWallets.tsx index a5382fc067..30e7867632 100644 --- a/apps/web/src/components/ManageWallets/ManageWallets.tsx +++ b/apps/web/src/components/ManageWallets/ManageWallets.tsx @@ -9,6 +9,7 @@ import SettingsRowDescription from '~/components/Settings/SettingsRowDescription import { useToastActions } from '~/contexts/toast/ToastContext'; import { ManageWalletsFragment$key } from '~/generated/ManageWalletsFragment.graphql'; import useAddWalletModal from '~/hooks/useAddWalletModal'; +import { contexts } from '~/shared/analytics/constants'; import { removeNullValues } from '~/shared/relay/removeNullValues'; import { graphqlTruncateAddress, truncateAddress } from '~/shared/utils/wallet'; @@ -135,7 +136,7 @@ function ManageWallets({ newAddress, queryRef, onConnectWalletSuccess }: Props) diff --git a/apps/web/src/components/Notifications/notifications/NewTokens.tsx b/apps/web/src/components/Notifications/notifications/NewTokens.tsx index 6f05ed3da7..d996fa024c 100644 --- a/apps/web/src/components/Notifications/notifications/NewTokens.tsx +++ b/apps/web/src/components/Notifications/notifications/NewTokens.tsx @@ -11,6 +11,7 @@ import { useModalActions } from '~/contexts/modal/ModalContext'; import { NewTokensFragment$key } from '~/generated/NewTokensFragment.graphql'; import { NewTokensTokenPreviewFragment$key } from '~/generated/NewTokensTokenPreviewFragment.graphql'; import { useIsMobileWindowWidth } from '~/hooks/useWindowSize'; +import { contexts } from '~/shared/analytics/constants'; import { useGetSinglePreviewImage } from '~/shared/relay/useGetPreviewImages'; import colors from '~/shared/theme/colors'; @@ -79,7 +80,7 @@ export function NewTokens({ notificationRef, onClose }: Props) { diff --git a/apps/web/src/components/Posts/DiscardPostConfirmation.tsx b/apps/web/src/components/Posts/DiscardPostConfirmation.tsx index b5aa768a44..b335421069 100644 --- a/apps/web/src/components/Posts/DiscardPostConfirmation.tsx +++ b/apps/web/src/components/Posts/DiscardPostConfirmation.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { useModalActions } from '~/contexts/modal/ModalContext'; import { EditPencilIcon } from '~/icons/EditPencilIcon'; import { TrashIconNew } from '~/icons/TrashIconNew'; +import { contexts } from '~/shared/analytics/constants'; import colors from '~/shared/theme/colors'; import { Button } from '../core/Button/Button'; @@ -35,6 +36,7 @@ export default function DiscardPostConfirmation({ onSaveDraft, onDiscard }: Prop @@ -45,6 +47,7 @@ export default function DiscardPostConfirmation({ onSaveDraft, onDiscard }: Prop diff --git a/apps/web/src/components/Posts/PostComposer.tsx b/apps/web/src/components/Posts/PostComposer.tsx index 25c7451d31..f3643d5b3f 100644 --- a/apps/web/src/components/Posts/PostComposer.tsx +++ b/apps/web/src/components/Posts/PostComposer.tsx @@ -11,6 +11,7 @@ import { PostComposerTokenFragment$key } from '~/generated/PostComposerTokenFrag import useCreatePost from '~/hooks/api/posts/useCreatePost'; import AlertTriangleIcon from '~/icons/AlertTriangleIcon'; import { ChevronLeftIcon } from '~/icons/ChevronLeftIcon'; +import { contexts } from '~/shared/analytics/constants'; import { useTrack } from '~/shared/contexts/AnalyticsContext'; import { useReportError } from '~/shared/contexts/ErrorReportingContext'; import colors from '~/shared/theme/colors'; @@ -170,6 +171,7 @@ export default function PostComposer({ onBackClick, tokenId }: Props) { @@ -174,13 +174,19 @@ export function CustomizedGeneralMembershipMintPage({ ) : ( - ); diff --git a/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx b/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx index 7b5ed11984..59cbd55e46 100644 --- a/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx +++ b/apps/web/src/scenes/MembershipMintPage/MembershipMintPage.tsx @@ -146,13 +146,19 @@ export function MembershipMintPage({ ) : ( - ); diff --git a/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx b/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx index 669de56486..3b4a224d2f 100644 --- a/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx +++ b/apps/web/src/scenes/MerchStorePage/MerchMintButton.tsx @@ -10,6 +10,7 @@ import { useToastActions } from '~/contexts/toast/ToastContext'; import { useMintMerchContract } from '~/hooks/useContract'; import useMintContractWithQuantity from '~/hooks/useMintContractWithQuantity'; import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize'; +import { contexts } from '~/shared/analytics/constants'; import colors from '~/shared/theme/colors'; import { MAX_NFTS_PER_WALLET } from './constants'; @@ -60,7 +61,7 @@ export default function MintButton({ onMintSuccess, quantity, tokenId }: Props) diff --git a/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx b/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx index 803d970df2..8f74d8033d 100644 --- a/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx +++ b/apps/web/src/scenes/MerchStorePage/MerchStorePage.tsx @@ -13,6 +13,7 @@ import { MerchStorePageQueryFragment$key } from '~/generated/MerchStorePageQuery import useAuthModal from '~/hooks/useAuthModal'; import LogoBracketLeft from '~/icons/LogoBracketLeft'; import LogoBracketRight from '~/icons/LogoBracketRight'; +import { contexts } from '~/shared/analytics/constants'; import { useLoggedInUserId } from '~/shared/relay/useLoggedInUserId'; import colors from '~/shared/theme/colors'; @@ -127,7 +128,7 @@ export default function MerchStorePage({ queryRef }: Props) { Redeem diff --git a/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx b/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx index 20ff7afb3e..444f6b1025 100644 --- a/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx +++ b/apps/web/src/scenes/MerchStorePage/PurchaseBox.tsx @@ -13,6 +13,7 @@ import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize'; import CircleMinusIcon from '~/icons/CircleMinusIcon'; import CirclePlusIcon from '~/icons/CirclePlusIcon'; import { DecoratedCloseIcon } from '~/icons/CloseIcon'; +import { contexts } from '~/shared/analytics/constants'; import colors from '~/shared/theme/colors'; import { MAX_NFTS_PER_WALLET } from './constants'; @@ -161,7 +162,7 @@ export default function PurchaseBox({ { setIsReceiptState(false); }} diff --git a/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx b/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx index e70101d7c4..8b19885511 100644 --- a/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx +++ b/apps/web/src/scenes/MerchStorePage/Redemption/RedeemedPage.tsx @@ -8,6 +8,7 @@ import { BaseM } from '~/components/core/Text/Text'; import { useModalActions } from '~/contexts/modal/ModalContext'; import { RedeemedPageFragment$key } from '~/generated/RedeemedPageFragment.graphql'; import ArrowUpRightIcon from '~/icons/ArrowUpRightIcon'; +import { contexts } from '~/shared/analytics/constants'; import { REDEEMED_STATUS } from '../constants'; import { getObjectName } from '../getObjectName'; @@ -67,7 +68,7 @@ export default function RedeemedPage({ merchTokenRefs }: Props) { @@ -81,7 +82,12 @@ export default function RedeemedPage({ merchTokenRefs }: Props) { You have not redeemed any items yet. - + Close diff --git a/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx b/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx index 69d8081164..0c381dd9e8 100644 --- a/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx +++ b/apps/web/src/scenes/MerchStorePage/Redemption/ToRedeemPage.tsx @@ -8,6 +8,7 @@ import { VStack } from '~/components/core/Spacer/Stack'; import { BaseM } from '~/components/core/Text/Text'; import { useModalActions } from '~/contexts/modal/ModalContext'; import { ToRedeemPageFragment$key } from '~/generated/ToRedeemPageFragment.graphql'; +import { contexts } from '~/shared/analytics/constants'; import { getObjectName } from '../getObjectName'; import RedeemItem from './RedeemItem'; @@ -109,7 +110,7 @@ export default function ToRedeemPage({ onToggle, merchTokenRefs }: Props) { @@ -123,7 +124,12 @@ export default function ToRedeemPage({ onToggle, merchTokenRefs }: Props) { You do not have any merchandise to redeem. - + Close diff --git a/apps/web/src/scenes/MintPages/MintButton.tsx b/apps/web/src/scenes/MintPages/MintButton.tsx index 6677391f0a..13b6cf6347 100644 --- a/apps/web/src/scenes/MintPages/MintButton.tsx +++ b/apps/web/src/scenes/MintPages/MintButton.tsx @@ -10,6 +10,7 @@ import { TransactionStatus } from '~/constants/transaction'; import { useToastActions } from '~/contexts/toast/ToastContext'; import { useMintMementosContract, WagmiContract } from '~/hooks/useContract'; import useMintContract from '~/hooks/useMintContract'; +import { contexts } from '~/shared/analytics/constants'; import { ALLOWLIST_URL, MEMENTOS_NFT_TOKEN_ID } from './config'; import useMintPhase from './useMintPhase'; @@ -63,7 +64,7 @@ export default function MintButton({ onMintSuccess }: Props) { diff --git a/apps/web/src/scenes/Modals/GenericActionModal.tsx b/apps/web/src/scenes/Modals/GenericActionModal.tsx index 81f064e59b..c050b0ce5f 100644 --- a/apps/web/src/scenes/Modals/GenericActionModal.tsx +++ b/apps/web/src/scenes/Modals/GenericActionModal.tsx @@ -31,6 +31,7 @@ export default function GenericActionModal({ // TODO: these should be passed in from parent eventElementId={null} eventName={null} + eventContext={null} onClick={handleClick} > {buttonText} diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx index bfaf3cf842..61eb62b586 100644 --- a/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx +++ b/apps/web/src/scenes/NftDetailPage/NftDetailNote.tsx @@ -10,6 +10,7 @@ import { BaseM, TitleXS } from '~/components/core/Text/Text'; import { AutoResizingTextAreaWithCharCount } from '~/components/core/TextArea/TextArea'; import { GLOBAL_FOOTER_HEIGHT } from '~/contexts/globalLayout/GlobalFooter/GlobalFooter'; import useUpdateNft from '~/hooks/api/tokens/useUpdateNft'; +import { contexts } from '~/shared/analytics/constants'; import { useTrack } from '~/shared/contexts/AnalyticsContext'; import formatError from '~/shared/errors/formatError'; import unescape from '~/shared/utils/unescape'; @@ -134,7 +135,7 @@ function NoteEditor({ nftCollectorsNote, tokenId, collectionId }: NoteEditorProp MAX_CHAR_COUNT} text="Save Note" onClick={handleSubmitCollectorsNote} @@ -145,7 +146,7 @@ function NoteEditor({ nftCollectorsNote, tokenId, collectionId }: NoteEditorProp diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx index 5b7dd8d98b..8d26c9f5b9 100644 --- a/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx +++ b/apps/web/src/scenes/NftDetailPage/NftDetailText.tsx @@ -21,6 +21,7 @@ import { useModalActions } from '~/contexts/modal/ModalContext'; import { NftDetailTextFragment$key } from '~/generated/NftDetailTextFragment.graphql'; import { useBreakpoint, useIsMobileWindowWidth } from '~/hooks/useWindowSize'; import { NftAdditionalDetails } from '~/scenes/NftDetailPage/NftAdditionalDetails/NftAdditionalDetails'; +import { contexts } from '~/shared/analytics/constants'; import { useTrack } from '~/shared/contexts/AnalyticsContext'; import colors from '~/shared/theme/colors'; import { extractRelevantMetadataFromToken } from '~/shared/utils/extractRelevantMetadataFromToken'; @@ -236,7 +237,7 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) { Buy Now @@ -250,7 +251,7 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) { - Learn more about the app + + Learn more about the app + ); diff --git a/apps/web/src/components/TezosDomainOrAddress.tsx b/apps/web/src/components/TezosDomainOrAddress.tsx index 9d16e3360d..354f0022b9 100644 --- a/apps/web/src/components/TezosDomainOrAddress.tsx +++ b/apps/web/src/components/TezosDomainOrAddress.tsx @@ -9,6 +9,7 @@ import useSWR from 'swr'; import { LinkableAddress, RawLinkableAddress } from '~/components/LinkableAddress'; import { TezosDomainOrAddressFragment$key } from '~/generated/TezosDomainOrAddressFragment.graphql'; import { TezosDomainOrAddressWithSuspenseFragment$key } from '~/generated/TezosDomainOrAddressWithSuspenseFragment.graphql'; +import { GalleryElementTrackingProps } from '~/shared/contexts/AnalyticsContext'; import { ReportingErrorBoundary } from '~/shared/errors/ReportingErrorBoundary'; import { getExternalAddressLink } from '~/shared/utils/wallet'; @@ -22,9 +23,10 @@ async function tezosDomainFetcher(address: string): Promise { type TezosDomainProps = { chainAddressRef: TezosDomainOrAddressFragment$key; + eventContext: GalleryElementTrackingProps['eventContext']; }; -const TezosDomain = ({ chainAddressRef }: TezosDomainProps) => { +const TezosDomain = ({ chainAddressRef, eventContext }: TezosDomainProps) => { const address = useFragment( graphql` fragment TezosDomainOrAddressFragment on ChainAddress { @@ -42,18 +44,29 @@ const TezosDomain = ({ chainAddressRef }: TezosDomainProps) => { const link = getExternalAddressLink(address); if (domain && link) { - return ; + return ( + + ); } // If we couldn't resolve, let's fallback to the default component - return ; + return ; }; type TezosDomainOrAddressProps = { chainAddressRef: TezosDomainOrAddressWithSuspenseFragment$key; + eventContext: GalleryElementTrackingProps['eventContext']; }; -export const TezosDomainOrAddress = ({ chainAddressRef }: TezosDomainOrAddressProps) => { +export const TezosDomainOrAddress = ({ + chainAddressRef, + eventContext, +}: TezosDomainOrAddressProps) => { const address = useFragment( graphql` fragment TezosDomainOrAddressWithSuspenseFragment on ChainAddress { @@ -67,9 +80,11 @@ export const TezosDomainOrAddress = ({ chainAddressRef }: TezosDomainOrAddressPr ); return ( - }> - }> - + }> + } + > + ); diff --git a/apps/web/src/components/TokenHolderList/TokenHolderListItem.tsx b/apps/web/src/components/TokenHolderList/TokenHolderListItem.tsx index 855d8d2a0b..fc7f479988 100644 --- a/apps/web/src/components/TokenHolderList/TokenHolderListItem.tsx +++ b/apps/web/src/components/TokenHolderList/TokenHolderListItem.tsx @@ -5,17 +5,18 @@ import styled from 'styled-components'; import breakpoints, { size } from '~/components/core/breakpoints'; import { Directions } from '~/components/core/enums'; -import GalleryLink from '~/components/core/GalleryLink/GalleryLink'; import { BaseM } from '~/components/core/Text/Text'; import { useMemberListPageActions } from '~/contexts/memberListPage/MemberListPageContext'; import { TokenHolderListItemFragment$key } from '~/generated/TokenHolderListItemFragment.graphql'; import { useBreakpoint } from '~/hooks/useWindowSize'; +import { contexts } from '~/shared/analytics/constants'; import useDebounce from '~/shared/hooks/useDebounce'; import { removeNullValues } from '~/shared/relay/removeNullValues'; import colors from '~/shared/theme/colors'; import { graphqlTruncateUniversalUsername } from '~/shared/utils/wallet'; import detectMobileDevice from '~/utils/detectMobileDevice'; +import GalleryLink from '../core/GalleryLink/GalleryLink'; import { HStack } from '../core/Spacer/Stack'; import UserHoverCard from '../HoverCard/UserHoverCard'; import { ProfilePicture } from '../ProfilePicture/ProfilePicture'; @@ -108,8 +109,10 @@ function TokenHolderListItem({ tokenHolderRef, direction, fadeUsernames }: Props {owner.user.universal ? ( {username} @@ -117,8 +120,10 @@ function TokenHolderListItem({ tokenHolderRef, direction, fadeUsernames }: Props diff --git a/apps/web/src/components/Twitter/TwitterFollowingModal.tsx b/apps/web/src/components/Twitter/TwitterFollowingModal.tsx index 81518ae3fa..fc0f08fca0 100644 --- a/apps/web/src/components/Twitter/TwitterFollowingModal.tsx +++ b/apps/web/src/components/Twitter/TwitterFollowingModal.tsx @@ -1,4 +1,3 @@ -import Link, { LinkProps } from 'next/link'; import { useCallback, useMemo, useState } from 'react'; import { graphql, useFragment, usePaginationFragment } from 'react-relay'; import { AutoSizer, InfiniteLoader, List, ListRowRenderer } from 'react-virtualized'; @@ -17,6 +16,7 @@ import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation'; import breakpoints from '../core/breakpoints'; import { Button } from '../core/Button/Button'; +import GalleryLink from '../core/GalleryLink/GalleryLink'; import Markdown from '../core/Markdown/Markdown'; import { HStack, VStack } from '../core/Spacer/Stack'; import { BaseM, TitleDiatypeL } from '../core/Text/Text'; @@ -203,20 +203,23 @@ export default function TwitterFollowingModal({ followingRef, queryRef }: Props) return ( - {user.username} - + - + @@ -327,10 +330,6 @@ const StyledFollowing = styled(HStack)` padding-right: 8px; `; -const StyledLink = styled(Link)` - text-decoration: none; -`; - const BioText = styled(BaseM)` display: -webkit-box; -webkit-line-clamp: 1; diff --git a/apps/web/src/components/Twitter/TwitterSetting.tsx b/apps/web/src/components/Twitter/TwitterSetting.tsx index c59ba5ef6b..3e477dcd7d 100644 --- a/apps/web/src/components/Twitter/TwitterSetting.tsx +++ b/apps/web/src/components/Twitter/TwitterSetting.tsx @@ -13,7 +13,7 @@ import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation'; import colors from '~/shared/theme/colors'; import { Button } from '../core/Button/Button'; -import InteractiveLink from '../core/InteractiveLink/InteractiveLink'; +import GalleryLink from '../core/GalleryLink/GalleryLink'; import { HStack, VStack } from '../core/Spacer/Stack'; import { BaseM } from '../core/Text/Text'; @@ -138,7 +138,7 @@ const StyledTwitterSettingContainer = styled(VStack)` background-color: ${colors.faint}; `; -const StyledConnectLink = styled(InteractiveLink)` +const StyledConnectLink = styled(GalleryLink)` text-decoration: none; `; diff --git a/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx b/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx index 70260790a9..e12b6cffb5 100644 --- a/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx +++ b/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx @@ -1,12 +1,13 @@ import styled from 'styled-components'; import { Button } from '~/components/core/Button/Button'; -import InteractiveLink from '~/components/core/InteractiveLink/InteractiveLink'; +import GalleryLink from '~/components/core/GalleryLink/GalleryLink'; import { VStack } from '~/components/core/Spacer/Stack'; import { BaseM, TitleS } from '~/components/core/Text/Text'; import transitions from '~/components/core/transitions'; import { EmptyState } from '~/components/EmptyState/EmptyState'; import { GALLERY_DISCORD, GALLERY_TWITTER } from '~/constants/urls'; +import { contexts } from '~/shared/analytics/constants'; import { walletIconMap } from './WalletButton'; @@ -25,8 +26,15 @@ export default function DelegateCashMessage({ reset }: Props) { What is it? - Delegate Cash is a - decentralized service that allows you to designate a hot wallet to act and sign on + + Delegate Cash + {' '} + is a decentralized service that allows you to designate a hot wallet to act and sign on behalf of your cold wallet. @@ -34,8 +42,25 @@ export default function DelegateCashMessage({ reset }: Props) { New users Please create a Gallery account with your delegated hot wallet, then reach out to our - team via Discord or{' '} - Twitter for next steps. + team via{' '} + + Discord + {' '} + or{' '} + + Twitter + {' '} + for next steps. @@ -43,8 +68,24 @@ export default function DelegateCashMessage({ reset }: Props) { If you’d like to connect your cold wallet to an existing Gallery account, please reach out to the Gallery team via{' '} - Discord or{' '} - Twitter. + + Discord + {' '} + or{' '} + + Twitter + + .