67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
'use client';
|
||
import { Dispatch, FC, RefObject, SetStateAction } from 'react';
|
||
import styles from '@/components/ui/modal-exchange/ModalExchange.module.css';
|
||
import ModalExchangeContent from '@/components/ui/modal-exchange/ModalExchangeContent';
|
||
import { useModalStore } from '@/store/modal.state';
|
||
|
||
interface IModalExchange {
|
||
isOpen: boolean;
|
||
isClosing: boolean;
|
||
amount: number;
|
||
balance: number | undefined;
|
||
nickname: string;
|
||
rangeRef: RefObject<HTMLInputElement>;
|
||
setNickname: Dispatch<SetStateAction<string>>;
|
||
setAmount: Dispatch<SetStateAction<number>>;
|
||
onClose: () => void;
|
||
handleCreateExchange: (amount: number, total: number, nickname: string) => Promise<void>;
|
||
}
|
||
|
||
const ModalExchange: FC<IModalExchange> = ({
|
||
isOpen,
|
||
isClosing,
|
||
amount,
|
||
balance,
|
||
nickname,
|
||
rangeRef,
|
||
onClose,
|
||
setNickname,
|
||
setAmount,
|
||
handleCreateExchange,
|
||
}) => {
|
||
const { priceItem, image, isDecimal } = useModalStore();
|
||
return (
|
||
<div
|
||
className={`${styles.modal} ${isOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
|
||
>
|
||
<div
|
||
className={`${styles.modalContent} ${isOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
|
||
>
|
||
<div className={styles.closeButton} onClick={onClose} />
|
||
<div className={styles.modalTitle}>
|
||
<span>Обмен</span>
|
||
</div>
|
||
<ModalExchangeContent
|
||
isDecimal={isDecimal}
|
||
balance={balance}
|
||
nickname={nickname}
|
||
amount={amount}
|
||
image={image}
|
||
priceItem={priceItem}
|
||
rangeRef={rangeRef}
|
||
setNickname={setNickname}
|
||
setAmount={setAmount}
|
||
/>
|
||
<button
|
||
className={styles.submitButton}
|
||
onClick={() => handleCreateExchange(amount, amount / +priceItem, nickname)}
|
||
>
|
||
Вывод
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ModalExchange;
|