feat(navbar): making navbar primary nav items dynamic and adding icon…

…s to secondary nav items
blockchain · Dec 2, 2021 · 1e0561d · 1e0561d
1 parent 848d974
commit 1e0561d
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "ci:test:build": "yarn wsrun --serial test:build",
     "ci:test:core:components": "yarn wsrun --serial --exclude-missing ci:test",
     "ci:test:frontend": "yarn workspace blockchain-wallet-v4-frontend ci:test:frontend",
-    "clean": "cross-env yarn wsrun clean && rimraf build && rimraf coverage && rimraf dist && rimraf *.log && rimraf node_modules",
+    "clean": "cross-env yarn wsrun clean && rimraf build && rimraf coverage && rimraf dist && rimraf node_modules",
     "coverage": "cross-env rimraf coverage && yarn wsrun coverage && yarn run report",
     "coverage:components": "cross-env rimraf coverage && yarn workspace blockchain-info-components coverage && yarn run report",
     "coverage:core": "cross-env rimraf coverage && yarn workspace blockchain-wallet-v4 coverage && yarn run report",

diff --git a/packages/blockchain-wallet-v4-frontend/package.json b/packages/blockchain-wallet-v4-frontend/package.json
@@ -74,7 +74,7 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@blockchain-com/components": "6.1.1",
-    "@blockchain-com/constellation": "^0.0.11",
+    "@blockchain-com/constellation": "0.0.11",
     "@formatjs/intl-relativetimeformat": "7.2.10",
     "@ledgerhq/hw-app-btc": "4.33.7",
     "@ledgerhq/hw-app-eth": "4.32.0",

diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -426,6 +426,7 @@ type MessagesType = {
   'copy.retry': 'Retry'
   'copy.recurring_buy': 'Recurring Buy'
   'copy.reset_now': 'Reset Now'
+  'copy.rewards': 'Rewards'
   'copy.max': 'Max'
   'copy.min': 'Min'
   'copy.name': 'Name'
@@ -521,6 +522,7 @@ type MessagesType = {
   'copy.available_to_trade': 'Available to Trade'
   'copy.wallet_funds': 'Wallet Funds'
   'copy.day': '1D'
+  'copy.daaps': 'Daaps'
   'copy.month': '1M'
   'copy.week': '1W'
   'copy.year': '1Y'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/Navbar.stories.tsx b/packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/Navbar.stories.tsx
@@ -1,10 +1,7 @@
 import React from 'react'
-import { IntlProvider } from 'react-intl'
-import { configureStore } from '@reduxjs/toolkit'
+import { FormattedMessage, IntlProvider } from 'react-intl'
+import { BrowserRouter } from 'react-router-dom'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { combineReducers } from 'redux'
-
-import form from 'data/form/reducers'
 
 import Navbar from './Navbar'
 
@@ -14,16 +11,48 @@ export default {
   decorators: [
     (Story) => {
       return (
-        <IntlProvider locale='en'>
-          <div style={{ border: '1px solid #333', height: '600px' }}>{Story()}</div>
-        </IntlProvider>
+        <BrowserRouter>
+          <IntlProvider locale='en'>
+            <div style={{ border: '1px solid #333', height: '600px' }}>{Story()}</div>
+          </IntlProvider>
+        </BrowserRouter>
       )
     }
   ],
   title: 'Layout/Navigation'
 } as ComponentMeta<typeof Navbar>
 
-const Template: ComponentStory<typeof Navbar> = (args) => <Navbar />
+const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args} />
+
+const PrimaryNavItems = [
+  {
+    dest: '/home',
+    e2e: 'homeLink',
+    text: <FormattedMessage id='copy.home' defaultMessage='Home' />
+  },
+  {
+    dest: '/prices',
+    e2e: 'pricesLink',
+    text: <FormattedMessage id='copy.prices' defaultMessage='Prices' />
+  },
+  {
+    dest: '/rewards',
+    e2e: 'rewardsLink',
+    text: <FormattedMessage id='copy.rewards' defaultMessage='Rewards' />
+  },
+  {
+    dest: '/nfts',
+    e2e: 'nftsLink',
+    text: <FormattedMessage id='layouts.wallet.menuleft.navigation.nfts' defaultMessage='NFTs' />
+  },
+  {
+    dest: '/daaps',
+    e2e: 'daapsLink',
+    text: <FormattedMessage id='copy.daaps' defaultMessage='Daaps' />
+  }
+]
 
 export const Default = Template.bind({})
-Default.args = {}
+Default.args = {
+  primaryNavItems: PrimaryNavItems
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/Navbar.tsx b/packages/blockchain-wallet-v4-frontend/src/components/NavbarV2/Navbar.tsx
@@ -1,10 +1,17 @@
 import React from 'react'
+import { NavLink } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { Icon, Text } from 'blockchain-info-components'
+import { Button, Icon, Text } from 'blockchain-info-components'
 import FabButton from 'components/FabButton'
 import { media } from 'services/styles'
 
+export type PrimaryNavItem = {
+  dest: string
+  e2e: string
+  text: string | React.ReactNode
+}
+
 const NavContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -17,11 +24,14 @@ const NavContainer = styled.div`
   `}
 `
 
-const Logo = styled.a`
+const Logo = styled.div`
   display: flex;
   align-items: center;
-  text-decoration: none;
-  color: #3d89f5;
+
+  & > a {
+    color: #3d89f5;
+    text-decoration: none;
+  }
 `
 
 const NavLeft = styled.div`
@@ -54,45 +64,57 @@ const ListStyles = styled.ul`
     padding: 10px;
     transition: background-color 0.3s, color 0.3s;
 
-    &:hover {
+    &:hover,
+    &.active {
       background-color: #ecf5fe;
       color: #0c6cf2;
     }
   }
 `
 
-const PrimaryNavItems = styled(ListStyles)``
+const PrimaryNavItems = styled(ListStyles)`
+  cursor: pointer;
+`
+
+const SecondaryNavItems = styled(ListStyles)`
+  cursor: pointer;
+`
+
+const NavButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  position: relative;
+  transition: color 0.3s;
+  background: transparent;
+  min-width: auto;
+  width: auto;
+  padding: 0;
+  border: 0;
 
-const SecondaryNavItems = styled(ListStyles)``
+  &:hover {
+    background-color: transparent;
+  }
+`
 
-const Navbar = () => {
+const Navbar = ({ primaryNavItems }: Props) => {
   return (
     <NavContainer>
       <NavLeft>
-        <Logo href='/'>
-          <Icon color='#3D89F5' name='blockchain-logo' size='35px' />
+        <Logo>
+          <NavLink to='/home' data-e2e='homeLink'>
+            <Icon color='#3D89F5' name='blockchain-logo' size='35px' />
+          </NavLink>
         </Logo>
         <PrimaryNavItems>
-          <li>
-            <Text size='14px' weight={600}>
-              <a href=''>Home</a>
-            </Text>
-          </li>
-          <li>
-            <Text size='14px' weight={600}>
-              <a href=''>Prices</a>
-            </Text>
-          </li>
-          <li>
-            <Text size='14px' weight={600}>
-              <a href=''>Rewards</a>
-            </Text>
-          </li>
-          <li>
-            <Text size='14px' weight={600}>
-              <a href=''>NFTs</a>
-            </Text>
-          </li>
+          {primaryNavItems.map((item: PrimaryNavItem) => (
+            <li key={item.e2e}>
+              <NavLink to={item.dest} data-e2e={item.e2e}>
+                <Text size='14px' weight={600}>
+                  {item.text}
+                </Text>
+              </NavLink>
+            </li>
+          ))}
         </PrimaryNavItems>
       </NavLeft>
       <NavRight>
@@ -101,26 +123,28 @@ const Navbar = () => {
             <FabButton />
           </li>
           <li>
-            <Text size='14px' weight={600}>
-              <a href=''>Mobile</a>
-            </Text>
+            <NavButton data-e2e='mobileQRLink'>
+              <Icon color='#98A1B2' name='mobile' size='15px' />
+            </NavButton>
           </li>
           <li>
-            <Text size='14px' weight={600}>
-              <a href=''>Refresh</a>
-            </Text>
+            <NavButton data-e2e='refreshLink'>
+              <Icon color='#F0F2F7' name='refresh' size='23px' />
+            </NavButton>
           </li>
           <li>
-            <Text size='14px' weight={600}>
-              <a href=''>Settings</a>
-            </Text>
+            <NavButton data-e2e='settingsLink'>
+              <Icon color='#98A1B2' name='user' size='15px' />
+            </NavButton>
           </li>
         </SecondaryNavItems>
       </NavRight>
     </NavContainer>
   )
 }
 
-type Props = {}
+type Props = {
+  primaryNavItems: Array<PrimaryNavItem>
+}
 
 export default Navbar
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/index.tsx
@@ -20,6 +20,9 @@ class HeaderContainer extends React.PureComponent<Props> {
 }
 
 const mapStateToProps = (state: RootState) => ({
+  featureFlags: selectors.core.walletOptions
+    .getFeatureFlags(state)
+    .getOrElse({} as { [key in string]: boolean }),
   isRedesignEnabled: selectors.core.walletOptions
     .getRedesignEnabled(state)
     .getOrElse(false) as boolean

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.tsx
@@ -1,18 +1,53 @@
 import React from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { Navbar } from 'components/NavbarV2'
 import { useMedia } from 'services/styles'
 
+import { Props } from '.'
 import Large from './template.large'
 import Medium from './template.medium'
 import Small from './template.small'
 
-const Header = (props) => {
+type OwnProps = Props & { handleToggle: () => void }
+
+const Header = (props: OwnProps) => {
   const isLaptop = useMedia('laptop')
   const isTablet = useMedia('tablet')
 
+  const PrimaryNavItems = [
+    {
+      dest: '/home',
+      e2e: 'homeLink',
+      text: <FormattedMessage id='copy.home' defaultMessage='Home' />
+    },
+    {
+      dest: '/prices',
+      e2e: 'pricesLink',
+      text: <FormattedMessage id='copy.prices' defaultMessage='Prices' />
+    },
+    {
+      dest: '/rewards',
+      e2e: 'rewardsLink',
+      text: <FormattedMessage id='copy.rewards' defaultMessage='Rewards' />
+    },
+    {
+      dest: '/daaps',
+      e2e: 'daapsLink',
+      text: <FormattedMessage id='copy.daaps' defaultMessage='Daaps' />
+    }
+  ]
+
+  if (props.featureFlags.nfts) {
+    PrimaryNavItems.push({
+      dest: '/nfts',
+      e2e: 'nftsLink',
+      text: <FormattedMessage id='layouts.wallet.menuleft.navigation.nfts' defaultMessage='NFTs' />
+    })
+  }
+
   if (props.isRedesignEnabled) {
-    return <Navbar />
+    return <Navbar primaryNavItems={PrimaryNavItems} />
   }
   return (
     <>{isTablet ? <Small {...props} /> : isLaptop ? <Medium {...props} /> : <Large {...props} />}</>

diff --git a/yarn.lock b/yarn.lock
@@ -1889,7 +1889,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@blockchain-com/constellation@npm:^0.0.11":
+"@blockchain-com/constellation@npm:0.0.11":
   version: 0.0.11
   resolution: "@blockchain-com/constellation@npm:0.0.11"
   dependencies:
@@ -9055,7 +9055,7 @@ __metadata:
   dependencies:
     "@babel/polyfill": 7.12.1
     "@blockchain-com/components": 6.1.1
-    "@blockchain-com/constellation": ^0.0.11
+    "@blockchain-com/constellation": 0.0.11
     "@formatjs/intl-relativetimeformat": 7.2.10
     "@ledgerhq/hw-app-btc": 4.33.7
     "@ledgerhq/hw-app-eth": 4.32.0