Transaction: zBHhzjg...u6zU

{ "data": { "bluebiu.near": { "widget": { "Liquidity.Bridge.JUICE.VaultDetail": { "": "const StyledContainer = styled.div`\n width: 1000px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n`\nconst StyledContainerTop = styled.div`\n width: 100%;\n`\nconst StyledBack = styled.div`\n margin: 20px 0 24px;\n display: flex;\n align-items: center;\n gap: 14px;\n cursor: pointer;\n`\nconst StyledBackTxt = styled.div`\n color: #979ABE;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n`\nconst StyledVault = styled.div`\n border-radius: 16px;\n border: 1px solid #373A53;\n background: #262836;\n overflow: hidden;\n`\nconst StyledVaultTop = styled.div`\n display: flex;\n height: 100px;\n padding: 18px 16px 18px 30px;\n background: #32364B;\n border-bottom: 1px solid #373A53;\n`\nconst StyledVaultImageContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 64px;\n height: 64px;\n border-radius: 12px;\n border: 2px solid #262836;\n background: #FFF;\n`\nconst StyledVaultImage = styled.img`\n height: 44px;\n`\nconst StyledVaultInfo = styled.div`\n flex: 1;\n margin: 0 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n`\nconst StyledVaultName = styled.div`\n color: #FFF;\n font-family: Montserrat;\n font-size: 18px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`\nconst StyledVaultDesc = styled.div`\n color: #979ABE;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledVaultViewButton = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 130px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 8px;\n border: 1px solid #5E617E;\n cursor: pointer;\n\n color: #979ABE;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledVaultBottom = styled.div`\n padding: 18px 33px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n /* align-items: center;\n flex-wrap: wrap; */\n`\nconst StyledVaultBottomRow = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n`\nconst StyledVaulBottomMessage = styled.div`\n width: 25%;\n display: flex;\n flex-direction: column;\n gap: 3px;\n`\nconst StyledVaulBottomMessageLabel = styled.div`\n color: #979ABE;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledVaulBottomMessageValue = styled.div`\n display: flex;\n align-items: center;\n color: #FFF;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`\nconst StyledContainerBottom = styled.div`\n width: 100%;\n display: flex;\n gap: 20px;\n`\nconst StyledDepositOrWithdraw = styled.div`\n width: 490px;\n height: 387px;\n border-radius: 16px;\n border: 1px solid #373A53;\n background: #262836;\n`\nconst StyledDepositOrWithdrawTop = styled.div`\n border-bottom: 1px solid #373A53;\n display: flex;\n align-items: center;\n`\nconst StyledDepositOrWithdrawTopButton = styled.div`\n position: relative;\n flex: 1;\n padding: 22px 0;\n text-align: center;\n color: #979ABE;\n font-family: Montserrat;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n cursor: pointer;\n &.active {\n color: #FFF;\n &:after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 4px;\n background: #B968F3;\n }\n }\n`\nconst StyledDepositOrWithdrawBottom = styled.div`\n \n`\nconst StyledEmptyContainer = styled.div`\n padding: 44px 16px 31px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 21px;\n`\nconst StyledEmptyImage = styled.img`\n width: 120px;\n`\nconst StyledEmptyTips = styled.div`\n color: #FFF;\n text-align: center;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px */\n`\nconst StyledDepositContainer = styled.div`\n padding: 20px;\n`\n\nconst StyledWithdrawContainer = styled.div`\n padding: 20px;\n`\n\nconst StyledDepositOrWithdrawInput = styled.div`\n padding: 12px 16px;\n border-radius: 8px;\n border: 1px solid #373A53;\n background: #1B1E27;\n height: 71px;\n`\nconst StyledDepositOrWithdrawInputTop = styled.div`\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\nconst StyledDepositOrWithdrawInputBottom = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 30px;\n`\nconst StyledDepositOrWithdrawInputTopType = styled.div`\n color: #979ABE;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledDepositOrWithdrawInputTopBalance = styled.div`\n color: #979ABE;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n span {\n color: #FFF;\n cursor: pointer;\n text-decoration-line: underline;\n }\n`\nconst StyledDepositOrWithdrawInputBottomInput = styled.input`\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n flex: 1;\n color: #FFF;\n font-family: Gantari;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n`\nconst StyledDepositOrWithdrawInputBottomSymbol = styled.div`\n display: flex;\n align-items: center;\n gap: 5px;\n`\nconst StyledDepositOrWithdrawInputBottomSymbolImageContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n overflow: hidden;\n`\nconst StyledDepositOrWithdrawInputBottomSymbolImage = styled.img`\n width: 100%;\n height: 100%;\n`\nconst StyledDepositOrWithdrawInputBottomSymbolTxt = styled.div`\n color: #FFF;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n// const StyledDepositOrWithdrawOutput = styled.div`\n// padding: 12px 16px;\n// border-radius: 8px;\n// border: 1px solid #373A53;\n// background: #2E3142;\n// height: 71px;\n// `\nconst StyledDepositOrWithdrawInputBottomInputTxt = styled.div`\n color: #5E617E;\n font-family: Gantari;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n`\n\n\n\nconst StyledDepositOrWithdrawButton = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50px;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: pointer;\n background: var(--button-color);\n\n color: var(--button-text-color);\n font-family: Gantari;\n font-size: 18px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n &[disabled] {\n opacity: 0.3;\n cursor: not-allowed;\n }\n`\nconst StyledSlippage = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 14px 0 54px;\n`\nconst StyledSlippageL = styled.div`\n position: relative;\n`\nconst StyledSlippageLBox = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`\nconst StyledSlippageTxt = styled.div`\n color: #979ABE;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledSlippageR = styled.div`\n color: #FFF;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledOverviewContainer = styled.div`\n width: 490px;\n height: 387px;\n border-radius: 16px;\n border: 1px solid #373A53;\n background: #262836;\n`\nconst StyledPostionOverview = styled.div`\n padding: 21px 20px 14px;\n border-bottom: 1px solid #373A53;\n`\nconst StyledOverviewTitle = styled.div`\n margin-bottom: 16px;\n color: #FFF;\n font-family: Montserrat;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`\nconst StyledOverviewList = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n`\nconst StyledOverview = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\nconst StyledOverviewLabel = styled.div`\n color: #979ABE;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledOverviewValue = styled.div`\n color: #FFF;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledVaultOverview = styled.div`\n padding: 16px 20px 0 20px;\n`\nconst StyledOverviewButtonContainer = styled.div`\n margin-top: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 14px;\n`\nconst StyledOverviewButton = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 218px;\n height: 50px;\n flex-shrink: 0;\n border-radius: 8px;\n border: 1px solid #B968F3;\n cursor: pointer;\n\n color: #FFF;\n font-family: Gantari;\n font-size: 18px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n\n`\nconst StyledEarnImageContainer = styled.div`\n position: relative;\n width: 20px;\n &:nth-of-type(n+2) {\n margin-left: -4px;\n }\n`\nconst StyledEarnCoverImage = styled.img`\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 14px;\n`\nconst StyledEarnImage = styled.img`\n /* width: 20px; */\n width: 100%;\n`\nconst StyledMaxSlippageCover = styled.div`\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 999;\n`\nconst StyledMaxSlippageContainer = styled.div`\n position: absolute;\n top: -6px;\n right: -10px;\n transform: translateX(100%);\n width: 173px;\n height: 91px;\n flex-shrink: 0;\n padding: 13px 16px;\n border-radius: 8px;\n border: 1px solid #454968;\n background: #313447;\n z-index: 9999;\n`\nconst StyledMaxSlippageTop = styled.div`\n margin-bottom: 18px;\n color: #979ABE;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledMaxSlippageBottom = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n \n`\nconst StyledMaxSlippageAutoButton = styled.div`\n width: 42px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n border: 1px solid #454968;\n background: #313447;\n cursor: pointer;\n color: #979ABE;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledMaxSlippageInputContainer = styled.div`\n width: 85px;\n height: 30px;\n flex-shrink: 0;\n padding: 7px;\n display: flex;\n align-items: center;\n border-radius: 6px;\n border: 1px solid #373A53;\n background: #1B1E27;\n &.error {\n background: rgb(153, 27, 27);\n border-color: rgb(220, 38, 38);\n }\n`\nconst StyledMaxSlippagePercentage = styled.div`\n color: #FFF;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledMaxSlippageInput = styled.input`\n /* width: ; */\n /* flex: 1; */\n width: 100%;\n max-width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n \n color: #FFF;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n`\n\nState.init({\n positionOverview: null,\n vaultOverview: null,\n isDeposit: true,\n inSlippageAmount: \"0.05\",\n slippageError: false,\n showSlippage: false,\n depositBalance: \"\",\n withdrawBalance: \"\",\n depositData: \"\",\n inDepositAmount: \"\",\n outDepositAmount: \"\",\n depositLoading: false,\n inWithdrawAmount: \"\",\n outWithdrawAmount: \"\",\n withdrawLoading: false\n})\nconst {\n toast,\n sender,\n chainId,\n windowOpen,\n addAction,\n isCreatedAccount,\n ICON_MAP,\n PROXY_ADDRESS,\n SYMBOL_ADDRESS,\n multicall,\n multicallAddress,\n smartContractAddress,\n onBack,\n onChangeCategoryIndex,\n checkedVault,\n} = props\n\nconst SECOND_SYMBOL_ADDRESS = typeof SYMBOL_ADDRESS === 'string' ? SYMBOL_ADDRESS : SYMBOL_ADDRESS[1]\n\nconst TOKEN1_MAPPING = {\n \"0x78E6265a11a41E5Dcd1431448d00f3524943fD11\": \"BlastWETHV3LP\",\n \"0x3FeC7f626923445F587C4881a80D00a7104782d1\": \"BlastSpot\"\n}\nconst isDepositInSufficient = Number(state?.inDepositAmount ?? 0) > Number(state?.depositBalance ?? 0)\nconst isWithdrawInSufficient = Number(state?.inWithdrawAmount ?? 0) > Number(state?.withdrawBalance ?? 0)\nfunction isNotEmptyArray(value) {\n return value && value[0]\n}\nfunction handleQueryPositionOverview() {\n const calls = []\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"account\",\n \"type\": \"address\"\n }\n ],\n \"name\": \"getPositionValue\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"value\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }]\n calls.push({\n address: checkedVault.strategyAddress,\n name: \"getPositionValue\",\n params: [smartContractAddress]\n })\n multicall({\n abi,\n calls,\n options: {},\n multicallAddress,\n provider: Ethers.provider(),\n }).then(result => {\n const [positionValueResult, balanceOfResult] = result\n State.update({\n positionOverview: {\n positionValue: Big(positionValueResult ? ethers.utils.formatUnits(positionValueResult[0]) : 0).toFixed(6),\n }\n })\n\n })\n}\nfunction handleQueryVaultOverview() {\n const calls = []\n const abi = [{\n \"inputs\": [],\n \"name\": \"getTotalDepositCap\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }, {\n \"inputs\": [],\n \"name\": \"getTotalBaseDeposit\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }, {\n \"inputs\": [],\n \"name\": \"getMaxDepositPerAccount\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }]\n\n\n calls.push({\n address: checkedVault.strategyAddress,\n name: \"getTotalDepositCap\",\n })\n calls.push({\n address: checkedVault.strategyAddress,\n name: \"getTotalBaseDeposit\",\n })\n calls.push({\n address: checkedVault.strategyAddress,\n name: \"getMaxDepositPerAccount\",\n })\n\n multicall({\n abi,\n calls,\n options: {},\n multicallAddress,\n provider: Ethers.provider(),\n }).then(result => {\n console.log('=result', result)\n const [getTotalDepositCapResult, getTotalBaseDepositResult, maxDepositPerAccountResult] = result\n State.update({\n vaultOverview: {\n availableVaultSpace: Big(Big(getTotalDepositCapResult[0]).minus(getTotalBaseDepositResult[0])).div(Big(10).pow(18)).toFixed(2),\n totalDepositCap: Big(getTotalDepositCapResult[0]).div(Big(10).pow(18)).toFixed(2),\n maxDepositPerAccount: Big(maxDepositPerAccountResult[0]).div(Big(10).pow(18)).toFixed(2)\n }\n })\n }).catch(() => {\n State.update({\n vaultOverview: {\n }\n })\n })\n}\nfunction handleGetDepositData(receivedShares, anotherValue) {\n const slippageRate = 0.01\n const receivedSharesAfterSlippage = ethers.BigNumber.from(Big(receivedShares).minus(Big(receivedShares).times(slippageRate)).toFixed(0));\n const anotherValueAfterSlippage = ethers.BigNumber.from(Big(anotherValue).minus(Big(anotherValue).times(slippageRate)).toFixed(0))\n const encodedFirstNumber = ethers.utils.defaultAbiCoder.encode(\n [\"uint256\"],\n [receivedSharesAfterSlippage]\n );\n const encodedSecondNumber = ethers.utils.defaultAbiCoder.encode(\n [\"uint256\"],\n [anotherValueAfterSlippage]\n );\n const encodedSecondNumberWithoutPrefix = encodedSecondNumber.slice(2);\n const finalEncodedData = '0x' + encodedFirstNumber.slice(2) + encodedSecondNumberWithoutPrefix;\n return finalEncodedData\n}\nfunction handleInAmountChange(amount) {\n if (Number(amount) < 0) {\n return\n }\n if (Number(amount) === 0) {\n State.update({\n [state.isDeposit ? \"inDepositAmount\" : \"inWithdrawAmount\"]: amount,\n [state.isDeposit ? \"outDepositAmount\" : \"outWithdrawAmount\"]: \"\"\n })\n return\n }\n State.update({\n [state.isDeposit ? \"inDepositAmount\" : \"inWithdrawAmount\"]: amount\n })\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"amount\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"previewDeposit\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"nonpayable\",\n \"type\": \"function\"\n }, {\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"strategy\",\n \"type\": \"address\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amount\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"bytes\",\n \"name\": \"data\",\n \"type\": \"bytes\"\n }\n ],\n \"name\": \"strategyDeposit\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"receivedShares\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n }, {\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"strategy\",\n \"type\": \"address\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"shares\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"bytes\",\n \"name\": \"data\",\n \"type\": \"bytes\"\n }\n ],\n \"name\": \"strategyWithdraw\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"receivedAssets\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n }]\n const _amount = Big(amount)\n .mul(Big(10).pow(18))\n .toFixed(0)\n\n if (state.isDeposit) {\n const depositHelperAddressMap = {\n \"Blast WETH V3 LP\": \"0x8c123a1299843c64bc46681ac4f63ead076294b1\",\n \"EtherFi V3 LP\": \"0x0C7e2906f5cf0e6F6de47E9Fc8ECEd3E82ED405C\",\n \"Kelp V3 LP V2\": \"0x7988EA56563a01907ff02f49a7739aB949905104\",\n \"Renzo V3 LP\": \"0xfA4042e6777c6C66d71E9b288e756F8fde802130\",\n \"USDB/WETH 0.05% LP\": \"0x86a29d4dbd9005bedf2e26ed33f74504e237d436\",\n \"Ethena USDE V3 LP\": \"0x5eed3fea11ef1ea98970eb0129c5a424c7f215f3\"\n }\n if (depositHelperAddressMap[checkedVault.name]) {\n const contract = new ethers.Contract(\n ethers.utils.getAddress(depositHelperAddressMap[checkedVault.name]),\n abi,\n Ethers.provider()\n );\n contract\n .callStatic\n .previewDeposit(_amount).then((result) => {\n State.update({\n depositData: handleGetDepositData(result[0], result[1]),\n outDepositAmount: ethers.utils.formatUnits(result[1])\n })\n });\n } else {\n const depositData = \"0x0000000000000000000000000000000000000000000000000000000000000000\"\n const contract = new ethers.Contract(\n ethers.utils.getAddress(smartContractAddress),\n abi,\n Ethers.provider().getSigner()\n );\n contract\n .callStatic\n .strategyDeposit(checkedVault.strategyAddress, _amount, depositData)\n .then((result) => {\n State.update({\n depositData,\n outDepositAmount: ethers.utils.formatUnits(result)\n })\n })\n }\n } else {\n getShares(_amount).then(sharesResult => {\n const shares = sharesResult[1]\n const contract = new ethers.Contract(\n ethers.utils.getAddress(smartContractAddress),\n abi,\n Ethers.provider().getSigner()\n );\n contract\n .callStatic\n .strategyWithdraw(\n checkedVault.strategyAddress,\n shares,\n \"0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000\",\n )\n .then((result) => {\n State.update({\n outWithdrawAmount: ethers.utils.formatUnits(result)\n })\n });\n })\n }\n}\nfunction handleQueryDepositBalance(callback) {\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"account\",\n \"type\": \"address\"\n }\n ],\n \"name\": \"balanceOf\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"value\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }]\n const contract = new ethers.Contract(\n ethers.utils.getAddress(SECOND_SYMBOL_ADDRESS),\n abi,\n Ethers.provider()\n );\n console.log('=SECOND_SYMBOL_ADDRESS', SECOND_SYMBOL_ADDRESS)\n console.log('=smartContractAddress', smartContractAddress)\n contract\n .balanceOf(smartContractAddress)\n .then(result => {\n console.log('=result', result)\n const balance = Big(result ? ethers.utils.formatUnits(result) : 0).toFixed()\n State.update({\n depositBalance: balance\n })\n callback && callback(balance)\n })\n}\nfunction handleQueryWithdrawBalance(callback) {\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"owner\",\n \"type\": \"address\"\n }\n ],\n \"name\": \"balanceOf\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"result\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }]\n const contract = new ethers.Contract(\n ethers.utils.getAddress(checkedVault.strategyAddress),\n abi,\n Ethers.provider()\n );\n contract\n .balanceOf(smartContractAddress)\n .then(result => {\n const balance = Big(result ? ethers.utils.formatUnits(result) : 0).toFixed()\n State.update({\n withdrawBalance: balance\n })\n callback && callback(balance)\n })\n}\nfunction getShares(_amount) {\n return new Promise((resolve, reject) => {\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"assets\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"previewDeposit\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"updatedAssets\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"shares\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }]\n const contract = new ethers.Contract(\n ethers.utils.getAddress(PROXY_ADDRESS),\n abi,\n Ethers.provider().getSigner()\n )\n contract.previewDeposit(_amount)\n .then(resolve)\n .catch(reject)\n })\n\n}\nfunction handleDeposit() {\n State.update({\n depositLoading: true\n })\n const toastId = toast?.loading({\n title: `Deposit ${state.inDepositAmount} ${checkedVault.token0}`,\n });\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"strategy\",\n \"type\": \"address\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amount\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"bytes\",\n \"name\": \"data\",\n \"type\": \"bytes\"\n }\n ],\n \"name\": \"strategyDeposit\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"receivedShares\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n }]\n const contract = new ethers.Contract(\n ethers.utils.getAddress(smartContractAddress),\n abi,\n Ethers.provider().getSigner()\n );\n\n const _amount = Big(state?.inDepositAmount)\n .mul(Big(10).pow(18))\n .toFixed(0);\n console.log('=smartContractAddress', smartContractAddress)\n console.log('=checkedVault.strategyAddress', checkedVault.strategyAddress)\n console.log('=_amount', _amount)\n console.log('=state.depositData', state.depositData)\n contract\n .strategyDeposit(\n checkedVault.strategyAddress,\n _amount,\n state.depositData,\n )\n .then(tx => tx.wait())\n .then((result) => {\n const { status, transactionHash } = result;\n toast?.dismiss(toastId);\n if (status !== 1) throw new Error(\"\");\n State.update({\n depositLoading: false\n })\n toast?.success({\n title: \"Deposit Successfully!\",\n text: `Deposit ${state.inDepositAmount} ${checkedVault.token0}`,\n tx: transactionHash,\n chainId,\n });\n\n if (status === 1) {\n\n addAction?.({\n type: \"Yield\",\n action: \"Deposit\",\n token0: checkedVault.token0,\n token1: TOKEN1_MAPPING[checkedVault.strategyAddress] || checkedVault.token1,\n amount: state?.inDepositAmount,\n template: \"Juice\",\n add: true,\n status,\n transactionHash,\n extra_data: JSON.stringify({\n action: \"Deposit\",\n amount0: state?.inDepositAmount,\n amount1: state?.outDepositAmount,\n })\n });\n handleRefresh()\n }\n }).catch(error => {\n console.log('=error', error)\n State.update({\n depositLoading: false\n })\n toast?.fail({\n title: \"Deposit Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : `Deposit ${state.inDepositAmount} ${checkedVault.token0}`,\n });\n });\n}\nfunction handleWithdraw() {\n State.update({\n withdrawLoading: true\n })\n const toastId = toast?.loading({\n title: `Withdraw ${state.inWithdrawAmount} ${checkedVault.token0}`,\n });\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"address\",\n \"name\": \"strategy\",\n \"type\": \"address\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"shares\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"bytes\",\n \"name\": \"data\",\n \"type\": \"bytes\"\n }\n ],\n \"name\": \"strategyWithdraw\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"receivedAssets\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n }]\n const contract = new ethers.Contract(\n ethers.utils.getAddress(smartContractAddress),\n abi,\n Ethers.provider().getSigner()\n );\n const _amount = Big(state?.inWithdrawAmount)\n .mul(Big(10).pow(18))\n .toFixed(0);\n getShares(_amount).then(sharesResult => {\n const shares = sharesResult[1]\n contract\n .strategyWithdraw(\n checkedVault.strategyAddress,\n shares,\n \"0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000\",\n )\n .then(tx => tx.wait())\n .then((result) => {\n const { status, transactionHash } = result;\n toast?.dismiss(toastId);\n if (status !== 1) throw new Error(\"\");\n State.update({\n withdrawLoading: false\n })\n toast?.success({\n title: \"Withdraw Successfully!\",\n text: `Withdraw ${state.inWithdrawAmount} ${checkedVault.token0}`,\n tx: transactionHash,\n chainId,\n });\n if (status === 1) {\n addAction?.({\n type: \"Yield\",\n action: \"Withdraw\",\n token0: TOKEN1_MAPPING[checkedVault.strategyAddress] || checkedVault.token1,\n token1: checkedVault.token0,\n amount: state?.inWithdrawAmount,\n template: \"Juice\",\n add: false,\n status,\n transactionHash,\n extra_data: JSON.stringify({\n action: \"Withdraw\",\n amount0: state?.inWithdrawAmount,\n amount1: state?.outWithdrawAmount,\n })\n });\n handleRefresh()\n }\n }).catch(error => {\n State.update({\n withdrawLoading: false\n })\n toast?.fail({\n title: \"Withdraw Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : `Withdraw ${state.inWithdrawAmount} ${checkedVault.token0}`,\n });\n });\n })\n\n}\nfunction handleExplore() {\n windowOpen(\"https://blastexplorer.io/address/\" + checkedVault.vaultAddress, \"_blank\")\n}\nfunction handleChart() {\n windowOpen(\"https://dexscreener.com/blast/\" + checkedVault.vaultAddress, \"_blank\")\n}\n\nfunction handleSlippageChange(amount) {\n State.update({\n slippageError: Number(amount) > 50 || Number(amount) < 0,\n inSlippageAmount: amount\n })\n}\nfunction handleGetSlippageOutAmount(amount, slippageAmount) {\n const slippageOutAmount = amount === \"\" ? 0 : (state.slippageError ? Big(amount).toFixed(6) : Big(amount).times(1 - slippageAmount / 100).toFixed(6))\n return Number(slippageOutAmount) > 0 ? slippageOutAmount : \"0.000000\"\n}\nfunction handleMax() {\n const handleQueryBalance = state.isDeposit ? handleQueryDepositBalance : handleQueryWithdrawBalance\n handleQueryBalance(balance => {\n handleInAmountChange(Big(balance).eq(Big(10).pow(-18)) ? 0 : balance)\n })\n\n}\nfunction handleAuto() {\n handleSlippageChange(0.5)\n}\nfunction handleRefresh() {\n handleQueryPositionOverview()\n handleQueryVaultOverview()\n handleQueryDepositBalance()\n handleQueryWithdrawBalance()\n}\nuseEffect(() => {\n if (state.isDeposit) {\n handleQueryDepositBalance()\n } else {\n handleQueryWithdrawBalance()\n }\n}, [state.isDeposit])\n\nuseEffect(() => {\n if (checkedVault) {\n handleRefresh()\n }\n}, [checkedVault])\nreturn (\n <StyledContainer>\n <StyledContainerTop>\n <StyledBack onClick={onBack}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"13\" viewBox=\"0 0 9 13\" fill=\"none\">\n <path d=\"M7.5 1L2 6.49992L7.5 12\" stroke=\"#979ABE\" strokeWidth=\"2\" stroke-linecap=\"round\" />\n </svg>\n <StyledBackTxt>Back to vaults</StyledBackTxt>\n </StyledBack>\n <StyledVault>\n <StyledVaultTop>\n <StyledVaultImageContainer\n style={{\n background: checkedVault.iconBgColor,\n borderColor: checkedVault.borderColor || \"#262836\"\n }}\n >\n <StyledVaultImage src={checkedVault.icon} />\n </StyledVaultImageContainer>\n <StyledVaultInfo>\n <StyledVaultName>{checkedVault.name}</StyledVaultName>\n <StyledVaultDesc>This vault manages a single ERC721 LP position in the {checkedVault.token0}/{checkedVault.token1} V3 pool (0.05%). The LP position is staked in Hyperlock to earn Hyperlock Points and Thruster Points.</StyledVaultDesc>\n </StyledVaultInfo>\n <StyledVaultViewButton\n onClick={() => {\n windowOpen(\"https://blastexplorer.io/address/\" + checkedVault.strategyAddress, \"_blank\")\n }}\n >View Blastscan</StyledVaultViewButton>\n\n </StyledVaultTop>\n <StyledVaultBottom>\n <StyledVaultBottomRow>\n <StyledVaulBottomMessage>\n <StyledVaulBottomMessageLabel>Protocol</StyledVaulBottomMessageLabel>\n <StyledVaulBottomMessageValue>{checkedVault.protocol}</StyledVaulBottomMessageValue>\n </StyledVaulBottomMessage>\n <StyledVaulBottomMessage>\n <StyledVaulBottomMessageLabel>Type</StyledVaulBottomMessageLabel>\n <StyledVaulBottomMessageValue>{checkedVault.type}</StyledVaulBottomMessageValue>\n </StyledVaulBottomMessage>\n <StyledVaulBottomMessage>\n <StyledVaulBottomMessageLabel>Total Deposited</StyledVaulBottomMessageLabel>\n <StyledVaulBottomMessageValue>{Big(checkedVault.pointList[0]?.value ?? 0).toNumber().toLocaleString('en-us', {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2\n })} {checkedVault.token0}</StyledVaulBottomMessageValue>\n </StyledVaulBottomMessage>\n <StyledVaulBottomMessage>\n <StyledVaulBottomMessageLabel>Accepted Asset</StyledVaulBottomMessageLabel>\n <StyledVaulBottomMessageValue>{checkedVault.token0}</StyledVaulBottomMessageValue>\n </StyledVaulBottomMessage>\n </StyledVaultBottomRow>\n <StyledVaultBottomRow>\n <StyledVaulBottomMessage>\n <StyledVaulBottomMessageLabel>Earns</StyledVaulBottomMessageLabel>\n <StyledVaulBottomMessageValue>\n <StyledEarnImageContainer>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\">\n <circle cx=\"11\" cy=\"11\" r=\"10.5\" fill=\"#2A135D\" stroke=\"black\" />\n </svg>\n <StyledEarnCoverImage src={checkedVault.icon} />\n </StyledEarnImageContainer>\n {\n checkedVault.pointList.findIndex(vault => vault.label === \"Ethena Sats\") > -1 && (\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://app.juice.finance/images/logos/protocols/ethena.svg\" />\n </StyledEarnImageContainer>\n )\n }\n {\n checkedVault.pointList.findIndex(vault => vault.label === \"Eigen Layer Points\") > -1 && (\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://ipfs.near.social/ipfs/bafkreif5l4sfmwpqzpe7gr4res6lv3orsm7wxtovfr3n36wznbybeiy2ku\" />\n </StyledEarnImageContainer>\n )\n }\n {\n checkedVault.pointList.findIndex(vault => vault.label === \"Thruster Points\") > -1 && (\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://ipfs.near.social/ipfs/bafkreiczl353jhnbfkdc2atubwbmscagx4tar4mxmua3ehtknvx2xbjdoq\" />\n </StyledEarnImageContainer>\n )\n }\n {\n checkedVault.pointList.findIndex(vault => vault.label === \"Hyperlock Points\") > -1 && (\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://ipfs.near.social/ipfs/bafkreif3crbizpmljlpvfwfkhx5la54asfj5uizmyzjcnlhppvngcebl7e\" />\n </StyledEarnImageContainer>\n )\n }\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://ipfs.near.social/ipfs/bafkreibmykmcqzkp4fsqvqhiy7wbcz4wht2qezgv4bzpduaeiup6xnsvii\" />\n </StyledEarnImageContainer>\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://ipfs.near.social/ipfs/bafkreia2ihu3szpxrtc4ewtkqxef4dvnvvnouymplexi3dbjw425dvfoey\" />\n </StyledEarnImageContainer>\n <StyledEarnImageContainer>\n <StyledEarnImage src=\"https://ipfs.near.social/ipfs/bafkreibeotwrmejkr4r2hdjjfhia6nv2ok6wsgvu2z7tvqjcxia3fquvyu\" />\n </StyledEarnImageContainer>\n </StyledVaulBottomMessageValue>\n </StyledVaulBottomMessage>\n </StyledVaultBottomRow>\n </StyledVaultBottom>\n </StyledVault>\n </StyledContainerTop>\n <StyledContainerBottom>\n <StyledDepositOrWithdraw>\n <StyledDepositOrWithdrawTop>\n <StyledDepositOrWithdrawTopButton\n className={state.isDeposit ? \"active\" : \"\"}\n onClick={() => {\n State.update({\n isDeposit: true\n })\n }}\n >Deposit</StyledDepositOrWithdrawTopButton>\n <StyledDepositOrWithdrawTopButton\n className={!state.isDeposit ? \"active\" : \"\"}\n onClick={() => {\n State.update({\n isDeposit: false\n })\n }}\n >Withdraw</StyledDepositOrWithdrawTopButton>\n </StyledDepositOrWithdrawTop>\n <StyledDepositOrWithdrawBottom>\n {\n !state.isDeposit ? (\n <StyledWithdrawContainer>\n <StyledDepositOrWithdrawInput>\n <StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputTopType>Withdraw</StyledDepositOrWithdrawInputTopType>\n <StyledDepositOrWithdrawInputTopBalance>\n Available: <span onClick={handleMax}>{Big(state?.withdrawBalance ?? 0).toFixed(6)}</span>\n </StyledDepositOrWithdrawInputTopBalance>\n </StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputBottom>\n <StyledDepositOrWithdrawInputBottomInput type=\"number\" placeholder=\"0.0\" value={state.inWithdrawAmount} onChange={event => handleInAmountChange(event.target.value)} />\n <StyledDepositOrWithdrawInputBottomSymbol>\n <StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolImage src={ICON_MAP[checkedVault.token1]} />\n </StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolTxt>{checkedVault.token1}</StyledDepositOrWithdrawInputBottomSymbolTxt>\n </StyledDepositOrWithdrawInputBottomSymbol>\n </StyledDepositOrWithdrawInputBottom>\n </StyledDepositOrWithdrawInput>\n <StyledDepositOrWithdrawInput\n style={{\n marginTop: 12,\n background: \"#2E3142\"\n }}\n >\n <StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputTopType>Expected</StyledDepositOrWithdrawInputTopType>\n </StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputBottom>\n <StyledDepositOrWithdrawInputBottomInputTxt>{handleGetSlippageOutAmount(state?.outWithdrawAmount, state.inSlippageAmount)}</StyledDepositOrWithdrawInputBottomInputTxt>\n <StyledDepositOrWithdrawInputBottomSymbol>\n <StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolImage src={ICON_MAP[checkedVault.token0]} />\n </StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolTxt>{checkedVault.token0}</StyledDepositOrWithdrawInputBottomSymbolTxt>\n </StyledDepositOrWithdrawInputBottomSymbol>\n </StyledDepositOrWithdrawInputBottom>\n </StyledDepositOrWithdrawInput>\n <StyledSlippage>\n <StyledSlippageL>\n <StyledSlippageLBox\n onClick={() => {\n State.update({\n showSlippage: true\n })\n }}>\n <StyledSlippageTxt>Slippage</StyledSlippageTxt>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\">\n <path d=\"M5.5781 0.172943C5.77394 0.059646 5.99609 0 6.22222 0C6.44836 0 6.67051 0.059646 6.86634 0.172943L11.8003 3.02769C11.9962 3.14098 12.1588 3.30393 12.2718 3.50016C12.3849 3.69639 12.4444 3.91899 12.4444 4.14558V9.85442C12.4444 10.081 12.3849 10.3036 12.2718 10.4998C12.1588 10.6961 11.9962 10.859 11.8003 10.9723L6.86634 13.8271C6.67051 13.9404 6.44836 14 6.22222 14C5.99609 14 5.77394 13.9404 5.5781 13.8271L0.644122 10.9723C0.448289 10.859 0.285667 10.6961 0.1726 10.4998C0.0595335 10.3036 5.74368e-06 10.081 0 9.85442V4.14558C5.74368e-06 3.91899 0.0595335 3.69639 0.1726 3.50016C0.285667 3.30393 0.448289 3.14098 0.644122 3.02769L5.5781 0.172943ZM6.22222 1.29083L1.28824 4.14558V9.85442L6.22222 12.7092L11.1562 9.85442V4.14558L6.22222 1.29083ZM6.22222 4.41827C6.90555 4.41827 7.56089 4.69027 8.04408 5.17444C8.52726 5.65861 8.79871 6.31528 8.79871 7C8.79871 7.68472 8.52726 8.34139 8.04408 8.82556C7.56089 9.30973 6.90555 9.58173 6.22222 9.58173C5.5389 9.58173 4.88355 9.30973 4.40037 8.82556C3.91718 8.34139 3.64573 7.68472 3.64573 7C3.64573 6.31528 3.91718 5.65861 4.40037 5.17444C4.88355 4.69027 5.5389 4.41827 6.22222 4.41827ZM6.22222 5.70914C6.05305 5.70914 5.88553 5.74253 5.72923 5.8074C5.57294 5.87227 5.43092 5.96735 5.3113 6.08722C5.19167 6.20709 5.09678 6.34939 5.03204 6.50601C4.9673 6.66262 4.93398 6.83048 4.93398 7C4.93398 7.16952 4.9673 7.33738 5.03204 7.49399C5.09678 7.65061 5.19167 7.79291 5.3113 7.91278C5.43092 8.03265 5.57294 8.12773 5.72923 8.1926C5.88553 8.25748 6.05305 8.29086 6.22222 8.29086C6.56389 8.29086 6.89156 8.15486 7.13315 7.91278C7.37474 7.6707 7.51047 7.34236 7.51047 7C7.51047 6.65764 7.37474 6.32931 7.13315 6.08722C6.89156 5.84514 6.56389 5.70914 6.22222 5.70914Z\" fill=\"#979ABE\" />\n </svg>\n </StyledSlippageLBox>\n {\n state.showSlippage && (\n <>\n <StyledMaxSlippageContainer>\n <StyledMaxSlippageTop>Max. Slippage</StyledMaxSlippageTop>\n <StyledMaxSlippageBottom>\n <StyledMaxSlippageAutoButton onClick={handleAuto}>Auto</StyledMaxSlippageAutoButton>\n <StyledMaxSlippageInputContainer className={state.slippageError ? \"error\" : \"\"}>\n <StyledMaxSlippageInput type=\"number\" value={state.inSlippageAmount} onChange={event => handleSlippageChange(event.target.value)} />\n <StyledMaxSlippagePercentage>%</StyledMaxSlippagePercentage>\n </StyledMaxSlippageInputContainer>\n </StyledMaxSlippageBottom>\n </StyledMaxSlippageContainer>\n <StyledMaxSlippageCover onClick={() => {\n State.update({\n showSlippage: false\n })\n }} />\n </>\n )\n }\n </StyledSlippageL>\n <StyledSlippageR>{state.inSlippageAmount}%</StyledSlippageR>\n </StyledSlippage>\n {\n isWithdrawInSufficient ? (\n <StyledDepositOrWithdrawButton disabled>InSufficient Balance</StyledDepositOrWithdrawButton>\n ) : state.withdrawLoading ? (\n <StyledDepositOrWithdrawButton disabled>\n <Widget src={\"bluebiu.near/widget/Liquidity.Bridge.Loading\"} />\n </StyledDepositOrWithdrawButton>\n ) : state.inWithdrawAmount > 0 ? (\n <StyledDepositOrWithdrawButton onClick={handleWithdraw}>Widthdraw</StyledDepositOrWithdrawButton>\n ) : (\n <StyledDepositOrWithdrawButton disabled>Widthdraw</StyledDepositOrWithdrawButton>\n )\n }\n </StyledWithdrawContainer>\n ) : (!isCreatedAccount || Number(state?.depositBalance) === 0) ? (\n <StyledEmptyContainer>\n <StyledEmptyImage src=\"https://ipfs.near.social/ipfs/bafkreicbbj3fufcper54zhf3g5siznyfsb3lry2f74vhyejzj2qd2qcory\" />\n <StyledEmptyTips>\n No {checkedVault.token0} available to deposit.<br />Create an Account and borrow {checkedVault.token0} to deposit into the vault.\n </StyledEmptyTips>\n <StyledDepositOrWithdrawButton onClick={() => {\n onChangeCategoryIndex(1)\n }}>Manage Account</StyledDepositOrWithdrawButton>\n </StyledEmptyContainer>\n ) : (\n <StyledDepositContainer>\n <StyledDepositOrWithdrawInput>\n <StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputTopType>Deposit</StyledDepositOrWithdrawInputTopType>\n <StyledDepositOrWithdrawInputTopBalance>\n Available: <span onClick={handleMax}>{Big(state?.depositBalance ?? 0).toFixed(6)}</span>\n </StyledDepositOrWithdrawInputTopBalance>\n </StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputBottom>\n <StyledDepositOrWithdrawInputBottomInput type=\"number\" placeholder=\"0.0\" value={state.inDepositAmount} onChange={event => handleInAmountChange(event.target.value)} />\n <StyledDepositOrWithdrawInputBottomSymbol>\n <StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolImage src={ICON_MAP[checkedVault.token0]} />\n </StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolTxt>{checkedVault.token0}</StyledDepositOrWithdrawInputBottomSymbolTxt>\n </StyledDepositOrWithdrawInputBottomSymbol>\n </StyledDepositOrWithdrawInputBottom>\n </StyledDepositOrWithdrawInput>\n <StyledDepositOrWithdrawInput\n style={{\n marginTop: 12,\n background: \"#2E3142\"\n }}\n >\n <StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputTopType>Expected</StyledDepositOrWithdrawInputTopType>\n </StyledDepositOrWithdrawInputTop>\n <StyledDepositOrWithdrawInputBottom>\n <StyledDepositOrWithdrawInputBottomInputTxt>{handleGetSlippageOutAmount(state?.outDepositAmount, state?.inSlippageAmount)}</StyledDepositOrWithdrawInputBottomInputTxt>\n <StyledDepositOrWithdrawInputBottomSymbol>\n <StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolImage src={ICON_MAP[checkedVault.token1]} />\n </StyledDepositOrWithdrawInputBottomSymbolImageContainer>\n <StyledDepositOrWithdrawInputBottomSymbolTxt>{checkedVault.token1}</StyledDepositOrWithdrawInputBottomSymbolTxt>\n </StyledDepositOrWithdrawInputBottomSymbol>\n </StyledDepositOrWithdrawInputBottom>\n </StyledDepositOrWithdrawInput>\n <StyledSlippage>\n <StyledSlippageL>\n <StyledSlippageLBox\n onClick={() => {\n State.update({\n showSlippage: true\n })\n }}>\n <StyledSlippageTxt>Slippage</StyledSlippageTxt>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\">\n <path d=\"M5.5781 0.172943C5.77394 0.059646 5.99609 0 6.22222 0C6.44836 0 6.67051 0.059646 6.86634 0.172943L11.8003 3.02769C11.9962 3.14098 12.1588 3.30393 12.2718 3.50016C12.3849 3.69639 12.4444 3.91899 12.4444 4.14558V9.85442C12.4444 10.081 12.3849 10.3036 12.2718 10.4998C12.1588 10.6961 11.9962 10.859 11.8003 10.9723L6.86634 13.8271C6.67051 13.9404 6.44836 14 6.22222 14C5.99609 14 5.77394 13.9404 5.5781 13.8271L0.644122 10.9723C0.448289 10.859 0.285667 10.6961 0.1726 10.4998C0.0595335 10.3036 5.74368e-06 10.081 0 9.85442V4.14558C5.74368e-06 3.91899 0.0595335 3.69639 0.1726 3.50016C0.285667 3.30393 0.448289 3.14098 0.644122 3.02769L5.5781 0.172943ZM6.22222 1.29083L1.28824 4.14558V9.85442L6.22222 12.7092L11.1562 9.85442V4.14558L6.22222 1.29083ZM6.22222 4.41827C6.90555 4.41827 7.56089 4.69027 8.04408 5.17444C8.52726 5.65861 8.79871 6.31528 8.79871 7C8.79871 7.68472 8.52726 8.34139 8.04408 8.82556C7.56089 9.30973 6.90555 9.58173 6.22222 9.58173C5.5389 9.58173 4.88355 9.30973 4.40037 8.82556C3.91718 8.34139 3.64573 7.68472 3.64573 7C3.64573 6.31528 3.91718 5.65861 4.40037 5.17444C4.88355 4.69027 5.5389 4.41827 6.22222 4.41827ZM6.22222 5.70914C6.05305 5.70914 5.88553 5.74253 5.72923 5.8074C5.57294 5.87227 5.43092 5.96735 5.3113 6.08722C5.19167 6.20709 5.09678 6.34939 5.03204 6.50601C4.9673 6.66262 4.93398 6.83048 4.93398 7C4.93398 7.16952 4.9673 7.33738 5.03204 7.49399C5.09678 7.65061 5.19167 7.79291 5.3113 7.91278C5.43092 8.03265 5.57294 8.12773 5.72923 8.1926C5.88553 8.25748 6.05305 8.29086 6.22222 8.29086C6.56389 8.29086 6.89156 8.15486 7.13315 7.91278C7.37474 7.6707 7.51047 7.34236 7.51047 7C7.51047 6.65764 7.37474 6.32931 7.13315 6.08722C6.89156 5.84514 6.56389 5.70914 6.22222 5.70914Z\" fill=\"#979ABE\" />\n </svg>\n </StyledSlippageLBox>\n {\n state.showSlippage && (\n <>\n <StyledMaxSlippageContainer>\n <StyledMaxSlippageTop>Max. Slippage</StyledMaxSlippageTop>\n <StyledMaxSlippageBottom>\n <StyledMaxSlippageAutoButton onClick={handleAuto}>Auto</StyledMaxSlippageAutoButton>\n <StyledMaxSlippageInputContainer className={state.slippageError ? \"error\" : \"\"}>\n <StyledMaxSlippageInput type=\"number\" value={state.inSlippageAmount} onChange={event => handleSlippageChange(event.target.value)} />\n <StyledMaxSlippagePercentage>%</StyledMaxSlippagePercentage>\n </StyledMaxSlippageInputContainer>\n </StyledMaxSlippageBottom>\n </StyledMaxSlippageContainer>\n <StyledMaxSlippageCover onClick={() => {\n State.update({\n showSlippage: false\n })\n }} />\n </>\n )\n }\n </StyledSlippageL>\n <StyledSlippageR>{state.inSlippageAmount}%</StyledSlippageR>\n </StyledSlippage>\n {\n isDepositInSufficient ? (\n <StyledDepositOrWithdrawButton disabled>InSufficient Balance</StyledDepositOrWithdrawButton>\n ) : state.depositLoading ? (\n <StyledDepositOrWithdrawButton disabled>\n <Widget src={\"bluebiu.near/widget/Liquidity.Bridge.Loading\"} />\n </StyledDepositOrWithdrawButton>\n ) : state.inDepositAmount > 0 ? (\n <StyledDepositOrWithdrawButton onClick={handleDeposit}>Deposit</StyledDepositOrWithdrawButton>\n ) : (\n <StyledDepositOrWithdrawButton disabled>Deposit</StyledDepositOrWithdrawButton>\n )\n }\n </StyledDepositContainer>\n )\n }\n\n </StyledDepositOrWithdrawBottom>\n </StyledDepositOrWithdraw>\n <StyledOverviewContainer>\n <StyledPostionOverview>\n <StyledOverviewTitle>Position Overview</StyledOverviewTitle>\n <StyledOverviewList>\n <StyledOverview>\n <StyledOverviewLabel>Deposited {checkedVault.token0}</StyledOverviewLabel>\n <StyledOverviewValue>{state.positionOverview?.positionValue}</StyledOverviewValue>\n </StyledOverview>\n <StyledOverview>\n <StyledOverviewLabel>Available LP Poistion</StyledOverviewLabel>\n {\n state?.withdrawBalance && (\n <StyledOverviewValue>{Big(state?.withdrawBalance ?? 0).toFixed(6)}</StyledOverviewValue>\n )\n }\n </StyledOverview>\n </StyledOverviewList>\n </StyledPostionOverview>\n <StyledVaultOverview>\n <StyledOverviewTitle>Vault Overview</StyledOverviewTitle>\n <StyledOverviewList>\n <StyledOverview>\n <StyledOverviewLabel>Deposit Fee</StyledOverviewLabel>\n <StyledOverviewValue>{symbol === 'USDB' ? '0.5' : '1'}%</StyledOverviewValue>\n </StyledOverview>\n <StyledOverview>\n <StyledOverviewLabel>Available Vault Space ({checkedVault.token0})</StyledOverviewLabel>\n <StyledOverviewValue>{state?.vaultOverview?.availableVaultSpace}</StyledOverviewValue>\n </StyledOverview>\n <StyledOverview>\n <StyledOverviewLabel>Total Deposit Cap ({checkedVault.token0})</StyledOverviewLabel>\n <StyledOverviewValue>{state?.vaultOverview?.totalDepositCap}</StyledOverviewValue>\n </StyledOverview>\n <StyledOverview>\n <StyledOverviewLabel>Max Deposit Size per Account ({checkedVault.token0})</StyledOverviewLabel>\n <StyledOverviewValue>{state?.vaultOverview?.maxDepositPerAccount}</StyledOverviewValue>\n </StyledOverview>\n </StyledOverviewList>\n </StyledVaultOverview>\n <StyledOverviewButtonContainer>\n {\n checkedVault.vaultAddress && (\n <>\n <StyledOverviewButton onClick={handleExplore}>Explore\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\n <path d=\"M1 12L12 1M12 1H3M12 1V9.5\" stroke=\"white\" />\n </svg>\n </StyledOverviewButton>\n <StyledOverviewButton onClick={handleChart}>Chart\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\n <path d=\"M1 12L12 1M12 1H3M12 1V9.5\" stroke=\"white\" />\n </svg>\n </StyledOverviewButton>\n </>\n )\n }\n </StyledOverviewButtonContainer>\n </StyledOverviewContainer>\n </StyledContainerBottom>\n </StyledContainer>\n)" }, "ZKEVM-all-in-one": { "": "const Layout = styled.div``;\n\nconst Container = styled.div`\n width: 100%;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n\n .flex-grow {\n flex-grow: 1;\n }\n .contentOut {\n /* padding-top: 25px;\n margin-left: 35px; */\n }\n .contentOut p {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 20px;\n color: #ffffff;\n }\n @media (max-width: 900px) {\n display: grid;\n .contentOut {\n padding: 0;\n margin: 0 0 36px 0;\n }\n .contentOut p {\n display: none;\n }\n }\n`;\n\nconst MenuContainer = styled.div`\n margin-right: 35px;\n .item {\n display: flex;\n align-items: center;\n padding-left: 40px;\n width: 180px;\n height: 64px;\n font-weight: 500;\n font-size: 16px;\n color: #7e8a93;\n cursor: pointer;\n margin-bottom: 2px;\n border-right: \"none\";\n transition: 0.5s;\n border-radius: 16px;\n :hover {\n background: linear-gradient(270deg, #373a53 0%, rgba(55, 58, 83, 0) 100%);\n color: #ffffff;\n }\n }\n .item.active {\n color: #ffffff;\n background: linear-gradient(270deg, #373a53 0%, rgba(55, 58, 83, 0) 100%);\n }\n .item.disable {\n cursor: not-allowed;\n }\n .icon {\n width: 26px;\n }\n @media (max-width: 900px) {\n margin: 0;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 16px;\n background: #222436;\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0 16px;\n .item {\n width: auto;\n padding: 0;\n height: 76px;\n display: grid;\n text-align: center;\n align-items: center;\n span {\n margin-left: 26px;\n margin-bottom: -28px;\n }\n }\n .item.active {\n background-image: none;\n color: #e9f456;\n border-color: transparent;\n }\n }\n`;\n\nconst activeMenu =\n Storage.privateGet(\"zkevmCachedActiveMenu\") || props.defaultTab || \"Bridge\";\n\nfunction changeTab(menu) {\n Storage.privateSet(\"zkevmCachedActiveMenu\", menu);\n}\n\n// svg icon start\nconst headIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"16\"\n viewBox=\"0 0 18 16\"\n fill=\"none\"\n >\n <path\n d=\"M17 9C17.5523 9 18 8.55228 18 8C18 7.44772 17.5523 7 17 7V9ZM0.292892 7.29289C-0.0976315 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM17 7L1 7V9L17 9V7Z\"\n fill=\"#979ABE\"\n />\n </svg>\n);\n\nconst bridgeIcon = (\n <svg\n width=\"19\"\n height=\"18\"\n viewBox=\"0 0 19 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <mask\n id=\"mask0_1328_7364\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"0\"\n width=\"18\"\n height=\"18\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.7684 3.3323C16.5569 2.49226 15.0859 2 13.5 2C9.35786 2 6 5.35786 6 9.5C6 13.6421 9.35786 17 13.5 17C13.9539 17 14.3984 16.9597 14.8302 16.8824C13.3983 17.5946 11.7518 18 10 18C4.47715 18 0 13.9706 0 9C0 4.02944 4.47715 0 10 0C13.1361 0 15.935 1.29925 17.7684 3.3323Z\"\n fill=\"currentColor\"\n />\n </mask>\n <g mask=\"url(#mask0_1328_7364)\">\n <rect width=\"19\" height=\"11\" fill=\"currentColor\" />\n </g>\n <mask\n id=\"mask1_1328_7364\"\n maskUnits=\"userSpaceOnUse\"\n x=\"8\"\n y=\"4\"\n width=\"11\"\n height=\"13\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.99975 5.42751C9.28439 5.37792 9.5772 5.35206 9.87604 5.35206C12.6763 5.35206 14.9463 7.62209 14.9463 10.4223C14.9463 13.1425 12.8042 15.3623 10.1149 15.487C10.9532 15.9225 11.9057 16.1686 12.9157 16.1686C16.276 16.1686 19 13.4446 19 10.0843C19 6.72403 16.276 4 12.9157 4C11.4242 4 10.058 4.5367 8.99975 5.42751Z\"\n fill=\"currentColor\"\n />\n </mask>\n <g mask=\"url(#mask1_1328_7364)\">\n <rect\n width=\"9.99974\"\n height=\"6.66649\"\n transform=\"matrix(-1 0 0 1 19 4)\"\n fill=\"currentColor\"\n />\n </g>\n </svg>\n);\n\nconst swapIcon = (\n <svg\n width=\"16\"\n height=\"14\"\n viewBox=\"0 0 16 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11.2571 7.76056C11.1005 7.61142 10.8919 7.52941 10.6756 7.53205C10.4594 7.53468 10.2527 7.62176 10.0998 7.77467C9.94692 7.92758 9.85984 8.13422 9.85721 8.35045C9.85457 8.56669 9.93658 8.77539 10.0857 8.93199L10.7343 9.58056H4.41429C3.68252 9.5798 2.98095 9.28877 2.46351 8.77134C1.94607 8.2539 1.65505 7.55232 1.65429 6.82056C1.65416 6.18756 1.83563 5.56781 2.17715 5.03484C2.29574 4.85033 2.33617 4.62626 2.28955 4.41193C2.24294 4.19761 2.11309 4.01058 1.92858 3.89199C1.74406 3.7734 1.51999 3.73296 1.30567 3.77958C1.09134 3.82619 0.904308 3.95604 0.785718 4.14056C0.271637 4.93979 -0.00115865 5.87027 3.69903e-06 6.82056C0.00151569 7.99083 0.467076 9.11275 1.29459 9.94026C2.1221 10.7678 3.24401 11.2333 4.41429 11.2348H10.6486L10.0771 11.8063C9.93601 11.9643 9.86075 12.1703 9.86684 12.3821C9.87293 12.5939 9.95991 12.7953 10.1099 12.9449C10.2599 13.0945 10.4615 13.181 10.6733 13.1866C10.8851 13.1921 11.0909 13.1164 11.2486 12.9748L13.2657 10.9577C13.3425 10.881 13.4034 10.7899 13.445 10.6897C13.4866 10.5894 13.508 10.4819 13.508 10.3734C13.508 10.2649 13.4866 10.1574 13.445 10.0572C13.4034 9.9569 13.3425 9.86582 13.2657 9.78913L11.2571 7.76056Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M11.5857 2.132H4.80001L5.55144 1.38057C5.69258 1.22258 5.76784 1.01652 5.76175 0.804751C5.75566 0.592982 5.66868 0.39159 5.51869 0.241968C5.3687 0.0923464 5.1671 0.00586073 4.95532 0.000287087C4.74354 -0.00528655 4.53766 0.0704751 4.38001 0.212001L2.36287 2.22914C2.28607 2.30583 2.22514 2.39691 2.18357 2.49717C2.142 2.59743 2.12061 2.7049 2.12061 2.81343C2.12061 2.92196 2.142 3.02943 2.18357 3.12969C2.22514 3.22995 2.28607 3.32102 2.36287 3.39771L4.38001 5.41486C4.53766 5.55638 4.74354 5.63214 4.95532 5.62657C5.1671 5.621 5.3687 5.53451 5.51869 5.38489C5.66868 5.23527 5.75566 5.03388 5.76175 4.82211C5.76784 4.61034 5.69258 4.40428 5.55144 4.24629L5.09144 3.78629H11.5857C12.3175 3.78704 13.0191 4.07807 13.5365 4.59551C14.0539 5.11294 14.345 5.81452 14.3457 6.54629C14.3463 7.19597 14.1544 7.83126 13.7943 8.372C13.6748 8.5549 13.6323 8.77761 13.6762 8.99165C13.7201 9.20569 13.8467 9.39374 14.0286 9.51486C14.1644 9.60396 14.3233 9.65161 14.4857 9.652C14.6223 9.6521 14.7568 9.6182 14.877 9.55336C14.9972 9.48851 15.0994 9.39477 15.1743 9.28057C15.7132 8.47055 16.0005 7.51921 16 6.54629C15.9985 5.37601 15.5329 4.2541 14.7054 3.42658C13.8779 2.59907 12.756 2.13351 11.5857 2.132Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst liquidityIcon = (\n <svg\n width=\"20\"\n height=\"18\"\n viewBox=\"0 0 20 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.67689 9.5C3.42392 8.81656 3.28571 8.07718 3.28571 7.30542C3.28571 3.82303 6.09992 1 9.57142 1C13.0429 1 15.8571 3.82303 15.8571 7.30542C15.8571 8.93781 15.2388 10.4253 14.2242 11.5451\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M1 10.5189C8.5 6.99986 11 14 18.1429 10.5189M1 15.5C8.5 11.9809 11 18.9811 18.1429 15.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n);\nconst lendingIcon = (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.30875 5.99853C4.30742 5.41955 4.42014 4.84597 4.64048 4.31055C4.86082 3.77513 5.18445 3.28836 5.59292 2.87801C6.00138 2.46767 6.48666 2.1418 7.02107 1.91901C7.55547 1.69621 8.12852 1.58086 8.7075 1.57953C11.1375 1.57953 13.1062 3.5584 13.1062 5.99853C13.1071 6.78301 12.8991 7.55358 12.5037 8.23111C12.1083 8.90865 11.5397 9.46875 10.8562 9.8539C10.6313 10.5014 10.2105 11.0629 9.65211 11.4604C9.09372 11.8579 8.42545 12.0718 7.74 12.0724H5.5665V10.5267H7.74225C8.71425 10.5267 9.50175 9.73578 9.50175 8.75928V8.64903H3.22763L3.20288 14.7668H12.9893C13.9601 14.7668 14.7488 13.9748 14.7488 12.9994L14.7724 10.8574H12.3165V9.31165H16.3125L16.2878 12.9994C16.2892 13.876 15.9427 14.7174 15.3242 15.3386C14.7057 15.9599 13.8659 16.3101 12.9893 16.3125H1.66275L1.6875 7.10215H4.44713C4.35496 6.74153 4.30847 6.37075 4.30875 5.99853ZM6.06713 7.10215H11.0396V7.65903C11.3715 7.1899 11.5673 6.61728 11.5673 5.99853C11.5681 5.62215 11.4949 5.24928 11.3516 4.90122C11.2084 4.55317 10.9979 4.23674 10.7324 3.97003C10.4668 3.70331 10.1513 3.49153 9.80386 3.34678C9.45643 3.20202 9.08388 3.12714 8.7075 3.1264C8.33112 3.12714 7.95857 3.20202 7.61114 3.34678C7.2637 3.49153 6.94819 3.70331 6.68262 3.97003C6.41705 4.23674 6.20664 4.55317 6.06339 4.90122C5.92014 5.24928 5.84686 5.62215 5.84775 5.99853C5.84775 6.3889 5.9265 6.76353 6.06713 7.10215Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst { swapConfig, ...restProps } = props;\n\nreturn (\n <Layout>\n <Container>\n <MenuContainer>\n <div\n onClick={() => {\n changeTab(\"Bridge\");\n }}\n className={`item ${activeMenu == \"Bridge\" ? \"active\" : \"\"}`}\n >\n <span className=\"icon\">{bridgeIcon}</span>\n Bridge\n </div>\n <div\n onClick={() => {\n changeTab(\"swap\");\n }}\n className={`item ${activeMenu == \"swap\" ? \"active\" : \"\"}`}\n >\n <span className=\"icon\">{swapIcon}</span>\n Swap\n </div>\n\n <div\n className={`item ${activeMenu == \"Liquidity\" ? \"active\" : \"\"}`}\n onClick={() => {\n changeTab(\"Liquidity\");\n }}\n >\n <span className=\"icon\">{liquidityIcon}</span>\n Liquidity\n </div>\n </MenuContainer>\n <div className=\"flex-grow contentOut\">\n {activeMenu == \"Bridge\" ? (\n <>\n <Widget\n src=\"guessme.near/widget/ZKEVMSwap.zkevm-bridge\"\n props={{\n layout: \"center\",\n ...restProps,\n }}\n />\n </>\n ) : null}\n {activeMenu == \"swap\" ? (\n <>\n <Widget\n src=\"bluebiu.near/widget/PolygonZkevm.Swap.Dex\"\n props={{\n layout: \"center\",\n ...swapConfig,\n ...restProps,\n }}\n />\n </>\n ) : null}\n {activeMenu == \"Liquidity\" ? (\n <>\n <Widget\n src=\"bluebiu.near/widget/ZKEVM.GAMMA\"\n props={{ ...restProps }}\n />\n </>\n ) : null}\n </div>\n </Container>\n </Layout>\n);\n", "metadata": { "image": { "ipfs_cid": "bafkreiaednvljfk5splm5p3eisbkr3v5laiazldxqirtxs5koimckebsyu" }, "name": "Polygon zkEVM All-in-one", "tags": { "dexes": "" } } } } } } }