feat: fiat on ramp tile for about page (#5746)

* feat: move about content into landing page

* fix: delete unused image files

* fix: remove unused components

* fix: pointer events on title and subtitle

* feat: add about footer to landing page

* fix: simplify css in Landing Page

* feat(moonpay): moonpay ip checks to determine if the user can access the fiat onramp (#10)

* feat(moonpay): useFiatOnrampAvailable

* feat(moonpay): ip check with moonpay for buy crypto availability

* add error state and clear up some of the sequence of logic

* add button-specific spinner, put the ... menu button behind the feature flag

* hide ... menu option if onramp is unavailable

* add live publishable moonpay key

* add initial FoR hype border flash to announcement acknowledgment

* remove ... menu access to FoR feature

* add tooltip and external link to info icon

* nicer error display

* add stale market to ack

* pr feedback from zzmp

* fix really weird react bug

* ts fix and clear timeout

* pairing staleness handler w/ zzmp

* add back feature flag

* feat: fiat on ramp tile for about page
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

package.json

@@ -138,8 +138,8 @@
     "@types/react-relay": "^13.0.2",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "1.2.0",
+    "@uniswap/analytics-events": "^1.5.0",
     "@uniswap/conedison": "^1.1.1",
-    "@uniswap/analytics-events": "^1.4.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",

src/components/About/constants.tsx

@@ -40,21 +40,21 @@ const StyledCardLogo = styled.img`
 
 export const MORE_CARDS = [
   {
-    to: 'https://info.uniswap.org',
+    to: 'https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-',
     external: true,
-    title: 'Analytics',
-    description: 'View, track and analyze Uniswap Protocol analytics.',
-    lightIcon: <StyledCardLogo src={lightArrowImgSrc} alt="Analytics" />,
-    darkIcon: <StyledCardLogo src={darkArrowImgSrc} alt="Analytics" />,
-    cta: 'Explore data',
-    elementName: ElementName.ABOUT_PAGE_ANALYTICS_CARD,
+    title: 'Buy crypto',
+    description: 'Buy crypto with your credit card or bank account at the best rates.',
+    lightIcon: <DollarSign color={lightTheme.textTertiary} size={48} />,
+    darkIcon: <StyledCardLogo src={darkDollarImgSrc} alt="Earn" />,
+    cta: 'Buy now',
+    elementName: ElementName.ABOUT_PAGE_BUY_CRYPTO_CARD,
   },
   {
     to: '/pool',
     title: 'Earn',
     description: 'Provide liquidity to pools on Uniswap and earn fees on swaps.',
-    lightIcon: <DollarSign color={lightTheme.textTertiary} size={48} />,
-    darkIcon: <StyledCardLogo src={darkDollarImgSrc} alt="Earn" />,
+    lightIcon: <StyledCardLogo src={lightArrowImgSrc} alt="Analytics" />,
+    darkIcon: <StyledCardLogo src={darkArrowImgSrc} alt="Analytics" />,
     cta: 'Provide liquidity',
     elementName: ElementName.ABOUT_PAGE_EARN_CARD,
   },

yarn.lock

@@ -4195,10 +4195,10 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
-"@uniswap/analytics-events@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-1.4.0.tgz#63b0fa55d9d258e3b29d07f38da194f9fa841d1d"
-  integrity sha512-KdY/8iRTbVirJN/ms8f68MfGM+zuCuz4E35Lw4m7xcQ03YAlE9j3Oa3UhsFSCialn8F6brmrAPsx8a8Ps6uoKw==
+"@uniswap/analytics-events@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-1.5.0.tgz#1f5a6e0fedb46e551745c2b4d2b791fe44964cfa"
+  integrity sha512-grrPk71hoBeXiBivlqgeh97lY7TmKEYhzzOLXdMXjXX/mcGOM9HLV0XR1olr/WPwuhBFx9GefaiB3GJU9+/sOQ==
 
 "@uniswap/analytics@1.2.0":
   version "1.2.0"