import { FunctionComponent } from "react";
import { ArrowUpDownIcon, QuestionOutlineIcon } from "@chakra-ui/icons";
import { Tooltip } from "@chakra-ui/react";
import { useWallet } from "@solana/wallet-adapter-react";
} from "@solana/wallet-adapter-react-ui";
import { TokenData } from ".";
import TokenSelect from "./TokenSelect";
import { ISplToken } from "../../utils/web3";
import style from "../../styles/swap.module.sass";
interface SwapOperateContainerProps {
toggleTokenList: Function;
switchFromAndTo: (event?: React.MouseEvent<HTMLDivElement>) => void;
sendSwapTransaction: (event?: React.MouseEvent<HTMLButtonElement>) => void;
splTokenData: ISplToken[];
interface SwapDetailProps {
const SwapOperateContainer: FunctionComponent<
SwapOperateContainerProps
let wallet = useWallet();
const SwapBtn = (swapProps: any) => {
!swapProps.props.fromData.tokenInfo?.symbol ||
!swapProps.props.toData.tokenInfo?.symbol
className={`${style.operateBtn} ${style.disabledBtn}`}
swapProps.props.fromData.tokenInfo?.symbol &&
swapProps.props.toData.tokenInfo?.symbol
!swapProps.props.fromData.amount ||
!swapProps.props.toData.amount
className={`${style.operateBtn} ${style.disabledBtn}`}
className={style.operateBtn}
onClick={props.sendSwapTransaction}
<div className={style.selectWallet}>
const SwapDetailPreview: FunctionComponent<SwapDetailProps> = props => {
<div className={style.slippageRow}>
<div className={style.slippageTooltipBlock}>
label={props.tooltipContent}
className={`${style.icon} ${style.icon}`}
const SwapDetailPreviewList = (): JSX.Element => {
tooltipContent="This venue gave the best price for your trade"
value={`${props.fromData.tokenInfo.symbol} > ${props.toData.tokenInfo.symbol}`}
<div className={style.swapCard}>
<div className={style.cardBody}>
toggleTokenList={props.toggleTokenList}
tokenData={props.fromData}
updateAmount={props.updateAmount}
splTokenData={props.splTokenData}
className={`${style.switchIcon} ${style.icon}`}
onClick={props.switchFromAndTo}
<ArrowUpDownIcon w={5} h={5} />
toggleTokenList={props.toggleTokenList}
updateAmount={props.updateAmount}
splTokenData={props.splTokenData}
<div className={style.slippageRow}>
<div className={style.slippageTooltipBlock}>
<div>Slippage Tolerance </div>
label="The maximum difference between your estimated price and execution price."
className={`${style.icon} ${style.icon}`}
<div>{props.slippageValue}%</div>
{props.fromData.amount! > 0 &&
props.fromData.tokenInfo.symbol &&
props.toData.amount! > 0 &&
props.toData.tokenInfo.symbol ? (
<SwapDetailPreviewList />
<SwapBtn props={props} />
export default SwapOperateContainer;