feat(navbar): update constellation, use constellation icons, and add …

…functionality to secondary nav items
blockchain · Dec 9, 2021 · 087c44a · 087c44a
1 parent 1e0561d
commit 087c44a
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 36 deletions.
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.15",
     "@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/components/FabButton/index.stories.tsx b/packages/blockchain-wallet-v4-frontend/src/components/FabButton/index.stories.tsx
@@ -28,7 +28,9 @@ export default {
   title: 'FabButton'
 } as ComponentMeta<typeof FabButton>
 
-const Template: ComponentStory<typeof FabButton> = (args) => <FabButton />
+const Template: ComponentStory<typeof FabButton> = (args) => <FabButton {...args} />
 
 export const Default = Template.bind({})
-Default.args = {}
+Default.args = {
+  onClick: () => {}
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/FabButton/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/FabButton/index.tsx
@@ -25,9 +25,9 @@ const FabIcon = (
   </svg>
 )
 
-const FabButton = () => {
+const FabButton = ({ onClick }: Props) => {
   return (
-    <StyledButton data-e2e='fabButton'>
+    <StyledButton onClick={onClick} data-e2e='fabButton'>
       {FabIcon}
       <Text weight={600} size='14px' color='white' style={{ paddingLeft: '5px' }}>
         Trade
@@ -36,6 +36,8 @@ const FabButton = () => {
   )
 }
 
-type Props = {}
+type Props = {
+  onClick: () => void
+}
 
 export default FabButton
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
@@ -54,5 +54,10 @@ const PrimaryNavItems = [
 
 export const Default = Template.bind({})
 Default.args = {
-  primaryNavItems: PrimaryNavItems
+  fabClickHandler: () => {},
+  limitsClickHandler: () => {},
+  logoutClickHandler: () => {},
+  mobileClickHandler: () => {},
+  primaryNavItems: PrimaryNavItems,
+  refreshClickHandler: () => {}
 }
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,9 +1,14 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { NavLink } from 'react-router-dom'
+import { Icon, Text } from '@blockchain-com/constellation'
 import styled from 'styled-components'
 
-import { Button, Icon, Text } from 'blockchain-info-components'
+import { Button } from 'blockchain-info-components'
 import FabButton from 'components/FabButton'
+import { DropdownMenu, DropdownMenuArrow, DropdownMenuItem } from 'components/Navbar/NavbarDropdown'
+import { Destination } from 'layouts/Wallet/components'
+import { useOnClickOutside } from 'services/misc'
 import { media } from 'services/styles'
 
 export type PrimaryNavItem = {
@@ -15,7 +20,7 @@ export type PrimaryNavItem = {
 const NavContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0 22px;
   border-bottom: 1px solid #f0f2f7;
   height: 56px;
 
@@ -29,6 +34,8 @@ const Logo = styled.div`
   align-items: center;
 
   & > a {
+    height: 20px;
+    width: 20px;
     color: #3d89f5;
     text-decoration: none;
   }
@@ -44,6 +51,10 @@ const NavRight = styled.div`
   align-items: stretch;
 `
 
+const DropdownNavLink = styled(NavLink)`
+  padding: 0 !important;
+`
+
 const ListStyles = styled.ul`
   list-style: none;
   display: flex;
@@ -55,6 +66,18 @@ const ListStyles = styled.ul`
     display: flex;
     align-items: center;
     padding: 10px 12px;
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    &.rotate {
+      transition-duration: 0.5s;
+    }
+
+    &.rotate:active {
+      transform: rotate(360deg);
+    }
   }
 
   & a {
@@ -96,22 +119,37 @@ const NavButton = styled(Button)`
   }
 `
 
-const Navbar = ({ primaryNavItems }: Props) => {
+const Navbar = ({
+  fabClickHandler,
+  limitsClickHandler,
+  logoutClickHandler,
+  mobileClickHandler,
+  primaryNavItems,
+  refreshClickHandler
+}: Props) => {
+  const ref = useRef(null)
+  const [isMenuOpen, toggleIsMenuOpen] = useState(false)
+  useOnClickOutside(ref, () => toggleIsMenuOpen(false))
+
+  const handleMenuToggle = () => {
+    toggleIsMenuOpen((isMenuOpen) => !isMenuOpen)
+  }
   return (
     <NavContainer>
       <NavLeft>
         <Logo>
           <NavLink to='/home' data-e2e='homeLink'>
-            <Icon color='#3D89F5' name='blockchain-logo' size='35px' />
+            {
+              // @ts-ignore
+              <Icon name='blockchain' color='#3D89F5' size='md' />
+            }
           </NavLink>
         </Logo>
         <PrimaryNavItems>
           {primaryNavItems.map((item: PrimaryNavItem) => (
             <li key={item.e2e}>
               <NavLink to={item.dest} data-e2e={item.e2e}>
-                <Text size='14px' weight={600}>
-                  {item.text}
-                </Text>
+                <Text variant='paragraph-1'>{item.text}</Text>
               </NavLink>
             </li>
           ))}
@@ -120,21 +158,81 @@ const Navbar = ({ primaryNavItems }: Props) => {
       <NavRight>
         <SecondaryNavItems>
           <li>
-            <FabButton />
+            <FabButton onClick={fabClickHandler} />
           </li>
           <li>
-            <NavButton data-e2e='mobileQRLink'>
-              <Icon color='#98A1B2' name='mobile' size='15px' />
+            <NavButton onClick={mobileClickHandler} data-e2e='mobileQRLink'>
+              {
+                // @ts-ignore
+                <Icon color='#98A1B2' name='phone' size='sm' />
+              }
             </NavButton>
           </li>
-          <li>
-            <NavButton data-e2e='refreshLink'>
-              <Icon color='#F0F2F7' name='refresh' size='23px' />
+          <li className='rotate'>
+            <NavButton onClick={refreshClickHandler} data-e2e='refreshLink'>
+              {
+                // @ts-ignore
+                <Icon color='#98A1B2' name='refresh' size='sm' />
+              }
             </NavButton>
           </li>
           <li>
-            <NavButton data-e2e='settingsLink'>
-              <Icon color='#98A1B2' name='user' size='15px' />
+            <NavButton onClick={handleMenuToggle} data-e2e='settingsLink'>
+              {
+                // @ts-ignore
+                <Icon color='#98A1B2' name='user' size='sm' />
+              }
+              {isMenuOpen && (
+                <DropdownMenu ref={ref}>
+                  <DropdownMenuArrow />
+                  <DropdownNavLink to='/settings/general'>
+                    <DropdownMenuItem data-e2e='settings_generalLink'>
+                      <Destination>
+                        <FormattedMessage
+                          id='layouts.wallet.header.general'
+                          defaultMessage='General'
+                        />
+                      </Destination>
+                    </DropdownMenuItem>
+                  </DropdownNavLink>
+                  <DropdownMenuItem data-e2e='settings_profileLink' onClick={limitsClickHandler}>
+                    <Destination>
+                      <FormattedMessage
+                        id='layouts.wallet.header.tradinglimits'
+                        defaultMessage='Trading Limits'
+                      />
+                    </Destination>
+                  </DropdownMenuItem>
+                  <DropdownNavLink to='/settings/preferences'>
+                    <DropdownMenuItem data-e2e='settings_preferencesLink'>
+                      <Destination>
+                        <FormattedMessage
+                          id='layouts.wallet.header.preferences'
+                          defaultMessage='Preferences'
+                        />
+                      </Destination>
+                    </DropdownMenuItem>
+                  </DropdownNavLink>
+                  <DropdownNavLink to='/settings/addresses'>
+                    <DropdownMenuItem data-e2e='settings_walletsLink'>
+                      <Destination>
+                        <FormattedMessage
+                          id='layouts.wallet.header.walletsaddresses'
+                          defaultMessage='Wallets & Addresses'
+                        />
+                      </Destination>
+                    </DropdownMenuItem>
+                  </DropdownNavLink>
+                  <DropdownMenuItem onClick={logoutClickHandler} data-e2e='logoutLink'>
+                    <Destination>
+                      <FormattedMessage
+                        id='layouts.wallet.header.Sign Out'
+                        defaultMessage='Sign Out'
+                      />
+                    </Destination>
+                  </DropdownMenuItem>
+                </DropdownMenu>
+              )}
             </NavButton>
           </li>
         </SecondaryNavItems>
@@ -144,7 +242,12 @@ const Navbar = ({ primaryNavItems }: Props) => {
 }
 
 type Props = {
+  fabClickHandler: () => void
+  limitsClickHandler: () => void
+  logoutClickHandler: () => void
+  mobileClickHandler: () => void
   primaryNavItems: Array<PrimaryNavItem>
+  refreshClickHandler: () => void
 }
 
 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
@@ -31,7 +31,9 @@ const mapStateToProps = (state: RootState) => ({
 const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(actions.components.layoutWallet, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch),
-  refreshActions: bindActionCreators(actions.components.refresh, dispatch)
+  refreshActions: bindActionCreators(actions.components.refresh, dispatch),
+  sessionActions: bindActionCreators(actions.session, dispatch),
+  settingsActions: bindActionCreators(actions.modules.settings, dispatch)
 })
 
 const connector = connect(mapStateToProps, mapDispatchToProps)

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,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { Navbar } from 'components/NavbarV2'
@@ -15,6 +15,21 @@ const Header = (props: OwnProps) => {
   const isLaptop = useMedia('laptop')
   const isTablet = useMedia('tablet')
 
+  const refreshCallback = useCallback(() => {
+    props.refreshActions.refreshClicked()
+  }, [])
+
+  const logoutCallback = useCallback(() => {
+    props.sessionActions.logout()
+  }, [])
+
+  const limitsCallback = useCallback(() => {
+    props.modalActions.showModal('TRADING_LIMITS_MODAL', {
+      origin: 'TradingLimits'
+    })
+    props.settingsActions.generalSettingsInternalRedirect('TradingLimits')
+  }, [])
+
   const PrimaryNavItems = [
     {
       dest: '/home',
@@ -30,11 +45,6 @@ const Header = (props: OwnProps) => {
       dest: '/rewards',
       e2e: 'rewardsLink',
       text: <FormattedMessage id='copy.rewards' defaultMessage='Rewards' />
-    },
-    {
-      dest: '/daaps',
-      e2e: 'daapsLink',
-      text: <FormattedMessage id='copy.daaps' defaultMessage='Daaps' />
     }
   ]
 
@@ -46,8 +56,25 @@ const Header = (props: OwnProps) => {
     })
   }
 
+  if (props.featureFlags.daaps) {
+    PrimaryNavItems.push({
+      dest: '/daaps',
+      e2e: 'daapsLink',
+      text: <FormattedMessage id='copy.daaps' defaultMessage='Daaps' />
+    })
+  }
+
   if (props.isRedesignEnabled) {
-    return <Navbar primaryNavItems={PrimaryNavItems} />
+    return (
+      <Navbar
+        primaryNavItems={PrimaryNavItems}
+        fabClickHandler={() => {}}
+        mobileClickHandler={() => {}}
+        refreshClickHandler={refreshCallback}
+        limitsClickHandler={limitsCallback}
+        logoutClickHandler={logoutCallback}
+      />
+    )
   }
   return (
     <>{isTablet ? <Small {...props} /> : isLaptop ? <Medium {...props} /> : <Large {...props} />}</>

diff --git a/yarn.lock b/yarn.lock
@@ -1889,15 +1889,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@blockchain-com/constellation@npm:0.0.11":
-  version: 0.0.11
-  resolution: "@blockchain-com/constellation@npm:0.0.11"
+"@blockchain-com/constellation@npm:^0.0.15":
+  version: 0.0.15
+  resolution: "@blockchain-com/constellation@npm:0.0.15"
   dependencies:
     styled-components: ^5.3.0
   peerDependencies:
     react: ^17.0.2
     react-dom: ^17.0.2
-  checksum: cce7cff15bc6c34baa95bc5e8513dc08b720370259b57bb6f166b4a22a95c09de642e23b2af92511bbce2d886bdfec9f801dad46fc7599de871f12d0ceff9581
+  checksum: cde61865a1204b960129df4a21e78d5e930e8aff3ba8eb7dba54a8c2ab5a3edf942ab44e59d47841b9c52b07a5a4e21d2368ecfe5d310cbbc0e96663a9954679
   languageName: node
   linkType: hard
 
@@ -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.15
     "@formatjs/intl-relativetimeformat": 7.2.10
     "@ledgerhq/hw-app-btc": 4.33.7
     "@ledgerhq/hw-app-eth": 4.32.0