85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
import "./Stake.scss";
|
|
|
|
import { Box, Typography } from "@mui/material";
|
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
import { memo, useState, useEffect } from "react";
|
|
import { useChainId } from "wagmi";
|
|
import { useSearchParams } from "react-router-dom";
|
|
|
|
import { StakeArea } from "./components/StakeArea";
|
|
|
|
import GhostStyledIcon from "../../components/Icon/GhostIcon";
|
|
import Modal from "../../components/Modal/Modal";
|
|
import Paper from "../../components/Paper/Paper";
|
|
import TokenStack from "../../components/TokenStack/TokenStack";
|
|
import { useTokenSymbol } from "../../hooks/tokens";
|
|
|
|
const Stake = ({ chainId, chainSymbol, address, isOpened, closeModal, connect }) => {
|
|
const [action, setAction] = useState("STAKE");
|
|
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
|
|
|
|
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
|
|
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
|
|
|
|
const [upperToken, setUpperToken] = useState(ftsoSymbol);
|
|
const [bottomToken, setBottomToken] = useState(ghstSymbol);
|
|
|
|
const setSettingsModalOpenInner = (value) => {
|
|
setSettingsModalOpen(value);
|
|
}
|
|
|
|
useEffect(() => {
|
|
switch (true) {
|
|
case (upperToken === ftsoSymbol && bottomToken === ghstSymbol):
|
|
setAction("Stake")
|
|
break;
|
|
case (upperToken === ghstSymbol && bottomToken === ftsoSymbol):
|
|
setAction("Unstake")
|
|
break;
|
|
default:
|
|
setAction("Stake")
|
|
}
|
|
}, [ftsoSymbol, ghstSymbol, upperToken, bottomToken])
|
|
|
|
return (
|
|
<Modal
|
|
headerContent={
|
|
<Box display="flex" justifyContent="center" alignItems="center" gap="15px">
|
|
<Typography variant="h4">{action}</Typography>
|
|
<TokenStack tokens={[upperToken, bottomToken, chainSymbol]} />
|
|
</Box>
|
|
}
|
|
topRight={
|
|
<GhostStyledIcon
|
|
viewBox="0 0 23 23"
|
|
component={SettingsIcon}
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => setSettingsModalOpenInner(true)}
|
|
/>
|
|
}
|
|
open={isOpened}
|
|
onClose={closeModal}
|
|
maxWidth="460px"
|
|
minHeight="200px"
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="center" flexDirection="column">
|
|
<StakeArea
|
|
chainSymbol={chainSymbol}
|
|
settingsModalOpen={settingsModalOpen}
|
|
closeSettingModal={() => setSettingsModalOpenInner(false)}
|
|
upperToken={upperToken}
|
|
setUpperToken={setUpperToken}
|
|
bottomToken={bottomToken}
|
|
setBottomToken={setBottomToken}
|
|
action={action}
|
|
chainId={chainId}
|
|
address={address}
|
|
connect={connect}
|
|
/>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(Stake);
|