feat: create new dropdown menu

src/containers/Accounts/AMM/AMMAccounts/AMMAccountHeader/AMMAccountHeader.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import '../../../../shared/css/nested-menu.scss'
 import '../../../AccountHeader/styles.scss'
 import '../../../AccountHeader/balance-selector.scss'
 import {

src/containers/Accounts/AccountHeader/BalanceSelector.tsx

@@ -0,0 +1,51 @@
+import { localizeNumber } from '../../shared/utils'
+import { Dropdown, DropdownItem } from '../../shared/components/Dropdown'
+import Currency from '../../shared/components/Currency'
+import { useLanguage } from '../../shared/hooks'
+import './balance-selector.scss'
+import { CURRENCY_OPTIONS } from '../../shared/transactionUtils'
+
+export interface BalanceSelectorProps {
+  text: string
+  balances: any
+  onSetCurrencySelected: (currency: string) => void
+  currencySelected: string
+}
+
+export const BalanceSelector = ({
+  text,
+  balances,
+  onSetCurrencySelected,
+  currencySelected,
+}: BalanceSelectorProps) => {
+  const language = useLanguage()
+  const balanceMenuItems = Object.entries(balances).map(([currency, value]) => {
+    if (currency === currencySelected) {
+      return null
+    }
+    const options = {
+      ...CURRENCY_OPTIONS,
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    }
+    const formattedValue = localizeNumber(value, language, options) || '0.00'
+
+    return (
+      <DropdownItem
+        key={currency}
+        handler={() => {
+          onSetCurrencySelected(currency)
+        }}
+      >
+        <Currency currency={currency} />
+        <span className="total-balance">{formattedValue}</span>
+      </DropdownItem>
+    )
+  })
+  return (
+    <Dropdown title={text} className="balance-selector">
+      {balanceMenuItems}
+    </Dropdown>
+  )
+}

src/containers/Accounts/AccountHeader/balance-selector.scss

@@ -9,90 +9,24 @@
     width: 280px;
   }
 
