Transaction: 6sbh1VE...WUQZ

{ "data": { "adminalpha.near": { "widget": { "NearOrg.HomePage": { "": "let totalComponents = 0;\nconst imageRatio = 590 / 327;\n\nconst componentsData = Social.keys(\"*/widget/*\", \"final\", {\n return_type: \"BlockHeight\",\n});\n\nif (componentsData) {\n Object.keys(componentsData).forEach((accountId) => {\n totalComponents += Object.keys(componentsData[accountId].widget).length;\n });\n}\n\nconst ipfsImages = {\n textArrow: \"bafkreidcvglzeenk2wd6y2gh5skiuc62fcdvo3qikjosejobclcekaqwru\",\n logos: {\n aurora: \"bafkreidgbgeghpr257xhlaqkzdnsoigjgbdhf3exe5iw23h2bniipe7dwe\",\n calimero: \"bafkreifmztxlff3sxt2psgfm7vjo22xhyfiyjyp7sn3npcncfhck45f6ky\",\n octopusNetwork:\n \"bafkreiakazav5ddhr2fxdesqrv7vphraybp5u6lkdh6tcavgrkbpm5vtt4\",\n pagoda: \"bafkreieetpcono7u3n6j44bbrdvsxasmki7rtmvax53p4jf3einzdaudr4\",\n proximity: \"bafkreidk3cmyrxvi64mdp7i6ut5demlpxe6sbog42qnssume7ijqdfumze\",\n sweatcoin: \"bafkreidevsjnb5knn4h6cavxrkqvvirh7ukj574womlhgfkt4i4bxkpp4i\",\n },\n};\n\nconst web3Teams = [\n {\n url: \"https://www.pagoda.co\",\n name: \"Pagoda\",\n ipfsImage: ipfsImages.logos.pagoda,\n },\n {\n url: \"https://aurora.dev\",\n name: \"Aurora\",\n ipfsImage: ipfsImages.logos.aurora,\n },\n {\n url: \"https://www.calimero.network\",\n name: \"Calimero\",\n ipfsImage: ipfsImages.logos.calimero,\n },\n {\n url: \"https://www.proximity.dev\",\n name: \"Proximity\",\n ipfsImage: ipfsImages.logos.proximity,\n },\n {\n url: \"https://sweatco.in\",\n name: \"Sweatcoin\",\n ipfsImage: ipfsImages.logos.sweatcoin,\n },\n {\n url: \"https://oct.network\",\n name: \"Octopus Network\",\n ipfsImage: ipfsImages.logos.octopusNetwork,\n },\n];\n\nfunction returnIpfsImage(cfid) {\n return {\n ipfs_cid: cfid,\n };\n}\n\nconst Wrapper = styled.div`\n --section-gap: 162px;\n --large-gap: 82px;\n --medium-gap: 48px;\n margin-top: calc(var(--body-top-padding) * -1);\n padding: calc(var(--section-gap) / 2) 0;\n\n @media (max-width: 900px) {\n --section-gap: 60px;\n --large-gap: 24px;\n --medium-gap: 16px;\n }\n`;\n\nconst H1 = styled.h1`\n font: var(--text-hero);\n text-align: center;\n letter-spacing: -0.015em;\n color: var(--sand12);\n margin: 0;\n\n @media (max-width: 900px) {\n font: var(--text-2xl);\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n color: var(--${(p) => p.color ?? \"sand10\"});\n margin: 0;\n\n [href] {\n color: var(--violet8);\n &:hover {\n color: var(--violet11);\n text-decoration: none;\n }\n &:focus {\n text-decoration: underline;\n outline: none;\n }\n }\n`;\n\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.gap};\n align-items: ${(p) => p.alignItems};\n justify-content: ${(p) => p.justifyContent};\n flex-direction: ${(p) => p.direction ?? \"row\"};\n flex-wrap: ${(p) => p.wrap ?? \"nowrap\"};\n`;\n\nconst Section = styled.div`\n display: flex;\n padding: calc(var(--section-gap) / 2) 16px;\n gap: ${(p) => p.gap ?? \"var(--medium-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n`;\n\nconst LogoLink = styled.a`\n display: block;\n height: 28px;\n color: var(--sand10);\n\n img {\n display: block;\n height: 100%;\n }\n`;\n\nconst VerticalBorder = styled.div`\n height: 82px;\n width: 1px;\n background: linear-gradient(to bottom, var(--violet1), var(--violet10));\n`;\n\nconst Icon = styled.div`\n display: inline-flex;\n width: 64px;\n height: 64px;\n border-radius: 100%;\n align-items: center;\n justify-content: center;\n color: 1px solid ${(p) => `var(--${p.color})` ?? \"var(--sand10)\"};\n background: ${(p) => `var(--${p.backgroundColor})` ?? \"var(--sand3)\"};\n border: 1px solid ${(p) => `var(--${p.borderColor})` ?? \"var(--sand5)\"};\n\n i {\n font-size: 28px;\n line-height: 28px;\n }\n`;\n\nconst ContentWithImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--large-gap);\n\n &:nth-child(odd) {\n flex-direction: ${(p) => (p.alternate ? \"row-reverse\" : undefined)};\n }\n`;\n\nconst ContentWithImage_Image = styled.div`\n overflow: hidden;\n border-radius: 6px;\n border: 1px solid var(--sand5);\n width: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n`;\n\nconst ContentBlock = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--medium-gap);\n width: 100%;\n`;\n\nconst ContentBlock_Text = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n`;\n\nconst Develop = styled.div`\n display: flex;\n gap: var(--large-gap);\n align-items: center;\n`;\n\nconst Develop_Content = styled.div`\n display: flex;\n gap: var(--medium-gap);\n flex-direction: column;\n width: 100%;\n`;\n\nconst Develop_TabButton = styled.button`\n all: unset;\n display: inline-block;\n font: inherit;\n color: ${(p) => `var(--${p.color})`};\n transition: all 200ms;\n border-bottom: 2px solid ${(p) =>\n p.active ? `var(--${p.color})` : \"hsla(0, 0%, 100%, 0)\"};\n box-shadow: 0 0 0 0px var(--violet4);\n\n &:hover {\n border-color: ${(p) => `var(--${p.color})`};\n }\n &:focus {\n box-shadow: 0 0 0 4px var(--violet4);\n }\n`;\n\nconst Develop_Preview = styled.div`\n width: 100%;\n height: 200px;\n background: var(--sand6);\n`;\n\nconst Stats = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-around;\n flex-wrap: wrap;\n padding: var(--medium-gap);\n gap: var(--medium-gap);\n text-align: center;\n background: var(--sand2);\n`;\n\nreturn (\n <Wrapper>\n <Section center>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"center\">\n <H1>Build the Open Web</H1>\n\n <Text size=\"text-l\" style={{ maxWidth: \"662px\" }}>\n NEAR is the blockchain operating system – empowering developers to\n effortlessly compose, publish, and distribute new and innovative\n applications on the decentralized web.\n </Text>\n </Flex>\n\n <Flex gap=\"24px\" wrap=\"wrap\" justifyContent=\"center\">\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/\",\n iconLeft: \"ph-duotone ph-user-plus\",\n label: \"Create Account\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/#/edit\",\n iconLeft: \"ph-duotone ph-code-block\",\n label: \"Try It First\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n </Section>\n\n <Section center>\n <Text\n size=\"text-xs\"\n fontWeight=\"600\"\n style={{ textTransform: \"uppercase\", letterSpacing: \"0.17em\" }}\n >\n Trusted by Web3’s MOST innovative teams\n </Text>\n\n <Flex gap=\"var(--large-gap)\" wrap=\"wrap\" justifyContent=\"center\">\n {web3Teams.map((team) => {\n return (\n <LogoLink href={team.url} target=\"_blank\" title={team.name}>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(team.ipfsImage),\n alt: team.name,\n }}\n />\n </LogoLink>\n );\n })}\n </Flex>\n </Section>\n\n <Section center>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"center\">\n <Text as=\"h2\" size=\"text-l\" fontWeight=\"600\" color=\"violet10\">\n Platform\n </Text>\n <VerticalBorder />\n <Text\n size=\"text-2xl\"\n fontWeight=\"600\"\n color=\"sand12\"\n style={{ maxWidth: \"430px\" }}\n >\n Your toolkit for the\n <span\n style={{\n display: \"inline-block\",\n color: \"var(--green8)\",\n position: \"relative\",\n marginRight: \"-2.2em\",\n right: \"-0.9em\",\n top: \"-1.4em\",\n transform: \"rotate(5deg)\",\n }}\n >\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.textArrow),\n style: {\n display: \"block\",\n width: \"52px\",\n position: \"absolute\",\n left: \"-42px\",\n top: \"16px\",\n },\n }}\n />\n Open\n </span>\n Web.\n </Text>\n </Flex>\n\n <Text size=\"text-2xl\" fontWeight=\"500\" style={{ maxWidth: \"550px\" }}>\n Get building in seconds on a new decentralized foundation, all with the\n tools you know and love.\n </Text>\n </Section>\n\n <Section>\n <ContentWithImage alternate>\n <ContentBlock>\n <Icon color=\"green12\" backgroundColor=\"green4\" borderColor=\"green9\">\n <i className=\"ph-duotone ph-plugs-connected\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Truly Plug & Play\n </Text>\n <Text>\n Why invest before you’re invested? Enjoy frictionless onboarding\n for both you and your users.{\" \"}\n <Text as=\"span\" fontWeight=\"600\" color=\"sand12\">\n No crypto required.\n </Text>\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/\",\n iconLeft: \"ph-bold ph-fingerprint-simple\",\n label: \"Try Fast Auth\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentWithImage_Image>\n <AspectRatio.Root ratio={imageRatio}>\n <img src=\"https://images.unsplash.com/photo-1678845750026-0b9936b4202c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80\" />\n </AspectRatio.Root>\n </ContentWithImage_Image>\n </ContentWithImage>\n\n <ContentWithImage alternate>\n <ContentBlock>\n <Icon color=\"amber11\" backgroundColor=\"amber4\" borderColor=\"amber9\">\n <i className=\"ph-duotone ph-plugs-connected\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Build Your Way\n </Text>\n <Text>\n Avoid spending time learning proprietary languages that inhibit\n your productivity.{\" \"}\n <Text as=\"a\" href=\"https://docs.near.org/sdk/js/introduction\">\n Build faster with Javascript\n </Text>\n , in confidence with Rust, or in any language that compiles to\n Assembly.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"https://docs.near.org/sdk/js/introduction\",\n iconLeft: \"ph-bold ph-book-open-text\",\n label: \"Read the Docs\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentWithImage_Image>\n <AspectRatio.Root ratio={imageRatio}>\n <img src=\"https://images.unsplash.com/photo-1678845750026-0b9936b4202c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80\" />\n </AspectRatio.Root>\n </ContentWithImage_Image>\n </ContentWithImage>\n\n <ContentWithImage alternate>\n <ContentBlock>\n <Icon color=\"red11\" backgroundColor=\"red3\" borderColor=\"red5\">\n <i className=\"ph-duotone ph-graph\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Data, Decentralized\n </Text>\n <Text>\n Data stored on NEAR is accessible to any component or application\n on the platform, providing a level playing field for developers\n and a more consistent experience for users.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn More\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentWithImage_Image>\n <AspectRatio.Root ratio={imageRatio}>\n <img src=\"https://images.unsplash.com/photo-1678845750026-0b9936b4202c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80\" />\n </AspectRatio.Root>\n </ContentWithImage_Image>\n </ContentWithImage>\n </Section>\n\n <Section>\n <Develop>\n <Develop_Content>\n <Flex gap=\"16px\" direction=\"column\">\n <Text as=\"h2\" size=\"text-l\" fontWeight=\"600\" color=\"violet10\">\n Develop\n </Text>\n <VerticalBorder />\n <Text size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n Don’t reinvent the wheel. Reinvent\n <span style={{ color: \"var(--sand9)\" }}>\n <Develop_TabButton active color=\"red10\">\n social\n </Develop_TabButton>\n , <Develop_TabButton color=\"violet10\">gaming</Develop_TabButton>\n , <Develop_TabButton color=\"green10\">finance</Develop_TabButton>\n </span>\n </Text>\n </Flex>\n\n <Text size=\"text-2xl\" fontWeight=\"500\">\n Weave new experiences with over{\" \"}\n <span style={{ color: \"var(--sand12)\" }}>{totalComponents}</span>{\" \"}\n Open Web Components built on shared, persistent data.\n </Text>\n </Develop_Content>\n\n <Develop_Preview />\n </Develop>\n </Section>\n\n <Section>\n <Flex gap=\"var(--large-gap)\">\n <ContentBlock>\n <Icon\n color=\"violet11\"\n backgroundColor=\"violet3\"\n borderColor=\"violet5\"\n >\n <i className=\"ph-duotone ph-shapes\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Composable to the Core\n </Text>\n <Text>\n Explore a host of components built by our community. Use them in\n your applications, combine them in new and interesting ways, or\n build and publish your own.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/#/adminalpha.near/widget/ComponentsPage\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore Components\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentBlock>\n <Icon color=\"red11\" backgroundColor=\"red3\" borderColor=\"red5\">\n <i className=\"ph-duotone ph-keyhole\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Always Open Source\n </Text>\n <Text>\n Every component, including this page, is live on NEAR&apos;s\n public blockchain. The source code is available to everyone,\n waiting to be inspected, forked, modified and reused.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/#/edit/adminalpha.near/widget/NearOrg.HomePage\",\n iconLeft: \"ph-bold ph-git-fork\",\n label: \"Fork This Page\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n </Flex>\n </Section>\n\n <Section>\n <Stats>\n <div>\n <Text size=\"text-3xl\" color=\"violet9\" fontWeight=\"500\">\n 0000\n </Text>\n <Text size=\"text-l\" fontWeight=\"500\">\n Active Developers\n </Text>\n </div>\n <div>\n <Text size=\"text-3xl\" color=\"violet9\" fontWeight=\"500\">\n {totalComponents}\n </Text>\n <Text size=\"text-l\" fontWeight=\"500\">\n OS Components\n </Text>\n </div>\n\n <div>\n <Text size=\"text-3xl\" color=\"violet9\" fontWeight=\"500\">\n 0000\n </Text>\n <Text size=\"text-l\" fontWeight=\"500\">\n Applications\n </Text>\n </div>\n\n <div>\n <Text size=\"text-3xl\" color=\"violet9\" fontWeight=\"500\">\n 00%\n </Text>\n <Text size=\"text-l\" fontWeight=\"500\">\n Uptime\n </Text>\n </div>\n </Stats>\n </Section>\n\n <Section center>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"center\">\n <Text as=\"h2\" size=\"text-l\" fontWeight=\"600\" color=\"violet10\">\n Publish\n </Text>\n <VerticalBorder />\n <Text\n size=\"text-2xl\"\n fontWeight=\"600\"\n color=\"sand12\"\n style={{ maxWidth: \"420px\" }}\n >\n Ditch traditional hosting. Serve straight to your users.\n </Text>\n </Flex>\n\n <Text size=\"text-2xl\" fontWeight=\"500\" style={{ maxWidth: \"550px\" }}>\n Publish, store, and host your front-end directly on chain, in an\n instant.\n </Text>\n </Section>\n\n <Section gap=\"var(--large-gap)\">\n <ContentWithImage>\n <ContentBlock>\n <Icon color=\"green12\" backgroundColor=\"green4\" borderColor=\"green9\">\n <i className=\"ph-duotone ph-butterfly\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Distribute freely...\n </Text>\n <Text>\n No more jumping through hoops to reach your audience. Your code is\n stored and hosted on chain and served directly to users,\n eliminating reliance on providers and intermediaries.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/\",\n iconLeft: \"ph-duotone ph-play\",\n label: \"Try It Out\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentWithImage_Image>\n <AspectRatio.Root ratio={imageRatio}>\n <img src=\"https://images.unsplash.com/photo-1678845750026-0b9936b4202c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80\" />\n </AspectRatio.Root>\n </ContentWithImage_Image>\n </ContentWithImage>\n\n <ContentWithImage>\n <ContentBlock>\n <Icon\n color=\"violet11\"\n backgroundColor=\"violet3\"\n borderColor=\"violet5\"\n >\n <i className=\"ph-duotone ph-currency-eth\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n ...on any chain...\n </Text>\n <Text>\n Deploy your app to Ethereum, Cosmos, and more. Take full advantage\n of NEAR’s speed, low cost and scalability, all while meeting your\n users where they are.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn More\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentWithImage_Image>\n <AspectRatio.Root ratio={imageRatio}>\n <img src=\"https://images.unsplash.com/photo-1678845750026-0b9936b4202c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80\" />\n </AspectRatio.Root>\n </ContentWithImage_Image>\n </ContentWithImage>\n\n <ContentWithImage>\n <ContentBlock>\n <Icon color=\"red11\" backgroundColor=\"red3\" borderColor=\"red5\">\n <i className=\"ph-duotone ph-globe-hemisphere-west\" />\n </Icon>\n <ContentBlock_Text>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n ...on any platform, anywhere.\n </Text>\n <Text>\n Any browser, app, or connected device capable of running a few\n lines of Javascript can run your application within an embeded\n blockchain experience.\n </Text>\n </ContentBlock_Text>\n <Widget\n src=\"adminalpha.near/widget/DS.Button\"\n props={{\n href: \"/\",\n iconLeft: \"ph-bold ph-door-open\",\n label: \"Explore Gateways\",\n variant: \"secondary\",\n size: \"large\",\n }}\n />\n </ContentBlock>\n\n <ContentWithImage_Image>\n <AspectRatio.Root ratio={imageRatio}>\n <img src=\"https://images.unsplash.com/photo-1678845750026-0b9936b4202c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80\" />\n </AspectRatio.Root>\n </ContentWithImage_Image>\n </ContentWithImage>\n </Section>\n </Wrapper>\n);\n" } } } } }