Transaction: AwSCMAx...ah5q

{ "data": { "chatter.cheddar.near": { "widget": { "Cheddar.GeneralCard": { "": "// Cheddar.GeneralCard\nconst { getUpVotes } = VM.require(\n 'chatter.cheddar.near/widget/lib.upVotes'\n) || { getUpVotes: () => {} }\nconst { getConfig } = VM.require(\n 'chatter.cheddar.near/widget/config.CommunityVoice'\n) || { getConfig: () => {} }\n\nconst { HumanityWrapperButton, isHuman } = VM.require(\n 'chatter.cheddar.near/widget/lib.nadaBot'\n) || { HumanityWrapperButton: () => <></>, isHuman: () => {} }\n\n//===============================================INITIALIZATION=====================================================\n\nconst {\n widgets,\n isTest,\n data,\n handleOpenArticle,\n handleFilterArticles,\n addressForArticles,\n authorForWidget,\n handleShareButton,\n handleEditArticle,\n baseActions,\n switchShowPreview,\n isPreview,\n loggedUserHaveSbt,\n} = props\n\nif (\n !Array.isArray(data.value.articleData.tags) &&\n typeof data.value.articleData.tags === 'object'\n) {\n data.value.articleData.tags = Object.keys(data.value.articleData.tags)\n}\n\ndata.value.articleData.tags = data.value.articleData.tags.filter(\n (tag) => tag !== undefined && tag !== null\n)\n\nconst tags = data.value.articleData.tags\nconst accountId = data.value.metadata.author\nconst title = data.value.articleData.title\nconst content = data.value.articleData.body\nconst timeLastEdit = data.value.metadata.lastEditTimestamp\nconst id =\n data.value.metadata.id ??\n `${data.author}-${data.metadata.createdTiemestamp}`\nconst [upVotes, setUpVotes] = useState(undefined)\nconst [loadingUpVotes, setLoadingUpVotes] = useState(true)\n\nfunction loadUpVotes() {\n getUpVotes(getConfig(isTest), id).then((newVotes) => {\n setUpVotes(newVotes)\n setLoadingUpVotes(false)\n })\n}\n\nuseEffect(() => {\n loadUpVotes()\n setInterval(() => {\n loadUpVotes()\n }, 30000)\n}, [])\n\nfunction stateUpdate(obj) {\n State.update(obj)\n}\n\nState.init({\n verified: true,\n start: true,\n voted: false,\n sliceContent: true,\n})\n//=============================================END INITIALIZATION===================================================\n\n//===================================================CONSTS=========================================================\n\n//=================================================END CONSTS=======================================================\n\n//==================================================FUNCTIONS=======================================================\nfunction getPublicationDate(creationTimestamp) {\n if (creationTimestamp == 0) {\n return 'Creation timestamp passed wrong'\n }\n return new Date(creationTimestamp).toDateString()\n}\n\nfunction getUserName() {\n const profile = data.authorProfile\n\n return profile.name ?? getShortUserName()\n}\n\nconst getShortUserName = () => {\n const userId = accountId\n\n if (userId.length === 64)\n return `${userId.slice(0, 4)}..${userId.slice(-4)}`\n const name = userId.slice(0, -5) // truncate .near\n\n return name.length > 20 ? `${name.slice(0, 20)}...` : name\n}\n\nfunction toggleShowModal() {\n State.update({ showModal: !state.showModal })\n}\n\n//================================================END FUNCTIONS=====================================================\n\n//==============================================STYLED COMPONENTS===================================================\n\nconst CardContainer = styled.div`\n box-shadow: rgba(140, 149, 159, 0.1) 0px 4px 28px 0px;\n`\n\nconst Card = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 16px;\n gap: 16px;\n background: rgba(140, 149, 159, 0.1) 0px 4px 28px 0px;\n border-radius: 10px;\n`\nconst HeaderCard = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 12px;\n width: 100%;\n`\n\nconst profilePictureStyles = {\n width: '45px',\n height: '45px',\n borderRadius: '50%',\n}\nconst HeaderContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n width: 70%;\n`\nconst HeaderButtonsContainer = styled.div`\n display: flex;\n gap: 0.5rem;\n`\nconst HeaderContentText = styled.div`\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n cursor: pointer;\n`\nconst NominationName = styled.p`\n font-weight: 500;\n font-size: 14px;\n margin: 0;\n align-items: center;\n color: #000000;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`\nconst NominationUser = styled.p`\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n margin: 0px;\n line-height: 120%;\n display: flex;\n align-items: center;\n color: #828688;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`\n\nconst KeyIssues = styled.div`\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 12px;\n gap: 12px;\n background: #ffffff;\n border: 1px solid rgb(248, 248, 249);\n border-radius: 6px;\n width: 100%;\n`\nconst KeyIssuesContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 12px;\n width: 100%;\n`\nconst KeyIssuesHeader = styled.div`\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: 12px;\n`\nconst KeyIssuesTitle = styled.p`\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n line-height: 120%;\n margin-bottom: 0;\n`\nconst KeyIssuesContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 8px;\n overflow-y: scroll;\n max-height: 250px;\n width: 100%;\n border: 1px solid rgb(248, 248, 249);\n border-radius: var(--bs-border-radius-lg) !important;\n`\n\nconst ArticleBodyContainer = styled.div`\n margin: 0 0.5rem 0.5rem 0.5rem;\n`\n\nconst LowerSection = styled.div`\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n`\nconst LowerSectionContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n`\nconst ButtonsLowerSection = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n width: 100%;\n`\nconst TextLowerSectionContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 4px;\n width: 239px;\n height: 24px;\n cursor: pointer;\n\n flex-grow: 1;\n`\nconst TimestampText = styled.div`\n font-style: italic;\n font-weight: 300;\n font-size: 11px;\n line-height: 14px;\n margin: 0px;\n gap: 2px;\n color: #000000;\n\n b {\n font-weight: 600;\n }\n`\nconst ButtonsContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 4px;\n width: 87px;\n height: 28px;\n`\nconst TagSection = styled.div`\n display: flex;\n align-items: flex-start;\n gap: 4px;\n flex-wrap: wrap;\n overflow: hidden;\n cursor: pointer;\n`\n\nconst Element = styled.div`\n width: 150px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n padding: 10px;\n\n &:hover {\n border-radius: 6px;\n background: #f8f8f9;\n }\n`\n\nconst CallLibrary = styled.div`\n display: none;\n`\n//============================================END STYLED COMPONENTS=================================================\n\n//=================================================MORE STYLES======================================================\n\nconst profileImageStyles = {\n width: profilePictureStyles.width,\n height: profilePictureStyles.height,\n borderRadius: profilePictureStyles.borderRadius,\n overflow: 'hidden',\n}\n\n//===============================================END MORE STYLES====================================================\n\n//=================================================COMPONENTS=======================================================\n\nconst inner = (\n <div className=\"d-flex flex-row mx-1\">\n <Widget\n src={widgets.views.standardWidgets.newStyledComponents.Element.User}\n props={{\n accountId,\n options: {\n showHumanBadge: true,\n showImage: true,\n showSocialName: true,\n shortenLength: 20,\n },\n }}\n />\n </div>\n)\n\nconst renderTags = () => {\n return (\n <>\n {tags &&\n tags.map((tag) => {\n const filter = { filterBy: 'tag', value: tag }\n\n return (\n <div onClick={() => handleFilterArticles(filter)}>\n {tag && (\n <Widget\n src={\n widgets.views.standardWidgets\n .newStyledComponents.Element.Badge\n }\n props={{\n children: tag,\n variant: 'round primary outline',\n size: 'lg',\n }}\n />\n )}\n </div>\n )\n })}\n </>\n )\n}\n\nconst renderArticleBody = () => {\n let displayedContent = state.sliceContent ? content.slice(0, 1000) : content\n return (\n <ArticleBodyContainer>\n <Widget\n src={widgets.views.standardWidgets.socialMarkdown}\n props={{\n text: displayedContent,\n onHashtag: (hashtag) => (\n <span\n key={hashtag}\n className=\"d-inline-flex\"\n style={{ fontWeight: 500 }}\n >\n <a\n href={`https://near.org/${authorForWidget}/widget/${widgets.thisForum}?st=${hashtag}`}\n target=\"_blank\"\n >\n #{hashtag}\n </a>\n </span>\n ),\n }}\n />\n {state.sliceContent && content.length > 1000 && (\n <Widget\n src={widgets.views.standardWidgets.styledComponents}\n props={{\n Button: {\n text: `Show more`,\n size: 'sm',\n className: 'w-100 justify-content-center',\n onClick: () => {\n State.update({ sliceContent: false })\n },\n icon: (\n <i className=\"bi bi-chat-square-text-fill\"></i>\n ),\n },\n }}\n />\n )}\n </ArticleBodyContainer>\n )\n}\n\n//===============================================END COMPONENTS====================================================\n\n//===================================================RENDER========================================================\n\nreturn (\n <CardContainer\n className={`bg-white rounded-3 p-3 m-3 ${\n isPreview ? '' : 'col-lg-8 col-md-8 col-sm-12'\n }`}\n >\n <Card>\n {state.showModal && (\n <Widget\n src={widgets.views.editableWidgets.addComment}\n props={{\n widgets,\n article: data,\n isReplying: false,\n isTest,\n username: data.author,\n id,\n onCloseModal: toggleShowModal,\n baseActions,\n }}\n />\n )}\n <HeaderCard className=\"d-flex justify-content-between pb-1 border-bottom border-dark\">\n <div className=\"d-flex align-items-center gap-2\">\n <Widget\n src={\n widgets.views.standardWidgets.profileOverlayTrigger\n }\n props={{ accountId, children: inner }}\n />\n {\n // <HeaderContent>\n // <HeaderContentText\n // onClick={() => {\n // handleOpenArticle(data);\n // }}\n // >\n // <NominationName>{getUserName()}</NominationName>\n // <NominationUser>{getShortUserName()}</NominationUser>\n // </HeaderContentText>\n // </HeaderContent>\n }\n </div>\n <HeaderButtonsContainer>\n <HumanityWrapperButton\n style={{ all: 'unset' }}\n accountId={context.accountId}\n >\n <Widget\n src={widgets.views.editableWidgets.upVoteButton}\n props={{\n isTest,\n authorForWidget,\n reactedElementData: data,\n widgets,\n disabled:\n isPreview ||\n !loggedUserHaveSbt ||\n !isHuman(context.accountId),\n articleSbts,\n upVotes,\n baseActions,\n loadUpVotes,\n loadingUpVotes,\n setLoadingUpVotes,\n setUpVotes,\n }}\n />\n </HumanityWrapperButton>\n <Widget\n src={\n widgets.views.standardWidgets.newStyledComponents\n .Input.Button\n }\n props={{\n size: 'sm',\n className: 'primary outline icon',\n children: <i className=\"bi bi-share\"></i>,\n onClick: () =>\n handleShareButton(true, {\n key: 'said',\n type: 'sharedArticleId',\n value: data.value.metadata.id,\n }),\n }}\n />\n </HeaderButtonsContainer>\n </HeaderCard>\n <KeyIssuesHeader>\n <KeyIssuesTitle\n role=\"button\"\n onClick={() => {\n handleOpenArticle(data)\n }}\n >\n {title}\n </KeyIssuesTitle>\n </KeyIssuesHeader>\n <KeyIssuesContent>\n <KeyIssuesContainer>{renderArticleBody()}</KeyIssuesContainer>\n </KeyIssuesContent>\n <LowerSection>\n <LowerSectionContainer>\n {tags.length > 0 && (\n <KeyIssues>\n <KeyIssuesContent>\n <KeyIssuesHeader>\n <KeyIssuesTitle>Tags</KeyIssuesTitle>\n </KeyIssuesHeader>\n <div className=\"d-flex w-100\">\n <TagSection>{renderTags()}</TagSection>\n </div>\n </KeyIssuesContent>\n </KeyIssues>\n )}\n <ButtonsLowerSection>\n <TextLowerSectionContainer\n className=\"align-items-center\"\n onClick={() => {\n handleOpenArticle(data)\n }}\n >\n <i className=\"bi bi-clock\"></i>\n <TimestampText>\n <span>{getPublicationDate(timeLastEdit)}</span>\n <span>by</span>\n <b>{author}</b>\n </TimestampText>\n </TextLowerSectionContainer>\n <HumanityWrapperButton\n style={{ all: 'unset' }}\n accountId={context.accountId}\n >\n <Widget\n src={widgets.views.editableWidgets.reactions}\n props={{\n widgets,\n isTest,\n authorForWidget,\n elementReactedId: id,\n disabled:\n isPreview ||\n !loggedUserHaveSbt ||\n !isHuman(context.accountId),\n baseActions,\n }}\n />\n </HumanityWrapperButton>\n </ButtonsLowerSection>\n <div className=\"d-flex w-100 align-items-center\">\n <div className=\"d-flex w-100 gap-2 justify-content-start\">\n <HumanityWrapperButton\n style={{ all: 'unset' }}\n accountId={context.accountId}\n >\n <Widget\n src={\n widgets.views.standardWidgets\n .newStyledComponents.Input.Button\n }\n props={{\n children: (\n <div className=\"d-flex align-items-center justify-content-center\">\n <span className=\"mx-1 d-none d-lg-block\">\n Add comment\n </span>\n <i className=\"bi bi-chat-square-text-fill\"></i>\n </div>\n ),\n disabled: !loggedUserHaveSbt,\n size: 'sm',\n className: 'primary outline',\n onClick: isPreview\n ? () => {}\n : toggleShowModal,\n }}\n />\n </HumanityWrapperButton>\n <Widget\n src={\n widgets.views.standardWidgets\n .newStyledComponents.Input.Button\n }\n props={{\n children: (\n <div className=\"d-flex align-items-center justify-content-center\">\n <span className=\"mx-1 d-none d-lg-block\">\n View\n </span>\n <i className=\"bi bi-eye fs-6\"></i>\n </div>\n ),\n size: 'sm',\n className: 'primary w-25',\n onClick: () => handleOpenArticle(data),\n }}\n />\n\n {context.accountId === data.author && (\n <Widget\n src={\n widgets.views.standardWidgets\n .newStyledComponents.Input.Button\n }\n props={{\n children: (\n <div className=\"d-flex align-items-center justify-content-center\">\n <span className=\"mx-1 d-none d-lg-block\">\n Edit\n </span>\n <i className=\"bi bi-pencil\"></i>\n </div>\n ),\n className: `primary w-25`,\n onClick: () =>\n isPreview\n ? switchShowPreview()\n : handleEditArticle(data),\n }}\n />\n )}\n </div>\n </div>\n </LowerSectionContainer>\n </LowerSection>\n </Card>\n </CardContainer>\n)\n" } } } } }