feat: implement-page-viewed-event-for-all-main-pages-of-app (#4089)

* init commit: initial constants for pages, implement vote page viewed

* implement swap

* implement pool

* remove charts

* simplify shouldLogImpression

src/components/AmplitudeAnalytics/constants.ts

@@ -17,7 +17,10 @@ export enum EventName {
  * Known pages in the app. Highest order context.
  */
 export const enum PageName {
+  EXPLORE_PAGE = 'explore-page',
+  POOL_PAGE = 'pool-page',
   SWAP_PAGE = 'swap-page',
+  VOTE_PAGE = 'vote-page',
   // alphabetize additional page names.
 }
 

src/pages/CreateProposal/index.tsx

@@ -3,6 +3,8 @@ import { getAddress, isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { PageName } from 'components/AmplitudeAnalytics/constants'
+import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { ButtonError } from 'components/Button'
 import { BlueCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -225,63 +227,66 @@ ${bodyValue}
   }
 
   return (
-    <AppBody {...{ maxWidth: '800px' }}>
-      <CreateProposalTabs />
-      <CreateProposalWrapper>
-        <BlueCard>
-          <AutoColumn gap="10px">
-            <ThemedText.Link fontWeight={400} color={'primaryText1'}>
-              <Trans>
-                <strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal cannot
-                be modified after submission, so please verify all information before submitting. The voting period will
-                begin immediately and last for 7 days. To propose a custom action,{' '}
-                <ExternalLink href="https://uniswap.org/docs/v2/governance/governance-reference/#propose">
-                  read the docs
-                </ExternalLink>
-                .
-              </Trans>
-            </ThemedText.Link>
-          </AutoColumn>
-        </BlueCard>
-
-        <ProposalActionSelector onClick={handleActionSelectorClick} proposalAction={proposalAction} />
-        <ProposalActionDetail
-          proposalAction={proposalAction}
-          currency={currencyValue}
-          amount={amountValue}
-          toAddress={toAddressValue}
-          onCurrencySelect={handleCurrencySelect}
-          onAmountInput={handleAmountInput}
-          onToAddressInput={handleToAddressInput}
+    <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
+      <AppBody {...{ maxWidth: '800px' }}>
+        <CreateProposalTabs />
+        <CreateProposalWrapper>
+          <BlueCard>
+            <AutoColumn gap="10px">
+              <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+                <Trans>
+                  <strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal
+                  cannot be modified after submission, so please verify all information before submitting. The voting
+                  period will begin immediately and last for 7 days. To propose a custom action,{' '}
+                  <ExternalLink href="https://uniswap.org/docs/v2/governance/governance-reference/#propose">
+                    read the docs
+                  </ExternalLink>
+                  .
+                </Trans>
+              </ThemedText.Link>
+            </AutoColumn>
+          </BlueCard>
+
+          <ProposalActionSelector onClick={handleActionSelectorClick} proposalAction={proposalAction} />
+          <ProposalActionDetail
+            proposalAction={proposalAction}
+            currency={currencyValue}
+            amount={amountValue}
+            toAddress={toAddressValue}
+            onCurrencySelect={handleCurrencySelect}
+            onAmountInput={handleAmountInput}
+            onToAddressInput={handleToAddressInput}
+          />
+          <ProposalEditor
+            title={titleValue}
+            body={bodyValue}
+            onTitleInput={handleTitleInput}
+            onBodyInput={handleBodyInput}
+          />
+          <CreateProposalButton
+            proposalThreshold={proposalThreshold}
+            hasActiveOrPendingProposal={
+              latestProposalData?.status === ProposalState.ACTIVE ||
+              latestProposalData?.status === ProposalState.PENDING
+            }
+            hasEnoughVote={hasEnoughVote}
+            isFormInvalid={isFormInvalid}
+            handleCreateProposal={handleCreateProposal}
+          />
+          {!hasEnoughVote ? (
+            <AutonomousProposalCTA>
+              Don’t have 2.5M votes? Anyone can create an autonomous proposal using{' '}
+              <ExternalLink href="https://fish.vote">fish.vote</ExternalLink>
+            </AutonomousProposalCTA>
+          ) : null}
+        </CreateProposalWrapper>
+        <ProposalActionSelectorModal
+          isOpen={modalOpen}
+          onDismiss={handleDismissActionSelector}
+          onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)}
         />
-        <ProposalEditor
-          title={titleValue}
-          body={bodyValue}
-          onTitleInput={handleTitleInput}
-          onBodyInput={handleBodyInput}
-        />
-        <CreateProposalButton
-          proposalThreshold={proposalThreshold}
-          hasActiveOrPendingProposal={
-            latestProposalData?.status === ProposalState.ACTIVE || latestProposalData?.status === ProposalState.PENDING
-          }
-          hasEnoughVote={hasEnoughVote}
-          isFormInvalid={isFormInvalid}
-          handleCreateProposal={handleCreateProposal}
-        />
-        {!hasEnoughVote ? (
-          <AutonomousProposalCTA>
-            Don’t have 2.5M votes? Anyone can create an autonomous proposal using{' '}
-            <ExternalLink href="https://fish.vote">fish.vote</ExternalLink>
-          </AutonomousProposalCTA>
-        ) : null}
-      </CreateProposalWrapper>
-      <ProposalActionSelectorModal
-        isOpen={modalOpen}
-        onDismiss={handleDismissActionSelector}
-        onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)}
-      />
-      <ProposalSubmissionModal isOpen={attempting} hash={hash} onDismiss={handleDismissSubmissionModal} />
-    </AppBody>
+        <ProposalSubmissionModal isOpen={attempting} hash={hash} onDismiss={handleDismissSubmissionModal} />
+      </AppBody>
+    </Trace>
   )
 }

