feat(fiat): add overflow menu cta

src/components/NavBar/MenuDropdown.tsx

@@ -14,8 +14,10 @@ import {
 } from 'nft/components/icons'
 import { body, bodySmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
-import { ReactNode, useReducer, useRef } from 'react'
+import { ReactNode, useCallback, useReducer, useRef } from 'react'
+import { CreditCard } from 'react-feather'
 import { NavLink, NavLinkProps } from 'react-router-dom'
+import styled from 'styled-components/macro'
 import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
 import { useToggleModal } from '../../state/application/hooks'
@@ -24,6 +26,28 @@ import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
 import { NavIcon } from './NavIcon'
 
+const BuyCryptoButton = styled.button`
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  color: ${({ theme }) => theme.textPrimary};
+  cursor: pointer;
+  display: flex;
+  line-height: 24px;
+  outline: none;
+  padding: 8px;
+  text-decoration: none;
+  width: full;
+  white-space: nowrap;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, color, background-color;
+
+  :hover {
+    background: ${({ theme }) => theme.stateOverlayHover};
+  }
+`
+
 const PrimaryMenuRow = ({
   to,
   href,
@@ -119,6 +143,10 @@ export const MenuDropdown = () => {
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
 
+  const handleBuyCryptoClick = useCallback(() => {
+    toggleOpen()
+  }, [])
+
   return (
     <>
       <Box position="relative" ref={ref}>
@@ -130,6 +158,14 @@ export const MenuDropdown = () => {
           <NavDropdown top={{ sm: 'unset', lg: '56' }} bottom={{ sm: '56', lg: 'unset' }} right="0">
             <Column gap="16">
               <Column paddingX="8" gap="4">
+                <BuyCryptoButton onClick={handleBuyCryptoClick}>
+                  <Icon>
+                    <CreditCard width={24} height={24} />
+                  </Icon>
+                  <PrimaryMenuRow.Text>
+                    <Trans>Buy Crypto</Trans>
+                  </PrimaryMenuRow.Text>
+                </BuyCryptoButton>
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIcon width={24} height={24} />