feat(mobile-dropdown): add mobile dropdown

packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/MobileDropdown/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import MobileDropdown from './template'
+
+const MobileDropdownContainer = () => <MobileDropdown />
+
+export default MobileDropdownContainer

packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/MobileDropdown/template.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useState } from 'react'
+import { Icon, Switch, useClickOutside } from '@blockchain-com/constellation'
+import styled from 'styled-components'
+
+import { TextInputWithClipboard } from 'components/Form'
+import { NavbarNavItemButton } from 'components/Navbar'
+import { DropdownMenu, DropdownMenuArrow } from 'components/Navbar/NavbarDropdown'
+import QRCodeWrapper from 'components/QRCode/Wrapper'
+
+const ANDROID_URL = 'https://play.google.com/store/apps/details?id=com.blockchain.exchange'
+const IOS_URL = 'https://apps.apple.com/app/blockchain-exchange-buy-btc/id1557515848'
+
+const CustomDropdownMenu = styled(DropdownMenu)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 240px;
+  right: -8px;
+  padding: 16px;
+  border-radius: 8px;
+
+  &:hover {
+    cursor: default;
+  }
+`
+const QRContainer = styled.div`
+  margin: 16px 0;
+`
+
+const MobileDropdown = () => {
+  const ref = useClickOutside(() => {
+    console.log('outside')
+    toggleIsMenuOpen(false)
+  })
+  const [isMenuOpen, toggleIsMenuOpen] = useState(false)
+  const [isFirstItemActive, setIsFirstItemActive] = useState(true)
+
+  const handleMenuToggle = useCallback(() => {
+    toggleIsMenuOpen(!isMenuOpen)
+  }, [isMenuOpen])
+
+  const handleFirstItemClicked = useCallback(() => setIsFirstItemActive(true), [])
+  const handleSecondItemClicked = useCallback(() => setIsFirstItemActive(false), [])
+
+  return (
+    <NavbarNavItemButton data-e2e='settingsLink' onClick={handleMenuToggle}>
+      {
+        // @ts-ignore
+        <Icon color='#98A1B2' name='phone' size='sm' />
+      }
+      {isMenuOpen && (
+        <CustomDropdownMenu ref={ref}>
+          <DropdownMenuArrow />
+          <Switch
+            firstItem='IOS'
+            secondItem='Android'
+            handleFirstItemClicked={handleFirstItemClicked}
+            handleSecondItemClicked={handleSecondItemClicked}
+            isFirstItemActive={isFirstItemActive}
+          />
+          <QRContainer>
+            <QRCodeWrapper value='blockchain.com' size={120} />
+          </QRContainer>
+          <TextInputWithClipboard value={isFirstItemActive ? IOS_URL : ANDROID_URL} />
+        </CustomDropdownMenu>
+      )}
+    </NavbarNavItemButton>
+  )
+}
+
+export default MobileDropdown

packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/Navbar.stories.tsx

@@ -57,7 +57,6 @@ Default.args = {
   fabClickHandler: () => {},
   limitsClickHandler: () => {},
   logoutClickHandler: () => {},
-  mobileClickHandler: () => {},
   primaryNavItems: PrimaryNavItems,
   refreshClickHandler: () => {}
 }

packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/Navbar.tsx

@@ -12,6 +12,8 @@ import { Destination } from 'layouts/Wallet/components'
 import { useOnClickOutside } from 'services/misc'
 import { media, useMedia } from 'services/styles'
 
+import MobileDropdown from './MobileDropdown'
+
 export type PrimaryNavItem = {
   dest: string
   e2e: string
@@ -124,7 +126,6 @@ const Navbar = ({
   fabClickHandler,
   limitsClickHandler,
   logoutClickHandler,
-  mobileClickHandler,
   primaryNavItems,
   refreshClickHandler
 }: Props) => {
@@ -153,14 +154,7 @@ const Navbar = ({
       name: 'trade'
     },
     {
-      component: (
-        <NavButton onClick={mobileClickHandler} data-e2e='mobileQRLink'>
-          {
-            // @ts-ignore
-            <Icon color='#98A1B2' name='phone' size='sm' />
-          }
-        </NavButton>
-      ),
+      component: <MobileDropdown />,
       name: 'mobile-app'
     },
     {
@@ -293,7 +287,6 @@ type Props = {
   fabClickHandler: () => void
   limitsClickHandler: () => void
   logoutClickHandler: () => void
-  mobileClickHandler: () => void
   primaryNavItems: Array<PrimaryNavItem>
   refreshClickHandler: () => void
 }

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.tsx

@@ -76,7 +76,6 @@ const Header = (props: OwnProps) => {
       <Navbar
         primaryNavItems={PrimaryNavItems}
         fabClickHandler={fabCallback}
-        mobileClickHandler={() => {}}
         refreshClickHandler={refreshCallback}
         limitsClickHandler={limitsCallback}
         logoutClickHandler={logoutCallback}