Transaction: BstVLtX...emau

{ "data": { "bluebiu.near": { "widget": { "Liquidity.Connector.STEAKHUT": { "": "\nconst StyledColumn = styled.div`\n display: flex;\n flex-direction: column;\n`\nconst StyledRow = styled.div`\n display: flex;\n flex-direction: row;\n`\n\nconst StyledVaultImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n img {\n width: 26px;\n height: 26px;\n }\n`\nconst SvgIcon = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n &.icon-right {\n position: absolute;\n right: 28px;\n top: 50%;\n transform: translateY(-50%);\n\n &.rotate {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n`\nconst StyledDashedUndeline = styled.div`\n padding: 2px 0;\n border-bottom: 1px dashed #979ABE;\n`\nconst TdTxt = styled.div`\n color: #FFF;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n &.gray {\n color: #979ABE;\n font-size: 12px;\n }\n`\nconst PoolPercentage = styled.div`\n padding: 3px 8px;\n border-radius: 24px;\n background: rgba(151, 154, 190, 0.1);\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n\nconst StrategyTxt = styled.div`\n padding: 7px 10px;\n border-radius: 6px;\n background: rgba(151, 154, 190, 0.1);\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 TitleText = styled.div`\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 32px;\n color: #ffffff;\n @media (max-width: 900px) {\n display: none;\n }\n`;\nconst ContainerLogin = styled.div`\n display: flex;\n max-width: 500px;\n\n flex-direction: column;\n margin: 80px auto auto auto;\n\n .web3-connect {\n width: 480px;\n height: 60px;\n border-radius: 10px;\n background-color: #fff;\n color: #0f1126;\n font-size: 18px;\n font-weight: 500;\n border: none;\n margin-top: 20px;\n }\n\n @media (max-width: 736px) {\n max-width: 100%;\n .web3-connect {\n width: 100%;\n\n font-size: 16px;\n height: 40px;\n }\n }\n`;\nState.init({\n allData: null,\n loading: false,\n dataList: [],\n filterList: [],\n dataIndex: -1,\n categoryIndex: 0,\n chainIndex: 0,\n token: '',\n})\nconst IconRight = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"10\" viewBox=\"0 0 8 10\" fill=\"none\">\n <path d=\"M7.18407 4.21913C7.68448 4.61945 7.68448 5.38054 7.18407 5.78087L2.28485 9.70024C1.63009 10.2241 0.660156 9.75788 0.660156 8.91937L0.660156 1.08062C0.660156 0.242118 1.63009 -0.224055 2.28485 0.299756L7.18407 4.21913Z\" fill=\"#979ABE\" />\n </svg>\n)\nconst {\n toast,\n CHAIN_LIST,\n multicallAddress,\n dexConfig,\n curChain,\n isChainSupported,\n onSwitchChain,\n addAction,\n connectProps,\n prices,\n} = props\n// const CONNECT_PROPS = {\n// ...props.connectProps,\n// chainId: MAINNET_CHAIN_ID,\n// chainName: CHAIN_CONFIG.chainName,\n// noAccountTips: `${CHAIN_CONFIG.chainName} Liquidity`,\n// wrongNetworkTips: `To proceed, kindly switch to ${CHAIN_CONFIG.chainName} Chain.`,\n// };\n\nconst formatFiat = (value) => {\n const number = Number(value).toLocaleString(\"en\", {\n currency: \"USD\",\n style: \"currency\",\n compactDisplay: \"short\",\n notation: \"compact\",\n maximumFractionDigits: 2,\n });\n return number;\n};\n\nconst formatPercent = (value) => {\n return `${Number(value * 100).toLocaleString(\"en\", {\n maximumFractionDigits: 2,\n })}%`;\n};\n\nconst sender = Ethers.send(\"eth_requestAccounts\", [])[0];\nif (!sender) {\n return (\n <Widget\n style={dexConfig.theme}\n src=\"bluebiu.near/widget/Arbitrum.Swap.ConnectButton\"\n props={{\n ...connectProps,\n isWrongNetwork: false,\n }}\n />\n );\n}\n\nconst {\n pairs,\n addresses,\n proxyAddress,\n ALL_DATA_URL,\n ICON_VAULT_MAP,\n USER_DATA_BASE,\n LAST_SNAP_SHOT_DATA_URL,\n} = dexConfig\n// function fetchAllData() {\n// State.update({\n// loading: true\n// });\n\n// asyncFetch(ALL_DATA_URL, {\n// method: 'POST',\n// body: JSON.stringify({\n// \"variables\": {},\n// \"query\": \"{\\n vaults(first: 100, where: {IsWhitelisted: true}) {\\n id\\n underlyingX\\n underlyingY\\n tokenX {\\n id\\n name\\n symbol\\n priceUSD\\n decimals\\n __typename\\n }\\n tokenY {\\n id\\n name\\n symbol\\n priceUSD\\n decimals\\n __typename\\n }\\n name\\n shares\\n strategy {\\n id\\n harvests(\\n orderBy: blockTimestamp\\n orderDirection: desc\\n first: 1000\\n where: {blockTimestamp_gte: 1710000000}\\n ) {\\n id\\n amountX\\n amountY\\n amountXBefore\\n amountYBefore\\n lastHarvest\\n blockTimestamp\\n __typename\\n }\\n __typename\\n }\\n users(first: 1, where: {address: \\\"0xC25d79fc4970479B88068Ce8891eD9bE5799210D\\\"}) {\\n id\\n address\\n amount\\n __typename\\n }\\n __typename\\n }\\n}\"\n// })\n// }).then((res) => {\n// if (!res.ok) return;\n// State.update({\n// allData: res.body?.data?.vaults ?? [],\n// loading: false\n// })\n// })\n// }\nfunction fetchAllData() {\n State.update({\n loading: true\n });\n Ethers.provider()\n .getSigner()\n .getAddress()\n .then((address) => {\n asyncFetch(ALL_DATA_URL, {\n method: 'POST',\n body: JSON.stringify({\n \"variables\": {},\n \"query\": \"{\\n vaults(first: 100, where: {IsWhitelisted: true}) {\\n id\\n underlyingX\\n underlyingY\\n tokenX {\\n id\\n name\\n symbol\\n priceUSD\\n decimals\\n __typename\\n }\\n tokenY {\\n id\\n name\\n symbol\\n priceUSD\\n decimals\\n __typename\\n }\\n name\\n shares\\n strategy {\\n id\\n harvests(\\n orderBy: blockTimestamp\\n orderDirection: desc\\n first: 1000\\n where: {blockTimestamp_gte: 1710172800}\\n ) {\\n id\\n amountX\\n amountY\\n amountXBefore\\n amountYBefore\\n lastHarvest\\n blockTimestamp\\n __typename\\n }\\n __typename\\n }\\n users(first: 1, where: {address: \\\"\" + address + \"\\\"}) {\\n id\\n address\\n amount\\n __typename\\n }\\n __typename\\n }\\n}\"\n\n })\n }).then((res) => {\n if (!res.ok) return;\n State.update({\n allData: res.body?.data?.vaults ?? [],\n loading: false\n })\n })\n })\n}\n\nfunction handleChangeDataIndex(index) {\n state.dataIndex === index ? State.update({\n dataIndex: -1\n }) : State.update({\n dataIndex: index\n })\n}\nfunction handleChangeCategoryIndex(index) {\n // if (index === 0) {\n // fetchAllData()\n // } else {\n // fetchUserAllData()\n // }\n State.update({\n categoryIndex: index\n })\n}\nfunction handleChangeChainIndex(index) {\n const chain = CHAIN_LIST[index]\n onSwitchChain({\n chainId: `0x${Number(chain.chain_id).toString(16)}`,\n });\n}\nfunction handleSearchInput(event) {\n State.update({\n token: event.target.value\n })\n}\n\nuseEffect(() => {\n if (state.dataList) {\n let filterList = []\n if (state.categoryIndex === 0) {\n filterList = state.dataList.filter(data => {\n const source = data.id.toUpperCase()\n const target = (state.token || '').toUpperCase()\n return source.indexOf(target) > -1\n })\n } else if (state.categoryIndex === 1) {\n state.dataList.forEach(data => {\n if (data.initialData.users.length > 0) {\n filterList.push(data)\n }\n })\n }\n State.update({\n filterList\n })\n }\n}, [state.dataList, state.token, state.categoryIndex])\n\nuseEffect(() => {\n const index = CHAIN_LIST.findIndex(chain => chain.id === curChain.id)\n if (index > -1) {\n State.update({\n chainIndex: index,\n allData: null,\n dataList: [],\n categoryIndex: 0,\n userPositions: null\n })\n fetchAllData()\n }\n}, [curChain])\nconst columnList = [{\n width: '40%',\n key: 'pool',\n label: 'Pool',\n type: 'slot',\n render: (data) => {\n return (\n <>\n <StyledVaultImage>\n <img style={{ marginRight: -6 }} src={ICON_VAULT_MAP[data.token0]} alt={data.token0} />\n <img src={ICON_VAULT_MAP[data.token1]} alt={data.token1} />\n </StyledVaultImage>\n <TdTxt>{data.token0} / {data.token1}</TdTxt>\n </>\n )\n }\n}, {\n width: '10%',\n key: 'chain',\n label: 'Chain',\n type: 'slot',\n render: () => <img style={{ width: 26 }} src={curChain.logo} alt={curChain.name} />\n}, {\n width: '10%',\n key: 'strategy',\n label: 'Strategy',\n type: 'slot',\n render: (data) => {\n return (\n <StrategyTxt>{data.strategy2 ? data.strategy2 : data.strategy}</StrategyTxt>\n )\n }\n}, {\n width: '10%',\n key: 'tvlUSD',\n label: 'TVL',\n type: 'slot',\n render: (data) => {\n return (\n <TdTxt>{formatFiat(data.tvlUSD)}</TdTxt>\n )\n }\n}, {\n width: '15%',\n key: 'Fee APR',\n label: 'Fee APR',\n type: 'slot',\n render: (data) => {\n return (\n <StyledDashedUndeline>\n <TdTxt>{data.feeApr}</TdTxt>\n </StyledDashedUndeline>\n )\n }\n}, {\n width: '15%',\n direction: 'column',\n key: 'liquidity',\n label: 'Your Liquidity',\n type: 'slot',\n render: (data, index) => {\n return (\n <>\n <TdTxt>{data.liquidity ? `${formatFiat(data.liquidity)}` : \"-\"}</TdTxt>\n {/* {data.liquidity && <TdTxt className=\"gray\">{data.liquidity} LP</TdTxt>} */}\n <SvgIcon className={[\"icon-right\", index === state.dataIndex ? \"rotate\" : \"\"]}>\n {IconRight}\n </SvgIcon>\n </>\n )\n }\n}]\n\nreturn state.loading ? <Widget src=\"bluebiu.near/widget/0vix.LendingSpinner\" /> : (\n <StyledColumn>\n {state.allData && (\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Data.STEAKHUT\"}\n props={{\n pairs,\n addresses,\n allData: state.allData,\n prices,\n curChain,\n multicallAddress,\n LAST_SNAP_SHOT_DATA_URL,\n onLoad: (data) => {\n State.update({\n dataList: data.dataList,\n loading: false\n })\n }\n }}\n />\n )}\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Bridge.Filter\"}\n props={{\n token: state.token,\n chains: CHAIN_LIST,\n categoryIndex: state.categoryIndex,\n chainIndex: state.chainIndex,\n onSearchInput: handleSearchInput,\n onChangeCategoryIndex: handleChangeCategoryIndex,\n onChangeChainIndex: handleChangeChainIndex,\n }}\n />\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Bridge.STEAKHUT.List\"}\n props={{\n toast,\n prices,\n columnList,\n userPositions: state.userPositions,\n dataIndex: state.dataIndex,\n onChangeDataIndex: handleChangeDataIndex,\n dataList: state.filterList,\n addresses,\n addAction,\n proxyAddress,\n multicallAddress,\n ICON_VAULT_MAP,\n }}\n />\n {!isChainSupported && (\n <Widget\n src=\"bluebiu.near/widget/Swap.ChainWarnigBox\"\n props={{\n chain: curChain,\n onSwitchChain: onSwitchChain,\n switchingChain: switchingChain,\n theme: dexConfig.theme?.button,\n }}\n />\n )}\n </StyledColumn>\n)" }, "Liquidity.Data.RANGEPROTOCOL": { "": "\nconst {\n pairs,\n addresses,\n allData,\n onLoad,\n // chainType,\n curChain,\n multicallAddress,\n LAST_SNAP_SHOT_DATA_URL,\n prices\n} = props\n\nlet loading = false\nlet dataList = []\nconst MULTICALL_ABI = [\n {\n inputs: [\n { internalType: \"bool\", name: \"requireSuccess\", type: \"bool\" },\n {\n components: [\n { internalType: \"address\", name: \"target\", type: \"address\" },\n { internalType: \"bytes\", name: \"callData\", type: \"bytes\" },\n ],\n internalType: \"struct Multicall2.Call[]\",\n name: \"calls\",\n type: \"tuple[]\",\n },\n ],\n name: \"tryAggregate\",\n outputs: [\n {\n components: [\n { internalType: \"bool\", name: \"success\", type: \"bool\" },\n { internalType: \"bytes\", name: \"returnData\", type: \"bytes\" },\n ],\n internalType: \"struct Multicall2.Result[]\",\n name: \"returnData\",\n type: \"tuple[]\",\n },\n ],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n];\nconst ERC20_ABI = [\n {\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\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [],\n \"name\": \"rewardRate\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [],\n \"name\": \"rewardToken\",\n \"outputs\": [\n {\n \"internalType\": \"contract IERC20\",\n \"name\": \"\",\n \"type\": \"address\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [],\n \"name\": \"globalState\",\n \"outputs\": [\n {\n \"internalType\": \"uint160\",\n \"name\": \"price\",\n \"type\": \"uint160\"\n },\n {\n \"internalType\": \"int24\",\n \"name\": \"tick\",\n \"type\": \"int24\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"fee\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"timepointIndex\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"communityFeeToken0\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"communityFeeToken1\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"bool\",\n \"name\": \"unlocked\",\n \"type\": \"bool\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n];\n\nconst MulticallContract = new ethers.Contract(\n multicallAddress,\n MULTICALL_ABI,\n Ethers.provider().getSigner()\n);\nconst multicallv2 = (abi, calls, options, onSuccess, onError) => {\n const { requireSuccess, ...overrides } = options || {};\n const itf = new ethers.utils.Interface(abi);\n const calldata = calls.map((call) => ({\n target: call.address.toLowerCase(),\n callData: itf.encodeFunctionData(call.name, call.params),\n }));\n MulticallContract.callStatic\n .tryAggregate(requireSuccess || true, calldata, overrides)\n .then((res) => {\n onSuccess(\n res.map((call, i) => {\n const [result, data] = call;\n return result && data !== \"0x\"\n ? itf.decodeFunctionResult(calls[i].name, data)\n : null;\n })\n );\n })\n .catch((err) => {\n onError?.(err);\n });\n};\nconst fetchFusionsData = () => {\n asyncFetch(\"https://api.lynex.fi/api/v1/fusions\").then((res) => {\n if (!res.ok) return;\n State.update({\n fusionsData: res?.body?.data,\n });\n });\n}\nconst formatPercent = (value) => {\n return `${Number(value * 100).toLocaleString(\"en\", {\n maximumFractionDigits: 2,\n })}%`;\n};\n\nfunction formatedData() {\n onLoad({\n loading,\n dataList\n })\n}\nfunction getDataList() {\n console.log('=====11111====')\n pairs.forEach(pair => {\n const vaultAddress = addresses[pair.id]\n const data = allData.find(data => data.vault === vaultAddress)\n console.log('====data', data)\n dataList.push({\n ...data,\n ...pair,\n })\n })\n formatedData('dataList')\n}\n\nfunction getLiquidity() {\n const calls = [];\n const sender = Ethers.send(\"eth_requestAccounts\", [])[0];\n dataList.forEach(data => {\n calls.push({\n address: data.vaultAddress,\n name: \"balanceOf\",\n params: [sender],\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n (res) => {\n for (let i = 0, len = res.length; i < len; i++) {\n if (res[i]) {\n dataList[i].liquidity = Big(ethers.utils.formatUnits(res[i][0]._hex)).toFixed(2)\n }\n }\n formatedData('getLiquidity')\n },\n (error) => {\n setTimeout(() => {\n getLiquidity();\n }, 500);\n }\n )\n}\nfunction getTotalApr() {\n const name = curChain.name\n if (['Base', 'Optimism', 'Polygon zkEVM'].includes(name)) {\n dataList = dataList.map(data => {\n data.totalApr = formatPercent(data.returns.weekly.feeApr)\n return data\n })\n formatedData('getTotalApr')\n }\n if (name === 'Linea') {\n asyncFetch(\"https://api.lynex.fi/api/v1/fusions\").then((res) => {\n if (!res.ok) return;\n const fusionsData = res?.body?.data\n dataList = dataList.map(data => {\n const fusionData = fusionsData.find(fusionData => fusionData.address === data.vaultAddress)\n data.totalApr = ((fusionData?.gauge?.tvl ?? 0 > 0) ? Big(fusionData?.gauge?.rewardPerSecond ?? 0)\n .times(365 * 24 * 60 * 60)\n .times(prices?.Lynex ?? 0)\n .times(100)\n .div(fusionData?.gauge?.tvl ?? 0).toFixed(2) : '0.00') + '%'\n return data\n })\n formatedData('getTotalApr')\n });\n }\n if (name === 'BSC') {\n const calls = [];\n const addressMap = {\n 'N ETH-WBNB-0': '0xD777E84b0D29128351A35045D7AE728780dEf54D',\n 'N BTCB-WBNB-0': '0x65E40E779560199F5e68126Bc95bdc03083e5AA4',\n 'S USDT-USDC-0': '0x1011530830c914970CAa96a52B9DA1C709Ea48fb',\n 'N USDT-WBNB-0': '0xf50Af14BC4953Dcf9d27EbCA8BB3625855F5B42d',\n 'P ankrBNB-WBNB-0': '0xf50Af14BC4953Dcf9d27EbCA8BB3625855F5B42d',\n 'P BNBx-WBNB-0': '0xf50Af14BC4953Dcf9d27EbCA8BB3625855F5B42d',\n }\n dataList.forEach(data => {\n addressMap[data.id] && calls.push({\n address: addressMap[data.id],\n name: \"rewardRate\",\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n res => {\n for (let i = 0, len = res.length; i < len; i++) {\n dataList[i]['totalApr'] = (dataList[i].tvlUSD > 0 ? Big(ethers.utils.formatUnits(res[i][0]._hex))\n .mul(365 * 24 * 60 * 60)\n .mul(prices['THE'])\n .div(dataList[i].tvlUSD)\n .toFixed(2) : '0.00') + '%'\n }\n formatedData('getTotalApr')\n },\n error => {\n setTimeout(() => {\n getTotalApr()\n }, 500)\n }\n )\n }\n}\nfunction getFeeTiers() {\n const name = curChain.name\n if (['Linea', 'BSC'].includes(name)) {\n const calls = [];\n dataList.forEach(data => {\n calls.push({\n address: data.poolAddress,\n name: \"globalState\",\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n res => {\n for (let i = 0, len = res.length; i < len; i++) {\n dataList[i]['fee'] = Big(res[i][2]).div(10000).toFixed(4)\n }\n formatedData('getFeeTiers')\n },\n error => {\n setTimeout(() => {\n getFeeTiers()\n }, 500)\n }\n )\n } else {\n asyncFetch(LAST_SNAP_SHOT_DATA_URL)\n .then(res => {\n if (res.ok) {\n dataList.forEach((data, index) => {\n const findIndex = res.body.findIndex(source => data.vaultAddress === source.address)\n if (findIndex > -1) {\n dataList[index]['fee'] = Big(res.body[findIndex].fee).div(100).toFixed(2)\n }\n })\n formatedData('getFeeTiers')\n }\n })\n .catch(error => {\n console.log('error', error)\n })\n }\n}\n\nuseEffect(() => {\n getDataList()\n // getLiquidity()\n // getFeeTiers()\n // getTotalApr()\n}, [])" }, "Liquidity.STEERPROTOCOL": { "": "const StyledContainer = styled.div`\n`\n\nconst {\n dexConfig\n} = props\nreturn (\n <StyledContainer style={dexConfig.theme}>\n <Widget\n src=\"bluebiu.near/widget/Liquidity.Connector.RANGEPROTOCOL\"\n props={{\n ...props\n }}\n />\n </StyledContainer>\n)" }, "Liquidity.Bridge.Detail": { "": "\nconst {\n // defaultPair,\n // pair,\n data,\n toast,\n prices,\n addresses,\n proxyAddress,\n addAction,\n userPositions,\n ICON_VAULT_MAP\n} = props;\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n &.price-input {\n width: 500px;\n margin: 0 auto 20px;\n align-items: center;\n justify-content: center;\n gap: 14px;\n }\n`\nconst Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n`\nconst Wrapper = styled.div`\n \n`\nconst FilterButtonList = styled.div`\n margin-bottom: 20px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-top: 1px solid #373A53;\n border-bottom: 1px solid #373A53;\n`\nconst FilterButton = styled.div`\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 250px;\n height: 48px;\n border-left: 1px solid #373A53;\n border-right: 1px solid #373A53;\n color: #979ABE;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n &:first-of-type {\n border-right: none;\n }\n &.isActive {\n color: #FFF;\n &:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n bottom: -2px;\n height: 5px;\n flex-shrink: 0;\n background: #1362E4;\n }\n }\n`\nconst InputWrapList = styled.div`\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n`\nconst InputWrap = styled.div`\n position: relative;\n /* width: 243px; */\n height: 46px;\n /* flex-shrink: 0;\n fill: #1B1E27;\n stroke-width: 1px;\n stroke: #33364B; */\n background: #33364B;\n border-radius: 12px;\n input::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n }\n \n input::-webkit-outer-spin-button{\n -webkit-appearance: none !important;\n }\n input[type=\"number\"]{\n -moz-appearance: textfield;\n }\n\n`\nconst Input = styled.input`\n border: none;\n outline: none;\n background: transparent;\n margin: 0;\n width: 100%;\n height: 100%;\n color: #FFF;\n font-family: Gantari;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n padding: 0 80px 0 10px;\n`\nconst InputSuffix = styled.div`\n position: absolute;\n top: 13px;\n right: 12px;\n display: flex;\n align-items: center;\n gap: 6px;\n span {\n color: #FFF;\n text-align: right;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n }\n img {\n width: 20px;\n border-radius: 50%;\n }\n\n`\nconst StyledImageList = styled.div`\n display: flex;\n align-items: center;\n \n`\nconst PriceWrap = styled.div`\n margin-top: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\nconst TotalPrice = styled.span`\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n opacity: 0.3;\n`\nconst BalancePrice = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n color: #979ABE;\n text-align: right;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n span {\n color: #FFF;\n text-decoration-line: underline;\n }\n`\n\nconst StyledButtonList = styled.div`\n width: 500px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 14px;\n`\nconst StyledButton = styled.button`\n outline: none;\n border: none;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 46px;\n border-radius: 8px;\n /* background: #FFF; */\n /* color: #1E2028; */\n background-color: var(--button-color);\n color: var(--button-text-color);\n font-family: Gantari;\n font-size: 16px;\n font-weight: 500;\n &[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`\n\nconst StyledLoading = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n animation: rotate 1.5s linear infinite;\n @keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n`\n\nconst iconCircle = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8\" stroke=\"#1E2028\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n\n)\nconst defaultDeposit = props.tab === \"deposit\" || !props.tab;\n\nconst curPositionUSD = userPositions[data.vaultAddress]?.balanceUSD;\n\nState.init({\n isDeposit: defaultDeposit,\n lpBalance: \"\",\n balances: [],\n amount0: \"\",\n amount1: \"\",\n lpAmount: \"\",\n isError: false,\n isLoading: false,\n isToken0Approved: true,\n isToken1Approved: true,\n isToken0Approving: false,\n isToken1Approving: false,\n loadingMsg: \"\",\n isPostTx: false,\n showPairs: false,\n});\n\nconst getFromDepositAmount = (depositAmount, tokenDecimal) => {\n let a = new Big(depositAmount[0].toString());\n let b = new Big(depositAmount[1].toString());\n\n if (a.eq(0) && b.eq(0)) return \"0\";\n\n let diff;\n let midpoint;\n if (a.gt(b)) {\n diff = a.minus(b);\n midpoint = diff.div(new Big(2)).plus(b);\n } else {\n diff = b.minus(a);\n midpoint = diff.div(new Big(2)).plus(a);\n }\n\n for (let i = tokenDecimal; i > 0; i--) {\n const midpointFixed = midpoint\n .div(new Big(10).pow(tokenDecimal))\n .toFixed(i);\n if (\n a.div(Big(10).pow(tokenDecimal)).lte(midpointFixed) &&\n b.div(Big(10).pow(tokenDecimal)).gte(midpointFixed)\n ) {\n return midpointFixed;\n }\n }\n\n return \"0\";\n};\n\nconst sender = Ethers.send(\"eth_requestAccounts\", [])[0];\n// if (!sender) return <Web3Connect connectLabel=\"Connect with Web3\" />;\nconst { token0, token1, decimals0, decimals1, id } = data || defaultPair;\n\nconst hypeAddress = addresses[id];\n\nconst updateLPBalance = () => {\n const abi = [\"function balanceOf(address) view returns (uint256)\"];\n const vaultContract = new ethers.Contract(\n hypeAddress,\n abi,\n Ethers.provider()\n );\n vaultContract.balanceOf(sender).then((balanceBig) => {\n const adjustedBalance = ethers.utils.formatUnits(balanceBig, 18);\n State.update({\n lpBalance: adjustedBalance,\n });\n });\n};\nconst updateBalance = (token) => {\n const { address, decimals, symbol } = token;\n if (symbol === \"ETH\") {\n Ethers.provider()\n .getBalance(sender)\n .then((balanceBig) => {\n const adjustedBalance = ethers.utils.formatEther(balanceBig);\n State.update({\n balances: {\n ...state.balances,\n [symbol]: adjustedBalance,\n },\n });\n });\n } else {\n const erc20Abi = [\"function balanceOf(address) view returns (uint256)\"];\n const tokenContract = new ethers.Contract(\n address,\n erc20Abi,\n Ethers.provider()\n );\n tokenContract.balanceOf(sender).then((balanceBig) => {\n const adjustedBalance = Big(\n ethers.utils.formatUnits(balanceBig, decimals)\n ).toString();\n State.update({\n balances: {\n ...state.balances,\n [symbol]: adjustedBalance,\n },\n });\n });\n }\n};\n\nuseEffect(() => {\n if (!sender || !token0 || !token1) return;\n [\n { symbol: token0, address: addresses[token0], decimals: decimals0 },\n { symbol: token1, address: addresses[token1], decimals: decimals1 },\n ].map(updateBalance);\n\n updateLPBalance();\n}, [sender, token0, token1]);\n\nconst {\n isDeposit,\n balances,\n amount0,\n amount1,\n isLoading,\n isError,\n isToken0Approved,\n isToken1Approved,\n isToken0Approving,\n isToken1Approving,\n loadingMsg,\n lpBalance,\n lpAmount,\n isPostTx,\n} = state;\n\nconst checkApproval = (token0Amount, token1Amount) => {\n const token0Wei = ethers.utils.parseUnits(\n Big(token0Amount).toFixed(decimals0),\n decimals0\n );\n const token1Wei = ethers.utils.parseUnits(\n Big(token1Amount).toFixed(decimals1),\n decimals1\n );\n\n const abi = [\n \"function allowance(address, address) external view returns (uint256)\",\n ];\n\n const token0Contract = new ethers.Contract(\n addresses[token0],\n abi,\n Ethers.provider()\n );\n\n token0Contract\n .allowance(sender, hypeAddress)\n .then((allowance0) => {\n State.update({\n isToken0Approved: !new Big(allowance0.toString()).lt(token0Wei),\n });\n })\n .catch((e) => console.log(e));\n\n const token1Contract = new ethers.Contract(\n addresses[token1],\n abi,\n Ethers.provider()\n );\n\n token1Contract\n .allowance(sender, hypeAddress)\n .then((allowance1) => {\n State.update({\n isToken1Approved: !new Big(allowance1.toString()).lt(token1Wei),\n });\n })\n .catch((e) => console.log(e));\n};\nconst changeMode = (isDeposit) => {\n State.update({ isDeposit });\n};\n\nconst handleMax = (isToken0) => {\n if (isToken0) handleToken0Change(balances[token0]);\n else handleToken1Change(balances[token1]);\n};\nconst handleToken0Change = (amount) => {\n State.update({ amount0: amount });\n\n if (Number(amount) === 0) {\n State.update({\n amount1: \"\",\n isToken0Approved: true,\n isToken1Approved: true,\n });\n return;\n }\n\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Computing deposit amount...\",\n });\n const token0Wei = ethers.utils.parseUnits(\n Big(amount).toFixed(decimals0),\n decimals0\n );\n\n const proxyAbi = [\n \"function getDepositAmount(address, address, uint256) public view returns (uint256, uint256)\",\n ];\n const proxyContract = new ethers.Contract(\n proxyAddress,\n proxyAbi,\n Ethers.provider()\n );\n proxyContract\n .getDepositAmount(hypeAddress, addresses[token0], token0Wei)\n .then((depositAmount) => {\n const amount1 = getFromDepositAmount(depositAmount, decimals1);\n\n State.update({ amount1 });\n State.update({ isLoading: false });\n checkApproval(amount, amount1);\n })\n .catch((e) => {\n State.update({\n isLoading: true,\n isError: true,\n amount1: 0,\n loadingMsg: \"Something went wrong. Please try again.\",\n });\n });\n};\n\nconst handleToken1Change = (amount) => {\n State.update({ amount1: amount });\n\n if (Number(amount) === 0) {\n State.update({\n amount0: \"\",\n isToken0Approved: true,\n isToken1Approved: true,\n });\n return;\n }\n\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Computing deposit amount...\",\n });\n const token1Wei = ethers.utils.parseUnits(\n Big(amount).toFixed(decimals1),\n decimals1\n );\n\n const proxyAbi = [\n \"function getDepositAmount(address, address, uint256) public view returns (uint256, uint256)\",\n ];\n const proxyContract = new ethers.Contract(\n proxyAddress,\n proxyAbi,\n Ethers.provider()\n );\n\n proxyContract\n .getDepositAmount(hypeAddress, addresses[token1], token1Wei)\n .then((depositAmount) => {\n const amount0 = getFromDepositAmount(depositAmount, decimals0);\n State.update({ amount0 });\n State.update({ isLoading: false });\n checkApproval(amount0, amount);\n })\n .catch((e) => {\n State.update({\n isLoading: true,\n isError: true,\n amount0: 0,\n loadingMsg: \"Something went wrong. Please try again.\",\n });\n });\n};\n\nconst handleLPChange = (amount) => {\n State.update({\n lpAmount: amount,\n });\n};\n\nconst handleApprove = (isToken0) => {\n const _token = isToken0 ? token0 : token1;\n const payload = isToken0\n ? { isToken0Approving: true }\n : { isToken1Approving: true };\n\n const amount = isToken0\n ? Big(amount0).toFixed(decimals0)\n : Big(amount1).toFixed(decimals1);\n\n const toastId = toast?.loading({\n title: `Approve ${amount} ${_token}`,\n });\n\n State.update({\n ...payload,\n isLoading: true,\n loadingMsg: `Approving ${_token}...`,\n });\n\n const tokenWei = ethers.utils.parseUnits(\n amount,\n isToken0 ? decimals0 : decimals1\n );\n\n const abi = [\"function approve(address, uint) public\"];\n\n const tokenContract = new ethers.Contract(\n addresses[_token],\n abi,\n Ethers.provider().getSigner()\n );\n\n tokenContract\n .approve(hypeAddress, tokenWei)\n .then((tx) => tx.wait())\n .then((receipt) => {\n const payload = isToken0\n ? { isToken0Approved: true, isToken0Approving: false }\n : { isToken1Approved: true, isToken1Approving: false };\n\n State.update({ ...payload, isLoading: false, loadingMsg: \"\" });\n toast?.dismiss(toastId);\n toast?.success({\n title: \"Approve Successfully!\",\n text: `Approve ${amount} ${_token}`,\n tx: receipt.transactionHash,\n chainId: props.chainId,\n });\n })\n .catch((error) => {\n State.update({\n isError: true,\n isLoading: false,\n loadingMsg: error,\n isToken0Approving: false,\n isToken1Approving: false,\n });\n toast?.dismiss(toastId);\n toast?.fail({\n title: \"Approve Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : `Approve ${amount} ${_token}`,\n });\n });\n};\nconst handleDeposit = () => {\n const toastId = toast?.loading({\n title: `Depositing...`,\n });\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Depositing...\",\n });\n\n const token0Wei = ethers.utils.parseUnits(\n Big(amount0).toFixed(decimals0),\n decimals0\n );\n const token1Wei = ethers.utils.parseUnits(\n Big(amount1).toFixed(decimals1),\n decimals1\n );\n\n const proxyAbi = [\n \"function deposit(uint256, uint256,address,address,uint256[4] memory) external returns (uint256)\",\n ];\n\n const proxyContract = new ethers.Contract(\n proxyAddress,\n proxyAbi,\n Ethers.provider().getSigner()\n );\n proxyContract\n .deposit(token0Wei, token1Wei, sender, hypeAddress, [0, 0, 0, 0])\n .then((tx) => {\n return tx.wait();\n })\n .then((receipt) => {\n const { status, transactionHash } = receipt;\n\n addAction?.({\n type: \"Liquidity\",\n action: \"Deposit\",\n token0,\n token1,\n amount: amount0,\n template: \"Gamma\",\n status: status,\n add: can_add_action,\n transactionHash,\n chain_id: props.chainId,\n });\n\n State.update({\n isLoading: false,\n isPostTx: true,\n });\n\n setTimeout(() => State.update({ isPostTx: false }), 10_000);\n\n const { refetch } = props;\n if (refetch) refetch();\n\n toast?.dismiss(toastId);\n toast?.success({\n title: \"Deposit Successfully!\",\n });\n })\n .catch((error) => {\n State.update({\n isError: true,\n isLoading: false,\n loadingMsg: error,\n });\n toast?.dismiss(toastId);\n toast?.fail({\n title: \"Deposit Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : \"\",\n });\n });\n};\n\nconst handleWithdraw = () => {\n const toastId = toast?.loading({\n title: `Withdrawing...`,\n });\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Withdrawing...\",\n });\n\n const lpWeiAmount = ethers.utils.parseUnits(Big(lpAmount).toFixed(18), 18);\n const abi = [\n \"function withdraw(uint256, address, address,uint256[4] memory) external returns (uint256, uint256)\",\n ];\n\n const hypeContract = new ethers.Contract(\n hypeAddress,\n abi,\n Ethers.provider().getSigner()\n );\n\n hypeContract\n .withdraw(lpWeiAmount, sender, sender, [0, 0, 0, 0])\n .then((tx) => {\n return tx.wait();\n })\n .then((receipt) => {\n State.update({\n isLoading: false,\n isPostTx: true,\n });\n\n const { status, transactionHash } = receipt;\n\n addAction?.({\n type: \"Liquidity\",\n action: \"Withdraw\",\n token0,\n token1,\n amount: lpAmount,\n template: \"Gamma\",\n status: status,\n add: can_add_action,\n transactionHash,\n chain_id: state.chainId,\n });\n\n setTimeout(() => State.update({ isPostTx: false }), 10_000);\n\n const { refetch } = props;\n if (refetch) refetch();\n\n toast?.dismiss(toastId);\n toast?.success({\n title: \"Withdraw Successfully!\",\n });\n })\n .catch((error) => {\n State.update({\n isError: true,\n isLoading: false,\n loadingMsg: error,\n });\n toast?.dismiss(toastId);\n toast?.fail({\n title: \"Withdraw Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : \"\",\n });\n });\n};\n\nconst tokensPrice = prices;\n\nconst isInSufficient =\n Number(amount0) > Number(balances[token0]) ||\n Number(amount1) > Number(balances[token1]);\n\nconst isWithdrawInsufficient = Number(lpAmount) > Number(lpBalance);\n\nconst balance0 =\n !amount0 || !tokensPrice?.[token0]\n ? \"-\"\n : parseFloat(Big(amount0).times(tokensPrice[token0]).toFixed(4));\n\nconst balance1 =\n !amount1 || !tokensPrice?.[token1]\n ? \"-\"\n : parseFloat(Big(amount1).times(tokensPrice[token1]).toFixed(4));\n\nconst balanceLp =\n !lpAmount || !lpBalance || !curPositionUSD\n ? \"-\"\n : parseFloat(\n Big(lpAmount)\n .div(Big(lpBalance).gt(0) ? lpBalance : 1)\n .times(curPositionUSD)\n .toFixed(4)\n );\n\nconst onUpdateLpPercent = (percent) => {\n State.update({\n lpPercent: percent,\n });\n};\n\nconst onChangeSlider = (percent) => {\n console.log(\"percent: \", percent);\n const newLpValue = Big(percent)\n .div(100)\n .times(lpBalance || 0)\n .toFixed(6);\n\n handleLPChange(newLpValue);\n};\n\nuseEffect(() => {\n if (amount0) {\n handleToken0Change(amount0);\n }\n}, [data]);\nreturn (\n <Wrapper>\n <FilterButtonList>\n <FilterButton className={isDeposit ? 'isActive' : ''} onClick={() => changeMode(true)}>Deposit</FilterButton>\n <FilterButton className={!isDeposit ? 'isActive' : ''} onClick={() => changeMode(false)}>Withdraw</FilterButton>\n </FilterButtonList>\n {\n isDeposit ? <>\n <Row className=\"price-input\">\n <Column>\n <InputWrap>\n <Input value={amount0} type=\"number\" onChange={(e) => handleToken0Change(e.target.value)} />\n <InputSuffix>\n <img src={ICON_VAULT_MAP[token0]} alt={token0} />\n <span>{token0}</span>\n </InputSuffix>\n </InputWrap>\n <PriceWrap>\n <TotalPrice>${balance0}</TotalPrice>\n <BalancePrice>Balance:<span>{Big(balances[token0] ?? 0).toFixed(6)}</span> {token0}</BalancePrice>\n </PriceWrap>\n </Column>\n <Column>\n <InputWrap>\n <Input value={amount1} type=\"number\" onChange={(e) => handleToken1Change(e.target.value)} />\n <InputSuffix>\n <img src={ICON_VAULT_MAP[token1]} alt={token1} />\n <span>{token1}</span>\n </InputSuffix>\n </InputWrap>\n <PriceWrap>\n <TotalPrice>${balance1}</TotalPrice>\n <BalancePrice>Balance:<span>{Big(balances[token1] ?? 0).toFixed(6)}</span> {token1}</BalancePrice>\n </PriceWrap>\n </Column>\n </Row>\n <StyledButtonList>\n {isInSufficient && <StyledButton disabled>InSufficient Balance</StyledButton>}\n {\n !isInSufficient &&\n (isToken0Approved &&\n isToken1Approved &&\n !isToken0Approving &&\n !isToken1Approving ? (\n\n <StyledButton disabled={isLoading || !amount0 || !amount1} onClick={handleDeposit}>\n {\n isLoading ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n \"Deposit\"\n )\n }\n </StyledButton>\n ) : (\n <>\n <StyledButton disabled={isToken0Approved || isToken0Approving} onClick={() => handleApprove(true)}>{\n isToken0Approving ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n <>\n {isToken0Approved ? \"Approved\" : \"Approve\"} {token0}\n </>\n )}\n </StyledButton>\n <StyledButton disabled={isToken1Approved || isToken1Approving} onClick={() => handleApprove(false)}>{\n isToken1Approving ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n <>\n {isToken1Approved ? \"Approved\" : \"Approve\"} {token1}\n </>\n )}\n </StyledButton>\n </>\n ))\n }\n </StyledButtonList>\n </> : <>\n <Row className=\"price-input\">\n <Column>\n <InputWrap>\n <Input value={lpAmount} type=\"number\" onChange={(e) => {\n handleLPChange(e.target.value);\n\n const value = e.target.value;\n\n if (!value) {\n onUpdateLpPercent(0);\n }\n\n if (value && Big(value).gt(0)) {\n const newSliderPercent = Big(value || 0)\n .div(Big(lpBalance).gt(0) ? lpBalance : 1)\n .times(100)\n .toFixed(0);\n onUpdateLpPercent(newSliderPercent);\n }\n }} />\n\n <InputSuffix>\n <StyledImageList>\n <img src={ICON_VAULT_MAP[token0]} alt={token0} />\n <img src={ICON_VAULT_MAP[token1]} alt={token1} style={{ marginLeft: -6 }} />\n </StyledImageList>\n <span>{token0}/{token1}</span>\n </InputSuffix>\n </InputWrap>\n <PriceWrap>\n <TotalPrice>${balanceLp}</TotalPrice>\n <BalancePrice>Balance: <span\n onClick={() => {\n const newSliderPercent = Big(lpBalance || 0)\n .div(Big(lpBalance).gt(0) ? lpBalance : 1)\n .times(100)\n .toFixed(0);\n\n onUpdateLpPercent(newSliderPercent);\n\n handleLPChange(lpBalance);\n }}\n className=\"v\"\n >\n {lpBalance}\n </span></BalancePrice>\n </PriceWrap>\n </Column>\n </Row>\n <StyledButtonList>\n <StyledButton\n disabled={isWithdrawInsufficient || isLoading || !lpAmount}\n onClick={handleWithdraw}\n >\n {isLoading ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n <>\n {isWithdrawInsufficient ? \"InSufficient Balance\" : \"Withdraw\"}\n </>\n )}\n </StyledButton>\n </StyledButtonList>\n </>\n }\n\n </Wrapper>\n)" }, "Liquidity.STEAKHUT": { "": "const StyledContainer = styled.div`\n`\n\nconst {\n dexConfig\n} = props\nreturn (\n <StyledContainer style={dexConfig.theme}>\n <Widget\n src=\"bluebiu.near/widget/Liquidity.Connector.STEAKHUT\"\n props={{\n ...props\n }}\n />\n </StyledContainer>\n)" }, "Liquidity.Data.Gamma": { "": "\nconst {\n pairs,\n addresses,\n allData,\n onLoad,\n // chainType,\n curChain,\n multicallAddress,\n LAST_SNAP_SHOT_DATA_URL,\n prices\n} = props\n\nlet loading = false\nlet dataList = []\nconst MULTICALL_ABI = [\n {\n inputs: [\n { internalType: \"bool\", name: \"requireSuccess\", type: \"bool\" },\n {\n components: [\n { internalType: \"address\", name: \"target\", type: \"address\" },\n { internalType: \"bytes\", name: \"callData\", type: \"bytes\" },\n ],\n internalType: \"struct Multicall2.Call[]\",\n name: \"calls\",\n type: \"tuple[]\",\n },\n ],\n name: \"tryAggregate\",\n outputs: [\n {\n components: [\n { internalType: \"bool\", name: \"success\", type: \"bool\" },\n { internalType: \"bytes\", name: \"returnData\", type: \"bytes\" },\n ],\n internalType: \"struct Multicall2.Result[]\",\n name: \"returnData\",\n type: \"tuple[]\",\n },\n ],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n];\nconst ERC20_ABI = [\n {\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\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [],\n \"name\": \"rewardRate\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [],\n \"name\": \"rewardToken\",\n \"outputs\": [\n {\n \"internalType\": \"contract IERC20\",\n \"name\": \"\",\n \"type\": \"address\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [],\n \"name\": \"globalState\",\n \"outputs\": [\n {\n \"internalType\": \"uint160\",\n \"name\": \"price\",\n \"type\": \"uint160\"\n },\n {\n \"internalType\": \"int24\",\n \"name\": \"tick\",\n \"type\": \"int24\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"fee\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"timepointIndex\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"communityFeeToken0\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"uint16\",\n \"name\": \"communityFeeToken1\",\n \"type\": \"uint16\"\n },\n {\n \"internalType\": \"bool\",\n \"name\": \"unlocked\",\n \"type\": \"bool\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n];\n\nconst MulticallContract = new ethers.Contract(\n multicallAddress,\n MULTICALL_ABI,\n Ethers.provider().getSigner()\n);\nconst multicallv2 = (abi, calls, options, onSuccess, onError) => {\n const { requireSuccess, ...overrides } = options || {};\n const itf = new ethers.utils.Interface(abi);\n const calldata = calls.map((call) => ({\n target: call.address.toLowerCase(),\n callData: itf.encodeFunctionData(call.name, call.params),\n }));\n MulticallContract.callStatic\n .tryAggregate(requireSuccess || true, calldata, overrides)\n .then((res) => {\n onSuccess(\n res.map((call, i) => {\n const [result, data] = call;\n return result && data !== \"0x\"\n ? itf.decodeFunctionResult(calls[i].name, data)\n : null;\n })\n );\n })\n .catch((err) => {\n onError?.(err);\n });\n};\nconst fetchFusionsData = () => {\n asyncFetch(\"https://api.lynex.fi/api/v1/fusions\").then((res) => {\n if (!res.ok) return;\n State.update({\n fusionsData: res?.body?.data,\n });\n });\n}\nconst formatPercent = (value) => {\n return `${Number(value * 100).toLocaleString(\"en\", {\n maximumFractionDigits: 2,\n })}%`;\n};\n\nfunction formatedData() {\n onLoad({\n loading,\n dataList\n })\n}\nfunction getDataList() {\n pairs.forEach(pair => {\n const vaultAddress = addresses[pair.id]\n const data = allData[vaultAddress]\n dataList.push({\n ...data,\n ...pair,\n vaultAddress,\n })\n })\n formatedData('dataList')\n}\n\nfunction getLiquidity() {\n const calls = [];\n const sender = Ethers.send(\"eth_requestAccounts\", [])[0];\n dataList.forEach(data => {\n calls.push({\n address: data.vaultAddress,\n name: \"balanceOf\",\n params: [sender],\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n (res) => {\n for (let i = 0, len = res.length; i < len; i++) {\n if (res[i]) {\n dataList[i].liquidity = Big(ethers.utils.formatUnits(res[i][0]._hex)).toFixed(2)\n }\n }\n formatedData('getLiquidity')\n },\n (error) => {\n setTimeout(() => {\n getLiquidity();\n }, 500);\n }\n )\n}\nfunction getTotalApr() {\n const name = curChain.name\n if (['Base', 'Optimism', 'Polygon zkEVM'].includes(name)) {\n dataList = dataList.map(data => {\n data.totalApr = formatPercent(data.returns.weekly.feeApr)\n return data\n })\n formatedData('getTotalApr')\n }\n if (name === 'Linea') {\n asyncFetch(\"https://api.lynex.fi/api/v1/fusions\").then((res) => {\n if (!res.ok) return;\n const fusionsData = res?.body?.data\n dataList = dataList.map(data => {\n const fusionData = fusionsData.find(fusionData => fusionData.address === data.vaultAddress)\n data.totalApr = ((fusionData?.gauge?.tvl ?? 0 > 0) ? Big(fusionData?.gauge?.rewardPerSecond ?? 0)\n .times(365 * 24 * 60 * 60)\n .times(prices?.Lynex ?? 0)\n .times(100)\n .div(fusionData?.gauge?.tvl ?? 0).toFixed(2) : '0.00') + '%'\n return data\n })\n formatedData('getTotalApr')\n });\n }\n if (name === 'BSC') {\n const calls = [];\n const addressMap = {\n 'N ETH-WBNB-0': '0xD777E84b0D29128351A35045D7AE728780dEf54D',\n 'N BTCB-WBNB-0': '0x65E40E779560199F5e68126Bc95bdc03083e5AA4',\n 'S USDT-USDC-0': '0x1011530830c914970CAa96a52B9DA1C709Ea48fb',\n 'N USDT-WBNB-0': '0xf50Af14BC4953Dcf9d27EbCA8BB3625855F5B42d',\n 'P ankrBNB-WBNB-0': '0xf50Af14BC4953Dcf9d27EbCA8BB3625855F5B42d',\n 'P BNBx-WBNB-0': '0xf50Af14BC4953Dcf9d27EbCA8BB3625855F5B42d',\n }\n dataList.forEach(data => {\n addressMap[data.id] && calls.push({\n address: addressMap[data.id],\n name: \"rewardRate\",\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n res => {\n for (let i = 0, len = res.length; i < len; i++) {\n dataList[i]['totalApr'] = (dataList[i].tvlUSD > 0 ? Big(ethers.utils.formatUnits(res[i][0]._hex))\n .mul(365 * 24 * 60 * 60)\n .mul(prices['THE'])\n .div(dataList[i].tvlUSD)\n .toFixed(2) : '0.00') + '%'\n }\n formatedData('getTotalApr')\n },\n error => {\n setTimeout(() => {\n getTotalApr()\n }, 500)\n }\n )\n }\n}\nfunction getFeeTiers() {\n const name = curChain.name\n if (['Linea', 'BSC'].includes(name)) {\n const calls = [];\n dataList.forEach(data => {\n calls.push({\n address: data.poolAddress,\n name: \"globalState\",\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n res => {\n for (let i = 0, len = res.length; i < len; i++) {\n dataList[i]['fee'] = Big(res[i][2]).div(10000).toFixed(4)\n }\n formatedData('getFeeTiers')\n },\n error => {\n setTimeout(() => {\n getFeeTiers()\n }, 500)\n }\n )\n } else {\n asyncFetch(LAST_SNAP_SHOT_DATA_URL)\n .then(res => {\n if (res.ok) {\n dataList.forEach((data, index) => {\n const findIndex = res.body.findIndex(source => data.vaultAddress === source.address)\n if (findIndex > -1) {\n dataList[index]['fee'] = Big(res.body[findIndex].fee).div(100).toFixed(2)\n }\n })\n formatedData('getFeeTiers')\n }\n })\n .catch(error => {\n console.log('error', error)\n })\n }\n}\n\nuseEffect(() => {\n getDataList()\n getLiquidity()\n getFeeTiers()\n getTotalApr()\n}, [])" }, "Liquidity.Data.STEAKHUT": { "": "const {\n pairs,\n addresses,\n allData,\n onLoad,\n // chainType,\n curChain,\n multicallAddress,\n LAST_SNAP_SHOT_DATA_URL,\n prices\n} = props\n\nconst MULTICALL_ABI = [\n {\n inputs: [\n { internalType: \"bool\", name: \"requireSuccess\", type: \"bool\" },\n {\n components: [\n { internalType: \"address\", name: \"target\", type: \"address\" },\n { internalType: \"bytes\", name: \"callData\", type: \"bytes\" },\n ],\n internalType: \"struct Multicall2.Call[]\",\n name: \"calls\",\n type: \"tuple[]\",\n },\n ],\n name: \"tryAggregate\",\n outputs: [\n {\n components: [\n { internalType: \"bool\", name: \"success\", type: \"bool\" },\n { internalType: \"bytes\", name: \"returnData\", type: \"bytes\" },\n ],\n internalType: \"struct Multicall2.Result[]\",\n name: \"returnData\",\n type: \"tuple[]\",\n },\n ],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n];\nconst ERC20_ABI = [\n {\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"_shares\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"getUnderlyingAssets\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"totalX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"totalY\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n },\n \"function balanceOf(address) view returns (uint256)\"\n];\n\nconst MulticallContract = new ethers.Contract(\n multicallAddress,\n MULTICALL_ABI,\n Ethers.provider().getSigner()\n);\n\nconst multicallv2 = (abi, calls, options, onSuccess, onError) => {\n const { requireSuccess, ...overrides } = options || {};\n const itf = new ethers.utils.Interface(abi);\n console.log('====calls', calls)\n const calldata = calls.map((call) => ({\n target: call.address.toLowerCase(),\n callData: itf.encodeFunctionData(call.name, call.params),\n }));\n MulticallContract.callStatic\n .tryAggregate(requireSuccess || true, calldata, overrides)\n .then((res) => {\n onSuccess(\n res.map((call, i) => {\n const [result, data] = call;\n return result && data !== \"0x\"\n ? itf.decodeFunctionResult(calls[i].name, data)\n : null;\n })\n );\n })\n .catch((err) => {\n onError?.(err);\n });\n};\n\nconst formatPercent = (value) => {\n return `${Number(value * 100).toLocaleString(\"en\", {\n maximumFractionDigits: 2,\n })}%`;\n};\n\n\nlet loading = false\nlet dataList = []\nfunction formatedData() {\n onLoad({\n loading,\n dataList\n })\n}\nfunction getDataList() {\n allData.forEach((data) => {\n const findIndex = pairs.findIndex(pair => pair.poolAddress === data.id)\n if (findIndex > -1) {\n dataList.push({\n initialData: data,\n ...pairs[findIndex],\n feeApr: 'NaN%',\n })\n }\n })\n formatedData('getDataList')\n}\nfunction getTvlUsd() {\n for (let i = 0; i < dataList.length; i++) {\n const { underlyingX, underlyingY, tokenX, tokenY } = dataList[i].initialData\n dataList[i].tvlUSD = Big(Big(ethers.utils.formatUnits(underlyingX, tokenX.decimals)).times(tokenX.priceUSD))\n .plus(Big(ethers.utils.formatUnits(underlyingY, tokenY.decimals)).times(tokenY.priceUSD)).toString(2)\n }\n formatedData('getTvlUsd')\n}\nfunction handleGetLiquidity(i, users) {\n const data = dataList[i]\n const calls = []\n users.forEach(user => {\n calls.push({\n address: data.initialData.id,\n name: 'getUnderlyingAssets',\n params: [user.amount]\n })\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n (result) => {\n const { tokenX, tokenY } = data.initialData\n let liquidity = Big(0)\n for (let j = 0; j < result.length; j++) {\n const element = result[j];\n const totalX = ethers.utils.formatUnits(element[0], tokenX.decimals)\n const totalY = ethers.utils.formatUnits(element[1], tokenY.decimals)\n const amount = Big(Big(totalX).times(tokenX.priceUSD)).plus(Big(totalY).times(tokenY.priceUSD))\n liquidity = liquidity.plus(amount)\n }\n dataList[i].liquidity = liquidity.toFixed(4)\n formatedData('getLiquidity')\n },\n (error) => {\n setTimeout(() => {\n getLiquidity();\n }, 500);\n }\n )\n}\nfunction getLiquidity() {\n for (let i = 0; i < dataList.length; i++) {\n const data = dataList[i];\n const users = data.initialData.users\n if (users.length > 0) {\n handleGetLiquidity(i, users)\n }\n }\n}\nfunction getBalance() {\n const calls = [];\n const sender = Ethers.send(\"eth_requestAccounts\", [])[0];\n dataList.forEach(data => {\n calls.push({\n address: ethers.utils.getAddress(data.initialData.id),\n name: \"balanceOf\",\n params: [sender],\n });\n })\n multicallv2(\n ERC20_ABI,\n calls,\n {},\n (result) => {\n for (let i = 0; i < result.length; i++) {\n const element = result[i];\n dataList[i].balance = ethers.utils.formatUnits(element[0], 18)\n }\n formatedData('getBalance')\n },\n (error) => {\n setTimeout(() => {\n getBalance();\n }, 500);\n }\n )\n}\nuseEffect(() => {\n getDataList()\n getTvlUsd()\n getBalance()\n getLiquidity()\n}, [])" }, "Liquidity.Handler.Styles": { "": "const StyledFont = styled.div`\n color: ${(props) => props.color || '#000'};\n font-family: ${(props) => props.fontFamily || 'Gantari'};\n font-size: ${(props) => props.fontSize || '16px'};\n font-style: ${(props) => props.fontStyle || 'normal'};\n font-weight: ${(props) => props.fontWeight || '400'};\n line-height: ${(props) => props.lineHeight || 'normal'};\n white-space: ${(props) => props.whiteSpace || 'normal'};\n`;\nconst StyledFlex = styled.div`\n display: flex;\n flex-direction: ${(props) => props.flexDirection || 'row'};\n align-items: ${(props) => props.alignItems || 'center'};\n justify-content: ${(props) => props.justifyContent || 'flex-start'};\n gap: ${(props) => props.gap || '0px'};\n`;\nreturn {\n StyledFont,\n StyledFlex\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": "" } } }, "Liquidity.Bridge.List": { "": "const Wrapper = styled.div`\n margin-top: 20px;\n`\nconst SvgIcon = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n &.icon-right {\n position: absolute;\n right: 28px;\n top: 50%;\n transform: translateY(-50%);\n\n &.rotate {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n`\nconst Table = styled.div`\n \n`\nconst THead = styled.div`\n display: flex;\n align-items: center;\n padding: 12px 30px;\n`\nconst Th = 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\n &:first-of-type {\n width: 40%;\n }\n &:nth-of-type(2) {\n width: 10%;\n }\n &:nth-of-type(3) {\n width: 10%;\n }\n &:nth-of-type(4) {\n width: 10%;\n }\n &:nth-of-type(5) {\n width: 10%;\n }\n &:nth-of-type(6) {\n width: 10%;\n }\n &:nth-of-type(7) {\n width: 10%;\n }\n`\nconst TBody = styled.div`\n`\nconst TrWrapper = styled.div`\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n border: 1px solid #373A53;\n margin-bottom: 8px;\n overflow: hidden;\n`\nconst Tr = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 84px;\n background: #262836;\n padding: 0 24px;\n`\nconst Td = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n &.column {\n flex-direction: column;\n gap: 5px;\n }\n &:first-of-type {\n width: 40%;\n }\n &:nth-of-type(2) {\n width: 10%;\n }\n &:nth-of-type(3) {\n width: 10%;\n }\n &:nth-of-type(4) {\n width: 10%;\n }\n &:nth-of-type(5) {\n width: 10%;\n }\n &:nth-of-type(6) {\n width: 10%;\n }\n &:nth-of-type(7) {\n width: 10%;\n }\n`\nconst TdTxt = styled.div`\n color: #FFF;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n &.gray {\n color: #979ABE;\n font-size: 12px;\n }\n`\nconst PoolPercentage = styled.div`\n padding: 3px 8px;\n border-radius: 24px;\n background: rgba(151, 154, 190, 0.1);\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StrategyTxt = styled.div`\n padding: 7px 10px;\n border-radius: 6px;\n background: rgba(151, 154, 190, 0.1);\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 StyledVaultImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst {\n toast,\n prices,\n dataList,\n dataIndex,\n columnList,\n onChangeDataIndex,\n addresses,\n addAction,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n} = props\n\nfunction renderTD(data, column, index) {\n if (column.type === 'slot') {\n return column.render(data, index)\n }\n if (column.type === 'svg') {\n return (\n <SvgIcon>\n {data[column.key]}\n </SvgIcon>\n )\n }\n return (\n <TdTxt>{data[column.key]}</TdTxt>\n )\n}\nreturn (\n <Wrapper>\n {\n\n <Table>\n <THead>\n {\n columnList.map((column, index) => {\n return (\n <Th key={index} style={{ width: column.width }}>{column.label}</Th>\n )\n })\n }\n </THead>\n <TBody>\n {dataList && dataList.map((data, index) => {\n return (\n <TrWrapper key={data.id}>\n <Tr onClick={() => onChangeDataIndex(index)}>\n {\n columnList.map((column, columnIndex) => {\n return (\n <Td key={index + columnIndex} className={column.direction === 'column' ? 'column' : ''} style={{ width: column.width }}>{renderTD(data, column, index, columnIndex)}</Td>\n )\n })\n }\n </Tr>\n {index === dataIndex && <Widget\n key={data.id}\n src={\"bluebiu.near/widget/Liquidity.Bridge.Detail\"}\n props={{\n data: dataList[dataIndex],\n toast,\n theme,\n prices,\n addresses,\n addAction,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n }}\n />}\n </TrWrapper>\n )\n })}\n\n </TBody>\n </Table>\n }\n </Wrapper>\n)" }, "Liquidity.Connector.RANGEPROTOCOL": { "": "\nconst StyledColumn = styled.div`\n display: flex;\n flex-direction: column;\n`\nconst StyledRow = styled.div`\n display: flex;\n flex-direction: row;\n`\n\nconst StyledVaultImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n img {\n width: 28px;\n height: 28px;\n }\n`\nconst SvgIcon = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n &.icon-right {\n position: absolute;\n right: 28px;\n top: 50%;\n transform: translateY(-50%);\n\n &.rotate {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n`\nconst StyledDashedUndeline = styled.div`\n padding: 2px 0;\n border-bottom: 1px dashed #979ABE;\n`\nconst TdTxt = styled.div`\n color: #FFF;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n &.gray {\n color: #979ABE;\n font-size: 12px;\n }\n`\nconst PoolPercentage = styled.div`\n padding: 3px 8px;\n border-radius: 24px;\n background: rgba(151, 154, 190, 0.1);\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n\nconst StrategyTxt = styled.div`\n padding: 7px 10px;\n border-radius: 6px;\n background: rgba(151, 154, 190, 0.1);\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 TitleText = styled.div`\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 32px;\n color: #ffffff;\n @media (max-width: 900px) {\n display: none;\n }\n`;\nconst ContainerLogin = styled.div`\n display: flex;\n max-width: 500px;\n\n flex-direction: column;\n margin: 80px auto auto auto;\n\n .web3-connect {\n width: 480px;\n height: 60px;\n border-radius: 10px;\n background-color: #fff;\n color: #0f1126;\n font-size: 18px;\n font-weight: 500;\n border: none;\n margin-top: 20px;\n }\n\n @media (max-width: 736px) {\n max-width: 100%;\n .web3-connect {\n width: 100%;\n\n font-size: 16px;\n height: 40px;\n }\n }\n`;\nState.init({\n allData: null,\n loading: false,\n dataList: [],\n filterList: [],\n dataIndex: -1,\n categoryIndex: 0,\n chainIndex: 0,\n token: '',\n})\nconst IconRight = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"10\" viewBox=\"0 0 8 10\" fill=\"none\">\n <path d=\"M7.18407 4.21913C7.68448 4.61945 7.68448 5.38054 7.18407 5.78087L2.28485 9.70024C1.63009 10.2241 0.660156 9.75788 0.660156 8.91937L0.660156 1.08062C0.660156 0.242118 1.63009 -0.224055 2.28485 0.299756L7.18407 4.21913Z\" fill=\"#979ABE\" />\n </svg>\n)\nconst {\n toast,\n CHAIN_LIST,\n multicallAddress,\n dexConfig,\n curChain,\n isChainSupported,\n onSwitchChain,\n addAction,\n connectProps,\n prices,\n} = props\n// const CONNECT_PROPS = {\n// ...props.connectProps,\n// chainId: MAINNET_CHAIN_ID,\n// chainName: CHAIN_CONFIG.chainName,\n// noAccountTips: `${CHAIN_CONFIG.chainName} Liquidity`,\n// wrongNetworkTips: `To proceed, kindly switch to ${CHAIN_CONFIG.chainName} Chain.`,\n// };\n\nconst formatFiat = (value) => {\n const number = Number(value).toLocaleString(\"en\", {\n currency: \"USD\",\n style: \"currency\",\n compactDisplay: \"short\",\n notation: \"compact\",\n maximumFractionDigits: 2,\n });\n return number;\n};\n\nconst formatPercent = (value) => {\n return `${Number(value * 100).toLocaleString(\"en\", {\n maximumFractionDigits: 2,\n })}%`;\n};\n\nconst sender = Ethers.send(\"eth_requestAccounts\", [])[0];\nif (!sender) {\n return (\n <Widget\n style={dexConfig.theme}\n src=\"bluebiu.near/widget/Arbitrum.Swap.ConnectButton\"\n props={{\n ...connectProps,\n isWrongNetwork: false,\n }}\n />\n );\n}\n\nconst {\n pairs,\n addresses,\n ammName,\n ammImage,\n proxyAddress,\n ALL_DATA_URL,\n ICON_VAULT_MAP,\n USER_DATA_BASE,\n FEES_BSC_PANCAKESWAP_URL,\n\n} = dexConfig\nasync function fetchAllData() {\n State.update({\n loading: true\n });\n asyncFetch(ALL_DATA_URL).then(result => {\n try {\n if (result.ok) {\n State.update({\n allData: JSON.parse(result.body)?.data,\n loading: false\n })\n }\n } catch (error) {\n State.update({\n loading: false\n })\n }\n }).catch(() => {\n State.update({\n loading: false\n })\n })\n}\n\nfunction handleChangeDataIndex(index) {\n state.dataIndex === index ? State.update({\n dataIndex: -1\n }) : State.update({\n dataIndex: index\n })\n}\nfunction handleChangeCategoryIndex(index) {\n State.update({\n categoryIndex: index\n })\n}\nfunction handleChangeChainIndex(index) {\n const chain = CHAIN_LIST[index]\n onSwitchChain({\n chainId: `0x${Number(chain.chain_id).toString(16)}`,\n });\n}\nfunction handleSearchInput(event) {\n State.update({\n token: event.target.value\n })\n}\nuseEffect(() => {\n if (state.dataList) {\n let filterList = []\n if (state.categoryIndex === 0) {\n filterList = state.dataList.filter(data => {\n const source = data.id.toUpperCase()\n const target = (state.token || '').toUpperCase()\n return source.indexOf(target) > -1\n })\n } else if (state.categoryIndex === 1 && state.userPositions) {\n state.dataList.forEach(data => {\n if (state.userPositions && addresses[data.id] in state.userPositions) {\n filterList.push(data)\n }\n })\n }\n State.update({\n filterList\n })\n }\n}, [state.dataList, state.token, state.categoryIndex])\n\nuseEffect(() => {\n const index = CHAIN_LIST.findIndex(chain => chain.id === curChain.id)\n if (index > -1) {\n State.update({\n chainIndex: index,\n allData: null,\n dataList: [],\n categoryIndex: 0,\n userPositions: null\n })\n fetchAllData()\n }\n}, [curChain])\nconst columnList = [{\n width: '30%',\n key: 'pool',\n label: 'Pool',\n type: 'slot',\n render: (data) => {\n return (\n <>\n <StyledVaultImage>\n <img style={{ marginRight: -6 }} src={ICON_VAULT_MAP[data.token0]} alt={data.token0} />\n <img src={ICON_VAULT_MAP[data.token1]} alt={data.token1} />\n </StyledVaultImage>\n <TdTxt>{data.token0} / {data.token1}</TdTxt>\n <PoolPercentage>{data.fee}%</PoolPercentage>\n </>\n )\n }\n}, {\n width: '10%',\n key: 'chain',\n label: 'Chain',\n type: 'slot',\n render: () => <img style={{ width: 26 }} src={curChain.logo} alt={curChain.name} />\n}, {\n width: '20%',\n key: 'amm',\n label: 'AMM',\n type: 'slot',\n render: () => {\n return (\n <>\n <img src={ammImage} alt={ammName} style={{ width: 22 }} />\n <TdTxt>{ammName}</TdTxt>\n </>\n )\n }\n}, {\n width: '10%',\n key: 'strategy',\n label: 'Strategy',\n type: 'slot',\n render: (data) => {\n return (\n <StrategyTxt>{data.strategy2 ? data.strategy2 : data.strategy}</StrategyTxt>\n )\n }\n}, {\n width: '10%',\n key: 'tvlUSD',\n label: 'TVL',\n type: 'slot',\n render: (data) => {\n return (\n <TdTxt>{formatFiat(data.tvlUSD)}</TdTxt>\n )\n }\n}, {\n width: '10%',\n key: 'totalApr',\n label: 'Total APR',\n type: 'slot',\n render: (data) => {\n return (\n <StyledDashedUndeline>\n <TdTxt>{data.totalApr}</TdTxt>\n </StyledDashedUndeline>\n )\n }\n}, {\n width: '10%',\n direction: 'column',\n key: 'liquidity',\n label: 'Your Liquidity',\n type: 'slot',\n render: (data, index) => {\n const userPositions = state.userPositions\n const userBalance = userPositions && addresses[data.id] in userPositions\n ? userPositions[addresses[data.id]].balanceUSD\n : undefined;\n return (\n <>\n <TdTxt>{userBalance ? `${formatFiat(userBalance)}` : \"-\"}</TdTxt>\n {data.liquidity && <TdTxt className=\"gray\">{data.liquidity} LP</TdTxt>}\n <SvgIcon className={[\"icon-right\", index === state.dataIndex ? \"rotate\" : \"\"]}>\n {IconRight}\n </SvgIcon>\n </>\n )\n }\n}]\n\nreturn state.loading ? <Widget src=\"bluebiu.near/widget/0vix.LendingSpinner\" /> : (\n <StyledColumn>\n {state.allData && (\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Data.RANGEPROTOCOL\"}\n props={{\n pairs,\n addresses,\n allData: state.allData,\n prices,\n curChain,\n multicallAddress,\n FEES_BSC_PANCAKESWAP_URL,\n // LAST_SNAP_SHOT_DATA_URL,\n onLoad: (data) => {\n State.update({\n dataList: data.dataList,\n loading: false\n })\n }\n }}\n />\n )}\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Bridge.Filter\"}\n props={{\n token: state.token,\n chains: CHAIN_LIST,\n categoryIndex: state.categoryIndex,\n chainIndex: state.chainIndex,\n onSearchInput: handleSearchInput,\n onChangeCategoryIndex: handleChangeCategoryIndex,\n onChangeChainIndex: handleChangeChainIndex,\n }}\n />\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Bridge.List\"}\n props={{\n toast,\n prices,\n columnList,\n userPositions: state.userPositions,\n dataIndex: state.dataIndex,\n onChangeDataIndex: handleChangeDataIndex,\n dataList: state.filterList,\n addresses,\n addAction,\n proxyAddress,\n multicallAddress,\n ICON_VAULT_MAP,\n }}\n />\n {!isChainSupported && (\n <Widget\n src=\"bluebiu.near/widget/Swap.ChainWarnigBox\"\n props={{\n chain: curChain,\n onSwitchChain: onSwitchChain,\n switchingChain: switchingChain,\n theme: dexConfig.theme?.button,\n }}\n />\n )}\n </StyledColumn>\n)" }, "Liquidity.Bridge.STEAKHUT.Detail": { "": "\nconst {\n // defaultPair,\n // pair,\n data,\n toast,\n prices,\n addresses,\n proxyAddress,\n addAction,\n userPositions,\n ICON_VAULT_MAP\n} = props;\n\nconst {\n StyledFont,\n StyledFlex\n} = VM.require('bluebiu.near/widget/Liquidity.Handler.Styles')\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n &.price-input {\n width: 500px;\n margin: 0 auto 20px;\n align-items: center;\n justify-content: center;\n gap: 14px;\n }\n`\nconst Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n`\nconst Wrapper = styled.div`\n \n`\nconst FilterButtonList = styled.div`\n margin-bottom: 20px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-top: 1px solid #373A53;\n border-bottom: 1px solid #373A53;\n`\nconst FilterButton = styled.div`\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 250px;\n height: 48px;\n border-left: 1px solid #373A53;\n border-right: 1px solid #373A53;\n color: #979ABE;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n &:first-of-type {\n border-right: none;\n }\n &.isActive {\n color: #FFF;\n &:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n bottom: -2px;\n height: 5px;\n flex-shrink: 0;\n background: #1362E4;\n }\n }\n`\nconst InputWrapList = styled.div`\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst Input = styled.input`\n border: none;\n outline: none;\n background: transparent;\n margin: 0;\n width: 100%;\n height: 100%;\n color: #FFF;\n font-family: Gantari;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n padding: 0 80px 0 10px;\n`\nconst InputSuffix = styled.div`\n position: absolute;\n top: 13px;\n right: 12px;\n display: flex;\n align-items: center;\n gap: 6px;\n span {\n color: #FFF;\n text-align: right;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n }\n img {\n width: 20px;\n border-radius: 50%;\n }\n\n`\nconst InputWrap = styled.div`\n position: relative;\n /* width: 243px; */\n height: 46px;\n /* flex-shrink: 0;\n fill: #1B1E27;\n stroke-width: 1px;\n stroke: #33364B; */\n background: #33364B;\n border-radius: 12px;\n border: 1px solid #33364B;\n input::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n }\n \n input::-webkit-outer-spin-button{\n -webkit-appearance: none !important;\n }\n input[type=\"number\"]{\n -moz-appearance: textfield;\n }\n &.inSufficient {\n border-color: #FF547D;\n }\n\n`\nconst StyledImageList = styled.div`\n display: flex;\n align-items: center;\n \n`\nconst PriceWrap = styled.div`\n margin-top: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\nconst TotalPrice = styled.span`\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n opacity: 0.3;\n`\nconst BalancePrice = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n color: #979ABE;\n text-align: right;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n span {\n color: #FFF;\n text-decoration-line: underline;\n }\n`\n\nconst StyledButtonList = styled.div`\n width: 500px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 14px;\n`\nconst StyledButton = styled.button`\n outline: none;\n border: none;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 46px;\n border-radius: 8px;\n /* background: #FFF; */\n /* color: #1E2028; */\n background-color: var(--button-color);\n color: var(--button-text-color);\n font-family: Gantari;\n font-size: 16px;\n font-weight: 500;\n &[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`\n\nconst StyledLoading = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n animation: rotate 1.5s linear infinite;\n @keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n`\n\nconst iconCircle = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8\" stroke=\"#1E2028\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n\n)\nconst defaultDeposit = props.tab === \"deposit\" || !props.tab;\n\n// const curPositionUSD = userPositions[data.vaultAddress]?.balanceUSD;\n\nState.init({\n isDeposit: defaultDeposit,\n lpBalance: \"\",\n balances: [],\n amount0: \"\",\n amount1: \"\",\n lpAmount: \"\",\n isError: false,\n isLoading: false,\n isToken0Approved: true,\n isToken1Approved: true,\n isToken0Approving: false,\n isToken1Approving: false,\n loadingMsg: \"\",\n isPostTx: false,\n showPairs: false,\n});\n\nconst getFromDepositAmount = (depositAmount, tokenDecimal) => {\n let a = new Big(depositAmount[0].toString());\n let b = new Big(depositAmount[1].toString());\n\n if (a.eq(0) && b.eq(0)) return \"0\";\n\n let diff;\n let midpoint;\n if (a.gt(b)) {\n diff = a.minus(b);\n midpoint = diff.div(new Big(2)).plus(b);\n } else {\n diff = b.minus(a);\n midpoint = diff.div(new Big(2)).plus(a);\n }\n\n for (let i = tokenDecimal; i > 0; i--) {\n const midpointFixed = midpoint\n .div(new Big(10).pow(tokenDecimal))\n .toFixed(i);\n if (\n a.div(Big(10).pow(tokenDecimal)).lte(midpointFixed) &&\n b.div(Big(10).pow(tokenDecimal)).gte(midpointFixed)\n ) {\n return midpointFixed;\n }\n }\n\n return \"0\";\n};\n\nconst sender = Ethers.send(\"eth_requestAccounts\", [])[0];\nconst { token0, token1, decimals0, decimals1, id, poolAddress } = data || defaultPair;\n\nconst hypeAddress = poolAddress;\n\nconst updateLPBalance = () => {\n const abi = [\"function balanceOf(address) view returns (uint256)\"];\n const contract = new ethers.Contract(\n ethers.utils.getAddress(poolAddress),\n abi,\n Ethers.provider()\n );\n contract.balanceOf(sender).then((balanceBig) => {\n const adjustedBalance = ethers.utils.formatUnits(balanceBig, 18);\n State.update({\n lpBalance: adjustedBalance,\n });\n });\n};\nconst updateBalance = (token) => {\n const { address, decimals, symbol } = token;\n if (symbol === \"ETH\") {\n Ethers.provider()\n .getBalance(sender)\n .then((balanceBig) => {\n const adjustedBalance = ethers.utils.formatEther(balanceBig);\n State.update({\n balances: {\n ...state.balances,\n [symbol]: adjustedBalance,\n },\n });\n });\n } else {\n const erc20Abi = [\"function balanceOf(address) view returns (uint256)\"];\n const tokenContract = new ethers.Contract(\n address,\n erc20Abi,\n Ethers.provider()\n );\n tokenContract.balanceOf(sender).then((balanceBig) => {\n const adjustedBalance = Big(\n ethers.utils.formatUnits(balanceBig, decimals)\n ).toString();\n State.update({\n balances: {\n ...state.balances,\n [symbol]: adjustedBalance,\n },\n });\n });\n }\n};\n\nconst {\n isDeposit,\n balances,\n amount0,\n amount1,\n isLoading,\n isError,\n isToken0Approved,\n isToken1Approved,\n isToken0Approving,\n isToken1Approving,\n loadingMsg,\n lpBalance,\n lpAmount,\n isPostTx,\n} = state;\n\nconst handleCheckApproval = (symbol, amount, decimals) => {\n const wei = ethers.utils.parseUnits(\n Big(amount).toFixed(decimals),\n decimals\n );\n const abi = [\n \"function allowance(address, address) external view returns (uint256)\",\n ];\n\n const contract = new ethers.Contract(\n addresses[symbol],\n abi,\n Ethers.provider()\n );\n\n contract\n .allowance(sender, hypeAddress)\n .then((allowance) => {\n State.update({\n [symbol === token0 ? 'isToken0Approved' : 'isToken1Approved']: !new Big(allowance.toString()).lt(wei),\n });\n })\n .catch((e) => console.log(e));\n}\nconst checkApproval = (amount, otherAmount, symbol) => {\n const otherSymbol = symbol === token0 ? token1 : token0\n const decimals = symbol === token0 ? decimals0 : decimals1\n const otherDecimals = symbol === token0 ? decimals1 : decimals0\n\n handleCheckApproval(symbol, amount, decimals)\n handleCheckApproval(otherSymbol, otherAmount, otherDecimals)\n};\nconst changeMode = (isDeposit) => {\n State.update({ isDeposit });\n};\n\nconst handleMax = (isToken0) => {\n if (isToken0) handleTokenChange(balances[token0], token0);\n else handleToken1Change(balances[token1], token1);\n};\n\nconst handleTokenChange = (amount, symbol) => {\n State.update({\n [symbol === token0 ? 'amount0' : 'amount1']: amount\n })\n if (Number(amount) === 0) {\n State.update({\n [symbol === token0 ? 'amount1' : 'amount0']: \"\",\n isToken0Approved: true,\n isToken1Approved: true\n })\n return;\n }\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Computing deposit amount...\"\n })\n\n const decimals = (symbol === token0 ? decimals0 : decimals1)\n const otherDecimals = symbol === token0 ? decimals1 : decimals0\n\n const amountXDesired = symbol === token0 ? Big(amount)\n .mul(Big(10).pow(decimals))\n .toFixed(0) : '1157920892373161954235709850086879078532699846656405'\n const amountYDesired = symbol === token1 ? Big(amount)\n .mul(Big(10).pow(decimals))\n .toFixed(0) : '1157920892373161954235709850086879078532699846656405'\n const abi = [{\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountXDesired\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountYDesired\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"calcSharesAndAmounts\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"shares\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountY\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }];\n const contract = new ethers.Contract(\n ethers.utils.getAddress(poolAddress),\n abi,\n Ethers.provider()\n );\n contract\n .calcSharesAndAmounts(amountXDesired, amountYDesired)\n .then((response) => {\n const amountX = ethers.utils.formatUnits(response[1], otherDecimals)\n const amountY = ethers.utils.formatUnits(response[2], otherDecimals)\n const otherAmount = symbol === token0 ? amountY : amountX // getFromDepositAmount(depositAmount, otherDecimals);\n State.update({\n [symbol === token0 ? 'amount1' : 'amount0']: otherAmount\n })\n State.update({\n isLoading: false,\n [symbol === token0 ? 'amount1' : 'amount0']: otherAmount\n })\n checkApproval(amount, otherAmount, symbol);\n })\n .catch((e) => {\n State.update({\n isLoading: true,\n isError: true,\n loadingMsg: \"Something went wrong. Please try again.\"\n })\n State.update({\n [symbol === token0 ? 'amount1' : 'amount0']: 0\n })\n });\n};\nconst handleGetUnderlyingAssets = (amount) => {\n const abi = [\n {\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"_shares\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"getUnderlyingAssets\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"totalX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"totalY\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n }\n ];\n\n try {\n const contract = new ethers.Contract(\n ethers.utils.getAddress(poolAddress),\n abi,\n Ethers.provider().getSigner()\n );\n contract\n .getUnderlyingAssets(Big(amount)\n .mul(Big(10).pow(18))\n .toFixed(0))\n .then(result => {\n const amountX = Number(ethers.utils.formatUnits(result[0], decimals0)).toFixed(5)\n const amountY = Number(ethers.utils.formatUnits(result[1], decimals1)).toFixed(5)\n State.update({\n amountX,\n amountY\n })\n })\n } catch (error) {\n console.log(error)\n }\n\n}\nconst handleLPChange = (amount) => {\n handleGetUnderlyingAssets(Number(amount))\n State.update({\n lpAmount: amount,\n });\n};\n\nconst handleApprove = (isToken0) => {\n const _token = isToken0 ? token0 : token1;\n const payload = isToken0\n ? { isToken0Approving: true }\n : { isToken1Approving: true };\n\n const amount = isToken0\n ? Big(amount0).toFixed(decimals0)\n : Big(amount1).toFixed(decimals1);\n\n const toastId = toast?.loading({\n title: `Approve ${amount} ${_token}`,\n });\n\n State.update({\n ...payload,\n isLoading: true,\n loadingMsg: `Approving ${_token}...`,\n });\n\n const tokenWei = ethers.utils.parseUnits(\n amount,\n isToken0 ? decimals0 : decimals1\n );\n\n const abi = [\"function approve(address, uint) public\"];\n\n const tokenContract = new ethers.Contract(\n addresses[_token],\n abi,\n Ethers.provider().getSigner()\n );\n\n tokenContract\n .approve(hypeAddress, tokenWei)\n .then((tx) => tx.wait())\n .then((receipt) => {\n const payload = isToken0\n ? { isToken0Approved: true, isToken0Approving: false }\n : { isToken1Approved: true, isToken1Approving: false };\n\n State.update({ ...payload, isLoading: false, loadingMsg: \"\" });\n toast?.dismiss(toastId);\n toast?.success({\n title: \"Approve Successfully!\",\n text: `Approve ${amount} ${_token}`,\n tx: receipt.transactionHash,\n chainId: props.chainId,\n });\n })\n .catch((error) => {\n State.update({\n isError: true,\n isLoading: false,\n loadingMsg: error,\n isToken0Approving: false,\n isToken1Approving: false,\n });\n toast?.dismiss(toastId);\n toast?.fail({\n title: \"Approve Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : `Approve ${amount} ${_token}`,\n });\n });\n};\nconst handleDeposit = () => {\n const toastId = toast?.loading({\n title: `Depositing...`,\n });\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Depositing...\",\n });\n\n const amountX = Big(amount0)\n .mul(Big(10).pow(decimals0))\n .toFixed(0);\n const amountY = Big(amount1)\n .mul(Big(10).pow(decimals1))\n .toFixed(0);\n\n const abi = [\n {\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountY\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountXMin\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountYMin\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"depositAVAXPair\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"shares\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountXActual\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountYActual\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountY\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountXMin\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountYMin\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"deposit\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"shares\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountXActual\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountYActual\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"nonpayable\",\n \"type\": \"function\"\n }\n ];\n\n const contract = new ethers.Contract(\n ethers.utils.getAddress(poolAddress),\n abi,\n Ethers.provider().getSigner()\n );\n console.log('===amountX', amountX, '===amountY', amountY)\n contract\n .depositAVAXPair(amountX, amountY, 0, 0, {\n value: amountX\n })\n .then((tx) => {\n return tx.wait();\n })\n .then((receipt) => {\n const { status, transactionHash } = receipt;\n // addAction?.({\n // type: \"Liquidity\",\n // action: \"Deposit\",\n // token0,\n // token1,\n // amount: amount0,\n // template: \"SteakHut\",\n // status: status,\n // add: can_add_action,\n // transactionHash,\n // chain_id: props.chainId,\n // });\n\n State.update({\n isLoading: false,\n isPostTx: true,\n });\n\n setTimeout(() => State.update({ isPostTx: false }), 10_000);\n\n const { refetch } = props;\n if (refetch) refetch();\n\n toast?.dismiss(toastId);\n toast?.success({\n title: \"Deposit Successfully!\",\n });\n })\n .catch((error) => {\n State.update({\n isError: true,\n isLoading: false,\n loadingMsg: error,\n });\n toast?.dismiss(toastId);\n toast?.fail({\n title: \"Deposit Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : \"\",\n });\n });\n};\n\nconst handleWithdraw = () => {\n const toastId = toast?.loading({\n title: `Withdrawing...`,\n });\n State.update({\n isLoading: true,\n isError: false,\n loadingMsg: \"Withdrawing...\",\n });\n\n const amount = ethers.utils.parseUnits(Big(lpAmount).toFixed(18), 18);\n const abi = [\n {\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"_shares\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"withdrawAVAXPair\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountY\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"nonpayable\",\n \"type\": \"function\"\n },\n {\n \"inputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"_shares\",\n \"type\": \"uint256\"\n }\n ],\n \"name\": \"withdraw\",\n \"outputs\": [\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountX\",\n \"type\": \"uint256\"\n },\n {\n \"internalType\": \"uint256\",\n \"name\": \"amountY\",\n \"type\": \"uint256\"\n }\n ],\n \"stateMutability\": \"nonpayable\",\n \"type\": \"function\"\n }\n ];\n\n const contract = new ethers.Contract(\n hypeAddress,\n abi,\n Ethers.provider().getSigner()\n );\n\n contract\n .withdrawAVAXPair(amount)\n .then((tx) => {\n return tx.wait();\n })\n .then((receipt) => {\n State.update({\n isLoading: false,\n isPostTx: true,\n });\n\n const { status, transactionHash } = receipt;\n\n addAction?.({\n type: \"Liquidity\",\n action: \"Withdraw\",\n token0,\n token1,\n amount: lpAmount,\n template: \"SteakHut\",\n status: status,\n add: can_add_action,\n transactionHash,\n chain_id: state.chainId,\n });\n\n setTimeout(() => State.update({ isPostTx: false }), 10_000);\n\n const { refetch } = props;\n if (refetch) refetch();\n\n toast?.dismiss(toastId);\n toast?.success({\n title: \"Withdraw Successfully!\",\n });\n })\n .catch((error) => {\n State.update({\n isError: true,\n isLoading: false,\n loadingMsg: error,\n });\n toast?.dismiss(toastId);\n toast?.fail({\n title: \"Withdraw Failed!\",\n text: error?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : \"\",\n });\n });\n};\n\nconst tokensPrice = prices;\nconst curPositionUSD = tokensPrice['USDC']\n\nconst isInSufficient =\n Number(amount0) > Number(balances[token0]) ||\n Number(amount1) > Number(balances[token1]);\n\nconst isWithdrawInsufficient = Number(lpAmount) > Number(lpBalance);\n\nconst balance0 =\n !amount0 || !tokensPrice?.[token0]\n ? \"-\"\n : parseFloat(Big(amount0).times(tokensPrice[token0]).toFixed(4));\n\nconst balance1 =\n !amount1 || !tokensPrice?.[token1]\n ? \"-\"\n : parseFloat(Big(amount1).times(tokensPrice[token1]).toFixed(4));\n\n\nconst balanceLp =\n !lpAmount || !lpBalance || !curPositionUSD\n ? \"-\"\n : parseFloat(\n Big(lpAmount)\n .div(Big(lpBalance).gt(0) ? lpBalance : 1)\n .times(curPositionUSD)\n .toFixed(4)\n );\n\nconst onUpdateLpPercent = (percent) => {\n State.update({\n lpPercent: percent,\n });\n};\n\nconst onChangeSlider = (percent) => {\n console.log(\"percent: \", percent);\n const newLpValue = Big(percent)\n .div(100)\n .times(lpBalance || 0)\n .toFixed(6);\n\n handleLPChange(newLpValue);\n};\n\nuseEffect(() => {\n if (!sender || !token0 || !token1) return;\n [\n { symbol: token0, address: addresses[token0], decimals: decimals0 },\n { symbol: token1, address: addresses[token1], decimals: decimals1 },\n ].map(updateBalance);\n\n updateLPBalance();\n}, [sender, token0, token1]);\n\nuseEffect(() => {\n if (amount0) {\n handleTokenChange(amount0, token0);\n }\n}, [data]);\n\nreturn (\n <Wrapper>\n <FilterButtonList>\n <FilterButton className={isDeposit ? 'isActive' : ''} onClick={() => changeMode(true)}>Deposit</FilterButton>\n <FilterButton className={!isDeposit ? 'isActive' : ''} onClick={() => changeMode(false)}>Withdraw</FilterButton>\n </FilterButtonList>\n {\n isDeposit ? <>\n <Row className=\"price-input\">\n <Column>\n <InputWrap className={Number(amount0) > Number(balances[token0]) ? \"inSufficient\" : \"\"}>\n <Input value={amount0} type=\"number\" onChange={(e) => handleTokenChange(e.target.value, token0)} />\n <InputSuffix>\n <img src={ICON_VAULT_MAP[token0]} alt={token0} />\n <span>{token0}</span>\n </InputSuffix>\n </InputWrap>\n <PriceWrap>\n <TotalPrice>${balance0}</TotalPrice>\n <BalancePrice>Balance:<span>{Big(balances[token0] ?? 0).toFixed(6)}</span> {token0}</BalancePrice>\n </PriceWrap>\n </Column>\n <Column>\n <InputWrap className={Number(amount1) > Number(balances[token1]) ? \"inSufficient\" : \"\"}>\n <Input value={amount1} type=\"number\" onChange={(e) => handleTokenChange(e.target.value, token1)} />\n <InputSuffix>\n <img src={ICON_VAULT_MAP[token1]} alt={token1} />\n <span>{token1}</span>\n </InputSuffix>\n </InputWrap>\n <PriceWrap>\n <TotalPrice>${balance1}</TotalPrice>\n <BalancePrice>Balance:<span>{Big(balances[token1] ?? 0).toFixed(6)}</span> {token1}</BalancePrice>\n </PriceWrap>\n </Column>\n </Row>\n <StyledButtonList>\n {isInSufficient && <StyledButton disabled>InSufficient Balance</StyledButton>}\n {\n !isInSufficient &&\n (isToken0Approved &&\n isToken1Approved &&\n !isToken0Approving &&\n !isToken1Approving ? (\n\n <StyledButton disabled={isLoading || !amount0 || !amount1} onClick={handleDeposit}>\n {\n isLoading ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n \"Deposit\"\n )\n }\n </StyledButton>\n ) : (\n <>\n <StyledButton disabled={isToken0Approved || isToken0Approving} onClick={() => handleApprove(true)}>{\n isToken0Approving ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n <>\n {isToken0Approved ? \"Approved\" : \"Approve\"} {token0}\n </>\n )}\n </StyledButton>\n <StyledButton disabled={isToken1Approved || isToken1Approving} onClick={() => handleApprove(false)}>{\n isToken1Approving ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n <>\n {isToken1Approved ? \"Approved\" : \"Approve\"} {token1}\n </>\n )}\n </StyledButton>\n </>\n ))\n }\n </StyledButtonList>\n </> : <>\n <Row className=\"price-input\">\n <Column>\n <InputWrap>\n <Input value={lpAmount} type=\"number\" onChange={(e) => {\n handleLPChange(e.target.value);\n\n const value = e.target.value;\n\n if (!value) {\n onUpdateLpPercent(0);\n }\n\n if (value && Big(value).gt(0)) {\n const newSliderPercent = Big(value || 0)\n .div(Big(lpBalance).gt(0) ? lpBalance : 1)\n .times(100)\n .toFixed(0);\n onUpdateLpPercent(newSliderPercent);\n }\n }} />\n\n <InputSuffix>\n <StyledImageList>\n <img src={ICON_VAULT_MAP[token0]} alt={token0} />\n <img src={ICON_VAULT_MAP[token1]} alt={token1} style={{ marginLeft: -6 }} />\n </StyledImageList>\n <span>{token0}/{token1}</span>\n </InputSuffix>\n </InputWrap>\n <PriceWrap>\n <TotalPrice>${balanceLp}</TotalPrice>\n <BalancePrice>Balance: <span\n onClick={() => {\n const newSliderPercent = Big(lpBalance || 0)\n .div(Big(lpBalance).gt(0) ? lpBalance : 1)\n .times(100)\n .toFixed(0);\n\n onUpdateLpPercent(newSliderPercent);\n\n handleLPChange(lpBalance);\n }}\n className=\"v\"\n >\n {lpBalance}\n </span></BalancePrice>\n </PriceWrap>\n\n <StyledFlex justifyContent=\"space-between\" style={{ marginTop: 16 }}>\n <StyledFont color=\"#979ABE\">Est. Receive</StyledFont>\n <StyledFlex gap=\"26px\">\n <StyledFlex gap=\"9px\">\n <img style={{ width: 20, height: 20, borderRadius: '50%', overflow: 'hidden' }} src={ICON_VAULT_MAP[token0]} alt={token0} />\n <StyledFont color=\"#FFF\" fontWeight=\"500\">{state.amountX} {token0}</StyledFont>\n </StyledFlex>\n <StyledFont color=\"#979ABE\">+</StyledFont>\n <StyledFlex gap=\"9px\">\n <img style={{ width: 20, height: 20, borderRadius: '50%', overflow: 'hidden' }} src={ICON_VAULT_MAP[token1]} alt={token1} />\n <StyledFont color=\"#FFF\" fontWeight=\"500\">{state.amountY} {token1}</StyledFont>\n </StyledFlex>\n </StyledFlex>\n </StyledFlex>\n </Column>\n </Row>\n <StyledButtonList>\n <StyledButton\n disabled={isWithdrawInsufficient || isLoading || !lpAmount}\n onClick={handleWithdraw}\n >\n {isLoading ? (\n <StyledLoading>{iconCircle}</StyledLoading>\n ) : (\n <>\n {isWithdrawInsufficient ? \"InSufficient Balance\" : \"Withdraw\"}\n </>\n )}\n </StyledButton>\n </StyledButtonList>\n </>\n }\n\n </Wrapper>\n)" }, "Liquidity.RANGEPROTOCOL": { "": "const StyledContainer = styled.div`\n`\n\nconst {\n dexConfig\n} = props\nreturn (\n <StyledContainer style={dexConfig.theme}>\n <Widget\n src=\"bluebiu.near/widget/Liquidity.Connector.RANGEPROTOCOL\"\n props={{\n ...props\n }}\n />\n </StyledContainer>\n)" }, "Liquidity.Bridge.STEAKHUT.List": { "": "const Wrapper = styled.div`\n margin-top: 20px;\n`\nconst SvgIcon = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n &.icon-right {\n position: absolute;\n right: 28px;\n top: 50%;\n transform: translateY(-50%);\n\n &.rotate {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n`\nconst Table = styled.div`\n \n`\nconst THead = styled.div`\n display: flex;\n align-items: center;\n padding: 12px 30px;\n`\nconst Th = 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\n &:first-of-type {\n width: 40%;\n }\n &:nth-of-type(2) {\n width: 10%;\n }\n &:nth-of-type(3) {\n width: 10%;\n }\n &:nth-of-type(4) {\n width: 10%;\n }\n &:nth-of-type(5) {\n width: 10%;\n }\n &:nth-of-type(6) {\n width: 10%;\n }\n &:nth-of-type(7) {\n width: 10%;\n }\n`\nconst TBody = styled.div`\n`\nconst TrWrapper = styled.div`\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n border: 1px solid #373A53;\n margin-bottom: 8px;\n overflow: hidden;\n`\nconst Tr = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 84px;\n background: #262836;\n padding: 0 24px;\n`\nconst Td = styled.div`\n position: relative;\n display: flex;\n gap: 6px;\n &.column {\n flex-direction: column;\n gap: 5px;\n }\n &:first-of-type {\n width: 40%;\n }\n &:nth-of-type(2) {\n width: 10%;\n }\n &:nth-of-type(3) {\n width: 10%;\n }\n &:nth-of-type(4) {\n width: 10%;\n }\n &:nth-of-type(5) {\n width: 10%;\n }\n &:nth-of-type(6) {\n width: 10%;\n }\n &:nth-of-type(7) {\n width: 10%;\n }\n`\nconst TdTxt = styled.div`\n color: #FFF;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n &.gray {\n color: #979ABE;\n font-size: 12px;\n }\n`\nconst PoolPercentage = styled.div`\n padding: 3px 8px;\n border-radius: 24px;\n background: rgba(151, 154, 190, 0.1);\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StrategyTxt = styled.div`\n padding: 7px 10px;\n border-radius: 6px;\n background: rgba(151, 154, 190, 0.1);\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 StyledVaultImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst {\n toast,\n prices,\n dataList,\n dataIndex,\n columnList,\n onChangeDataIndex,\n addresses,\n addAction,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n} = props\n\nfunction renderTD(data, column, index) {\n if (column.type === 'slot') {\n return column.render(data, index)\n }\n if (column.type === 'svg') {\n return (\n <SvgIcon>\n {data[column.key]}\n </SvgIcon>\n )\n }\n return (\n <TdTxt>{data[column.key]}</TdTxt>\n )\n}\nreturn (\n <Wrapper>\n {\n\n <Table>\n <THead>\n {\n columnList.map((column, index) => {\n return (\n <Th key={index} style={{ width: column.width }}>{column.label}</Th>\n )\n })\n }\n </THead>\n <TBody>\n {dataList && dataList.map((data, index) => {\n return (\n <TrWrapper key={data.id}>\n <Tr onClick={() => onChangeDataIndex(index)}>\n {\n columnList.map((column, columnIndex) => {\n return (\n <Td key={index + columnIndex} className={column.direction === 'column' ? 'column' : ''} style={{ width: column.width }}>{renderTD(data, column, index, columnIndex)}</Td>\n )\n })\n }\n </Tr>\n {index === dataIndex && <Widget\n key={data.id}\n src={\"bluebiu.near/widget/Liquidity.Bridge.STEAKHUT.Detail\"}\n props={{\n data: dataList[dataIndex],\n toast,\n theme,\n prices,\n addresses,\n addAction,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n }}\n />}\n </TrWrapper>\n )\n })}\n\n </TBody>\n </Table>\n }\n </Wrapper>\n)" } } } } }