Transaction: CNRUN2S...RCqb

{ "data": { "bluebiu.near": { "widget": { "Arbitrum.Swap.SwapButton": { "": "const SwapButton = styled.button`\n width: 100%;\n height: 60px;\n border-radius: 10px;\n background-color: var(--button-color);\n color: var(--button-text-color);\n font-size: 18px;\n line-height: 22px;\n border: none;\n transition: 0.5s;\n cursor: pointer;\n font-weight: 700;\n :hover {\n opacity: 0.8;\n }\n &:disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n @media (max-width: 900px) {\n height: 40px;\n font-size: 16px;\n }\n`;\nconst account = Ethers.send(\"eth_requestAccounts\", [])[0];\nif (props.noPair) {\n return <SwapButton disabled>Insufficient Liquidity</SwapButton>;\n}\n\nif (props.loading) {\n return <SwapButton disabled>Getting Trade Info...</SwapButton>;\n}\n\nconst {\n inputCurrency,\n outputCurrency,\n inputCurrencyAmount,\n outputCurrencyAmount,\n maxInputBalance,\n onSuccess,\n routerAddress,\n wethAddress,\n title,\n fee,\n uniType,\n chainName,\n handlerV2,\n handlerV3,\n handlerSolidly,\n handleSyncswap,\n stable,\n syncSwapPoolAddress,\n} = props;\nconsole.log(\"props: \", props);\n\nif (Big(inputCurrencyAmount || 0).eq(0)) {\n return <SwapButton disabled>Enter An Amount</SwapButton>;\n}\nif (!inputCurrency || !outputCurrency) {\n return <SwapButton disabled>Select a token</SwapButton>;\n}\nif (Big(outputCurrencyAmount).lt(\"0.00000000001\")) {\n return <SwapButton disabled>Insufficient Liquidity</SwapButton>;\n}\nif (Big(inputCurrencyAmount || 0).gt(maxInputBalance)) {\n return (\n <SwapButton disabled>\n Insufficient {inputCurrency?.symbol} Balance\n </SwapButton>\n );\n}\n\nState.init({\n isApproved: false,\n approving: false,\n swapping: false,\n wrapping: false,\n});\n\nconst getAllowance = () => {\n const TokenContract = new ethers.Contract(\n inputCurrency.address,\n [\n {\n constant: true,\n inputs: [\n {\n name: \"_owner\",\n type: \"address\",\n },\n {\n name: \"_spender\",\n type: \"address\",\n },\n ],\n name: \"allowance\",\n outputs: [\n {\n name: \"\",\n type: \"uint256\",\n },\n ],\n payable: false,\n stateMutability: \"view\",\n type: \"function\",\n },\n ],\n Ethers.provider().getSigner()\n );\n TokenContract.allowance(account, routerAddress).then((allowanceRaw) => {\n State.update({\n isApproved: !Big(\n ethers.utils.formatUnits(allowanceRaw._hex, inputCurrency.decimals)\n ).lt(inputCurrencyAmount),\n });\n });\n};\n\nif (inputCurrency.address !== \"native\") {\n getAllowance();\n} else {\n State.update({ isApproved: true });\n}\n\nconst wrapType =\n inputCurrency.address === \"native\" && outputCurrency.address === wethAddress\n ? 1\n : inputCurrency.address === wethAddress &&\n outputCurrency.address === \"native\"\n ? 2\n : 0;\n\nconst handleApprove = () => {\n State.update({\n approving: true,\n });\n const TokenContract = new ethers.Contract(\n inputCurrency.address,\n [\n {\n constant: false,\n inputs: [\n {\n name: \"_spender\",\n type: \"address\",\n },\n {\n name: \"_value\",\n type: \"uint256\",\n },\n ],\n name: \"approve\",\n outputs: [\n {\n name: \"\",\n type: \"bool\",\n },\n ],\n payable: false,\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n ],\n Ethers.provider().getSigner()\n );\n TokenContract.approve(\n routerAddress,\n ethers.utils.parseUnits(\n Big(inputCurrencyAmount).toFixed(inputCurrency.decimals).toString(),\n inputCurrency.decimals\n )\n )\n .then((tx) => {\n tx.wait().then((res) => {\n const { status, transactionHash } = res;\n State.update({\n isApproved: status === 1,\n approving: false,\n });\n });\n })\n .catch(() => {\n State.update({\n approving: false,\n });\n });\n};\n\nif (!state.isApproved && wrapType === 0) {\n return (\n <SwapButton onClick={handleApprove} disabled={state.approving}>\n {state.approving ? \" Approving...\" : \" Approve\"}\n </SwapButton>\n );\n}\nconst AccessKey = Storage.get(\n \"AccessKey\",\n \"guessme.near/widget/ZKEVMWarmUp.add-to-quest-card\"\n);\nfunction add_action(param_body) {\n asyncFetch(\"https://test-api.dapdap.net/api/action/add-action-data\", {\n method: \"post\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: AccessKey,\n },\n body: JSON.stringify(param_body),\n });\n}\n\nfunction successCallback(tx, callback) {\n tx.wait().then((res) => {\n const { status, transactionHash } = res;\n callback?.();\n const uuid = Storage.get(\n \"zkevm-warm-up-uuid\",\n \"bluebiu.near/widget/ZKEVMWarmUp.generage-uuid\"\n );\n add_action({\n action_title: `Swap ${inputCurrencyAmount} ${inputCurrency.symbol} on ${title}`,\n action_type: \"Swap\",\n action_tokens: JSON.stringify([\n `${inputCurrency.symbol}`,\n `${outputCurrency.symbol}`,\n ]),\n action_amount: inputCurrencyAmount,\n account_id: account,\n account_info: uuid,\n template: title,\n action_status: status === 1 ? \"Success\" : \"Failed\",\n tx_id: transactionHash,\n action_network_id: chainName,\n });\n if (status === 1) {\n onSuccess?.();\n }\n });\n}\n\nconst handleWrap = (type, success, onError) => {\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 if (type === 1) {\n WethContract.deposit({\n value: ethers.utils.parseEther(\n Big(inputCurrencyAmount).toFixed(18).toString()\n ),\n })\n .then((tx) => {\n success?.(tx);\n })\n .catch((err) => {\n onError?.();\n });\n } else {\n WethContract.withdraw(\n ethers.utils.parseEther(Big(inputCurrencyAmount).toFixed(18).toString())\n )\n .then((tx) => {\n success?.(tx);\n })\n .catch((err) => {\n onError?.();\n });\n }\n};\n\nif (wrapType) {\n return (\n <SwapButton\n onClick={() => {\n State.update({\n wrapping: true,\n });\n handleWrap(\n wrapType,\n (res) => {\n successCallback(res, () => {\n State.update({ wrapping: false });\n });\n },\n () => {\n State.update({\n wrapping: false,\n });\n }\n );\n }}\n disabled={state.wrapping}\n >\n {wrapType === 1\n ? state.wrapping\n ? \"Wrapping...\"\n : \"Wrap\"\n : state.wrapping\n ? \"Unwrapping...\"\n : \"Unwrap\"}\n </SwapButton>\n );\n}\n\nreturn (\n <>\n {uniType === \"v2\" && state.swapping && (\n <Widget\n src={handlerV2}\n props={{\n inputCurrencyAmount,\n outputCurrencyAmount,\n inputCurrency,\n outputCurrency,\n wethAddress,\n account,\n routerAddress,\n swapping: state.swapping,\n title,\n onSuccess: (res) => {\n successCallback(res, () => {\n State.update({ swapping: false });\n });\n },\n onError: (err) => {\n State.update({ swapping: false });\n },\n }}\n />\n )}\n\n {uniType === \"solidly\" && state.swapping && (\n <Widget\n src={handlerSolidly}\n props={{\n inputCurrencyAmount,\n outputCurrencyAmount,\n inputCurrency,\n outputCurrency,\n wethAddress,\n account,\n routerAddress,\n swapping: state.swapping,\n title,\n stable,\n onSuccess: (res) => {\n successCallback(res, () => {\n State.update({ swapping: false });\n });\n },\n onError: (err) => {\n State.update({ swapping: false });\n },\n }}\n />\n )}\n\n {uniType === \"Syncswap\" && state.swapping && (\n <Widget\n src={handleSyncswap}\n props={{\n inputCurrencyAmount,\n outputCurrencyAmount,\n inputCurrency,\n outputCurrency,\n wethAddress,\n account,\n routerAddress,\n swapping: state.swapping,\n title,\n stable,\n syncSwapPoolAddress,\n onSuccess: (res) => {\n successCallback(res, () => {\n State.update({ swapping: false });\n });\n },\n onError: (err) => {\n State.update({ swapping: false });\n },\n }}\n />\n )}\n\n {uniType === \"v3\" && state.swapping && (\n <Widget\n src={handlerV3}\n props={{\n inputCurrencyAmount,\n inputCurrency,\n wethAddress,\n outputCurrency,\n account,\n fee,\n routerAddress,\n swapping: state.swapping,\n onSuccess: (res) => {\n successCallback(res, () => {\n State.update({ swapping: false });\n });\n },\n onError: (err) => {\n State.update({ swapping: false });\n },\n }}\n />\n )}\n\n <SwapButton\n onClick={() => {\n State.update({ swapping: true });\n }}\n disabled={state.swapping}\n >\n {state.swapping ? \"Swapping...\" : \"Swap\"}\n </SwapButton>\n </>\n);\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\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\n <div\n className={`item ${activeMenu == \"Lending\" ? \"active\" : \"\"}`}\n onClick={() => {\n changeTab(\"Lending\");\n }}\n >\n <span className=\"icon\">{lendingIcon}</span>\n Lending\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 }}\n />\n </>\n ) : null}\n {activeMenu == \"swap\" ? (\n <>\n <Widget\n src=\"guessme.near/widget/ZKEVMSwap.zkevm-swap\"\n props={{\n layout: \"center\",\n }}\n />\n </>\n ) : null}\n {activeMenu == \"Liquidity\" ? (\n <>\n <Widget src=\"bluebiu.near/widget/ZKEVM.GAMMA\" />\n </>\n ) : null}\n {activeMenu == \"Lending\" ? (\n <>\n <Widget src=\"bluebiu.near/widget/0vix.Lending\" props={props} />\n </>\n ) : null}\n </div>\n </Container>\n </Layout>\n);\n", "metadata": { "image": { "ipfs_cid": "bafkreiaednvljfk5splm5p3eisbkr3v5laiazldxqirtxs5koimckebsyu" }, "name": "Polygon zkEVM All-in-one", "tags": { "dexes": "" } } }, "Arbitrum.Swap.SwapV2": { "": "const {\n title,\n chainId,\n chainName,\n wethAddress,\n dexConfig,\n amountOutFn,\n quoterV3,\n handlerV2,\n handlerV3,\n handlerSolidly,\n QuoterSolidly,\n handleSyncswap,\n QuoterSyncswap,\n} = props;\n\nconst prevTitle = Storage.privateGet(\"prevTitle\");\nif (prevTitle !== title || !state.inputCurrency) {\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 debounce: (fn, wait) => {\n let timer;\n return () => {\n clearTimeout(timer);\n timer = setTimeout(fn, wait);\n };\n },\n });\n Storage.privateSet(\"prevTitle\", title);\n}\n// styled area\nconst SwapContainer = styled.div``;\nconst Title = styled.div`\n color: var(--text-color);\n font-size: 18px;\n font-weight: 500;\n line-height: 22px;\n padding-left: 30px;\n padding-bottom: 10px;\n @media (max-width: 900px) {\n display: none;\n }\n`;\nconst Panel = styled.div`\n width: 100%;\n border-radius: 16px;\n border: 1px solid var(--border-color);\n padding: 30px;\n background-color: #181a27;\n`;\nconst ExchangeIcon = styled.div`\n width: 60px;\n margin: 20px auto;\n svg {\n color: var(--text-color);\n }\n`;\nconst PanelLabel = styled.div`\n color: var(--secondary-text-color);\n font-size: 18px;\n font-weight: 500;\n line-height: 22px;\n`;\nconst Price = styled.div`\n font-size: 14px;\n color: var(--thirdary-text-color);\n text-align: right;\n margin-bottom: 30px;\n margin-top: 20px;\n @media (max-width: 768px) {\n margin-top: 10px;\n }\n`;\n\nconst getBestTrade = () => {\n State.update({\n loading: true,\n });\n};\n\nconst debouncedGetBestTrade = state.debounce(getBestTrade, 500);\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 <Title>{title}</Title>\n <Panel>\n <PanelLabel>Swap From</PanelLabel>\n <Widget\n src=\"bluebiu.near/widget/Arbitrum.Swap.CurrencyInput\"\n props={{\n currency: state.inputCurrency,\n amount: state.inputCurrencyAmount,\n updateTokenBalance: state.updateInputTokenBalance,\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 });\n if (val && Number(val)) debouncedGetBestTrade();\n },\n }}\n />\n <ExchangeIcon\n onClick={() => {\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: true,\n });\n if (Big(state.inputCurrencyAmount || 0).gt(0)) getBestTrade();\n }}\n >\n <Widget src=\"bluebiu.near/widget/Arbitrum.Swap.ExchangeIcon\" />\n </ExchangeIcon>\n <PanelLabel>To</PanelLabel>\n <Widget\n src=\"bluebiu.near/widget/Arbitrum.Swap.CurrencyInput\"\n props={{\n currency: state.outputCurrency,\n amount: state.outputCurrencyAmount,\n updateTokenBalance: state.updateOutputTokenBalance,\n disabled: true,\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 <Price>\n 1 {state.inputCurrency.symbol}≈ {getUnitAmount()}{\" \"}\n {state.outputCurrency.symbol}\n </Price>\n <Widget\n src=\"bluebiu.near/widget/Arbitrum.Swap.SwapButton\"\n props={{\n routerAddress: dexConfig.routerAddress,\n wethAddress,\n title,\n chainName,\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n outputCurrencyAmount: state.outputCurrencyAmount,\n maxInputBalance: state.maxInputBalance,\n handleSyncswap,\n handlerV2,\n handlerV3,\n handlerSolidly,\n onSuccess: () => {\n State.update({\n updateInputTokenBalance: true,\n updateOutputTokenBalance: true,\n });\n },\n noPair: state.noPair,\n loading: state.loading,\n fee: state.v3Fee,\n stable: state.stable,\n syncSwapPoolAddress: state.syncSwapPoolAddress,\n uniType: dexConfig.uniType,\n }}\n />\n </Panel>\n {state.displayCurrencySelect && (\n <Widget\n src=\"bluebiu.near/widget/Arbitrum.Swap.CurrencySelect\"\n props={{\n display: state.displayCurrencySelect,\n selectedTokenAddress: state.selectedTokenAddress,\n title: props.title,\n chainId: props.chainId,\n tokens: dexConfig.tokens,\n onClose: () => {\n State.update({\n displayCurrencySelect: false,\n });\n },\n onSelect: (currency) => {\n const updatedParams = {\n outputCurrencyAmount: \"\",\n noPair: false,\n updateInputTokenBalance: true,\n };\n if (state.currencySelectType === 0) {\n updatedParams.inputCurrency = currency;\n if (currency.address === state.outputCurrency.address)\n updatedParams.outputCurrency = null;\n }\n if (state.currencySelectType === 1) {\n updatedParams.outputCurrency = currency;\n updatedParams.outputCurrencyAmount = \"\";\n if (currency.address === state.inputCurrency.address) {\n updatedParams.inputCurrency = null;\n updatedParams.inputCurrencyAmount = \"\";\n }\n }\n if (\n state.inputCurrencyAmount &&\n Number(state.inputCurrencyAmount) &&\n state.inputCurrency?.address\n ) {\n updatedParams.loading = true;\n }\n State.update(updatedParams);\n if (updatedParams.loading) getBestTrade();\n },\n }}\n />\n )}\n\n {dexConfig.uniType === \"v3\" && (\n <Widget\n src={quoterV3}\n props={{\n amountIn: state.inputCurrencyAmount,\n tokenIn: state.inputCurrency,\n tokenOut: state.outputCurrency,\n quoterContractId: dexConfig.quoterAddress,\n wethAddress,\n loadAmountOut: (data) => {\n State.update({\n outputCurrencyAmount: data.amountOut,\n v3Fee: data.fee,\n loading: false,\n });\n },\n }}\n />\n )}\n {dexConfig.uniType === \"v2\" && (\n <Widget\n src={amountOutFn}\n props={{\n update: state.loading,\n routerAddress: dexConfig.routerAddress,\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n outputCurrencyAmount: state.outputCurrencyAmount,\n tradeType: state.tradeType,\n wethAddress,\n onLoad: (data) => {\n State.update({\n loading: false,\n ...data,\n });\n },\n }}\n />\n )}\n\n {dexConfig.uniType === \"solidly\" && (\n <Widget\n src={QuoterSolidly}\n props={{\n update: state.loading,\n routerAddress: dexConfig.routerAddress,\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n outputCurrencyAmount: state.outputCurrencyAmount,\n tradeType: state.tradeType,\n wethAddress,\n onLoad: (data) => {\n State.update({\n loading: false,\n ...data,\n });\n },\n }}\n />\n )}\n\n {dexConfig.uniType === \"Syncswap\" && (\n <Widget\n src={QuoterSyncswap}\n props={{\n ...dexConfig,\n update: state.loading,\n routerAddress: dexConfig.routerAddress,\n inputCurrency: state.inputCurrency,\n outputCurrency: state.outputCurrency,\n inputCurrencyAmount: state.inputCurrencyAmount,\n outputCurrencyAmount: state.outputCurrencyAmount,\n tradeType: state.tradeType,\n wethAddress,\n onLoad: (data) => {\n State.update({\n loading: false,\n ...data,\n });\n },\n }}\n />\n )}\n </SwapContainer>\n);\n" } } } } }