cyb/src/pages/teleport/swap/components/TokenSetterSwap.tsx

import React, { useMemo } from 'react';
import { AvailableAmount, DenomArr } from 'src/components';
import Select, { SelectOption } from 'src/components/Select/index';
import { CHAIN_ID } from 'src/constants/config';
import { Nullable } from 'src/types';
import { ObjKeyValue } from 'src/types/data';
import { Col, GridContainer } from '../../components/containers/Containers';
import InputNumberDecimalScale from '../../components/Inputs/InputNumberDecimalScale/InputNumberDecimalScale';
import styles from './TokenSetterSwap.module.scss';

export enum TokenSetterId {
  tokenAAmount = 'tokenAAmount',
  tokenBAmount = 'tokenBAmount',
}

type Props = {
  id: TokenSetterId;
  listTokens: Nullable<ObjKeyValue>;
  valueSelect: string;
  amountToken: number;
  selected: string;
  tokenAmountValue: string;
  validInputAmount?: boolean;
  autoFocus?: boolean;
  validAmountMessage?: boolean;
  validAmountMessageText?: string;
  warningAmount?: boolean;
  warningAmountText?: string;
  onChangeSelect: React.Dispatch<React.SetStateAction<string>>;
  amountChangeHandler: (values: string, id: TokenSetterId) => void;
  accountBalances?: ObjKeyValue | null;
};

function TokenSetterSwap({
  amountChangeHandler,
  tokenAmountValue,
  onChangeSelect,
  valueSelect,
  selected,
  id,
  listTokens,
  amountToken,
  validInputAmount,
  autoFocus,
  validAmountMessage,
  validAmountMessageText,
  warningAmount,
  warningAmountText,
  accountBalances,
}: Props) {
  const isFromToken = id === TokenSetterId.tokenAAmount;

  const reduceOptions = useMemo(() => {
    if (!listTokens) return [];

    return Object.keys(listTokens)
      .filter((key) => {
        if (selected === key) return false;
        // "from" tokens — only show tokens with balance > 0
        if (isFromToken && accountBalances) {
          return accountBalances[key] > 0;
        }
        return true;
      })
      .sort((a, b) => {
        if (!accountBalances) return 0;
        return (accountBalances[b] || 0) - (accountBalances[a] || 0);
      })
      .map((key) => ({
        value: key,
        text: <DenomArr denomValue={key} onlyText tooltipStatusText={false} />,
        img: <DenomArr denomValue={key} onlyImg tooltipStatusImg={false} />,
      }));
  }, [listTokens, selected, isFromToken, accountBalances]);

  const textAction = useMemo(() => {
    if (id === TokenSetterId.tokenBAmount) {
      return 'receive';
    }
    return 'swap';
  }, [id]);

  return (
    <GridContainer>
      <Col>
        <InputNumberDecimalScale
          id={id}
          value={tokenAmountValue}
          onValueChange={(value, event) => { if (event) amountChangeHandler(value, id); }}
          title={`choose amount to ${textAction}`}
          validAmount={validInputAmount}
          validAmountMessage={validAmountMessage}
          validAmountMessageText={validAmountMessageText}
          warningAmount={warningAmount}
          warningAmountText={warningAmountText}
          tokenSelect={valueSelect}
          autoFocus={autoFocus}
        />
        <AvailableAmount amountToken={amountToken} />
      </Col>
      <Col>
        <Select
          valueSelect={valueSelect}
          currentValue={valueSelect}
          onChangeSelect={(item: string) => onChangeSelect(item)}
          width="100%"
          options={reduceOptions}
          title={`choose token to ${textAction}`}
        />
        {id === TokenSetterId.tokenAAmount && (
          <Select
            valueSelect="warp"
            currentValue="warp"
            disabled
            width="100%"
            options={[
              {
                value: 'warp',
                text: <span className={styles.defaultOptions}>warp</span>,
                img: (
                  <DenomArr denomValue={CHAIN_ID} onlyImg type="network" tooltipStatusImg={false} />
                ),
              },
            ]}
            title="choose dex"
          />
        )}
      </Col>
    </GridContainer>
  );
}

export default TokenSetterSwap;