Transaction: 4kGabfi...Djcv

{ "data": { "bluebiu.near": { "widget": { "Swap.Data.AggLayerAmountOut": { "": "const {\n updater,\n wethAddress,\n inputCurrency,\n outputCurrency,\n inputCurrencyAmount,\n onLoad,\n slippage,\n account,\n prices,\n name,\n quoterPath,\n curChain,\n} = props;\n\nuseEffect(() => {\n if (!updater) return;\n\n if (\n (!inputCurrency.address && !inputCurrency.isNative) ||\n (!outputCurrency.address && !outputCurrency.isNative) ||\n !inputCurrencyAmount\n ) {\n return;\n }\n\n const wrapType =\n inputCurrency.isNative && outputCurrency.address === wethAddress\n ? 1\n : inputCurrency.address === wethAddress && outputCurrency.isNative\n ? 2\n : 0;\n\n if (wrapType) {\n const WethContract = new ethers.Contract(\n wethAddress,\n [\n {\n constant: false,\n inputs: [],\n name: \"deposit\",\n outputs: [],\n payable: true,\n stateMutability: \"payable\",\n type: \"function\",\n },\n {\n constant: false,\n inputs: [{ internalType: \"uint256\", name: \"wad\", type: \"uint256\" }],\n name: \"withdraw\",\n outputs: [],\n payable: false,\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n ],\n Ethers.provider().getSigner()\n );\n let params = [];\n let options = {};\n let method = \"\";\n if (wrapType === 1) {\n method = \"deposit\";\n options.value = ethers.utils.parseEther(\n Big(inputCurrencyAmount).toFixed(18).toString()\n );\n } else {\n method = \"withdraw\";\n params = [\n ethers.utils.parseEther(\n Big(inputCurrencyAmount).toFixed(18).toString()\n ),\n ];\n }\n const returnData = {\n inputCurrency,\n inputCurrencyAmount,\n outputCurrency,\n outputCurrencyAmount: inputCurrencyAmount,\n noPair: false,\n routes: null,\n routerStr: \"\",\n gas: \"\",\n priceImpact: \"\",\n };\n const getTx = (_gas) => {\n WethContract.populateTransaction[method](...params, {\n ...options,\n gasLimit: _gas || 4000000,\n })\n .then((res) => {\n onLoad({\n ...returnData,\n gas: _gas,\n unsignedTx: res,\n });\n })\n .catch((err) => {\n onLoad({\n ...returnData,\n });\n });\n };\n const estimateGas = () => {\n WethContract.estimateGas[method](...params, options)\n .then((_gas) => {\n getTx(_gas);\n })\n .catch((err) => {\n console.log(err);\n getTx();\n });\n };\n estimateGas();\n return;\n }\n asyncFetch(quoterPath, {\n method: \"post\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n template: name,\n inputCurrency,\n outputCurrency,\n inputAmount: inputCurrencyAmount,\n slippage: slippage || 0.005,\n account,\n chain: curChain,\n }),\n })\n .then((res) => {\n const data = res.body?.data;\n if (!data || data.noPair) throw Error;\n let priceImpact = null;\n\n if (\n prices &&\n prices[inputCurrency.symbol] &&\n prices[outputCurrency.symbol]\n ) {\n const poolPrice = Big(prices[inputCurrency.symbol] || 1).div(\n prices[outputCurrency.symbol] || 1\n );\n const amountoutPrice = Big(data.outputCurrencyAmount).div(\n inputCurrencyAmount\n );\n\n priceImpact = poolPrice\n .minus(amountoutPrice)\n .div(poolPrice)\n .mul(100)\n .toString();\n }\n onLoad({\n inputCurrency,\n inputCurrencyAmount,\n outputCurrency,\n priceImpact,\n gas: data.txn.gasLimit,\n ...data,\n unsignedTx: data.txn,\n });\n })\n .catch((err) => {\n onLoad({\n inputCurrency,\n inputCurrencyAmount,\n outputCurrency,\n outputCurrencyAmount: \"\",\n noPair: true,\n routes: null,\n routerStr: \"\",\n gas: \"\",\n priceImpact: \"\",\n });\n });\n}, [updater]);\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": "" } } }, "Swap.Content": { "": "const {\n chainId,\n dexConfig,\n account,\n chainIdNotSupport,\n name,\n CHAIN_LIST,\n curChain,\n wethAddress,\n prices,\n onSwitchChain,\n} = props;\n\nuseEffect(() => {\n State.update({\n inputCurrency: dexConfig.defaultCurrencies.input,\n outputCurrency: dexConfig.defaultCurrencies.output,\n uniType: dexConfig.type,\n inputCurrencyAmount: \"1\",\n outputCurrencyAmount: \"\",\n maxInputBalance: \"0\",\n maxOutputBalance: \"0\",\n tradeType: \"in\",\n targetUnitAmount: 0,\n noPair: false,\n updateInputTokenBalance: true,\n updateOutputTokenBalance: true,\n loading: true,\n displayCurrencySelect: false,\n selectedTokenAddress: \"\",\n currencySelectType: 0,\n });\n}, [curChain]);\n// styled area\n\nconst PanelLabelWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-bottom: 16px;\n padding-left: 16px;\n\n color: var(--agg-text-color, white);\n font-size: 20px;\n font-weight: 700;\n line-height: 22px;\n\n .chain-icon {\n width: 26px;\n height: 26px;\n border-radius: 8px;\n }\n`;\nconst PanelHeader = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nconst SwapContainer = styled.div``;\n\nconst BackRoute = styled.div`\n position: absolute;\n width: 100vw;\n left: 0;\n top: 0;\n border-bottom: 1px solid #343838;\n display: flex;\n align-items: center;\n gap: 12px;\n\n .back-icon {\n padding-left: 100px;\n padding-right: 8px;\n }\n\n .dapp-logo {\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n .dapp-name {\n font-size: 16px;\n font-style: italic;\n font-weight: 900;\n line-height: 24px;\n letter-spacing: 0em;\n text-align: left;\n color: var(--button-color);\n }\n`;\n\nconst Panel = styled.div`\n width: 100%;\n position: relative;\n padding: 24px 16px 16px;\n border-radius: 16px;\n border: 1px solid var(--agg-border-color, #373a53);\n background: var(--agg-bg-color, #262836);\n`;\n\nconst ExchangeIconWrapper = styled.div`\n position: relative;\n width: 100%;\n height: 10px;\n`;\n\nconst ExchangeIcon = styled.div`\n height: 34px;\n position: absolute;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n svg {\n color: var(--agg-text-color, #fff);\n }\n`;\nconst PanelLabel = styled.div``;\n\nconst PanelSettings = styled.div`\n display: flex;\n align-items: center;\n padding-right: 13px;\n gap: 14px;\n .setting_btn {\n cursor: pointer;\n position: relative;\n }\n`;\n\nconst ResultItem = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--agg-thirdry-color, #979abe);\n font-size: 14px;\n font-weight: 400;\n margin-bottom: 16px;\n`;\n\n// styled area end\n\nuseEffect(() => {\n const debounce = (fn, wait) => {\n let timer;\n return () => {\n clearTimeout(timer);\n timer = setTimeout(fn, wait);\n };\n };\n\n const getBestTrade = () => {\n State.update({\n loading: true,\n unsignedTx: \"\",\n outputCurrencyAmount: \"\",\n gas: undefined,\n priceImpact: 0,\n noPair: true,\n });\n };\n\n const debouncedGetBestTrade = debounce(getBestTrade, 1000);\n\n State.update({\n getBestTrade,\n debouncedGetBestTrade,\n });\n\n Storage.privateSet(\"_token_cacher\", {\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n });\n}, []);\n\nuseEffect(() => {\n if (state.loading || !state.getBestTrade) return;\n const cachedTimer = Storage.privateGet(\"_swap_timer\");\n clearTimeout(cachedTimer);\n const _timer = setTimeout(() => {\n state.getBestTrade();\n }, 30000);\n Storage.privateSet(\"_swap_timer\", _timer);\n}, [state.loading]);\n\nconst backIcon = (\n <svg\n width=\"8\"\n height=\"13\"\n viewBox=\"0 0 8 13\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7 12L2 6.5L7 1\"\n stroke=\"#979ABE\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n);\n\nconst getUnitAmount = () => {\n const bigInputAmount = Big(state.inputCurrencyAmount || 0);\n const bigOutputAmount = Big(state.outputCurrencyAmount || 0);\n if (bigInputAmount.eq(0) || bigOutputAmount.eq(0)) return \"-\";\n const unitAmount = bigOutputAmount.div(bigInputAmount);\n if (unitAmount.lt(0.001)) return unitAmount.toPrecision(1);\n return unitAmount.toFixed(3);\n};\n\nreturn (\n <SwapContainer>\n <Panel>\n <PanelHeader>\n <PanelLabelWrapper>\n <PanelLabel>Swap on</PanelLabel>\n <img className=\"chain-icon\" src={curChain.logo} />\n <Widget\n props={{\n CHAIN_LIST,\n curChain,\n onSwitchChain,\n }}\n src=\"bluebiu.near/widget/Swap.ChainListDropDown\"\n />\n </PanelLabelWrapper>\n <PanelSettings>\n <div\n className=\"setting_btn\"\n onClick={(ev) => {\n State.update({\n showSlippageSetting: !state.showSlippageSetting,\n });\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n >\n <path\n d=\"M17.5879 7.375C17.584 7.33984 17.5801 7.31055 17.5742 7.29297V7.27734L17.5664 7.23438C17.4277 6.55859 16.9805 6.12305 16.4238 6.12305H16.332C15.3828 6.12305 14.6133 5.34961 14.6133 4.4043C14.6133 4.18555 14.7148 3.875 14.7578 3.76562C15.0273 3.13672 14.7402 2.41992 14.0742 2.05469L11.9785 0.869141L11.9395 0.855469C11.7832 0.804687 11.6016 0.744141 11.3984 0.744141C11.0195 0.744141 10.5938 0.919922 10.3301 1.18359C10 1.50977 9.33008 1.99609 8.93164 1.99609C8.53516 1.99609 7.86328 1.51172 7.5332 1.18359C7.25195 0.90625 6.86328 0.744141 6.46484 0.744141C6.25586 0.744141 6.08008 0.802734 5.92383 0.855469L5.88867 0.869141L3.69141 2.05859L3.67773 2.06641C3.14453 2.40039 2.92773 3.16602 3.19922 3.77344L3.20312 3.78125L3.20703 3.78906C3.25 3.88477 3.38281 4.20898 3.38281 4.49219C3.38281 5.44141 2.60938 6.21094 1.66406 6.21094H1.57227C0.990234 6.21094 0.554687 6.64063 0.429687 7.33008L0.421875 7.36914V7.38281C0.421875 7.40234 0.414062 7.42969 0.408203 7.46484C0.359375 7.75977 0.242188 8.45508 0.242188 9.02344C0.242188 9.5918 0.357422 10.2871 0.408203 10.582C0.412109 10.6172 0.416016 10.6465 0.421875 10.6641V10.6797L0.429687 10.7227C0.568359 11.3984 1.01562 11.834 1.57227 11.834H1.61914C2.56836 11.834 3.33789 12.6074 3.33789 13.5527C3.33789 13.7715 3.23633 14.082 3.19336 14.1914C2.93359 14.7832 3.17969 15.543 3.75391 15.9258L3.76953 15.9336L5.83984 17.0859L5.87891 17.0996C6.03516 17.1504 6.21289 17.2109 6.41602 17.2109C6.84961 17.2109 7.24023 17.0449 7.48438 16.7715C7.50781 16.7539 7.53125 16.7305 7.55859 16.707C7.80859 16.4883 8.48047 15.9102 8.92383 15.9102C9.25391 15.9102 9.80664 16.2559 10.3633 16.8125C10.6445 17.0898 11.0332 17.252 11.4316 17.252C11.7012 17.252 11.9004 17.1777 12.127 17.0664L12.1348 17.0625L14.2578 15.8887L14.2656 15.8809C14.7988 15.5469 15.0156 14.7813 14.7441 14.1738L14.7402 14.166L14.7363 14.1582C14.7324 14.1562 14.5664 13.8105 14.5977 13.5L14.6016 13.4805V13.4609C14.6016 12.5117 15.375 11.7422 16.3203 11.7422H16.418C17 11.7422 17.4355 11.3125 17.5605 10.623L17.5684 10.584V10.5703C17.5723 10.5547 17.5762 10.5312 17.582 10.5C17.6328 10.2129 17.75 9.54297 17.75 8.92969C17.7539 8.36328 17.6387 7.66992 17.5879 7.375ZM8.99414 11.7188C7.49219 11.7188 6.27539 10.502 6.27539 9C6.27539 7.49805 7.49219 6.28125 8.99414 6.28125C10.4961 6.28125 11.7129 7.49805 11.7129 9C11.7129 10.502 10.4961 11.7188 8.99414 11.7188Z\"\n fill=\"#979ABE\"\n />\n </svg>\n </div>\n <div\n className=\"setting_btn\"\n onClick={(ev) => {\n state.getBestTrade();\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_2970_2119)\">\n <path\n d=\"M12.0248 7.0921C11.8208 6.9961 11.7278 6.8671 11.7458 6.7051C11.7638 6.5431 11.8328 6.4141 11.9528 6.3181C11.9888 6.2941 12.1058 6.2011 12.3038 6.0391C12.5018 5.8771 12.7448 5.6821 13.0328 5.4541C12.5288 4.8781 11.9288 4.4251 11.2328 4.0951C10.5368 3.7651 9.78081 3.6001 8.96481 3.6001C8.20881 3.6001 7.50081 3.7411 6.84081 4.0231C6.18081 4.3051 5.60481 4.6921 5.11281 5.1841C4.62081 5.6761 4.23381 6.2521 3.95181 6.9121C3.66981 7.5721 3.52881 8.2801 3.52881 9.0361C3.52881 9.7801 3.66981 10.4821 3.95181 11.1421C4.23381 11.8021 4.62081 12.3781 5.11281 12.8701C5.60481 13.3621 6.18081 13.7491 6.84081 14.0311C7.50081 14.3131 8.20881 14.4541 8.96481 14.4541C9.58881 14.4541 10.1798 14.3551 10.7378 14.1571C11.2958 13.9591 11.8058 13.6801 12.2678 13.3201C12.7298 12.9601 13.1258 12.5371 13.4558 12.0511C13.7858 11.5651 14.0288 11.0341 14.1848 10.4581C14.2688 10.1821 14.4248 9.9541 14.6528 9.7741C14.8808 9.5941 15.1508 9.5041 15.4628 9.5041C15.8348 9.5041 16.1498 9.6361 16.4078 9.9001C16.6658 10.1641 16.7948 10.4761 16.7948 10.8361C16.7948 11.0041 16.7648 11.1661 16.7048 11.3221C16.4528 12.1621 16.0808 12.9361 15.5888 13.6441C15.0968 14.3521 14.5118 14.9611 13.8338 15.4711C13.1558 15.9811 12.4028 16.3801 11.5748 16.6681C10.7468 16.9561 9.87681 17.1001 8.96481 17.1001C7.84881 17.1001 6.79881 16.8901 5.81481 16.4701C4.83081 16.0501 3.97581 15.4741 3.24981 14.7421C2.52381 14.0101 1.94781 13.1551 1.52181 12.1771C1.09581 11.1991 0.882812 10.1521 0.882812 9.0361C0.882813 7.9201 1.09581 6.8701 1.52181 5.8861C1.94781 4.9021 2.52381 4.0471 3.24981 3.3211C3.97581 2.5951 4.83081 2.0191 5.81481 1.5931C6.79881 1.1671 7.84881 0.954102 8.96481 0.954102C10.2008 0.954102 11.3468 1.2091 12.4028 1.7191C13.4588 2.2291 14.3588 2.9221 15.1028 3.7981C15.3788 3.5941 15.6098 3.4171 15.7958 3.2671C15.9818 3.1171 16.0988 3.0241 16.1468 2.9881C16.2188 2.9281 16.2968 2.8831 16.3808 2.8531C16.4648 2.8231 16.5428 2.8231 16.6148 2.8531C16.6868 2.8831 16.7498 2.9461 16.8038 3.0421C16.8578 3.1381 16.8968 3.2821 16.9208 3.4741C16.9328 3.5821 16.9448 3.7651 16.9568 4.0231C16.9688 4.2811 16.9808 4.5811 16.9928 4.9231C17.0048 5.2651 17.0108 5.6191 17.0108 5.9851C17.0108 6.3511 17.0048 6.6961 16.9928 7.0201C16.9808 7.4281 16.8848 7.7221 16.7048 7.9021C16.6088 7.9981 16.4648 8.0521 16.2728 8.0641C16.0808 8.0761 15.8768 8.0581 15.6608 8.0101C15.3368 7.9381 14.9798 7.8601 14.5898 7.7761C14.1998 7.6921 13.8278 7.6051 13.4738 7.5151C13.1198 7.4251 12.8078 7.3411 12.5378 7.2631C12.2678 7.1851 12.0968 7.1281 12.0248 7.0921Z\"\n fill=\"#979ABE\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_2970_2119\">\n <rect width=\"18\" height=\"18\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n </PanelSettings>\n </PanelHeader>\n <Widget\n src=\"bluebiu.near/widget/Swap.CurrencyInput\"\n props={{\n type: \"in\",\n currency: state.inputCurrency,\n chainIdNotSupport,\n amount: state.inputCurrencyAmount,\n updateTokenBalance: state.updateInputTokenBalance,\n prices,\n account,\n onCurrencySelectOpen: () => {\n State.update({\n displayCurrencySelect: true,\n currencySelectType: 0,\n selectedTokenAddress: state.inputCurrency.address,\n });\n },\n onUpdateCurrencyBalance: (balance) => {\n State.update({\n maxInputBalance: ethers.utils.formatUnits(\n balance,\n state.inputCurrency.decimals\n ),\n updateInputTokenBalance: false,\n });\n },\n onAmountChange: (val) => {\n State.update({\n inputCurrencyAmount: val,\n tradeType: \"in\",\n loading: false,\n });\n if (val && Number(val)) state.debouncedGetBestTrade();\n },\n }}\n />\n <ExchangeIconWrapper>\n <ExchangeIcon\n onClick={() => {\n if (state.loading) return;\n const [inputCurrency, outputCurrency] = [\n state.outputCurrency,\n state.inputCurrency,\n ];\n State.update({\n inputCurrency,\n outputCurrency,\n outputCurrencyAmount: \"\",\n tradeType: \"in\",\n updateInputTokenBalance: true,\n updateOutputTokenBalance: true,\n loading: false,\n });\n Storage.privateSet(\"_token_cacher\", {\n inputCurrency,\n outputCurrency,\n });\n if (Big(state.inputCurrencyAmount || 0).gt(0))\n state.debouncedGetBestTrade();\n }}\n >\n <Widget src=\"bluebiu.near/widget/Swap.ExchangeIcon\" />\n </ExchangeIcon>\n </ExchangeIconWrapper>\n\n <Widget\n src=\"bluebiu.near/widget/Swap.CurrencyInput\"\n props={{\n type: \"out\",\n currency: state.outputCurrency,\n chainIdNotSupport,\n amount: state.outputCurrencyAmount,\n updateTokenBalance: state.updateOutputTokenBalance,\n disabled: true,\n prices,\n account,\n onCurrencySelectOpen: () => {\n State.update({\n displayCurrencySelect: true,\n currencySelectType: 1,\n selectedTokenAddress: state.outputCurrency.address,\n });\n },\n onUpdateCurrencyBalance: () => {\n State.update({\n updateOutputTokenBalance: false,\n });\n },\n }}\n />\n <Widget\n src=\"bluebiu.near/widget/Swap.Result\"\n props={{\n outputCurrency: state.outputCurrency,\n outputCurrencyAmount: state.outputCurrencyAmount,\n inputCurrency: state.inputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n priceImpact: state.priceImpact,\n gas: state.gas,\n nativeCurrency: props.nativeCurrency,\n prices,\n routerStr: props.routerStr,\n routes: state.routes,\n }}\n />\n <Widget\n src=\"bluebiu.near/widget/Arbitrum.Swap.SwapButton\"\n props={{\n routerAddress: dexConfig.routerAddress || state.routerAddress,\n wethAddress,\n title: name,\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n outputCurrencyAmount: state.outputCurrencyAmount,\n maxInputBalance: state.maxInputBalance,\n addAction: props.addAction,\n toast: props.toast,\n noPair: state.noPair,\n loading: state.loading,\n add: state.add,\n unsignedTx: state.unsignedTx,\n chainId: props.chainId,\n gas: state.gas,\n chainIdNotSupport: props.chainIdNotSupport,\n account,\n onSuccess: () => {\n State.update({\n updateInputTokenBalance: true,\n updateOutputTokenBalance: true,\n });\n },\n onApprovedSuccess: () => {\n state.getBestTrade();\n },\n }}\n />\n </Panel>\n {state.displayCurrencySelect && (\n <Widget\n src=\"bluebiu.near/widget/Swap.CurrencySelect\"\n props={{\n display: state.displayCurrencySelect,\n chainIdNotSupport,\n selectedTokenAddress: state.selectedTokenAddress,\n chainId: props.chainId,\n tokens: dexConfig.tokens,\n account,\n onClose: () => {\n State.update({\n displayCurrencySelect: false,\n });\n },\n onSelect: (currency) => {\n const updatedParams = {\n outputCurrencyAmount: \"\",\n noPair: false,\n };\n let hasToken = false;\n if (state.currencySelectType === 0) {\n updatedParams.inputCurrency = currency;\n updatedParams.updateInputTokenBalance = true;\n hasToken = true;\n if (currency.address === state.outputCurrency.address) {\n updatedParams.outputCurrency = null;\n hasToken = false;\n }\n }\n if (state.currencySelectType === 1) {\n updatedParams.outputCurrency = currency;\n updatedParams.updateOutputTokenBalance = true;\n hasToken = true;\n if (currency.address === state.inputCurrency.address) {\n updatedParams.inputCurrency = null;\n updatedParams.inputCurrencyAmount = \"\";\n hasToken = false;\n }\n }\n Storage.privateSet(\"_token_cacher\", {\n inputCurrency: updatedParams.inputCurrency || state.inputCurrency,\n outputCurrency:\n updatedParams.outputCurrency || state.outputCurrency,\n });\n\n State.update({ ...updatedParams, loading: false });\n\n if (\n state.inputCurrencyAmount &&\n Number(state.inputCurrencyAmount) &&\n hasToken\n ) {\n state.debouncedGetBestTrade();\n }\n },\n }}\n />\n )}\n\n {!chainIdNotSupport && account && dexConfig.amountOutFn && (\n <Widget\n src={dexConfig.amountOutFn}\n props={{\n updater: state.loading,\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n account,\n wethAddress,\n prices,\n curChain,\n ...dexConfig,\n slippage: state.slippage ? state.slippage / 100 : 0.005,\n multicallAddress: props.multicallAddress,\n multicall: props.multicall,\n onLoad: (data) => {\n const cachedTokens = Storage.privateGet(\"_token_cacher\");\n\n if (\n data.inputCurrencyAmount !== state.inputCurrencyAmount ||\n (cachedTokens &&\n (data.inputCurrency.address !==\n cachedTokens.inputCurrency.address ||\n data.outputCurrency.address !==\n cachedTokens.outputCurrency.address))\n )\n return;\n State.update({\n loading: false,\n priceImpact: null,\n ...data,\n });\n },\n }}\n />\n )}\n\n {state.showSlippageSetting && (\n <Widget\n src=\"bluebiu.near/widget/Swap.SlippageSetting\"\n props={{\n slippage: state.slippage,\n onSetSlippage: (slippage) => {\n State.update({\n slippage,\n });\n },\n onClose: () => {\n State.update({\n showSlippageSetting: false,\n });\n },\n }}\n />\n )}\n </SwapContainer>\n);\n" } } } } }