-  .balance-selector-button {
-    position: relative;
-    display: block;
-    width: 100%;
-    outline: inherit;
-    text-align: left;
-
-    @include for-size(desktop-up) {
-      font-size: 16px;
-    }
+  .dropdown-toggle {
+    padding: 12px 16px;
   }
 
-  .menu-item {
+  .dropdown-menu {
     width: 100%;
-    padding: 8px 16px;
-    border-style: none;
-    background-color: $black;
-    color: $white;
-    cursor: pointer;
-    font-size: 14px;
-    outline: none;
-
-    &:hover {
-      background-color: $black-80;
-      color: $green;
-    }
-
-    @include for-size(desktop-up) {
-      padding: 8px 16px;
-      font-size: 16px;
-    }
-  }
-
-  .menu-item-currency {
-    @include bold;
   }
 
-  .menu-item > div {
-    overflow: hidden;
-    max-width: 50%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .dropdown-item {
+    display: flex;
   }
 
-  .selector-text {
-    display: inline-block;
-    padding: 2px 0px;
-    margin-right: 8px;
-    @include medium;
+  .currency {
+    font-weight: bold;
   }
 
-  .selector-icon {
-    display: inline-block;
-    width: 18px;
-    height: 16px;
-    margin: 4px 0px;
+  .total-balance {
+    margin-left: auto;
     color: $black-40;
-    vertical-align: middle;
-
-    @include for-size(desktop-up) {
-      float: right;
-    }
-
-    &.selector-icon-close {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  &.is-active {
-    .balance-selector-button {
-      z-index: 100001;
-    }
-
-    .nested-items {
-      position: absolute;
-      z-index: 100000;
-      right: 0;
-      height: auto;
-      border: 1px solid $black-70;
-      border-radius: 9px;
-      background-color: $black;
-      box-shadow: 0px 0px 5px 0px $black-70;
-      color: $black-40;
-    }
   }
 }

src/containers/Accounts/AccountHeader/index.tsx

@@ -1,13 +1,11 @@
-import { useContext, useState, useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { loadAccountState } from './actions'
 import Loader from '../../shared/components/Loader'
-import '../../shared/css/nested-menu.scss'
 import './styles.scss'
-import './balance-selector.scss'
-import BalanceSelector from './BalanceSelector'
+import { BalanceSelector } from './BalanceSelector'
 import { Account } from '../../shared/components/Account'
 import { localizeNumber } from '../../shared/utils'
 import SocketContext from '../../shared/SocketContext'
@@ -69,7 +67,6 @@ interface AccountHeaderProps {
 }
 
 const AccountHeader = (props: AccountHeaderProps) => {
-  const [showBalanceSelector, setShowBalanceSelector] = useState(false)
   const { t } = useTranslation()
   const rippledSocket = useContext(SocketContext)
   const language = useLanguage()
@@ -87,27 +84,17 @@ const AccountHeader = (props: AccountHeaderProps) => {
     actions.loadAccountState(accountId, rippledSocket)
   }, [accountId, actions, rippledSocket])
 
-  function toggleBalanceSelector(force?) {
-    setShowBalanceSelector(force !== undefined ? force : !showBalanceSelector)
-  }
-
   function renderBalancesSelector() {
     const { balances = {} } = data
     return (
       Object.keys(balances).length > 1 && (
         <div className="balance-selector-container">
           <BalanceSelector
-            language={language}
             text={`${Object.keys(balances).length - 1} ${t(
               'accounts.other_balances',
             )}`}
-            expandMenu={showBalanceSelector}
             balances={balances}
-            onClick={() => toggleBalanceSelector()}
-            onMouseLeave={() => toggleBalanceSelector(false)}
-            onSetCurrencySelected={(currency) =>
-              onSetCurrencySelected(currency)
-            }
+            onSetCurrencySelected={onSetCurrencySelected}
             currencySelected={currencySelected}
           />
         </div>

src/containers/Accounts/AccountHeader/styles.scss

@@ -149,7 +149,6 @@
     .secondary {
       padding: 0px 8px;
       margin-bottom: 20px;
-      color: $black-40;
       font-size: 12px;
       @include bold;
 

src/containers/Accounts/test/index.test.js

@@ -52,7 +52,7 @@ describe('Account container', () => {
     wrapper.update()
     expect(wrapper.find(AccountHeader).length).toBe(1)
     expect(wrapper.find(AccountTransactionTable).length).toBe(1)
-    wrapper.find('.balance-selector-button').simulate('click')
+    wrapper.find('.balance-selector button').simulate('click')
     wrapper.unmount()
   })
 })

src/containers/Header/menu.scss

@@ -42,51 +42,6 @@
     }
   }
 
-  .nested-menu {
-    position: relative;
-    display: inline-block;
-    padding: 8px 20px 18px 16px;
-    margin-left: 4px;
-    cursor: pointer;
-
-    .title {
-      margin-right: 10px;
-    }
-
-    .arrow {
-      position: relative;
-      top: 1px;
-    }
-
-    .menu-item {
-      display: block;
-    }
-
-    .nested-items {
-      position: absolute;
-      top: 35px;
-      left: -8px;
-      padding: 8px 1px;
-      border-radius: 4px;
-      background-color: $white;
-      box-shadow: 0px 0px 5px 0px rgb(35 41 47 / 24%);
-
-      .menu-item {
-        text-align: left;
-      }
-    }
-
-    .vertical {
-      margin-bottom: 1px;
-
-      &:hover,
-      &:focus {
-        background-color: $black-70;
-        color: $black-70;
-      }
-    }
-  }
-
   .horizontal-selected,
   .vertical-selected {
     color: $white;

src/containers/NFT/NFTHeader/NFTHeader.tsx

@@ -2,7 +2,6 @@ import { useEffect, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
 import Loader from '../../shared/components/Loader'
-import '../../shared/css/nested-menu.scss'
 import './styles.scss'
 import SocketContext from '../../shared/SocketContext'
 import Tooltip from '../../shared/components/Tooltip'

src/containers/PayStrings/PayStringHeader/index.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import PayStringLogomark from '../../shared/images/PayString_Logomark.png'
 import QuestIcon from '../../shared/images/hover_question.svg'
 import Tooltip from '../../shared/components/Tooltip'
-import '../../shared/css/nested-menu.scss'
 import './styles.scss'
 import { useLanguage } from '../../shared/hooks'
 

src/containers/Token/TokenHeader/index.tsx

@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { loadTokenState } from './actions'
 import Loader from '../../shared/components/Loader'
-import '../../shared/css/nested-menu.scss'
 import './styles.scss'
 import { localizeNumber, formatLargeNumber } from '../../shared/utils'
 import SocketContext from '../../shared/SocketContext'