frontend: update UI of add account dropdown to use react-select

Identical UI with the select account dropdown in buy & sell page
with icon and coin name on the option and selected value.

frontends/web/src/routes/account/add/components/coin-dropdown.module.css

@@ -0,0 +1,91 @@
+.dropdown {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    font-weight: 400;
+    height: calc(var(--space-quarter) * 3);
+    padding: 0 calc(var(--space-quarter) + var(--space-eight));
+}
+
+.select {
+    margin-bottom: var(--space-half);
+}
+
+.select :global(.react-select__group-heading) {
+    color: var(--color-default);
+    font-size: var(--size-default);
+    margin: 0;
+    padding-right: var(--space-quarter);
+    text-transform: unset;
+}
+
+.select :global(.react-select__menu) {
+    background-color: var(--background-secondary);
+    z-index: 14;
+}
+
+.select :global(.react-select__option) {
+    background-color: var(--background-secondary);
+}
+
+.select :global(.react-select__option):hover {
+    background-color: var(--background-custom-select-hover);
+}
+
+.select :global(.react-select__option--is-selected),
+.select :global(.react-select__option--is-selected):hover {
+    background-color: var(--background-custom-select-selected);
+}
+
+.select :global(.react-select__option--is-disabled) span {
+    color: var(--color-secondary);
+}
+
+.select :global(.react-select__option--is-disabled.react-select__option--is-selected):hover {
+    background-color: var(--background-custom-select-selected);
+}
+
+.select :global(.react-select__option--is-disabled):hover {
+    background-color: transparent;
+}
+
+.select :global(.react-select__option--is-selected) .balance {
+    color: var(--color-default);
+}
+
+.select :global(.react-select__control) {
+    background-color: var(--background-secondary);
+    padding: var(--space-quarter) var(--space-eight);
+}
+
+.select :global(.react-select__single-value) {
+    width: 100%;
+}
+
+.select :global(.react-select__option--is-selected) .selectLabelText {
+    color: var(--color-default);
+}
+
+.singleValueContainer {
+    align-items: center;
+    display: flex;
+    left: var(--space-quarter);
+    position: absolute;
+    width: 100%;
+}
+
+
+.valueContainer {
+    align-items: center;
+    color: var(--color-default);
+    display: flex;
+}
+
+.valueContainer > img {
+    width: 20px;
+    height: 20px;
+}
+
+.selectLabelText {
+    margin-left: 6px;
+}

frontends/web/src/routes/account/add/components/coin-dropdown.tsx

@@ -1,3 +1,4 @@
+
 /**
  * Copyright 2021 Shift Crypto AG
  *
@@ -16,39 +17,101 @@
 
 import { useTranslation } from 'react-i18next';
 import * as backendAPI from '@/api/backend';
-import { Select } from '@/components/forms';
+import Select, { components, SingleValueProps, OptionProps, SingleValue, DropdownIndicatorProps } from 'react-select';
+import { Logo } from '@/components/icon/logo';
+import styles from './coin-dropdown.module.css';
 
 type TCoinDropDownProps = {
   onChange: (coin: backendAPI.ICoin) => void;
   supportedCoins: backendAPI.ICoin[];
   value: string;
 };
 
+type TOption = {
+  label: string;
+  value: backendAPI.ICoin['coinCode'];
+  isDisabled: boolean;
+}
+
+
+const DropdownIndicator = (props: DropdownIndicatorProps<TOption>) => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <div className={styles.dropdown} />
+    </components.DropdownIndicator>
+  );
+};
+
+const SelectSingleValue = (props: SingleValueProps<TOption>) => {
+  const { value, label } = props.data;
+  return (
+    <div className={styles.singleValueContainer}>
+      <components.SingleValue {...props}>
+        <div className={styles.valueContainer}>
+          <Logo coinCode={value} alt={label} />
+          <span className={styles.selectLabelText}>{label}</span>
+        </div>
+      </components.SingleValue>
+    </div>
+  );
+};
+
+
+const SelectOption = (props: OptionProps<TOption>) => {
+  const { label, value } = props.data;
+
+  return (
+    <components.Option {...props}>
+      <div className={styles.valueContainer}>
+        <Logo coinCode={value} alt={label} />
+        <span className={styles.selectLabelText}>{label}</span>
+      </div>
+    </components.Option>
+  );
+};
+
+
 export const CoinDropDown = ({
   onChange,
   supportedCoins,
   value,
 }: TCoinDropDownProps) => {
   const { t } = useTranslation();
+
+  const options = [
+    { label: t('buy.info.selectPlaceholder'), value: 'choose', isDisabled: true },
+    ...supportedCoins.map(({ coinCode, name, canAddAccount }) => ({
+      value: coinCode,
+      label: name,
+      isDisabled: !canAddAccount,
+    })),
+  ] as TOption[];
+
   return (
     <Select
+      className={styles.select}
+      classNamePrefix="react-select"
       autoFocus
-      options={[
-        {
-          text: t('buy.info.selectPlaceholder'),
-          disabled: true,
-          value: 'choose',
-        },
-        ...(supportedCoins).map(({ coinCode, name, canAddAccount }) => ({
-          value: coinCode,
-          text: name,
-          disabled: !canAddAccount,
-        }))
-      ]}
-      onInput={e => onChange(supportedCoins.find(c => {
-        return c.coinCode === (e.target as HTMLSelectElement).value;
-      }) as backendAPI.ICoin)}
-      value={value}
-      id="coinCodeDropDown" />
+      isSearchable={false}
+      options={options}
+      onChange={(e) => {
+        const selectedOption = e as SingleValue<TOption>;
+        if (selectedOption) {
+          const selectedCoin = supportedCoins.find(c => c.coinCode === selectedOption.value);
+          if (selectedCoin) {
+            onChange(selectedCoin);
+          }
+        }
+      }}
+      value={options.find(option => option.value === value)}
+      id="coinCodeDropDown"
+      components={{
+        DropdownIndicator,
+        SingleValue: SelectSingleValue,
+        Option: SelectOption,
+        IndicatorSeparator: () => null,
+      }}
+      placeholder={t('buy.info.selectPlaceholder')}
+    />
   );
 };