Transaction: 8NUzzVi...fSnM

{ "data": { "dapdapbos.near": { "widget": { "Staking.Hyperlock.Index": { "": "const Wrapper = styled.div`\n --bg-1: #262836;\n --bg-2: #373a53;\n --bg-3: #2e3142;\n --white: #fff;\n --purple: #979abe;\n --dark: #1b1e27;\n\n --fz-12: 12px;\n --fz-14: 14px;\n --fz-16: 16px;\n --fz-24: 24px;\n\n --grid-columns: 30% 17% 19% 17% 17%;\n\n /* --secondary: #6c757d; */\n\n color: var(--white);\n\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n .form-control::placeholder {\n color: white;\n }\n .form-control:focus {\n box-shadow: 0 0 0 0.25rem rgba(120, 58, 227, 0.5);\n }\n\n padding-top: 34px;\n .grid-pool-head {\n max-width: 1244px;\n margin: 0 auto 12px;\n font-size: 14px;\n color: var(--purple);\n }\n .fee-wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .type-label {\n width: 27px;\n height: 16px;\n border-radius: 4px;\n background: #373a53;\n color: #fff;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n text-align: center;\n line-height: 16px;\n }\n .button {\n width: 118px;\n height: 46px;\n flex-shrink: 0;\n border-radius: 8px;\n text-align: center;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n cursor: pointer;\n transition: 0.5s;\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n &:hover:not(:disabled) {\n opacity: 0.9;\n }\n &:active:not(:disabled) {\n opacity: 0.8;\n }\n }\n .button.primary {\n background: var(--primary);\n color: #000;\n }\n .button.ghost {\n border: 1px solid var(--primary);\n background-color: transparent;\n color: var(--primary);\n }\n .link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n color: var(--primary);\n text-align: center;\n }\n\n .link-text {\n color: var(--primary);\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n text-decoration-line: underline;\n }\n`;\n\nconst TabsList = styled.div`\n display: flex;\n align-items: center;\n margin: 0 auto;\n width: 420px;\n height: 46px;\n background-color: var(--bg-1);\n border-radius: 10px;\n color: var(--white);\n padding: 0 5px;\n margin-bottom: 30px;\n border: 1px solid #262836;\n .tab-head-item {\n flex: 1;\n display: flex;\n height: 36px;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n border-radius: 5px;\n color: var(--white);\n cursor: pointer;\n }\n .tab-head-item.active {\n background-color: var(--bg-2);\n }\n`;\n\nState.init({\n currentTab: \"TAB_POOL\",\n loading: false,\n pools: null,\n poolsList: [],\n});\n\nconst {\n isChainSupported,\n account,\n chainId,\n dexConfig,\n curChain,\n onSwitchChain,\n switchingChain,\n toast,\n} = props;\n\nuseEffect(() => {\n if (isChainSupported) {\n State.update({\n userDataUpdater: Date.now(),\n loading: true,\n });\n }\n}, [isChainSupported]);\n\nreturn (\n <Wrapper style={{ ...(dexConfig.theme || {}) }}>\n <div style={{ position: \"relative\", margin: \"0 auto\", width: \"1244px\" }}>\n <TabsList>\n {[\n { key: \"TAB_POOL\", label: \"All Pools\" },\n { key: \"TAB_ASSETS\", label: \"Your Assets\" },\n ].map((item) => (\n <div\n key={item.key}\n className={`tab-head-item ${\n state.currentTab === item.key ? \"active\" : \"\"\n }`}\n onClick={() => {\n if (item.key === \"TAB_ASSETS\" && state.getV3Fees) {\n state.getV3Fees(state.staked);\n }\n State.update({\n currentTab: item.key,\n });\n }}\n >\n {item.label}\n </div>\n ))}\n </TabsList>\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.Search\"\n props={{\n disabled: state.loading && !state.poolsList.length,\n onChange: (val) => {\n State.update({\n list: val\n ? state.poolsList.filter((item) => {\n if (!val) return true;\n return item.name.toLowerCase().includes(val.toLowerCase());\n })\n : state.poolsList,\n });\n },\n }}\n />\n </div>\n {state.currentTab === \"TAB_POOL\" && (\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.Pools\"\n props={{\n loading: state.loading,\n list: state.list || state.poolsList,\n }}\n />\n )}\n {state.currentTab === \"TAB_ASSETS\" && (\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.Assets\"\n props={{\n unstaked: state.unstaked,\n staked: state.staked || [],\n fees: state.fees,\n handler: state.handler,\n pools: state.pools || {},\n dappLink: dexConfig.dappLink,\n onOpenStakeModal: (data) => {\n State.update({\n modelData: data,\n });\n },\n onSuccess: () => {\n State.update({\n userDataUpdater: Date.now(),\n });\n },\n }}\n />\n )}\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.PoolData\"\n props={{\n ...props,\n update: state.loading,\n onLoad: (data) => {\n State.update({\n loading: false,\n ...data,\n });\n },\n }}\n />\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.UserData\"\n props={{\n ...props,\n update: state.userDataUpdater,\n pools: state.pools,\n onLoad: (data) => {\n State.update({\n ...data,\n });\n },\n }}\n />\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.Handler\"\n props={{\n ...props,\n onLoad: (fn) => {\n State.update({\n handler: fn,\n });\n },\n }}\n />\n {state.modelData && (\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.StakeOrWithdraw\"\n props={{\n ...state.modelData,\n dexConfig,\n account,\n toast,\n handler: state.handler,\n onSuccess: () => {\n State.update({\n userDataUpdater: Date.now(),\n });\n },\n onClose: () => {\n State.update({\n modelData: {\n display: false,\n },\n });\n },\n }}\n />\n )}\n {!isChainSupported && (\n <Widget\n src=\"bluebiu.near/widget/Swap.ChainWarnigBox\"\n props={{\n chain: curChain,\n onSwitchChain: onSwitchChain,\n switchingChain: switchingChain,\n theme: dexConfig.theme,\n }}\n />\n )}\n </Wrapper>\n);\n" }, "Staking.Hyperlock.Pool": { "": "const HeadWrapper = styled.div`\n border-radius: 16px;\n color: var(--white);\n font-size: var(--fz-14);\n position: relative;\n .pool-head {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n align-items: center;\n cursor: pointer;\n background-color: var(--bg-1);\n }\n .title-primary {\n font-size: var(--fz-16);\n font-weight: 500;\n }\n .title-secondary {\n }\n .title-sub {\n font-size: var(--fz-12);\n color: var(--purple);\n }\n`;\n\nconst GridContainer = styled.div`\n display: grid;\n grid-template-columns: var(--grid-columns);\n`;\nconst GridItem = styled.div`\n height: 84px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-left: 24px;\n`;\n\n// tabs begin\nconst TabListWrap = styled.div`\n border-right: 1px solid var(--bg-2);\n display: flex;\n margin: 0 auto;\n width: 510px;\n align-items: center;\n`;\nconst TabsList = styled.div`\n border: 1px solid var(--bg-2);\n margin-bottom: 20px;\n .tab-head-item {\n flex: 1;\n display: flex;\n height: 46px;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: var(--purple);\n cursor: pointer;\n border-bottom-width: 3px;\n border-bottom-style: solid;\n border-bottom-color: transparent;\n border-left: 1px solid var(--bg-2);\n }\n .tab-head-item.active {\n color: var(--white);\n border-bottom-color: var(--primary);\n }\n`;\n// tabs end\n\n// Accordion begin\nconst StyledRow = styled.div`\n /* margin-bottom: 10px; */\n border: 1px solid #373a53;\n max-width: 1244px;\n margin: 0 auto;\n border-radius: 16px;\n overflow: hidden;\n .AccordionChevron {\n position: absolute;\n right: 24px;\n top: 45%;\n transition: all 0.1s ease-out;\n }\n &[data-state=\"open\"] .AccordionChevron {\n transform: rotate(90deg);\n }\n`;\n\nconst ExpandWrapper = styled.div`\n height: 0px;\n animation: fadeOut 0.4s 0.1s ease both;\n &.expand {\n animation: fadeIn 0.4s 0.1s ease both;\n }\n\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n height: 0px;\n border: none;\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n height: 260px;\n border: 1px solid #373a53;\n border-top: none;\n }\n }\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n transform: translateY(0);\n border: 1px solid #373a53;\n border-top: none;\n }\n 100% {\n opacity: 0;\n transform: translateY(-20px);\n height: 0px;\n border: none;\n }\n }\n`;\n\nconst AccordionContent = styled.div`\n /* max-width: 1244px;\n margin: 0 auto; */\n border-color: var(--bg-3);\n background-color: var(--bg-3);\n padding-bottom: 20px;\n border-radius: 0px 0px 13px 13px;\n background: #2e3142;\n`;\n//Accordion end\n\nconst {\n data,\n currentChain,\n stakedTokens,\n unStakedTokens,\n dappLink,\n handler,\n onSuccess,\n onOpenStakeModal,\n} = props;\n\nState.init({\n currentTab: \"STAKE_TAB\",\n});\n\nconst handleChangeTabs = (value) => {\n State.update({\n currentTab: value,\n });\n};\n\nreturn (\n <StyledRow>\n <HeadWrapper\n onClick={() => {\n State.update({\n expand: !state.expand,\n });\n }}\n >\n <GridContainer className=\"pool-head\">\n <GridItem>\n <div className=\"title-primary\">\n <img src={data.token0.icon} style={{ width: 26, height: 26 }} />\n <img\n src={data.token1.icon}\n style={{ width: 26, height: 26, marginLeft: -12 }}\n />\n <span style={{ marginLeft: 20 }}>{data.name}</span>\n </div>\n </GridItem>\n <GridItem>\n <div className=\"fee-wrapper\">\n {data.fee && (\n <div className=\"title-secondary\">{data.fee / 10000}%</div>\n )}\n <div className=\"type-label\">{data.type}</div>\n </div>\n </GridItem>\n <GridItem>\n <div className=\"title-primary\">\n {data.stackIcons.map((item, i) => (\n <img\n key={item}\n src={item}\n style={{ width: 26, height: 26, marginLeft: i === 0 ? 0 : -12 }}\n />\n ))}\n </div>\n </GridItem>\n <GridItem>{data.points || 0}</GridItem>\n <GridItem>\n <Widget\n src=\"bluebiu.near/widget/Avalanche.Lending.Total\"\n props={{\n total: data.tvl,\n digit: 2,\n unit: \"$\",\n }}\n />\n </GridItem>\n </GridContainer>\n <svg\n className=\"AccordionChevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"8\"\n height=\"10\"\n viewBox=\"0 0 8 10\"\n fill=\"none\"\n >\n <path\n d=\"M7.02391 4.21913C7.52432 4.61945 7.52432 5.38054 7.02391 5.78087L2.1247 9.70024C1.46993 10.2241 0.5 9.75788 0.5 8.91937L0.5 1.08062C0.5 0.242118 1.46993 -0.224055 2.12469 0.299755L7.02391 4.21913Z\"\n fill=\"#979ABE\"\n />\n </svg>\n </HeadWrapper>\n <ExpandWrapper className={state.expand ? \"expand\" : \"\"}>\n <AccordionContent>\n <TabsList>\n <TabListWrap>\n {[\n { key: \"STAKE_TAB\", label: \"Stake\" },\n { key: \"WITHDRAW_TAB\", label: \"Withdraw\" },\n ].map((item) => (\n <div\n className={`tab-head-item ${\n state.currentTab === item.key ? \"active\" : \"\"\n }`}\n onClick={() => {\n State.update({\n currentTab: item.key,\n });\n }}\n >\n {item.label}\n </div>\n ))}\n </TabListWrap>\n </TabsList>\n {state.currentTab === \"STAKE_TAB\" && (\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.PoolTab\"\n props={{\n tokens: unStakedTokens,\n token0: data.token0,\n token1: data.token1,\n price0: data.token0.price,\n price1: data.token1.price,\n name: data.name,\n dappLink,\n handler,\n onSuccess,\n onOpenStakeModal,\n from: \"stake\",\n type: data.type,\n }}\n />\n )}\n {state.currentTab === \"WITHDRAW_TAB\" && (\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.PoolTab\"\n props={{\n tokens: stakedTokens,\n token0: data.token0,\n token1: data.token1,\n price0: data.token0.price,\n price1: data.token1.price,\n name: data.name,\n dappLink,\n handler,\n onSuccess,\n onOpenStakeModal,\n from: \"withdraw\",\n }}\n />\n )}\n </AccordionContent>\n </ExpandWrapper>\n </StyledRow>\n);\n" }, "Staking.Hyperlock.PoolData": { "": "const { account, chainId, onLoad } = props;\n\nuseEffect(() => {\n let tokens = {};\n let config = {};\n let count = 0;\n let basePools = {};\n let tvlPools = {};\n\n const getConfig = () => {\n asyncFetch(\"/config/hyperlock.json\")\n .then((res) => {\n config = res.body;\n getTokens();\n })\n .catch((err) => {\n getTokens();\n });\n };\n const getTokens = () => {\n asyncFetch(\n \"https://raw.githubusercontent.com/hyperlockfi/tokenlists/main/generated/hyperlock.tokenlist.json\"\n )\n .then((res) => {\n const data = JSON.parse(res.body);\n tokens = data.tokens.reduce(\n (acc, cur) => ({ ...acc, [cur.address.toLowerCase()]: cur }),\n {}\n );\n\n getPoints();\n })\n .catch((err) => {\n getPoints();\n });\n };\n const getPoints = () => {\n asyncFetch(\n \"https://graph.hyperlock.finance/subgraphs/name/hyperlock/points-blast-mainnet-B\",\n {\n method: \"post\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n operationName: \"Pools\",\n query:\n 'query Pools($where: Pool_filter, $orderBy: Pool_orderBy, $orderDirection: OrderDirection, $account: String! = \"\") {\\n pools(where: $where, orderBy: $orderBy, orderDirection: $orderDirection) {\\n ...Pool__fields\\n }\\n}\\n\\nfragment Pool__fields on Pool {\\n id\\n type\\n addedAt\\n lpToken {\\n ...Token__fields\\n }\\n totalAllocation\\n epochs {\\n id\\n epoch\\n allocation\\n }\\n token0 {\\n ...Token__fields\\n }\\n token1 {\\n ...Token__fields\\n }\\n poolAccounts(where: {account: $account}) {\\n id\\n account {\\n totalBalance\\n epochs {\\n id\\n epoch\\n balance\\n }\\n }\\n staked\\n }\\n v2PoolData {\\n totalStaked\\n }\\n v3PoolData {\\n fee\\n nfts: tokens(where: {account_ends_with: $account}) {\\n id\\n tokenId\\n isStaked\\n }\\n }\\n}\\n\\nfragment Token__fields on Token {\\n id\\n name\\n symbol\\n decimals\\n}',\n variables: {\n account,\n chainId,\n poolsVariables: {},\n staleTime: 162000,\n },\n }),\n }\n )\n .then((res) => {\n const pools = res.body?.data?.pools;\n\n if (!pools.length) {\n onLoad({\n loading: false,\n pools: basePools,\n poolsList: Object.values(basePools),\n });\n return;\n }\n const v3Pools = {};\n const v2Pools = {};\n pools.forEach((pool) => {\n const token0 = {\n ...pool.token0,\n icon: tokens[pool.token0.id.toLowerCase()]?.logoURI,\n };\n const token1 = {\n ...pool.token1,\n icon: tokens[pool.token1.id.toLowerCase()]?.logoURI,\n };\n const _pool = {\n id: pool.id,\n token0,\n token1,\n fee: pool.v3PoolData?.fee,\n type: pool.type,\n };\n if (pool.type === \"V3\") {\n v3Pools[pool.id] = { ..._pool, name: pool.lpToken.symbol };\n } else {\n v2Pools[pool.id] = {\n ..._pool,\n name: pool.token0.symbol + \"-\" + pool.token1.symbol,\n };\n }\n });\n\n getV3Tvl(v3Pools);\n getV2Tvl(v2Pools);\n basePools = { ...v3Pools, ...v2Pools };\n })\n .catch((err) => {\n onLoad({\n loading: false,\n pools: basePools,\n poolsList: Object.values(basePools),\n });\n });\n };\n const getV3Tvl = (pools) => {\n const addresses = Object.keys(pools);\n asyncFetch(\"https://api.hyperlock.finance/v1/blast-mainnet/points/tvl\", {\n method: \"post\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ addresses }),\n })\n .then((res) => {\n const data = res.body;\n let prices = {};\n const _pools = Object.values(pools)\n .filter((pool) => data[pool.id])\n .map((pool) => {\n const { token0Amount, token1Amount, token0Price, token1Price } =\n data[pool.id];\n\n const _token0 = Big(token0Amount)\n .mul(token0Price)\n .div(Big(10).pow(pool.token0.decimals));\n const _token1 = Big(token1Amount)\n .mul(token1Price)\n .div(Big(10).pow(pool.token1.decimals));\n\n prices[pool.token0.id] = token0Price;\n prices[pool.token1.id] = token1Price;\n\n const defaultStackIcons = config.stack?.[\"default\"] || [];\n const stackIcons = config.stack?.[pool.id] || [];\n\n return {\n ...pool,\n token0: { ...pool.token0, price: token0Price },\n token1: { ...pool.token1, price: token1Price },\n tvl: _token0.add(_token1).toString(),\n stackIcons: [...defaultStackIcons, ...stackIcons].map((address) =>\n address ? tokens[address.toLowerCase()].logoURI : \"\"\n ),\n points: config.points?.[pool.id],\n };\n })\n .filter((pool) => Big(pool.tvl).gt(0));\n\n tvlPools = {\n ...tvlPools,\n ..._pools.reduce((acc, pool) => ({ ...acc, [pool.id]: pool }), {}),\n };\n count++;\n if (count === 2) {\n onLoad({\n loading: false,\n pools: tvlPools,\n poolsList: Object.values(tvlPools).sort((a, b) =>\n Big(a.tvl).gt(b.tvl) ? -1 : 1\n ),\n });\n }\n })\n .catch((err) => {\n onLoad({\n loading: false,\n pools: basePools,\n poolsList: Object.values(basePools),\n });\n });\n };\n const getV2Tvl = (pools) => {\n const addresses = Object.keys(pools);\n asyncFetch(\n \"https://graph.hyperlock.finance/subgraphs/name/hyperlock/v2-subgraph-mainnet-b\",\n {\n method: \"post\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n operationName: \"Prices\",\n query:\n 'query Prices($account: String, $ids: [ID!]) {\\n prices: pairs(where: {id_in: $ids}) {\\n id\\n token0 {\\n id\\n }\\n token1 {\\n id\\n }\\n token0PriceUSD\\n token1PriceUSD\\n lpTokenPriceUSD\\n system: liquidityPositions(\\n where: {user: \"0xc3ecadb7a5fab07c72af6bcfbd588b7818c4a40e\"}\\n ) {\\n liquidityTokenBalance\\n }\\n }\\n}',\n variables: { ids: addresses },\n }),\n }\n )\n .then((res) => {\n const data = res.body.data.prices;\n let prices = {};\n const _pools = data\n .map((item) => {\n const pool = pools[item.id];\n\n const lpPrice = item.lpTokenPriceUSD;\n let lpBalance = Big(0);\n\n item.system?.forEach((slip) => {\n lpBalance = lpBalance.add(slip.liquidityTokenBalance);\n });\n\n const token0Price = item.token0PriceUSD;\n const token1Price = item.token1PriceUSD;\n\n prices[pool.token0.id] = token0Price;\n prices[pool.token1.id] = token1Price;\n\n const defaultStackIcons = config.stack?.[\"default\"] || [];\n const stackIcons = config.stack?.[pool.id] || [];\n\n return {\n ...pool,\n token0: { ...pool.token0, price: token0Price },\n token1: { ...pool.token1, price: token1Price },\n tvl: lpBalance.mul(lpPrice).toString(),\n stackIcons: [...defaultStackIcons, ...stackIcons].map((address) =>\n address ? tokens[address.toLowerCase()].logoURI : \"\"\n ),\n points: config.points?.[pool.id],\n };\n })\n .filter((pool) => Big(pool.tvl).gt(0));\n\n tvlPools = {\n ...tvlPools,\n ..._pools.reduce((acc, pool) => ({ ...acc, [pool.id]: pool }), {}),\n };\n\n count++;\n if (count === 2) {\n onLoad({\n loading: false,\n pools: tvlPools,\n poolsList: Object.values(tvlPools).sort((a, b) =>\n Big(a.tvl).gt(b.tvl) ? -1 : 1\n ),\n });\n }\n })\n .catch((err) => {\n onLoad({\n loading: false,\n pools: basePools,\n poolsList: Object.values(basePools),\n });\n });\n };\n getConfig();\n}, []);\n" }, "Staking.Hyperlock.Search": { "": "const Search = styled.div`\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: var(--bg-1);\n height: 36px;\n border: 1px solid #373a53;\n border-radius: 10px;\n display: flex;\n align-items: center;\n padding-left: 10px;\n gap: 6px;\n`;\nconst Input = styled.input`\n font-size: 16px;\n color: #fff;\n font-weight: 500;\n outline: none;\n border: none;\n vertical-align: bottom;\n padding: 4px 10px 4px 0px;\n width: 150px;\n\n &::placeholder {\n color: rgba(151, 154, 190, 0.5);\n }\n`;\n\nState.init({\n debounce: (fn, wait) => {\n let timer;\n return (args) => {\n clearTimeout(timer);\n timer = setTimeout(() => {\n fn(args);\n }, wait);\n };\n },\n});\n\nconst debouncedOnChange = state.debounce?.(props.onChange, 500);\n\nreturn (\n <Search>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"21\"\n height=\"15\"\n viewBox=\"0 0 21 15\"\n fill=\"none\"\n class=\"search-icon\"\n >\n <circle\n cx=\"7.01829\"\n cy=\"7.01829\"\n r=\"6.01829\"\n stroke=\"rgba(151, 154, 190, 0.7)\"\n strokeWidth=\"2\"\n ></circle>\n <rect\n x=\"14.9138\"\n y=\"9.64978\"\n width=\"6.141\"\n height=\"2.63186\"\n rx=\"1.31593\"\n transform=\"rotate(30 14.9138 9.64978)\"\n fill=\"rgba(151, 154, 190, 0.7)\"\n ></rect>\n </svg>\n <Input\n placeholder=\"Token Symbol\"\n disabled={props.disabled}\n onChange={(ev) => {\n debouncedOnChange(ev.target.value);\n }}\n />\n </Search>\n);\n" }, "Staking.Hyperlock.Pools": { "": "const { loading, list } = props;\n\nconst GridContainer = styled.div`\n display: grid;\n grid-template-columns: var(--grid-columns);\n\n &.grid-pool-asset {\n grid-template-columns: 40% 30% 30%;\n }\n`;\n\nconst GridItem = styled.div`\n padding-left: 24px;\n &.action-item {\n display: flex;\n column-gap: 10px;\n padding-right: 18px;\n justify-content: right;\n }\n &.action-item-head {\n display: flex;\n justify-content: center;\n }\n`;\n\nconst PoolItem = styled.div`\n margin-bottom: 10px;\n`;\n\nreturn (\n <>\n <GridContainer className=\"grid-pool-head\">\n <GridItem>Pool</GridItem>\n <GridItem>LP Type</GridItem>\n <GridItem>Point Stack</GridItem>\n <GridItem>Points/$1K</GridItem>\n <GridItem>TVL</GridItem>\n </GridContainer>\n {loading && <Widget src=\"bluebiu.near/widget/Lending.Spinner\" />}\n {list.map((item) => (\n <PoolItem key={item.id}>\n <Widget\n src=\"dapdapbos.near/widget/Staking.Hyperlock.Pool\"\n props={{\n ...props,\n data: item,\n stakedTokens: state.stakedMap?.[item.id] || [],\n unStakedTokens: state.unstakedMap?.[item.id] || [],\n handler: state.handler,\n dappLink: dexConfig.dappLink,\n onSuccess: () => {\n State.update({\n loading: true,\n userDataUpdater: Date.now(),\n });\n },\n onOpenStakeModal: (data) => {\n State.update({\n modelData: data,\n });\n },\n }}\n key={item.id}\n />\n </PoolItem>\n ))}\n </>\n);\n" } } } } }