import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { isEthAddress } from "@equilab/utils/lib/validate/eth";
import React from "react";
import { EthereumProvider, useEthereum } from "../../contexts/ethereum";
import Button from "../button";
import { EthConnect } from "../eth/connect";
import { Section } from "../grid";
import Input from "../input";
import Space from "../space";
import Text from "../text";
import { DevParams } from "./dev";
import { DepositERC20 } from "./eth";
import { useWrappedETH } from "./eth/hooks";
import { useDevParams } from "./hooks";
const meta = {
    title: "Composed/Cross Chain",
};
export default meta;
const InnerERC20Deposit = () => {
    const props = useDevParams();
    return (_jsxs(_Fragment, { children: [_jsx(DevParams, { ...props }), _jsx(Section, { children: _jsx(DepositERC20, { chainId: "97", amount: props.amount, address: props.polkadotAddress, bridgeAddress: props.bridgeAddress, tokenAddress: props.tokenAddress, dest: props.dest, resourceId: props.resourceId, spender: props.spender, onError: console.warn, onSuccess: console.info, token: "Eth" }) })] }));
};
const InnerWETH = () => {
    const { address, chainId } = useEthereum();
    const [tokenAddress, setTokenAddress] = React.useState("0xA669694B0cD3034b529eA3E81698aAc96B4D33d8");
    const tokenAddressError = React.useMemo(() => !isEthAddress(tokenAddress) && _jsx("div", { children: "Incorrect Address" }), [tokenAddress]);
    const { ethBalance, balance, symbol, deposit, withdraw } = useWrappedETH(tokenAddress);
    const [depositAmount, setDepositAmount] = React.useState("");
    const depositAmountError = React.useMemo(() => ethBalance?.lt(depositAmount || 0) && _jsx("div", { children: "Low balance" }), [depositAmount, ethBalance]);
    const [withdrawAmount, setWithdrawAmount] = React.useState("");
    const withdrawAmountError = React.useMemo(() => balance?.lt(withdrawAmount || 0) && _jsx("div", { children: "Low balance" }), [withdrawAmount, balance]);
    return (_jsx(Section, { children: !address ? (_jsx(EthConnect, {})) : (_jsxs(_Fragment, { children: [_jsxs(Text.F2, { children: ["Address: ", address] }), _jsxs(Text.F2, { children: ["ChainId: ", chainId] }), _jsx(Space, { height: 16 }), _jsx(Input, { width: "460px", error: tokenAddressError, title: "Token address", onChange: setTokenAddress, value: tokenAddress }), ethBalance && (_jsxs(Text.F2, { children: ["ETH Balance: ", ethBalance.toString(10)] })), balance && symbol && (_jsxs(Text.F2, { children: [symbol, " Balance: ", balance.toString(10)] })), _jsx(Space, { height: 16 }), _jsx(Input, { error: depositAmountError, width: "200px", title: "Deposit amount", onChange: setDepositAmount, value: depositAmount }), _jsx(Space, { height: 16 }), _jsx(Button, { disabled: !ethBalance?.gte(depositAmount), size: "xs", onClick: () => deposit(depositAmount), children: "Deposit" }), _jsx(Space, { height: 16 }), _jsx(Input, { error: withdrawAmountError, width: "200px", title: "Withdraw amount", onChange: setWithdrawAmount, value: withdrawAmount }), _jsx(Space, { height: 16 }), _jsx(Button, { disabled: !balance?.gte(withdrawAmount), size: "xs", onClick: () => withdraw(withdrawAmount), children: "Withdraw" })] })) }));
};
export const ERC20Deposit = () => (_jsx(EthereumProvider, { children: _jsx(InnerERC20Deposit, {}) }));
export const WrapETH = () => (_jsx(EthereumProvider, { children: _jsx(InnerWETH, {}) }));
//# sourceMappingURL=index.stories.js.map