104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
import BigNumber from "bignumber.js";
|
|
import type { ChangeEvent, FC } from "react";
|
|
import React, { useState } from "react";
|
|
import cx from "classnames";
|
|
import { useRelayEnvironment } from "react-relay";
|
|
|
|
import { Modal } from "../../../../components";
|
|
import { commitCreateStakeRemoveOrderMutation } from "./commitCreateStakeRemoveOrder";
|
|
|
|
const inputBaseStyles =
|
|
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
|
|
|
|
type RemoveStakeModal = {
|
|
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
isOpen: boolean;
|
|
stakedCake: string;
|
|
poolName?: string;
|
|
};
|
|
|
|
export const RemoveStakeModal: FC<RemoveStakeModal> = ({
|
|
setIsOpen,
|
|
isOpen,
|
|
stakedCake,
|
|
poolName = "",
|
|
}) => {
|
|
const enviroment = useRelayEnvironment();
|
|
const [amountInput, setAmountInput] = useState<string>("0");
|
|
const avaliableCake = BigNumber.sum(stakedCake);
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
commitCreateStakeRemoveOrderMutation(enviroment, {
|
|
poolName,
|
|
amount: amountInput,
|
|
});
|
|
};
|
|
|
|
const handleInvestInput = ({
|
|
currentTarget: { value },
|
|
}: ChangeEvent<HTMLInputElement>) => {
|
|
const newInvestAmount = new BigNumber(value);
|
|
|
|
if (
|
|
newInvestAmount.isLessThanOrEqualTo(avaliableCake) &&
|
|
newInvestAmount.isGreaterThanOrEqualTo(0)
|
|
) {
|
|
setAmountInput(value);
|
|
}
|
|
};
|
|
|
|
const handleMaxButton = () => {
|
|
setAmountInput(stakedCake);
|
|
};
|
|
|
|
const amountToUnstake = new BigNumber(amountInput);
|
|
|
|
const stakeAvaliable =
|
|
amountToUnstake.isGreaterThan(0) &&
|
|
amountToUnstake.isLessThanOrEqualTo(avaliableCake);
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
setIsOpen={handleClose}
|
|
title={`Remover investido em ${poolName}`}
|
|
>
|
|
<span className="mb-2">CAKE disponível: {stakedCake}</span>
|
|
<form onSubmit={onSubmit} className="bg-white py-2">
|
|
<div className="flex flex-row">
|
|
<input
|
|
className={cx(inputBaseStyles)}
|
|
type="number"
|
|
value={amountInput}
|
|
onChange={handleInvestInput}
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={amountInput === stakedCake}
|
|
className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
|
|
onClick={handleMaxButton}
|
|
>
|
|
Max
|
|
</button>
|
|
</div>
|
|
{avaliableCake.isEqualTo(0) && (
|
|
<span className="text-red-500 mb-1">Você não possuí saldo.</span>
|
|
)}
|
|
<button
|
|
className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
|
|
disabled={!stakeAvaliable}
|
|
type="submit"
|
|
>
|
|
Remover Stake
|
|
</button>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|