Transaction: 2xeFwor...XeiM

{ "data": { "buildhub.near": { "widget": { "home.Hero": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst { href } = VM.require(\"buildhub.near/widget/lib.url\") || {\n href: () => {},\n};\n\nconst gridLink =\n \"https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4\";\nconst logoLink =\n \"https://ipfs.near.social/ipfs/bafkreifnxc6jk66wdy377ttcinogwr4xqnllsrjfmnglvoonikafzksdui\";\nconst leftBlur =\n \"https://ipfs.near.social/ipfs/bafkreiabxzgspdolrlol2gvw7gnyrtktmfg23pd2ykow5pdddtmz3ve45y\";\nconst rightBlur =\n \"https://ipfs.near.social/ipfs/bafkreigxwshevkyp6rt2l6gjxeap4b6yetxhusyn6swfhh4rtwvp3kkgqu\";\nconst mobileBlur =\n \"https://ipfs.near.social/ipfs/bafkreid6k74swyhmqmq6vedpafumz6cywbok72zckkgemzg6jec7sk5fpm\";\n\nconst Grid = styled.img`\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.02;\n object-fit: cover;\n width: 100%;\n height: 100%;\n pointer-events: none;\n`;\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 40px;\n\n padding: 48px;\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n gap: 20px;\n }\n`;\n\nconst Logo = styled.img`\n height: 80px;\n width: 235px;\n object-fit: cover;\n\n @media screen and (max-width: 768px) {\n height: 26px;\n width: 71px;\n }\n`;\n\nconst Heading = styled.h1`\n color: var(--text-color, #fff);\n font-family: \"Poppins\", sans-serif;\n font-size: 58px;\n line-height: 120%; /* 69.6px */\n text-wrap: balance;\n margin: 0;\n\n span {\n color: var(--eca-227, #eca227);\n font-weight: 600;\n }\n\n @media screen and (max-width: 768px) {\n font-size: 40px;\n }\n`;\n\nconst Subheading = styled.h2`\n color: var(--white-50, #b0b0b0);\n font-size: 24px;\n font-weight: 500;\n font-family: InterVariable;\n line-height: 140%; /* 33.6px */\n margin: 0;\n\n @media screen and (max-width: 768px) {\n font-size: 12px;\n }\n`;\n\nconst Phrase = styled.p`\n color: #7f7f7f;\n font-size: 14px;\n font-family: InterVariable, sans-serif;\n margin: 0;\n\n @media screen and (max-width: 768px) {\n font-size: 10px;\n }\n`;\n\nconst Stats = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 40px;\n\n @media screen and (max-width: 768px) {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n place-items: center;\n }\n`;\n\nconst InfoStat = ({ amount, label }) => {\n return (\n <div className=\"d-flex gap-2 align-items-center\">\n <div className=\"d-none d-md-block\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n >\n <path\n d=\"M24 4.5C20.1433 4.5 16.3731 5.64366 13.1664 7.78634C9.95963 9.92903 7.46027 12.9745 5.98436 16.5377C4.50845 20.1008 4.12228 24.0216 4.8747 27.8043C5.62711 31.5869 7.4843 35.0615 10.2114 37.7886C12.9386 40.5157 16.4131 42.3729 20.1957 43.1253C23.9784 43.8777 27.8992 43.4916 31.4623 42.0156C35.0255 40.5397 38.071 38.0404 40.2137 34.8336C42.3564 31.6269 43.5 27.8567 43.5 24C43.4945 18.83 41.4383 13.8732 37.7826 10.2174C34.1268 6.56167 29.1701 4.50546 24 4.5ZM40.4306 22.5H32.9625C32.6981 17.1637 31.0369 12.0994 28.2525 8.0625C31.5135 8.938 34.4284 10.7907 36.6055 13.3716C38.7825 15.9526 40.1174 19.1381 40.4306 22.5ZM24 40.4794C20.4881 36.6787 18.3581 31.2919 18.0431 25.5H29.9569C29.6419 31.2881 27.5119 36.6787 24 40.4794ZM18.0431 22.5C18.3581 16.7119 20.4806 11.3212 24 7.52063C27.5119 11.3212 29.6419 16.7081 29.9569 22.5H18.0431ZM19.7475 8.0625C16.9631 12.0994 15.3019 17.1637 15.0375 22.5H7.56938C7.88267 19.1381 9.21752 15.9526 11.3946 13.3716C13.5716 10.7907 16.4865 8.938 19.7475 8.0625ZM7.56938 25.5H15.0375C15.3019 30.8363 16.9631 35.9006 19.7475 39.9375C16.4865 39.062 13.5716 37.2093 11.3946 34.6284C9.21752 32.0474 7.88267 28.8619 7.56938 25.5ZM28.2525 39.9375C31.0369 35.895 32.6981 30.8306 32.9625 25.5H40.4306C40.1174 28.8619 38.7825 32.0474 36.6055 34.6284C34.4284 37.2093 31.5135 39.062 28.2525 39.9375Z\"\n fill=\"#6E6E6E\"\n />\n </svg>\n </div>\n <div className=\"d-block d-md-none\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"31\"\n viewBox=\"0 0 30 31\"\n fill=\"none\"\n >\n <path\n d=\"M15.0423 3.60059C12.6665 3.60059 10.3441 4.30508 8.36877 5.62497C6.39341 6.94487 4.8538 8.82089 3.94464 11.0158C3.03548 13.2107 2.7976 15.6259 3.26109 17.956C3.72457 20.2861 4.8686 22.4264 6.54851 24.1064C8.22842 25.7863 10.3688 26.9303 12.6989 27.3938C15.029 27.8573 17.4442 27.6194 19.6391 26.7102C21.834 25.8011 23.71 24.2615 25.0299 22.2861C26.3498 20.3107 27.0543 17.9883 27.0543 15.6126C27.0509 12.4278 25.7843 9.37449 23.5323 7.12253C21.2804 4.87058 18.227 3.60395 15.0423 3.60059ZM25.1635 14.6886H20.5632C20.4003 11.4015 19.377 8.2818 17.6618 5.79509C19.6706 6.33439 21.4662 7.47566 22.8072 9.06552C24.1483 10.6554 24.9706 12.6176 25.1635 14.6886ZM15.0423 25.7639C12.879 23.4227 11.5669 20.1044 11.3728 16.5366H18.7117C18.5177 20.1021 17.2056 23.4227 15.0423 25.7639ZM11.3728 14.6886C11.5669 11.1231 12.8743 7.80248 15.0423 5.46129C17.2056 7.80248 18.5177 11.1208 18.7117 14.6886H11.3728ZM12.4227 5.79509C10.7076 8.2818 9.68423 11.4015 9.52138 14.6886H4.92101C5.114 12.6176 5.93627 10.6554 7.27732 9.06552C8.61838 7.47566 10.414 6.33439 12.4227 5.79509ZM4.92101 16.5366H9.52138C9.68423 19.8237 10.7076 22.9434 12.4227 25.4301C10.414 24.8908 8.61838 23.7495 7.27732 22.1597C5.93627 20.5698 5.114 18.6075 4.92101 16.5366ZM17.6618 25.4301C19.377 22.9399 20.4003 19.8203 20.5632 16.5366H25.1635C24.9706 18.6075 24.1483 20.5698 22.8072 22.1597C21.4662 23.7495 19.6706 24.8908 17.6618 25.4301Z\"\n fill=\"#6E6E6E\"\n />\n </svg>\n </div>\n <div className=\"d-flex flex-column\">\n <span\n style={{\n fontSize: 26,\n fontWeight: 500,\n fontFamily: \"Poppins, sans-serif\",\n }}\n >\n +{amount}\n </span>\n <span\n style={{\n fontWeight: 500,\n fontSize: 14,\n color: \"var(--Black-50, #6E6E6E)\",\n fontFamily: \"InterVariable, sans-serif\",\n }}\n >\n {label}\n </span>\n </div>\n </div>\n );\n};\n\nconst HeadingContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n`;\n\nconst RightBlur = styled.img`\n position: absolute;\n right: 0;\n bottom: -316px;\n opacity: 0.5;\n pointer-events: none;\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n`;\n\nconst LeftBlur = styled.img`\n position: absolute;\n left: 0;\n top: -316px;\n opacity: 0.5;\n pointer-events: none;\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n`;\n\nconst MobileBlur = styled.img`\n display: none;\n\n @media screen and (max-width: 768px) {\n position: absolute;\n right: 0;\n bottom: -15px;\n opacity: 0.5;\n display: block;\n pointer-events: none;\n }\n`;\n\nconst Hero = (props) => {\n const { signedIn, currentGateway } = props;\n return (\n <div className=\"position-relative\">\n <Container className=\"container-xl mt-md-3 z-3\">\n <Logo src={logoLink} />\n <HeadingContainer>\n <Heading>\n Designed to connect and empower builders in a{\" \"}\n <span>multi-chain ecosystem</span>\n </Heading>\n <Subheading>\n Empowering Builders: Strengthening Connections in Multi-Chain\n Systems\n </Subheading>\n </HeadingContainer>\n <div className=\"d-flex align-items-center gap-4\">\n {currentGateway && !signedIn ? (\n <>\n <a\n href={\"https://nearbuilders.org/join?from=trial\"}\n style={{ textDecoration: \"none\" }}\n >\n <Button style={{ background: \"#4A21A5\", color: \"white\" }}>\n Create Trial Account\n </Button>\n </a>\n <Phrase>\n Try out the Builders Gateway with a trial account.\n <br />\n No passphrases, no crypto required.\n </Phrase>\n </>\n ) : (\n <>\n <Button\n href={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"feed\",\n },\n })}\n style={{ background: \"#4A21A5\", color: \"white\" }}\n >\n See Activity\n </Button>\n </>\n )}\n </div>\n {/* <Stats>\n <InfoStat label=\"Lorem\" amount={100} />\n <InfoStat label=\"Lorem\" amount={100} />\n <InfoStat label=\"Lorem\" amount={100} />\n <InfoStat label=\"Lorem\" amount={100} />\n </Stats> */}\n </Container>\n <MobileBlur src={mobileBlur} />\n <LeftBlur src={leftBlur} />\n <RightBlur src={rightBlur} />\n <Grid src={gridLink} />\n </div>\n );\n};\n\nreturn { Hero };\n" }, "components.ProposalCard": { "": "const {\n id,\n typeName,\n proposer,\n description,\n kind,\n status,\n totalVotesNeeded,\n totalVotes,\n submission_time,\n votes,\n expirationTime,\n} = props.proposalData;\nconst { daoId, isAllowedToVote, handleVote, comments, proposalData } = props;\nconst accountId = context.accountId;\n\nconst ThemeContainer =\n props.ThemeContainer ||\n styled.div`\n --primary-bg-color: #23242b;\n --secondary-bg-color: #ffffff1a;\n --primary-border-color: #fff;\n --primary-text-color: #ffffff;\n --secondary-text-color: #b0b0b0;\n --primary-btn-bg-color: #eca227;\n --primary-btn-text-color: #000;\n --approve-bg-color: #82e299;\n --reject-bg-color: #c23f38;\n --spam-bg-color: #f5c518;\n --vote-button-color: #ffffff;\n --success-badge-bg-color: #38c7931a;\n --success-badge-text-color: #38c793;\n --primary-badge-bg-color: #eca22733;\n --primary-badge-text-color: #eca227;\n --info-badge-bg-color: #51b6ff33;\n --info-badge-text-color: #51b6ff;\n --danger-badge-bg-color: #fd2a5c1a;\n --danger-badge-text-color: #fd2a5c;\n --black-badge-bg-color: #ffffff1a;\n --black-badge-text-color: #fff;\n `;\n\nfunction checkVotes(value) {\n return votes[accountId] === value;\n}\n\nconst Wrapper = styled.div`\n margin: 16px auto;\n border-radius: 16px;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n min-height: 500px;\n width: 100%;\n border: 1px solid var(--primary-border-color);\n\n b {\n font-weight: 600;\n }\n\n .font-monospace {\n color: var(--secondary-text-color) !important;\n }\n\n .secondary-bg {\n background: var(--secondary-bg-color) !important;\n }\n\n .secondary-text {\n color: var(--secondary-text-color) !important;\n }\n\n a {\n background: var(--secondary-bg-color) !important;\n color: var(--primary-text-color) !important;\n }\n\n .social_url {\n background: var(--secondary-bg-color) !important;\n }\n\n .btn-primary {\n background-color: var(--primary-btn-bg-color) !important;\n color: var(--primary-btn-text-color) !important;\n border: none;\n }\n\n ul {\n background-color: var(--primary-bg-color);\n }\n\n .Approve {\n background: none !important;\n .vote {\n color: #38c793 !important;\n }\n }\n\n .Reject {\n background: none !important;\n .vote {\n color: #bf2c37 !important;\n }\n }\n\n .Remove {\n background: none !important;\n .vote {\n color: #73692d !important;\n }\n }\n\n .success {\n border: 1px solid var(--success-badge-bg-color) !important;\n background: var(--success-badge-bg-color) !important;\n color: var(--success-badge-text-color) !important;\n }\n\n .primary {\n border: 1px solid var(--primary-badge-bg-color) !important;\n background: var(--primary-badge-bg-color) !important;\n color: var(--primary-badge-text-color) !important;\n }\n\n .info {\n border: 1px solid var(--info-badge-bg-color) !important;\n background: var(--info-badge-bg-color) !important;\n color: var(--info-badge-text-color) !important;\n }\n\n .danger {\n border: 1px solid var(--danger-badge-bg-color) !important;\n background: var(--danger-badge-bg-color) !important;\n color: var(--danger-badge-text-color) !important;\n }\n\n .black {\n border: 1px solid var(--black-badge-bg-color) !important;\n background: var(--black-badge-bg-color) !important;\n color: var(--black-badge-text-color) !important;\n }\n\n .word-wrap {\n word-wrap: break-word;\n }\n\n ${({ status }) =>\n status === \"Approved\" &&\n `\n border-color: var(--approve-bg-color);\n `}\n\n ${({ status }) =>\n status === \"In Progress\" &&\n `\n border-color: #fff;\n `}\n\n ${({ status }) =>\n (status === \"Failed\" || status === \"Rejected\") &&\n `\n border-color: var(--reject-bg-color);\n `}\n\n .text-sm {\n font-size: 14px;\n }\n\n .counter-text {\n font-size: 14px;\n margin-right: 5px;\n border-width: 2px;\n animation-duration: 8s;\n }\n\n .text-center {\n text-align: center;\n }\n\n .info_section {\n border-right: 1px solid #dee2e6;\n padding-right: 15px;\n margin: 10px 15px 10px 0;\n\n &.no-border {\n border: 0;\n }\n\n @media (max-width: 768px) {\n border: 0;\n }\n }\n`;\n\nconst cls = (c) => c.join(\" \");\n\nconst YouVotedBadge = () => {\n return (\n <Widget\n src=\"nearui.near/widget/Element.Badge\"\n props={{\n size: \"sm\",\n variant: \"info outline mb-1\",\n children: \"You voted\",\n }}\n />\n );\n};\n\nfunction renderPermission({ isAllowedToVote }) {\n return (\n <div className={\"text-center p-2 rounded-pill secondary-text secondary-bg\"}>\n {isAllowedToVote\n ? \"You are allowed to vote on this proposal\"\n : \"You are not allowed to vote on this proposal\"}\n </div>\n );\n}\n\nconst execProposal = ({ daoId, id }) =>\n Near.call(daoId, \"execute\", { id }, 50000000000000);\n\nfunction renderHeader({ typeName, id, status }) {\n let statusicon;\n let statustext;\n let statusvariant;\n\n switch (status) {\n case \"Approved\":\n case \"Accepted\":\n statusicon = \"bi bi-check-circle\";\n statustext = status;\n statusvariant = \"success\";\n break;\n case \"Executed\":\n statusicon = \"bi bi-play-fill\";\n statustext = status;\n statusvariant = \"success\";\n break;\n case \"InProgress\":\n statusicon = \"spinner-border spinner-border-sm\";\n statustext = \"In Progress\";\n statusvariant = \"primary\";\n break;\n case \"Expired\":\n statusicon = \"bi bi-clock\";\n statustext = status;\n statusvariant = \"black\";\n break;\n case \"Failed\":\n statusicon = \"bi bi-x-circle\";\n statustext = status;\n statusvariant = \"black\";\n break;\n case \"Rejected\":\n statusicon = \"bi bi-ban\";\n statustext = status;\n statusvariant = \"danger\";\n break;\n }\n\n return (\n <div className=\"card__header\">\n <div className=\"d-flex flex-column gap-2\">\n <div className=\"d-flex align-items-center justify-content-between\">\n <h4>{typeName}</h4>\n </div>\n <div className=\"d-flex gap-2 flex-wrap align-items-center\">\n <Widget\n src=\"nearui.near/widget/Element.Badge\"\n props={{\n children: `Proposal ID #${id}`,\n variant: \"\",\n className: \"secondary-bg\",\n size: \"lg\",\n }}\n />\n\n <Widget\n src=\"nearui.near/widget/Element.Badge\"\n props={{\n children: (\n <>\n <i\n className={statusicon}\n style={{\n fontSize: \"16px\",\n marginRight: \"5px\",\n borderWidth: \"2px\",\n animationDuration: \"3s\",\n }}\n ></i>\n {statustext}\n </>\n ),\n variant: `${statusvariant} round`,\n size: \"lg\",\n }}\n />\n\n {status === \"InProgress\" &&\n parseInt(Big(expirationTime).div(1000000)) > Date.now() && (\n <Widget\n src=\"nearui.near/widget/Element.Badge\"\n props={{\n children: (\n <div className=\"counter-text\">\n <Widget\n src=\"astraplusplus.ndctools.near/widget/Common.Layout.Countdown\"\n props={{\n timeToCheck: parseInt(\n Big(expirationTime).div(1000000),\n ),\n }}\n />\n </div>\n ),\n variant: `info round`,\n size: \"lg\",\n }}\n />\n )}\n </div>\n </div>\n </div>\n );\n}\n\nfunction renderData({\n proposer,\n description,\n submission_time,\n totalVotesNeeded,\n}) {\n return (\n <div className=\"d-flex gap-2 flex-column\">\n <div className=\"d-flex gap-2\">\n <div className=\"w-50\">\n <div className=\"mb-2\">\n <b>Proposer</b>\n </div>\n <div className=\"secondary-text\">\n <Widget\n src=\"mob.near/widget/Profile.ShortInlineBlock\"\n props={{ accountId: proposer, tooltip: true }}\n />\n </div>\n </div>\n </div>\n <div className=\"mt-3 word-wrap \">\n <b>Description</b>\n <div className=\"secondary-text\">\n <Markdown text={description} />\n </div>\n </div>\n\n <Widget\n src=\"astraplusplus.ndctools.near/widget/Common.Modals.ProposalArguments\"\n props={{ daoId, proposal: proposalData }}\n />\n\n <div className=\"d-flex flex-wrap\">\n {submission_time && (\n <div className=\"info_section\">\n <b>Submitted at</b>\n <div>\n <small className=\"secondary-text\">\n {new Date(\n parseInt(Big(submission_time).div(1000000)),\n ).toLocaleString()}\n </small>\n </div>\n </div>\n )}\n\n <div className=\"info_section\">\n <b>Expired at</b>\n <div>\n <small className=\"secondary-text\">\n {new Date(\n parseInt(Big(expirationTime).div(1000000)),\n ).toLocaleString()}\n </small>\n </div>\n </div>\n\n <div className=\"info_section no-border\">\n <b>Required Votes</b>\n <div>\n <small className=\"secondary-text\">{totalVotesNeeded}</small>\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nfunction renderVoteButtons({\n totalVotes,\n status,\n isAllowedToVote,\n handleVote,\n}) {\n const finished = status !== \"InProgress\";\n const VoteButton = styled.button`\n width: 100%;\n border-radius: 15px;\n border: 1px solid transparent;\n padding: 0 20px;\n line-height: 45px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n overflow: hidden;\n color: var(--vote-button-color);\n background-color: var(--secondary-bg-color);\n --vote-button-bg: var(--approve-bg-color);\n &.no {\n --vote-button-bg: var(--reject-bg-color);\n }\n\n &.no > div:last-child {\n transition: all 0.4s ease-in-out;\n }\n ${({ finished, percentage, disabled }) => {\n if (finished) {\n if (percentage > 80) {\n return `\n &.no > div:last-child {\n color: var(--vote-button-color) !important;\n }\n `;\n }\n } else if (!disabled) {\n return `\n &:hover.no > div:last-child {\n color: var(--vote-button-color) !important;\n } \n `;\n }\n }}}\n\n &.spam {\n --vote-button-bg: var(--spam-bg-color);\n }\n\n &:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 12px;\n transition: all 0.4s ease-in-out;\n z-index: 0;\n background-color: var(--vote-button-bg);\n ${({ percentage }) => `\n min-width: ${percentage && percentage > 5 ? `${percentage}%` : \"5px\"};\n `}\n }\n\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 12px;\n transition: all 0.4s ease-in-out;\n z-index: 1;\n background-color: var(--vote-button-bg);\n\n min-width: ${({ percentage }) =>\n percentage && percentage > 5 ? `${percentage}%` : \"5px\"};\n\n ${({ finished, wins }) =>\n finished &&\n wins &&\n `\n display: none;\n `}\n }\n\n ${({ disabled }) =>\n !disabled &&\n `\n &:hover {\n &:before {\n min-width: 100%;\n }\n }\n `}\n\n & > div {\n z-index: 2;\n }\n\n & > div:last-child span {\n display: block;\n font-size: 15px;\n font-weight: 600;\n line-height: 1.4;\n\n &:last-child {\n font-size: 12px;\n font-weight: 400;\n }\n }\n `;\n\n const getPercentage = (vote) => {\n const percentage = Math.round((vote / totalVotesNeeded) * 100);\n return percentage || 0;\n };\n\n const percentages = {\n yes: getPercentage(totalVotes.yes),\n no: getPercentage(totalVotes.no),\n spam: getPercentage(totalVotes.spam),\n abstain: getPercentage(totalVotes.abstain),\n };\n\n const wins = {\n yes: status === \"Approved\",\n no: status === \"Rejected\",\n spam: status === \"Failed\" || status === \"Spam\",\n };\n\n const voted = {\n yes: checkVotes(\"Approve\"),\n no: checkVotes(\"Reject\"),\n spam: checkVotes(\"Remove\"),\n };\n\n const alreadyVoted = voted.yes || voted.no || voted.spam || voted.abstain;\n\n const VotePercentage = ({ vote }) => (\n <div>\n <span>\n {percentages[vote]}\n <i className=\"bi bi-percent\"></i>\n </span>\n <span>\n {totalVotes[vote]} {totalVotes[vote] === 1 ? \"Vote\" : \"Votes\"}\n </span>\n </div>\n );\n\n return (\n <div\n className=\"d-lg-grid d-flex flex-wrap gap-2 align-items-end\"\n style={{\n gridTemplateColumns: \"repeat(3,1fr)\",\n }}\n >\n <div className=\"w-100\">\n {voted.yes && <YouVotedBadge />}\n <VoteButton\n className=\"yes\"\n percentage={percentages.yes}\n finished={finished}\n wins={wins.yes}\n myVote={voted.yes}\n onClick={() => handleVote(\"VoteApprove\")}\n disabled={alreadyVoted || finished || !isAllowedToVote[0]}\n >\n <div>\n {wins.yes && (\n <span title=\"Yes won\">\n <i className=\"bi bi-check-circle\"></i>\n </span>\n )}\n <span className=\"text-sm\">Approve</span>\n </div>\n <VotePercentage vote=\"yes\" />\n </VoteButton>\n </div>\n <div className=\"w-100\">\n {voted.no && <YouVotedBadge />}\n <VoteButton\n className=\"no\"\n percentage={percentages.no}\n finished={finished}\n wins={wins.no}\n myVote={voted.no}\n onClick={() => handleVote(\"VoteReject\")}\n disabled={alreadyVoted || finished || !isAllowedToVote[1]}\n >\n <div className=\"d-flex gap-2 align-items-center\">\n {wins.no && (\n <span title=\"No won\">\n <i className=\"bi bi-check-circle\"></i>\n </span>\n )}\n <span className=\"text-sm\">Reject</span>\n </div>\n <VotePercentage vote=\"no\" />\n </VoteButton>\n </div>\n\n <div className=\"w-100\">\n {voted.spam && <YouVotedBadge />}\n <VoteButton\n className=\"spam\"\n percentage={percentages.spam}\n finished={finished}\n wins={wins.spam}\n myVote={voted.spam}\n onClick={() => handleVote(\"VoteRemove\")}\n disabled={alreadyVoted || finished || !isAllowedToVote[2]}\n >\n <div className=\"d-flex gap-2 align-items-center\">\n <span>Spam</span>\n </div>\n <VotePercentage vote=\"spam\" />\n </VoteButton>\n </div>\n </div>\n );\n}\n\nfunction renderFooter({ totalVotes, votes, comments, daoId, proposal }) {\n const items = [\n {\n title: \"Comments\",\n icon: \"bi bi-chat-left-text\",\n count: comments.length || 0,\n widget: \"Common.Modals.Comments\",\n props: {\n daoId,\n proposal,\n commentsCount: comments.length,\n item: {\n type: \"dao_proposal_comment\",\n path: `${daoId}/proposal/main`,\n proposal_id: proposal.id + \"-beta\",\n },\n },\n },\n {\n title: \"Voters\",\n icon: \"bi bi-people\",\n count: totalVotes.total,\n widget: \"Common.Modals.Voters\",\n props: {\n daoId,\n votes,\n totalVotes,\n proposalId: proposal.id,\n votersCount: totalVotes.total,\n },\n },\n {\n title: \"Share\",\n icon: \"bi bi-share\",\n widget: \"Common.Modals.Share\",\n props: {\n url: `https://near.org/buildhub.near/widget/Proposals?daoId=${daoId}&proposalId=${\n proposalData.id\n }${props.dev ? \"&dev=true\" : \"\"}`,\n text: \"Explore this new proposal from our DAO! Your support and feedback are essential as we work towards a decentralized future. Review the details and join the discussion here:\",\n },\n },\n ];\n\n if (proposal.typeName !== \"Text\") {\n items.push({\n title: \"More details\",\n icon: \"bi bi-three-dots\",\n widget: \"Common.Modals.ProposalArguments\",\n props: {\n daoId,\n proposal,\n showCard: true,\n },\n });\n }\n\n const renderModal = (item, index) => {\n return (\n <Widget\n src=\"astraplusplus.ndctools.near/widget/Layout.Modal\"\n props={{\n content: (\n <Widget\n src={`astraplusplus.ndctools.near/widget/${item.widget}`}\n props={item.props}\n />\n ),\n toggle: (\n <div\n key={index}\n className={\n \"d-flex gap-2 align-items-center justify-content-center user-select-none secondary-text\" +\n (index !== items.length - 1 ? \" border-end\" : \"\")\n }\n >\n <i className={item.icon} style={{ color: \"white\" }}></i>\n {item.count && <span>{item.count}</span>}\n <span>{item.title}</span>\n </div>\n ),\n toggleContainerProps: {\n className: \"flex-fill\",\n },\n }}\n />\n );\n };\n\n return (\n <div className=\"d-flex gap-3 justify-content-between mt-2 border-top pt-4 flex-wrap\">\n {items.map(renderModal)}\n </div>\n );\n}\n\nconst voted = {\n yes: checkVotes(\"Approve\"),\n no: checkVotes(\"Reject\"),\n spam: checkVotes(\"Remove\"),\n abstain: checkVotes(\"Abstain\"),\n};\n\nconst alreadyVoted = voted.yes || voted.no || voted.spam;\n\nconst canVote =\n isAllowedToVote.every((v) => v) && status === \"In Progress\" && !alreadyVoted;\n\nreturn (\n <ThemeContainer>\n <Wrapper className=\"ndc-card\" status={status}>\n {renderPermission({ isAllowedToVote: isAllowedToVote.every((v) => v) })}\n {renderHeader({ typeName, id, daoId, status })}\n {renderData({\n proposer,\n description,\n submission_time,\n totalVotesNeeded,\n })}\n {renderVoteButtons({\n totalVotes,\n status,\n votes,\n accountId,\n isAllowedToVote,\n handleVote: (action) => {\n return handleVote({\n action,\n proposalId: id,\n proposer,\n });\n },\n })}\n {renderFooter({\n totalVotes,\n votes,\n comments,\n daoId,\n proposal: proposalData,\n })}\n </Wrapper>\n </ThemeContainer>\n);\n" }, "home.Footer": { "": "const Container = styled.div`\n padding: 32px 50px;\n display: flex;\n flex-direction: column;\n gap: 80px;\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n gap: 40px;\n }\n`;\n\nconst Card = styled.div`\n display: flex;\n padding: 56px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 40px;\n width: 100%;\n\n border-radius: 16px;\n border: 1px solid var(--Gradient-1, #4a21a5);\n background: #0d020f;\n box-shadow: 4px 24px 48px 0px rgba(249, 225, 122, 0.05);\n\n img {\n width: 90px;\n object-fit: cover;\n height: 100px;\n border-radius: 20px;\n }\n\n h3 {\n color: var(--paleta-escolhida-ffffff, #fff);\n text-align: center;\n font-family: \"Poppins\", sans-serif;\n font-size: 48px;\n line-height: normal;\n text-wrap: balance;\n margin: 0;\n\n span {\n font-weight: 700;\n }\n }\n\n @media screen and (max-width: 768px) {\n padding: 24px 20px;\n gap: 30px;\n\n img {\n width: 71.272px;\n height: 80px;\n }\n\n h3 {\n font-size: 28px;\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 32px 50px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n\n p {\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n text-align: center;\n font-family: \"InterVariable\", sans-serif;\n font-size: 16px;\n line-height: 170%; /* 27.2px */\n margin: 0;\n }\n\n @media screen and (max-width: 768px) {\n p {\n font-size: 14px;\n }\n }\n`;\n\nconst LinksContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 16px;\n\n a {\n font-size: 24px;\n color: #fff;\n text-decoration: none;\n transition: all 300ms;\n\n &:hover {\n opacity: 0.8;\n }\n }\n`;\n\nconst Footer = () => {\n return (\n <Container className=\"container-xl\">\n <Card>\n <img src=\"https://ipfs.near.social/ipfs/bafkreifcrvkgibbu4xpfxnxf3pnyhxvojqlffd2zmoxfbyapacy62rwwqu\" />\n <h3>\n Together, we can <span>build a better future</span>.\n </h3>\n <Widget\n src=\"buildhub.near/widget/components.buttons.Connect\"\n props={{\n joinBtnChildren: \"Join Now\",\n showActivity: true,\n className: \"custom-button\",\n }}\n />\n </Card>\n <FooterContainer>\n <LinksContainer>\n <a href=\"https://twitter.com/nearbuilders\" target=\"_blank\">\n <i className=\"bi bi-twitter-x\"></i>\n </a>\n <a href=\"https://nearbuilders.com/tg-builders\" target=\"_blank\">\n <i className=\"bi bi-telegram\"></i>\n </a>\n <a href=\"https://github.near/NEARBuilders\" target=\"_blank\">\n <i className=\"bi bi-github\"></i>\n </a>\n <a href=\"https://devs.near.social/\" target=\"_blank\">\n <i className=\"bi bi-code-slash\"></i>\n </a>\n </LinksContainer>\n <p>@{new Date().getFullYear()} BuildDAO all rights reserved</p>\n </FooterContainer>\n </Container>\n );\n};\n\nreturn { Footer };\n" }, "components.post.BookmarkButton": { "": "const item = props.item;\n\nif (!item) {\n return \"\";\n}\n\nuseEffect(() => {\n State.update({ hasBookmark: null });\n}, [item]);\n\nconst bookmarks = Social.index(\"bookmark\", item);\n\nconst dataLoading = bookmarks === null;\n\nconst bookmarksByUser = {};\n\n(bookmarks || []).forEach((bookmark) => {\n if (bookmark.value.type === \"bookmark\") {\n bookmarksByUser[bookmark.accountId] = bookmark;\n } else if (bookmark.value.type === \"unbookmark\") {\n delete bookmarksByUser[bookmark.accountId];\n }\n});\n\nif (state.hasBookmark === true) {\n bookmarksByUser[context.accountId] = {\n accountId: context.accountId,\n };\n} else if (state.hasBookmark === false) {\n delete bookmarksByUser[context.accountId];\n}\n\nconst accountsWithBookmarks = Object.keys(bookmarksByUser);\nconst bookmarkCount = accountsWithBookmarks.length;\nconst hasBookmark = context.accountId && !!bookmarksByUser[context.accountId];\n\nconst bookmarkSvg = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-bookmark\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z\" />\n </svg>\n);\n\nconst bookmarkFillSvg = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-bookmark-fill\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2\" />\n </svg>\n);\n\nconst BookmarkButton = styled.div`\n line-height: 20px;\n min-height: 20px;\n width: 20px;\n height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: left;\n background: inherit;\n color: inherit;\n font-size: 16px;\n .icon {\n position: relative;\n &:before {\n margin: -8px -9.5px;\n content: \"\";\n width: 36px;\n height: 36px;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n }\n }\n\n .count {\n margin-left: 8px;\n }\n\n &:not([disabled]) {\n cursor: pointer;\n }\n\n &:not([disabled]):hover {\n opacity: 1 !important;\n color: #eca227;\n\n .icon:before {\n background: rgba(255, 175, 81, 0.1);\n }\n }\n .bookmarked {\n color: #eca227;\n }\n\n .loading {\n @keyframes scaleAnimation {\n 0%,\n 100% {\n transform: scale(1) rotate(0deg);\n }\n 25% {\n transform: scale(1.2) rotate(-15deg);\n }\n 50% {\n transform: scale(1) rotate(0deg);\n }\n 75% {\n transform: scale(1.2) rotate(15deg);\n }\n }\n\n transform-origin: center;\n animation: scaleAnimation 1s ease-in-out infinite;\n }\n`;\n\nconst bookmarkClick = () => {\n if (state.loading || dataLoading || !context.accountId) {\n return;\n }\n State.update({\n loading: true,\n });\n const type = hasBookmark ? \"unbookmark\" : \"bookmark\";\n const data = {\n index: {\n bookmark: JSON.stringify({\n key: item,\n value: {\n type,\n },\n }),\n },\n };\n\n if (item.type === \"social\" && typeof item.path === \"string\") {\n const keys = item.path.split(\"/\");\n keys.push(item.blockHeight);\n if (keys.length > 0) {\n data.graph = {\n bookmark: {},\n };\n let root = data.graph.bookmark;\n keys.slice(0, -1).forEach((key) => {\n root = root[key] = {};\n });\n root[keys[keys.length - 1]] = hasBookmark ? null : \"\";\n }\n }\n\n if (!hasBookmark && props.notifyAccountId) {\n data.index.notify = JSON.stringify({\n key: props.notifyAccountId,\n value: {\n type,\n item,\n },\n });\n }\n\n Social.set(data, {\n onCommit: () => State.update({ loading: false, hasBookmark: !hasBookmark }),\n onCancel: () => State.update({ loading: false }),\n });\n};\n\nconst title = hasBookmark\n ? props.titleUnbookmark ?? \"Unbookmark\"\n : props.titleBookmark ?? \"Bookmark\";\n\nconst inner = (\n <div className=\"d-inline-flex align-items-center\">\n <BookmarkButton\n disabled={state.loading || dataLoading || !context.accountId}\n title={!props.tooltip ? title : undefined}\n onClick={bookmarkClick}\n >\n <span\n className={`icon ${state.loading ? \"loading \" : \"\"}${\n hasBookmark ? \"bookmarked\" : \"\"\n }`}\n >\n {hasBookmark ? bookmarkFillSvg : bookmarkSvg}\n </span>\n {bookmarkCount > 0 && (\n <span className={`count ${hasBookmark ? \"bookmarked\" : \"\"}`}>\n <Widget\n loading={bookmarkCount || \"\"}\n src=\"mob.near/widget/N.Overlay.Faces\"\n props={{ accounts: bookmarksByUser, limit: 10 }}\n />\n </span>\n )}\n </BookmarkButton>\n </div>\n);\n\nreturn props.tooltip ? (\n <OverlayTrigger\n placement={props.overlayPlacement ?? \"auto\"}\n overlay={<Tooltip>{title}</Tooltip>}\n >\n {inner}\n </OverlayTrigger>\n) : (\n inner\n);\n" }, "components.buttons.Connect": { "": "const { joinBtnChildren, connectedChildren, showActivity, className, href } =\n props;\n\nconst { Bullet, Button } = VM.require(\"buildhub.near/widget/components\") || {\n Bullet: () => <></>,\n Button: () => <></>,\n};\nconst DaoSDK = VM.require(\"sdks.near/widget/SDKs.Sputnik.DaoSDK\") || (() => {});\n\nif (!DaoSDK) {\n return <></>;\n}\nconst daoId = \"build.sputnik-dao.near\";\nconst sdk = DaoSDK(daoId);\nif (!sdk) {\n return <></>;\n}\nconst userAccountId = context.accountId;\n\nconst data = sdk?.checkIsMemberOrPending({\n accountId: userAccountId,\n rolesToCheck: [\"community\", \"council\"],\n});\n\nconst connectEdge = Social.keys(\n `${userAccountId}/graph/connect/${daoId}`,\n undefined,\n {\n values_only: true,\n },\n);\n\n// get DAO policy, deposit, and group\nconst policy = sdk?.getPolicy();\n\nif (policy === null || data === null) {\n return \"\";\n}\n\nconst deposit = policy?.proposal_bond;\nconst roleId = \"community\";\n\nconst handleJoin = () => {\n const connectData = {\n [userAccountId]: {\n graph: {\n connect: {\n [daoId]: \"\",\n },\n },\n index: {\n graph: JSON.stringify({\n key: \"connect\",\n value: {\n type: \"connect\",\n accountId: daoId,\n },\n }),\n },\n notify: JSON.stringify({\n key: daoId,\n value: {\n type: \"connect\",\n },\n }),\n },\n };\n\n sdk.createAddMemberProposal({\n description: `add ${userAccountId} to the ${roleId} group`,\n memberId: userAccountId,\n roleId: roleId,\n gas: 219000000000000,\n deposit: deposit,\n additionalCalls: [\n {\n contractName: \"social.near\",\n methodName: \"set\",\n deposit: 100000000000000000000000,\n args: { data: connectData, options: { refund_unused_deposit: true } },\n },\n ],\n });\n};\n\nconst isConnected = Object.keys(connectEdge || {}).length > 0;\n\nconst Container = styled.div`\n .custom-button {\n display: flex;\n padding: 10px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n\n border-radius: 8px;\n background: #eca227;\n\n color: #fff;\n margin: 0;\n\n a {\n color: #fff !important;\n }\n\n /* Other/Button_text */\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n\n text-decoration: none;\n transition: all 300ms;\n\n &:hover {\n background: #c98a40;\n }\n }\n\n a {\n @apply custom-button;\n }\n`;\n\nconst { href: linkHref } = VM.require(\"buildhub.near/widget/lib.url\") || {\n href: () => {},\n};\n\nconst Component = () => {\n if (!context.accountId) {\n return (\n <Button\n href={\"https://nearbuilders.org/join\"}\n variant=\"primary\"\n noLink={true}\n >\n Join Now\n </Button>\n );\n } else if (data.isDaoMember || isConnected) {\n if (showActivity) {\n return (\n <div className=\"d-flex flex-column align-items-center gap-3\">\n <Bullet variant=\"light\">\n {data.isDaoMember ? \"Joined\" : \"Pending application\"}\n </Bullet>\n <Link\n style={{ color: \"#df9731\", fontWeight: 600 }}\n to={linkHref({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"feed\",\n },\n })}\n >\n View Activity{\" \"}\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"17\"\n viewBox=\"0 0 16 17\"\n fill=\"none\"\n >\n <path\n d=\"M10.7809 7.83327L7.2049 4.25726L8.1477 3.31445L13.3332 8.49993L8.1477 13.6853L7.2049 12.7425L10.7809 9.1666H2.6665V7.83327H10.7809Z\"\n fill=\"#df9731\"\n />\n </svg>\n </Link>\n </div>\n );\n }\n return <div>{connectedChildren}</div>;\n } else {\n if (href) {\n return (\n <Link href={href} className={className}>\n {joinBtnChildren}\n </Link>\n );\n } else {\n return (\n <button className={className} onClick={handleJoin}>\n {joinBtnChildren}\n </button>\n );\n }\n }\n};\n\nreturn (\n <Container>\n <Component />\n </Container>\n);\n" }, "md-view": { "": "const MarkdownContainer = styled.div`\n max-width: 888px;\n padding: 0 55px 55px 55px;\n background: var(--bg-1, #000000);\n border-radius: 23px;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n span,\n li,\n ul,\n ol,\n p {\n color: var(--text-color, #fff) !important;\n font-family: \"Inter\", sans-serif !important;\n }\n\n pre {\n margin: 1rem 0;\n padding: 1rem;\n background: var(--bg-2, #23242b);\n border-radius: 1rem;\n }\n\n code {\n background: var(--bg-2, #23242b);\n color: var(--text-color, #fff) !important;\n font-family: monospace !important;\n }\n\n h1 {\n padding: 1rem 0;\n font-weight: 800;\n }\n\n h2 {\n padding: 0.5rem 0;\n font-weight: 700;\n }\n\n h3 {\n padding: 0.25rem 0;\n font-weight: 600;\n }\n\n h4,\n h5,\n h6 {\n font-weight: 500;\n }\n\n p,\n ul,\n li {\n color: #000;\n /* Body/14px */\n font-family: \"Inter\", sans-serif !important;\n font-style: normal;\n font-weight: 400;\n line-height: 170%;\n }\n\n @media screen and (max-width: 768px) {\n padding: 40px;\n border-radius: 10px;\n }\n`;\n\nfunction MarkdownView(props) {\n const content = fetch(`${props.path}`);\n if (content === null) return \"\";\n\n return (\n <MarkdownContainer>\n <Markdown text={content.body} />\n </MarkdownContainer>\n );\n}\n\nreturn { MarkdownView };\n" }, "home.Purposes": { "": "const { Button, Tag } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n Tag: () => <></>,\n};\n\nconst gridLink =\n \"https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4\";\n\nconst Container = styled.div`\n padding: 50px 48px;\n display: flex;\n flex-direction: column;\n gap: 100px;\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n gap: 50px;\n }\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n h2 {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-size: 44px;\n line-height: 110%;\n text-wrap: balance;\n font-family: \"Poppins\", sans-serif;\n margin: 0;\n\n span {\n font-weight: 700;\n }\n }\n\n h3 {\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n font-size: 24px;\n font-weight: 500;\n margin: 0;\n font-family: \"InterVariable\", sans-serif;\n line-height: 140%; /* 33.6px */\n max-width: 930px;\n }\n\n @media screen and (max-width: 768px) {\n h2 {\n font-size: 24px;\n line-height: 130%;\n }\n\n h3 {\n font-size: 14px;\n }\n }\n`;\n\nconst StepContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n place-items: center;\n align-items: stretch;\n gap: 32px;\n\n @media screen and (max-width: 768px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n`;\n\nconst Step = styled.div`\n display: flex;\n padding: 40px 56px;\n flex-direction: column;\n gap: 40px;\n\n border-radius: 16px;\n border: 1px solid var(--White-50, #b0b0b0);\n background: var(--000000, #000);\n\n &.first {\n border: 1px solid var(--Gradient-1, #4a21a5);\n }\n\n h4 {\n color: var(--eca-227, #eca227);\n font-size: 52px;\n font-weight: 900;\n line-height: 140%; /* 89.6px */\n margin: 0;\n }\n\n h5 {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-size: 28px;\n line-height: 120%; /* 43.2px */\n margin-bottom: 12px;\n }\n\n p {\n color: var(--6-e-6-e-6-e, var(--Black-50, #6e6e6e));\n font-size: 18px;\n line-height: 120%; /* 33.6px */\n margin: 0;\n }\n\n @media screen and (max-width: 768px) {\n padding: 24px 16px;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 16px;\n\n h4 {\n font-size: 32px;\n }\n\n h5 {\n font-size: 20px;\n line-height: normal;\n margin: 0;\n }\n\n p {\n font-size: 18px;\n }\n }\n`;\n\nconst Banner = styled.div`\n padding: 40px 60px;\n position: relative;\n\n border-radius: 16px;\n background: linear-gradient(104deg, #eca227 33.65%, #4a21a5 99.99%);\n box-shadow: 4px 24px 48px 0px rgba(81, 255, 234, 0.1);\n\n .container {\n display: flex;\n align-items: center;\n width: 100%;\n justify-content: space-between;\n\n h3 {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-family: Poppins, sans-serif;\n font-size: 44px;\n font-weight: 500;\n line-height: 120%; /* 52.8px */\n text-wrap: balance;\n margin: 0;\n\n span {\n font-weight: 700;\n }\n }\n\n .right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n p {\n color: var(--ffffff, #fff);\n font-family: Poppins, sans-serif;\n font-size: 20px;\n font-weight: 500;\n line-height: 150%;\n margin: 0;\n text-align: right;\n\n span {\n font-weight: 700;\n }\n\n a {\n color: var(--ffffff, #fff);\n text-decoration: underline;\n }\n }\n }\n }\n\n @media screen and (max-width: 960px) {\n flex-direction: column;\n padding: 30px;\n gap: 40px;\n\n .container {\n flex-direction: column;\n gap: 24px;\n\n h3 {\n font-size: 24px;\n text-align: center;\n }\n\n .right {\n p {\n font-size: 14px;\n text-align: center;\n }\n }\n }\n }\n`;\n\nconst GridImage = styled.img`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.05;\n pointer-events: none;\n`;\n\nconst Purposes = () => {\n return (\n <Container className=\"container-xl\" key=\"purposes\">\n <HeadingContainer>\n <Tag label=\"Purposes\" />\n <h2>\n Build DAO has three main purposes in one:\n <span>Everyone builds everything together!</span>\n </h2>\n <h3>\n Unite in purpose at Build DAO: crafting a global future, empowering\n builders, and fostering impactful projects collaboratively.\n </h3>\n </HeadingContainer>\n <StepContainer>\n <Step className=\"first\">\n <h4>1</h4>\n <div>\n <h5>To build a better future</h5>\n <p>for the open web worldwide</p>\n </div>\n </Step>\n <Step>\n <h4>2</h4>\n <div>\n <h5>To connect and empower </h5>\n <p>communities of builders to create anything useful</p>\n </div>\n </Step>\n <Step>\n <h4>3</h4>\n <div>\n <h5>Helping each other to create</h5>\n <p>successful projects with really positive impact</p>\n </div>\n </Step>\n </StepContainer>\n {/* <Banner>\n <div className=\"container z-2\">\n <h3>\n Your project & Everything.dev & <span>Create together.</span>\n </h3>\n <div className=\"right\">\n <p>\n Use a toolkit + workspaces using the app structure from{\" \"}\n <a href=\"https://everything.dev\" target=\"_blank\">\n Everything.dev\n </a>\n , with{\" \"}\n <span>\n flexible, customizable type system to support development of any\n & all open web things.\n </span>\n </p>\n <p className=\"fw-light\">\n Including SDKs, libraries, apps, docs, groups, etc.\n </p>\n </div>\n </div>\n <div className=\"z-2 mt-3 d-flex justify-content-center justify-content-md-start mt-md-4 position-relative\">\n <Button\n href={`https://near.social/hack.near/widget/app.create`}\n noLink={true}\n target=\"_blank\"\n style={{ width: 60, backgroundColor: \"#4A21A5\" }}\n >\n Try it\n </Button>\n </div>\n <GridImage src={gridLink} />\n </Banner> */}\n </Container>\n );\n};\n\nreturn { Purposes };\n" }, "Comment.Comment": { "": "const accountId = props.accountId;\nconst blockHeight =\n props.blockHeight === \"now\" ? \"now\" : parseInt(props.blockHeight);\nconst content =\n props.content ??\n JSON.parse(Social.get(`${accountId}/post/comment`, blockHeight) ?? \"null\");\nconst parentItem = content.item;\nconst highlight = !!props.highlight;\nconst raw = !!props.raw;\nconst groupId = props.groupId;\nconst groupIdLinkPart = groupId ? `&groupId=${groupId}` : \"\";\nconst permissions = props.permissions;\n\nconst extractNotifyAccountId = (item) => {\n if (!item || item.type !== \"social\" || !item.path) {\n return undefined;\n }\n const accountId = item.path.split(\"/\")[0];\n return `${accountId}/post/main` === item.path ? accountId : undefined;\n};\n\nconst link = `/mob.near/widget/MainPage.N.Comment.Page?accountId=${accountId}&blockHeight=${blockHeight}${groupIdLinkPart}`;\n\nconst item = {\n type: \"social\",\n path: `${accountId}/post/comment`,\n blockHeight,\n};\n\nconst StyledPost = styled.div`\n margin-bottom: 1rem;\n .post {\n border-radius: 16px;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n color: var(--font-muted-color, #b6b6b8);\n padding: 24px !important;\n background-color: var(--post-bg, #23242b);\n transition: all 300ms;\n\n &:hover {\n background-color: var(--post-bg-hover, #17181c) !important;\n .expand-post {\n background-image: linear-gradient(\n to bottom,\n var(--post-bg-hover-transparent, rgba(23, 24, 28, 0)),\n var(--post-bg-hover, #17181c) 25%\n ) !important;\n }\n }\n\n .post-header {\n span,\n .text-muted {\n color: var(--font-color, #fff) !important;\n }\n }\n\n .buttons {\n border-top: 1px solid #3c3d43;\n padding: 0.5rem;\n }\n\n .expand-post {\n background-image: linear-gradient(\n to bottom,\n var(--post-bg-transparent, rgba(35, 36, 43, 0)),\n var(--post-bg, rgba(35, 36, 43, 1)) 25%\n ) !important;\n }\n }\n\n .dropdown-menu {\n background-color: var(--post-bg, #000000) !important;\n color: var(--font-color, #fff) !important;\n\n li.dropdown-item {\n color: var(--font-color, #fff) !important;\n &:hover {\n a {\n color: var(--post-bg, #000000) !important;\n }\n }\n }\n\n .link-dark,\n .dropdown-item {\n color: var(--font-color, #fff) !important;\n\n &:hover {\n color: var(--post-bg, #000000) !important;\n\n span {\n color: var(--post-bg, #000000) !important;\n }\n }\n }\n }\n\n textarea {\n color: #b6b6b8 !important;\n }\n`;\n\nconst Wrapper = styled.div`\n margin: 0 -12px;\n line-height: normal;\n\n .post {\n position: relative;\n padding: 12px;\n padding-bottom: 4px;\n display: flex;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: 16px !important;\n }\n @media (max-width: 767px) {\n font-size: 15px !important;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: 15px !important;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n strong,\n b {\n font-weight: 500 !important;\n }\n ol,\n ul,\n dl {\n margin-bottom: 0.5rem;\n white-space: inherit;\n }\n p {\n margin-bottom: 0.5rem;\n }\n hr {\n display: none;\n }\n img {\n border-radius: var(--bs-border-radius-lg);\n max-height: 40em;\n }\n th {\n min-width: 5em;\n }\n\n .table > :not(caption) > * > * {\n padding: 0.3rem;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.03);\n .expand-post {\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0),\n rgba(247.35, 247.35, 247.35, 1) 25%\n );\n }\n }\n\n .post-header {\n margin: 4px 0;\n }\n }\n\n .post:not(:last-child):before {\n content: \"\";\n position: absolute;\n left: 30px;\n top: 56px;\n bottom: 0;\n width: 2px;\n background-color: #ddd;\n z-index: -1;\n }\n\n .post:not(:first-child):after {\n content: \"\";\n position: absolute;\n left: 30px;\n top: 0;\n width: 2px;\n height: 8px;\n background-color: #ddd;\n z-index: -1;\n }\n\n .right {\n flex-grow: 1;\n min-width: 0;\n }\n\n .buttons-placeholder {\n padding-bottom: 10px;\n }\n\n .buttons {\n margin-top: 10px;\n margin-bottom: 6px;\n column-gap: 4px;\n color: #888;\n }\n\n .reposted {\n padding-top: 30px;\n }\n`;\n\nreturn (\n <>\n <StyledPost\n className={`post ${highlight ? \"bg-warning bg-opacity-10\" : \"\"}`}\n >\n <div className=\"right\">\n <div className=\"mb-3\">\n <Widget\n src=\"buildhub.near/widget/components.post.Header\"\n props={{\n accountId,\n blockHeight,\n link,\n postType: \"comment\",\n flagItem: item,\n }}\n />\n </div>\n <Widget\n loading={\n <div\n className=\"overflow-hidden w-100 placeholder-glow\"\n style={{ minHeight: \"100px\" }}\n />\n }\n src=\"mob.near/widget/MainPage.N.Post.Content\"\n props={{ content, raw }}\n />\n {blockHeight !== \"now\" ? (\n <div className=\"buttons d-flex justify-content-between\">\n {parentItem && (\n <div key=\"comment\">\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.CommentButton\"\n props={{\n disabled: permissions.disableComment,\n onClick: () =>\n State.update({ showReply: !state.showReply }),\n }}\n />\n </div>\n )}\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.RepostButton\"\n props={{\n item,\n disabled: true,\n }}\n />\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.LikeButton\"\n props={{\n notifyAccountId,\n item,\n }}\n />\n <Widget\n loading=\"\"\n src=\"mob.near/widget/MainPage.N.Post.ShareButton\"\n props={{ accountId, blockHeight, postType: \"comment\", groupId }}\n />\n </div>\n ) : (\n <div className=\"buttons-placeholder\" />\n )}\n </div>\n </StyledPost>\n {state.showReply && (\n <div className=\"mb-2\" key=\"reply\">\n <Widget\n src=\"buildhub.near/widget/Comment.Compose\"\n props={{\n initialText: `@${accountId}, `,\n notifyAccountId: extractNotifyAccountId(parentItem),\n item: parentItem,\n onComment: () => State.update({ showReply: false }),\n }}\n />\n </div>\n )}\n </>\n);\n" }, "Resources": { "": "const { Header } = VM.require(\"buildhub.near/widget/components.Header\") || {\n Header: () => <></>,\n};\n\nconst { MarkdownView } = VM.require(\"buildhub.near/widget/md-view\") || {\n MarkdownView: () => <></>,\n};\n\nconst mdPath = props.mdPath;\n\nif (!mdPath) {\n return <p>No Markdown path configured</p>;\n}\n\nreturn (\n <div>\n <Header>{props.name}</Header>\n <MarkdownView path={mdPath} />\n </div>\n);\n" }, "N.Compose": { "": "if (!context.accountId) {\n return \"\";\n}\n\nconst indexKey = props.indexKey ?? \"main\";\nconst draftKey = props.draftKey ?? \"draft\";\nconst template = props.template || \"\";\nconst feed = props.feed;\nconst draft = Storage.privateGet(draftKey);\nconst groupId = props.groupId;\n\nif (draft === null) {\n return \"\";\n}\n\nconst [initialText] = useState(draft || template);\n\nfunction checkAndAppendHashtag(input, target) {\n if (input.toLowerCase().includes(`#${target.toLowerCase()}`)) {\n return input;\n } else {\n return input + ` #${target}`;\n }\n}\n\nconst composeData = () => {\n const text = state.content.text;\n\n const requiredHashtags = props.requiredHashtags || [\"build\"];\n if (feed.hashtag) requiredHashtags.push(feed.hashtag.toLowerCase());\n text = text + `\\n\\n`;\n requiredHashtags.forEach((hashtag) => {\n text = checkAndAppendHashtag(text, hashtag);\n });\n\n const data = {\n post: {\n main: JSON.stringify({ ...state.content, text }),\n },\n index: {\n post: JSON.stringify({\n key: indexKey,\n value: {\n type: \"md\",\n },\n }),\n },\n };\n\n const item = {\n type: \"social\",\n path: `${context.accountId}/post/main`,\n };\n\n const notifications = state.extractMentionNotifications(text, item);\n\n if (notifications.length) {\n data.index.notify = JSON.stringify(\n notifications.length > 1 ? notifications : notifications[0],\n );\n }\n\n const hashtags = state.extractHashtags(text);\n\n if (hashtags.length) {\n data.index.hashtag = JSON.stringify(\n hashtags.map((hashtag) => ({\n key: hashtag,\n value: item,\n })),\n );\n }\n\n return data;\n};\n\nState.init({\n showPreview: false,\n onChange: ({ content }) => {\n State.update({ content });\n Storage.privateSet(draftKey, content.text || \"\");\n },\n});\n\nreturn (\n <div\n data-bs-theme=\"dark\"\n style={{\n background: \"var(--bg-2, #2b2f31)\",\n borderRadius: \"1rem\",\n border: \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.2)\",\n marginBottom: \"1rem\",\n }}\n >\n <div>\n <Widget\n src=\"devs.near/widget/Common.Compose\"\n props={{\n placeholder: \"What's happening?\",\n onChange: state.onChange,\n initialText,\n onHelper: ({ extractMentionNotifications, extractHashtags }) => {\n State.update({ extractMentionNotifications, extractHashtags });\n },\n composeButton: (onCompose) => (\n <CommitButton\n disabled={!state.content || state.content.text === template}\n force\n className=\"btn rounded-3\"\n style={{\n backgroundColor: \"var(--yellow, #eca227)\",\n color: \"var(--button-primary-color, #000)\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n padding: \"10px 16px\",\n }}\n data={composeData}\n onCommit={() => {\n onCompose();\n }}\n >\n Post\n </CommitButton>\n ),\n previewButton: () => (\n <button\n disabled={!state.content || state.content.text === template}\n className=\"btn rounded-3 me-2\"\n style={{\n backgroundColor: \"var(--button-outline-bg, transparent)\",\n color: \"var(--button-outline-color, #fff)\",\n border:\n \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.2)\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n padding: \"10px 16px\",\n }}\n onClick={() => State.update({ showPreview: !state.showPreview })}\n >\n Preview <i className=\"bi bi-eye\"></i>\n </button>\n ),\n }}\n />\n </div>\n {state.content && state.showPreview && (\n <div className=\"px-3\">\n <Widget\n key=\"post-preview\"\n src=\"buildhub.near/widget/components.Post\"\n props={{\n accountId: context.accountId,\n content: state.content || { type: \"md\", text: \"\" },\n blockHeight: \"now\",\n noBorder: true,\n }}\n />\n </div>\n )}\n </div>\n);\n" }, "Proposals": { "": "const { Button, Modal } = VM.require(\"buildhub.near/widget/components\") || {\n Button: <></>,\n Modal: <></>,\n};\nconst DaoSDK = VM.require(\"sdks.near/widget/SDKs.Sputnik.DaoSDK\") || (() => {});\n\nif (!DaoSDK) {\n return <></>;\n}\n\nconst NotificationModalContainer = styled.div`\n .pb-4 {\n padding-bottom: 0px !important;\n }\n`;\n\nconst resPerPage = 10;\nconst daoId = props.daoId ?? \"build.sputnik-dao.near\";\nconst proposalId = props.proposalId ?? null;\nconst sdk = DaoSDK(daoId);\nconst [currentPage, setCurrentPage] = useState(0);\nconst accountId = context.accountId;\n\nconst [showProposalModal, setShowModal] = useState(false);\nconst [showNotificationModal, setNotificationModal] = useState(false);\nconst [voteDetails, setVoteDetails] = useState(null);\nconst [showCreateProposalModal, setShowCreateProposalModal] = useState(false);\nconst [showFiltersModal, setFiltersModal] = useState(false);\n\nconst [selectedTypes, setSelectedTypes] = useState([]);\nconst [selectedStatus, setSelectedStatus] = useState([]);\nconst [proposals, setProposals] = useState([]);\nconst [filteredProposals, setFilteredProposals] = useState([]);\nconst [filteredLength, setFilteredLength] = useState(null);\n\nconst lastProposalId = sdk.getLastProposalId();\nconst reversedProposals = proposalId\n ? [\n sdk.getProposalById({\n proposalId,\n }),\n ] || []\n : sdk.getProposals({\n offset:\n currentPage === 0\n ? lastProposalId > resPerPage\n ? lastProposalId - resPerPage\n : 0\n : lastProposalId - currentPage * resPerPage,\n limit: resPerPage,\n }) || [];\n\nsetProposals(reversedProposals.reverse());\n\nconst PaginationThemeContainer = props.PaginationThemeContainer;\n\nconst ThemeContainer =\n props.ThemeContainer ||\n styled.div`\n --primary-bg-color: #23242b;\n --secondary-bg-color: #ffffff1a;\n --primary-border-color: #fff;\n --primary-text-color: #ffffff;\n --secondary-text-color: #b0b0b0;\n --primary-btn-bg-color: #eca227;\n --primary-btn-text-color: #000;\n --approve-bg-color: #82e299;\n --reject-bg-color: #c23f38;\n --spam-bg-color: #f5c518;\n --vote-button-color: #ffffff;\n --success-badge-bg-color: #38c7931a;\n --success-badge-text-color: #38c793;\n --primary-badge-bg-color: #eca22733;\n --primary-badge-text-color: #eca227;\n --info-badge-bg-color: #51b6ff33;\n --info-badge-text-color: #51b6ff;\n --danger-badge-bg-color: #fd2a5c1a;\n --danger-badge-text-color: #fd2a5c;\n --black-badge-bg-color: #ffffff1a;\n --black-badge-text-color: #fff;\n `;\n\nconst Container = styled.div`\n .ndc-card {\n border: none;\n background-color: var(--primary-bg-color);\n color: var(--primary-text-color) !important;\n padding: 2rem;\n }\n`;\n\nconst NotificationModal = () => {\n return (\n <NotificationModalContainer>\n <Modal\n open={showNotificationModal}\n title={\"Send Notification\"}\n onOpenChange={() => {}}\n hideCloseBtn={true}\n >\n <div className=\"ndc-card d-flex flex-column gap-3 p-4\">\n Do you want to notify proposer: {proposer} about the vote?\n <div className=\"d-flex gap-3 justify-content-end\">\n <Button\n variant=\"outline danger\"\n onClick={() => {\n handleVote({\n action: voteDetails.action,\n daoId,\n proposalId: voteDetails.proposalId,\n proposer: voteDetails.proposer,\n showNotification: false,\n });\n setNotificationModal(false);\n }}\n >\n No\n </Button>\n <Button\n variant=\"primary\"\n onClick={() => {\n handleVote({\n action: voteDetails.action,\n daoId,\n proposalId: voteDetails.proposalId,\n proposer: voteDetails.proposer,\n showNotification: true,\n });\n setNotificationModal(false);\n }}\n >\n Yes\n </Button>\n </div>\n </div>\n </Modal>\n </NotificationModalContainer>\n );\n};\n\nconst handleVote = ({ action, proposalId, proposer, showNotification }) => {\n const customAction = action.replace(\"Vote\", \"\");\n const notification = {\n [accountId]: {\n index: {\n notify: JSON.stringify([\n {\n key: proposer,\n value: {\n message: `${accountId} voted to ${customAction} your proposal for ${daoId} (Proposal ID: ${proposalId})`,\n params: {\n daoId: daoId,\n proposalId: proposalId,\n },\n type: \"custom\",\n widget: \"buildhub.near/widget/Proposals\",\n },\n },\n ]),\n },\n },\n };\n\n sdk.actProposal({\n proposalId,\n action,\n gas: 200000000000000,\n additionalCalls: showNotification\n ? [\n {\n contractName: \"social.near\",\n methodName: \"set\",\n args: {\n data: notification,\n options: { refund_unused_deposit: true },\n },\n deposit: 100000000000000000000000,\n },\n ]\n : null,\n });\n};\n\nconst policy = sdk.getPolicy();\nconst proposalKinds = sdk.proposalKinds;\nconst actions = sdk.voteActions;\nconst userRoles = [];\nif (Array.isArray(policy.roles)) {\n for (const role of policy.roles) {\n if (role.kind === \"Everyone\") {\n userRoles.push(role);\n continue;\n }\n if (!role.kind.Group) continue;\n if (accountId && role.kind.Group && role.kind.Group.includes(accountId)) {\n userRoles.push(role);\n }\n }\n}\n\nconst proposalPeriod = policy.proposal_period;\n\nuseEffect(() => {\n if (selectedStatus.length > 0 || selectedTypes.length > 0) {\n const offset =\n currentPage === 0\n ? lastProposalId > resPerPage\n ? lastProposalId - resPerPage\n : lastProposalId ?? resPerPage\n : filteredProposals[0].id - currentPage * resPerPage;\n\n sdk\n .getFilteredProposalsByStatusAndkind({\n resPerPage,\n reverse: true,\n filterStatusArray: selectedStatus,\n filterKindArray: selectedTypes,\n offset: offset,\n })\n .then(({ filteredProposals, totalLength }) => {\n setFilteredProposals(filteredProposals);\n setFilteredLength(totalLength);\n });\n } else if (filteredProposals.length) {\n setFilteredProposals([]);\n setFilteredLength(null);\n }\n}, [selectedStatus, selectedTypes, currentPage]);\n\nconst proposalsComponent = useMemo(() => {\n const proposalsToShow =\n selectedStatus.length > 0 || selectedTypes.length > 0\n ? Array.isArray(filteredProposals)\n ? filteredProposals\n : []\n : Array.isArray(proposals)\n ? proposals\n : [];\n return (\n <div className=\"d-flex flex-column gap-2\">\n {proposalsToShow.length > 0 ? (\n proposalsToShow.map((item) => {\n const kindName =\n typeof item.kind === \"string\"\n ? item.kind\n : Object.keys(item.kind)[0];\n\n const comments = sdk.getCommentsByProposalId({ proposalId: item.id });\n\n const isAllowedToVote = [\n sdk.hasPermission({\n accountId,\n kindName,\n actionType: actions.VoteApprove,\n }),\n sdk.hasPermission({\n accountId,\n kindName,\n actionType: actions.VoteReject,\n }),\n\n sdk.hasPermission({\n accountId,\n kindName,\n actionType: actions.VoteRemove,\n }),\n ];\n\n const { thresholdVoteCount } =\n sdk.getVotersAndThresholdForProposalKind({\n kindName,\n });\n const totalVotes = sdk.calculateVoteCountByType({\n votes: item.votes,\n });\n let expirationTime = sdk.getProposalExpirationTime({\n submissionTime: item.submission_time,\n });\n\n return (\n <Widget\n src=\"buildhub.near/widget/components.ProposalCard\"\n props={{\n proposalData: {\n ...item,\n typeName: kindName.replace(/([A-Z])/g, \" $1\").trim(),\n totalVotesNeeded: thresholdVoteCount,\n totalVotes: {\n ...totalVotes,\n yes: totalVotes.approve,\n no: totalVotes.reject,\n },\n expirationTime,\n },\n daoId: daoId,\n comments: comments,\n isAllowedToVote,\n handleVote: (data) => {\n setVoteDetails(data);\n setNotificationModal(true);\n },\n }}\n />\n );\n })\n ) : (\n <>No proposals found.</>\n )}\n </div>\n );\n}, [proposals, filteredProposals]);\n\nreturn (\n <ThemeContainer>\n <Container className=\"d-flex flex-column gap-4\">\n <Widget\n src=\"buildhub.near/widget/components.modals.CreateProposal\"\n props={{\n showModal: showProposalModal,\n toggleModal: () => setShowModal(!showProposalModal),\n }}\n />\n <Widget\n src=\"buildhub.near/widget/components.modals.ProposalsFilters\"\n props={{\n parentSelectedTypes: selectedTypes,\n parentSelectedStatus: selectedStatus,\n applyFilters: ({ selectedStatus, selectedTypes }) => {\n setCurrentPage(0);\n setSelectedStatus(selectedStatus);\n setSelectedTypes(selectedTypes);\n },\n showModal: showFiltersModal,\n toggleModal: () => setFiltersModal(!showFiltersModal),\n }}\n />\n <div className=\"d-flex align-items-center flex-wrap gap-3 justify-content-between\">\n <h3 className=\"text-white m-0\">Proposals</h3>\n <div className=\"d-flex align-items-center gap-3\">\n <Button variant=\"outline\" onClick={() => setFiltersModal(true)}>\n Filters\n </Button>\n <Button\n variant=\"primary\"\n disabled={!context.accountId}\n onClick={() => setShowModal(true)}\n >\n Create Proposal\n </Button>\n </div>\n </div>\n <NotificationModal />\n <div className=\"d-flex flex-column gap-4\">{proposalsComponent}</div>\n {!proposalId && (\n <div className=\"d-flex justify-content-center my-4\">\n <Widget\n src={\"buildhub.near/widget/components.Pagination\"}\n props={{\n maxVisiblePages: 5,\n totalPages:\n selectedStatus.length > 0 || selectedTypes.length > 0\n ? Math.round(filteredLength / resPerPage)\n : Math.round(lastProposalId / resPerPage),\n onPageClick: (v) => setCurrentPage(v),\n selectedPage: currentPage,\n ThemeContainer: PaginationThemeContainer,\n }}\n />\n </div>\n )}\n </Container>\n </ThemeContainer>\n);\n" }, "components.buttons.UserDropdown": { "": "const StyledDropdown = styled.div`\n button,\n a {\n font-weight: 500;\n }\n .dropdown-toggle {\n display: flex;\n align-items: center;\n text-align: left;\n background-color: #23242b;\n border-radius: 8px;\n color: #fff;\n outline: none;\n border: 0;\n padding: 4px 8px;\n\n &:after {\n margin: 0 15px;\n border-top-color: #9ba1a6;\n }\n\n img {\n border-radius: 50% !important;\n }\n\n .profile-info {\n margin: 5px 10px;\n margin-right: 0;\n line-height: normal;\n max-width: 100px;\n\n .profile-name,\n .profile-username {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .profile-name {\n color: #ecedee;\n }\n .profile-username {\n color: #9ba1a6;\n }\n }\n }\n\n ul {\n background-color: #23242b;\n width: 100%;\n width: 210px;\n\n li {\n padding: 0 6px;\n }\n\n button,\n a {\n color: #9ba1a6;\n display: flex;\n align-items: center;\n border-radius: 8px;\n padding: 12px;\n\n :hover,\n :focus {\n text-decoration: none;\n background-color: #151718;\n color: white;\n\n svg {\n path {\n stroke: white;\n }\n }\n }\n\n svg {\n margin-right: 7px;\n min-width: 24px;\n path {\n stroke: #0091ff;\n }\n }\n }\n }\n`;\n\nfunction User() {\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.25 8C15.25 9.79493 13.7949 11.25 12 11.25C10.2051 11.25 8.75 9.79493 8.75 8C8.75 6.20507 10.2051 4.75 12 4.75C13.7949 4.75 15.25 6.20507 15.25 8Z\"\n stroke=\"#697177\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M6.84751 19.25H17.1525C18.2944 19.25 19.174 18.2681 18.6408 17.2584C17.8563 15.7731 16.068 14 12 14C7.93201 14 6.14367 15.7731 5.35924 17.2584C4.82597 18.2681 5.70559 19.25 6.84751 19.25Z\"\n stroke=\"#697177\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nfunction LogOut() {\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.75 8.75L19.25 12L15.75 15.25\"\n stroke=\"#697177\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M19 12H10.75\"\n stroke=\"#697177\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M15.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H15.25\"\n stroke=\"#697177\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nconst { href } = VM.require(\"buildhub.near/widget/lib.url\") || {\n href: () => {},\n};\n\nreturn (\n <StyledDropdown className=\"dropdown\">\n <button\n className=\"dropdown-toggle\"\n type=\"button\"\n id=\"dropdownMenu2222\"\n data-bs-toggle=\"dropdown\"\n aria-expanded=\"false\"\n >\n <div>\n <Widget\n src={\"mob.near/widget/ProfileImage\"}\n props={{\n accountId: context.accountId,\n className: \"d-inline-block\",\n style: { width: \"24px\", height: \"24px\" },\n }}\n />\n </div>\n <div className=\"profile-info\">\n <div className=\"profile-username\">{context.accountId}</div>\n </div>\n </button>\n <ul className=\"dropdown-menu\" aria-labelledby=\"dropdownMenu2222\">\n <li>\n <Link\n className=\"dropdown-item\"\n type=\"button\"\n to={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"profile\",\n accountId: context.accountId,\n },\n })}\n >\n <User />\n My Profile\n </Link>\n </li>\n {props.logOut && (\n <li>\n <button\n className=\"dropdown-item\"\n type=\"button\"\n onClick={() => props.logOut()}\n >\n <LogOut />\n Sign Out\n </button>\n </li>\n )}\n </ul>\n </StyledDropdown>\n);\n" }, "components.ThemeProvider": { "": "const colors = {\n yellow500: \"#eca227\",\n seablue500: \"#51FFEA\",\n blue500: \"#51B6FF\",\n bg1: \"#000000\",\n bg2: \"#23242B\",\n black100: \"#000000\",\n black50: \"Black/50\",\n white100: \"#FFFFFF\",\n white50: \"White/50\",\n error: \"#FD2A5C\",\n success: \"#38C793\",\n warning: \"#F17B2C\",\n};\n\nStorage.set(\"theme\", { colors });\n\nconst theme = Storage.get(\"theme\");\n\nreturn { theme };\n" }, "app": { "": "const { page, tab, ...passProps } = props;\n\nconst { routes } = VM.require(\"buildhub.near/widget/config.app\") ?? {\n routes: {},\n};\n\nconst { AppLayout } = VM.require(\"buildhub.near/widget/template.AppLayout\") || {\n AppLayout: () => <></>,\n};\n\nif (!page) page = Object.keys(routes)[0] || \"home\";\n\nconst Root = styled.div`\n --stroke-color: rgba(255, 255, 255, 0.2);\n --bg-1: #000;\n --bg-1-hover: #010002;\n --bg-1-hover-transparent: rgba(13, 2, 15, 0);\n --bg-2: #23242b;\n --label-color: #fff;\n --font-color: #fff;\n --font-muted-color: #cdd0d5;\n --black: #000;\n --system-red: #fd2a5c;\n --yellow: #eca227;\n\n --compose-bg: #23242b;\n\n --post-bg: #23242b;\n --post-bg-hover: #1d1f25;\n --post-bg-transparent: rgba(23, 24, 28, 0);\n\n --button-primary-bg: #eca227;\n --button-outline-bg: transparent;\n --button-default-bg: #23242b;\n\n --button-primary-color: #000;\n --button-outline-color: #fff;\n --button-default-color: #fff;\n\n --button-primary-hover-bg: #e49b48;\n --button-outline-hover-bg: rgba(255, 255, 255, 0.2);\n --button-default-hover-bg: #17181c;\n\n /* Poppins Font */\n @font-face {\n font-family: \"Poppins\";\n font-weight: 100;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 200;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 300;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 800;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n @font-face {\n font-family: \"Poppins\";\n font-weight: 900;\n font-style: normal;\n src: url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot\");\n src:\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot?#iefix\")\n format(\"embedded-opentype\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff\")\n format(\"woff\"),\n url(\"https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.ttf\")\n format(\"truetype\");\n font-display: swap;\n }\n\n /* Inter Font */\n @font-face {\n font-family: InterVariable;\n font-style: normal;\n font-weight: 100 900;\n font-display: swap;\n src: url(\"https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0\")\n format(\"woff2\");\n }\n @font-face {\n font-family: InterVariable;\n font-style: italic;\n font-weight: 100 900;\n font-display: swap;\n src: url(\"https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0\")\n format(\"woff2\");\n }\n`;\n\nfunction Router({ active, routes }) {\n // this may be converted to a module at devs.near/widget/Router\n const routeParts = active.split(\".\");\n\n let currentRoute = routes;\n let src = \"\";\n let defaultProps = {};\n\n for (let part of routeParts) {\n if (currentRoute[part]) {\n currentRoute = currentRoute[part];\n src = currentRoute.path;\n\n if (currentRoute.init) {\n defaultProps = { ...defaultProps, ...currentRoute.init };\n }\n } else {\n // Handle 404 or default case for unknown routes\n return <p>404 Not Found</p>;\n }\n }\n\n return (\n <div key={active}>\n <Widget\n src={src}\n props={{\n currentPath: `/buildhub.near/widget/app?page=${page}`,\n page: tab,\n ...passProps,\n ...defaultProps,\n }}\n />\n </div>\n );\n}\n\nconst Container = styled.div`\n display: flex;\n height: 100%;\n font-family: InterVariable, sans-serif;\n`;\n\nconst Content = styled.div`\n width: 100%;\n height: 100%;\n`;\n\nreturn (\n <Root>\n <Container>\n <AppLayout page={page} routes={routes} {...props}>\n <Content>\n <Router active={page} routes={routes} />\n </Content>\n </AppLayout>\n </Container>\n </Root>\n);\n" }, "propose": { "": "const [view, setView] = useState(\"selection\");\nconst [selection, setSelection] = useState(0);\n\nconst Container = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n\n background: #000000;\n color: #fff;\n`;\n\nconst Card = styled.div`\n display: flex;\n padding: 80px 24px;\n max-width: 500px;\n width: 100%;\n flex-direction: column;\n align-items: center;\n gap: 40px;\n\n h1 {\n color: var(--white-100, #fff);\n text-align: center;\n\n /* H1/small */\n font-size: 32px;\n font-style: normal;\n font-weight: 500;\n line-height: 100%; /* 32px */\n }\n\n span.disabled {\n cursor: not-allowed !important;\n }\n\n input {\n border-radius: 4px;\n border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));\n\n padding: 12px;\n\n color: var(--white-50, rgba(255, 255, 255, 0.7));\n /* Body/Small */\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 23.8px */\n\n background-color: #000000;\n }\n\n .form-control:focus {\n color: var(--white-50, rgba(255, 255, 255, 0.7));\n background-color: #000000;\n }\n\n input::placeholder {\n color: var(--white-50, rgba(255, 255, 255, 0.7));\n /* Body/Small */\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 23.8px */\n }\n\n a {\n display: flex;\n padding: 10px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n\n border-radius: 8px;\n background: var(--Yellow, #eca227);\n\n color: var(--black-100, #000) !important;\n\n ${selection === 0 && \"pointer-events: none;\"}\n\n /* Other/Button_text */\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n\n &:hover {\n text-decoration: none;\n }\n }\n`;\n\nconst Box = styled.div`\n display: flex;\n width: 200px;\n padding: 40px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n\n border-radius: 16px;\n background: var(--bg-2, #23242b);\n\n cursor: pointer;\n\n h3 {\n color: var(--white-100, #fff);\n\n /* H3/Small */\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: 140%; /* 28px */\n }\n`;\n\nconst SelectionBox = ({ title, selected, value }) => {\n return (\n <Box onClick={() => setSelection(value)}>\n {selected ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z\"\n fill=\"#eca227\"\n />\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"\n fill=\"white\"\n />\n </svg>\n )}\n <h3>{title}</h3>\n </Box>\n );\n};\n\nreturn (\n <Container>\n <Card>\n {view === \"selection\" ? (\n <>\n <h1>What would you like to do?</h1>\n <div className=\"d-flex flex-wrap align-items-center justify-content-center gap-4\">\n <SelectionBox\n title={\"Make changes to the existing page\"}\n selected={selection === 1}\n value={1}\n />\n <SelectionBox\n title={\"Propose a new page\"}\n selected={selection === 2}\n value={2}\n />\n </div>\n <span className={`${selection === 0 && \"disabled\"}`}>\n <Link\n href={selection === 1 ? \"/edit\" : \"#\"}\n onClick={() => selection === 2 && setView(\"proposal\")}\n >\n Continue{\" \"}\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"17\"\n viewBox=\"0 0 16 17\"\n fill=\"none\"\n >\n <path\n d=\"M10.7814 7.83327L7.20539 4.25726L8.14819 3.31445L13.3337 8.49993L8.14819 13.6853L7.20539 12.7425L10.7814 9.1666H2.66699V7.83327H10.7814Z\"\n fill=\"black\"\n />\n </svg>\n </Link>\n </span>\n </>\n ) : (\n <Widget src=\"buildhub.near/widget/propose-widget\" />\n )}\n </Card>\n </Container>\n);\n" }, "components.Header": { "": "const Container = styled.div`\n border-radius: 16px;\n border: 1px solid var(--23242-b, #23242b);\n background: var(--000000, #000);\n\n height: 75px;\n padding: 0 32px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n h2 {\n color: #fff;\n text-align: center;\n font-family: Poppins;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n margin: 0;\n text-transform: capitalize;\n }\n\n @media screen and (max-width: 768px) {\n height: 64px;\n padding: 0 16px;\n\n h2 {\n font-size: 16px;\n }\n }\n`;\n\nconst Header = ({ children }) => {\n return (\n <Container>\n <h2>{children}</h2>\n </Container>\n );\n};\n\nreturn { Header };\n" }, "login": { "": "const LoginContainer = styled.div`\n background-color: #000000;\n color: #fff;\n height: 100%;\n\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 100%;\n max-height: 100vh;\n object-fit: cover;\n object-position: center top;\n position: absolute;\n top: 0%;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .card {\n z-index: 5;\n background: transparent;\n display: flex;\n max-width: 500px;\n width: 100%;\n max-height: 550px;\n padding: 80px 24px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 40px;\n\n img {\n width: auto;\n height: 54px;\n object-fit: cover;\n }\n\n h1 {\n color: var(--white-100, #fff);\n text-align: center;\n\n /* H1/small */\n font-size: 2rem;\n font-style: normal;\n font-weight: 500;\n line-height: 100%; /* 32px */\n }\n\n button {\n all: unset;\n cursor: pointer;\n display: flex;\n padding: 16px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n\n border-radius: 8px;\n background: #eca227;\n\n &:hover {\n background: #e49b48;\n }\n\n color: var(--black-100, #000);\n\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n }\n }\n`;\n\nconst LoginView = () => {\n return (\n <LoginContainer>\n <div className=\"card\">\n <img\n src=\"https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya\"\n alt=\"Build DAO Logo\"\n />\n <h1>\n Designed to connect and empower builders in a multi-chain ecosystem\n </h1>\n <button onClick={props.requestSignIn}>Login</button>\n </div>\n <img\n src=\"https://ipfs.near.social/ipfs/bafybeibqnkvafyflci4iap73prugmjw4wlwmrazbiudvnsyr34yzmk75i4\"\n alt=\"Preview of Profiles\"\n />\n </LoginContainer>\n );\n};\n\nreturn <LoginView />;\n" }, "home.Home": { "": "const { Hero } = VM.require(\"buildhub.near/widget/home.Hero\");\nconst { Goals } = VM.require(\"buildhub.near/widget/home.Goals\");\nconst { Join } = VM.require(\"buildhub.near/widget/home.Join\");\nconst { Purposes } = VM.require(\"buildhub.near/widget/home.Purposes\");\nconst { AboutUs } = VM.require(\"buildhub.near/widget/home.AboutUs\");\nconst { Governance } = VM.require(\"buildhub.near/widget/home.Governance\");\nconst { Footer } = VM.require(\"buildhub.near/widget/home.Footer\");\n\nreturn {\n Hero,\n Goals,\n Join,\n Purposes,\n AboutUs,\n Governance,\n Footer,\n};\n" }, "page.home": { "": "const { Hero, Goals, Join, Purposes, AboutUs, Governance, Footer } = VM.require(\n \"buildhub.near/widget/home.Home\",\n) || {\n Hero: () => <></>,\n Goals: () => <></>,\n Join: () => <></>,\n Purposes: () => <></>,\n AboutUs: () => <></>,\n Governance: () => <></>,\n Footer: () => <></>,\n};\n\nconst Root = styled.div`\n background-color: var(--bg-1, #000);\n color: var(--text-color, #fff);\n width: 100%;\n`;\n\nreturn (\n <Root>\n <Hero {...props} />\n {/* <Goals /> */}\n {/* <Join /> */}\n <Purposes />\n {/* <AboutUs /> */}\n <Governance />\n <Footer />\n </Root>\n);\n" }, "components.InputField": { "": "const InputContainer = styled.div`\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n`;\n\nconst Label = styled.label`\n color: var(--label-color, #fff);\n\n /* Body/16px */\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n`;\n\nconst Input = styled.input`\n display: flex;\n width: 100%;\n padding: 12px;\n align-items: flex-start;\n gap: 10px;\n\n border-radius: 8px;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n background: var(--bg-1, #000000);\n\n flex: 1 0 0;\n\n color: var(--font-muted-color, #cdd0d5);\n\n /* Body/16px */\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n`;\n\nfunction InputField({\n type,\n label,\n key,\n placeholder,\n value,\n onChange,\n maxWidth,\n}) {\n return (\n <InputContainer\n key={`input-container-${key}`}\n style={{ maxWidth: maxWidth ?? \"390px\" }}\n >\n {label && <Label>{label}</Label>}\n <Input\n key={`input-field-${key}`}\n value={value}\n onChange={onChange}\n placeholder={placeholder}\n type={type ?? \"text\"}\n style={{ maxWidth: maxWidth ?? \"390px\" }}\n />\n </InputContainer>\n );\n}\n\nreturn { InputField };\n" }, "components.Hashtag": { "": "const StyledHashtag = styled.span`\n display: flex;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 4px;\n flex-wrap: wrap;\n\n border-radius: 2px;\n border: 1px solid var(--Yellow, #eca227);\n\n color: var(--White-100, #fff);\n\n /* Body/10px */\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n\n .tag {\n color: var(--Yellow, #eca227);\n }\n`;\nconst Hashtag = ({ children }) => {\n return (\n <StyledHashtag>\n <span className=\"tag\">#</span> {children}\n </StyledHashtag>\n );\n};\n\nreturn { Hashtag };\n" }, "components.Post": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst StyledPost = styled.div`\n margin-bottom: 1rem;\n .post {\n border-radius: 16px;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n color: var(--font-muted-color, #b6b6b8);\n padding: 24px !important;\n background-color: var(--post-bg, #23242b);\n transition: all 300ms;\n\n &:hover {\n background-color: var(--post-bg-hover, #17181c) !important;\n .expand-post {\n background-image: linear-gradient(\n to bottom,\n var(--post-bg-hover-transparent, rgba(23, 24, 28, 0)),\n var(--post-bg-hover, #17181c) 25%\n ) !important;\n }\n }\n\n .post-header {\n span,\n .text-muted {\n color: var(--font-color, #fff) !important;\n }\n }\n\n .buttons {\n border-top: 1px solid #3c3d43;\n padding: 0.5rem;\n }\n\n .expand-post {\n background-image: linear-gradient(\n to bottom,\n var(--post-bg-transparent, rgba(35, 36, 43, 0)),\n var(--post-bg, rgba(35, 36, 43, 1)) 25%\n ) !important;\n }\n }\n\n .dropdown-menu {\n background-color: var(--post-bg, #000000) !important;\n color: var(--font-color, #fff) !important;\n\n li.dropdown-item {\n color: var(--font-color, #fff) !important;\n &:hover {\n a {\n color: var(--post-bg, #000000) !important;\n }\n }\n }\n\n .link-dark,\n .dropdown-item {\n color: var(--font-color, #fff) !important;\n\n &:hover {\n color: var(--post-bg, #000000) !important;\n\n span {\n color: var(--post-bg, #000000) !important;\n }\n }\n }\n }\n\n textarea {\n color: #b6b6b8 !important;\n }\n`;\n\nconst Wrapper = styled.div`\n margin: 0 -12px;\n line-height: normal;\n\n .post {\n position: relative;\n padding: 12px;\n padding-bottom: 4px;\n display: flex;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: 16px !important;\n }\n @media (max-width: 767px) {\n font-size: 15px !important;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: 15px !important;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n strong,\n b {\n font-weight: 500 !important;\n }\n ol,\n ul,\n dl {\n margin-bottom: 0.5rem;\n white-space: inherit;\n }\n p {\n margin-bottom: 0.5rem;\n }\n hr {\n display: none;\n }\n img {\n border-radius: var(--bs-border-radius-lg);\n max-height: 40em;\n }\n th {\n min-width: 5em;\n }\n\n .table > :not(caption) > * > * {\n padding: 0.3rem;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.03);\n .expand-post {\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0),\n rgba(247.35, 247.35, 247.35, 1) 25%\n );\n }\n }\n\n .post-header {\n margin: 4px 0;\n }\n }\n\n .post:not(:last-child):before {\n content: \"\";\n position: absolute;\n left: 30px;\n top: 56px;\n bottom: 0;\n width: 2px;\n background-color: #ddd;\n z-index: -1;\n }\n\n .post:not(:first-child):after {\n content: \"\";\n position: absolute;\n left: 30px;\n top: 0;\n width: 2px;\n height: 8px;\n background-color: #ddd;\n z-index: -1;\n }\n\n .left {\n margin-right: 12px;\n width: auto;\n overflow: hidden;\n }\n .right {\n margin-top: -4px;\n flex-grow: 1;\n min-width: 0;\n }\n\n .buttons-placeholder {\n padding-bottom: 10px;\n }\n\n .buttons {\n margin-top: 10px;\n margin-bottom: 6px;\n column-gap: 4px;\n color: #888;\n }\n\n .reposted {\n padding-top: 30px;\n }\n`;\n\nconst RepostWidgetDesktop = styled.div`\n @media screen and (max-width: 768px) {\n display: none;\n }\n`;\n\nconst RepostWidgetMobile = styled.div`\n display: none;\n @media screen and (max-width: 768px) {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n`;\nconst accountId = props.accountId;\nif (!accountId) {\n return \"No accountId\";\n}\nconst blockHeight =\n props.blockHeight === \"now\" ? \"now\" : parseInt(props.blockHeight);\nconst pinned = !!props.pinned;\nconst hideMenu = !!props.hideMenu;\nconst hideButtons = !!props.hideButtons;\nconst content =\n props.content ??\n JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? \"null\");\nconst subscribe = !!props.subscribe;\nconst raw = !!props.raw;\nconst groupId = props.groupId ?? content.groupId;\nconst indexKey = props.indexKey;\nconst permissions = props.permissions;\nconst fullPostLink = props.fullPostLink;\nconst customActions = props.customActions;\n\nconst notifyAccountId = accountId;\nconst item = {\n type: \"social\",\n path: `${accountId}/post/main`,\n blockHeight,\n};\n\nconst link =\n props.link ??\n props.fullPostLink ??\n `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;\n\nconst contentWidget = (\n <>\n <Widget\n key=\"content\"\n loading={\n <div\n className=\"overflow-hidden w-100 placeholder-glow\"\n style={{ minHeight: \"100px\" }}\n />\n }\n src=\"buildhub.near/widget/components.post.Content\"\n props={{\n content,\n raw,\n truncateContent: props.truncateContent,\n noEmbed: props.noEmbed,\n currentPath: props.currentPath,\n }}\n />\n <RepostWidgetMobile>\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.RepostButton\"\n props={{\n disable: permissions.disableRepost,\n notifyAccountId,\n item,\n // indexKey,\n // groupId,\n }}\n />\n <span>Repost Feed</span>\n </RepostWidgetMobile>\n </>\n);\n\nreturn (\n <>\n <StyledPost\n key={`Post-${item.path}-${item.blockHeight}`}\n style={{ width: props.width ? props.width : \"auto\" }}\n >\n <Wrapper\n className=\"w-100 mx-auto\"\n style={\n props.hideComments || props.noBorder\n ? undefined\n : {\n borderBottom: \"1px solid #eee\",\n }\n }\n >\n <div className={`post ${props.reposted ? \"reposted\" : \"\"}`}>\n <div className=\"right d-flex flex-column gap-3\">\n <Widget\n src=\"buildhub.near/widget/components.post.Header\"\n loading=\"\"\n props={{\n accountId: accountId,\n blockHeight: blockHeight,\n pinned: pinned,\n hideMenu: hideMenu,\n link: link,\n postType: \"post\",\n flagItem: item,\n customActions: customActions,\n modalToggles: props.modalToggles,\n setItem: props.setItem,\n }}\n />\n {fullPostLink ? (\n <a\n key=\"full-post-link\"\n target=\"_blank\"\n href={fullPostLink}\n className=\"text-decoration-none link-dark\"\n >\n {contentWidget}\n </a>\n ) : (\n contentWidget\n )}\n {props.customButtons ? (\n props.customButtons\n ) : !pinned && !hideButtons && blockHeight !== \"now\" ? (\n <div className=\"buttons d-flex justify-content-between\">\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.CommentButton\"\n props={{\n disabled: permissions.disableComment,\n onClick: () =>\n State.update({ showReply: !state.showReply }),\n }}\n />\n <RepostWidgetDesktop>\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.RepostButton\"\n props={{\n disable: permissions.disableRepost,\n notifyAccountId,\n item,\n // indexKey,\n // groupId,\n }}\n />\n </RepostWidgetDesktop>\n <Widget\n loading=\"\"\n src=\"mob.near/widget/N.LikeButton\"\n props={{\n notifyAccountId,\n item,\n }}\n />\n <Widget\n loading=\"\"\n src=\"buildhub.near/widget/components.post.BookmarkButton\"\n props={{\n item,\n }}\n />\n <Widget\n loading=\"\"\n src=\"mob.near/widget/MainPage.N.Post.ShareButton\"\n props={{ accountId, blockHeight, postType: \"post\", groupId }}\n />\n </div>\n ) : (\n <div className=\"buttons-placeholder\" />\n )}\n </div>\n </div>\n {state.showReply && (\n <div className=\"my-3\">\n <Widget\n loading=\"\"\n src=\"buildhub.near/widget/Comment.Compose\"\n props={{\n notifyAccountId,\n item,\n initialText: `@${accountId}, `,\n onComment: () => State.update({ showReply: false }),\n }}\n />\n </div>\n )}\n {props.customComments\n ? props.customComments\n : !props.hideComments && (\n <div\n className=\"ms-5 my-3 ps-4\"\n style={{\n border:\n \"2px solid var(--stroke-color, rgba(255, 255, 255, 0.2))\",\n borderTop: 0,\n borderRight: 0,\n borderBottom: 0,\n }}\n >\n <Widget\n key=\"comments\"\n loading={\"\"}\n src=\"buildhub.near/widget/Comment.Feed\"\n props={{\n item,\n highlightComment: props.highlightComment,\n limit: props.commentsLimit,\n subscribe,\n raw,\n accounts: props.commentAccounts,\n groupId,\n permissions,\n }}\n />\n </div>\n )}\n </Wrapper>\n </StyledPost>\n </>\n);\n" }, "Comment.Compose": { "": "if (!context.accountId) {\n return \"\";\n}\n\nconst item = props.item;\nconst rootItem = props.rootItem;\n\nif (!context.accountId) {\n return \"\";\n}\n\nconst composeData = () => {\n const data = {\n post: {\n comment: JSON.stringify(Object.assign({ item, rootItem }, state.content)),\n },\n index: {\n comment: JSON.stringify({\n key: item,\n value: {\n type: \"md\",\n },\n }),\n },\n };\n\n const thisItem = {\n type: \"social\",\n path: `${context.accountId}/post/comment`,\n };\n\n const notifications = state.extractMentionNotifications(\n state.content.text,\n thisItem,\n );\n\n if (props.notifyAccountId && props.notifyAccountId !== context.accountId) {\n notifications.push({\n key: props.notifyAccountId,\n value: {\n type: \"comment\",\n item,\n },\n });\n }\n\n if (notifications.length) {\n data.index.notify = JSON.stringify(\n notifications.length > 1 ? notifications : notifications[0],\n );\n }\n\n const hashtags = state.extractHashtags(state.content.text);\n\n if (hashtags.length) {\n data.index.hashtag = JSON.stringify(\n hashtags.map((hashtag) => ({\n key: hashtag,\n value: thisItem,\n })),\n );\n }\n\n return data;\n};\n\nState.init({\n onChange: ({ content }) => {\n State.update({ content });\n },\n});\n\nreturn (\n <>\n <Widget\n src=\"devs.near/widget/Common.Compose\"\n props={{\n placeholder: \"Reply\",\n initialText: props.initialText,\n onChange: state.onChange,\n onHelper: ({ extractMentionNotifications, extractHashtags }) => {\n State.update({ extractMentionNotifications, extractHashtags });\n },\n composeButton: (onCompose) => (\n <CommitButton\n disabled={!state.content || state.content.text === template}\n force\n className=\"btn rounded-3\"\n style={{\n backgroundColor: \"var(--yellow, #eca227)\",\n color: \"var(--button-primary-color, #000)\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n padding: \"10px 16px\",\n }}\n data={composeData}\n onCommit={() => {\n onCompose();\n props.onComment && props.onComment(state.content);\n }}\n >\n Comment\n </CommitButton>\n ),\n previewButton: () => (\n <button\n disabled={!state.content}\n className=\"btn rounded-3 me-2\"\n style={{\n backgroundColor: \"var(--button-outline-bg, transparent)\",\n color: \"var(--button-outline-color, #fff)\",\n border: \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.2)\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n padding: \"10px 16px\",\n }}\n onClick={() => State.update({ showPreview: !state.showPreview })}\n >\n Preview <i className=\"bi bi-eye\"></i>\n </button>\n ),\n }}\n />\n {state.content && state.showPreview && (\n <div className=\"px-3\">\n <Widget\n key=\"post-preview\"\n src=\"buildhub.near/widget/Comment.Comment\"\n props={{\n item,\n accountId: context.accountId,\n content: state.content,\n blockHeight: \"now\",\n }}\n />\n </div>\n )}\n </>\n);\n" }, "components.UploadField": { "": "const { Button } = VM.require(\"buildhub.near/widget/components.Button\") || {\n Button: () => <></>,\n};\n\nconst UploadContainer = styled.div`\n display: flex;\n max-width: 390px;\n min-height: 200px;\n width: 100%;\n height: 100%;\n padding: 24px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 24px;\n\n border-radius: 16px;\n border: 1px dashed var(--stroke-color, rgba(255, 255, 255, 0.2));\n background: ${(props) =>\n props.background ? \"var(--bg-2, #23242B)\" : \"var(--bg-1, #000000)\"};\n\n p {\n color: var(--font-color, #fff);\n text-align: center;\n\n /* Body/Medium-16px */\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n margin: 0;\n }\n\n p.secondary {\n color: var(--font-muted-color, #cdd0d5);\n text-align: center;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n }\n\n i {\n color: var(--font-color, #fff);\n font-size: 2rem;\n }\n`;\n\nfunction UploadField({ background }) {\n return (\n <UploadContainer background={background}>\n <i class=\"bi bi-cloud-upload\"></i>\n <div className=\"d-flex flex-column gap-2\">\n <p>Choose a file or drag & drop it here.</p>\n <p className=\"secondary\">\n JPEG, PNG, PDF, and MP4 formats, up to 50 MB.\n </p>\n </div>\n <Button\n variant=\"outline\"\n style={{ background: background && \"var(--bg-2,#23242B)\" }}\n >\n Browse Files\n </Button>\n </UploadContainer>\n );\n}\n\nreturn { UploadField };\n" }, "home.Goals": { "": "const { Tag } = VM.require(\"buildhub.near/widget/components\") || {\n Tag: () => <></>,\n};\n\nconst Container = styled.div`\n padding: 32px 48px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 50px;\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n }\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n\n h2 {\n color: var(--paleta-escolhida-ffffff, #fff);\n text-align: center;\n font-family: \"Poppins\", sans-serif;\n\n font-size: 48px;\n line-height: 56px; /* 116.667% */\n text-wrap: balance;\n\n span {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-weight: 600;\n }\n }\n\n h3 {\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n font-size: 24px;\n font-weight: 500;\n line-height: 140%; /* 33.6px */\n font-family: \"InterVariable\", sans-serif;\n margin: 0;\n text-align: center;\n }\n\n @media screen and (max-width: 768px) {\n h2 {\n font-size: 24px;\n line-height: 130%; /* 31.2px */\n }\n\n h3 {\n font-size: 14px;\n }\n }\n`;\n\nconst GoalsContainer = styled.div`\n display: grid;\n gap: 32px;\n\n grid-template-columns: repeat(2, minmax(0, 1fr));\n\n @media screen and (max-width: 768px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n gap: 20px;\n }\n`;\n\nconst GridItem = styled.div`\n display: flex;\n grid-column: span 1 / span 2;\n padding: 32px 56px;\n flex-direction: column;\n gap: 12px;\n flex: 1 0 0;\n\n border-radius: 16px;\n border: 1px solid var(--White-50, #b0b0b0);\n background: var(--000000, #000);\n\n &.first {\n display: flex;\n grid-column: span 2 / span 2;\n padding: 32px 56px;\n\n border-radius: 16px;\n border: 1px solid var(--Gradient-1, #4a21a5);\n background: var(--000000, #000);\n\n .heading {\n font-size: 40px;\n }\n\n overflow: hidden;\n }\n\n .category {\n color: var(--eca-227, #eca227);\n font-size: 14px;\n font-weight: 400;\n line-height: 160%; /* 22.4px */\n font-family: \"Poppins\", sans-serif;\n text-transform: uppercase;\n margin: 0;\n }\n\n .heading {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-size: 32px;\n font-weight: 400;\n font-family: \"Poppins\", sans-serif;\n margin: 0%;\n z-index: 2;\n\n span {\n color: var(--b-0-b-0-b-0, #b0b0b0);\n }\n }\n\n .content {\n margin: 0;\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n font-size: 16px;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-weight: 400;\n line-height: 140%; /* 22.4px */\n z-index: 2;\n }\n\n @media screen and (max-width: 768px) {\n padding: 24px 16px;\n gap: 8px;\n\n &.first {\n grid-column: span 1 / span 2;\n padding: 24px 16px;\n\n img {\n height: 50%;\n width: 50%;\n object-fit: cover;\n z-index: 1;\n }\n }\n\n .category {\n font-size: 10px;\n }\n\n .heading {\n font-size: 22px !important;\n }\n\n .content {\n font-size: 12px;\n line-height: 140%;\n }\n }\n`;\n\nconst Goals = () => {\n return (\n <Container className=\"container-xl\">\n <HeadingContainer>\n <Tag label=\"Goals\" />\n <h2>\n NEAR Builders Cooperative is a support system, owned and governed{\" \"}\n <span>by members of Build DAO.</span>\n </h2>\n <h3>\n Charting the Course: Primary Objectives Guiding the DAO's Mission\n </h3>\n </HeadingContainer>\n <GoalsContainer>\n <GridItem className=\"first position-relative\">\n <h6 className=\"category\">Development</h6>\n <h4 className=\"heading\">\n Support <span>Builders</span>\n </h4>\n <p className=\"content\">\n The core mission is to build open-source infrastructure and web\n applications for everyone. By creating systems to reward useful\n contributions, we can grow successful projects that solve problems\n and generate sustainable value.\n </p>\n <img\n src=\"https://ipfs.near.social/ipfs/bafkreictjgfbnpeytoy6mnbkpjajsxfp5bznh7uclyrtff4jcr4klkwtvm\"\n className=\"position-absolute top-0 end-0\"\n />\n </GridItem>\n <GridItem>\n <h6 className=\"category\">Education</h6>\n <h4 className=\"heading\">Learn Together</h4>\n <p className=\"content\">\n We are cultivating a worldwide community of builders who are\n motivated to help others. Members can earn badges and get necessary\n resources for training potential contributors.\n </p>\n </GridItem>\n <GridItem>\n <h6 className=\"category\">Community</h6>\n <h4 className=\"heading\">Facilitate Governance</h4>\n <p className=\"content\">\n We introduced on-chain feedback channels to gather input from\n participants. This will be crucial for understanding common issues,\n optimizing documentation, and improving quality of experience.\n </p>\n </GridItem>\n </GoalsContainer>\n </Container>\n );\n};\n\nreturn { Goals };\n" }, "events.Calendar": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst { fetchThings } = VM.require(\n \"buildhub.near/widget/lib.everything-sdk\",\n) || {\n fetchThings: () => {},\n};\n\nconst StyledToolbar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n padding: 16px 24px;\n margin-bottom: 24px;\n\n background: var(--bg-1, #000000);\n\n color: var(--text-color, #fff);\n font-size: 18px;\n\n .section {\n display: flex;\n align-items: center;\n flex-basis: 0;\n flex-grow: 1;\n }\n\n .date-changer {\n all: unset;\n cursor: pointer;\n }\n\n @media screen and (max-width: 768px) {\n flex-direction: column;\n gap: 1rem;\n }\n`;\n\n// implement event fetching and filtering\n\nconst [selectedView, setSelectedView] = useState(\"month\");\nconst [currentDate, setCurrentDate] = useState(new Date());\n\nconst [showCreateModal, setShowCreateModal] = useState(false);\nconst toggleCreateModal = () => setShowCreateModal(!showCreateModal);\n\nconst [showFilterModal, setShowFilterModal] = useState(false);\nconst toggleFilterModal = () => setShowFilterModal(!showFilterModal);\n\nconst [filters, setFilters] = useState({});\n\nconst dateString = currentDate.toLocaleString(\"en-us\", {\n month: \"long\",\n year: \"numeric\",\n});\n\nconst handleMonthChange = (change) => {\n const date = currentDate;\n date.setMonth(date.getMonth() + change);\n setCurrentDate(date);\n};\n\nconst Toolbar = () => {\n return (\n <StyledToolbar>\n <div className=\"section gap-3\">\n <span>{dateString}</span>\n <button className=\"date-changer\" onClick={() => handleMonthChange(-1)}>\n <i className=\"bi bi-chevron-left\"></i>\n </button>\n <button className=\"date-changer\" onClick={() => handleMonthChange(1)}>\n <i className=\"bi bi-chevron-right\"></i>\n </button>\n </div>\n <div className=\"section gap-1 justify-content-center\">\n <Button\n variant={selectedView === \"month\" ? \"secondary\" : \"outline\"}\n onClick={() => setSelectedView(\"month\")}\n >\n Month\n </Button>\n <Button\n variant={selectedView === \"list\" ? \"secondary\" : \"outline\"}\n onClick={() => setSelectedView(\"list\")}\n >\n List\n </Button>\n </div>\n <div className=\"section justify-content-end\" style={{ gap: 10 }}>\n <Button variant=\"outline\" onClick={() => setShowFilterModal(true)}>\n Filter By\n </Button>\n {context.accountId && (\n <Button variant=\"primary\" onClick={() => setShowCreateModal(true)}>\n Add Event\n </Button>\n )}\n </div>\n </StyledToolbar>\n );\n};\n\nconst app = props.app ?? \"every\";\nconst thing = props.thing ?? \"event\";\nconst events = fetchThings(app, thing);\n\nconst filterEvents = () => {\n let filteredEvents = events;\n\n // handle date from filter\n if (filters.from) {\n filteredEvents = filteredEvents.filter((event) => {\n return new Date(event.start) >= new Date(filters.from);\n });\n }\n\n // handle date to filter\n if (filters.to) {\n filteredEvents = filteredEvents.filter((event) => {\n return new Date(event.start) <= new Date(filters.to);\n });\n }\n\n // handle cleared filters\n if (filters == {}) {\n return filteredEvents;\n }\n\n // handle title filter\n if (filters.title) {\n filteredEvents = filteredEvents.filter((event) => {\n return event.title.toLowerCase().includes(filters.title.toLowerCase());\n });\n }\n\n // handle location filter\n if (filters.location) {\n filteredEvents = filteredEvents.filter((event) => {\n return event?.extendedProps?.location\n .toLowerCase()\n .includes(filters.location.toLowerCase());\n });\n }\n\n // handle organizer filter\n if (filters.organizers.length) {\n const organizers =\n filters.organizers.map((it) => {\n if (it.customOption) {\n return it.organizers;\n }\n return it;\n }) ?? [];\n\n filteredEvents = filteredEvents.filter((event) => {\n const eventOrganizers = event?.extendedProps?.organizers.map((it) => {\n if (it.customOption) {\n return it.organizer;\n }\n return it;\n });\n return eventOrganizers.some((it) => organizers.includes(it));\n });\n }\n\n // handle tag filter\n if (filters.tags.length) {\n const tags =\n filters.tags.map((it) => {\n if (it.customOption) {\n return it.tags;\n }\n return it;\n }) ?? [];\n\n filteredEvents = filteredEvents.filter((event) => {\n const eventTags = event?.extendedProps?.hashtags.map((it) => {\n if (it.customOption) {\n return it.hashtags;\n }\n return it;\n });\n return eventTags.some((it) => tags.includes(it));\n });\n }\n\n return filteredEvents;\n};\n\nevents = filterEvents();\n\nconst CurrentView = () => {\n if (selectedView === \"month\") {\n return (\n <Widget\n src=\"buildhub.near/widget/events.MonthView\"\n loading=\"\"\n props={{\n currentDate,\n events,\n setSelectedView,\n }}\n />\n );\n }\n\n return (\n <Widget\n src=\"buildhub.near/widget/events.ListView\"\n loading=\"\"\n props={{\n currentDate,\n events,\n }}\n />\n );\n};\n\nconst Container = styled.div`\n background: var(--bg-1, #000000);\n`;\n\nreturn (\n <Container>\n <Widget\n src=\"buildhub.near/widget/components.modals.CreateEvent\"\n loading=\"\"\n props={{\n showModal: showCreateModal,\n toggleModal: toggleCreateModal,\n app,\n thing,\n }}\n />\n <Widget\n src=\"buildhub.near/widget/components.modals.FilterEvents\"\n loading=\"\"\n props={{\n showModal: showFilterModal,\n toggleModal: toggleFilterModal,\n filters: filters,\n setFilters: setFilters,\n }}\n />\n <Toolbar />\n <CurrentView />\n </Container>\n);\n" }, "home.Join": { "": "const { Tag, Button } = VM.require(\"buildhub.near/widget/components\") || {\n Tag: () => <></>,\n};\n\nconst Container = styled.div`\n display: flex;\n padding: 80px 48px;\n flex-direction: column;\n align-items: center;\n gap: 72px;\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n }\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 24px;\n\n h2 {\n color: var(--paleta-escolhida-ffffff, #fff);\n text-align: center;\n font-size: 48px;\n line-height: 56px; /* 116.667% */\n font-family: \"Poppins\", sans-serif;\n margin: 0;\n\n span {\n font-weight: 700;\n }\n }\n\n h3 {\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n text-align: center;\n font-size: 24px;\n font-family: \"InterVariable\", sans-serif;\n font-weight: 500;\n line-height: 140%; /* 33.6px */\n margin: 0;\n }\n\n @media screen and (max-width: 768px) {\n h2 {\n font-size: 24px;\n line-height: 130%;\n }\n\n h3 {\n font-size: 14px;\n }\n }\n`;\n\nconst BenefitContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n place-items: center;\n gap: 32px;\n\n @media screen and (max-width: 768px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n`;\n\nconst GlobeIcon = () => {\n return (\n <>\n <div className=\"d-md-none\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n >\n <path\n d=\"M20 3.75098C16.7861 3.75098 13.6443 4.70402 10.972 6.4896C8.29969 8.27517 6.21689 10.8131 4.98696 13.7824C3.75704 16.7517 3.43524 20.019 4.06225 23.1712C4.68926 26.3234 6.23692 29.2189 8.50952 31.4915C10.7821 33.7641 13.6776 35.3117 16.8298 35.9387C19.982 36.5657 23.2493 36.2439 26.2186 35.014C29.1879 33.7841 31.7258 31.7013 33.5114 29.029C35.297 26.3567 36.25 23.2149 36.25 20.001C36.2455 15.6926 34.5319 11.562 31.4855 8.51552C28.439 5.46904 24.3084 3.75553 20 3.75098ZM33.6922 18.751H27.4688C27.2484 14.3041 25.8641 10.0838 23.5438 6.71973C26.2613 7.44931 28.6903 8.99323 30.5045 11.144C32.3187 13.2948 33.4311 15.9494 33.6922 18.751ZM20 33.7338C17.0734 30.5666 15.2984 26.0775 15.0359 21.251H24.9641C24.7016 26.0744 22.9266 30.5666 20 33.7338ZM15.0359 18.751C15.2984 13.9275 17.0672 9.43535 20 6.26816C22.9266 9.43535 24.7016 13.9244 24.9641 18.751H15.0359ZM16.4563 6.71973C14.1359 10.0838 12.7516 14.3041 12.5313 18.751H6.30782C6.56889 15.9494 7.68127 13.2948 9.49547 11.144C11.3097 8.99323 13.7387 7.44931 16.4563 6.71973ZM6.30782 21.251H12.5313C12.7516 25.6978 14.1359 29.9182 16.4563 33.2822C13.7387 32.5526 11.3097 31.0087 9.49547 28.8579C7.68127 26.7072 6.56889 24.0526 6.30782 21.251ZM23.5438 33.2822C25.8641 29.9135 27.2484 25.6932 27.4688 21.251H33.6922C33.4311 24.0526 32.3187 26.7072 30.5045 28.8579C28.6903 31.0087 26.2613 32.5526 23.5438 33.2822Z\"\n fill=\"#6E6E6E\"\n />\n </svg>\n </div>\n <div className=\"d-none d-md-block\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"49\"\n height=\"49\"\n viewBox=\"0 0 49 49\"\n fill=\"none\"\n >\n <path\n d=\"M24.667 5C20.8103 5 17.0401 6.14366 13.8334 8.28634C10.6266 10.429 8.12726 13.4745 6.65135 17.0377C5.17544 20.6008 4.78928 24.5216 5.54169 28.3043C6.2941 32.0869 8.15129 35.5615 10.8784 38.2886C13.6055 41.0157 17.0801 42.8729 20.8627 43.6253C24.6454 44.3777 28.5662 43.9916 32.1293 42.5156C35.6925 41.0397 38.738 38.5404 40.8807 35.3336C43.0233 32.1269 44.167 28.3567 44.167 24.5C44.1615 19.33 42.1053 14.3732 38.4496 10.7174C34.7938 7.06167 29.837 5.00546 24.667 5ZM41.0976 23H33.6295C33.3651 17.6637 31.7039 12.5994 28.9195 8.5625C32.1805 9.438 35.0954 11.2907 37.2724 13.8716C39.4495 16.4526 40.7843 19.6381 41.0976 23ZM24.667 40.9794C21.1551 37.1787 19.0251 31.7919 18.7101 26H30.6239C30.3089 31.7881 28.1789 37.1787 24.667 40.9794ZM18.7101 23C19.0251 17.2119 21.1476 11.8212 24.667 8.02063C28.1789 11.8212 30.3089 17.2081 30.6239 23H18.7101ZM20.4145 8.5625C17.6301 12.5994 15.9689 17.6637 15.7045 23H8.23638C8.54966 19.6381 9.88451 16.4526 12.0616 13.8716C14.2386 11.2907 17.1535 9.438 20.4145 8.5625ZM8.23638 26H15.7045C15.9689 31.3363 17.6301 36.4006 20.4145 40.4375C17.1535 39.562 14.2386 37.7093 12.0616 35.1284C9.88451 32.5474 8.54966 29.3619 8.23638 26ZM28.9195 40.4375C31.7039 36.395 33.3651 31.3306 33.6295 26H41.0976C40.7843 29.3619 39.4495 32.5474 37.2724 35.1284C35.0954 37.7093 32.1805 39.562 28.9195 40.4375Z\"\n fill=\"#6E6E6E\"\n />\n </svg>\n </div>\n </>\n );\n};\n\nconst Benefit = styled.div`\n display: flex;\n align-items: center;\n gap: 24px;\n\n &.first {\n svg {\n filter: invert(60%) sepia(100%) saturate(392%) hue-rotate(352deg)\n brightness(97%) contrast(90%);\n }\n }\n\n .heading {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-size: 24px;\n font-weight: 500;\n font-family: \"Poppins\", sans-serif;\n margin-bottom: 8px;\n }\n\n .content {\n color: var(--6-e-6-e-6-e, var(--Black-50, #6e6e6e));\n font-size: 16px;\n font-weight: 500;\n font-family: \"InterVariable\", sans-serif;\n line-height: 120%; /* 24px */\n margin: 0;\n }\n\n @media screen and (max-width: 768px) {\n flex-direction: column;\n gap: 8px;\n\n .heading {\n text-align: center;\n font-size: 20px;\n }\n\n .content {\n text-align: center;\n font-size: 14px;\n }\n }\n`;\n\nconst gridLink =\n \"https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4\";\n\nconst Banner = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n padding: 40px 60px;\n\n position: relative;\n\n border-radius: 16px;\n background: linear-gradient(104deg, #4a21a5 33.65%, #eca227 99.99%);\n box-shadow: 4px 24px 48px 0px rgba(81, 255, 234, 0.1);\n\n .left {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n flex-shrink: 0;\n h3 {\n font-family: \"Poppins\", sans-serif;\n font-weight: 700;\n }\n }\n\n .right {\n display: flex;\n gap: 16px;\n align-items: center;\n }\n\n @media screen and (max-width: 960px) {\n flex-direction: column;\n padding: 30px;\n gap: 40px;\n\n .right {\n flex-direction: column;\n align-items: center;\n }\n }\n`;\n\nconst GridImage = styled.img`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.05;\n pointer-events: none;\n`;\n\nconst Step = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-family: \"Poppins\", sans-serif;\n\n span.leading {\n color: var(--ffffff, #fff);\n font-size: 18px;\n font-weight: 700;\n line-height: 100%; /* 28px */\n }\n\n span.content {\n color: var(--d-1-d-1-d-1, #d1d1d1);\n font-size: 14px;\n line-height: 120%; /* 24px */\n }\n\n @media screen and (max-width: 960px) {\n flex-direction: row;\n align-items: center;\n }\n`;\n\nconst Join = () => {\n return (\n <Container className=\"container-xl\">\n <HeadingContainer>\n <Tag label=\"Join\" />\n <h2>\n Open call for members <span>to join and contribute</span>\n </h2>\n <h3>\n Build DAO is an innovative, community-led organization intended to\n serve the open web ecosystem in multiple ways:\n </h3>\n </HeadingContainer>\n <BenefitContainer>\n <Benefit className=\"first\">\n <GlobeIcon />\n <div>\n <h4 className=\"heading\">Vote on important decisions</h4>\n <p className=\"content\">\n Members collectively shape community programs and policies.\n </p>\n </div>\n </Benefit>\n <Benefit>\n <GlobeIcon />\n <div>\n <h4 className=\"heading\">Earn Recognition and Rewards</h4>\n <p className=\"content\">\n Members develop their own reputations as builders.\n </p>\n </div>\n </Benefit>\n <Benefit>\n <GlobeIcon />\n <div>\n <h4 className=\"heading\">Discover Opportunities</h4>\n <p className=\"content\">\n Members gain exposure to new gigs and interesting projects.\n </p>\n </div>\n </Benefit>\n </BenefitContainer>\n <Banner>\n <div className=\"z-3 left\">\n <h3>Let's Join</h3>\n <Widget\n src=\"buildhub.near/widget/components.buttons.Connect\"\n props={{\n joinBtnChildren: \"Join Now\",\n showActivity: true,\n className: \"custom-button\",\n }}\n />\n </div>\n <div className=\"z-3 right\">\n <Step>\n <span className=\"leading\">Sign</span>\n <span className=\"content\">membership agreement (on-chain)</span>\n </Step>\n <Step>\n <span className=\"leading\">Propose</span>\n <span className=\"content\">to be added to the “Community” role</span>\n </Step>\n <Step>\n <span className=\"leading\">Fulfill</span>\n <span className=\"content\">contribution requirements</span>\n </Step>\n </div>\n <GridImage className=\"z-1\" src={gridLink} />\n </Banner>\n </Container>\n );\n};\n\nreturn { Join };\n" }, "components.Navbar": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst { href } = VM.require(\"buildhub.near/widget/lib.url\") || {\n href: () => {},\n};\n\nconst NavContainer = styled.div`\n display: flex;\n padding: 24px 48px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 10px;\n align-self: stretch;\n font-family: \"Poppins\", sans-serif;\n\n background-color: var(--bg, #000);\n border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n`;\n\nconst MainContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 50px;\n\n @media screen and (max-width: 960px) {\n gap: 16px;\n }\n`;\n\nconst Left = styled.div`\n display: flex;\n align-items: center;\n gap: 50px;\n\n @media screen and (max-width: 960px) {\n gap: 16px;\n }\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n`;\n\nconst Right = styled.div`\n display: flex;\n align-items: center;\n gap: 16px;\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n`;\n\nconst MobileView = styled.div`\n display: none;\n\n @media screen and (max-width: 768px) {\n display: block;\n position: absolute;\n background: var(--bg, #000);\n z-index: 100;\n min-height: 100vh;\n padding: 24px 48px;\n top: 0;\n height: 100%;\n left: 0;\n width: 100%;\n }\n`;\n\nconst MobileNavigation = styled.div`\n display: none;\n\n @media screen and (max-width: 768px) {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n`;\n\nconst NavLinks = styled.div`\n display: flex;\n align-items: center;\n gap: 36px;\n\n span {\n color: var(--text-white, #fff);\n }\n\n .active {\n color: var(--eca-227, #eca227);\n font-weight: 700;\n }\n\n @media screen and (max-width: 960px) {\n gap: 16px;\n }\n\n @media screen and (max-width: 768px) {\n flex-direction: column;\n margin-top: 38px;\n span {\n font-size: 20px;\n }\n }\n`;\n\nconst StyledDropdown = styled.div`\n .dropdown-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #23242b;\n color: #fff;\n border-radius: 8px;\n outline: none;\n border: 0;\n width: 40px;\n height: 40px;\n\n &:after {\n display: none;\n }\n\n .menu {\n width: 18px;\n height: 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n\n div {\n background-color: var(--slate-dark-11);\n height: 2px;\n width: 100%;\n border-radius: 30px;\n }\n }\n\n :hover {\n .menu {\n div {\n background-color: white;\n }\n }\n }\n }\n\n ul {\n background-color: #23242b;\n width: 100%;\n\n li {\n padding: 0 6px;\n }\n\n button,\n a {\n color: var(--slate-dark-11);\n display: flex;\n align-items: center;\n border-radius: 8px;\n padding: 12px;\n\n :hover,\n :focus {\n text-decoration: none;\n background-color: var(--slate-dark-1);\n color: white;\n\n svg {\n path {\n stroke: white;\n }\n }\n }\n\n svg {\n margin-right: 7px;\n path {\n stroke: var(--slate-dark-9);\n }\n }\n }\n }\n`;\n\nconst MobileContent = styled.div`\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n gap: 256px;\n flex-direction: column;\n`;\n\nfunction Navbar(props) {\n const { page, routes } = props;\n const [dropdown, setDropdown] = useState(false);\n\n const toggleDropdown = () => {\n setDropdown((prev) => !prev);\n };\n\n return (\n <NavContainer>\n <MainContent className=\"container-xl\">\n <Left>\n <Link\n to={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"home\",\n },\n })}\n >\n <img\n className=\"object-fit-cover\"\n src=\"https://ipfs.near.social/ipfs/bafkreihtv6fim7hrgtklbdg5zgq2nyscqgidh2g5zvhamkhqaywaux4hqe\"\n />\n </Link>\n <NavLinks>\n {routes &&\n (Object.keys(routes) || []).map((k) => {\n const route = routes[k];\n if (route.hide) {\n return null;\n }\n return (\n <Link\n key={`desktop=${k}`}\n style={{ textDecoration: \"none\" }}\n to={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: k,\n },\n })}\n >\n <span key={k} className={page === k ? \"active\" : null}>\n {route.init.icon && <i className={route.init.icon}></i>}\n {route.init.name}\n </span>\n </Link>\n );\n })}\n </NavLinks>\n </Left>\n <Right>\n <div\n style={{\n flex: 1,\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: \"0.5rem\",\n }}\n >\n <StyledDropdown className=\"dropdown\">\n <button\n className=\"dropdown-toggle\"\n type=\"button\"\n id=\"dropdownMenu2222\"\n data-bs-toggle=\"dropdown\"\n aria-expanded=\"false\"\n >\n <i style={{ color: \"white\" }} className=\"bi bi-three-dots\"></i>\n </button>\n <ul className=\"dropdown-menu\" aria-labelledby=\"dropdownMenu2222\">\n <li>\n <Link\n style={{ textDecoration: \"none\" }}\n href={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"inspect\",\n widgetPath: routes[page].path,\n },\n })}\n type=\"icon\"\n variant=\"outline\"\n className=\"d-flex align-tiems-center gap-2\"\n >\n <i className=\"bi bi-code\"></i>\n <span>View source</span>\n </Link>\n </li>\n <li>\n <Link\n style={{ textDecoration: \"none\" }}\n href={`/edit/${routes[page].path}`}\n type=\"icon\"\n variant=\"outline\"\n className=\"d-flex align-items-center gap-2\"\n >\n <i className=\"bi bi-pencil\"></i>\n <span>Edit code</span>\n </Link>\n </li>\n </ul>\n </StyledDropdown>\n </div>\n {context.accountId ? (\n <Widget\n src=\"buildhub.near/widget/components.buttons.UserDropdown\"\n loading=\"\"\n props={props}\n />\n ) : (\n <a\n href={\"https://nearbuilders.org/join\"}\n style={{ textDecoration: \"none\" }}\n >\n <Button\n variant=\"primary\"\n linkClassName=\"d-flex\"\n className=\"align-self-stretch w-100\"\n >\n Sign In\n </Button>\n </a>\n )}\n </Right>\n <MobileNavigation>\n <Link\n to={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"home\",\n },\n })}\n >\n <img\n className=\"object-fit-cover\"\n onClick={() => setDropdown(false)}\n src=\"https://ipfs.near.social/ipfs/bafkreicevo7aeyy6nivzqyfygpsoxkz6apd4pbqwrhc6yccqtyp6qzdoqq\"\n alt=\"BuildDAO\"\n />\n </Link>\n <Button\n type=\"icon\"\n variant=\"outline\"\n className=\"rounded-2 border-0\"\n onClick={toggleDropdown}\n >\n <i style={{ fontSize: 24 }} className=\"bi bi-list\"></i>\n </Button>\n </MobileNavigation>\n </MainContent>\n\n {dropdown && (\n <MobileView>\n <MobileNavigation>\n <Link\n to={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"home\",\n },\n })}\n >\n <img\n onClick={() => setDropdown(false)}\n src=\"https://ipfs.near.social/ipfs/bafkreicevo7aeyy6nivzqyfygpsoxkz6apd4pbqwrhc6yccqtyp6qzdoqq\"\n alt=\"BuildDAO\"\n />\n </Link>\n <Button\n type=\"icon\"\n variant=\"outline\"\n className=\"rounded-2 border-0\"\n onClick={toggleDropdown}\n >\n <i style={{ fontSize: 24 }} className=\"bi bi-list\"></i>\n </Button>\n </MobileNavigation>\n <MobileContent>\n <NavLinks>\n {routes &&\n (Object.keys(routes) || []).map((k) => {\n const route = routes[k];\n if (route.hide) {\n return null;\n }\n return (\n <Link\n key={`mobile=${k}`}\n style={{ textDecoration: \"none\" }}\n to={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: k,\n },\n })}\n >\n <span\n onClick={toggleDropdown}\n key={k}\n className={page === k ? \"active\" : null}\n >\n {route.init.icon && <i className={route.init.icon}></i>}\n {route.init.name}\n </span>\n </Link>\n );\n })}\n </NavLinks>\n <div className=\"d-flex flex-column gap-2\">\n <div className=\"d-flex w-100 gap-2 justify-content-center\">\n <Button\n href={href({\n widgetSrc: \"buildhub.near/widget/app\",\n params: {\n page: \"inspect\",\n widgetPath: routes[page].path,\n },\n })}\n >\n <span>View source</span>\n </Button>\n <Button href={`/edit/${routes[page].path}`}>Edit Code</Button>\n </div>\n {context.accountId ? (\n <div className=\"mx-auto d-flex align-items-stretch \">\n <Widget\n src=\"buildhub.near/widget/components.buttons.UserDropdown\"\n loading=\"\"\n props={props}\n />\n </div>\n ) : (\n <>\n <a\n href={\"https://nearbuilders.org/join\"}\n style={{ textDecoration: \"none\" }}\n >\n <Button\n variant=\"primary\"\n linkClassName=\"d-flex\"\n className=\"align-self-stretch w-100\"\n onClick={() => setDropdown(false)}\n >\n Sign In\n </Button>\n </a>\n </>\n )}\n </div>\n </MobileContent>\n </MobileView>\n )}\n </NavContainer>\n );\n}\n\nreturn <Navbar {...props} />;\n" }, "components.profile.ProfileTabs": { "": "const { Post } = VM.require(\"buildhub.near/widget/components\") || {\n Post: () => <></>,\n};\n\nconst accountId = props.accountId ?? context.accountId;\nif (!accountId) {\n return \"No account ID\";\n}\n\nconst profile = props.profile ?? Social.getr(`${accountId}/profile`);\n\nif (profile === null) {\n return \"Loading\";\n}\n\nconst description = profile.description;\n\nconst pills = [\n { id: \"posts\", title: \"Posts\" },\n { id: \"nfts\", title: \"NFTs\" },\n { id: \"widget\", title: \"Widgets\" },\n];\n\nconst Nav = styled.div`\n .nav-pills {\n background: var(--bg-1, #000000);\n font-weight: 500;\n --bs-nav-pills-border-radius: 0;\n --bs-nav-link-color: var(--font-color, #fff);\n --bs-nav-pills-link-active-color: var(--font-color, #fff);\n --bs-nav-pills-link-active-bg: var(--bg-1, #000000);\n --bs-nav-link-padding-y: 0.75rem;\n border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n padding-top: 3px;\n }\n .nav-link.active {\n border-bottom: 2px solid var(--Yellow, #eca227);\n }\n\n .nav-item:not(:has(> .disabled)):hover {\n background: rgba(13, 110, 253, 0.15);\n }\n`;\n\nconst StyledContent = styled.div`\n #pills-nfts {\n .nft-card {\n background: var(--bg-1, #000000);\n border-radius: 1rem;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n\n .nft-title,\n nft-description {\n color: var(--font-color, #fff);\n }\n }\n }\n\n #pills-widget {\n }\n`;\n\nreturn (\n <>\n <Nav>\n <ul className=\"nav nav-pills nav-fill\" id=\"pills-tab\" role=\"tablist\">\n {pills.map(({ id, title }, i) => (\n <li className=\"nav-item\" role=\"presentation\" key={i}>\n <button\n className={`nav-link ${i === 0 ? \"active\" : \"\"}`}\n id={`pills-${id}-tab`}\n data-bs-toggle=\"pill\"\n data-bs-target={`#pills-${id}`}\n type=\"button\"\n role=\"tab\"\n aria-controls={`pills-${id}`}\n aria-selected={i === 0}\n onClick={() => {\n const key = `load${id}`;\n !state[key] && State.update({ [key]: true });\n }}\n >\n {title}\n </button>\n </li>\n ))}\n </ul>\n </Nav>\n <StyledContent\n className=\"tab-content\"\n style={{ marginTop: 40 }}\n id=\"pills-tabContent\"\n >\n <div\n className=\"tab-pane fade show active\"\n id=\"pills-posts\"\n role=\"tabpanel\"\n aria-labelledby=\"pills-posts-tab\"\n >\n <div className=\"mx-auto\">\n <Widget\n key=\"feed\"\n loading=\"\"\n src=\"buildhub.near/widget/components.profile.AccountFeed\"\n props={{ accounts: [accountId] }}\n />\n </div>\n </div>\n <div\n className=\"tab-pane fade\"\n id=\"pills-nfts\"\n role=\"tabpanel\"\n aria-labelledby=\"pills-nfts-tab\"\n >\n {state.loadnfts && (\n <Widget\n src=\"mob.near/widget/N.YourNFTs\"\n loading=\"\"\n props={{ accountId }}\n />\n )}\n </div>\n <div\n className=\"tab-pane fade widget\"\n id=\"pills-widget\"\n role=\"tabpanel\"\n aria-labelledby=\"pills-widget-tab\"\n >\n {state.loadwidget && (\n <Widget\n src=\"buildhub.near/widget/components.profile.LastWidgets\"\n loading=\"\"\n props={{ accountId }}\n />\n )}\n </div>\n </StyledContent>\n </>\n);\n" }, "OrderedGraphFeed": { "": "const { Header } = VM.require(\"buildhub.near/widget/components.Header\") || {\n Header: () => <></>,\n};\n\nconst accountId = props.accountId ?? context.accountId;\nconst itemType = props.itemType;\nconst renderItem = props.renderItem;\n\nif (!itemType) {\n return <p className=\"text-white\">No graph item type passed.</p>;\n}\n\nconst items = Social.getr(`${accountId}/graph/${itemType}`, \"final\", {\n withBlockHeight: true,\n});\n\nconst StorageKey = \"order\";\nconst order = Storage.privateGet(StorageKey);\nconst graphItems = useMemo(() => {\n if (items === null || order === null) {\n return [];\n }\n const itemMap = new Map();\n const path = [];\n\n const buildSrc = (node) => {\n if (node.hasOwnProperty(\"\")) {\n itemMap.set(path.join(\"/\"), node[\":block\"]);\n }\n Object.entries(node).forEach(([key, value]) => {\n if (typeof value === \"object\") {\n path.push(key);\n buildSrc(value);\n path.pop();\n }\n });\n };\n\n buildSrc(items ?? {}, [], itemMap);\n let entries = [...itemMap.entries()];\n entries.sort((a, b) => b[1] - a[1]);\n entries = entries.map((a) => a[0]);\n entries.sort((a, b) => (order?.[a] || 0) - (order?.[b] || 0));\n Storage.privateSet(\n StorageKey,\n Object.fromEntries(entries.map((a, i) => [a, i + 1])),\n );\n return entries;\n}, [items, order]);\n\nlet transformedArray = graphItems.map((item) => {\n let splitParts = item.split(\"/\");\n let accountId = splitParts[0];\n let lastPart = splitParts[splitParts.length - 1];\n let blockHeight = isNaN(lastPart) ? null : parseInt(lastPart);\n\n return { accountId, blockHeight };\n});\n\nlet filteredArray = transformedArray.filter(\n (item) => item.blockHeight !== null,\n);\n\nreturn (\n <>\n <Header>{itemType}s</Header>\n {(filteredArray ?? []).map((item) => renderItem(item))}\n {filteredArray.length === 0 && (\n <p className=\"fw-bold text-white\">No {itemType}s!</p>\n )}\n </>\n);\n" }, "components.Tag": { "": "const Container = styled.div`\n display: flex;\n padding: 12px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n width: max-content;\n\n border-radius: 100px;\n border: 1px solid var(--eca-227, #eca227);\n background: rgba(236, 162, 39, 0.2);\n\n span {\n color: var(--eca-227, #eca227);\n text-align: center;\n font-family: \"Zen Kaku Gothic Antique\", sans-serif;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n text-transform: capitalize;\n }\n\n @media screen and (max-width: 768px) {\n padding: 8px 16px;\n\n span {\n font-size: 12px;\n }\n }\n`;\n\nconst Tag = ({ label }) => {\n return (\n <Container>\n <span>{label}</span>{\" \"}\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"17\"\n height=\"17\"\n viewBox=\"0 0 17 17\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_1423_5056)\">\n <path\n d=\"M4.5 14.5L14.5 4.5L12.5 2.5L2.5 12.5L4.5 14.5Z\"\n stroke=\"#ECA227\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M10.5 4.5L12.5 6.5\"\n stroke=\"#ECA227\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M6.50033 2.5C6.50033 2.85362 6.6408 3.19276 6.89085 3.44281C7.1409 3.69286 7.48004 3.83333 7.83366 3.83333C7.48004 3.83333 7.1409 3.97381 6.89085 4.22386C6.6408 4.47391 6.50033 4.81304 6.50033 5.16667C6.50033 4.81304 6.35985 4.47391 6.1098 4.22386C5.85975 3.97381 5.52061 3.83333 5.16699 3.83333C5.52061 3.83333 5.85975 3.69286 6.1098 3.44281C6.35985 3.19276 6.50033 2.85362 6.50033 2.5Z\"\n stroke=\"#ECA227\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M13.1663 9.16699C13.1663 9.52061 13.3068 9.85975 13.5569 10.1098C13.8069 10.3598 14.1461 10.5003 14.4997 10.5003C14.1461 10.5003 13.8069 10.6408 13.5569 10.8909C13.3068 11.1409 13.1663 11.48 13.1663 11.8337C13.1663 11.48 13.0259 11.1409 12.7758 10.8909C12.5258 10.6408 12.1866 10.5003 11.833 10.5003C12.1866 10.5003 12.5258 10.3598 12.7758 10.1098C13.0259 9.85975 13.1663 9.52061 13.1663 9.16699Z\"\n stroke=\"#ECA227\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_1423_5056\">\n <rect\n width=\"16\"\n height=\"16\"\n fill=\"white\"\n transform=\"translate(0.5 0.5)\"\n />\n </clipPath>\n </defs>\n </svg>\n </Container>\n );\n};\n\nreturn { Tag };\n" }, "components.TextBox": { "": "const Label = styled.label`\n color: var(--label-color, #fff);\n\n /* Body/16px */\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n`;\n\nconst TextArea = styled.textarea`\n display: flex;\n min-height: 100px;\n padding: 16px 12px;\n align-items: flex-start;\n gap: 10px;\n align-self: stretch;\n\n border-radius: 8px;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n background: var(--bg-1, #000000);\n\n color: var(--font-color, #fff);\n\n /* Body/16px */\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n`;\n\nfunction TextBox({ label, value, onChange, placeholder, maxWidth }) {\n return (\n <div\n className=\"d-flex flex-column gap-1 w-100\"\n style={{ maxWidth: maxWidth ? maxWidth : \"550px\" }}\n >\n <Label>{label}</Label>\n <TextArea placeholder={placeholder} value={value} onChange={onChange} />\n </div>\n );\n}\n\nreturn { TextBox };\n" }, "components.ProgressState": { "": "const Progress = styled.div`\n display: flex;\n width: 40px;\n height: 40px;\n padding: 12px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n border-radius: 50%;\n border: ${(props) => {\n switch (props.status) {\n case \"focused\":\n return \"1px solid var(--yellow, #eca227)\";\n case \"error\":\n return \"1px solid var(--system-red, #FD2A5C)\";\n case \"completed\":\n return \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.20))\";\n default:\n return \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.20))\";\n }\n }};\n\n background: ${(props) => {\n switch (props.status) {\n case \"focused\":\n return \"#2f2619\";\n case \"error\":\n return \"#2f101f\";\n case \"completed\":\n return \"var(--yellow, #eca227)\";\n default:\n return \"#23242B\";\n }\n }};\n\n color: ${(props) => {\n switch (props.status) {\n case \"focused\":\n return \"var(--font-color, #fff)\";\n case \"error\":\n return \"var(--system-red, #FD2A5C)\";\n case \"completed\":\n return \"var(--black, #000)\";\n default:\n return \"var(--font-color, #fff)\";\n }\n }};\n`;\n\nfunction ProgressState({ children, status }) {\n return (\n <Progress\n status={status}\n key={`ProgressState-${status ?? \"default\"}-${children}`}\n >\n {status === \"completed\" ? (\n <i className=\"bi bi-check\"></i>\n ) : status === \"error\" ? (\n <i className=\"bi bi-x\"></i>\n ) : (\n children\n )}\n </Progress>\n );\n}\n\nreturn { ProgressState };\n" }, "components": { "": "const { Button } = VM.require(\"buildhub.near/widget/components.Button\");\nconst { ProgressState } = VM.require(\n \"buildhub.near/widget/components.ProgressState\",\n);\nconst { Bullet } = VM.require(\"buildhub.near/widget/components.Bullet\");\nconst { Step } = VM.require(\"buildhub.near/widget/components.Step\");\nconst { InputField } = VM.require(\"buildhub.near/widget/components.InputField\");\nconst { UploadField } = VM.require(\n \"buildhub.near/widget/components.UploadField\",\n);\nconst { TextBox } = VM.require(\"buildhub.near/widget/components.TextBox\");\nconst { TextEditor } = VM.require(\"buildhub.near/widget/components.TextEditor\");\nconst { Checkbox } = VM.require(\"buildhub.near/widget/components.Checkbox\");\nconst { Avatar } = VM.require(\"buildhub.near/widget/components.Avatar\");\nconst { Modal } = VM.require(\"buildhub.near/widget/components.Modal\");\nconst { Hashtag } = VM.require(\"buildhub.near/widget/components.Hashtag\");\nconst { Tag } = VM.require(\"buildhub.near/widget/components.Tag\");\n\nfunction Pagination({\n totalPages,\n maxVisiblePages,\n onPageClick,\n selectedPage,\n ThemeContainer,\n}) {\n return (\n <Widget\n src=\"buildhub.near/widget/components.Pagination\"\n props={{\n totalPages,\n maxVisiblePages,\n onPageClick,\n selectedPage,\n ThemeContainer,\n }}\n />\n );\n}\n\nfunction Post(props) {\n return (\n <Widget\n loading={<div className=\"w-100\" style={{ height: \"200px\" }} />}\n src={\"buildhub.near/widget/components.Post\"}\n props={{ ...props }}\n />\n );\n}\n\nfunction User(props) {\n return (\n <Widget\n loading={<div style={{ widget: \"3rem\", height: \"3rem\" }} />}\n src=\"buildhub.near/widget/components.User\"\n props={{ ...props }}\n />\n );\n}\n\nreturn {\n Button,\n Pagination,\n Post,\n ProgressState,\n Modal,\n Bullet,\n Step,\n Hashtag,\n InputField,\n UploadField,\n TextBox,\n TextEditor,\n Checkbox,\n Avatar,\n Tag,\n User,\n};\n" }, "Feed": { "": "const { Feed } = VM.require(\"devs.near/widget/Feed\") || {\n Feed: () => <></>,\n};\nconst { Post, Button } = VM.require(\"buildhub.near/widget/components\") || {\n Post: () => <></>,\n Button: () => <></>,\n};\nconst { Header } = VM.require(\"buildhub.near/widget/components.Header\") || {\n Header: () => <></>,\n};\n\nconst LoginContainer = styled.div`\n background-color: #23242b;\n color: #fff;\n\n width: 100%;\n height: 16rem;\n border-radius: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n align-items: center;\n justify-content: center;\n\n margin-bottom: 1rem;\n`;\n\nconst { name: feedName, template, requiredHashtags, customActions } = props;\n\n// for modals\nconst [item, setItem] = useState(null);\nconst [showProposeModal, setShowProposeModal] = useState(false);\nconst toggleProposeModal = () => {\n setShowProposeModal(!showProposeModal);\n};\nconst modalToggles = {\n propose: toggleProposeModal,\n};\n\ncustomActions = [\n {\n type: \"modal\",\n icon: \"bi-file-earmark-text\",\n label: \"Propose\",\n onClick: (modalToggles) => {\n const toggle = modalToggles.propose;\n toggle();\n },\n },\n];\n\nreturn (\n <div key={feedName}>\n <Header>{feedName} Feed</Header>\n <Widget\n src=\"buildhub.near/widget/components.modals.CreateProposal\"\n loading=\"\"\n props={{\n showModal: showProposeModal,\n toggleModal: toggleProposeModal,\n item: item,\n }}\n />\n {!context.accountId ? ( // if not logged in\n <LoginContainer>\n <p>Please login in order to post.</p>\n <a\n href={\"https://nearbuilders.org/join\"}\n style={{ textDecoration: \"none\" }}\n >\n <Button variant=\"primary\">Login</Button>\n </a>\n </LoginContainer>\n ) : (\n <Widget\n loading={\n <div\n className=\"placeholder-glow h-100 w-100\"\n style={{ height: 400 }}\n ></div>\n }\n src=\"buildhub.near/widget/Compose\"\n props={{\n draftKey: feedName,\n template: template,\n requiredHashtags: requiredHashtags,\n feed: { ...props },\n }}\n />\n )}\n <Feed\n index={(requiredHashtags || []).map((it) => ({\n action: \"hashtag\",\n key: it,\n options: {\n limit: 10,\n order: \"desc\",\n subscribe: true,\n },\n cacheOptions: {\n ignoreCache: true,\n },\n required: true,\n }))}\n Item={(p) => (\n <Post\n accountId={p.accountId}\n blockHeight={p.blockHeight}\n noBorder={true}\n currentPath={`/buildhub.near/widget/app?page=feed`}\n customActions={customActions}\n modalToggles={modalToggles}\n setItem={setItem}\n />\n )}\n />\n </div>\n);\n" }, "components.Button": { "": "const StyledButton = styled.button`\n all: unset;\n display: inline-flex;\n padding: 10px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n font-family: \"Poppins\", sans-serif;\n\n transition: all 300ms;\n\n ${(props) =>\n props.type === \"icon\" &&\n `\n display: flex;\n width: 40px;\n height: 40px;\n padding: 0px;\n flex-shrink: 0;\n font-size: 16px;\n border-radius: 50%;\n `}\n\n /* Colors based on variant prop */\n background: ${(props) => {\n switch (props.variant) {\n case \"primary\":\n return \"var(--button-primary-bg, #eca227)\";\n case \"outline\":\n return \"var(--button-outline-bg, transparent)\";\n case \"secondary\":\n return \"var(--button-secondary-bg, #23242B)\";\n default:\n return \"var(--button-default-bg, #23242B)\";\n }\n }};\n\n color: ${(props) => {\n switch (props.variant) {\n case \"primary\":\n return \"var(--button-primary-color, #000)\";\n case \"outline\":\n return \"var(--button-outline-color, #fff)\";\n case \"secondary\":\n return \"var(--button-secondary-color, #CDD0D5)\";\n default:\n return \"var(--button-default-color, #CDD0D5)\";\n }\n }};\n\n border: ${(props) =>\n props.variant === \"outline\"\n ? \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.20))\"\n : \"\"};\n\n /* Hover states */\n &:hover:not(:disabled) {\n background: ${(props) => {\n switch (props.variant) {\n case \"primary\":\n return \"var(--button-primary-hover-bg, #e49b48)\";\n case \"outline\":\n return \"var(--button-outline-hover-bg, rgba(255, 255, 255, 0.20))\";\n default:\n return \"var(--button-default-hover-bg, #17181c)\";\n }\n }};\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n }\n`;\n\nfunction Button({\n id,\n disabled,\n loading,\n children,\n variant,\n type,\n onClick,\n className,\n target,\n linkClassName,\n href,\n noLink,\n style,\n}) {\n className = className + (disabled ? \" disabled\" : \"\");\n if (href && noLink) {\n return (\n <a\n href={href}\n className={linkClassName}\n style={{ textDecoration: \"none\" }}\n target={target}\n >\n <StyledButton\n id={id}\n key={`ButtonLink-${type ?? \"Normal\"}-${variant ?? \"Default\"}-${id}`}\n className={className}\n variant={variant}\n disabled={disabled}\n type={type}\n style={style}\n href={href}\n >\n {children}\n </StyledButton>\n </a>\n );\n }\n\n if (href) {\n return (\n <Link\n to={href}\n className={linkClassName}\n style={{ textDecoration: \"none\" }}\n target={target}\n >\n <StyledButton\n id={id}\n key={`ButtonLink-${type ?? \"Normal\"}-${variant ?? \"Default\"}-${id}`}\n className={className}\n disabled={disabled}\n variant={variant}\n type={type}\n style={style}\n href={href}\n >\n {children}\n </StyledButton>\n </Link>\n );\n }\n\n return (\n <StyledButton\n id={id}\n disabled={disabled}\n key={`Button-${type ?? \"Normal\"}-${variant ?? \"Default\"}-${id}`}\n className={className}\n variant={variant}\n type={type}\n style={style}\n onClick={onClick}\n >\n {children}\n {loading ? (\n <span\n className=\"spinner-border spinner-border-sm mr-2\"\n role=\"status\"\n aria-hidden=\"true\"\n ></span>\n ) : null}\n </StyledButton>\n );\n}\n\nreturn { Button };\n" }, "events.MonthView": { "": "const { Modal, Hashtag, Button } = VM.require(\n \"buildhub.near/widget/components\",\n) || {\n Modal: () => <></>,\n Hashtag: () => <></>,\n Button: () => <></>,\n};\n\nconst currentDate = props.currentDate || new Date();\nconst events = props.events || [];\n\nconst customCSS = `\n :root {\n --fc-page-bg-color: var(--bg-color, #000000);\n --fc-border-color: var(--stroke-color, rgba(255, 255, 255, 0.20));\n --fc-today-bg-color: #424451;\n }\n\n body {\n margin: 0;\n }\n\n html {\n background-color: var(--fc-page-bg-color);\n color: var(--text-color, #fff);\n font-family: sans-serif;\n }\n\n /* FC Header */\n .fc-col-header-cell {\n background: var(--bg-2, #23242B);\n .fc-col-header-cell-cushion {\n display: block;\n text-align: left;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n padding: 10px;\n }\n }\n\n /* FC Day */\n .fc-day-today {\n .fc-daygrid-day-frame {\n background: var(--fc-today-bg-color, #424451);\n }\n }\n\n .fc .fc-daygrid-event-harness {\n a {\n color: var(--text-color, #fff);\n }\n }\n\n .fc-day-other {\n .fc-daygrid-day-frame {\n background: var(--bg-1, #000000);\n }\n }\n\n .fc-daygrid-day-frame {\n padding: 10px;\n background: var(--bg-2, #23242B);\n }\n .fc .fc-daygrid-day-top {\n flex-direction: row;\n .fc-daygrid-day-number {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n }\n }\n`;\n\nconst embedCss = props.embedCss || customCSS;\n\nconst code = `\n<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.js'></script>\n<!-- iframe-resizer -->\n<!-- <script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.js\"></script> -->\n\n<style>\n ${embedCss}\n</style>\n\n<div id=\"calendar\"></div>\n\n<script>\n document.addEventListener('DOMContentLoaded', function() {\n var calendarEl = document.getElementById('calendar');\n var calendar = new FullCalendar.Calendar(calendarEl, {\n initialView: 'dayGridMonth',\n headerToolbar: false,\n events: ${JSON.stringify(events)},\n eventClick: function(info) {\n info.jsEvent.preventDefault(); // don't let the browser navigate\n // Post the event details to the parent window\n window.parent.postMessage(JSON.stringify({ event: info.event}), '*');\n },\n });\n calendar.render();\n calendar.gotoDate(new Date(${currentDate.getTime()}));\n });\n</script>\n`;\n\nconst [data, setData] = useState(null);\nconst [showModal, setShowModal] = useState(false);\n\nconst toggleModal = () => {\n setShowModal((prev) => !prev);\n};\n\nconst organizers =\n (data?.extendedProps?.organizers || []).map((it) => {\n if (it.customOption) {\n return it.organizer;\n }\n return it;\n }) ?? [];\n\nconst hashtags =\n (data?.extendedProps?.hashtags || []).map((it) => {\n if (it.customOption) {\n return it.hashtags;\n }\n return it;\n }) ?? [];\n\nreturn (\n <>\n <iframe\n srcDoc={code}\n onMessage={(data) => {\n const dataObj = JSON.parse(data);\n setData(dataObj.event);\n toggleModal();\n }}\n style={{\n width: \"100%\",\n height: \"100vh\",\n }}\n />\n {data && (\n <Modal open={showModal} onOpenChange={toggleModal} title={data.title}>\n <div style={{ maxWidth: 600 }}>\n <div className=\"mb-3 d-flex align-items-center justify-content-between flex-wrap\">\n <span>\n <i className=\"bi bi-calendar\"></i> Start Date Time:{\" \"}\n {new Date(data.start).toLocaleDateString(\"en-us\", {\n hour: \"2-digit\",\n minute: \"numeric\",\n })}\n </span>\n <span>\n <i className=\"bi bi-calendar\"></i> End Date Time:{\" \"}\n {new Date(data.end).toLocaleDateString(\"en-us\", {\n hour: \"2-digit\",\n minute: \"numeric\",\n })}\n </span>\n </div>\n {data.extendedProps.description && (\n <div className=\"mb-3\">\n <h5>DESCRIPTION</h5>\n <p>{data.extendedProps.description}</p>\n </div>\n )}\n {organizers.length > 0 && (\n <div className=\"mb-3\">\n <h5>ORGANIZERS</h5>\n {organizers.map((organizer) => {\n const organizerProfile = Social.getr(`${organizer}/profile`);\n return (\n <span className=\"d-flex align-items-center gap-1\">\n <Widget\n src=\"mob.near/widget/Image\"\n loading=\"\"\n props={{\n image: organizerProfile.image,\n fallbackUrl:\n \"https://ipfs.near.social/ipfs/bafkreibas66y6ewop5ix2n6mgybpjz6epg7opqvcplmm5jw4jlhdik5nhe\",\n style: {\n width: 24,\n height: 24,\n borderRadius: 12,\n objectFit: \"cover\",\n },\n }}\n />\n {organizerProfile.name ??\n organizers[0] ??\n \"No name profile\"}\n </span>\n );\n })}\n </div>\n )}\n {hashtags.length > 0 && (\n <div className=\"mb-3\">\n <h5>HASHTAGS</h5>\n <div className=\"d-flex align-items-center gap-2 flex-wrap\">\n {hashtags.map((tag) => (\n <Hashtag key={tag}>{tag}</Hashtag>\n ))}\n </div>\n </div>\n )}\n {data.extendedProps.location && (\n <span className=\"d-flex align-items-center gap-1 mb-3\">\n <i className=\"bi bi-geo-alt\"></i>\n {data?.extendedProps?.location}\n </span>\n )}\n </div>\n <div>\n <Button\n noLink={true}\n href={`${data?.url}`}\n target=\"_blank\"\n variant=\"primary\"\n >\n Join Now\n </Button>\n </div>\n </Modal>\n )}\n </>\n);\n" }, "TrialAccountBanner": { "": "const { Button, Avatar } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n Avatar: () => <></>,\n};\nconst [loading, setLoading] = useState(false);\nconst [btnText, setBtnText] = useState(\"Create Trial Account\");\n\n// const TaglineSmall = styled.h2`\n// max-width: 700px;\n\n// text-align: center;\n// font-size: 1.1rem;\n// font-style: normal;\n// font-weight: 400;\n// line-height: 130%; /* 57.6px */\n// margin: 0;\n\n// text-wrap: balance;\n\n// span.muted {\n// color: rgba(255, 255, 255, 0.7);\n// }\n\n// @media screen and (max-width: 768px) {\n// font-size: 1rem;\n// }\n// `;\n\nconst Container = styled.div`\n background-color: #000000;\n color: #fff;\n height: 100%;\n\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 100%;\n max-height: 100vh;\n object-fit: cover;\n object-position: center top;\n position: absolute;\n top: 0%;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .card {\n z-index: 5;\n background: transparent;\n display: flex;\n max-width: 500px;\n width: 100%;\n max-height: 550px;\n padding: 80px 24px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 40px;\n\n img {\n width: auto;\n height: 54px;\n object-fit: cover;\n }\n\n h1 {\n color: var(--white-100, #fff);\n text-align: center;\n\n /* H1/small */\n font-size: 2rem;\n font-style: normal;\n font-weight: 500;\n line-height: 100%; /* 32px */\n }\n\n button {\n all: unset;\n cursor: pointer;\n display: flex;\n padding: 16px 20px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n\n border-radius: 8px;\n background: #eca227;\n\n &:hover:not(:disabled) {\n background: #e49b48;\n text-decoration: none;\n }\n\n color: var(--black-100, #000);\n\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n }\n }\n`;\n\nconst { networkId, accountId } = context;\n// Check if the network is testnet\nconst isTestnet = networkId === \"testnet\";\n\nconst { currentGateway } = props;\nreturn (\n <Container>\n <>\n {currentGateway && !isTestnet && accountId === null ? (\n <>\n <div className=\"card\">\n <img src=\"https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya\" />\n <h1>\n Try out the builders gateway with a trial account. <br />\n No crypto, no passphrase required.\n </h1>\n <TrialAccountGenerator\n trigger={({ getTrialAccount }) => (\n <Button\n variant=\"primary\"\n disabled={loading}\n loading={loading}\n onClick={() => {\n setLoading(true);\n setBtnText(\"Creating your account...\");\n getTrialAccount()\n .then((res) => {\n console.log(res);\n setLoading(false);\n })\n .catch((error) => {\n setLoading(false);\n setBtnText(\n \"Trial account claim empty now. They will be available again soon. Please try later...\",\n );\n });\n }}\n >\n {btnText}\n </Button>\n )}\n />\n </div>\n <img src=\"https://ipfs.near.social/ipfs/bafybeibqnkvafyflci4iap73prugmjw4wlwmrazbiudvnsyr34yzmk75i4\" />\n </>\n ) : null}\n </>\n </Container>\n);\n" }, "home.Governance": { "": "const { Tag } = VM.require(\"buildhub.near/widget/components\") || {\n Tag: () => <></>,\n};\n\nconst Container = styled.div`\n padding: 50px 48px;\n position: relative;\n img.desktop {\n z-index: 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n object-fit: cover;\n background:\n linear-gradient(90deg, #000 0.9%, rgba(0, 0, 0, 0) 82.03%),\n linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 18.3%, #000 78.05%),\n lightgray 50% / cover no-repeat;\n }\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n\n img.desktop {\n display: none;\n }\n }\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 24px;\n flex-shrink: 0;\n max-width: 576px;\n z-index: 2;\n\n h2 {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-family: \"Poppins\", sans-serif;\n font-size: 48px;\n line-height: 56px; /* 116.667% */\n margin: 0;\n\n span {\n font-weight: 700;\n }\n }\n\n h3 {\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 500;\n line-height: 140%; /* 33.6px */\n margin: 0;\n }\n\n @media screen and (max-width: 768px) {\n gap: 16px;\n\n h2 {\n font-size: 24px;\n }\n\n h3 {\n font-size: 14px;\n }\n }\n`;\n\nconst MobileImage = styled.img`\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: none;\n\n @media screen and (max-width: 768px) {\n display: block;\n }\n`;\n\nconst Governance = () => {\n return (\n <>\n <Container className=\"container-xl\">\n <HeadingContainer>\n <Tag label=\"Governance\" />\n <h2>\n Let's <span>coordinate</span>!\n </h2>\n <h3>\n Build DAO upholds the principles of openness and accountability in\n its decision-making processes. We believe success depends on\n metagovernance of builders, by builders, for builders.\n </h3>\n </HeadingContainer>\n <img\n className=\"desktop\"\n src=\"https://ipfs.near.social/ipfs/bafkreibm7jdr25xkk27jo2x6dyt6y2zgvxmixbgfvdkifhalntzd6qwqzq\"\n />\n </Container>\n <MobileImage src=\"https://ipfs.near.social/ipfs/bafkreid6skww2tq5fb2f2gtnqyvpwep43y46a6qmh32ukkvkzd3tflz7de\" />\n </>\n );\n};\n\nreturn { Governance };\n" }, "Compose": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nif (!context.accountId) {\n return \"\";\n}\n\nconst indexKey = props.indexKey ?? \"main\";\nconst draftKey = props.draftKey ?? \"draft\";\nconst template = props.template || \"\";\nconst feed = props.feed;\nconst draft = Storage.privateGet(draftKey);\nconst groupId = props.groupId;\n\nif (draft === null) {\n return \"\";\n}\n\nconst [initialText] = useState(draft || template);\n\nfunction checkAndAppendHashtag(input, target) {\n if (input.toLowerCase().includes(`#${target.toLowerCase()}`)) {\n return input;\n } else {\n return input + ` #${target}`;\n }\n}\n\nconst composeData = () => {\n const text = state.content.text;\n\n const requiredHashtags = props.requiredHashtags || [\"build\"];\n if (feed.hashtag) requiredHashtags.push(feed.hashtag.toLowerCase());\n text = text + `\\n\\n`;\n requiredHashtags.forEach((hashtag) => {\n text = checkAndAppendHashtag(text, hashtag);\n });\n\n const data = {\n post: {\n main: JSON.stringify({ ...state.content, text }),\n },\n index: {\n post: JSON.stringify({\n key: indexKey,\n value: {\n type: \"md\",\n },\n }),\n },\n };\n\n const item = {\n type: \"social\",\n path: `${context.accountId}/post/main`,\n };\n\n const notifications = state.extractMentionNotifications(text, item);\n\n if (notifications.length) {\n data.index.notify = JSON.stringify(\n notifications.length > 1 ? notifications : notifications[0],\n );\n }\n\n const hashtags = state.extractHashtags(text);\n\n if (hashtags.length) {\n data.index.hashtag = JSON.stringify(\n hashtags.map((hashtag) => ({\n key: hashtag,\n value: item,\n })),\n );\n }\n\n return data;\n};\n\nState.init({\n showPreview: false,\n posted: false,\n onChange: ({ content }) => {\n State.update({ content });\n Storage.privateSet(draftKey, content.text || \"\");\n },\n});\n\nconst [showToast, setShowToast] = useState(false);\n\nreturn (\n <>\n <div\n data-bs-theme=\"dark\"\n style={{\n background: \"var(--bg-2, #2b2f31)\",\n borderRadius: \"1rem\",\n border: \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.2)\",\n marginBottom: \"1rem\",\n }}\n >\n <div>\n <Widget\n src=\"devs.near/widget/Common.Compose\"\n props={{\n placeholder: \"What's happening?\",\n onChange: state.onChange,\n initialText,\n onHelper: ({ extractMentionNotifications, extractHashtags }) => {\n State.update({ extractMentionNotifications, extractHashtags });\n },\n composeButton: (onCompose) => (\n <CommitButton\n disabled={!state.content || state.content.text === template}\n force\n className=\"btn rounded-3\"\n style={{\n backgroundColor: \"var(--yellow, #eca227)\",\n color: \"var(--button-primary-color, #000)\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n padding: \"10px 16px\",\n }}\n data={composeData}\n onCommit={() => {\n onCompose();\n setShowToast(true);\n State.update({ content: { text: \"\", image: {} } });\n }}\n >\n Post\n </CommitButton>\n ),\n previewButton: () => (\n <button\n disabled={!state.content || state.content.text === template}\n className=\"btn rounded-3 me-2\"\n style={{\n backgroundColor: \"var(--button-outline-bg, transparent)\",\n color: \"var(--button-outline-color, #fff)\",\n border:\n \"1px solid var(--stroke-color, rgba(255, 255, 255, 0.2)\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n padding: \"10px 16px\",\n }}\n onClick={() =>\n State.update({ showPreview: !state.showPreview })\n }\n >\n Preview <i className=\"bi bi-eye\"></i>\n </button>\n ),\n }}\n />\n </div>\n {state.content && state.showPreview && (\n <div className=\"px-3\">\n <Widget\n key=\"post-preview\"\n src=\"buildhub.near/widget/components.Post\"\n props={{\n accountId: context.accountId,\n content: state.content || { type: \"md\", text: \"\" },\n blockHeight: \"now\",\n noBorder: true,\n }}\n />\n </div>\n )}\n </div>\n <Widget\n src=\"near/widget/DIG.Toast\"\n props={{\n title: \"Post Submitted Successfully\",\n type: \"success\",\n open: showToast,\n onOpenChange: (v) => setShowToast(v),\n trigger: <></>,\n action: (\n <Button\n variant=\"primary\"\n style={{ fontSize: 14 }}\n onClick={() => setShowToast(false)}\n >\n dismiss\n </Button>\n ),\n providerProps: { duration: 1000 },\n }}\n />\n </>\n);\n" }, "components.TextEditor": { "": "const TextareaWrapper = styled.div`\n display: grid;\n vertical-align: top;\n align-items: center;\n position: relative;\n align-items: stretch;\n\n textarea {\n display: flex;\n align-items: center;\n transition: all 0.3s ease;\n }\n\n textarea::placeholder {\n padding-top: 4px;\n font-size: 20px;\n }\n\n textarea:focus::placeholder {\n font-size: inherit;\n padding-top: 0px;\n }\n\n &::after,\n textarea,\n iframe {\n width: 100%;\n min-width: 1em;\n height: unset;\n min-height: 3em;\n font: inherit;\n margin: 0;\n resize: none;\n background: none;\n appearance: none;\n border: 0px solid #eee;\n grid-area: 1 / 1;\n overflow: hidden;\n outline: none;\n }\n\n iframe {\n padding: 0;\n }\n\n textarea:focus,\n textarea:not(:empty) {\n border-bottom: 1px solid #eee;\n min-height: 5em;\n }\n\n &::after {\n content: attr(data-value) \" \";\n visibility: hidden;\n white-space: pre-wrap;\n }\n &.markdown-editor::after {\n padding-top: 66px;\n font-family: monospace;\n font-size: 14px;\n }\n`;\n\nconst MarkdownEditor = `\n html {\n background: #000000;\n }\n \n * {\n border: none !important;\n }\n\n .rc-md-editor {\n background: #3c3d43;\n border-top: 1px solid #3c3d43 !important; \n border-radius: 8px;\n }\n\n .editor-container {\n background: #3c3d43;\n }\n \n .drop-wrap {\n \n border-radius: 0.5rem !important;\n }\n\n .header-list {\n display: flex;\n align-items: center;\n }\n\n textarea {\n background: #000000 !important;\n color: #fff !important;\n\n font-family: sans-serif !important;\n font-size: 1rem;\n\n border: 1px solid #3c3d43 !important;\n border-top: 0 !important;\n border-radius: 0 0 8px 8px;\n }\n\n .rc-md-navigation {\n background: #000000 !important;\n border: 1px solid #3c3d43 !important;\n border-top: 0 !important;\n border-bottom: 0 !important;\n border-radius: 8px 8px 0 0;\n \n i {\n color: #cdd0d5;\n }\n }\n\n .editor-container {\n border-radius: 0 0 8px 8px;\n }\n\n .rc-md-editor .editor-container .sec-md .input {\n overflow-y: auto;\n padding: 8px !important;\n line-height: normal;\n border-radius: 0 0 8px 8px;\n }\n`;\n\nconst Label = styled.label`\n color: var(--label-color, #fff);\n\n /* Body/16px */\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 27.2px */\n`;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nfunction TextEditor({ value, label, onChange, maxWidth }) {\n return (\n <Container>\n <Label>{label}</Label>\n <TextareaWrapper\n className=\"markdown-editor\"\n data-value={value || \"\"}\n style={{ maxWidth: maxWidth ? maxWidth : \"550px\" }}\n >\n <Widget\n src=\"mob.near/widget/MarkdownEditorIframe\"\n props={{\n initialText: value,\n embedCss: props.EditorCSS || MarkdownEditor,\n onChange,\n }}\n />\n </TextareaWrapper>\n </Container>\n );\n}\n\nreturn { TextEditor };\n" }, "template.AppLayout": { "": "/**\n * This is a standard layout with a header, body, and a footer\n */\n\nconst { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n // margin-top: calc(-1 * var(--body-top-padding));\n background-color: var(--bg-1, #000000);\n`;\n\nconst ContentContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n`;\n\nconst Header = ({ page, routes, ...props }) => (\n <Widget\n src=\"buildhub.near/widget/components.Navbar\"\n loading=\"\"\n props={{ page, routes, ...props }}\n />\n);\n\nconst Footer = (props) => {\n return <></>;\n};\n\n// Define the new component that follows the AppLayout pattern\nfunction AppLayout({ routes, page, children, ...props }) {\n return (\n <Container>\n <Header page={page} routes={routes} {...props} />\n <ContentContainer key={page}>{children}</ContentContainer>\n <Footer page={page} />\n </Container>\n );\n}\n\nreturn { AppLayout };\n" }, "components.Library": { "": "const { Header } = VM.require(\"buildhub.near/widget/components.Header\") || {\n Header: () => <></>,\n};\n\nconst {\n Button,\n Pagination,\n ProgressState,\n Step,\n Post,\n InputField,\n UploadField,\n TextBox,\n TextEditor,\n User,\n Avatar,\n Checkbox,\n} = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n Pagination: () => <></>,\n ProgressState: () => <></>,\n Step: () => <></>,\n Post: () => <></>,\n InputField: () => <></>,\n UploadField: () => <></>,\n TextBox: () => <></>,\n TextEditor: () => <></>,\n User: () => <></>,\n Avatar: () => <></>,\n Checkbox: () => <></>,\n};\n\n// states\nconst [checked, setChecked] = useState(false);\n\nconst ButtonPreview = (\n <div>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <Button>Normal</Button>\n <Button variant=\"primary\">Primary</Button>\n <Button variant=\"outline\">Outline</Button>\n </div>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <Button>\n Normal <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"primary\">\n Primary <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"outline\">\n Outline <i className=\"bi bi-arrow-right\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <Button type=\"icon\">\n <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"primary\" type=\"icon\">\n <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"outline\" type=\"icon\">\n <i className=\"bi bi-arrow-right\"></i>\n </Button>\n </div>\n </div>\n);\n\nconst components = [\n {\n name: \"Button\",\n category: \"Buttons/Navigation\",\n widgetSrc: \"buildhub.near/widget/components\",\n description:\n \"Button component with three different variants, and icon support.\",\n requiredProps: {\n children: \"Button Text\",\n onClick: \"Callback function to handle button click\",\n },\n optionalProps: {\n id: \"ID of the button\",\n variant: \"Variant of the button (default, primary, outline)\",\n type: \"Type of the button (normal, icon)\",\n className: \"Additional classnames for button\",\n style: \"Additional styles for button\",\n },\n preview: ButtonPreview,\n embedCode: `\n const { Button } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <Button>Normal</Button>\n <Button variant=\"primary\">Primary</Button>\n <Button variant=\"outline\">Outline</Button>\n </div>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <Button>\n Normal <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"primary\">\n Primary <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"outline\">\n Outline <i className=\"bi bi-arrow-right\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <Button type=\"icon\">\n <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"primary\" type=\"icon\">\n <i className=\"bi bi-arrow-right\"></i>\n </Button>\n <Button variant=\"outline\" type=\"icon\">\n <i className=\"bi bi-arrow-right\"></i>\n </Button>\n </div>\n </div>\n );`,\n },\n {\n name: \"Pagination\",\n category: \"Buttons/Navigation\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Pagination component for page switching.\",\n requiredProps: {\n totalPages: \"Total pages\",\n selectedPage: \"Selected page number\",\n onPageClick: \"Callback function to handle button click\",\n },\n optionalProps: {\n maxVisiblePages: \"Max visible pages at once (default: 4)\",\n },\n preview: <Pagination totalPages={4} selectedPage={1} />,\n embedCode: `\n const { Pagination } = VM.require(\"buildhub.near/widget/components.\n\n return (\n <Pagination totalPages={4} selectedPage={1} />\n );`,\n },\n {\n name: \"Progress State\",\n category: \"Buttons/Navigation\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Progress state for step component.\",\n requiredProps: {\n children: \"Children to render\",\n status: \"Status of the step (default, active, completed, error)\",\n },\n preview: (\n <>\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <ProgressState status=\"default\">1</ProgressState>\n <ProgressState status=\"focused\">1</ProgressState>\n <ProgressState status=\"error\">1</ProgressState>\n <ProgressState status=\"completed\">1</ProgressState>\n </div>\n </>\n ),\n embedCode: `\n const { ProgressState } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div className=\"d-flex align-items-center gap-3 mb-3\">\n <ProgressState status=\"default\">1</ProgressState>\n <ProgressState status=\"focused\">1</ProgressState>\n <ProgressState status=\"error\">1</ProgressState>\n <ProgressState status=\"completed\">1</ProgressState>\n </div>\n );`,\n },\n {\n name: \"Step\",\n category: \"Buttons/Navigation\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Step component to show progress between steps.\",\n requiredProps: {\n totalSteps: \"Total number of steps\",\n currentStep: \"Current step number\",\n },\n optionalProps: {\n currentStatus:\n \"Status of the current step (default, active, completed, error)\",\n },\n preview: (\n <>\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Step totalSteps={5} currentStep={1} />\n <Step totalSteps={4} currentStep={2} />\n <Step totalSteps={3} currentStep={3} currentStatus={\"error\"} />\n </div>\n </>\n ),\n embedCode: `\n const { Step } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Step totalSteps={5} currentStep={1} />\n <Step totalSteps={4} currentStep={2} />\n <Step totalSteps={3} currentStep={3} currentStatus={\"error\"} />\n </div>\n );`,\n },\n {\n name: \"Input Field\",\n category: \"Fields\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Input field for text input\",\n requiredProps: {\n value: \"Current Value of input\",\n onChange: \"Callback function to handle input change\",\n },\n optionalProps: {\n label: \"Label for input\",\n type: \"Type of input field\",\n key: \"Key for input field\",\n placeholder: \"Placeholder text\",\n maxWidth: \"Max width for input field\",\n },\n preview: (\n <>\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <InputField\n key={\"Input-Label\"}\n label={\"Label\"}\n placeholder={\"Placeholder\"}\n />\n <InputField\n key={\"Input-Password\"}\n label={\"Password\"}\n placeholder={\"Password\"}\n type={\"password\"}\n />\n </div>\n </>\n ),\n embedCode: `\n const { InputField } = VM.require(\"buildhub.near/widget/components\");\n\n const [value, setValue] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <InputField\n key={\"Input-Label\"}\n label={\"Label\"}\n placeholder={\"Placeholder\"}\n value={value}\n onChange={(e) => setValue(e. target.value)}\n />\n <InputField\n key={\"Input-Password\"}\n label={\"Password\"}\n placeholder={\"Password\"}\n type={\"password\"}\n value={password}\n onChange={(e) => setPassword(e.target.value)}\n />\n </div>\n );`,\n },\n {\n name: \"Checkbox\",\n category: \"Fields\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Checkbox input for toggles\",\n requiredProps: {\n value: \"Current Value of checkbox\",\n onChange: \"Callback function to handle input change\",\n },\n optionalProps: {\n label: \"Label for checkbox\",\n },\n preview: (\n <>\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Checkbox\n value={checked}\n onChange={(e) => setChecked(!checked)}\n label=\"Checkbox\"\n />\n </div>\n </>\n ),\n embedCode: `\n const { Checkbox } = VM.require(\"buildhub.near/widget/components\");\n\n const [checked, setChecked] = useState(false);\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Checkbox\n label=\"Checkbox\"\n value={checked}\n onChange={(e) => setChecked(!checked)}\n />\n </div>\n );`,\n },\n {\n name: \"Textbox\",\n category: \"Fields\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Textbox for text input\",\n requiredProps: {\n value: \"Current Value of text box\",\n onChange: \"Callback function to handle input change\",\n },\n optionalProps: {\n label: \"Label for text box\",\n },\n preview: (\n <>\n <TextBox label={\"Label\"} placeholder={\"Placeholder\"} />\n </>\n ),\n embedCode: `\n const { TextBox } = VM.require(\"buildhub.near/widget/components\");\n\n const [value, setValue] = useState(\"\");\n\n return (\n <div>\n <TextBox\n label={\"Label\"}\n value={value} \n onChange={(e) => setValue(e.target.value)} \n placeholder={\"Placeholder\"}\n />\n </div>\n );`,\n },\n {\n name: \"Text Editor\",\n category: \"Fields\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Text editor for markdown input\",\n requiredProps: {\n value: \"Current Value of checkbox\",\n onChange: \"Callback function to handle input change\",\n },\n optionalProps: {\n maxWidth: \"Max width of text editor\",\n },\n preview: (\n <>\n <TextEditor />\n </>\n ),\n embedCode: `\n const { TextEditor } = VM.require(\"buildhub.near/widget/components\");\n\n const [value, setValue] = useState(\"\");\n\n return (\n <div>\n <TextEditor\n value={value} \n onChange={(e) => setValue(e.target.value)} \n />\n </div>\n );`,\n },\n {\n name: \"Upload Field\",\n category: \"Fields\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Component for file uploads\",\n optionalProps: {\n background: \"Background color of upload filed (default true)\",\n },\n preview: (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <UploadField />\n <UploadField background />\n </div>\n ),\n embedCode: `\n const { UploadField } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <UploadField />\n <UploadField background />\n </div>\n );`,\n },\n {\n name: \"Post\",\n category: \"Modals\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Post preview component\",\n requiredProps: {\n accountId: \"AccountId of post creator\",\n blockHeight: \"Block height of post\",\n },\n optionalProps: {\n hideBorder: \"Hide bottom border\",\n pinned: \"Toggle pinned post\",\n hideMenu: \"Hide menu\",\n hideButtons: \"Hide bottom buttons\",\n content: \"Content to be shown\",\n subscribe: \"\",\n raw: \"Show raw MD\",\n groupId: \"Group ID for post\",\n indexKey: \"Index key for post\",\n permissions: \"Permissions for post\",\n fullPostLink: \"Link to full post\",\n },\n preview: (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Post\n accountId={\"itexpert120-contra.near\"}\n blockHeight={109609914}\n noBorder={true}\n />\n </div>\n ),\n embedCode: `\n const { Post } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Post\n accountId={\"itexpert120-contra.near\"}\n blockHeight={109609914}\n noBorder={true}\n />\n </div>\n );`,\n },\n {\n name: \"User\",\n category: \"Avatars/Users\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"User component for user profile\",\n requiredProps: {\n accountId: \"AccountId of post creator\",\n blockHeight: \"Block height of post\",\n },\n optionalProps: {\n variant: \"Variant of user component (desktop, mobile)\",\n pinned: \"Toggle pinned post\",\n hideMenu: \"Hide menu\",\n postType: \"Post type\",\n link: \"Post link\",\n isPremium: \"Show badge for premium users\",\n },\n preview: (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <User\n accountId={\"itexpert120-contra.near\"}\n variant={\"desktop\"}\n isPremium={true}\n blockHeight={1231231231}\n hideMenu={true}\n />\n <User\n accountId={\"build.sputnik-dao.near\"}\n variant=\"mobile\"\n blockHeight={\"now\"}\n pinned={true}\n />\n </div>\n ),\n embedCode: `\n const { User } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <User\n accountId={\"itexpert120-contra.near\"}\n variant={\"desktop\"}\n isPremium={true}\n blockHeight={1231231231}\n hideMenu={true}\n />\n <User\n accountId={\"build.sputnik-dao.near\"}\n variant=\"mobile\"\n blockHeight={\"now\"}\n pinned={true}\n />\n </div>\n );`,\n },\n {\n name: \"Avatar\",\n category: \"Avatars/Users\",\n widgetSrc: \"buildhub.near/widget/components\",\n description: \"Show user avatar\",\n requiredProps: {\n accountId: \"AccountId of post creator\",\n },\n optionalProps: {\n variant: \"Variant of user component (desktop, mobile)\",\n },\n preview: (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Avatar variant={\"desktop\"} />\n <Avatar variant={\"mobile\"} accountId={\"build.sputnik-dao.near\"} />\n </div>\n ),\n embedCode: `\n const { Avatar } = VM.require(\"buildhub.near/widget/components\");\n\n return (\n <div className=\"d-flex flex-column gap-3 mb-3\">\n <Avatar variant={\"desktop\"} />\n <Avatar variant={\"mobile\"} accountId={\"build.sputnik-dao.near\"} />\n </div>\n );`,\n },\n];\n\nconst renderProps = (props, optional) => {\n return Object.entries(props || {}).map(([key, desc]) => {\n return (\n <tr key={key}>\n <td>\n <span className={`code prop-key${optional ? \" optional\" : \"\"}`}>\n {key}\n </span>\n </td>\n <td className=\"prop-desc\">\n <Markdown text={desc} />\n </td>\n </tr>\n );\n });\n};\n\nconst renderComponent = (component, index) => {\n const id = component.name.toLowerCase().replace(\" \", \"-\");\n return (\n <div className=\"component\">\n <div className=\"anchor\" id={id}>\n <a href={`#${id}`}>\n <h2>{component.name}</h2>\n </a>\n <p>{component.description}</p>\n <h3>Preview</h3>\n {component.preview}\n <h3>Component</h3>\n <div className=\"d-flex flex-row flex-wrap justify-content-between mb-3\">\n <div className=\"path font-monospace\">\n <Widget\n src=\"mob.near/widget/CopyButton\"\n props={{\n text: component.widgetSrc,\n label: component.widgetSrc,\n }}\n />\n </div>\n <div className=\"source\">\n <a\n href={`/mob.near/widget/WidgetSource?src=${component.widgetSrc}`}\n target=\"_blank\"\n className=\"btn btn-outline-primary border-0\"\n >\n Source\n </a>\n </div>\n </div>\n <h3>Props</h3>\n <table className=\"props table table-bordered mb-3\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n {renderProps(component.requiredProps)}\n {renderProps(component.optionalProps, true)}\n </tbody>\n </table>\n <h3>Example</h3>\n <div className=\"embed-code\">\n <Markdown text={`\\`\\`\\`jsx\\n${component.embedCode}\\n\\`\\`\\``} />\n <div className=\"embed-copy\">\n <Widget\n src=\"mob.near/widget/CopyButton\"\n props={{\n text: component.embedCode,\n className: \"btn btn-outline-light\",\n }}\n />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nconst Wrapper = styled.div`\n h2,\n h3,\n label,\n p {\n color: white;\n }\n\n .component {\n padding: 0.5em 12px;\n padding-bottom: 0;\n margin-bottom: 3em;\n\n &:hover {\n background: rgba(0, 0, 0, 0.03);\n }\n\n table,\n th,\n td {\n background: #0b0c13;\n color: #fff;\n }\n\n label {\n font-size: 20px;\n }\n\n .code {\n display: inline-flex;\n line-height: normal;\n border-radius: 0.3em;\n padding: 0 4px;\n border: 1px solid #ddd;\n background: rgba(0, 0, 0, 0.03);\n font-family: var(--bs-font-monospace);\n }\n .path {\n }\n .preview {\n background-color: white;\n padding: 12px;\n border: 1px solid #eee;\n border-radius: 12px;\n pre {\n margin-bottom: 0;\n }\n }\n .props {\n .prop-key {\n background: #f7f7f7;\n border: 1px solid #dddddd;\n color: black;\n border-radius: 8px;\n padding: 2px 4px;\n font-weight: 600;\n\n &.optional {\n font-weight: 400;\n }\n }\n .prop-desc {\n p {\n margin-bottom: 0;\n color: white;\n }\n }\n }\n .embed-code {\n position: relative;\n\n .embed-copy {\n position: absolute;\n top: 18px;\n right: 10px;\n }\n }\n }\n`;\n\nconst renderMenuItem = (c, i) => {\n const prev = i ? components[i - 1] : null;\n const res = [];\n\n const id = c.name.toLowerCase().replaceAll(\" \", \"-\");\n res.push(\n <div className=\"menu-item\" key={i}>\n <a href={`#${id}`} className=\"d-flex align-items-center gap-2\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.35199 1H10.6497C10.7929 1 10.903 1 10.9987 1.01042C11.4235 1.05593 11.8181 1.25185 12.1111 1.56281C12.4042 1.87376 12.5764 2.27925 12.5966 2.70605C12.9787 2.82125 13.3143 3.05502 13.5547 3.37354C13.7952 3.69207 13.928 4.07882 13.9341 4.47786C14.3255 4.59507 14.6634 4.78065 14.9395 5.07888C15.3641 5.53795 15.4956 6.10251 15.5008 6.76279C15.5054 7.39768 15.3927 8.19991 15.2521 9.19554L14.9656 11.2233C14.8562 12.002 14.767 12.635 14.6283 13.1305C14.4831 13.6495 14.2688 14.076 13.8729 14.4042C13.4796 14.7298 13.0134 14.8698 12.4625 14.9362C11.9292 15 11.2585 15 10.4244 15H6.57729C5.7425 15 5.0718 15 4.53915 14.9362C3.98761 14.8698 3.52138 14.7298 3.12808 14.4042C2.73217 14.076 2.51794 13.6488 2.37273 13.1305C2.23403 12.635 2.14482 12.002 2.03478 11.2226L1.74892 9.19554C1.60892 8.19926 1.49496 7.39768 1.50017 6.76279C1.50538 6.10251 1.63692 5.53795 2.06147 5.07888C2.33757 4.78065 2.67487 4.59572 3.06622 4.47786C3.07249 4.07885 3.20552 3.69218 3.44608 3.37378C3.68664 3.05538 4.02224 2.82175 4.40436 2.7067C4.42446 2.27979 4.59659 1.87414 4.88965 1.56305C5.1827 1.25196 5.57736 1.05595 6.00231 1.01042C6.09803 1 6.20808 1 6.35068 1M4.0651 4.3066C4.66808 4.25581 5.4065 4.25581 6.29664 4.25581H10.7037C11.5932 4.25581 12.3316 4.25581 12.9352 4.3066C12.8902 4.10719 12.7786 3.92906 12.6188 3.80148C12.459 3.67391 12.2606 3.6045 12.0562 3.60465H4.94482C4.5092 3.60465 4.15561 3.9107 4.0664 4.3066M10.8951 1.98195C11.2533 2.01972 11.5365 2.2867 11.6062 2.62791H5.39608C5.43063 2.45861 5.51815 2.3047 5.64599 2.18845C5.77383 2.0722 5.93534 1.99965 6.10715 1.9813C6.14361 1.9774 6.19571 1.97674 6.37868 1.97674H10.623C10.8053 1.97674 10.8574 1.9774 10.8945 1.9813M2.77906 5.74177C2.97636 5.52884 3.27264 5.38754 3.84892 5.3107C4.43561 5.23256 5.22157 5.23191 6.33375 5.23191H10.6679C11.7801 5.23191 12.566 5.23321 13.1527 5.3107C13.729 5.38754 14.0253 5.52884 14.2226 5.74177C14.4153 5.95014 14.5202 6.2334 14.5241 6.76995C14.528 7.32344 14.4264 8.05274 14.2792 9.09851L14.0038 11.052C13.8879 11.8731 13.8071 12.4409 13.688 12.8668C13.5727 13.277 13.4379 13.4952 13.2498 13.6508C13.059 13.8097 12.8024 13.9113 12.3459 13.966C11.8778 14.022 11.2663 14.0226 10.3925 14.0226H6.6092C5.73533 14.0226 5.12389 14.022 4.65571 13.966C4.19989 13.9106 3.94268 13.8097 3.75189 13.6514C3.56371 13.4952 3.42892 13.2764 3.31366 12.8668C3.1945 12.4409 3.11375 11.8731 2.99785 11.052L2.7224 9.09851C2.57524 8.0534 2.47366 7.32344 2.47757 6.76995C2.48147 6.2334 2.58631 5.94949 2.77906 5.74177Z\"\n fill=\"white\"\n />\n </svg>{\" \"}\n {c.name}\n </a>\n </div>,\n );\n return res;\n};\n\nconst Grid = styled.div`\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n gap: 1rem;\n\n .main {\n grid-column: span 4 / span 4;\n }\n\n .aside {\n grid-column: span 1 / span 1;\n border-radius: 16px;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n background: var(--bg-1, #000000);\n width: 100%;\n min-height: 80vh;\n display: flex;\n padding: 24px 12px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 1rem;\n\n .menu-item {\n width: 100%;\n display: flex;\n }\n\n a {\n all: unset;\n display: inline-flex;\n padding: 8px 12px;\n justify-content: flex-start;\n align-items: center;\n gap: 4px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n transition: all 300ms;\n background: var(--button-outline-bg, transparent);\n color: var(--button-outline-color, #fff);\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n cursor: pointer;\n align-self: stretch;\n width: 100%;\n text-align: left;\n\n &:hover {\n background: var(--button-outline-hover-bg, rgba(255, 255, 255, 0.1));\n color: var(--button-outline-hover-color, #fff);\n }\n }\n }\n\n @media screen and (max-width: 768px) {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n .aside {\n flex-direction: row;\n border: none;\n overflow-x: auto;\n min-height: auto;\n gap: 2rem;\n\n .menu-item {\n width: max-content;\n flex-shrink: 0;\n a {\n flex-shrink: 0;\n }\n }\n }\n }\n`;\n\nreturn (\n <Grid className=\"\">\n <div className=\"aside\">\n {components.map((component, index) => renderMenuItem(component, index))}\n </div>\n <Wrapper className=\"main\">\n <Header>Library</Header>\n {components.map((component, index) => renderComponent(component, index))}\n </Wrapper>\n </Grid>\n);\n" }, "home.AboutUs": { "": "const { Tag } = VM.require(\"buildhub.near/widget/components\") || {\n Tag: () => <></>,\n};\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n padding: 80px 48px;\n align-items: center;\n gap: 80px;\n\n @media screen and (max-width: 768px) {\n padding: 32px 20px;\n gap: 50px;\n }\n`;\n\nconst HeadingSection = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n\n h2 {\n color: var(--paleta-escolhida-ffffff, #fff);\n text-align: center;\n font-family: Poppins, sans-serif;\n font-size: 48px;\n line-height: 120%; /* 57.6px */\n text-wrap: balance;\n margin: 0;\n\n span {\n color: var(--545454, #545454);\n font-size: 40px;\n font-weight: 300;\n }\n }\n\n h3 {\n color: var(--b-0-b-0-b-0, var(--White-50, #b0b0b0));\n text-align: center;\n margin: 0;\n\n /* H3/Large */\n max-width: 930px;\n font-family: InterVariable, sans-serif;\n text-wrap: balance;\n font-size: 24px;\n font-weight: 500;\n line-height: 140%; /* 33.6px */\n }\n\n @media screen and (max-width: 768px) {\n h2 {\n font-size: 24px;\n line-height: 130%; /* 31.2px */\n\n span {\n font-size: 20px;\n }\n }\n\n h3 {\n font-size: 14px;\n }\n }\n`;\n\nconst CardContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n .first-row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 40px;\n align-items: stretch;\n }\n\n .second-row {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 32px;\n align-items: stretch;\n }\n\n @media screen and (max-width: 768px) {\n gap: 20px;\n\n .first-row,\n .second-row {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n gap: 20px;\n }\n }\n`;\n\nconst Card = styled.div`\n display: flex;\n padding: 32px 40px;\n flex-direction: column;\n justify-content: center;\n gap: 16px;\n flex: 1 0 0;\n z-index: 1;\n\n border-radius: 16px;\n border: 1px solid var(--White-50, #b0b0b0);\n background: var(--000000, #000);\n\n overflow: hidden;\n\n &.first {\n border: 1px solid var(--Gradient-1, #4a21a5);\n }\n\n h6 {\n color: var(--eca-227, #eca227);\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 160%; /* 22.4px */\n text-transform: uppercase;\n margin: 0;\n }\n\n h4 {\n color: var(--paleta-escolhida-ffffff, #fff);\n font-family: \"Poppins\", sans-serif;\n font-size: 28px;\n line-height: 120%; /* 33.6px */\n margin: 0;\n\n span {\n color: var(--b-0-b-0-b-0, #b0b0b0);\n }\n }\n\n p {\n color: var(--6-e-6-e-6-e, var(--Black-50, #6e6e6e));\n font-family: \"InterVariable\", sans-serif;\n font-size: 16px;\n line-height: 120%; /* 19.2px */\n margin: 0;\n }\n\n @media screen and (max-width: 768px) {\n padding: 24px 16px;\n\n h6 {\n font-size: 10px;\n }\n h4 {\n font-size: 22px;\n }\n p {\n font-size: 12px;\n }\n }\n`;\n\nconst BlurImage = styled.img`\n position: absolute;\n left: 0;\n top: 0;\n object-fit: cover;\n pointer-events: none;\n z-index: 0;\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n`;\n\nconst AboutUs = () => {\n return (\n <Container className=\"container-xl position-relative\" key=\"purposes\">\n <HeadingSection>\n <Tag label=\"About Us\" />\n <h2>\n Near Builders Cooperative (NBC){\" \"}\n <span>Limited Cooperative Association</span>\n </h2>\n <h3>\n Join a democratic hub where transparency, member benefits, and\n collaborative innovation thrive.\n </h3>\n </HeadingSection>\n <CardContainer>\n <div className=\"first-row\">\n <Card className=\"first position-relative\">\n <h6 className=\"z-1\">Education</h6>\n <h4 className=\"z-1\">\n Legal <span>Structure</span>\n </h4>\n <p className=\"z-1\">\n Promotes democratic participation and financial benefits for\n members.\n </p>\n <img\n src=\"https://ipfs.near.social/ipfs/bafkreictjgfbnpeytoy6mnbkpjajsxfp5bznh7uclyrtff4jcr4klkwtvm\"\n className=\"position-absolute top-0 end-0 z-0\"\n style={{ pointerEvents: \"none\" }}\n />\n </Card>\n <Card>\n <h6>Education</h6>\n <h4>Governance</h4>\n <p>\n Communities and builder groups foster transparency and\n inclusivity.\n </p>\n </Card>\n </div>\n <div className=\"second-row\">\n <Card>\n <h6>Education</h6>\n <h4>\n Member-Centric <span>Approach</span>\n </h4>\n <p>\n Focuses on involving members in governance and financial\n decisions, promoting a sense of ownership.\n </p>\n </Card>\n <Card>\n <h6>Education</h6>\n <h4>\n Financial <span>Distribution</span>\n </h4>\n <p>\n Net Income is allocated as patronage dividends based on member\n contributions, enhancing mutual benefits.\n </p>\n </Card>\n <Card>\n <h6>Education</h6>\n <h4>Coordination</h4>\n <p>\n Establishes clear procedures for maintaining a positive,\n productive, and collaborative community environment.\n </p>\n </Card>\n </div>\n </CardContainer>\n <BlurImage src=\"https://ipfs.near.social/ipfs/bafkreibxx2qqm4twammymcmvvdzrnyvg4jyob2dh7bfi6pmzz5wkflxbqy\" />\n </Container>\n );\n};\n\nreturn { AboutUs };\n" }, "template.SidebarLayout": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst Container = styled.div`\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n gap: 1rem;\n\n @media screen and (max-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n`;\n\nconst SidebarContainer = styled.div`\n border-radius: 16px;\n border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));\n background: var(--bg-1, #000000);\n width: 100%;\n min-height: 80vh;\n display: flex;\n padding: 24px 12px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 1rem;\n\n @media screen and (max-width: 768px) {\n border: 0px;\n flex-direction: row;\n overflow-x: auto;\n min-height: auto;\n }\n`;\n\nconst ContentContainer = styled.div`\n grid-column: span 4 / span 4;\n`;\n\nconst Sidebar = ({ currentPath, page, routes }) => (\n <>\n {routes &&\n (Object.keys(routes) || []).map((k) => {\n const route = routes[k];\n if (route.hide) {\n return null;\n }\n return (\n <Button\n id={k}\n variant={page === k ? \"primary\" : \"outline\"}\n href={`${currentPath}&tab=${k}`}\n className={\n \"justify-content-start fw-medium align-self-stretch w-100\"\n }\n linkClassName={\"d-flex w-100\"}\n style={{\n fontSize: \"14px\",\n textDecoration: \"none\",\n cursor: \"pointer\",\n fontWeight: 600,\n padding: \"8px 12px\",\n gap: \"10px\",\n }}\n >\n {route.init.icon && <i className={`bi ${route.init.icon} `} />}\n <span>{route.init.name}</span>\n </Button>\n );\n })}\n </>\n);\n\n// Define the new component that follows the SidebarLayout pattern\nfunction SidebarLayout({ currentPath, routes, page, children }) {\n return (\n <Container className=\"container-xl mt-md-3\">\n <SidebarContainer>\n <Sidebar currentPath={currentPath} page={page} routes={routes} />\n </SidebarContainer>\n <ContentContainer key={page}>{children}</ContentContainer>\n </Container>\n );\n}\n\nreturn { SidebarLayout };\n" } } } } }