Transaction: D1ynUZS...QSgZ

{ "data": { "owa-is-bos.near": { "widget": { "Maverick-LP-Addition": { "": "const routerAbi = fetch(\n \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/maverick-router.txt\"\n);\n\nconst poolAbi = fetch(\n \"https://raw.githubusercontent.com/yaairnaavaa/Maverick/main/IPoolABI.txt\"\n);\n\nif (!routerAbi.ok || !poolAbi.ok) {\n return \"Loading\";\n}\n\nlet pools;\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\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\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});\n\nconst floatToFixed = (num, decimals) => {\n decimals ? decimals : 18;\n return ethers.BigNumber.from(\n ethers.utils.parseUnits(num.toString(), decimals)\n );\n};\n\nconst getScale = () => {\n asyncFetch(`https://api.mav.xyz/api/v3/tokenPrices/324`)\n .catch((err) => {\n console.log(err);\n })\n .then((res) => {\n console.log(res.body);\n let priceTokenA, priceTokenB;\n Object.entries(res.body.prices).forEach(([key, value]) => {\n if (\n state.selectedPoolOptions.tokenA.priceId == key ||\n state.selectedPoolOptions.tokenA.address == key\n ) {\n priceTokenA = value;\n }\n if (\n state.selectedPoolOptions.tokenB.priceId == key ||\n state.selectedPoolOptions.tokenB.address == key\n ) {\n priceTokenB = value;\n }\n });\n let scalesObj = {\n priceTokenA: priceTokenA.usd,\n priceTokenB: priceTokenB.usd,\n scaleTokAToTokB: priceTokenA.usd / priceTokenB.usd,\n scaleTokBToTokA: priceTokenB.usd / priceTokenA.usd,\n };\n console.log(scalesObj);\n State.update({ tokScales: scalesObj });\n });\n};\n\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\nconst setUserBalances = () => {\n const tokABalance = state.userBalances.find(\n (token) => token.symbol == state.selectedPoolOptions.tokenA.symbol\n );\n const tokBBalance = state.userBalances.find(\n (token) => token.symbol == state.selectedPoolOptions.tokenB.symbol\n );\n tokABalance\n ? State.update({\n tokenABalance: {\n fixed: (\n parseFloat(tokABalance.tokenBalance).toFixed(6) - 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(6) - 0.000001\n ).toString(),\n unfixed: tokBBalance.tokenBalanceBN,\n },\n })\n : State.update({ tokBBalance: undefined });\n};\n\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\nconst getPools = () => {\n console.log(\"entra pools\");\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\nconst getPoolOptions = (selPool, pools) => {\n State.update({\n poolOptions: pools.filter((pool) => pool.name == selPool),\n });\n};\n\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\nconst formatNumberBalanceToken = (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\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\nconst showPoolOptionsModal = () => {\n State.update({ showSelectPoolOptionModal: true });\n};\n\nconst closeModal = () => {\n State.update({ showSelectPoolOptionModal: false });\n};\n\nconst setPoolOption = (allPoolOptions, poolOptionSelected) => {\n console.log(\"Todas\");\n console.log(allPoolOptions);\n console.log(\"Seleccionada\");\n console.log(poolOptionSelected);\n State.update({\n selectedPoolOptions: poolOptionSelected,\n showSelectPoolOptionModal: false,\n });\n};\n\nconst getAccountAllowance = (data) => {\n console.log(data);\n let token = data.token;\n if (token.symbol == \"ETH\") {\n if (data.mode == \"TA\") {\n State.update({ tokenAAllowance: undefined });\n } else {\n State.update({ tokenBAllowance: undefined });\n }\n } else {\n asyncFetch(\n \"https://gist.githubusercontent.com/veox/8800debbf56e24718f9f483e1e40c35c/raw/f853187315486225002ba56e5283c1dba0556e6f/erc20.abi.json\"\n ).then((res) => {\n const approveContract = new ethers.Contract(\n token.address,\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 console.log(\n \"actual allowance \" + data.mode + \": \" + parseInt(res.toString())\n );\n });\n });\n }\n};\n\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 console.log(bins);\n\n let amountInA, amountInB;\n let inputA = parseFloat(state.amountInputTokenA).toString();\n let inputB = parseFloat(state.amountInputTokenB).toString();\n\n if (state.poolModeSelected.id == 0) {\n console.log(\"Entro a STATIC\");\n if (state.poolDistributionSelected.name == \"Single Bin\") {\n amountInA = ethers.utils.parseUnits(inputA, 18);\n amountInB = ethers.utils.parseUnits(inputB, 18);\n console.log(amountInA, amountInB);\n } else {\n amountInA = ethers.utils.parseUnits(inputA, 18);\n amountInB = ethers.utils.parseUnits(inputB, 18);\n console.log(amountInA, amountInB);\n }\n } else if (state.poolModeSelected.id == 3) {\n console.log(\"Entro a BOTH\");\n amountInA = ethers.utils.parseUnits(inputA, 18);\n amountInB = ethers.utils.parseUnits(inputB, 18);\n console.log(amountInA, amountInB);\n } else if (state.poolModeSelected.id == 1) {\n console.log(\"Entro a LEFT\");\n amountInA = ethers.utils.parseUnits(inputA, 18);\n amountInB = ethers.utils.parseUnits(\"0\", 18);\n console.log(amountInA, amountInB);\n } else if (state.poolModeSelected.id == 2) {\n console.log(\"Entro a RIGHT\");\n amountInA = ethers.utils.parseUnits(\"0\", 18);\n amountInB = ethers.utils.parseUnits(inputB, 18);\n console.log(amountInA, amountInB);\n }\n\n const overrides = {\n value: ethers.utils.parseUnits(\"0\", 18),\n gasLimit: 1000000,\n };\n\n pool.getState().then((res) => {\n console.log(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 console.log(\"Position\", 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 console.log(\"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 console.log(\"Flat\");\n\n const leftAmount = (\n (parseFloat(state.amountInputTokenA) - 0.001) /\n Math.floor(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 leftAmountFormated = ethers.utils.parseUnits(leftAmount, 18);\n const amountInBFormated = ethers.utils.parseUnits(rightAmount, 18);\n\n for (let i = 0; i < state.binsToDistribute; i++) {\n const pos = position + i - Math.floor(state.binsToDistribute / 2);\n\n const newDeltaA = pos < position ? leftAmountFormated : 0;\n const 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 if (state.poolDistributionSelected.name == \"Exponential\") {\n console.log(\"Exponential\");\n\n const sigma = state.binsToDistribute / 4;\n const amplitudeLeft =\n (parseFloat(state.amountInputTokenA) - 0.001) /\n (sigma * Math.sqrt(2 * Math.PI));\n const amplitudeRight =\n (parseFloat(state.amountInputTokenB) - 0.001) /\n (sigma * Math.sqrt(2 * Math.PI));\n\n for (let i = 0; i < state.binsToDistribute; i++) {\n const pos = position + i - Math.floor(state.binsToDistribute / 2);\n\n const leftAmountFormated = ethers.utils.parseUnits(\n (\n amplitudeLeft *\n Math.exp(-Math.pow(pos, 2) / (2 * Math.pow(sigma, 2)))\n ).toString(),\n 18\n );\n\n const amountInBFormated = ethers.utils.parseUnits(\n (\n amplitudeRight *\n Math.exp(-Math.pow(pos, 2) / (2 * Math.pow(sigma, 2)))\n ).toString(),\n 18\n );\n\n const newDeltaA = pos < position ? leftAmountFormated : 0;\n const 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\n liquidityParams.push(param);\n }\n }\n }\n\n console.log(liquidityParams);\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 poolModeSelected: POOLSMODE[0],\n poolDistributionSelected: DISTRIBUTIONMODE[2],\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 });\n }, 20000);\n });\n } catch (err) {\n console.log(err);\n }\n });\n });\n};\n\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\nconst handlePoolOptionsSelect = (data) => {\n const poolOptions = state.poolOptions.find(\n (po) => po.id === data.target.value\n );\n State.update({ selectedPoolOptions: poolOptions });\n};\n\nconst handlePoolModeSelect = (data) => {\n const mode = POOLSMODE.find((m) => m.name === data.target.value);\n State.update({ poolModeSelected: mode });\n};\n\nconst handlePoolDistributionSelect = (data) => {\n const mode = DISTRIBUTIONMODE.find((m) => m.name === data.target.value);\n State.update({ poolDistributionSelected: mode });\n};\n\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\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\nconst getRecipient = () => {\n return (\n state.sender.substring(0, 5) +\n \"...\" +\n state.sender.substring(state.sender.length - 4, state.sender.length)\n ).toUpperCase();\n};\n\nconst next = () => {\n if (state.step + 1 == 2) {\n if (!(state.tokenABalance || state.tokenBBalance)) {\n setUserBalances();\n getScale();\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\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 });\n};\n\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\nconst setMaxBalanceTokenA = () => {\n if (state.tokenABalance.fixed > 0) {\n handleInputTokenA(state.tokenABalance.fixed);\n }\n};\n\nconst setMaxBalanceTokenB = () => {\n if (state.tokenBBalance.fixed > 0) {\n handleInputTokenB(state.tokenBBalance.fixed);\n }\n};\n\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\nconst handleInputTokenA = (input) => {\n console.log(\"entra handle input A\", state.poolModeSelected.id);\n if (state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3) {\n const step1TokenAAmount = state.selectedPoolOptions.price;\n const tickSpacing = 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\n let deltaX = 0;\n let deltaY = 0;\n let deltaL = 1;\n\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 deltaX = deltaL * (1 / Math.sqrt(step1TokenAAmount) - 1 / Math.sqrt(iu));\n deltaY = deltaL * (Math.sqrt(step1TokenAAmount) - Math.sqrt(il));\n }\n if (step1TokenAAmount >= iu) {\n deltaX = 0;\n deltaY = Math.sqrt(iu) - Math.sqrt(il);\n }\n\n let tokenB = 0;\n if (ic !== 0) {\n tokenB = input * (deltaX / deltaY);\n State.update({\n amountInputTokenB: deltaY == 0 ? 0 : tokenB,\n //amountInputTokenB: deltaY != 0 ? tokenB.toFixed(6) : 0,\n amountInputTokenA: input,\n validation: undefined,\n });\n } else {\n State.update({\n amountInputTokenA: 0,\n validation: undefined,\n need2Tokens: false,\n });\n }\n }\n};\n\nconst handleInputTokenB = (input) => {\n console.log(\"entra handle input B\", state.poolModeSelected.id);\n if (state.poolModeSelected.id == 0 || state.poolModeSelected.id == 3) {\n const step1TokenAAmount = state.selectedPoolOptions.price;\n const tickSpacing = 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\n let deltaX = 0;\n let deltaY = 0;\n let deltaL = 1;\n\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 deltaX = deltaL * (1 / Math.sqrt(step1TokenAAmount) - 1 / Math.sqrt(iu));\n deltaY = deltaL * (Math.sqrt(step1TokenAAmount) - Math.sqrt(il));\n }\n if (step1TokenAAmount >= iu) {\n deltaX = 0;\n deltaY = Math.sqrt(iu) - Math.sqrt(il);\n }\n\n let tokenA = 0;\n if (ic !== 0) {\n tokenA = (input / deltaX) * deltaY;\n State.update({\n amountInputTokenA: deltaY == 0 ? 0 : tokenA,\n amountInputTokenB: input,\n //amountInputTokenA: deltaY > 0 ? tokenA : 0,\n //amountInputTokenB: deltaY > 0 ? input : 0,\n validation: undefined,\n });\n } else {\n State.update({\n amountInputTokenA: 0,\n need2Tokens: false,\n //amountInputTokenB: deltaY > 0 ? input : 0,\n amountInputTokenB: input,\n validation: undefined,\n });\n }\n }\n};\n\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\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\nconst changeBinsToDistribute = (nb) => {\n State.update({ binsToDistribute: nb, validation: false });\n};\n\nconst claculateEquivalentFormula = () => {\n const ratio = \"Token A per B\";\n const width = \"0.2%\";\n const deltaL = 1;\n\n // =CEILING.MATH(LOG(1+(width/100))/LOG(1.0001))\n const tickSpacing = Math.ceil(Math.log(width / 100));\n};\n\nconst getTokenAFromB = () => {};\n\nconst getTokenBFromA = () => {};\n\n/*\nCosas a validar\n\n */\n\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 == 0 || state.poolModeSelected == 3\n ? state.tokenABalance && state.tokenBBalance\n ? \"Validate\"\n : `You don't have enough balance`\n : state.poolModeSelected == 1\n ? state.tokenABalance\n ? \"Validate\"\n : `You don't have enough balance on ${state.selectedPoolOptions.tokenA.symbol}`\n : state.tokenBBalance\n ? \"Validate\"\n : `You don't have enough balance on ${state.selectedPoolOptions.tokenB.symbol}`}\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\n : \"Add more allowance on \" + 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\n : \"Approving \" + state.poolSelected.tokenB.symbol}\n </div>\n </div>\n );\n};\n\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={state.poolSelected.tokenA.logoURI}\n />\n ) : null}\n {state.poolSelected ? (\n <img\n class=\"TokenImg\"\n src={state.poolSelected.tokenB.logoURI}\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 <option>{p.name}</option>;\n })}\n </select>\n </div>\n </div>\n </div>\n <a\n href=\"#/owa-is-bos.near/widget/Maverick-LP-NewPool\"\n style={{\n background: \"rgb(141, 141, 253)\",\n color: \"white\",\n \"font-weight\": \"700\",\n padding: \"2px 10px\",\n \"border-radius\": \"7px\",\n border: \"none\",\n fontSize: \"12px\",\n textDecoration: \"none\",\n }}\n >\n Create New Pool\n </a>\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 +\n \" Balance\"\n : \"\"}\n </div>\n <div class=\"col-6 PoolOptionDetails\">\n {state.selectedPoolOptions\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 <option disabled={state.poolModeSelected}>\n Flat (Soon)\n </option>\n <option disabled={state.poolModeSelected}>\n Exponential (Soon)\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={state.poolSelected.tokenA.logoURI}\n />\n ) : null}\n <div class=\"TokenNameSection\" style={{ color: \"white\" }}>\n <div class=\"TokenAction\">Token A {\"->\"}</div>\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={state.poolSelected.tokenB.logoURI}\n />\n ) : null}\n <div class=\"TokenNameSection\" style={{ color: \"white\" }}>\n <div class=\"TokenAction\">Token B {\"->\"}</div>\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 && state.poolList.length > 0 && (\n <a\n href=\"#/owa-is-bos.near/widget/Maverick-LP-Portfolio\"\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 textDecoration: \"none\",\n }}\n >\n <div class={\"ConfirmText\"}>My Portfolio</div>\n </a>\n )}\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.amountInputTokenB > 0\n ? validateButton\n : validateButtonDisabled\n : state.amountInputTokenB > 0\n ? validateButton\n : validateButtonDisabled\n : validateButtonDisabled\n : state.poolModeSelected.id == 1\n ? state.tokenABalance\n ? state.amountInputTokenA > 0\n ? validateButton\n : validateButtonDisabled\n : validateButtonDisabled\n : state.tokenBBalance\n ? state.amountInputTokenB > 0\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" } } } } }