Transaction: 2UTvszv...zisf

{ "data": { "bluebiu.near": { "widget": { "Swap.AggLayerDex": { "": "const {\n account,\n curChain,\n windowOpen,\n theme,\n dexConfig,\n isChainSupported,\n chainId,\n} = props;\n\nState.init({\n chainId: -1,\n});\n\nconst Dex = styled.div`\n display: flex;\n justify-content: center;\n padding-top: 26px;\n @media (max-width: 900px) {\n padding-top: 0px;\n flex-direction: column;\n }\n pre {\n display: none;\n }\n`;\n\nconst WidgetWrapper = styled.div`\n width: 560px;\n position: relative;\n @media (max-width: 900px) {\n width: 100%;\n margin-top: 10px;\n }\n`;\n\nconst BridgeBanner = styled.div`\n width: 560px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n padding: 15px;\n margin: 0 auto;\n\n margin-top: 12px;\n\n .bridge-text {\n display: flex;\n align-items: center;\n gap: 12px;\n .icon {\n height: 30px;\n }\n\n .text-wrapper {\n display: flex;\n flex-direction: column;\n }\n .text-l {\n font-size: 16px;\n font-weight: 600;\n line-height: 22px;\n letter-spacing: 0em;\n }\n .text-m {\n font-size: 14px;\n font-weight: 400;\n line-height: 19px;\n letter-spacing: 0em;\n }\n }\n`;\n\nconst ArrowRight = (\n <svg\n width=\"7\"\n height=\"12\"\n viewBox=\"0 0 7 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M1 11L5 6L1 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n);\n\nreturn (\n <Dex style={dexConfig.theme}>\n <WidgetWrapper>\n <Widget\n src=\"bluebiu.near/widget/Swap.Content\"\n props={{\n ...props,\n account,\n chainId,\n chainIdNotSupport: !isChainSupported,\n onSwitchChain: props.onSwitchChain,\n }}\n />\n {!isChainSupported && (\n <Widget\n src=\"bluebiu.near/widget/Swap.ChainWarnigBox\"\n props={{\n chain: curChain,\n onSwitchChain: props.onSwitchChain,\n switchingChain: props.switchingChain,\n theme: dexConfig.theme,\n }}\n />\n )}\n </WidgetWrapper>\n </Dex>\n);\n" }, "Swap.CurrencyInput": { "": "// styled area\n\nconst Wrapper = styled.div`\n padding: 16px 16px 14px;\n border-radius: 12px;\n border: 1px solid #373a53;\n transition: 0.3s;\n`;\nconst InputBox = styled.div`\n display: flex;\n flex-wrap: nowrap;\n justify-content: space-between;\n gap: 8px;\n`;\nconst InputField = styled.div`\n flex-shrink: 1;\n flex-grow: 1;\n`;\nconst InputWarpper = styled.div`\n height: 46px;\n padding: 10px 0px;\n @media (max-width: 900px) {\n height: 40px;\n }\n`;\nconst Input = styled.input`\n font-size: 32px;\n width: 100%;\n color: var(--agg-text-color, #fff);\n font-weight: 500;\n background-color: transparent;\n outline: none;\n border: none;\n height: 40px;\n vertical-align: bottom;\n @media (max-width: 900px) {\n font-size: 20px;\n height: 34px;\n }\n`;\nconst Value = styled.div`\n padding-top: 10px;\n color: var(--agg-fourth-color, #979abe);\n font-size: 14px;\n line-height: 16px;\n`;\nconst CurrencyField = styled.div``;\n\nconst CurrencySelect = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n border-radius: 8px;\n border: 1px solid var(--agg-border-active-color, #373a53);\n background: var(--agg-bg-color, #2e3142);\n padding: 3px 10px 3px 8px;\n\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n svg {\n color: var(--agg-text-color, #979abe);\n }\n @media (max-width: 768px) {\n svg {\n width: 12px !important;\n }\n padding: 0px 12px 0px 6px;\n }\n`;\nconst CurrencyWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 32px;\n`;\nconst CurrencyIcon = styled.img`\n width: 22px;\n height: 22px;\n border-radius: 50%;\n @media (max-width: 768px) {\n width: 22px;\n height: 22px;\n }\n`;\nconst CurrencySymbol = styled.div`\n font-size: 18px;\n color: var(--agg-text-color, #fff);\n margin-left: 7px;\n white-space: nowrap;\n .fz-14 {\n font-size: 14px;\n }\n @media (max-width: 768px) {\n width: calc(100% - 30px);\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: 14px;\n .fz-14 {\n font-size: 12px;\n }\n }\n`;\nconst Amount = styled.div`\n padding-top: 18px;\n color: var(--agg-fourth-color, #979abe);\n font-size: 14px;\n line-height: 16px;\n text-align: right;\n cursor: pointer;\n display: flex;\n justify-content: flex-end;\n gap: 4px;\n align-items: center;\n flex-wrap: nowrap;\n`;\nconst Label = styled.div`\n color: var(--agg-text-color, #979abe);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n\n// styled area end\n\nState.init({\n balance: \"0\",\n});\n\nconst utils = {\n balanceFormated: () => {\n if (!props.currency?.address) return \"-\";\n if (state.balance === \"0\" || Big(state.balance).eq(0)) return \"0\";\n if (Big(state.balance).lt(0.0001)) return \"<0.0001\";\n return Big(state.balance).toFixed(4, 0);\n },\n};\n\nconst handlers = {\n handleDisplayCurrencySelect: () => {\n props?.onCurrencySelectOpen();\n },\n handleInputChange: (ev) => {\n if (isNaN(Number(ev.target.value))) return;\n props.onAmountChange?.(ev.target.value.replace(/\\s+/g, \"\"));\n },\n};\n\nconst tokenPrice =\n props.prices[props.currency.priceKey || props.currency.symbol];\n\nreturn (\n <Wrapper\n style={{\n background: !state.focus\n ? \"var(--agg-bg-color,#2e3142)\"\n : \"var(--agg-bg-color,#1B1E27)\",\n borderColor: !state.focus\n ? \"var(--agg-border-color,#373a53)\"\n : \"var(--agg-border-active-color,#1B1E27)\",\n }}\n >\n <Widget\n src=\"bluebiu.near/widget/Arbitrum.Swap.CurrencyBalance\"\n props={{\n address: props.currency?.address,\n updateTokenBalance: props.updateTokenBalance,\n account: props.account,\n onLoad: (balance) => {\n State.update({\n balance: ethers.utils.formatUnits(balance, props.currency.decimals),\n });\n props?.onUpdateCurrencyBalance(balance);\n },\n }}\n />\n <Label>{props.type === \"in\" ? \"You pay\" : \"You receive\"}</Label>\n <InputBox>\n {\" \"}\n <InputField>\n <InputWarpper>\n <Input\n value={props.amount}\n disabled={props.disabled}\n onChange={handlers.handleInputChange}\n onFocus={() => {\n State.update({\n focus: true,\n });\n }}\n onBlur={() => {\n State.update({\n focus: false,\n });\n }}\n placeholder=\"0\"\n />\n </InputWarpper>\n <Value>\n ≈{\" \"}\n {tokenPrice && props.amount\n ? `$${Big(props.amount || 0)\n .mul(tokenPrice)\n .toFixed(2)}`\n : \"-\"}\n </Value>\n </InputField>\n <CurrencyField>\n <CurrencySelect onClick={handlers.handleDisplayCurrencySelect}>\n <CurrencyWrapper>\n {props.currency?.icon && <CurrencyIcon src={props.currency.icon} />}\n <CurrencySymbol>\n {props.currency.symbol || (\n <span className=\"fz-14\">Select a token</span>\n )}\n </CurrencySymbol>\n </CurrencyWrapper>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"7\"\n viewBox=\"0 0 12 7\"\n fill=\"none\"\n >\n <path\n d=\"M1 1L6 5L11 1\"\n stroke=\"#979ABE\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n </CurrencySelect>\n {props.account && !props.chainIdNotSupport && (\n <Amount\n onClick={() => {\n const formatedBalance = utils.balanceFormated();\n if (![\"-\", \"Loading\", \"0\"].includes(formatedBalance))\n props.onAmountChange?.(state.balance);\n }}\n >\n Balance:{\" \"}\n <span\n style={{\n textDecoration: props.disabled ? \"none\" : \"underline\",\n }}\n >\n {utils.balanceFormated()}\n </span>\n </Amount>\n )}\n </CurrencyField>\n </InputBox>\n </Wrapper>\n);\n" }, "Liquidity.Bridge.STEER.List": { "": "const {\n ListWrapper,\n SvgIcon,\n Table,\n THead,\n Th,\n TBody,\n TrWrapper,\n Tr,\n Td,\n TdTxt,\n PoolPercentage,\n StrategyTxt,\n StyledEmptyTips,\n StyledVaultImage,\n} = VM.require('bluebiu.near/widget/Liquidity.Handler.Styles')\n\nconst {\n toast,\n prices,\n refetch,\n curChain,\n dataList,\n dataIndex,\n columnList,\n onChangeDataIndex,\n addresses,\n addAction,\n defaultDex,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n} = props\n\nfunction renderTD(data, column, index) {\n if (column.type === 'slot') {\n return column.render(data, index)\n }\n if (column.type === 'svg') {\n return (\n <SvgIcon>\n {data[column.key]}\n </SvgIcon>\n )\n }\n return (\n <TdTxt>{data[column.key]}</TdTxt>\n )\n}\nreturn (\n <ListWrapper>\n {\n\n <Table>\n <THead>\n {\n columnList.map((column, index) => {\n return (\n <Th key={index} style={{ width: column.width }}>{column.label}</Th>\n )\n })\n }\n </THead>\n {dataList && dataList.length > 0 ? (\n <TBody>\n {dataList.map((data, index) => {\n return (\n <TrWrapper key={data.id}>\n <Tr onClick={() => onChangeDataIndex(index)} className={[index === dataIndex ? 'actove' : ''].join(' ')}>\n {\n columnList.map((column, columnIndex) => {\n return (\n <Td key={index + columnIndex} className={column.direction === 'column' ? 'column' : ''} style={{ width: column.width }}>{renderTD(data, column, index, columnIndex)}</Td>\n )\n })\n }\n </Tr>\n {index === dataIndex && <Widget\n key={data.id}\n src={\"bluebiu.near/widget/Liquidity.Bridge.STEER.Detail\"}\n props={{\n data: dataList[dataIndex],\n toast,\n theme,\n prices,\n refetch,\n addresses,\n curChain,\n addAction,\n defaultDex,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n }}\n />}\n </TrWrapper>\n )\n })}\n\n </TBody>\n ) : (\n <StyledEmptyTips>You didn’t add any liquidity yet</StyledEmptyTips>\n )}\n </Table>\n }\n </ListWrapper>\n)" }, "Liquidity.Connector.STEER": { "": "const {\n Column,\n Row,\n StyledVaultImage,\n SvgIcon,\n StyledDashedUndeline,\n TdTxt,\n PoolPercentage,\n StrategyTxt,\n TitleText,\n ContainerLogin,\n} = VM.require('bluebiu.near/widget/Liquidity.Handler.Styles')\n\nconst UnKnownSvgContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n background: #FFF;\n border-radius: 50%;\n width: 26px;\n height: 26px;\n overflow: hidden;\n svg {\n min-width: 24px;\n min-height: 24px;\n }\n`\nState.init({\n allData: null,\n loading: false,\n dataList: [],\n filterList: [],\n dataIndex: -1,\n categoryIndex: 0,\n chainIndex: 0,\n token: '',\n})\n\nconst IconRight = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"10\" viewBox=\"0 0 8 10\" fill=\"none\">\n <path d=\"M7.18407 4.21913C7.68448 4.61945 7.68448 5.38054 7.18407 5.78087L2.28485 9.70024C1.63009 10.2241 0.660156 9.75788 0.660156 8.91937L0.660156 1.08062C0.660156 0.242118 1.63009 -0.224055 2.28485 0.299756L7.18407 4.21913Z\" fill=\"#979ABE\" />\n </svg>\n)\nconst UnKnownSvg = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n <path d=\"M12 17h.01\"></path>\n </svg>\n)\nconst {\n from,\n toast,\n account,\n markets,\n isDapps,\n currentMarket,\n CHAIN_LIST,\n multicallAddress,\n dexConfig,\n curChain,\n isChainSupported,\n onSwitchChain,\n addAction,\n defaultDex,\n prices,\n onChangeMarket\n} = props\nconst formatFiat = (value) => {\n const number = Number(value).toLocaleString(\"en\", {\n currency: \"USD\",\n style: \"currency\",\n compactDisplay: \"short\",\n notation: \"compact\",\n maximumFractionDigits: 2,\n });\n return number;\n};\n\nconst formatPercent = (value) => {\n return `${Number(value * 100).toLocaleString(\"en\", {\n maximumFractionDigits: 2,\n })}%`;\n};\n\nconst sender = account;\nif (!sender || !isChainSupported) {\n return (\n <Widget\n src=\"bluebiu.near/widget/Swap.ChainWarnigBox\"\n props={{\n chain: curChain,\n onSwitchChain: onSwitchChain,\n switchingChain: switchingChain,\n theme: dexConfig.theme?.button,\n }}\n />\n );\n}\n\nconst {\n pairs,\n addresses,\n ammName,\n ammImage,\n proxyAddress,\n ALL_DATA_URL,\n FEE_APR_URL,\n STAKING_POOLS_URL,\n ICON_VAULT_MAP,\n LAST_SNAP_SHOT_DATA_URL,\n} = dexConfig\nfunction fetchAllData() {\n State.update({\n loading: true\n });\n const query = `{\n vaults(first: 500){\n id\n name\n token0\n token1\n pool\n weeklyFeeAPR\n token0Symbol\n token0Decimals\n token0Balance\n token1Balance\n totalValueLockedToken0\n totalValueLockedToken1\n feeTier\n strategyToken {\n id\n name\n creator\n admin\n executionBundle\n }\n beaconName\n payloadIpfs\n deployer\n }\n }`\n asyncFetch(ALL_DATA_URL, {\n method: 'POST',\n body: JSON.stringify({\n query,\n variables: {}\n })\n }).then((res) => {\n if (!res.ok) return;\n State.update({\n allData: res.body?.data?.vaults ?? [],\n loading: false\n })\n })\n}\nfunction fetchStakingPoolsData() {\n asyncFetch(STAKING_POOLS_URL).then((res) => {\n if (!res.ok) return;\n State.update({\n stakingPoolsData: res.body?.pools ?? [],\n loading: false\n })\n })\n}\nfunction handleChangeDataIndex(index) {\n state.dataIndex === index ? State.update({\n dataIndex: -1\n }) : State.update({\n dataIndex: index\n })\n}\nfunction handleChangeCategoryIndex(index) {\n State.update({\n categoryIndex: index\n })\n}\nfunction handleChangeChainIndex(index) {\n const chain = CHAIN_LIST[index]\n onSwitchChain({\n chainId: `0x${Number(chain.chain_id).toString(16)}`,\n });\n}\nfunction handleSearchInput(event) {\n State.update({\n token: event.target.value\n })\n}\nfunction refetch() {\n fetchAllData()\n}\n\nuseEffect(() => {\n if (state.dataList) {\n let filterList = []\n if (state.categoryIndex === 0) {\n filterList = state.dataList.filter(data => {\n const source = data.id.toUpperCase()\n const target = (state.token || '').toUpperCase()\n return source.indexOf(target) > -1\n })\n } else if (state.categoryIndex === 1) {\n state.dataList.forEach(data => {\n if (Big(data?.liquidity ?? 0).gt(0)) {\n filterList.push(data)\n }\n })\n }\n State.update({\n filterList\n })\n }\n}, [state.dataList, state.token, state.categoryIndex])\n\nuseEffect(() => {\n const index = CHAIN_LIST ? CHAIN_LIST.findIndex(chain => chain.id === curChain.id) : -1\n if (index > -1) {\n State.update({\n chainIndex: index,\n allData: null,\n dataList: [],\n categoryIndex: 0,\n userPositions: null\n })\n }\n if (curChain) {\n fetchAllData()\n fetchStakingPoolsData()\n }\n}, [curChain])\nconst columnList = [{\n width: '35%',\n key: 'pool',\n label: 'Pool',\n type: 'slot',\n render: (data) => {\n return (\n <>\n <StyledVaultImage>\n {\n ICON_VAULT_MAP[data.token0] ? (\n\n <img style={{ marginRight: -6 }} src={ICON_VAULT_MAP[data.token0]} alt={data.token0} />\n ) : (\n <UnKnownSvgContainer style={{ marginRight: -6 }}>\n {UnKnownSvg}\n </UnKnownSvgContainer>\n )\n }\n {\n ICON_VAULT_MAP[data.token1] ? (\n <img src={ICON_VAULT_MAP[data.token1]} alt={data.token1} />\n ) : (\n <UnKnownSvgContainer>\n {UnKnownSvg}\n </UnKnownSvgContainer>\n )\n }\n </StyledVaultImage>\n <TdTxt>{data.token0} / {data.token1}</TdTxt>\n <PoolPercentage>{data?.fee}%</PoolPercentage>\n </>\n )\n }\n}, {\n width: '10%',\n key: 'chain',\n label: 'Chain',\n type: 'slot',\n render: () => <img style={{ width: 26 }} src={curChain.logo} alt={curChain.name} />\n}, {\n width: '20%',\n key: 'amm',\n label: 'AMM',\n type: 'slot',\n render: (data) => {\n return data.ammImage && data.ammName ? (\n <>\n <img src={data.ammImage} alt={data.ammImage} style={{ width: 22 }} />\n <TdTxt>{data.ammName}</TdTxt>\n </>\n ) : (\n <>\n <img src={ammImage} alt={ammName} style={{ width: 22 }} />\n <TdTxt>{ammName}</TdTxt>\n </>\n )\n }\n}, {\n width: '10%',\n key: 'strategy',\n label: 'Strategy',\n type: 'slot',\n render: (data) => {\n return (\n <StrategyTxt>{data.strategy2 ? data.strategy2 : data.strategy}</StrategyTxt>\n )\n }\n}, {\n width: '10%',\n key: 'tvlUSD',\n label: 'TVL',\n type: 'slot',\n render: (data) => {\n return (\n <TdTxt>{formatFiat(data.tvlUSD)}</TdTxt>\n )\n }\n}, {\n width: '10%',\n key: 'Fee APR',\n label: 'Fee APR',\n type: 'slot',\n render: (data) => {\n return (\n <StyledDashedUndeline>\n <TdTxt>{data.feeApr}</TdTxt>\n </StyledDashedUndeline>\n )\n }\n}, {\n width: '15%',\n direction: 'column',\n key: 'liquidity',\n label: 'Your Liquidity',\n type: 'slot',\n render: (data, index) => {\n return (\n <>\n <TdTxt>{Big(data?.liquidity ?? 0).gt(0) ? `${Big(data?.liquidity ?? 0).lt(0.01) ? '<$0.01' : formatFiat(data.liquidity)}` : \"-\"}</TdTxt>\n {Big(data?.balance ?? 0).gt(0) && <TdTxt className=\"gray\">{Big(data?.balance ?? 0).lt(0.01) ? '<0.01' : Big(data.balance).toFixed(2)} LP</TdTxt>}\n <SvgIcon className={[\"icon-right\", index === state.dataIndex ? \"rotate\" : \"\"]}>\n {IconRight}\n </SvgIcon>\n </>\n )\n }\n}]\n\nreturn state.loading ? <Widget src=\"bluebiu.near/widget/0vix.LendingSpinner\" props={{ from }} /> : (\n <Column>\n {state.allData && state.stakingPoolsData && (\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Data.STEER\"}\n props={{\n pairs,\n sender,\n addresses,\n allData: state.allData,\n stakingPoolsData: state.stakingPoolsData,\n prices,\n curChain,\n FEE_APR_URL,\n multicallAddress,\n onLoad: (data) => {\n State.update({\n dataList: data.dataList,\n loading: false\n })\n }\n }}\n />\n )}\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Bridge.Filter\"}\n props={{\n from,\n markets,\n currentMarket,\n token: state.token,\n chains: CHAIN_LIST,\n categoryIndex: state.categoryIndex,\n chainIndex: state.chainIndex,\n onSearchInput: handleSearchInput,\n onChangeCategoryIndex: handleChangeCategoryIndex,\n onChangeChainIndex: handleChangeChainIndex,\n onChangeMarket\n }}\n />\n <Widget\n src={\"bluebiu.near/widget/Liquidity.Bridge.STEER.List\"}\n props={{\n toast,\n prices,\n refetch,\n columnList,\n curChain,\n userPositions: state.userPositions,\n dataIndex: state.dataIndex,\n onChangeDataIndex: handleChangeDataIndex,\n dataList: state.filterList,\n addresses,\n addAction,\n defaultDex,\n proxyAddress,\n multicallAddress,\n ICON_VAULT_MAP,\n }}\n />\n </Column>\n)" }, "Liquidity.GYROSCOPE": { "": "const StyledContainer = styled.div`\n`\n\nconst {\n dexConfig\n} = props\nreturn (\n <StyledContainer style={dexConfig.theme}>\n <Widget\n src=\"bluebiu.near/widget/Liquidity.Connector.GYROSCOPE\"\n props={{\n ...props\n }}\n />\n </StyledContainer>\n)" }, "Liquidity.Handler.Styles": { "": "const StyledFont = styled.div`\n color: ${(props) => props.color || '#000'};\n font-family: ${(props) => props.fontFamily || 'Gantari'};\n font-size: ${(props) => props.fontSize || '16px'};\n font-style: ${(props) => props.fontStyle || 'normal'};\n font-weight: ${(props) => props.fontWeight || '400'};\n line-height: ${(props) => props.lineHeight || 'normal'};\n white-space: ${(props) => props.whiteSpace || 'normal'};\n`;\nconst StyledFlex = styled.div`\n display: flex;\n flex-direction: ${(props) => props.flexDirection || 'row'};\n align-items: ${(props) => props.alignItems || 'center'};\n justify-content: ${(props) => props.justifyContent || 'flex-start'};\n gap: ${(props) => props.gap || '0px'};\n`;\nconst StyledDashedUndeline = styled.div`\n padding: 2px 0;\n border-bottom: 1px dashed #979ABE;\n`\n\nconst TitleText = styled.div`\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 32px;\n color: var(--agg-primary-color, #FFF);\n @media (max-width: 900px) {\n display: none;\n }\n`;\nconst ContainerLogin = styled.div`\n display: flex;\n max-width: 500px;\n\n flex-direction: column;\n margin: 80px auto auto auto;\n\n .web3-connect {\n width: 480px;\n height: 60px;\n border-radius: 10px;\n background-color: #fff;\n color: #0f1126;\n font-size: 18px;\n font-weight: 500;\n border: none;\n margin-top: 20px;\n }\n\n @media (max-width: 736px) {\n max-width: 100%;\n .web3-connect {\n width: 100%;\n\n font-size: 16px;\n height: 40px;\n }\n }\n`;\n// List\nconst ListWrapper = styled.div`\n margin-top: 20px;\n`\nconst SvgIcon = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n &.icon-right {\n position: absolute;\n right: 28px;\n top: 50%;\n transform: translateY(-50%);\n\n &.rotate {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n`\nconst Table = styled.div`\n \n`\nconst THead = styled.div`\n display: flex;\n align-items: center;\n padding: 12px 30px;\n`\nconst Th = styled.div`\n color: #979ABE;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n\n &:first-of-type {\n width: 40%;\n }\n &:nth-of-type(2) {\n width: 10%;\n }\n &:nth-of-type(3) {\n width: 10%;\n }\n &:nth-of-type(4) {\n width: 10%;\n }\n &:nth-of-type(5) {\n width: 10%;\n }\n &:nth-of-type(6) {\n width: 10%;\n }\n &:nth-of-type(7) {\n width: 10%;\n }\n`\nconst TBody = styled.div`\n`\nconst TrWrapper = styled.div`\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n border: 1px solid var(--agg-border-color, #373A53);\n margin-bottom: 8px;\n overflow: hidden;\n box-shadow: 0px 0px 10px 0px var(--agg-shadow-color, transparent);\n`\nconst Tr = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 84px;\n background: var(--agg-secondary-color,#262836);\n padding: 0 24px;\n &.active {\n background-color: var(--agg-hover-color, transparent);\n }\n`\nconst Td = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n &.column {\n flex-direction: column;\n align-items: flex-start;\n gap: 5px;\n }\n &:first-of-type {\n width: 40%;\n }\n &:nth-of-type(2) {\n width: 10%;\n }\n &:nth-of-type(3) {\n width: 10%;\n }\n &:nth-of-type(4) {\n width: 10%;\n }\n &:nth-of-type(5) {\n width: 10%;\n }\n &:nth-of-type(6) {\n width: 10%;\n }\n &:nth-of-type(7) {\n width: 10%;\n }\n`\nconst TdTxt = styled.div`\n color: var(--agg-primary-color,#FFF);\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n &.gray {\n color: #979ABE;\n font-size: 12px;\n }\n`\nconst PoolPercentage = styled.div`\n padding: 3px 8px;\n border-radius: 24px;\n background: rgba(151, 154, 190, 0.1);\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StrategyTxt = styled.div`\n padding: 7px 10px;\n border-radius: 6px;\n background: rgba(151, 154, 190, 0.1);\n color: #979ABE;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nconst StyledVaultImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n img {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n }\n`\n// Detail\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n &.price-input {\n width: 500px;\n margin: 0 auto 20px;\n align-items: center;\n justify-content: center;\n gap: 14px;\n }\n`\nconst Column = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n`\nconst DetailWrapper = styled.div`\n background: var(--agg-secondary-color,#262836);\n\n`\nconst FilterButtonList = styled.div`\n margin-bottom: 20px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-top: 1px solid var(--agg-border-color, #373A53);\n border-bottom: 1px solid var(--agg-border-color, #373A53);\n`\nconst FilterButton = styled.div`\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 250px;\n height: 48px;\n border-left: 1px solid var(--agg-border-color, #373A53);\n border-right: 1px solid var(--agg-border-color, #373A53);\n color: #979ABE;\n font-family: Gantari;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n &:first-of-type {\n border-right: none;\n }\n &.isActive {\n color: var(--agg-primary-color, #FFF);\n &:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n bottom: -2px;\n height: 5px;\n flex-shrink: 0;\n background: #1362E4;\n }\n }\n`\nconst InputWrapList = styled.div`\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n`\nconst InputWrap = styled.div`\n position: relative;\n height: 46px;\n background: var(--agg-primary-color,#33364B);\n border-radius: 12px;\n border: 1px solid var(--agg-primary-color,#33364B);\n overflow: hidden;\n input::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n }\n \n input::-webkit-outer-spin-button{\n -webkit-appearance: none !important;\n }\n input[type=\"number\"]{\n -moz-appearance: textfield;\n }\n &.inSufficient {\n border-color: #FF547D;\n }\n\n`\nconst Input = styled.input`\n border: none;\n outline: none;\n background: var(--agg-secondary-color,#1B1E27);\n margin: 0;\n width: 100%;\n height: 100%;\n color: var(--agg-primary-color,#FFF);\n font-family: Gantari;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n padding: 0 80px 0 10px;\n border-radius: 8px;\n /* border: 1px solid #33364B; */\n`\nconst InputSuffix = styled.div`\n position: absolute;\n top: 13px;\n right: 12px;\n display: flex;\n align-items: center;\n gap: 6px;\n span {\n color: var(--agg-primary-color, #FFF);\n text-align: right;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n }\n img {\n width: 20px;\n border-radius: 50%;\n }\n\n`\nconst StyledImageList = styled.div`\n display: flex;\n align-items: center;\n \n`\nconst PriceWrap = styled.div`\n margin-top: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\nconst TotalPrice = styled.span`\n color: #979ABE;\n font-family: Gantari;\n font-size: 12px;\n opacity: 0.3;\n`\nconst BalancePrice = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n color: #979ABE;\n text-align: right;\n font-family: Gantari;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n span {\n color: var(--agg-primary-color, #FFF);\n text-decoration-line: underline;\n cursor: pointer;\n }\n`\n\nconst StyledButtonList = styled.div`\n width: 500px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 14px;\n`\nconst StyledButton = styled.button`\n outline: none;\n border: none;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 46px;\n border-radius: var(--agg-button-radius, 8px);\n background-color: var(--button-color, var(--agg-primary-color, #000));\n color: var(--button-text-color, var(--agg-secondary-color, #FFF));\n font-family: Gantari;\n font-size: 16px;\n font-weight: 500;\n &[disabled] {\n opacity: 0.5!important;\n cursor: not-allowed;\n }\n &:hover {\n opacity: 0.8;\n }\n`\n\nconst StyledLoading = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n animation: rotate 1.5s linear infinite;\n @keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n`\nconst StyledEmptyTips = styled.div`\n text-align: center;\n padding-top: 82px;\n color: #979ABE;\n font-family: Gantari;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nreturn {\n StyledFont,\n StyledFlex,\n StyledDashedUndeline,\n TitleText,\n ContainerLogin,\n ListWrapper,\n SvgIcon,\n Table,\n THead,\n Th,\n TBody,\n TrWrapper,\n Tr,\n Td,\n TdTxt,\n PoolPercentage,\n StrategyTxt,\n StyledVaultImage,\n Row,\n Column,\n DetailWrapper,\n FilterButtonList,\n FilterButton,\n InputWrapList,\n InputWrap,\n Input,\n InputSuffix,\n StyledImageList,\n PriceWrap,\n TotalPrice,\n BalancePrice,\n StyledButtonList,\n StyledButton,\n StyledLoading,\n StyledEmptyTips\n}" }, "Swap.Result": { "": "const StyledContainer = styled.div`\n font-size: 14px;\n font-weight: 400;\n color: var(--agg-thirdry-color, #979abe);\n margin-top: 20px;\n margin-bottom: 16px;\n .price_impact {\n color: #33b65f;\n }\n .warning-1 {\n color: #ff9445;\n }\n .warning-card-1 {\n color: #ff9445;\n border: 1px solid #ff9445;\n background: rgba(255, 148, 69, 0.1);\n }\n .warning-2 {\n color: #ff547d;\n }\n .warning-card-2 {\n color: #ff547d;\n border: 1px solid #ff547d;\n background: rgba(255, 84, 125, 0.1);\n }\n .fee {\n border-bottom: 1px dashed var(--agg-thirdry-color, #979abe);\n position: relative;\n cursor: pointer;\n }\n`;\n\nconst StyledFlex = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst StyledFlexSpace = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nconst StyledPanelWrapper = 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 @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: auto;\n border-top: none;\n }\n }\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n transform: translateY(0);\n height: auto;\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 StyledPanel = styled.div`\n border-radius: 12px;\n border: 1px solid var(--agg-border-color, #373a53);\n padding: 16px 12px 0px;\n color: var(--agg-thirdry-color, #979abe);\n margin-top: 16px;\n display: none;\n\n &.expand {\n display: block;\n }\n`;\n\nconst StyledItem = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n padding-bottom: 16px;\n`;\n\nconst StyledArrow = styled.div`\n transition: 0.3s;\n transform-origin: center;\n cursor: pointer;\n &.up {\n transform: rotate(0deg);\n }\n &.down {\n transform: rotate(180deg);\n }\n`;\n\nconst StyledPriceWarning = styled.div`\n border-radius: 8px;\n border: 1px solid #ff547d;\n background: rgba(255, 84, 125, 0.1);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 16px;\n height: 43px;\n padding: 0px 13px;\n`;\n\nconst StyledFeePanel = styled.div`\n border-radius: 6px;\n border: 1px solid #373a53;\n background: #262836;\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);\n padding: 10px;\n color: var(--agg-thirdry-color, #979abe);\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n position: absolute;\n left: -230px;\n top: -50%;\n width: 223px;\n`;\n\nconst Layer = styled.div`\n position: fixed;\n left: 0px;\n top: 0px;\n right: 0px;\n bottom: 0px;\n`;\n\nconst {\n inputCurrency,\n outputCurrency,\n inputCurrencyAmount,\n outputCurrencyAmount,\n priceImpact,\n gas,\n nativeCurrency,\n routerStr,\n routes,\n} = props;\n\nconst WarningIcon = (\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 fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.10016 1C7.86996 -0.333334 9.79446 -0.333333 10.5643 1L17.3935 12.8286C18.1633 14.1619 17.201 15.8286 15.6614 15.8286H2.00298C0.463382 15.8286 -0.498867 14.1619 0.270933 12.8286L7.10016 1ZM7.91793 6.22857C7.91793 5.72363 8.32727 5.31429 8.83221 5.31429C9.33716 5.31429 9.7465 5.72363 9.7465 6.22857V9.88572C9.7465 10.3907 9.33716 10.8 8.83221 10.8C8.32727 10.8 7.91793 10.3907 7.91793 9.88572V6.22857ZM8.83221 11.7143C8.32727 11.7143 7.91793 12.1236 7.91793 12.6286C7.91793 13.1335 8.32727 13.5429 8.83221 13.5429C9.33716 13.5429 9.7465 13.1335 9.7465 12.6286C9.7465 12.1236 9.33716 11.7143 8.83221 11.7143Z\"\n fill=\"#FF547D\"\n />\n </svg>\n);\n\nuseEffect(() => {\n let priceImpactWarningType = 0;\n if (!priceImpact) {\n priceImpactWarningType = 0;\n State.update({\n priceImpactWarningType,\n });\n return;\n }\n if (\n Big(priceImpact || 0)\n .abs()\n .gt(1)\n ) {\n priceImpactWarningType = 1;\n }\n if (\n Big(priceImpact || 0)\n .abs()\n .gt(2)\n ) {\n priceImpactWarningType = 2;\n }\n let _priceImpact = Big(priceImpact || 0).toFixed(2);\n if (\n Big(priceImpact || 0)\n .abs()\n .gt(100)\n ) {\n _priceImpact = \"100\";\n }\n\n State.update({\n priceImpactWarningType,\n priceImpact: _priceImpact,\n });\n}, [priceImpact]);\n\nuseEffect(() => {\n if (!gas || !nativeCurrency?.symbol) return;\n Ethers.provider()\n .getGasPrice()\n .then((gasPrice) => {\n const price = props.prices[nativeCurrency.symbol];\n let _value = Big(0);\n let isValue = false;\n if (!price) {\n _value = Big(\n ethers.utils.formatUnits(gas || 0, nativeCurrency.decimals)\n ).mul(gasPrice);\n isValue = false;\n } else {\n _value = Big(\n ethers.utils.formatUnits(gas || 0, nativeCurrency.decimals)\n )\n .mul(price)\n .mul(gasPrice);\n isValue = true;\n }\n const _res = Big(_value).lt(0.000001)\n ? \"<0.000001\"\n : Big(_value).toFixed(6);\n\n State.update({\n gas_usd: isValue ? `$${_res}` : `${_res}${nativeCurrency.symbol}`,\n });\n });\n}, [gas, props.prices]);\n\nreturn (\n <StyledContainer>\n <StyledFlexSpace>\n <StyledFlex style={{ gap: \"5px\" }}>\n <div>\n {/* <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M4.26902 1.50339C5.46062 0.562652 6.96581 0 8.60359 0C12.3267 0 15.3715 2.90803 15.5901 6.57633L16.0418 6.15507C16.3392 5.87912 16.8033 5.89525 17.0793 6.19091C17.3552 6.48657 17.3391 6.95246 17.0435 7.22841L15.2337 8.91637C15.0931 9.04758 14.914 9.11276 14.7351 9.11324L14.7157 9.1135C14.5213 9.1135 14.3349 9.03629 14.1975 8.89884C14.1787 8.88004 14.161 8.86031 14.1445 8.83977L12.4829 7.05819C12.2051 6.76074 12.2212 6.29664 12.5187 6.02069C12.8144 5.74474 13.2802 5.76087 13.5562 6.05653L14.1254 6.66686C13.9545 3.76556 11.5478 1.46576 8.60359 1.46576C7.33946 1.46576 6.17393 1.89132 5.24298 2.60477C5.23294 2.61614 5.22253 2.62723 5.21174 2.63802C5.07429 2.77547 4.88788 2.85268 4.69351 2.85268C4.49914 2.85268 4.31273 2.77547 4.17529 2.63802C4.03784 2.50058 3.96063 2.31417 3.96063 2.1198C3.96063 1.92543 4.03784 1.73902 4.17529 1.60157C4.20732 1.56954 4.24201 1.54078 4.27885 1.5155L4.26902 1.50339ZM8.60359 12.5307C9.95109 12.5307 11.1857 12.0486 12.1461 11.2477L12.1579 11.2621C12.2837 11.1684 12.4371 11.1169 12.5958 11.1169C12.7902 11.1169 12.9766 11.1941 13.1141 11.3316C13.2515 11.469 13.3287 11.6554 13.3287 11.8498C13.3287 12.0442 13.2515 12.2306 13.1141 12.368C13.0604 12.4217 12.9992 12.4662 12.9331 12.5005C11.7425 13.4389 10.2386 14 8.60359 14C4.7385 14 1.60449 10.866 1.60449 7.0009C1.60449 6.9262 1.60567 6.85176 1.60801 6.77762L1.19043 7.11021C0.873268 7.36286 0.412754 7.3109 0.160098 6.99374C-0.0925578 6.67657 -0.0405931 6.21427 0.276571 5.96161L2.14458 4.47239C2.16553 4.45102 2.18802 4.43069 2.21203 4.41157C2.52919 4.15891 2.9915 4.21088 3.24415 4.52804L4.78696 6.46328C5.03962 6.78044 4.98766 7.24275 4.67049 7.4954C4.35333 7.74806 3.89102 7.6961 3.63837 7.37893L3.0811 6.67992C3.07509 6.78554 3.07204 6.89196 3.07204 6.9991C3.07204 10.0543 5.54843 12.5307 8.60359 12.5307Z\"\n fill=\"#979ABE\"\n />\n </svg> */}\n </div>\n <div>\n 1 {outputCurrency.symbol} ={\" \"}\n {Big(inputCurrencyAmount || 0)\n .div(\n Big(outputCurrencyAmount || 0).eq(0) ? 1 : outputCurrencyAmount\n )\n .toFixed(4)}{\" \"}\n {inputCurrency.symbol}{\" \"}\n </div>\n </StyledFlex>\n <StyledFlex style={{ gap: \"10px\" }}>\n {state.priceImpactWarningType === 2 && WarningIcon}\n {!state.showContent && state.gas_usd && (\n <span className=\"gray\">Fee {state.gas_usd}</span>\n )}\n <StyledArrow\n onClick={() => {\n State.update({\n showContent: !state.showContent,\n });\n }}\n className={state.showContent ? \"up\" : \"down\"}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"7\"\n viewBox=\"0 0 12 7\"\n fill=\"none\"\n >\n <path\n d=\"M1 1L6 5L11 1\"\n stroke=\"#979ABE\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n </StyledArrow>\n </StyledFlex>\n </StyledFlexSpace>\n <StyledPanelWrapper className={state.showContent ? \"expand\" : \"\"}>\n <StyledPanel className={state.showContent ? \"expand\" : \"\"}>\n <StyledItem>\n <div>Minimum Received</div>\n <div>\n {Big(outputCurrencyAmount || 0).toFixed(8)} {outputCurrency.symbol}\n </div>\n </StyledItem>\n {!!priceImpact && (\n <StyledItem>\n <div>Price Impact</div>\n <div\n className={`price_impact warning-${state.priceImpactWarningType}`}\n >\n {state.priceImpact}%\n </div>\n </StyledItem>\n )}\n {state.gas_usd && (\n <StyledItem>\n <div>Trading Fee</div>\n <div\n className=\"fee\"\n onClick={() => {\n State.update({\n showFeePanel: true,\n });\n }}\n >\n <div>{state.gas_usd}</div>\n {state.showFeePanel && (\n <StyledFeePanel>\n <StyledFlexSpace>\n <div>Gas fee</div>\n <div>{state.gas_usd}</div>\n </StyledFlexSpace>\n </StyledFeePanel>\n )}\n </div>\n </StyledItem>\n )}\n <StyledItem>\n <div>Route</div>\n <div>\n {routerStr ? (\n routerStr\n ) : routes ? (\n <Widget\n src=\"bluebiu.near/widget/Swap.Routes\"\n props={{\n routes,\n }}\n />\n ) : (\n ` ${inputCurrency.symbol} > ${outputCurrency.symbol}`\n )}\n </div>\n </StyledItem>\n </StyledPanel>\n </StyledPanelWrapper>\n {!!priceImpact && !!state.priceImpactWarningType && (\n <StyledPriceWarning\n className={`warning-card-${state.priceImpactWarningType}`}\n >\n <StyledFlex style={{ gap: \"5px\" }}>\n {state.priceImpactWarningType === 2 && WarningIcon}\n <div>Price impact warning</div>\n </StyledFlex>\n <div>{state.priceImpact}%</div>\n </StyledPriceWarning>\n )}\n {state.showFeePanel && (\n <Layer\n onClick={() => {\n State.update({\n showFeePanel: false,\n });\n }}\n />\n )}\n </StyledContainer>\n);\n" }, "Liquidity.Bridge.List": { "": "const {\n ListWrapper,\n SvgIcon,\n Table,\n THead,\n Th,\n TBody,\n TrWrapper,\n Tr,\n Td,\n TdTxt,\n PoolPercentage,\n StrategyTxt,\n StyledVaultImage,\n StyledEmptyTips\n} = VM.require('bluebiu.near/widget/Liquidity.Handler.Styles')\n\nconst {\n toast,\n prices,\n refetch,\n dataList,\n dataIndex,\n defaultDex,\n columnList,\n onChangeDataIndex,\n addresses,\n addAction,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n} = props\n\nfunction renderTD(data, column, index) {\n if (column.type === 'slot') {\n return column.render(data, index)\n }\n if (column.type === 'svg') {\n return (\n <SvgIcon>\n {data[column.key]}\n </SvgIcon>\n )\n }\n return (\n <TdTxt>{data[column.key]}</TdTxt>\n )\n}\nreturn (\n <ListWrapper>\n {\n\n <Table>\n <THead>\n {\n columnList.map((column, index) => {\n return (\n <Th key={index} style={{ width: column.width }}>{column.label}</Th>\n )\n })\n }\n </THead>\n {dataList && dataList.length > 0 ? (\n <TBody>\n {dataList.map((data, index) => {\n return (\n <TrWrapper key={data.id}>\n <Tr onClick={() => onChangeDataIndex(index)} className={[index === dataIndex ? 'active' : ''].join(' ')}>\n {\n columnList.map((column, columnIndex) => {\n return (\n <Td key={index + columnIndex} className={column.direction === 'column' ? 'column' : ''} style={{ width: column.width }}>{renderTD(data, column, index, columnIndex)}</Td>\n )\n })\n }\n </Tr>\n {index === dataIndex && <Widget\n key={data.id}\n src={\"bluebiu.near/widget/Liquidity.Bridge.Detail\"}\n props={{\n data: dataList[dataIndex],\n toast,\n theme,\n prices,\n refetch,\n addresses,\n defaultDex,\n addAction,\n proxyAddress,\n userPositions,\n ICON_VAULT_MAP\n }}\n />}\n </TrWrapper>\n )\n })}\n\n </TBody>\n ) : (\n <StyledEmptyTips>You didn’t add any liquidity yet</StyledEmptyTips>\n )}\n\n </Table>\n }\n </ListWrapper>\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": "" } } } } } } }