Feat: amount input currency

src/renderer/app/styles/theme/default.css

@@ -55,7 +55,7 @@
   --alert-border: rgb(123, 41, 255);
   --alert-border-warning: rgb(246, 143, 7);
   --alert-border-negative: rgb(245, 33, 99);
-  --token-border: #c3c3cb;
+  --token-border: #5e5e69;
   --border-dark: #6e6e78;
 
   /* DIVIDER */
@@ -71,7 +71,7 @@
   --left-navigation-menu-background: #ffffff;
   --main-app-background: rgba(69, 69, 137, 0.04);
   --token-container-background: #ffffff;
-  --token-background: #79797d;
+  --token-background: #363643;
   --input-background: #fff;
   --input-background-disabled: rgba(69, 69, 137, 0.04);
   --action-background-hover: rgba(69, 69, 137, 0.06);

src/renderer/entities/asset/ui/AssetIcon/AssetIcon.tsx

@@ -8,6 +8,7 @@ type Props = {
   className?: string;
 };
 
+// TODO add currency support
 export const AssetIcon = ({ src, name, size = 32, className }: Props) => {
   const [isImgLoaded, toggleImgLoaded] = useToggle();
 

src/renderer/entities/price/index.ts

@@ -1,2 +1,3 @@
 export { priceProviderModel } from './model/price-provider-model';
 export { currencyModel } from './model/currency-model';
+export { useCurrencyRate } from './lib/useCurrencyRate';

src/renderer/entities/price/lib/useCurrencyRate.ts

@@ -0,0 +1,13 @@
+import { useUnit } from 'effector-react';
+
+import { currencyModel, priceProviderModel } from '@renderer/entities/price';
+
+export const useCurrencyRate = (assetId?: string, showCurrency?: boolean): number | null => {
+  const fiatFlag = useUnit(priceProviderModel.$fiatFlag);
+  const activeCurrency = useUnit(currencyModel.$activeCurrency);
+  const assetsPrices = useUnit(priceProviderModel.$assetsPrices);
+
+  if (!showCurrency || !fiatFlag || !activeCurrency || !assetsPrices || !assetId) return null;
+
+  return assetsPrices[assetId][activeCurrency.coingeckoId].price;
+};

src/renderer/pages/Settings/Overview/components/GeneralActions/GeneralActions.test.tsx

@@ -2,22 +2,26 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { GeneralActions } from './GeneralActions';
-import { Paths } from '../../../../../app/providers/routes/paths';
 
 jest.mock('@renderer/app/providers', () => ({
   useI18n: jest.fn().mockReturnValue({
     t: (key: string) => key,
   }),
+  Paths: {
+    NETWORK: '/settings/network',
+    CURRENCY: '/settings/currency',
+  },
 }));
 
-describe('pages/Settings/Overview/GeneralActions', () => {
-  test('should render label and link to network', () => {
+describe('screens/Settings/Overview/GeneralActions', () => {
+  test('should render label and link to network and currency', () => {
     render(<GeneralActions />, { wrapper: MemoryRouter });
 
     const label = screen.getByText('settings.overview.generalLabel');
-    const link = screen.getAllByRole('link')[0];
+    const links = screen.getAllByRole('link');
     expect(label).toBeInTheDocument();
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', Paths.NETWORK);
+
+    expect(links[0]).toHaveAttribute('href', '/settings/network');
+    expect(links[1]).toHaveAttribute('href', '/settings/currency');
   });
 });

src/renderer/pages/Settings/Overview/components/GeneralActions/GeneralActions.tsx

@@ -2,8 +2,7 @@ import { Link } from 'react-router-dom';
 import { useUnit } from 'effector-react/effector-react.umd';
 
 import { Icon, BodyText, Plate, FootnoteText, HelpText } from '@renderer/shared/ui';
-import { useI18n } from '@renderer/app/providers';
-import { Paths } from '../../../../../app/providers/routes/paths';
+import { useI18n, Paths } from '@renderer/app/providers';
 import { cnTw } from '@renderer/shared/lib/utils';
 import { currencyModel, priceProviderModel } from '@renderer/entities/price';
 

src/renderer/shared/ui/Icon/data/arrow.tsx

@@ -6,6 +6,7 @@ import ArrowLeftCutoutImg, { ReactComponent as ArrowLeftCutoutSvg } from '@image
 import SendArrowImg, { ReactComponent as SendArrowSvg } from '@images/arrows/send-arrow.svg';
 import ReceiveArrowImg, { ReactComponent as ReceiveArrowSvg } from '@images/arrows/receive-arrow.svg';
 import CurveArrowImg, { ReactComponent as CurveArrowSvg } from '@images/arrows/arrow-curve-left-right.svg';
+import SwapArrowImg, { ReactComponent as SwapArrowSvg } from '@images/arrows/swap-arrow.svg';
 import CrossChainImg, { ReactComponent as CrossChainSvg } from '@images/arrows/cross-chain-arrow.svg';
 
 const ArrowImages = {
@@ -17,6 +18,7 @@ const ArrowImages = {
   sendArrow: { svg: SendArrowSvg, img: SendArrowImg },
   receiveArrow: { svg: ReceiveArrowSvg, img: ReceiveArrowImg },
   curveArrow: { svg: CurveArrowSvg, img: CurveArrowImg },
+  swapArrow: { svg: SwapArrowSvg, img: SwapArrowImg },
   crossChain: { svg: CrossChainSvg, img: CrossChainImg },
 } as const;
 

src/renderer/shared/ui/Inputs/AmountInput/AmountInput.tsx

@@ -1,11 +1,14 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useUnit } from 'effector-react';
 
+import { AssetBalance, AssetIcon, Asset } from '@renderer/entities/asset';
+import { cleanAmount, cnTw, formatGroups, validatePrecision, validateSymbols } from '@renderer/shared/lib/utils';
 import { useI18n } from '@renderer/app/providers';
 import { FootnoteText, TitleText } from '../../Typography';
-// FIXME components in shared shouldn't use components from entity so we need to move it to entity
-import { AssetBalance, AssetIcon, Asset } from '@renderer/entities/asset';
 import Input from '../Input/Input';
-import { cleanAmount, formatGroups, validatePrecision, validateSymbols } from '@renderer/shared/lib/utils';
+import { IconButton } from '@renderer/shared/ui';
+import { useToggle } from '@renderer/shared/lib/hooks';
+import { currencyModel, useCurrencyRate } from '@renderer/entities/price';
 
 type Props = {
   name?: string;
@@ -16,10 +19,11 @@ type Props = {
   balancePlaceholder?: string;
   balance?: string | string[];
   invalid?: boolean;
+  showCurrency?: boolean;
   onChange?: (value: string) => void;
 };
 
-const AmountInput = ({
+export const AmountInput = ({
   name,
   value,
   asset,
@@ -28,35 +32,52 @@ const AmountInput = ({
   placeholder,
   disabled,
   invalid,
+  showCurrency = true,
   onChange,
 }: Props) => {
   const { t } = useI18n();
+  const rate = useCurrencyRate(asset.priceId, showCurrency);
+  const activeCurrency = useUnit(currencyModel.$activeCurrency);
+  const [currencyMode, toggleCurrencyMode] = useToggle(false);
+  const [internalValue, setInternalValue] = useState(value);
 
   const handleChange = (amount: string) => {
     const cleanedAmount = cleanAmount(amount);
+    setInternalValue(cleanedAmount);
 
-    if (validateSymbols(cleanedAmount) && validatePrecision(cleanedAmount, asset.precision)) {
-      onChange?.(cleanedAmount);
+    if (validateSymbols(cleanedAmount) && (currencyMode || validatePrecision(cleanedAmount, asset.precision))) {
+      onChange?.(currencyMode && rate ? (Number(cleanedAmount) * (1 / rate)).toString() : cleanedAmount);
     } else {
       onChange?.(value);
     }
   };
 
+  useEffect(() => {
+    if (currencyMode && rate) {
+      setInternalValue((Number(value) * rate).toString());
+    }
+  }, [currencyMode]);
+
   const getBalance = useCallback(() => {
     if (!balance) return;
 
     if (Array.isArray(balance)) {
       return (
         <span className="flex gap-x-1">
-          <AssetBalance className="text-text-primary text-footnote" value={balance[0]} asset={asset} />
+          <AssetBalance className="text-text-tertiary text-footnote" value={balance[0]} asset={asset} />
           <span>-</span>
-          <AssetBalance className="text-text-primary text-footnote" value={balance[1]} asset={asset} />
+          <AssetBalance className="text-text-tertiary text-footnote" value={balance[1]} asset={asset} />
         </span>
       );
     }
 
     return (
-      <AssetBalance className="inline text-text-primary text-footnote" value={balance} asset={asset} showIcon={false} />
+      <AssetBalance
+        className="inline text-text-tertiary text-footnote"
+        value={balance}
+        asset={asset}
+        showIcon={false}
+      />
     );
   }, [balance]);
 
@@ -72,26 +93,51 @@ const AmountInput = ({
     </div>
   );
 
+  const currencyIcon = showCurrency && activeCurrency && (
+    <div className="flex items-center gap-x-1 min-w-fit">
+      <div className="relative rounded-full bg-token-background border border-token-border p-[1px] w-8 h-8">
+        <TitleText align="center" className="text-white">
+          {activeCurrency.symbol || activeCurrency.code}
+        </TitleText>
+      </div>
+      <TitleText>{activeCurrency.code}</TitleText>
+    </div>
+  );
+
   const prefixElement = (
     <div className="flex items-center gap-x-1 min-w-fit">
       <AssetIcon src={asset.icon} name={asset.name} size={28} className="flex" />
       <TitleText>{asset.symbol}</TitleText>
     </div>
   );
 
+  const suffixElement = showCurrency && rate && (
+    <div className="flex items-center gap-x-2 absolute right-3 bottom-3">
+      <IconButton
+        name="swapArrow"
+        alt={t(currencyMode ? 'transfer.swapToCryptoModeAlt' : 'transfer.swapToCurrencyModeAlt')}
+        size={16}
+        onClick={toggleCurrencyMode}
+      />
+      <FootnoteText className="uppercase text-text-tertiary">
+        {currencyMode ? `${value} ${asset.symbol}` : `${activeCurrency?.symbol} ${Number(value) * rate}`}
+      </FootnoteText>
+    </div>
+  );
+
   return (
     <Input
       name={name}
-      className="text-right text-title font-manrope"
+      className={cnTw('text-right text-title font-manrope', activeCurrency && rate && 'mb-7')}
+      wrapperClass="py-3 items-start"
       label={label}
-      value={formatGroups(value)}
+      value={formatGroups(currencyMode ? internalValue : value)}
       placeholder={t('transfer.amountPlaceholder')}
       invalid={invalid}
-      prefixElement={prefixElement}
+      prefixElement={currencyMode ? currencyIcon : prefixElement}
+      suffixElement={suffixElement}
       disabled={disabled}
       onChange={handleChange}
     />
   );
 };
-
-export default AmountInput;

src/renderer/shared/ui/index.ts

@@ -1,6 +1,6 @@
 import Input from './Inputs/Input/Input';
 import Plate from './Plate/Plate';
-import AmountInput from './Inputs/AmountInput/AmountInput';
+import { AmountInput } from './Inputs/AmountInput/AmountInput';
 import PasswordInput from './Inputs/PasswordInput/PasswordInput';
 import InputHint from './InputHint/InputHint';
 import Button from './Buttons/Button/Button';

src/shared/locale/en.json

@@ -815,6 +815,8 @@
     "signatoryLabel": "Signatory",
     "startSigningButton": "Sign with Polkadot Vault",
     "successMessage": "Operation Success",
+    "swapToCryptoModeAlt": "swap input to crypto",
+    "swapToCurrencyModeAlt": "swap input to currency",
     "title": "Transfer { asset } on",
     "xcmTitle": "Transfer { asset } from"
   },

src/shared/locale/ru.json

@@ -815,6 +815,8 @@
     "signatoryLabel": "Подписант",
     "startSigningButton": "Подписать в Polkadot Vault",
     "successMessage": "Транзакция отправлена!",
+    "swapToCryptoModeAlt": "swap input to crypto",
+    "swapToCurrencyModeAlt": "swap input to currency",
     "title": "Перевод { asset } в сети",
     "xcmTitle": "Transfer { asset } from"
   },