Transaction: AWHuW55...c5QX

{ "data": { "owa-is-bos.near": { "widget": { "Maverick-LP-Addition": { "": "// Get Abi of Maverick router contract\nconst routerAbi = fetch(\n \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/maverick-router.txt\"\n);\n\n// Get Abi of Maverick pool contract\nconst poolAbi = fetch(\n \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/IPoolABI.txt\"\n);\n\n// Validate that the abi are loaded\nif (!routerAbi.ok || !poolAbi.ok) {\n return \"Loading\";\n}\n\nlet pools;\n\n// Const with pool modes\nconst POOLSMODE = [\n {\n id: 0,\n name: \"Mode Static\",\n description:\n \"This mode features static bins that you can use to define your own custom liquidity strategy.\",\n img: \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/ModeStatic.gif\",\n },\n {\n id: 1,\n name: \"Mode Right\",\n description:\n \"This mode functions like a dynamic range order that follows the price of USDC up.\",\n img: \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/ModeRight.gif\",\n },\n {\n id: 2,\n name: \"Mode Left\",\n description:\n \"This mode functions like a dynamic range order that follows the price of cBUSD up.\",\n img: \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/ModeLeft.gif\",\n },\n {\n id: 3,\n name: \"Mode Both\",\n description:\n \"This mode functions like a dynamic range order that follows the pool price right and left, keeping liquidity as active as possible.\",\n img: \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/ModeBoth.gif\",\n },\n];\n\n// Const with distribution modes\nconst DISTRIBUTIONMODE = [\n {\n name: \"Single Bin\",\n description: \"This will distribute your liquidity only in the active bin\",\n },\n {\n name: \"Flat\",\n description:\n \"This will distribute your liquidity evenly across bins, centered around the current pool price.\",\n },\n {\n name: \"Exponential\",\n description:\n \"This distribution starts with a high concentration of liquidity around the current pool price and adds exponentially decreasing amounts across the bins to the left and right.\",\n },\n];\n\n// State initialization\nState.init({\n isZkSync: false,\n routerContract: \"0x39E098A153Ad69834a9Dac32f0FCa92066aD03f4\",\n step: 1,\n poolSelected: undefined,\n poolModeSelected: POOLSMODE[0],\n poolDistributionSelected: DISTRIBUTIONMODE[0],\n needMoreAllowanceTA: false,\n needMoreAllowanceTB: false,\n amountInputTokenA: null,\n inputBalanceTokenA: null,\n amountInputTokenB: null,\n inputBalanceTokenB: null,\n poolList: [],\n pools: [],\n poolOptions: [],\n binsToDistribute: 3,\n need2Tokens: true,\n onlyRight: false,\n});\n\n// Method to fixed float number\nconst floatToFixed = (num, decimals) => {\n decimals ? decimals : 18;\n return ethers.BigNumber.from(\n ethers.utils.parseUnits(num.toString(), decimals)\n );\n};\n\n// Method to get user balances\nconst getUserBalances = () => {\n const accounts = Ethers.send(\"eth_requestAccounts\", []);\n asyncFetch(`https://api.mav.xyz/api/v3/tokenBalances/324/${accounts[0]}`)\n .catch((err) => {\n console.log(err);\n })\n .then((res) => {\n State.update({ userBalances: res.body.tokenBalances });\n });\n};\n\n// Method to set user balances\nconst setUserBalances = () => {\n const tokA =\n state.selectedPoolOptions.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : state.selectedPoolOptions.tokenA.symbol;\n const tokB =\n state.selectedPoolOptions.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : state.selectedPoolOptions.tokenB.symbol;\n const tokABalance = state.userBalances.find((token) => token.symbol == tokA);\n const tokBBalance = state.userBalances.find((token) => token.symbol == tokB);\n tokABalance\n ? State.update({\n tokenABalance: {\n fixed: (\n parseFloat(tokABalance.tokenBalance).toFixed(11) - 0.000001\n ).toString(),\n unfixed: tokABalance.tokenBalanceBN,\n },\n })\n : State.update({ tokABalance: undefined });\n tokBBalance\n ? State.update({\n tokenBBalance: {\n fixed: (\n parseFloat(tokBBalance.tokenBalance).toFixed(11) - 0.000001\n ).toString(),\n unfixed: tokBBalance.tokenBalanceBN,\n },\n })\n : State.update({ tokBBalance: undefined });\n};\n\n// Method to get user NFT\nconst getNFTUser = () => {\n const accounts = Ethers.send(\"eth_requestAccounts\", []);\n asyncFetch(`https://api.mav.xyz/api/v3/user/${accounts[0]}/324`)\n .catch((err) => {\n console.log(err);\n })\n .then((res) => {\n if (res.body.user.positions.length > 0) {\n State.update({ userNFT: res.body.user.positions[0].nftId });\n }\n });\n};\n\n// Method to get pools\nconst getPools = () => {\n asyncFetch(`https://api.mav.xyz/api/v3/pools/324\n `)\n .catch((err) => {\n console.log(err);\n })\n .then((res) => {\n let poolList = [\n ...new Map(res.body.pools.map((item) => [item[\"name\"], item])).values(),\n ];\n pools = res.body.pools;\n State.update({\n poolList: poolList,\n poolSelected: poolList[0],\n selectedPoolOptions: poolList[0],\n });\n getPoolOptions(poolList[0].name, res.body.pools);\n });\n};\n\n// Method to set pool options\nconst getPoolOptions = (selPool, pools) => {\n State.update({\n poolOptions: pools.filter((pool) => pool.name == selPool),\n });\n};\n\n// Format width and fee\nconst getFeeWidthFormat = (n) => {\n const decimalPart = (n % 1).toFixed(20).substring(2);\n const zeroCount = decimalPart.match(/^0*/)[0].length;\n var format = (n * 100).toFixed(zeroCount > 3 ? 3 : 2);\n return format + \"%\";\n};\n\n// Format token balance\nconst formatNumberBalanceToken = (n) => {\n if (n < 0.01) {\n return \"< 0.01\";\n }\n if (n >= 1000000) {\n return \"$\" + (n / 1000000).toFixed(2) + \"m\";\n } else if (n >= 1000) {\n return \"$\" + (n / 1000).toFixed(2) + \"k\";\n } else {\n return \"$\" + n.toFixed(2);\n }\n};\n\n// Format APR\nconst formatAPR = (n) => {\n if (n == 0) {\n return null;\n }\n const roundedNumber = (n * 100).toFixed(3);\n const [integerPart, decimalPart] = roundedNumber.split(\".\");\n const formattedInteger = integerPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n const formattedNumber = `${formattedInteger}.${decimalPart}%`;\n return formattedNumber;\n};\n\n// Method to show pool options modal\nconst showPoolOptionsModal = () => {\n State.update({ showSelectPoolOptionModal: true });\n};\n\n// Method to close pool options modal\nconst closeModal = () => {\n State.update({ showSelectPoolOptionModal: false });\n};\n\n// Method to set pool options modal\nconst setPoolOption = (allPoolOptions, poolOptionSelected) => {\n State.update({\n selectedPoolOptions: poolOptionSelected,\n showSelectPoolOptionModal: false,\n });\n};\n\n// Method to get account allowance\nconst getAccountAllowance = (data) => {\n let token = data.token;\n asyncFetch(\n \"https://gist.githubusercontent.com/veox/8800debbf56e24718f9f483e1e40c35c/raw/f853187315486225002ba56e5283c1dba0556e6f/erc20.abi.json\"\n ).then((res) => {\n const contract = token.address;\n if (token.symbol == \"ETH\") {\n contract = \"0x5AEa5775959fBC2557Cc8789bC1bf90A239D9a91\";\n }\n const approveContract = new ethers.Contract(\n contract,\n res.body,\n Ethers.provider().getSigner()\n );\n approveContract\n .allowance(state.sender, state.routerContract)\n .then((res) => {\n if (data.mode == \"TA\") {\n State.update({ tokenAAllowance: parseInt(res.toString()) });\n } else {\n State.update({ tokenBAllowance: parseInt(res.toString()) });\n }\n });\n });\n};\n\n// Method to add liquidity\nconst addLiquidity = () => {\n const router = new ethers.Contract(\n state.routerContract,\n routerAbi.body,\n Ethers.provider().getSigner()\n );\n\n const pool = new ethers.Contract(\n state.selectedPoolOptions.id,\n poolAbi.body,\n Ethers.provider().getSigner()\n );\n\n let bins = state.selectedPoolOptions.bins;\n\n let amountInA, amountInB;\n let inputA = state.amountInputTokenA;\n let inputB = state.amountInputTokenB;\n\n if (state.poolModeSelected.id == 0) {\n if (state.poolDistributionSelected.name == \"Single Bin\") {\n amountInA = ethers.utils.parseUnits(\n inputA,\n state.selectedPoolOptions.tokenA.decimals\n );\n amountInB = ethers.utils.parseUnits(\n inputB,\n state.selectedPoolOptions.tokenB.decimals\n );\n } else {\n amountInA = ethers.utils.parseUnits(\n inputA,\n state.selectedPoolOptions.tokenA.decimals\n );\n amountInB = ethers.utils.parseUnits(\n inputB,\n state.selectedPoolOptions.tokenB.decimals\n );\n }\n } else if (state.poolModeSelected.id == 3) {\n amountInA = ethers.utils.parseUnits(\n inputA,\n state.selectedPoolOptions.tokenA.decimals\n );\n amountInB = ethers.utils.parseUnits(\n inputB,\n state.selectedPoolOptions.tokenB.decimals\n );\n } else if (state.poolModeSelected.id == 1) {\n amountInA = ethers.utils.parseUnits(\n inputA,\n state.selectedPoolOptions.tokenA.decimals\n );\n amountInB = ethers.utils.parseUnits(\n \"0\",\n state.selectedPoolOptions.tokenB.decimals\n );\n } else if (state.poolModeSelected.id == 2) {\n amountInA = ethers.utils.parseUnits(\n \"0\",\n state.selectedPoolOptions.tokenA.decimals\n );\n amountInB = ethers.utils.parseUnits(\n inputB,\n state.selectedPoolOptions.tokenB.decimals\n );\n }\n\n const overrides = {\n value: ethers.utils.parseUnits(\"0\", 18),\n gasLimit: 3000000,\n };\n\n pool.getState().then((res) => {\n let lowerTick = res[0];\n let position =\n state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3\n ? lowerTick\n : state.poolModeSelected.id == 1\n ? lowerTick - 1\n : lowerTick + 1;\n pool.binPositions(res[0], state.poolModeSelected.id).then((res) => {\n let liquidityParams = [];\n if (\n state.poolModeSelected.id == 1 ||\n state.poolModeSelected.id == 2 ||\n state.poolModeSelected.id == 3\n ) {\n liquidityParams.push({\n kind: state.poolModeSelected.id,\n pos: position,\n isDelta: false,\n deltaA: amountInA,\n deltaB: amountInB,\n });\n } else {\n if (state.poolDistributionSelected.name == \"Single Bin\") {\n liquidityParams.push({\n kind: state.poolModeSelected.id,\n pos: position,\n isDelta: false,\n deltaA: amountInA,\n deltaB: amountInB,\n });\n }\n if (state.poolDistributionSelected.name == \"Flat\") {\n if (state.onlyRight) {\n const leftAmount = (\n parseFloat(state.amountInputTokenA) /\n Math.floor(state.binsToDistribute / 2)\n ).toString();\n\n const rightAmount = (\n parseFloat(state.amountInputTokenB) /\n Math.ceil(state.binsToDistribute / 2)\n ).toString();\n\n const amountInAFormated = ethers.utils.parseUnits(\n leftAmount,\n state.selectedPoolOptions.tokenA.decimals\n );\n const amountInBFormated = ethers.utils.parseUnits(\n rightAmount,\n state.selectedPoolOptions.tokenB.decimals\n );\n\n for (let i = 0; i < state.binsToDistribute; i++) {\n const pos = position + i - Math.floor(state.binsToDistribute / 2);\n\n let newDeltaA = pos < position ? amountInAFormated : 0;\n let newDeltaB = pos >= position ? amountInBFormated : 0;\n\n const param = {\n kind: state.poolModeSelected.id,\n pos: pos,\n isDelta: false,\n deltaA: newDeltaA,\n deltaB: newDeltaB,\n };\n liquidityParams.push(param);\n }\n } else {\n const leftAmount = (\n (parseFloat(state.amountInputTokenA) - 0.001) /\n Math.ceil(state.binsToDistribute / 2)\n ).toString();\n\n const rightAmount = (\n (parseFloat(state.amountInputTokenB) - 0.001) /\n Math.ceil(state.binsToDistribute / 2)\n ).toString();\n\n const amountInAFormated = ethers.utils.parseUnits(\n leftAmount,\n state.selectedPoolOptions.tokenA.decimals\n );\n const amountInBFormated = ethers.utils.parseUnits(\n rightAmount,\n state.selectedPoolOptions.tokenB.decimals\n );\n\n for (let i = 0; i < state.binsToDistribute; i++) {\n const pos = position + i - Math.floor(state.binsToDistribute / 2);\n\n let newDeltaA = pos <= position ? amountInAFormated : 0;\n let newDeltaB = pos >= position ? amountInBFormated : 0;\n\n const param = {\n kind: state.poolModeSelected.id,\n pos: pos,\n isDelta: false,\n deltaA: newDeltaA,\n deltaB: newDeltaB,\n };\n liquidityParams.push(param);\n }\n }\n }\n if (state.poolDistributionSelected.name == \"Exponential\") {\n if (state.onlyRight) {\n const binsL = Math.floor(state.binsToDistribute / 2);\n const binsR = Math.ceil(state.binsToDistribute / 2);\n\n const lambdasL = [0.1];\n const lambdasR = [0.1];\n for (let i = 1; i < binsL; i++) {\n const lambda = 0.1 + i / 2;\n lambdasL.push(lambda);\n }\n for (let i = 1; i < binsR; i++) {\n const lambda = 0.1 + i / 2;\n lambdasR.push(lambda);\n }\n\n const sumExpL = lambdasL.reduce(\n (acc, lambda) => acc + Math.exp(lambda),\n 0\n );\n const sumExpR = lambdasR.reduce(\n (acc, lambda) => acc + Math.exp(lambda),\n 0\n );\n\n let amountExpL = lambdasL\n .map(\n (lambda) =>\n (state.amountInputTokenA / sumExpL) * Math.exp(lambda)\n )\n .reverse();\n amountExpL.unshift(0);\n amountExpL.reverse();\n\n const amountExpR = lambdasR\n .map(\n (lambda) =>\n (state.amountInputTokenB / sumExpR) * Math.exp(lambda)\n )\n .reverse();\n\n for (let i = 0; i < state.binsToDistribute; i++) {\n const pos = position + i - Math.floor(state.binsToDistribute / 2);\n let newDeltaA =\n pos <= position\n ? ethers.utils.parseUnits(\n amountExpL[i].toString(),\n state.selectedPoolOptions.tokenA.decimals\n )\n : 0;\n let newDeltaB =\n pos >= position\n ? ethers.utils.parseUnits(\n amountExpR[\n i - Math.floor(state.binsToDistribute / 2)\n ].toString(),\n state.selectedPoolOptions.tokenB.decimals\n )\n : 0;\n\n const param = {\n kind: state.poolModeSelected.id,\n pos: pos,\n isDelta: false,\n deltaA: newDeltaA,\n deltaB: newDeltaB,\n };\n liquidityParams.push(param);\n }\n } else {\n const binsL = Math.ceil(state.binsToDistribute / 2);\n const binsR = Math.ceil(state.binsToDistribute / 2);\n\n const lambdasL = [0.1];\n const lambdasR = [0.1];\n for (let i = 1; i < binsL; i++) {\n const lambda = 0.1 + i / 2;\n lambdasL.push(lambda);\n }\n for (let i = 1; i < binsR; i++) {\n const lambda = 0.1 + i / 2;\n lambdasR.push(lambda);\n }\n\n const sumExpL = lambdasL.reduce(\n (acc, lambda) => acc + Math.exp(lambda),\n 0\n );\n const sumExpR = lambdasR.reduce(\n (acc, lambda) => acc + Math.exp(lambda),\n 0\n );\n\n let amountExpL = lambdasL\n .map(\n (lambda) =>\n (state.amountInputTokenA / sumExpL) * Math.exp(lambda)\n )\n .reverse();\n amountExpL.reverse();\n\n const amountExpR = lambdasR\n .map(\n (lambda) =>\n (state.amountInputTokenB / sumExpR) * Math.exp(lambda)\n )\n .reverse();\n\n for (let i = 0; i < state.binsToDistribute; i++) {\n const pos = position + i - Math.floor(state.binsToDistribute / 2);\n let newDeltaA =\n pos <= position\n ? ethers.utils.parseUnits(\n amountExpL[i].toString(),\n state.selectedPoolOptions.tokenA.decimals\n )\n : 0;\n let newDeltaB =\n pos >= position\n ? ethers.utils.parseUnits(\n amountExpR[\n i - Math.floor(state.binsToDistribute / 2)\n ].toString(),\n state.selectedPoolOptions.tokenB.decimals\n )\n : 0;\n\n const param = {\n kind: state.poolModeSelected.id,\n pos: pos,\n isDelta: false,\n deltaA: newDeltaA,\n deltaB: newDeltaB,\n };\n liquidityParams.push(param);\n }\n }\n }\n }\n try {\n router\n .addLiquidityToPool(\n state.selectedPoolOptions.id,\n state.userNFT ? state.userNFT : 0,\n liquidityParams,\n 0,\n 0,\n 1e13,\n overrides\n )\n .then((res) => {\n State.update({\n addingLiquidity: true,\n });\n setTimeout(() => {\n State.update({\n step: 1,\n poolSelected: undefined,\n selectedPoolOptions: undefined,\n poolOptions: undefined,\n poolModeSelected: POOLSMODE[0],\n poolDistributionSelected: DISTRIBUTIONMODE[0],\n needMoreAllowanceTA: false,\n needMoreAllowanceTB: false,\n amountInputTokenA: null,\n inputBalanceTokenA: null,\n amountInputTokenB: null,\n inputBalanceTokenB: null,\n binsToDistribute: 3,\n need2Tokens: true,\n addingLiquidity: false,\n onlyRight: false,\n tokenABalance: undefined,\n tokenBBalance: undefined,\n tokenAAllowance: undefined,\n tokenBAllowance: undefined,\n moreTokenAAllowance: undefined,\n moreTokenBAllowance: undefined,\n });\n getUserBalances();\n }, 25000);\n });\n } catch (err) {\n console.log(err);\n }\n });\n });\n};\n\n// Method to set pool\nconst handlePoolSelect = (data) => {\n const pool = state.poolList.find((p) => p.name === data.target.value);\n asyncFetch(`https://api.mav.xyz/api/v3/pools/324`)\n .catch((err) => {\n console.log(err);\n })\n .then((res) => {\n getPoolOptions(data.target.value, res.body.pools);\n });\n State.update({\n poolSelected: pool,\n selectedPoolOptions: pool,\n tokenABalance: undefined,\n tokenBBalance: undefined,\n tokenAAllowance: undefined,\n tokenBAllowance: undefined,\n moreTokenAAllowance: undefined,\n moreTokenBAllowance: undefined,\n });\n};\n\n// Method to set pool options selected\nconst handlePoolOptionsSelect = (data) => {\n const poolOptions = state.poolOptions.find(\n (po) => po.id === data.target.value\n );\n State.update({ selectedPoolOptions: poolOptions });\n};\n\n// Method to set pool mode\nconst handlePoolModeSelect = (data) => {\n const mode = POOLSMODE.find((m) => m.name === data.target.value);\n State.update({ poolModeSelected: mode });\n};\n\n// Method to set pool distribution mode\nconst handlePoolDistributionSelect = (data) => {\n const mode = DISTRIBUTIONMODE.find((m) => m.name === data.target.value);\n State.update({ poolDistributionSelected: mode });\n};\n\n// Method to get network\nconst getNetwork = () => {\n let chainId = 324;\n Ethers.provider()\n .getNetwork()\n .then((res) => {\n if (res.chainId == chainId) {\n State.update({ isZkSync: true });\n } else {\n switchNetwork(324);\n }\n });\n};\n\n// Method to change network\nconst switchNetwork = (chainId) => {\n Ethers.provider().send(\"wallet_switchEthereumChain\", [\n { chainId: `0x${chainId.toString(16)}` },\n ]);\n};\n\nif (state.sender === undefined) {\n const accounts = Ethers.send(\"eth_requestAccounts\", []);\n if (accounts.length) {\n State.update({ sender: accounts[0] });\n getNetwork();\n state.poolList.length == 0 ? getPools() : \"\";\n state.userNFT ? \"\" : getNFTUser();\n state.userBalances ? \"\" : getUserBalances();\n }\n}\n\n// Method to next step\nconst next = () => {\n if (state.step + 1 == 2) {\n if (!(state.tokenABalance || state.tokenBBalance)) {\n setUserBalances();\n }\n } else if (state.step + 1 == 3) {\n if (!(state.tokenAAllowance || state.tokenBAllowance)) {\n getAccountAllowance({\n token: state.selectedPoolOptions.tokenA,\n vAllowance: false,\n mode: \"TA\",\n });\n getAccountAllowance({\n token: state.selectedPoolOptions.tokenB,\n vAllowance: false,\n mode: \"TB\",\n });\n }\n }\n State.update({ step: state.step + 1 });\n};\n\n// Method to back step\nconst back = () => {\n if (state.validation) {\n State.update({ validation: undefined });\n }\n State.update({\n step: state.step - 1,\n amountInputTokenA: null,\n amountInputTokenB: null,\n onlyRight: false,\n });\n};\n\n// Method to format number (M and K)\nconst formatNumber = (n) => {\n if (n >= 1000000) {\n return \"$\" + (n / 1000000).toFixed(2) + \"m\";\n } else if (n >= 1000) {\n return \"$\" + (n / 1000).toFixed(2) + \"k\";\n } else {\n return \"$\" + n.toFixed(2);\n }\n};\n\n// Method to set max of token A\nconst setMaxBalanceTokenA = () => {\n if (state.tokenABalance.fixed > 0) {\n handleInputTokenA(state.tokenABalance.fixed);\n }\n};\n\n// Method to set max of token B\nconst setMaxBalanceTokenB = () => {\n if (state.tokenBBalance.fixed > 0) {\n handleInputTokenB(state.tokenBBalance.fixed);\n }\n};\n\n// Method to validate token allowance\nconst validateAllowance = (input, mode) => {\n let divider, tokenAllowance;\n if (mode == \"TA\") {\n divider =\n state.selectedPoolOptions.tokenA.decimals == 18\n ? 1000000000000000000\n : 1000000;\n tokenAllowance = state.tokenAAllowance / divider;\n input * 1 > tokenAllowance\n ? State.update({ moreTokenAAllowance: true })\n : State.update({ moreTokenAAllowance: false });\n } else {\n divider =\n state.selectedPoolOptions.tokenB.decimals == 18\n ? 1000000000000000000\n : 1000000;\n tokenAllowance = state.tokenBAllowance / divider;\n input * 1 > tokenAllowance\n ? State.update({ moreTokenBAllowance: true })\n : State.update({ moreTokenBAllowance: false });\n }\n};\n\n// Handle to set token A\nconst handleInputTokenA = (input) => {\n if (state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3) {\n const step1TokenAAmount = Big(state.selectedPoolOptions.price);\n const tickSpacing = Big(state.selectedPoolOptions.tickSpacing);\n const ic = Math.floor(\n Math.log(step1TokenAAmount) / (Math.log(1.0001) * tickSpacing)\n );\n const il = Math.pow(1.0001, ic * tickSpacing);\n const iu = Math.pow(1.0001, (ic + 1) * tickSpacing);\n let deltaX = 0;\n let deltaY = 0;\n let deltaL = 1;\n const difPriceIl = Math.abs(Big(step1TokenAAmount - il));\n const difPriceIu = Math.abs(Big(step1TokenAAmount - iu));\n if (difPriceIl < 0.00000000001) {\n const priceFix = step1TokenAAmount.toFixed(11);\n const ilFix = il.toFixed(11);\n const iuFix = iu.toFixed(11);\n const sqrtPrice = Math.sqrt(priceFix);\n const sqrtIl = Math.sqrt(ilFix);\n const sqrtIu = Math.sqrt(iuFix);\n if (priceFix == ilFix && sqrtIl == sqrtPrice) {\n sqrtIl = sqrtIl + 0.0000000000012;\n }\n deltaY = deltaL * (sqrtIl - sqrtPrice);\n deltaX = deltaL * (1 / sqrtPrice - 1 / sqrtIu);\n console.log(deltaX, deltaY);\n } else {\n if (step1TokenAAmount < il) {\n deltaX = deltaL * (1 / Math.sqrt(il) - 1 / Math.sqrt(iu));\n deltaY = 0;\n }\n if (il <= step1TokenAAmount && step1TokenAAmount < iu) {\n deltaY = deltaL * (Math.sqrt(step1TokenAAmount) - Math.sqrt(il));\n deltaX =\n deltaL * (1 / Math.sqrt(step1TokenAAmount) - 1 / Math.sqrt(iu));\n }\n if (step1TokenAAmount >= iu) {\n deltaX = 0;\n deltaY = Math.sqrt(iu) - Math.sqrt(il);\n }\n }\n\n let tokenB = 0;\n if (ic !== 0) {\n tokenB = input * (deltaX / deltaY);\n State.update({\n amountInputTokenB:\n deltaY == 0\n ? 0\n : tokenB.toFixed(\n state.poolSelected.tokenB.decimals == 18\n ? 11\n : state.poolSelected.tokenB.decimals\n ),\n amountInputTokenA: input,\n validation: undefined,\n onlyRight: false,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < parseFloat(input)\n ? true\n : false,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < tokenB ? true : false,\n });\n } else {\n if (state.poolDistributionSelected.name == \"Flat\") {\n const binsL = Math.floor(state.binsToDistribute / 2);\n const binsR = Math.ceil(state.binsToDistribute / 2);\n tokenB = (input / binsL) * binsR;\n State.update({\n amountInputTokenB: tokenB.toFixed(\n state.poolSelected.tokenB.decimals == 18\n ? 11\n : state.poolSelected.tokenB.decimals\n ),\n amountInputTokenA: input,\n validation: undefined,\n onlyRight: true,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < parseFloat(input)\n ? true\n : false,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < tokenB ? true : false,\n });\n }\n if (state.poolDistributionSelected.name == \"Exponential\") {\n const binsL = Math.floor(state.binsToDistribute / 2);\n\n const lambdas = [0.1];\n for (let i = 1; i < binsL; i++) {\n const lambda = 0.1 + i / 2;\n lambdas.push(lambda);\n }\n\n const sumExp = lambdas.reduce(\n (acc, lambda) => acc + Math.exp(lambda),\n 0\n );\n\n const nextLambda =\n lambdas.length > 0 ? lambdas[lambdas.length - 1] + 0.5 : 0.1;\n const nextValue = (input / sumExp) * Math.exp(nextLambda);\n\n let amountExpA = lambdas\n .map((lambda) => (input / sumExp) * Math.exp(lambda))\n .reverse();\n\n amountExpA.reverse().push(nextValue);\n amountExpA.reverse();\n\n let amountExpB = [].concat(amountExpA.reverse());\n tokenB = amountExpB.reduce((a, b) => a + b, 0);\n\n State.update({\n amountInputTokenA: input,\n amountInputTokenB: tokenB.toFixed(\n state.poolSelected.tokenB.decimals == 18\n ? 11\n : state.poolSelected.tokenB.decimals\n ),\n onlyRight: true,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < parseFloat(input)\n ? true\n : false,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < tokenB ? true : false,\n });\n }\n if (state.poolDistributionSelected.name == \"Single Bin\") {\n State.update({\n amountInputTokenA: 0,\n validation: undefined,\n need2Tokens: false,\n });\n }\n }\n } else {\n State.update({\n amountInputTokenA: input,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < parseFloat(input)\n ? true\n : false,\n });\n }\n};\n\n// Handle to set token B\nconst handleInputTokenB = (input) => {\n if (state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3) {\n const step1TokenAAmount = Big(state.selectedPoolOptions.price);\n const tickSpacing = Big(state.selectedPoolOptions.tickSpacing);\n const ic = Math.floor(\n Math.log(step1TokenAAmount) / (Math.log(1.0001) * tickSpacing)\n );\n const il = Math.pow(1.0001, ic * tickSpacing);\n const iu = Math.pow(1.0001, (ic + 1) * tickSpacing);\n let deltaX = 0;\n let deltaY = 0;\n let deltaL = 1;\n const difPriceIl = Math.abs(Big(step1TokenAAmount - il));\n const difPriceIu = Math.abs(Big(step1TokenAAmount - iu));\n if (difPriceIl < 0.00000000001) {\n const priceFix = step1TokenAAmount.toFixed(11);\n const ilFix = il.toFixed(11);\n const iuFix = iu.toFixed(11);\n const sqrtPrice = Math.sqrt(priceFix);\n const sqrtIl = Math.sqrt(ilFix);\n const sqrtIu = Math.sqrt(iuFix);\n if (priceFix == ilFix && sqrtIl == sqrtPrice) {\n sqrtIl = sqrtIl + 0.00012;\n }\n deltaY = deltaL * (sqrtIl - sqrtPrice);\n deltaX = deltaL * (1 / sqrtPrice - 1 / sqrtIu);\n } else {\n if (step1TokenAAmount < il) {\n deltaX = deltaL * (1 / Math.sqrt(il) - 1 / Math.sqrt(iu));\n deltaY = 0;\n }\n if (il <= step1TokenAAmount && step1TokenAAmount < iu) {\n deltaY = deltaL * (Math.sqrt(step1TokenAAmount) - Math.sqrt(il));\n deltaX =\n deltaL * (1 / Math.sqrt(step1TokenAAmount) - 1 / Math.sqrt(iu));\n }\n if (step1TokenAAmount >= iu) {\n deltaX = 0;\n deltaY = Math.sqrt(iu) - Math.sqrt(il);\n }\n }\n\n let tokenA = 0;\n if (ic !== 0) {\n tokenA = (input / deltaX) * deltaY;\n State.update({\n amountInputTokenA:\n deltaY == 0\n ? 0\n : tokenA.toFixed(\n state.poolSelected.tokenA.decimals == 18\n ? 11\n : state.poolSelected.tokenA.decimals\n ),\n amountInputTokenB: input,\n validation: undefined,\n onlyRight: false,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < tokenA ? true : false,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < parseFloat(input)\n ? true\n : false,\n });\n } else {\n if (state.poolDistributionSelected.name == \"Flat\") {\n const binsL = Math.floor(state.binsToDistribute / 2);\n const binsR = Math.ceil(state.binsToDistribute / 2);\n tokenA = (input / binsR) * binsL;\n State.update({\n amountInputTokenB: input,\n amountInputTokenA: tokenA.toFixed(\n state.poolSelected.tokenA.decimals == 18\n ? 11\n : state.poolSelected.tokenA.decimals\n ),\n validation: undefined,\n onlyRight: true,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < tokenA ? true : false,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < parseFloat(input)\n ? true\n : false,\n });\n }\n if (state.poolDistributionSelected.name == \"Exponential\") {\n const binsR = Math.ceil(state.binsToDistribute / 2);\n\n const lambdas = [0.1];\n for (let i = 1; i < binsR; i++) {\n const lambda = 0.1 + i / 2;\n lambdas.push(lambda);\n }\n\n const sumExp = lambdas.reduce(\n (acc, lambda) => acc + Math.exp(lambda),\n 0\n );\n\n const amountExpB = lambdas\n .map((lambda) => (input / sumExp) * Math.exp(lambda))\n .reverse();\n\n let amountExpA = [].concat(amountExpB.reverse());\n amountExpA.pop();\n tokenA = amountExpA.reduce((a, b) => a + b, 0);\n\n State.update({\n amountInputTokenB: input,\n amountInputTokenA: tokenA.toFixed(\n state.poolSelected.tokenA.decimals == 18\n ? 11\n : state.poolSelected.tokenA.decimals\n ),\n onlyRight: true,\n noBalanceA:\n parseFloat(state.tokenABalance.fixed) < tokenA ? true : false,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < parseFloat(input)\n ? true\n : false,\n });\n }\n if (state.poolDistributionSelected.name == \"Single Bin\") {\n State.update({\n amountInputTokenA: 0,\n need2Tokens: false,\n amountInputTokenB: input,\n validation: undefined,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < parseFloat(input)\n ? true\n : false,\n });\n }\n }\n } else {\n State.update({\n amountInputTokenB: input,\n noBalanceB:\n parseFloat(state.tokenBBalance.fixed) < parseFloat(input)\n ? true\n : false,\n });\n }\n};\n\n// Method to validate data\nconst validateConfirm = () => {\n let bins = state.binsToDistribute;\n if (bins % 2 !== 1) {\n bins++;\n State.update({ binsToDistribute: bins });\n }\n\n if (state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3) {\n validateAllowance(state.amountInputTokenA, \"TA\");\n validateAllowance(state.amountInputTokenB, \"TB\");\n State.update({ validation: true });\n } else if (state.poolModeSelected.id == 1) {\n validateAllowance(state.amountInputTokenA, \"TA\");\n State.update({ validation: true });\n } else if (state.poolModeSelected.id == 2) {\n validateAllowance(state.amountInputTokenB, \"TB\");\n State.update({ validation: true });\n }\n};\n\n// Method to approve ERC20 token\nconst approveErc20Token = (mode) => {\n asyncFetch(\n \"https://gist.githubusercontent.com/veox/8800debbf56e24718f9f483e1e40c35c/raw/f853187315486225002ba56e5283c1dba0556e6f/erc20.abi.json\"\n ).then((res) => {\n let value, token;\n\n if (mode == \"TA\") {\n value = floatToFixed(\n state.tokenABalance.fixed,\n state.poolSelected.tokenA.decimals\n );\n token = state.poolSelected.tokenA;\n } else {\n value = floatToFixed(\n state.tokenBBalance.fixed,\n state.poolSelected.tokenB.decimals\n );\n token = state.poolSelected.tokenB;\n }\n\n const approveContract = new ethers.Contract(\n token.address,\n res.body,\n Ethers.provider().getSigner()\n );\n\n if (gweiPrice !== undefined && gasLimit !== undefined) {\n gasArgs.gasPrice = ethers.utils.parseUnits(gweiPrice ?? \"0.26\", \"gwei\");\n gasArgs.gasLimit = gasLimit ?? 20000000;\n }\n\n approveContract\n .approve(state.routerContract, value)\n .then((transactionHash) => {\n State.update({ onApprovingToken: true });\n setTimeout(() => {\n getAccountAllowance({\n token:\n mode == \"TA\"\n ? state.selectedPoolOptions.tokenA\n : state.selectedPoolOptions.tokenB,\n vAllowance: false,\n mode: mode,\n });\n State.update({ onApprovingToken: false, validation: undefined });\n }, 20000);\n });\n });\n};\n\n// Method to change bins number to distribute liquidity\nconst changeBinsToDistribute = (nb) => {\n State.update({\n binsToDistribute: nb,\n validation: false,\n amountInputTokenA: 0,\n amountInputTokenB: 0,\n });\n};\n\n// The next section contains the validation buttons //\nconst confirmButton = (\n <div class=\"ConfirmButton\" onClick={addLiquidity}>\n <div class={\"ConfirmText\"}>Confirm</div>\n </div>\n);\n\nconst validateButton = (\n <div class=\"validateButton\" onClick={validateConfirm}>\n <div class={\"ConfirmText\"}>Validate</div>\n </div>\n);\n\nconst validateButtonDisabled = (\n <div class=\"validateButtonDisabled\" disabled>\n <div class={\"ConfirmText\"}>\n {state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3\n ? state.tokenABalance && state.tokenBBalance\n ? \"Validate\"\n : `You don't have enough balance`\n : state.poolModeSelected.id == 1\n ? state.tokenABalance\n ? \"Validate\"\n : `You don't have enough balance on ${\n state.selectedPoolOptions.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : state.selectedPoolOptions.tokenA.symbol\n }`\n : state.tokenBBalance\n ? \"Validate\"\n : `You don't have enough balance on ${\n state.selectedPoolOptions.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : state.selectedPoolOptions.tokenB.symbol\n }`}\n </div>\n </div>\n);\n\nconst confirmButtonDisabled = (\n <div class=\"confirmButtonDisabled\" disabled>\n <div class={\"ConfirmText\"}>Adding Liquidity...</div>\n </div>\n);\n\nconst allowanceButton = (mode) => {\n return (\n <div class=\"allowanceButton\" onClick={() => approveErc20Token(mode)}>\n <div class={\"ConfirmText\"}>\n {mode == \"TA\"\n ? \"Add more allowance on \" + state.poolSelected.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenA.symbol\n : \"Add more allowance on \" + state.poolSelected.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenB.symbol}\n </div>\n </div>\n );\n};\n\nconst insufficientBalanceButton = (mode) => {\n return (\n <div class=\"allowanceButtonDisabled\" disabled>\n <div class={\"ConfirmText\"}>\n {mode == \"TA\"\n ? \"Insufficient balance on \" + state.poolSelected.tokenA.symbol ==\n \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenA.symbol\n : \"Insufficient balance on \" + state.poolSelected.tokenB.symbol ==\n \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenB.symbol}\n </div>\n </div>\n );\n};\n\nconst allowanceButtonDisabled = () => {\n return (\n <div class=\"allowanceButtonDisabled\" disabled>\n <div class={\"ConfirmText\"}>\n {state.moreTokenAAllowance\n ? \"Approving \" + state.poolSelected.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenA.symbol\n : \"Approving \" + state.poolSelected.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenB.symbol}\n </div>\n </div>\n );\n};\n\n// Get css file\nconst css = fetch(\n \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/addLiquidity.css\"\n).body;\n\nif (!css) return \"\";\n\nif (!state.theme) {\n State.update({\n theme: styled.div`\n ${css}\n `,\n });\n}\n\nconst Theme = state.theme;\nreturn (\n <Theme>\n <div class=\"text-center mt-1\">\n <div class=\"MainContainer\">\n <div class=\"ProtocolContainer\">\n <div class=\"ProtocolNetworkContainet\">\n <div class=\"ProtocolNetworkTextSection\">\n <div class=\"ProtocolText\">PROTOCOL</div>\n </div>\n <div class=\"ProtocolNetworkSection\">\n <div class=\"ProtocolNetworkContainer\">\n <img\n class=\"ProtocolImg\"\n src=\"https://etherscan.io/token/images/maverick_32.png\"\n />\n <div class=\"NetworkText\">Maverick</div>\n </div>\n </div>\n </div>\n </div>\n {state.isZkSync ? (\n <>\n <div class=\"row\" style={{ color: \"white\", width: \"100%\" }}>\n <div\n class=\"col-4\"\n style={{\n display: \"flex\",\n justifyContent: \"end\",\n }}\n >\n <div\n class=\"step\"\n style={{\n background:\n state.step >= 1 ? \"#6400FF\" : \"rgba(255, 255, 255, 0.1)\",\n }}\n >\n {state.step <= 1 ? (\n 1\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M1.25 9.375L7.875 16L18.125 4.5\"\n stroke=\"#FFFFFF\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n </div>\n </div>\n <div class=\"col-1\">-</div>\n <div\n class=\"col-2\"\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n >\n <div\n class=\"step\"\n style={{\n background:\n state.step >= 2 ? \"#6400FF\" : \"rgba(255, 255, 255, 0.1)\",\n }}\n >\n {state.step <= 2 ? (\n 2\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M1.25 9.375L7.875 16L18.125 4.5\"\n stroke=\"#FFFFFF\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n </div>\n </div>\n <div class=\"col-1\">-</div>\n <div\n class=\"col-4\"\n style={{\n display: \"flex\",\n justifyContent: \"start\",\n }}\n >\n <div\n class=\"step\"\n style={{\n background:\n state.step >= 3 ? \"#6400FF\" : \"rgba(255, 255, 255, 0.1)\",\n }}\n >\n {state.step <= 3 ? (\n 3\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M1.25 9.375L7.875 16L18.125 4.5\"\n stroke=\"#FFFFFF\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n </div>\n </div>\n </div>\n {state.step == 1 && state.poolList.length == 0 && (\n <div class=\"titleStep\">Loading data...</div>\n )}\n {state.step == 1 && state.poolList.length > 0 && (\n <div>\n <div class=\"titleStep\">Select Pool</div>\n <br />\n <div\n class=\"SelectPoolContainer\"\n style={{ margin: \"auto\", width: \"300px\" }}\n >\n <div class=\"TokenSection\">\n {state.poolSelected ? (\n <img\n class=\"TokenImg\"\n src={\n state.poolSelected.tokenA.symbol == \"ETH\"\n ? \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/weth.png\"\n : state.poolSelected.tokenA.logoURI\n }\n />\n ) : null}\n {state.poolSelected ? (\n <img\n class=\"TokenImg\"\n src={\n state.poolSelected.tokenB.symbol == \"ETH\"\n ? \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/weth.png\"\n : state.poolSelected.tokenB.logoURI\n }\n />\n ) : null}\n <div class=\"TokenNameSection\">\n <div class=\"TokenAction\">Pool {\"->\"}</div>\n <select\n class=\"TokenNameSelect\"\n value={\n state.poolSelected\n ? state.poolSelected.name\n : \"default\"\n }\n onChange={handlePoolSelect}\n >\n <option value=\"default\" disabled={state.poolSelected}>\n Select Pool\n </option>\n {state.poolList.map((p) => {\n return (\n <option value={p.name}>\n {(p.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : p.tokenA.symbol) +\n \"-\" +\n (p.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : p.tokenB.symbol)}\n </option>\n );\n })}\n </select>\n </div>\n </div>\n </div>\n <br />\n <div class=\"LineContainer\">\n <div class=\"Line\" />\n </div>\n <div class=\"titleStep\">Select Pool Options</div>\n <br />\n <div\n class=\"SelectPoolOptions\"\n style={{ margin: \"auto\", width: \"460px\", height: \"111px\" }}\n >\n <div class=\"row\">\n <div class=\"col-7\">\n <div class=\"TokenNameSection\">\n <div class=\"selectedFeeWidth\">\n <div\n style={{\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"start\",\n }}\n >\n {state.selectedPoolOptions && (\n <span class=\"FeeWidth\">\n {getFeeWidthFormat(\n state.selectedPoolOptions.fee\n ) + \" Fee\"}\n </span>\n )}\n {state.selectedPoolOptions && (\n <span class=\"FeeWidth\">\n {getFeeWidthFormat(\n state.selectedPoolOptions.width\n ) + \" Width\"}\n </span>\n )}\n </div>\n <div\n style={{\n display: \"flex\",\n justifyContent: \"end\",\n }}\n >\n <span\n class=\"EditButton\"\n onClick={() => showPoolOptionsModal()}\n >\n Edit\n </span>\n {state.showSelectPoolOptionModal && (\n <Widget\n props={{\n poolOptions: state.poolOptions,\n poolOptionsSelected:\n state.selectedPoolOptions,\n setPoolOption,\n closeModal,\n }}\n src={\n \"owa-is-bos.near/widget/Maverick-LP-OptionsModal\"\n }\n />\n )}\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-5\">\n <div class=\"row\" style={{ color: \"white\" }}>\n <div class=\"col-6 PoolOptionDetails\">\n {state.selectedPoolOptions\n ? (state.selectedPoolOptions.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : state.selectedPoolOptions.tokenA.symbol) +\n \" Balance\"\n : \"\"}\n </div>\n <div class=\"col-6 PoolOptionDetails\">\n {state.selectedPoolOptions\n ? (state.selectedPoolOptions.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : state.selectedPoolOptions.tokenB.symbol) +\n \" Balance\"\n : \"\"}\n </div>\n <div class=\"col-6\" style={{ fontSize: \"12px\" }}>\n {state.selectedPoolOptions\n ? formatNumberBalanceToken(\n state.selectedPoolOptions.tokenABalance\n )\n : \"\"}\n </div>\n <div class=\"col-6\" style={{ fontSize: \"12px\" }}>\n {state.selectedPoolOptions\n ? formatNumberBalanceToken(\n state.selectedPoolOptions.tokenBBalance\n )\n : \"\"}\n </div>\n </div>\n </div>\n <div class=\"col-12\">\n <div class=\"row\" style={{ color: \"white\" }}>\n <div class=\"col-4 PoolOptionDetails\">TVL</div>\n <div class=\"col-4 PoolOptionDetails\">Vol. 24h</div>\n <div class=\"col-4 PoolOptionDetails\">Fees 24h</div>\n <div class=\"col-4\" style={{ fontSize: \"10px\" }}>\n {state.selectedPoolOptions\n ? formatNumber(state.selectedPoolOptions.tvl.amount)\n : \"\"}\n </div>\n <div class=\"col-4\" style={{ fontSize: \"10px\" }}>\n {state.selectedPoolOptions\n ? formatNumber(\n state.selectedPoolOptions.volume.amount\n )\n : \"\"}\n </div>\n <div class=\"col-4\" style={{ fontSize: \"10px\" }}>\n {state.selectedPoolOptions\n ? formatNumber(state.selectedPoolOptions.feeVolume)\n : \"\"}\n </div>\n <div class=\"col-4\" style={{ fontSize: \"10px\" }}>\n {state.selectedPoolOptions ? (\n <span\n style={{\n color:\n state.selectedPoolOptions.tvlChange < 0\n ? \"rgba(255, 255, 255, 0.5)\"\n : \"rgb(38, 189, 0)\",\n }}\n >\n {state.selectedPoolOptions.tvlChange < 0\n ? \"↓\"\n : state.selectedPoolOptions.tvlChange == 0\n ? \"\"\n : \"↑\"}\n {formatAPR(state.selectedPoolOptions.tvlChange)}\n </span>\n ) : (\n \"\"\n )}\n </div>\n <div class=\"col-4\" style={{ fontSize: \"10px\" }}>\n {state.selectedPoolOptions ? (\n <span\n style={{\n color:\n state.selectedPoolOptions.volumeChange < 0\n ? \"rgba(255, 255, 255, 0.5)\"\n : \"rgb(38, 189, 0)\",\n }}\n >\n {state.selectedPoolOptions.volumeChange < 0\n ? \"↓\"\n : state.selectedPoolOptions.volumeChange == 0\n ? \"\"\n : \"↑\"}\n {formatAPR(\n state.selectedPoolOptions.volumeChange\n )}\n </span>\n ) : (\n \"\"\n )}\n </div>\n <div class=\"col-4\" style={{ fontSize: \"10px\" }}>\n {state.selectedPoolOptions ? (\n <span\n style={{\n color:\n state.selectedPoolOptions.feeChange < 0\n ? \"rgba(255, 255, 255, 0.5)\"\n : \"rgb(38, 189, 0)\",\n }}\n >\n {state.selectedPoolOptions.feeChange < 0\n ? \"↓\"\n : state.selectedPoolOptions.feeChange == 0\n ? \"\"\n : \"↑\"}\n {formatAPR(state.selectedPoolOptions.feeChange)}\n </span>\n ) : (\n \"\"\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n )}\n {state.step == 2 && (\n <div>\n <div class=\"titleStep\">Select Mode</div>\n <br />\n <div class=\"SelectModeContainer\">\n <div\n class=\"row\"\n style={{\n width: \"100%\",\n height: \"100px\",\n display: \"flex\",\n margin: \"0\",\n }}\n >\n <div class=\"col-6\">\n <p\n style={{\n textAlign: \"justify\",\n color: \"white\",\n fontSize: \"13px\",\n }}\n >\n {state.poolModeSelected.description}\n </p>\n </div>\n <div class=\"col-6\">\n <div class=\"SelectModeSelect\">\n <div class=\"TokenSection\">\n <div class=\"TokenNameSection\">\n <div class=\"TokenAction\">Pool Mode {\"->\"}</div>\n <select\n class=\"TokenNameSelect\"\n value={\n state.poolModeSelected\n ? state.poolModeSelected.name\n : \"default\"\n }\n onChange={handlePoolModeSelect}\n >\n <option\n value=\"default\"\n disabled={state.poolModeSelected}\n >\n Select Mode\n </option>\n {POOLSMODE.map((m) => {\n return <option>{m.name}</option>;\n })}\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div style={{ overflow: \"hidden\" }}>\n {state.poolModeSelected && (\n <img\n src={state.poolModeSelected.img}\n class=\"PoolModeImg\"\n ></img>\n )}\n </div>\n </div>\n )}\n {state.step == 3 && (\n <div style={{ height: \"314px\" }}>\n {state.poolModeSelected.name == \"Mode Static\" && (\n <>\n <div class=\"titleStep\">Select Distribution</div>\n <br />\n <div class=\"RequiredAssetsContainer\">\n <div class=\"row SelectDistributionContainer\">\n <div\n class=\"col-6\"\n style={{ display: \"flex\", justifyContent: \"end\" }}\n >\n <div class=\"SelectDistributionMode\">\n <div class=\"TokenSection\">\n <div class=\"TokenNameSection\">\n <div class=\"TokenAction\">\n Distribution mode {\"->\"}\n </div>\n <select\n class=\"TokenNameSelect\"\n value={\n state.poolDistributionSelected\n ? state.poolDistributionSelected.name\n : \"default\"\n }\n onChange={handlePoolDistributionSelect}\n >\n <option\n value=\"default\"\n disabled={state.poolModeSelected}\n >\n Select Distribution\n </option>\n {DISTRIBUTIONMODE.map((m) => {\n return <option>{m.name}</option>;\n })}\n </select>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-6\">\n {(state.poolDistributionSelected.name ==\n \"Exponential\" ||\n state.poolDistributionSelected.name == \"Flat\") && (\n <div class=\"SelectDistributionMode\">\n <div class=\"TokenSection\">\n <div class=\"TokenNameSection\">\n <div class=\"TokenAction\">\n Bins number (must be odd) {\"->\"}\n </div>\n <input\n class=\"TokenAmountInput\"\n type=\"number\"\n placeholder=\"0\"\n inputmode=\"decimal\"\n min=\"3\"\n step=\"2\"\n value={state.binsToDistribute}\n pattern=\"^[0-9]*[.]?[0-9]*$\"\n onkeydown=\"return false\"\n onChange={(e) =>\n changeBinsToDistribute(e.target.value)\n }\n />\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n </>\n )}\n <div class=\"titleStep\">Required Assets</div>\n <br class=\"br-div\" />\n <div\n class=\"TokenABContainer\"\n style={{\n filter:\n state.poolModeSelected.name == \"Mode Left\"\n ? \"blur(3px)\"\n : \"\",\n }}\n >\n <div class=\"TokenSection\">\n {state.poolSelected ? (\n <img\n class=\"TokenImg\"\n src={\n state.poolSelected.tokenA.symbol == \"ETH\"\n ? \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/weth.png\"\n : state.poolSelected.tokenA.logoURI\n }\n />\n ) : null}\n <div class=\"TokenNameSection\" style={{ color: \"white\" }}>\n <div class=\"TokenAction\">Token A {\"->\"}</div>\n {state.poolSelected.tokenA.symbol == \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenA.symbol}\n </div>\n </div>\n {state.poolModeSelected.name == \"Mode Left\" ? null : (\n <div class=\"TokenAmountSection\">\n <input\n class=\"TokenAmountInput\"\n type=\"number\"\n placeholder=\"0\"\n inputmode=\"decimal\"\n min=\"0\"\n pattern=\"^[0-9]*[.]?[0-9]*$\"\n value={state.amountInputTokenA}\n onChange={(e) => handleInputTokenA(e.target.value)}\n />\n <div class=\"TokenAmountPreview\">\n {state.tokenABalance != null ? (\n state.tokenABalance.fixed &&\n state.tokenABalance.fixed > 0 ? (\n <span>\n Balance: {state.tokenABalance.fixed}\n <span\n class=\"UserBalance\"\n onClick={async () => {\n setMaxBalanceTokenA();\n }}\n >\n MAX\n </span>\n </span>\n ) : (\n \"Balance: 0\"\n )\n ) : (\n \"Balance: 0\"\n )}\n </div>\n {false ? (\n <div class=\"TokenInsufficientBalance\">\n Insufficient Balance\n </div>\n ) : null}\n </div>\n )}\n </div>\n <br class=\"br-div\" />\n <div\n class=\"TokenABContainer\"\n style={{\n filter:\n state.poolModeSelected.name == \"Mode Right\"\n ? \"blur(3px)\"\n : \"\",\n }}\n >\n <div class=\"TokenSection\">\n {state.poolSelected ? (\n <img\n class=\"TokenImg\"\n src={\n state.poolSelected.tokenB.symbol == \"ETH\"\n ? \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/weth.png\"\n : state.poolSelected.tokenB.logoURI\n }\n />\n ) : null}\n <div class=\"TokenNameSection\" style={{ color: \"white\" }}>\n <div class=\"TokenAction\">Token B {\"->\"}</div>\n {state.poolSelected.tokenB.symbol == \"ETH\"\n ? \"WETH\"\n : state.poolSelected.tokenB.symbol}\n </div>\n </div>\n {state.poolModeSelected.name != \"Mode Right\" && (\n <div class=\"TokenAmountSection\">\n <input\n class=\"TokenAmountInput\"\n type=\"number\"\n placeholder=\"0\"\n inputmode=\"decimal\"\n min=\"0\"\n pattern=\"^[0-9]*[.]?[0-9]*$\"\n value={state.amountInputTokenB}\n onChange={(e) => handleInputTokenB(e.target.value)}\n />\n <div class=\"TokenAmountPreview\">\n {state.tokenBBalance != null ? (\n state.tokenBBalance.fixed &&\n state.tokenBBalance.fixed > 0 ? (\n <span>\n Balance: {state.tokenBBalance.fixed}\n <span\n class=\"UserBalance\"\n onClick={async () => {\n setMaxBalanceTokenB();\n }}\n >\n MAX\n </span>\n </span>\n ) : (\n \"Balance: 0\"\n )\n ) : (\n \"Balance: 0\"\n )}\n </div>\n {false ? (\n <div class=\"TokenInsufficientBalance\">\n Insufficient Balance\n </div>\n ) : null}\n </div>\n )}\n </div>\n </div>\n )}\n <div class=\"row\" style={{ marginInline: \"0px\", width: \"100%\" }}>\n <div\n class=\"col-6\"\n style={{ display: \"flex\", justifyContent: \"left\" }}\n >\n {state.step > 1 && (\n <div\n style={{\n width: \"110px\",\n display: \"flex\",\n cursor: \"pointer\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"8px\",\n borderRadius: \"4px\",\n height: \"40px\",\n border: \"1px solid #8D8DFD\",\n }}\n onClick={back}\n >\n <div class={\"ConfirmText\"}>Back</div>\n </div>\n )}\n </div>\n <div\n class=\"col-6\"\n style={{ display: \"flex\", justifyContent: \"right\" }}\n >\n {state.step < 3 && state.poolList.length > 0 && (\n <div\n style={{\n width: \"110px\",\n display: \"flex\",\n cursor: \"pointer\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"8px\",\n borderRadius: \"4px\",\n background: \"rgb(141, 141, 253)\",\n height: \"40px\",\n }}\n onClick={next}\n >\n <div class={\"ConfirmText\"}>Next</div>\n </div>\n )}\n\n {state.step == 3\n ? state.addingLiquidity\n ? confirmButtonDisabled\n : state.validation == true\n ? !state.moreTokenAAllowance\n ? !state.moreTokenBAllowance\n ? confirmButton\n : state.onApprovingToken\n ? allowanceButtonDisabled()\n : allowanceButton(\"TB\")\n : state.onApprovingToken\n ? allowanceButtonDisabled()\n : allowanceButton(\"TA\")\n : state.poolModeSelected.id == 0 ||\n state.poolModeSelected.id == 3\n ? state.tokenABalance && state.tokenBBalance\n ? state.need2Tokens\n ? state.amountInputTokenA > 0 &&\n state.amountInputTokenA < state.tokenABalance.fixed &&\n state.amountInputTokenB > 0 &&\n state.amountInputTokenB < state.tokenBBalance.fixed\n ? validateButton\n : validateButtonDisabled\n : state.amountInputTokenB > 0 &&\n state.amountInputTokenB < state.tokenBBalance.fixed\n ? validateButton\n : validateButtonDisabled\n : validateButtonDisabled\n : state.poolModeSelected.id == 1\n ? state.tokenABalance\n ? state.amountInputTokenA > 0 &&\n state.amountInputTokenA < state.tokenABalance.fixed\n ? validateButton\n : validateButtonDisabled\n : validateButtonDisabled\n : state.tokenBBalance\n ? state.amountInputTokenB > 0 &&\n state.amountInputTokenB < state.tokenBBalance.fixed\n ? validateButton\n : validateButtonDisabled\n : validateButtonDisabled\n : \"\"}\n </div>\n </div>\n </>\n ) : state.sender ? (\n <span class=\"text-white\">\n To proceed, please switch to the\n <br />\n <div\n class=\"networkNameContainer\"\n onClick={() => switchNetwork(324)}\n >\n <span class=\"networkName\">zkSync Era Network</span>\n </div>\n using your wallet.\n </span>\n ) : (\n <div>\n <Web3Connect\n className=\"LoginButton ConfirmText\"\n connectLabel=\"Connect Wallet\"\n />\n </div>\n )}\n </div>\n </div>\n </Theme>\n);\n" } } } } }