const SwapButton = styled.button` width: 100%; height: 60px; border-radius: 10px; background-color: #004bfc; color: #fff; font-size: 18px; line-height: 22px; border: none; transition: 0.5s; cursor: pointer; :hover { opacity: 0.8; } &:disabled { opacity: 0.5; pointer-events: none; } `; const account = Ethers.send("eth_requestAccounts", [])[0]; if (props.noPair) { return <SwapButton disabled>Insufficient Liquidity</SwapButton>; } if (props.loading) { return <SwapButton disabled>Getting Trade Info...</SwapButton>; } const { inputCurrency, outputCurrency, inputCurrencyAmount, outputCurrencyAmount, maxInputBalance, onSuccess, } = props; if (Big(inputCurrencyAmount || 0).eq(0)) { return <SwapButton disabled>Enter An Amount</SwapButton>; } if (Big(inputCurrencyAmount || 0).gt(maxInputBalance)) { return ( <SwapButton disabled> Insufficient {inputCurrency?.symbol} Balance </SwapButton> ); } State.init({ isApproved: false, approving: false, swapping: false, wrapping: false, }); const Erc20Abi = Storage.privateGet("erc20Abi"); const Config = Storage.privateGet("config"); const getAllowance = () => { if (!Erc20Abi || !Config) return; const TokenContract = new ethers.Contract( inputCurrency.address, Erc20Abi, Ethers.provider().getSigner() ); TokenContract.allowance(account, Config.ROUTER_ADDRESS).then( (allowanceRaw) => { State.update({ isApproved: !Big(Number(allowanceRaw._hex)).eq(0), }); } ); }; if (inputCurrency.address !== "native") { getAllowance(); } else { State.update({ isApproved: true }); } const wrapType = inputCurrency.address === "native" && outputCurrency.symbol === "WETH" ? 1 : inputCurrency.symbol === "WETH" && outputCurrency.address === "native" ? 2 : 0; const handleApprove = () => { State.update({ approving: true, }); TokenContract.approve( Config.ROUTER_ADDRESS, ethers.utils.parseUnits(inputCurrencyAmount, inputCurrency.decimals) ) .then((tx) => { tx.wait().then((res) => { const { status, transactionHash } = res; State.update({ isApproved: status === 1, approving: false, }); }); }) .catch(() => { State.update({ approving: false, }); }); }; if (!state.isApproved && wrapType === 0) { return ( <SwapButton onClick={handleApprove} disabled={state.approving}> {state.approving ? " Approving..." : " Approve"} </SwapButton> ); } function add_action(param_body) { asyncFetch("https://bos-api.delink.one/add-action-data", { method: "post", headers: { "Content-Type": "application/json", }, body: JSON.stringify(param_body), }); } function successCallback(res, callback) { const { status, transactionHash } = res; callback?.(); const uuid = Storage.get( "zkevm-warm-up-uuid", "bluebiu.near/widget/ZKEVMWarmUp.generage-uuid" ); add_action({ action_title: `Swap ${inputCurrencyAmount} ${inputCurrency.symbol} on ${Config.dexName}`, action_type: "Swap", action_tokens: JSON.stringify([ `${inputCurrency.symbol}`, `${outputCurrency.symbol}`, ]), action_amount: inputCurrencyAmount, account_id: account, account_info: uuid, template: Config.dexName, action_status: status === 1 ? "Success" : "Failed", tx_id: transactionHash, }); if (status === 1) { onSuccess?.(); } } const handleWrap = (type, onSuccess, onError) => { const WethContract = new ethers.Contract( Config.WETH_ADDRESS, Erc20Abi, Ethers.provider().getSigner() ); if (type === 1) { WethContract.deposit({ value: ethers.utils.parseEther(inputCurrencyAmount), }) .then((tx) => { tx.wait().then((res) => { onSuccess?.(res); }); }) .catch((err) => { onError?.(); }); } else { WethContract.withdraw(ethers.utils.parseEther(inputCurrencyAmount)) .then((tx) => { tx.wait().then((res) => { onSuccess?.(res); }); }) .catch((err) => { onError?.(); }); } }; if (wrapType) { return ( <SwapButton onClick={() => { State.update({ wrapping: true, }); handleWrap( wrapType, (res) => { successCallback(res, () => { State.update({ wrapping: false }); }); }, () => { State.update({ wrapping: false, }); } ); }} disabled={state.wrapping} > {wrapType === 1 ? state.wrapping ? "Wrapping..." : "Wrap" : state.wrapping ? "Unwrapping..." : "Unwrap"} </SwapButton> ); } const handleSwap = () => { const type = inputCurrency.address === "native" ? 1 : outputCurrency.address === "native" ? 2 : 0; const RouterContract = new ethers.Contract( Config.ROUTER_ADDRESS, Storage.privateGet("routerAbi"), Ethers.provider().getSigner() ); State.update({ swapping: true, }); if (type === 0) { RouterContract.swapExactTokensForTokens( ethers.utils.parseUnits(inputCurrencyAmount, inputCurrency.decimals), "0", [inputCurrency.address, outputCurrency.address], account, Math.ceil(Date.now() / 1000) + 60, { gasLimit: 5000000 } ) .then((res) => { successCallback(res, () => { State.update({ swapping: false }); }); }) .catch((err) => { State.update({ swapping: false, }); }); return; } if (type === 1) { RouterContract.swapExactETHForTokens( "0", [Config.WETH_ADDRESS, outputCurrency.address], account, Math.ceil(Date.now() / 1000) + 60, { gasLimit: 5000000, value: ethers.utils.parseEther(inputCurrencyAmount) } ) .then((res) => { successCallback(res, () => { State.update({ swapping: false }); }); }) .catch((err) => { State.update({ swapping: false, }); }); return; } if (type === 2) { RouterContract.swapExactTokensForETH( ethers.utils.parseUnits(inputCurrencyAmount, inputCurrency.decimals), "0", [inputCurrency.address, Config.WETH_ADDRESS], account, Math.ceil(Date.now() / 1000) + 60, { gasLimit: 5000000 } ) .then((res) => { successCallback(res, () => { State.update({ swapping: false }); }); }) .catch((err) => { console.log(err); State.update({ swapping: false, }); }); } }; return ( <SwapButton onClick={handleSwap} disabled={state.swapping}> {state.swapping ? "Swapping..." : "Swap"} </SwapButton> );