Transaction: 2Tvbe2B...uEm4

{ "data": { "forefront_tak.near": { "widget": { "Forefront.Widget.Network": { "": "const darkColors = {\n page_bg: \"rgb(25,33,50)\",\n horizen_bg: \"#fff\",\n header_bg: \"rgb(49,62,89)\",\n sideBar: {\n sideBar_bg: \"rgb(49,62,89)\",\n sideBar_color: \"#fff\",\n },\n footer: {\n titlenelowBackground: \"#806ce1\",\n titleBackground: \"#fff\",\n fromBackground: \"rgb(55,72,107)\",\n toBackground: \"rgb(55,72,107)\",\n belowBackground: \"rgb(210, 202, 250)\",\n },\n dynamic_header: {\n afterbrandcolor: \"\",\n color1brand: \"#fff\",\n color2brand: \"rgb(210, 202, 250)\",\n colordescription: \"rgb(210, 202, 250)\",\n background: \"radial-gradient(circle, #313E59 0%, #313E59 214%);\",\n },\n\n sbt_area: {\n section_bg: \"transparent\",\n card_bg: \"rgb(49, 62, 89)\",\n card_title_color: \"#806ce1\",\n },\n table_pagination: {\n table_bg: \"rgb(49,62,89)\",\n table_color: \"rgb(255,255,255)\",\n table_border_color: \"\",\n table_accent_bg: \"\",\n table_striped_color: \"rgb(255,255,255)\",\n table_striped_bg: \"\",\n table_hover_color: \"rgb(255,255,255)\",\n table_hover_bg: \"\",\n btn_border: \"rgb(25,33,50)\",\n btn_bg: \"rgb(49,62,89)\",\n btn_bg_active: \"rgb(25,33,50)\",\n btn_color: \"#fff\",\n input_bg: \"#2f3b54\",\n },\n card: {\n tabSelect_bg: \"rgb(46 58 84)\",\n tabSelect_text_color: \"#fff\",\n tabSelect_btn_active_bg: \"#192132\",\n },\n\n chart: {\n title: \"rgb(255,255,255)\",\n subtitle: \"rgba(255,255,255,0.7)\",\n xAxis: \"rgb(255,255,255)\",\n yAxis: \"rgb(255,255,255)\",\n legend: \"rgba(255,255,255,0.7)\",\n legendHover: \"rgb(255,255,255)\",\n rangeSelector: {\n labels: \"rgba(255,255,255,0.7)\",\n inputColor: \"rgb(255,255,255)\",\n btn_bg: \"rgba(25,33,50,0.3)\",\n btn_color: \"rgba(255,255,255,0.7)\",\n btn_hover_bg: \"rgba(25,33,50,0.5)\",\n btn_hover_color: \"rgba(255,255,255,0.8)\",\n btn_active_bg: \"rgba(25,33,50,0.8)\",\n btn_active_color: \"rgb(255,255,255)\",\n },\n },\n spinnerColors: [\"#6F61C0\", \"#241468\"],\n chartColor: [\n \"#F79BD3\",\n \"#A084E8\",\n \"#EA1179\",\n \"#6F61C0\",\n \"#241468\",\n \"#9F0D7F\",\n \"#D16BA5\",\n \"#B178A6\",\n \"#AA4498\",\n \"#882D9E\",\n \"#C71585\",\n \"#DA70D6\",\n \"#DB7093\",\n \"#9932CC\",\n \"#BA55D3\",\n \"#800080\",\n \"#8A2BE2\",\n \"#9400D3\",\n \"#DDA0DD\",\n \"#E6E6FA\",\n ],\n};\nconst lightColors = {\n page_bg: \"rgb(241,242,245)\",\n horizen_bg: \"#391b86\",\n header_bg: \"rgb(210, 202, 250)\",\n sideBar: {\n sideBar_bg: \"rgb(210, 202, 250)\",\n sideBar_color: \"#fff\",\n },\n footer: {\n titlenelowBackground: \"#806ce1\",\n titleBackground: \"#fff\",\n fromBackground: \"rgb(210, 202, 250)\",\n toBackground: \"rgb(210, 202, 250)\",\n belowBackground: \"#806ce1\",\n },\n dynamic_header: {\n afterbrandcolor: \"#789efb\",\n color1brand: \"#000\",\n color2brand: \"#806ce1\",\n colordescription: \"#806ce1\",\n background: \"linear-gradient(62deg, #d2cafa 0%, #E0C3FC 100%);\",\n },\n\n sbt_area: {\n section_bg: \"rgb(235, 231, 253)\",\n card_bg: \"rgb(255, 255, 255)\",\n card_title_color: \"#806ce1\",\n },\n table_pagination: {\n table_bg: \"rgb(255,255,255)\",\n table_color: \"rgb(0,0,0)\",\n table_border_color: \"\",\n table_accent_bg: \"\",\n table_striped_color: \"rgb(0,0,0)\",\n table_striped_bg: \"\",\n table_hover_color: \"rgb(0,0,0)\",\n table_hover_bg: \"\",\n btn_border: \"#806ce1\",\n btn_bg: \"#fff\",\n btn_bg_active: \"rgb(235, 231, 253)\",\n btn_color: \"#000\",\n },\n card: {\n tabSelect_bg: \"#e6e6e7\",\n tabSelect_text_color: \"#000\",\n tabSelect_btn_active_bg: \"rgb(210, 202, 250)\",\n },\n chart: {\n title: \"rgba(0,0,0,1)\",\n subtitle: \"rgba(0,0,0,0.7)\",\n xAxis: \"rgba(0,0,0,1)\",\n yAxis: \"rgba(0,0,0,1)\",\n legend: \"rgba(0,0,0,0.7)\",\n legendHover: \"rgba(0,0,0,1)\",\n rangeSelector: {\n labels: \"rgba(0,0,0,0.7)\",\n inputColor: \"rgba(0,0,0,0.5)\",\n btn_bg: \"rgba(0,0,0,0.3)\",\n btn_color: \"rgba(0,0,0,0.8)\",\n btn_hover_bg: \"rgba(0,0,0,0.4)\",\n btn_hover_color: \"rgba(0,0,0,1)\",\n btn_active_bg: \"rgb(235, 231, 253)\",\n btn_active_color: \"rgba(0,0,0,1)\",\n },\n },\n spinnerColors: [\"#6F61C0\", \"#241468\"],\n chartColor: [\n \"#F79BD3\",\n \"#A084E8\",\n \"#EA1179\",\n \"#6F61C0\",\n \"#241468\",\n \"#9F0D7F\",\n \"#D16BA5\",\n \"#B178A6\",\n \"#AA4498\",\n \"#882D9E\",\n \"#C71585\",\n \"#DA70D6\",\n \"#DB7093\",\n \"#9932CC\",\n \"#BA55D3\",\n \"#800080\",\n \"#8A2BE2\",\n \"#9400D3\",\n \"#DDA0DD\",\n \"#E6E6FA\",\n ],\n};\n\nState.init({\n value: \"acceleration\",\n light: true,\n tab: \"leaderboard\",\n});\nconst themeColor = state.light ? lightColors : darkColors;\nconst handelLight = () => {\n const isLight = state.light;\n State.update({ light: !isLight });\n};\n\nconst Container = styled.div`\n .tabContent{\n display:inline-flex;\n align-items:center;\n background: ${themeColor.card?.tabSelect_bg};\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 50px;\n padding:3px 4px;\n list-style-type:none;\n color: \"red\";\n }\n .tab-item .active{\n background:${themeColor.card?.tabSelect_btn_active_bg};\n }\n .tab-item button{\n background-color:transparent;\n border-radius: 50px;\n font-weight: 500;\n font-size: 14px;\n color:${themeColor.card?.tabSelect_text_color};\n height:45px;\n padding:0px 22px;\n border:none;\n \n\n }\n .uploadButton .btn{\n background: #052119;\n border-radius: 50px;\n font-weight: 500;\n font-size: 14px;\n color:inherit;\n border:none;\n\n }\n .title{\n font-weight: 500;\n font-size: 16px;\n color: inherit;\n margin-bottom:10px;\n\n }\n .form-input{\n display:block;\n background: ${themeColor.card?.tabSelect_input_bg};\n border: 0.5px solid rgba(255, 255, 255, 0.3);\n border-radius: 50px;\n height: 47px;\n width:100%;\n color: inherit;\n padding:0 20px\n \n }\n .form-input:focus-visible{\n outline:none;\n\n }\n`;\n\nconst Tab = {\n leaderboard: \"leaderboard\",\n};\nconst setTab = (tab) => State.update({ tab });\n\nlet buttonbar = (\n <Container>\n <ul className=\"tabContent\">\n <li className=\"tab-item\">\n <button\n className={`${state.tab === Tab.leaderboard ? \"active\" : \"\"}`}\n aria-current=\"page\"\n onClick={() => setTab(Tab.leaderboard)}\n >\n Leaderboard\n </button>\n </li>\n </ul>\n </Container>\n);\n\nconst leaderboard = (\n <div\n className=\"w-100\"\n style={{ display: state.tab === \"leaderboard\" ? \"\" : \"none\" }}\n >\n <Widget\n src=\"forefront_tak.near/widget/Forefront.Widget.Network.Leaderboard\"\n props={{\n themeColor,\n }}\n />\n </div>\n);\n\nreturn (\n <div\n className=\"d-flex\"\n style={{\n background: themeColor?.page_bg,\n }}\n >\n <Widget\n className=\"bg-primary\"\n src=\"lord1.near/widget/sidebar\"\n props={{\n headerIcon:\n \"https://i.near.social/magic/large/https://near.social/magic/img/account/forefront_tak.near\",\n headerText: \"Forefront\",\n footerIcon:\n \"https://raw.githubusercontent.com/lordking1234/blockchain-icon/main/house-solid.svg\",\n footerText: \"\",\n headerLink: \"test\",\n footerLink: \"test\",\n links: [\n {\n text: \"Home\",\n link: \"../../forefront_tak.near/widget/Forefront.Home\",\n title: \"Homepage\",\n\n image:\n \"https://raw.githubusercontent.com/lordking1234/blockchain-icon/main/windows.svg\",\n },\n {\n text: \"Discover\",\n link: \"../../forefront_tak.near/widget/Forefront.Discover\",\n title: \"Discover\",\n image:\n \"https://raw.githubusercontent.com/lordking1234/blockchain-icon/main/users-solid.svg\",\n },\n {\n text: \"Feed\",\n link: \"../../forefront_tak.near/widget/Forefront.Feed\",\n title: \"Feed\",\n\n image:\n \"https://raw.githubusercontent.com/lordking1234/blockchain-icon/main/icons8-home.svg\",\n },\n ],\n backgroundColor: `${state.light ? \"#d2cafa\" : \"rgb(49,62,89)\"}`,\n textcolor: \"#fff\",\n className: \"align-self-start\",\n activeIcon: \"Platform\",\n }}\n />\n <div style={{ minWidth: \"80%\" }} className=\" flex-grow-1 px-2\">\n <div\n style={{\n backgroundColor: themeColor?.header_bg,\n borderRadius: \"15px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n padding: \".5rem\",\n marginBottom: \"1rem\",\n }}\n >\n <div className=\"flex-grow-1\">\n <Widget\n src=\"efiz.near/widget/marquee\"\n props={{\n text: \"Welcome to Forefront Tak\",\n fontFamily: \"Arial\",\n fontSize: \"20px\",\n backgroundColor: themeColor?.header_bg,\n height: \"30px\",\n width: \"100%\",\n textColor: themeColor?.horizen_bg,\n }}\n />\n </div>\n <div\n style={{\n flexBasis: \"30px\",\n }}\n onClick={handelLight}\n >\n <Widget\n src=\"lord1.near/widget/dark-light\"\n props={{\n theme: state.light ? \"light\" : \"dark\",\n variableStyles: \"--toggle-size: 15px;\",\n }}\n />\n </div>\n </div>\n\n <Widget\n src=\"lord1.near/widget/header-dynamic\"\n props={{\n height: \"150px\",\n align: \"center\",\n description: \"Explore the analytical stats of different blockchains\",\n brand: \"Blockchain\",\n fontsize: \"100\",\n fontweight: \"25px\",\n afterbrand: \"Stats\",\n afterbrandcolor:\n themeColor?.dynamic_header?.afterbrandcolor || \"#789efb\",\n fontbrand: \" Arial, sans-serif\",\n color1brand: themeColor?.dynamic_header?.color1brand || \"#000\",\n color2brand: themeColor?.dynamic_header?.color2brand || \"#806ce1\",\n colordescription:\n themeColor?.dynamic_header?.colordescription || \"#806ce1\",\n fontsubtitle: \" Arial, sans-serif\",\n background:\n themeColor?.dynamic_header?.background ||\n \"radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);\",\n }}\n />\n <div style={{ width: \"100%\", height: \"45px\" }}></div>\n\n <div>\n <div className=\"content\">\n <div>{buttonbar}</div>\n <div>\n {tvl}\n {leaderboard}\n {retention}\n </div>\n </div>\n </div>\n <div style={{ width: \"100%\", height: \"85px\" }}></div>\n <Widget\n src=\"forefront_tak.near/widget/Forefront.Footer\"\n props={{\n beBackground: \"#fff\",\n titlenelowBackground: themeColor?.footer?.titlenelowBackground,\n titleBackground: themeColor?.footer?.titleBackground,\n svgBackground: \"#806ce1\",\n fromBackground: themeColor?.footer?.fromBackground,\n toBackground: themeColor?.footer?.toBackground,\n belowBackground: themeColor?.footer?.belowBackground,\n }}\n />\n </div>\n </div>\n);\n" } } } } }