frontend: styled multi select for Active Currencies Dropdown / Select

to improve our UI, we'd like to style our Active Currencies multi dropdown.

In this commit we also refactored it, along with the single dropdown component.

Author: shonsirsha

frontends/web/src/components/accountselector/accountselector.module.css

@@ -50,7 +50,7 @@
 }
 
 .select :global(.react-select__option--is-selected) .balance {
-    color: var(--color-alt);
+    color: var(--color-default);
 }
 
 .select :global(.react-select__control) {
@@ -81,7 +81,7 @@
 }
 
 .select :global(.react-select__option--is-selected) .selectLabelText {
-    color: var(--color-alt);
+    color: var(--color-default);
 }
 
 .valueContainer > img {

frontends/web/src/components/icon/assets/icons/selected-check-light.svg

@@ -52,6 +52,7 @@ import saveSVG from './assets/icons/save.svg';
 import saveLightSVG from './assets/icons/save-light.svg';
 import starSVG from './assets/icons/star.svg';
 import starInactiveSVG from './assets/icons/star-inactive.svg';
+import selectedCheckLightSVG from './assets/icons/selected-check-light.svg';
 import style from './icon.module.css';
 
 export const ExpandOpen = () => (
@@ -156,6 +157,7 @@ export const Save = (props: ImgProps) => (<img src={saveSVG} draggable={false} {
 export const SaveLight = (props: ImgProps) => (<img src={saveLightSVG} draggable={false} {...props} />);
 export const Star = (props: ImgProps) => (<img src={starSVG} draggable={false} {...props} />);
 export const StarInactive = (props: ImgProps) => (<img src={starInactiveSVG} draggable={false} {...props} />);
+export const SelectedCheckLight = (props: ImgProps) => (<img src={selectedCheckLightSVG} draggable={false} {...props} />);
 /**
  * @deprecated Alert is only used for BitBox01 use `Warning` icon instead
  */

frontends/web/src/components/icon/icon.tsx

@@ -33,7 +33,31 @@ export interface SharedProps {
     btcUnit?: BtcUnit;
 }
 
+export type FiatWithDisplayName = {
+  currency: Fiat,
+  displayName: string
+}
+
 export const currencies: Fiat[] = ['AUD', 'BRL', 'CAD', 'CHF', 'CNY', 'EUR', 'GBP', 'HKD', 'ILS', 'JPY', 'KRW', 'NOK', 'RUB', 'SEK', 'SGD', 'USD', 'BTC'];
+export const currenciesWithDisplayName: FiatWithDisplayName[] = [
+  { currency: 'AUD', displayName: 'Australian dollar' },
+  { currency: 'BRL', displayName: 'Brazilian real' },
+  { currency: 'CAD', displayName: 'Canadian dollar' },
+  { currency: 'CHF', displayName: 'Swiss franc' },
+  { currency: 'CNY', displayName: 'Chinese yuan' },
+  { currency: 'EUR', displayName: 'Euro' },
+  { currency: 'GBP', displayName: 'British pound' },
+  { currency: 'HKD', displayName: 'Hong Kong dollar' },
+  { currency: 'ILS', displayName: 'Israeli new shekel' },
+  { currency: 'JPY', displayName: 'Japanese yen' },
+  { currency: 'KRW', displayName: 'South Korean won' },
+  { currency: 'NOK', displayName: 'Norwegian krone' },
+  { currency: 'RUB', displayName: 'Russian ruble' },
+  { currency: 'SEK', displayName: 'Swedish krona' },
+  { currency: 'SGD', displayName: 'Singapore dollar' },
+  { currency: 'USD', displayName: 'United States dollar' },
+  { currency: 'BTC', displayName: 'Bitcoin' }
+];
 
 export const store = new Store<SharedProps>({
   active: 'USD',
@@ -179,4 +203,9 @@ function Conversion({
   );
 }
 
+export const formattedCurrencies = currenciesWithDisplayName.map((fiat) => ({ label: `${fiat.displayName} (${fiat.currency})`, value: fiat.currency }));
+
+const valueLabel = currenciesWithDisplayName.find(fiat => fiat.currency === store.state.active)?.displayName;
+export const defaultValueLabel = valueLabel ? `${valueLabel} (${store.state.active})` : store.state.active;
+
 export const FiatConversion = share<SharedProps, TProvidedProps>(store)(Conversion);

frontends/web/src/components/rates/rates.tsx

@@ -61,10 +61,6 @@
     margin-left: 6px;
 }
 
-.select :global(.react-select__option--is-selected) .selectLabelText {
-    color: var(--color-alt);
-}
-
 .singleValueContainer {
     align-items: center;
     display: flex;

frontends/web/src/routes/buy/components/countryselect.module.css

@@ -14,77 +14,19 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
-import Select, { ActionMeta, MultiValue, MultiValueRemoveProps, components } from 'react-select';
-import { currencies, store, selectFiat, unselectFiat, SharedProps } from '../../../../components/rates/rates';
+import { store, SharedProps, formattedCurrencies } from '../../../../components/rates/rates';
 import { SettingsItem } from '../settingsItem/settingsItem';
-import { Fiat } from '../../../../api/account';
 import { share } from '../../../../decorators/share';
-
-type SelectOption = {
-  label: Fiat;
-  value: Fiat;
-}
-
-type TSelectProps = {
-  options: SelectOption[];
-} & SharedProps;
-
-const ReactSelect = ({ options, active, selected }: TSelectProps) => {
-  const [selectedCurrencies, setSelectedCurrencies] = useState<SelectOption[]>([]);
-
-  useEffect(() => {
-    if (selected.length > 0) {
-      const formattedSelectedCurrencies = selected.map(currency => ({ label: currency, value: currency }));
-      setSelectedCurrencies(formattedSelectedCurrencies);
-    }
-  }, [selected]);
-
-  const MultiValueRemove = (props: MultiValueRemoveProps<SelectOption>) => {
-    const currency = props.data.value;
-    return (
-      currency !== active ?
-        <components.MultiValueRemove {...props}>
-          {'X'}
-        </components.MultiValueRemove>
-        : null
-    );
-  };
-
-  return (
-    <Select
-      classNamePrefix="react-select"
-      isSearchable
-      isClearable={false}
-      components={{ MultiValueRemove }}
-      isMulti
-      value={selectedCurrencies}
-      onChange={(selectedFiats: MultiValue<SelectOption>, meta: ActionMeta<SelectOption>) => {
-        switch (meta.action) {
-        case 'remove-value':
-          if (selectedFiats.length > 0) {
-            const unselectedFiat = meta.removedValue.value;
-            unselectFiat(unselectedFiat);
-          }
-          break;
-        case 'select-option':
-          const selectedFiat = selectedFiats[selectedFiats.length - 1].value as Fiat;
-          selectFiat(selectedFiat);
-        }
-      }}
-      options={options}
-    />);
-};
+import { ActiveCurrenciesDropdown } from '../dropdowns/activecurrenciesdropdown';
 
 const ActiveCurrenciesDropdownSetting = ({ selected, active }: SharedProps) => {
-  const formattedCurrencies = currencies.map((currency) => ({ label: currency, value: currency }));
   return (
     <SettingsItem
       collapseOnSmall
       settingName="Active Currencies"
       secondaryText="These additional currencies can be toggled through on your account page."
       extraComponent={
-        <ReactSelect
+        <ActiveCurrenciesDropdown
           options={formattedCurrencies}
           active={active}
           selected={selected}

frontends/web/src/routes/new-settings/components/appearance/activeCurrenciesDropdownSetting.tsx

@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-import { currencies, selectFiat, setActiveFiat, store } from '../../../../components/rates/rates';
-import { SingleDropdown } from '../singledropdown/singledropdown';
+import { defaultValueLabel, formattedCurrencies, selectFiat, setActiveFiat, store } from '../../../../components/rates/rates';
+import { SingleDropdown } from '../dropdowns/singledropdown';
 import { SettingsItem } from '../settingsItem/settingsItem';
 import { Fiat } from '../../../../api/account';
 
 export const DefaultCurrencyDropdownSetting = () => {
-  const formattedCurrencies = currencies.map((currency) => ({ label: currency, value: currency }));
-
   return (
     <SettingsItem
       settingName="Default Currency"
@@ -36,7 +34,10 @@ export const DefaultCurrencyDropdownSetting = () => {
               selectFiat(fiat);
             }
           }}
-          defaultValue={{ label: store.state.active, value: store.state.active }}
+          defaultValue={{
+            label: defaultValueLabel,
+            value: store.state.active
+          }}
         />
       }
     />

frontends/web/src/routes/new-settings/components/appearance/defaultCurrencyDropdownSetting.tsx

@@ -18,7 +18,7 @@ import { SettingsItem } from '../settingsItem/settingsItem';
 import { useTranslation } from 'react-i18next';
 import { TLanguagesList } from '../../../../components/language/types';
 import { getSelectedIndex } from '../../../../utils/language';
-import { SingleDropdown } from '../singledropdown/singledropdown';
+import { SingleDropdown } from '../dropdowns/singledropdown';
 
 const defaultLanguages: TLanguagesList = [
   { code: 'ar', display: 'العربية' },

frontends/web/src/routes/new-settings/components/appearance/languageDropdownSetting.tsx

@@ -0,0 +1,59 @@
+.select :global(.react-select__input-container) {
+    position: absolute;
+    top: -2px;
+    left: 6px;
+}
+
+.select :global(.react-select__option) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/*displays only first 3 currencies, the rest gets hidden*/
+.select :global(.react-select__multi-value):nth-child(n + 4) {
+    display: none;
+}
+
+
+/*
+displays ', ' as a pseudo component for all currency component
+except the last displayed component (the 3rd currency component).
+
+The reason for :nth-last-child(2) instead of just :last-child is because there's an extra
+component created by react-select after the actual last currency component. 
+
+So, we're targetting the second to last component here, 
+which is the last selected currency in the DOM.
+*/
+.select:not(.hideMultiSelect) :global(.react-select__multi-value):not(:nth-last-child(2))::after {
+    content: ',';
+    padding-right: 2px;
+}
+
+/*
+displays '...' as a pseudo component of the 3rd currency and only when there's more than 3 selected.
+:nth-last-child(2) is used for the same reason as above
+*/
+.select:not(.hideMultiSelect) :global(.react-select__multi-value):nth-child(3):not(:nth-last-child(2))::after {
+    content: '\002026';
+}
+
+.select.hideMultiSelect :global(.react-select__multi-value) {
+    display: none;
+}
+
+.select :global(.react-select__value-container--is-multi) {
+    height: var(--item-height-xsmall);
+}
+
+.defaultCurrency:hover {
+    cursor: not-allowed;
+}
+
+.defaultLabel {
+    font-size: var(--size-small);
+    margin: 0;
+    text-transform: capitalize;
+}

frontends/web/src/routes/new-settings/components/dropdowns/activecurrenciesdropdown.module.css

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import Select, { ActionMeta, DropdownIndicatorProps, OptionProps, components } from 'react-select';
+import { selectFiat, unselectFiat, SharedProps } from '../../../../components/rates/rates';
+import { Fiat } from '../../../../api/account';
+import { SelectedCheckLight } from '../../../../components/icon';
+import dropdownStyles from './dropdowns.module.css';
+import activeCurrenciesDropdownStyle from './activecurrenciesdropdown.module.css';
+import { useTranslation } from 'react-i18next';
+
+type SelectOption = {
+    label: String;
+    value: Fiat;
+  }
+
+type TSelectProps = {
+    options: SelectOption[];
+  } & SharedProps;
+
+// a multi-select dropdown
+export const ActiveCurrenciesDropdown = ({
+  options,
+  active: defaultCurrency, // active here actually means default, thus aliasing it
+  selected
+}: TSelectProps) => {
+  const [selectedCurrencies, setSelectedCurrencies] = useState<SelectOption[]>([]);
+  const [search, setSearch] = useState('');
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (selected.length > 0) {
+      const formattedSelectedCurrencies = selected.map(currency => ({ label: currency, value: currency }));
+      setSelectedCurrencies(formattedSelectedCurrencies);
+    }
+  }, [selected]);
+
+  const DropdownIndicator = (props: DropdownIndicatorProps<SelectOption, true>) => {
+    return (
+      <components.DropdownIndicator {...props}>
+        <div className={dropdownStyles.dropdown} />
+      </components.DropdownIndicator>
+    );
+  };
+
+  const Option = (props: OptionProps<SelectOption, true>) => {
+    const { label, value } = props.data;
+    const selected = selectedCurrencies.findIndex(currency => currency.value === value) >= 0;
+    const isDefaultCurrency = defaultCurrency === value;
+    return (
+      <components.Option {...props} className={`${isDefaultCurrency ? activeCurrenciesDropdownStyle.defaultCurrency : ''}`}>
+        <span>{label}</span>
+        {isDefaultCurrency ? <p className={activeCurrenciesDropdownStyle.defaultLabel}>{t('fiat.default')}</p> : null}
+        {selected && !isDefaultCurrency ? <SelectedCheckLight /> : null}
+      </components.Option>
+    );
+  };
+  return (
+    <Select
+      className={`
+         ${dropdownStyles.select}
+         ${activeCurrenciesDropdownStyle.select}
+         ${search.length > 0 ? activeCurrenciesDropdownStyle.hideMultiSelect : ''}
+         `}
+      classNamePrefix="react-select"
+      isSearchable
+      isClearable={false}
+      components={{ DropdownIndicator, IndicatorSeparator: () => null, MultiValueRemove: () => null, Option }}
+      isMulti
+      closeMenuOnSelect={false}
+      hideSelectedOptions={false}
+      value={[...selectedCurrencies].reverse()}
+      onInputChange={(newValue) => setSearch(newValue)}
+      onChange={(_, meta: ActionMeta<SelectOption>) => {
+        switch (meta.action) {
+        case 'select-option':
+          if (meta.option) {
+            selectFiat(meta.option.value);
+          }
+          break;
+        case 'deselect-option':
+          if (meta.option && meta.option.value !== defaultCurrency) {
+            unselectFiat(meta.option.value);
+          }
+        }
+
+      }}
+      options={options}
+    />);
+};