Transaction: AojPgAu...7n9W

{ "data": { "bluebiu.near": { "widget": { "Staking.AgentFi.MyStrategies": { "": "const StyledMyStrategies = styled.div``;\nconst StyledSection = styled.div`\n margin-top: 32px;\n`;\nconst StyledSectionTitle = styled.div`\n margin-bottom: 16px;\n color: #FFF;\n font-size: 20px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`;\nconst StyledSectionCard = styled.div`\n border-radius: 12px;\n border: 1px solid #373A53;\n background: #262836;\n overflow: hidden;\n`;\nconst StyledSectionCardInner = styled.div`\n padding: 12px 12px;\n\n .deposited-value {\n font-size: 18px;\n font-style: normal;\n font-weight: 800;\n line-height: normal;\n color: var(--switch-color);\n }\n \n .deposited-value-tips {\n font-size: 12px;\n color: #FFF;\n margin-left: 2px;\n font-weight: 400;\n }\n\n .deposited-tips {\n color: #979ABE;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 16px;\n }\n`;\nconst StyledMyStrategiesHead = styled.div`\n border-bottom: 1px solid #373A53;\n`;\nconst StyledMyStrategiesRow = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: nowrap;\n transition: all 0.3s ease-in-out;\n\n &:not(.head) {\n cursor: pointer;\n\n &:hover {\n background: #1f212c;\n }\n }\n`;\nconst StyledMyStrategiesCol = styled.div`\n color: #FFF;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n flex-shrink: 0;\n padding: 12px 12px;\n\n &.head {\n color: #979ABE;\n font-size: 14px;\n font-weight: 400;\n }\n`;\nconst StyledMyStrategiesBody = styled.div``;\nconst StyledMyStrategiesAssets = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n\n .my-strategies-assets-item {\n margin: 0;\n padding: 0;\n width: 24px;\n height: 24px;\n overflow: hidden;\n border-radius: 12px;\n background: #171717;\n\n :not(:first-child) {\n margin-left: -4px;\n }\n\n img {\n width: 100%;\n height: 100%;\n }\n }\n`;\nconst StyledMyStrategiesEmpty = styled.div`\n padding: 56px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #979ABE;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n\nconst {\n prices,\n record,\n handleRecord,\n dexConfig,\n account,\n curChain,\n listData,\n loading,\n totalDeposited,\n rootAgent,\n formatTVL,\n} = props;\n\nconst { StakeTokens } = dexConfig;\n\nconst formatDateTime = (datetimeStr) => {\n const formatTen = (value) => {\n return value < 10 ? `0${value}` : value.toString();\n };\n const datetime = new Date(datetimeStr);\n const year = datetime.getFullYear();\n const month = formatTen(datetime.getMonth() + 1);\n const date = formatTen(datetime.getDate());\n const hour = formatTen(datetime.getHours());\n const minute = formatTen(datetime.getMinutes());\n const second = formatTen(datetime.getSeconds());\n return `${year}-${month}-${date} ${hour}:${minute}:${second}`;\n};\n\nreturn (\n <>\n {\n record && record.agentAddress ? (\n <Widget\n src=\"bluebiu.near/widget/Staking.AgentFi.MyStrategiesDetail\"\n props={{\n ...props,\n record,\n rootAgent,\n formatTVL,\n }}\n />\n ) : (\n loading ? (\n <Widget src=\"bluebiu.near/widget/Lending.Spinner\" />\n ) : (\n <StyledMyStrategies>\n <StyledSection>\n <StyledSectionTitle>\n Deposited\n </StyledSectionTitle>\n <StyledSectionCard>\n <StyledSectionCardInner>\n <div className=\"deposited-value\">\n ${totalDeposited}\n <span className=\"deposited-value-tips\">USD eq.</span>\n </div>\n <div className=\"deposited-tips\">The total value of your deposits across all strategies.</div>\n </StyledSectionCardInner>\n </StyledSectionCard>\n </StyledSection>\n <StyledSection>\n <StyledSectionTitle>\n My Strategies\n </StyledSectionTitle>\n <StyledSectionCard>\n <StyledMyStrategiesHead>\n <StyledMyStrategiesRow className=\"head\">\n <StyledMyStrategiesCol className=\"head\" style={{\n width: \"25%\",\n }}>Name</StyledMyStrategiesCol>\n <StyledMyStrategiesCol className=\"head\" style={{\n width: \"20%\",\n }}>Launch Date</StyledMyStrategiesCol>\n <StyledMyStrategiesCol className=\"head\" style={{\n width: \"15%\",\n }}>Assets</StyledMyStrategiesCol>\n <StyledMyStrategiesCol className=\"head\" style={{\n width: \"15%\",\n }}>TVL</StyledMyStrategiesCol>\n <StyledMyStrategiesCol className=\"head\" style={{\n width: \"20%\",\n }}>Protocols</StyledMyStrategiesCol>\n <StyledMyStrategiesCol className=\"head\" style={{\n width: \"5%\",\n }}></StyledMyStrategiesCol>\n </StyledMyStrategiesRow>\n </StyledMyStrategiesHead>\n <StyledMyStrategiesBody>\n {\n listData.length > 0 ? listData.map((item) => (\n <StyledMyStrategiesRow\n className={`${record.agentAddress === item.agentAddress ? \"selected\" : \"\"}`}\n onClick={() => handleRecord(item)}\n >\n <StyledMyStrategiesCol style={{\n width: \"25%\",\n }}>\n {item.name}\n </StyledMyStrategiesCol>\n <StyledMyStrategiesCol style={{\n width: \"20%\",\n }}>\n {formatDateTime(item.createdAt)}\n </StyledMyStrategiesCol>\n <StyledMyStrategiesCol style={{\n width: \"15%\",\n }}>\n <StyledMyStrategiesAssets>\n <li className=\"my-strategies-assets-item\">\n <img src=\"https://app.agentfi.io/icons/tokens/eth.svg\" alt=\"\" />\n </li>\n {\n [\"Looper\", \"Orbit Looper\", \"Concentrated Liquidity Manager\", \"Dex Balancer\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\">\n <img src=\"https://app.agentfi.io/icons/tokens/usdb.svg\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Looper\", \"Orbit Looper\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\">\n <img src=\"https://app.agentfi.io/icons/tokens/dusd.svg\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Looper\", \"Orbit Looper\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\">\n <img src=\"https://app.agentfi.io/icons/tokens/deth.svg\" alt=\"\" />\n </li>\n )\n }\n </StyledMyStrategiesAssets>\n </StyledMyStrategiesCol>\n <StyledMyStrategiesCol style={{\n width: \"15%\",\n }}>\n {formatTVL(item).value}\n </StyledMyStrategiesCol>\n <StyledMyStrategiesCol style={{\n width: \"20%\",\n }}>\n <StyledMyStrategiesAssets>\n {\n [\"Looper\", \"Orbit Looper\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"Orbit\">\n <img src=\"https://app.agentfi.io/assets/strategies/icons/orbit.svg\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Looper\", \"Orbit Looper\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"Particle\">\n <img src=\"https://app.agentfi.io/assets/strategies/icons/particle.svg\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Looper\", \"Orbit Looper\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"Duo\">\n <img src=\"https://s3.amazonaws.com/dapdap.prod/images/group-48097863.png\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Looper\", \"Orbit Looper\", \"Dex Balancer\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"Ring\">\n <img src=\"https://app.agentfi.io/logo/partners/svgs/symbol/color/ring.svg\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Multipliooor\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"AgentFi\">\n <img src=\"https://app.agentfi.io/logo/partners/svgs/symbol/color/agentfi.svg\" alt=\"\" />\n </li>\n )\n }\n {\n [\"Concentrated Liquidity Manager\", \"Dex Balancer\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"blasterswap\">\n <img src=\"https://app.agentfi.io/logo/partners/svgs/symbol/color/blasterswap.svg\"\n alt=\"\" />\n </li>\n )\n }\n {\n [\"Dex Balancer\"].includes(item.name) && (\n <li className=\"my-strategies-assets-item\" title=\"Hyperlock\">\n <img src=\"https://app.agentfi.io/logo/partners/svgs/symbol/color/hyperlock.svg\" alt=\"\" />\n </li>\n )\n }\n </StyledMyStrategiesAssets>\n </StyledMyStrategiesCol>\n <StyledMyStrategiesCol style={{\n width: \"5%\",\n }}>\n <svg\n width=\"16\"\n height=\"18\"\n viewBox=\"0 0 16 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7.17184 0.222355C7.42364 0.0766877 7.70926 0 8 0C8.29074 0 8.57637 0.0766877 8.82816 0.222355L15.1718 3.89274C15.4236 4.03841 15.6327 4.24792 15.7781 4.50021C15.9235 4.75251 16 5.0387 16 5.33003V12.67C16 12.9613 15.9235 13.2475 15.7781 13.4998C15.6327 13.7521 15.4236 13.9616 15.1718 14.1073L8.82816 17.7776C8.57637 17.9233 8.29074 18 8 18C7.70926 18 7.42364 17.9233 7.17184 17.7776L0.828158 14.1073C0.576372 13.9616 0.367286 13.7521 0.221915 13.4998C0.0765431 13.2475 7.38473e-06 12.9613 0 12.67V5.33003C7.38473e-06 5.0387 0.0765431 4.75251 0.221915 4.50021C0.367286 4.24792 0.576372 4.03841 0.828158 3.89274L7.17184 0.222355ZM8 1.65964L1.65632 5.33003V12.67L8 16.3404L14.3437 12.67V5.33003L8 1.65964ZM8 5.68064C8.87856 5.68064 9.72115 6.03035 10.3424 6.65286C10.9636 7.27536 11.3126 8.11965 11.3126 9C11.3126 9.88035 10.9636 10.7246 10.3424 11.3471C9.72115 11.9696 8.87856 12.3194 8 12.3194C7.12144 12.3194 6.27886 11.9696 5.65762 11.3471C5.03638 10.7246 4.68737 9.88035 4.68737 9C4.68737 8.11965 5.03638 7.27536 5.65762 6.65286C6.27886 6.03035 7.12144 5.68064 8 5.68064ZM8 7.34032C7.78249 7.34032 7.56711 7.38325 7.36616 7.46665C7.1652 7.55006 6.98261 7.67231 6.82881 7.82643C6.67501 7.98054 6.553 8.16351 6.46977 8.36487C6.38653 8.56623 6.34369 8.78205 6.34369 9C6.34369 9.21795 6.38653 9.43377 6.46977 9.63513C6.553 9.8365 6.67501 10.0195 6.82881 10.1736C6.98261 10.3277 7.1652 10.4499 7.36616 10.5333C7.56711 10.6168 7.78249 10.6597 8 10.6597C8.43928 10.6597 8.86057 10.4848 9.17119 10.1736C9.48181 9.86232 9.65631 9.44018 9.65631 9C9.65631 8.55983 9.48181 8.13768 9.17119 7.82643C8.86057 7.51518 8.43928 7.34032 8 7.34032Z\"\n fill=\"#979ABE\"\n />\n </svg>\n </StyledMyStrategiesCol>\n </StyledMyStrategiesRow>\n )) : (\n <StyledMyStrategiesEmpty>\n You didn’t add any strategies yet\n </StyledMyStrategiesEmpty>\n )\n }\n </StyledMyStrategiesBody>\n </StyledSectionCard>\n </StyledSection>\n </StyledMyStrategies>\n )\n )\n }\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\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": "" } } }, "Staking.AgentFi.Withdraw": { "": "const StyledContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: stretch;\n height: 100%;\n`;\nconst StyledFormItem = styled.div`\n border-bottom: 1px solid #373A53;\n padding-bottom: 18px;\n padding-top: 18px;\n \n &.inline {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n &:first-child {\n padding-top: 0;\n }\n`;\nconst StyledFormItemTitle = styled.div`\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n color: #979ABE;\n`;\nconst StyledFormItemBody = styled.div`\n margin-top: 8px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n`;\nconst StyledFormItemFoot = styled.div`\n margin-top: 8px;\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n font-weight: 400;\n line-height: 14.4px;\n color: rgba(151, 154, 190, 1);\n`;\nconst StyledInput = styled.input`\n flex: 1;\n width: 0;\n color: #fff;\n font-size: 20px;\n font-weight: 500;\n border: none;\n height: 24px;\n outline: none;\n background-color: transparent;\n padding: 0;\n\n &:focus {\n color: #fff;\n background-color: transparent;\n border-color: transparent;\n outline: none;\n box-shadow: none;\n }\n`;\nconst StyledList = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n gap: 8px;\n margin-top: 8px;\n`;\nconst StyledListItem = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n\n .label {\n color: #979ABE;\n }\n .value {\n color: #fff;\n }\n`;\nconst StyledContent = styled.div`\n flex: 1;\n`;\nconst StyledButton = styled.button`\n background: var(--switch-color);\n color: var(--button-text-color);\n\n display: block;\n width: 100%;\n font-size: 16px;\n font-weight: 600;\n height: 56px;\n line-height: 56px;\n border-radius: 6px;\n cursor: pointer;\n transition: 0.5s;\n margin-top: auto;\n text-align: center;\n \n &:hover {\n opacity: 0.8;\n }\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\nconst StyledFullSelect = styled.div`\n width: 100%;\n\n > div {\n width: 100%;\n \n > div[type=\"button\"] {\n width: 100%;\n }\n }\n`;\nconst StyledTips = styled.div`\n color: rgb(151, 154, 190);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 16px;\n text-align: center;\n \n &.full {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n &.invalid {\n color: var(--switch-color);\n opacity: 0.6;\n }\n`;\nconst StyledWithdrawTips = styled.div`\n width: 240px;\n text-align: center;\n margin: 0 auto;\n\n .value {\n color: var(--switch-color);\n font-size: 18px;\n }\n .title {\n border-bottom: 1px solid #373A53;\n font-size: 18px;\n color: rgb(151, 154, 190);\n padding: 8px 0;\n }\n .assets {\n margin-top: 8px;\n }\n .head-wd {\n border-bottom: 1px solid #373A53;\n \n .col-wd {\n color: rgb(151, 154, 190);\n }\n }\n .row-wd {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n }\n .col-wd {\n flex-shrink: 0;\n flex-basis: 33.33%;\n color: #fff;\n font-size: 14px;\n text-align: left;\n padding: 8px 0;\n }\n .body-wd {}\n`;\nconst StyledCLMWithdrawRateList = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 16px;\n width: 100%;\n`;\nconst StyledCLMWithdrawRate = styled.div`\n width: 70px;\n height: 24px;\n background: #373A53;\n color: #ffffff;\n border-radius: 12px;\n text-align: center;\n line-height: 24px;\n font-size: 14px;\n cursor: pointer;\n\n &.active {\n background: var(--switch-color);\n color: #000;\n }\n`;\n\nconst WITHDRAW_POOL_ABI_LOOPER = [\n {\n inputs: [\n { internalType: \"address\", name: \"receiver\", type: \"address\" },\n ],\n name: \"moduleD_withdrawBalanceTo\",\n outputs: [],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n];\nconst WITHDRAW_POOL_ABI_DEX = [\n {\n inputs: [\n { internalType: \"address\", name: \"to\", type: \"address\" },\n { internalType: \"uint256\", name: \"value\", type: \"uint256\" },\n { internalType: \"bytes\", name: \"data\", type: \"bytes\" },\n { internalType: \"uint8\", name: \"operation\", type: \"uint8\" },\n ],\n name: \"execute\",\n outputs: [],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n];\nconst WITHDRAW_POOL_ABI_CLM = [\n {\n inputs: [\n { internalType: \"address\", name: \"receiver\", type: \"address\" },\n { internalType: \"uint128\", name: \"liquidity\", type: \"uint128\" },\n { internalType: \"uint160\", name: \"sqrtPriceX96\", type: \"uint160\" },\n { internalType: \"uint24\", name: \"slippageLiquidity\", type: \"uint24\" },\n ],\n name: \"moduleC_partialWithdrawTo\",\n outputs: [],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n];\n\nconst { parseUnits, formatUnits } = ethers.utils;\n\nconst {\n prices,\n currentStrategy,\n dexConfig,\n record,\n formatTVL,\n rootAgent,\n account,\n onSuccess,\n addAction,\n toast,\n chainId,\n handleDetailClose,\n QUERY_POOL_ABI,\n strategies,\n} = props;\n\nconst { StakeTokens } = dexConfig;\n\nconst actionText = 'Withdraw';\nconst clmWithdrawRateList = [\n { label: '25%', value: 25 },\n { label: '50%', value: 50 },\n { label: '75%', value: 75 },\n { label: '100%', value: 100 },\n];\n\nconst balanceList = formatTVL(record).list || [];\n\nState.init({\n unStakePercent: 25,\n pending: false,\n});\n\nconst queryPoolInfo = ({ fee }) => {\n return new Promise((resolve) => {\n const contract = new ethers.Contract(\n fee.pool,\n QUERY_POOL_ABI,\n Ethers.provider().getSigner(),\n );\n const params = [];\n contract.slot0(...params).then((poolAddress) => {\n const [sqrtPriceX96] = poolAddress;\n resolve(sqrtPriceX96);\n }).catch((err) => {\n console.log('queryPoolInfo failed, ', err);\n resolve(false);\n });\n });\n};\n\nconst handleAmount = (value) => {\n State.update({\n unStakePercent: value,\n });\n};\n\nconst formatAddAction = (actionText, _amount, status, transactionHash, tokenSymbol) => {\n addAction?.({\n type: \"Staking\",\n action: actionText,\n token: {\n symbol: tokenSymbol,\n },\n amount: _amount,\n template: props.name,\n add: false,\n status,\n transactionHash,\n });\n}\n\nconst handleSubmit = () => {\n if (!record.agentAddress) return;\n State.update({\n pending: true,\n });\n if ([strategies[0].name].includes(record.name.toLowerCase())) {\n const params = [\n // receiver\n account,\n ];\n const contract = new ethers.Contract(\n record.agentAddress,\n WITHDRAW_POOL_ABI_LOOPER,\n Ethers.provider().getSigner()\n );\n const getTx = (gas) => {\n const contractOption = {\n gasLimit: gas || 4000000,\n }\n contract.moduleD_withdrawBalanceTo(...params, contractOption)\n .then((tx) => {\n tx.wait()\n .then((res) => {\n const { status, transactionHash } = res;\n State.update({\n pending: false,\n });\n if (status !== 1) throw new Error(\"\");\n // call back\n handleDetailClose();\n onSuccess();\n formatAddAction(actionText, balanceList[0]?.balance, status, transactionHash, balanceList[0]?.symbol);\n toast?.success({\n title: `${actionText} Successfully!`,\n text: `${actionText} ${Big(balanceList[0]?.balance || 0).toFixed(4)} DETH`,\n tx: transactionHash,\n chainId,\n });\n })\n .catch((err) => {\n console.log('tx error: ', err);\n State.update({\n pending: false,\n });\n toast?.fail({\n title: `${actionText} Failed!`,\n text: err?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : ``,\n });\n });\n })\n .catch((err) => {\n console.log('contract fn error: ', err);\n State.update({\n pending: false,\n });\n toast?.fail({\n title: `${actionText} Failed!`,\n text: err?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : ``,\n });\n });\n };\n\n const estimateGas = () => {\n contract.estimateGas.moduleD_withdrawBalanceTo(\n ...params,\n {}\n ).then((gas) => {\n getTx(gas);\n }).catch((err) => {\n console.log('get gas failed: ', err);\n getTx();\n });\n };\n\n estimateGas();\n return;\n }\n if ([strategies[3].name, strategies[2].name].includes(record.name.toLowerCase())) {\n // contract is rootAgent.agentAddress\n const params = [\n // to\n record.agentAddress,\n // value\n parseUnits('0', 18),\n // data\n `0xc4fb5289000000000000000000000000${account.replace(/^0x/, '')}`,\n // operation\n 0,\n ];\n const contract = new ethers.Contract(\n rootAgent.agentAddress,\n WITHDRAW_POOL_ABI_DEX,\n Ethers.provider().getSigner()\n );\n const getTx = (gas) => {\n const contractOption = {\n gasLimit: gas || 4000000,\n }\n contract.execute(...params, contractOption)\n .then((tx) => {\n tx.wait()\n .then((res) => {\n const { status, transactionHash } = res;\n State.update({\n pending: false,\n });\n if (status !== 1) throw new Error(\"\");\n // call back\n handleDetailClose();\n onSuccess();\n formatAddAction(actionText, balanceList[0]?.balance, status, transactionHash, balanceList[0]?.symbol);\n toast?.success({\n title: `${actionText} Successfully!`,\n text: `${actionText} ${Big(balanceList[0]?.balance || 0).toFixed(4)} ${balanceList[0]?.symbol}`,\n tx: transactionHash,\n chainId,\n });\n })\n .catch((err) => {\n console.log('tx error: ', err);\n State.update({\n pending: false,\n });\n toast?.fail({\n title: `${actionText} Failed!`,\n text: err?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : ``,\n });\n });\n })\n .catch((err) => {\n console.log('contract fn error: ', err);\n State.update({\n pending: false,\n });\n toast?.fail({\n title: `${actionText} Failed!`,\n text: err?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : ``,\n });\n });\n };\n\n const estimateGas = () => {\n contract.estimateGas.execute(\n ...params,\n {}\n ).then((gas) => {\n getTx(gas);\n }).catch((err) => {\n console.log('get gas failed: ', err);\n getTx();\n });\n };\n\n estimateGas();\n return;\n }\n if (record.name.toLowerCase() === strategies[1].name) {\n const currentBalancesList = record.balances || [];\n const currentBalance = currentBalancesList.find((it) => /^BlasterSwap Positions NFT/.test(it.name));\n if (!currentBalance || Big(currentBalance.balance || 0).lte(0)) {\n toast?.fail({\n title: `${actionText} Failed!`,\n text: 'This strategy currently has no balance to withdraw!',\n });\n State.update({\n pending: false,\n });\n return;\n }\n const liquidity = Big(currentBalance.balance || 0).times(Big(state.unStakePercent).div(100));\n\n if (liquidity.toNumber() !== Math.floor(liquidity.toNumber())) {\n toast?.fail({\n title: `${actionText} Failed!`,\n text: 'Please select another ratio withdraw!',\n });\n State.update({\n pending: false,\n });\n return;\n }\n const { name } = currentBalance;\n // query sqrtprocex96\n const fee = currentStrategy.meta.feeTierList.find((it) => it.name.includes(name));\n if (!fee) {\n toast?.fail({\n title: `${actionText} Failed!`,\n text: 'This strategy currently has no balance to withdraw!',\n });\n State.update({\n pending: false,\n });\n return;\n }\n queryPoolInfo({ fee }).then((sqrtPriceX96) => {\n if (!sqrtPriceX96) {\n toast?.fail({\n title: `${actionText} Failed!`,\n text: 'Query pool information failed!',\n });\n State.update({\n pending: false,\n });\n return;\n }\n const params = [\n // receiver\n account,\n // liquidity - uint128\n currentStrategy.meta.formatBigInt(liquidity.toNumber()),\n // sqrtPriceX96 - uint160\n sqrtPriceX96,\n // slippageLiquidity - uint24\n 1000000,\n ];\n const contract = new ethers.Contract(\n record.agentAddress,\n WITHDRAW_POOL_ABI_CLM,\n Ethers.provider().getSigner()\n );\n const getTx = (gas) => {\n const contractOption = {\n gasLimit: gas || 4000000,\n }\n contract.moduleC_partialWithdrawTo(...params, contractOption)\n .then((tx) => {\n tx.wait()\n .then((res) => {\n const { status, transactionHash } = res;\n State.update({\n pending: false,\n });\n if (status !== 1) throw new Error(\"\");\n // call back\n handleDetailClose();\n onSuccess();\n formatAddAction(actionText, balanceList[0]?.balance, status, transactionHash, balanceList[0]?.symbol);\n toast?.success({\n title: `${actionText} Successfully!`,\n text: `${actionText} ${Big(balanceList[0]?.balance || 0).toFixed(4)} ${balanceList[0]?.symbol}`,\n tx: transactionHash,\n chainId,\n });\n })\n .catch((err) => {\n console.log('tx error: ', err);\n State.update({\n pending: false,\n });\n toast?.fail({\n title: `${actionText} Failed!`,\n text: err?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : ``,\n });\n });\n })\n .catch((err) => {\n console.log('contract fn error: ', err);\n State.update({\n pending: false,\n });\n toast?.fail({\n title: `${actionText} Failed!`,\n text: err?.message?.includes(\"user rejected transaction\")\n ? \"User rejected transaction\"\n : ``,\n });\n });\n };\n\n const estimateGas = () => {\n contract.estimateGas.moduleC_partialWithdrawTo(\n ...params,\n {}\n ).then((gas) => {\n getTx(gas);\n }).catch((err) => {\n console.log('get gas failed: ', err);\n getTx();\n });\n };\n\n estimateGas();\n });\n }\n};\n\nconst {\n unStakePercent,\n pending,\n} = state;\n\nconst renderButton = (disabled) => {\n return (\n <StyledButton\n disabled={pending || disabled}\n onClick={handleSubmit}\n >\n {pending ? (\n <Widget\n src=\"bluebiu.near/widget/0vix.LendingLoadingIcon\"\n props={{\n size: 16,\n }}\n />\n ) : 'WITHDRAW'}\n </StyledButton>\n );\n};\n\nconst renderWithdraw = () => {\n // can select withdraw value\n if (record.name.toLowerCase() === strategies[1].name) {\n let noValueDisabled = false;\n const currentBalancesList = record.balances || [];\n const currentBalance = currentBalancesList.find((it) => /^BlasterSwap Positions NFT/.test(it.name));\n if (!currentBalance || Big(currentBalance.balance || 0).lte(0)) {\n noValueDisabled = true;\n }\n return (\n <>\n <StyledContent>\n <StyledFormItem>\n <StyledFormItemTitle>\n Withdraw\n </StyledFormItemTitle>\n <StyledFormItemBody>\n <StyledCLMWithdrawRateList>\n {\n clmWithdrawRateList.map((item) => (\n <StyledCLMWithdrawRate\n key={item.value}\n onClick={() => handleAmount(item.value)}\n className={`${unStakePercent === item.value ? 'active' : ''}`}\n >\n {item.label}\n </StyledCLMWithdrawRate>\n ))\n }\n </StyledCLMWithdrawRateList>\n </StyledFormItemBody>\n <StyledFormItemBody>\n <StyledWithdrawTips>\n <div className=\"value\">{unStakePercent}%</div>\n <div className=\"title\">Withdraw</div>\n <div className=\"assets\">\n <div className=\"head-wd\">\n <div className=\"row-wd\">\n <div className=\"col-wd\" style={{ flexBasis: '20%' }}>Asset</div>\n <div className=\"col-wd\" style={{ flexBasis: '40%' }}>LP Balance</div>\n <div className=\"col-wd\" style={{ flexBasis: '40%' }}>Withdraw</div>\n </div>\n </div>\n <div className=\"body-wd\">\n {\n balanceList.length ? balanceList.map((b) => (\n <div className=\"row-wd\" key={b.symbol}>\n <div className=\"col-wd\" style={{ flexBasis: '20%' }}>\n {b.symbol}\n </div>\n <div className=\"col-wd\" style={{ flexBasis: '40%' }}>\n {Big(b.balance || 0).toFixed(4)}\n </div>\n <div className=\"col-wd\" style={{ flexBasis: '40%' }}>\n {Big(b.balance || 0).times(Big(unStakePercent || 0).div(100)).toFixed(4)}\n </div>\n </div>\n )) : null\n }\n </div>\n </div>\n </StyledWithdrawTips>\n </StyledFormItemBody>\n </StyledFormItem>\n {\n noValueDisabled && (\n <StyledFormItem>\n <StyledTips className=\"invalid\">\n This strategy currently has no balance to withdraw!\n </StyledTips>\n </StyledFormItem>\n\n )\n }\n </StyledContent>\n {renderButton(!unStakePercent || noValueDisabled)}\n </>\n );\n }\n // withdraw all but show diff text\n if ([strategies[0].name].includes(record.name.toLowerCase())) {\n return (\n <>\n <StyledContent>\n <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>\n <StyledTips>\n All positions will be unwound and funds returned.\n </StyledTips>\n <StyledTips>\n Withdrawal Balance\n </StyledTips>\n {\n balanceList.length ? balanceList.map((tk) => (\n <StyledTips>\n {Big(tk.balance).toFixed(4)} {tk.symbol}\n </StyledTips>\n )) : (\n <StyledTips>\n No balance\n </StyledTips>\n )\n }\n </div>\n </StyledContent>\n {renderButton(!balanceList.length)}\n </>\n );\n }\n if (record.name.toLowerCase() === strategies[3].name) {\n return (\n <>\n <StyledContent>\n <StyledTips className=\"full\">\n Withdraw all your funds - only recommended after all tasks are completed!\n </StyledTips>\n </StyledContent>\n {renderButton(!balanceList.length)}\n </>\n );\n }\n if (record.name.toLowerCase() === strategies[2].name) {\n return (\n <>\n <StyledContent>\n <StyledTips className=\"full\">\n Withdraw your full position.\n </StyledTips>\n </StyledContent>\n {renderButton(!balanceList.length)}\n </>\n );\n }\n};\n\nreturn (\n <StyledContainer>\n {renderWithdraw()}\n </StyledContainer>\n);\n" }, "Staking.AgentFi.MyStrategiesDetail": { "": "const StyledContainer = styled.div``;\nconst StyledTop = styled.div``;\nconst StyledBack = styled.div`\n margin: 20px 0 24px;\n display: flex;\n align-items: center;\n gap: 14px;\n cursor: pointer;\n color: #979ABE;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n width: 200px;\n`;\nconst StyledContent = styled.div``;\nconst StyledCard = styled.div`\n margin: 0 auto;\n border-radius: 16px;\n border: 1px solid #373A53;\n background: #262836;\n overflow: hidden;\n`;\nconst StyledCardHead = styled.div`\n padding: 18px 30px 18px 30px;\n background: #32364B;\n border-bottom: 1px solid #373A53;\n \n .strategy-title {\n color: #FFF;\n font-size: 18px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n }\n .strategy-detail {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n }\n .strategy-description {\n color: #979ABE;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n \n p {\n margin: 0;\n }\n }\n`;\nconst StyledCardBody = styled.div`\n display: flex;\n flex-direction: column;\n \n &.no-padding {\n padding: 0;\n }\n`;\nconst StyledCardFoot = styled.div`\n\n`;\n\nconst StyledBot = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n gap: 16px;\n margin-top: 16px;\n`;\nconst StyledSection = styled.div`\n padding: 18px 30px;\n \n &:not(:last-child) {\n border-bottom: 1px solid #373A53;\n }\n`;\nconst StyledSectionTitle = styled.div`\n margin-bottom: 16px;\n color: #FFF;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\nconst StyledSectionList = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n`;\nconst StyledSectionContent = styled.div`\n`;\nconst StyledSectionListItem = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\nconst StyledSectionListLabel = styled.div`\n color: #979ABE;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n display: flex;\n align-items: center;\n gap: 4px;\n\n .strategy-balance-icon {\n width: 24px;\n height: 24px;\n }\n`\nconst StyledSectionListValue = styled.div`\n color: #FFF;\n font-family: Montserrat;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n\nconst StyledTabs = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-bottom: 1px solid #373A53;\n`;\nconst StyledTab = styled.div`\n flex: 1;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #979ABE;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n cursor: pointer;\n padding: 22px 0;\n \n &.active {\n color: #fff;\n }\n`;\nconst StyledTabPointer = styled.div`\n position: absolute;\n z-index: 1;\n left: 0;\n bottom: 0;\n height: 4px;\n background: var(--switch-color);\n transition: transform 0.3s ease-in-out;\n`;\nconst StyledTabsContent = styled.div`\n padding: 18px 30px;\n flex: 1;\n`;\n\nconst StyledTips = styled.div`\n color: rgb(151, 154, 190);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 16px;\n padding: 18px 30px 0;\n`;\nconst StyledMultipliooorCardList = styled.ul`\n display: flex;\n justify-content: center;\n align-items: stretch;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0 18px 18px;\n gap: 16px;\n max-height: 240px;\n overflow-y: auto;\n \n .card-item {\n margin: 0;\n padding: 8px;\n width: 130px;\n height: 192px;\n border-radius: 0;\n overflow: hidden;\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n color: #fff;\n display: flex;\n justify-content: flex-start;\n align-items: flex-end;\n }\n`;\nconst StyledDexCardList = styled.div`\n display: flex;\n justify-content: center;\n align-items: stretch;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0 18px 18px;\n gap: 16px;\n \n .card-item {\n margin: 0;\n padding: 8px;\n width: 130px;\n height: 192px;\n border-radius: 16px;\n overflow: hidden;\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n color: #fff;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: column;\n gap: 16px;\n border: 1px solid #373A53;\n }\n \n .card-logo {\n width: 100px;\n height: 40px;\n }\n .card-balance-list {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: column;\n gap: 8px;\n padding: 0;\n margin: 0;\n flex: 1;\n }\n .card-balance-item {\n color: #fff;\n font-size: 14px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n }\n .card-foot {\n padding: 8px;\n border-top: 1px solid #373A53;\n margin-top: auto;\n }\n .card-link {\n text-decoration: none;\n color: rgb(151, 154, 190);\n font-size: 14px;\n }\n`;\nconst StyledProgress = styled.div`\n width: 100%;\n height: 12px;\n border-radius: 6px;\n background: #979ABE;\n position: relative;\n margin-top: 20px;\n flex-shrink: 0;\n\n &::after {\n content: \"\";\n display: block;\n width: ${({ value, max }) => `${Math.floor(value / max * 100)}%`};\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n border-radius: 6px;\n background: var(--button-color);\n }\n \n &.center {\n &::after {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n \n .range-min,\n .range-max,\n .range-center {\n position: absolute;\n z-index: 1;\n left: 50%;\n transform: translateX(-50%);\n top: -30px;\n color: #fff;\n font-size: 14px;\n }\n .range-min {\n left: 25%;\n }\n .range-max {\n left: 75%;\n }\n .range-center {\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n z-index: 1;\n left: 50%;\n transform: translateX(-50%);\n height: 36px;\n top: 18px;\n width: 4px;\n background: var(--switch-color);\n border-radius: 2px;\n }\n }\n`;\n\n\nconst tabs = [\n {\n key: 1,\n title: 'Withdraw',\n component: 'bluebiu.near/widget/Staking.AgentFi.Withdraw',\n },\n {\n key: 2,\n title: 'Deposit',\n component: 'bluebiu.near/widget/Staking.AgentFi.Deposit',\n },\n {\n key: 3,\n title: 'Reset',\n component: 'bluebiu.near/widget/Staking.AgentFi.Reset',\n },\n];\n\nconst {\n record,\n onRecordClose,\n dexConfig,\n formatTVL,\n prices,\n numKnownMissions,\n totalMissions,\n tickToPrice,\n QUERY_POOL_ABI,\n strategies,\n} = props;\n\nconst currentStrategy = strategies.find((it) => it.name === record.name.toLowerCase());\n\nState.init({\n tab: tabs[0],\n tabsShown: [tabs[0]],\n currentRange: [],\n currentPrice: '',\n});\n\nconst handleClose = () => {\n onRecordClose();\n};\n\nconst handleTab = (tab) => {\n if (tab.key === state.tab.key) return;\n State.update({\n tab: tab,\n });\n};\n\nconst queryPoolInfo = ({ fee }) => {\n return new Promise((resolve) => {\n if (!fee) {\n const currentBalancesList = record.balances || [];\n const currentBalance = currentBalancesList.find((it) => /^BlasterSwap Positions NFT/.test(it.name));\n if (!currentBalance) {\n resolve(false);\n return;\n }\n fee = currentStrategy.meta.feeTierList.find((it) => it.name.includes(currentBalance.name));\n if (!fee) {\n resolve(false);\n return;\n }\n }\n\n const contract = new ethers.Contract(\n fee.pool,\n QUERY_POOL_ABI,\n Ethers.provider().getSigner(),\n );\n const params = [];\n contract.slot0(...params).then((poolAddress) => {\n const [sqrtPriceX96, tick] = poolAddress;\n resolve({ sqrtPriceX96: ethers.BigNumber.from(sqrtPriceX96).toString(), tick });\n }).catch((err) => {\n console.log('queryPoolInfo failed, ', err);\n resolve(false);\n });\n });\n};\n\nconst balanceList = formatTVL(record).list || [];\n\nconst {\n tab,\n currentRange,\n tabsShown,\n} = state;\n\nconst getRangeData = () => {\n const url = `/api/app/agentfi/position/range?agentAddress=${record.agentAddress}`;\n asyncFetch(url).then((res) => {\n if (!res.ok || !res.body) {\n return;\n }\n State.update({\n currentRange: [res.body.min, res.body.max],\n });\n }).catch((err) => {\n console.log(err);\n });\n};\n\nconst renderDetail = () => {\n if ([strategies[0].name].includes(record.name.toLowerCase())) {\n return (\n <StyledSection>\n <StyledSectionTitle>Strategy Overview</StyledSectionTitle>\n <StyledSectionList>\n <StyledSectionListItem>\n <StyledSectionListLabel>\n Supply\n </StyledSectionListLabel>\n <StyledSectionListValue>\n {balanceList[0] ? Big(balanceList[0].balance).times(currentStrategy.meta.leverage).toFixed(4) : '0.0000'}\n </StyledSectionListValue>\n </StyledSectionListItem>\n <StyledSectionListItem>\n <StyledSectionListLabel>\n Borrow\n </StyledSectionListLabel>\n <StyledSectionListValue>\n {balanceList[0] ? Big(balanceList[0].balance).toFixed(4) : '0.0000'}\n </StyledSectionListValue>\n </StyledSectionListItem>\n <StyledSectionListItem>\n <StyledSectionListLabel>\n Leverage\n </StyledSectionListLabel>\n <StyledSectionListValue>\n {currentStrategy.meta.leverage}x\n </StyledSectionListValue>\n </StyledSectionListItem>\n <StyledSectionListItem>\n <StyledSectionListLabel>\n LTV\n </StyledSectionListLabel>\n <StyledSectionListValue>\n {currentStrategy.meta.targetLTV}\n </StyledSectionListValue>\n </StyledSectionListItem>\n <StyledSectionListItem>\n <StyledSectionListLabel>\n Mode\n </StyledSectionListLabel>\n <StyledSectionListValue>\n Boost Points\n </StyledSectionListValue>\n </StyledSectionListItem>\n </StyledSectionList>\n </StyledSection>\n );\n }\n if (record.name.toLowerCase() === strategies[3].name) {\n return (\n <>\n <StyledTips>\n See which multiplers your agent has accumulated for you. Learn more about Blast multipliers here.\n </StyledTips>\n <StyledMultipliooorCardList>\n {\n currentStrategy.achievements.map((achievement, idx) => (\n <li className=\"card-item\" key={idx + ''} style={{ backgroundImage: `url(\"${achievement.img}\")` }}>\n <span className=\"no\">#{idx + 1}</span>\n </li>\n ))\n }\n {\n [...new Array(totalMissions - numKnownMissions).keys()].map((idx) => (\n <li className=\"card-item\" key={idx + \"\"} style={{ backgroundImage: `url(\"${currentStrategy.meta.lockedImgUrl}\")` }}>\n <span className=\"no\">#{idx + numKnownMissions + 1}</span>\n </li>\n ))\n }\n </StyledMultipliooorCardList>\n </>\n );\n }\n if (record.name.toLowerCase() === strategies[2].name) {\n return (\n <>\n <StyledTips>\n View the breakdown of your LP positions being managed by DEX Balancer.\n </StyledTips>\n <StyledDexCardList>\n {\n currentStrategy.meta.protocolList.map((protocol) => {\n const balances = record.balances || [];\n const currBalance = balances.find((it) => it.address === protocol.address);\n if (!currBalance || !currBalance.underlying) return null;\n return (\n (\n <li className=\"card-item\">\n <img className=\"card-logo\" src={protocol.logo} alt=\"\" />\n <ul className=\"card-balance-list\">\n {\n currBalance.underlying.map((b) => (\n <li className=\"card-balance-item\">\n <span>{b.symbol}</span>\n <span>{Big(b.balance || 0).toFixed(4)}</span>\n </li>\n ))\n }\n </ul>\n <div className=\"card-foot\">\n <a className=\"card-link\" href={protocol.link} rel=\"nofollow\" target=\"_blank\">\n {protocol.link.replace(/^https?:\\/\\/(www.)?/, '')}\n </a>\n </div>\n </li>\n )\n )\n })\n }\n </StyledDexCardList>\n </>\n );\n }\n if (record.name.toLowerCase() === strategies[1].name) {\n return (\n <>\n <StyledTips>\n View liquidity, unclaimed fees and accrued points in your LP position, as well as range and next rebalancing.\n </StyledTips>\n <StyledSection>\n <StyledSectionTitle>Liquidity</StyledSectionTitle>\n <StyledSectionList>\n {\n balanceList && balanceList.map((balance) => (\n <StyledSectionListItem>\n <StyledSectionListLabel>\n <img className=\"clm-balance-icon\" src={balance.icon} alt=\"\" />\n <span>{balance.symbol}</span>\n </StyledSectionListLabel>\n <StyledSectionListValue title={Big(balance.balance || 0).toFixed(18)}>\n {Big(balance.balance || 0).toFixed(4)}\n </StyledSectionListValue>\n </StyledSectionListItem>\n ))\n }\n </StyledSectionList>\n </StyledSection>\n <StyledSection>\n <StyledSectionTitle>Current range and price</StyledSectionTitle>\n <StyledSectionList>\n <StyledProgress\n className=\"center\"\n max={10}\n value={5}\n >\n <div className=\"range-center\">\n {Math.round(state.currentPrice || 0)}\n </div>\n <div className=\"range-min\">\n {currentRange[0] && Math.floor(currentRange[0] || 0)}\n </div>\n <div className=\"range-max\">\n {currentRange[1] && Math.floor(currentRange[1] || 0)}\n </div>\n </StyledProgress>\n </StyledSectionList>\n </StyledSection>\n </>\n );\n }\n};\n\nuseEffect(() => {\n let _tabs = [tabs[0]];\n if (record.name.toLowerCase() === strategies[1].name) {\n getRangeData();\n _tabs.push(tabs[1]);\n _tabs.push(tabs[2]);\n }\n if (record.name.toLowerCase() === strategies[3].name) {\n _tabs.push(tabs[1]);\n }\n if (record.name.toLowerCase() === strategies[2].name) {\n _tabs.push(tabs[1]);\n }\n State.update({\n tabsShown: _tabs,\n });\n\n if (record.name.toLowerCase() === strategies[1].name) {\n queryPoolInfo().then((poolRes) => {\n if (!poolRes) {\n return;\n }\n const { tick } = poolRes;\n const currentBalancesList = record.balances || [];\n const currentBalance = currentBalancesList.find((it) => /^BlasterSwap Positions NFT/.test(it.name));\n if (\n !currentBalance ||\n !currentBalance.underlying ||\n currentBalance.underlying.length < 2\n ) {\n return;\n }\n State.update({\n currentPrice: tickToPrice({\n tick,\n token0: currentBalance.underlying[1],\n token1: currentBalance.underlying[0],\n }),\n });\n });\n }\n}, []);\n\nreturn (\n <StyledContainer>\n <StyledTop>\n <StyledBack onClick={handleClose}>\n <div className=\"back-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"9\"\n height=\"13\"\n viewBox=\"0 0 9 13\"\n fill=\"none\"\n >\n <path\n d=\"M7.5 1L2 6.49992L7.5 12\"\n stroke=\"#979ABE\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n <div className=\"back-title\">\n Back to My Strategies\n </div>\n </StyledBack>\n </StyledTop>\n <StyledContent>\n <StyledCard>\n <StyledCardHead>\n <div className=\"strategy-title\">\n {record.name}\n </div>\n <div className=\"strategy-description\">\n {\n currentStrategy?.DESCRIPTION_CONFIG?.join( ' ')\n }\n </div>\n </StyledCardHead>\n </StyledCard>\n <StyledBot>\n <StyledCard style={{ flex: 1 }}>\n <StyledCardBody className=\"no-padding\" style={{ height: '100%' }}>\n <StyledTabs>\n {\n tabsShown.map((_tab) => (\n <StyledTab\n key={_tab.key}\n onClick={() => handleTab(_tab)}\n className={`${tab.key === _tab.key ? 'active' : ''}`}\n >\n {_tab.title}\n </StyledTab>\n ))\n }\n <StyledTabPointer\n style={{\n width: `calc(100% / ${tabsShown.length})`,\n transform: `translateX(calc(100% * ${tabsShown.findIndex((it) => it.key === tab.key) || 0}))`,\n }}\n />\n </StyledTabs>\n <StyledTabsContent>\n <Widget\n src={tab.component}\n props={{\n ...props,\n tab,\n handleDetailClose: handleClose,\n currentStrategy,\n balanceList,\n queryPoolInfo,\n }}\n />\n </StyledTabsContent>\n </StyledCardBody>\n </StyledCard>\n <StyledCard style={{ flex: 1 }}>\n <StyledCardBody>\n\n {/*#region balance*/}\n <StyledSection>\n <StyledSectionTitle>Balance</StyledSectionTitle>\n <StyledSectionList>\n <StyledSectionListItem>\n <StyledSectionListLabel style={{ color: 'var(--switch-color)' }}>\n Total\n </StyledSectionListLabel>\n <StyledSectionListValue style={{ color: 'var(--switch-color)' }}>\n {formatTVL(record).value}\n </StyledSectionListValue>\n </StyledSectionListItem>\n {\n !!balanceList.length && balanceList.map((tk) => (\n <StyledSectionListItem>\n <StyledSectionListLabel>\n <img className=\"strategy-balance-icon\" src={tk.icon} alt=\"\" />\n <span>{tk.symbol}</span>\n </StyledSectionListLabel>\n <StyledSectionListValue>\n {\n record.name.toLowerCase() === strategies[3].name ? (\n Big(tk.balance).times(4).toFixed(4)\n ) : (\n Big(tk.balance).toFixed(4)\n )\n }\n </StyledSectionListValue>\n </StyledSectionListItem>\n ))\n }\n </StyledSectionList>\n </StyledSection>\n {/*#endregion*/}\n\n {/*#region detail*/}\n {renderDetail()}\n {/*#endregion*/}\n </StyledCardBody>\n </StyledCard>\n </StyledBot>\n </StyledContent>\n </StyledContainer>\n);\n" } } } } }