Data instrumentation refactor

[Robinnnnn]

Summary of Changes

This PR upgrades our analytics instrumentation and best practices.

• Introduce eventContext and eventFlow to base tracking props
  • eventContext: a bucket, category, or general location for the event. e.g. Authentication, Web Editor
  • eventFlow: an explicit user flow that the event falls into e.g. Add Wallet Flow or Post Flow
• Upgrades / refactors core components to use these new props, including: buttons, links (Web instrumentation: Links #2007), pills (Web instrumentation: Pills #2002), chips (Web instrumentation: Chips #2004), dropdowns (Web Instrumentation: Dropdowns #2014)
  • strict disabling of direct next/link imports; refactoring all usages of Link, styled.a, and <a /> to GalleryLinks
  • deprecate confusing ButtonPills, ClickablePill, NonClickablePill and consolidate into GalleryPill
  • QoL updates to dropdowns (auto-formatting with BaseM; trash icon for delete options)
• Upgrades higher level components to track using best practices, including DropdownItem, DropdownLink
• Mobile instrumentation: eventContext refactor #2015
• Refactors mobile InteractiveLink into tracked GalleryLink
• Migrate noop functions to import noop #2016
• clickDisabled prop for PFPs to prevent unnecessary redirects and click takeovers

Not captured in this PR / Next Steps

• We should stop calling track manually and instead use a wrapped util that requires these props – especially eventContext, which will tie events together
• Apply changes to a targeted flow like creating a post, optimistic syncing, refreshing errored NFTs, etc.
• A handful of TODO: analytics for non-critical areas that were left untracked
• Clearly laid out guidelines and best practices; this will be handled independently

Demo or Before/After Pics

No visual changes

Testing Steps

Pull down the PR and click around web / mobile apps

Checklist

Please make sure to review and check all of the following:

• I've tested the changes and all tests pass.
• (if web) I've tested the changes on various desktop screen sizes to ensure responsiveness.
• (if mobile) I've tested the changes on both light and dark modes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gallery	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2023 9:38pm

[github-actions]

Bundle Sizes

Compared against 35ffdca

Route	Size (gzipped)	Diff
/[username]	348.24 KB	+2.1 KB
/[username]/[collectionId]	354.04 KB	+2.11 KB
/[username]/followers	352.65 KB	+2.15 KB
/[username]/galleries	372.77 KB	+2.2 KB
/[username]/galleries/[galleryId]	351.04 KB	+2.1 KB
/[username]/posts	715.76 KB	+2.37 KB
/_app	346.82 KB	+1.27 KB
/community/[chain]/[contractAddress]	700.75 KB	+1.99 KB
/community/[chain]/[contractAddress]/live	710.03 KB	+1.99 KB
/explore	345.93 KB	+1.53 KB
/following	686.06 KB	+1.92 KB
/home	685.65 KB	+1.88 KB
/latest	685.53 KB	+1.88 KB
/mobile	316.14 KB	+1.52 KB
/post/[postId]	377.57 KB	+2.24 KB

Dynamic import	Size (gzipped)	Diff
../src/contexts/relay/network.ts -> persisted_queries.json	65.61 KB	-1.06 KB