src/pages/Pool/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
+import { PageName } from 'components/AmplitudeAnalytics/constants'
+import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { ButtonGray, ButtonPrimary, ButtonText } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import { FlyoutAlignment, NewMenu } from 'components/Menu'
@@ -252,76 +254,78 @@ export default function Pool() {
   ]
 
   return (
-    <>
-      <PageWrapper>
-        <SwapPoolTabs active="pool" />
-        <AutoColumn gap="lg" justify="center">
-          <AutoColumn gap="lg" style={{ width: '100%' }}>
-            <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
-              <ThemedText.Body fontSize={'20px'}>
-                <Trans>Pools Overview</Trans>
-              </ThemedText.Body>
-              <ButtonRow>
-                {showV2Features && (
-                  <Menu
-                    menuItems={menuItems}
-                    flyoutAlignment={FlyoutAlignment.LEFT}
-                    ToggleUI={(props: any) => (
-                      <MoreOptionsButton {...props}>
-                        <MoreOptionsText>
-                          <Trans>More</Trans>
-                          <ChevronDown size={15} />
-                        </MoreOptionsText>
-                      </MoreOptionsButton>
-                    )}
+    <Trace page={PageName.POOL_PAGE} shouldLogImpression>
+      <>
+        <PageWrapper>
+          <SwapPoolTabs active="pool" />
+          <AutoColumn gap="lg" justify="center">
+            <AutoColumn gap="lg" style={{ width: '100%' }}>
+              <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
+                <ThemedText.Body fontSize={'20px'}>
+                  <Trans>Pools Overview</Trans>
+                </ThemedText.Body>
+                <ButtonRow>
+                  {showV2Features && (
+                    <Menu
+                      menuItems={menuItems}
+                      flyoutAlignment={FlyoutAlignment.LEFT}
+                      ToggleUI={(props: any) => (
+                        <MoreOptionsButton {...props}>
+                          <MoreOptionsText>
+                            <Trans>More</Trans>
+                            <ChevronDown size={15} />
+                          </MoreOptionsText>
+                        </MoreOptionsButton>
+                      )}
+                    />
+                  )}
+                  <ResponsiveButtonPrimary id="join-pool-button" as={Link} to="/add/ETH">
+                    + <Trans>New Position</Trans>
+                  </ResponsiveButtonPrimary>
+                </ButtonRow>
+              </TitleRow>
+
+              <MainContentWrapper>
+                {positionsLoading ? (
+                  <PositionsLoadingPlaceholder />
+                ) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
+                  <PositionList
+                    positions={filteredPositions}
+                    setUserHideClosedPositions={setUserHideClosedPositions}
+                    userHideClosedPositions={userHideClosedPositions}
                   />
+                ) : (
+                  <ErrorContainer>
+                    <ThemedText.Body color={theme.text3} textAlign="center">
+                      <InboxIcon strokeWidth={1} />
+                      <div>
+                        <Trans>Your active V3 liquidity positions will appear here.</Trans>
+                      </div>
+                    </ThemedText.Body>
+                    {!showConnectAWallet && closedPositions.length > 0 && (
+                      <ButtonText
+                        style={{ marginTop: '.5rem' }}
+                        onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
+                      >
+                        <Trans>Show closed positions</Trans>
+                      </ButtonText>
+                    )}
+                    {showConnectAWallet && (
+                      <ButtonPrimary style={{ marginTop: '2em', padding: '8px 16px' }} onClick={toggleWalletModal}>
+                        <Trans>Connect a wallet</Trans>
+                      </ButtonPrimary>
+                    )}
+                  </ErrorContainer>
                 )}
-                <ResponsiveButtonPrimary id="join-pool-button" as={Link} to="/add/ETH">
-                  + <Trans>New Position</Trans>
-                </ResponsiveButtonPrimary>
-              </ButtonRow>
-            </TitleRow>
-
-            <MainContentWrapper>
-              {positionsLoading ? (
-                <PositionsLoadingPlaceholder />
-              ) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
-                <PositionList
-                  positions={filteredPositions}
-                  setUserHideClosedPositions={setUserHideClosedPositions}
-                  userHideClosedPositions={userHideClosedPositions}
-                />
-              ) : (
-                <ErrorContainer>
-                  <ThemedText.Body color={theme.text3} textAlign="center">
-                    <InboxIcon strokeWidth={1} />
-                    <div>
-                      <Trans>Your active V3 liquidity positions will appear here.</Trans>
-                    </div>
-                  </ThemedText.Body>
-                  {!showConnectAWallet && closedPositions.length > 0 && (
-                    <ButtonText
-                      style={{ marginTop: '.5rem' }}
-                      onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
-                    >
-                      <Trans>Show closed positions</Trans>
-                    </ButtonText>
-                  )}
-                  {showConnectAWallet && (
-                    <ButtonPrimary style={{ marginTop: '2em', padding: '8px 16px' }} onClick={toggleWalletModal}>
-                      <Trans>Connect a wallet</Trans>
-                    </ButtonPrimary>
-                  )}
-                </ErrorContainer>
-              )}
-            </MainContentWrapper>
-            <HideSmall>
-              <CTACards />
-            </HideSmall>
+              </MainContentWrapper>
+              <HideSmall>
+                <CTACards />
+              </HideSmall>
+            </AutoColumn>
           </AutoColumn>
-        </AutoColumn>
-      </PageWrapper>
-      <SwitchLocaleLink />
-    </>
+        </PageWrapper>
+        <SwitchLocaleLink />
+      </>
+    </Trace>
   )
 }

src/pages/Swap/index.tsx

@@ -398,7 +398,7 @@ export default function Swap({ history }: RouteComponentProps) {
   const priceImpactTooHigh = priceImpactSeverity > 3 && !isExpertMode
 
   return (
-    <Trace page={PageName.SWAP_PAGE} shouldLogImpression={false}>
+    <Trace page={PageName.SWAP_PAGE} shouldLogImpression>
       <>
         <TokenWarningModal
           isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}