Transaction: FSAn3k7...BRzZ

{ "data": { "f2bc8abdb8ba64fe5aac9689ded9491ff0e6fdcd7a5c680b7cf364142d1789fb": { "widget": { "NDC.GeneralCard": { "": "// NDC.GeneralCard\r\n//===============================================INITIALIZATION=====================================================\r\n\r\nconst {\r\n widgets,\r\n isTest,\r\n data,\r\n handleOpenArticle,\r\n handleFilterArticles,\r\n addressForArticles,\r\n authorForWidget,\r\n handleShareButton,\r\n callLibs,\r\n handleEditArticle,\r\n baseActions,\r\n} = props;\r\n\r\nif (!Array.isArray(data.tags) && typeof data.tags === \"object\") {\r\n data.tags = Object.keys(data.tags);\r\n}\r\n\r\ndata.tags = data.tags.filter((tag) => tag !== undefined && tag !== null);\r\n\r\nconst tags = data.tags;\r\nconst accountId = data.author;\r\nconst title = data.title;\r\nconst content = data.body;\r\nconst timeLastEdit = data.timeLastEdit;\r\nconst id = data.id ?? `${data.author}-${data.timeCreate}`;\r\nconst upVotes = data.upVotes;\r\n\r\n//For the moment we'll allways have only 1 sbt in the array. If this change remember to do the propper work in lib.SBT and here.\r\nconst articleSbts = articleToRenderData.sbts ?? data.sbts ?? [];\r\n\r\nconst libSrcArray = [widgets.libComment];\r\n\r\nfunction stateUpdate(obj) {\r\n State.update(obj);\r\n}\r\n\r\nconst initLibsCalls = {\r\n comment: [\r\n {\r\n functionName: \"canUserCreateComment\",\r\n key: \"canLoggedUserCreateComment\",\r\n props: {\r\n accountId: context.accountId,\r\n sbtsNames: articleSbts,\r\n },\r\n },\r\n ],\r\n};\r\n\r\nState.init({\r\n verified: true,\r\n start: true,\r\n voted: false,\r\n sliceContent: true,\r\n libsCalls: initLibsCalls,\r\n});\r\n//=============================================END INITIALIZATION===================================================\r\n\r\n//===================================================CONSTS=========================================================\r\nconst canLoggedUserCreateComment = state.canLoggedUserCreateComment;\r\n\r\n//=================================================END CONSTS=======================================================\r\n\r\n//==================================================FUNCTIONS=======================================================\r\nfunction getPublicationDate(creationTimestamp) {\r\n if (creationTimestamp == 0) {\r\n return \"Creation timestamp passed wrong\";\r\n }\r\n return new Date(creationTimestamp).toDateString();\r\n}\r\n\r\nfunction getUserName() {\r\n const profile = data.authorProfile;\r\n\r\n return profile.name ?? getShortUserName();\r\n}\r\n\r\nconst getShortUserName = () => {\r\n const userId = accountId;\r\n\r\n if (userId.length === 64) return `${userId.slice(0, 4)}..${userId.slice(-4)}`;\r\n const name = userId.slice(0, -5); // truncate .near\r\n\r\n return name.length > 20 ? `${name.slice(0, 20)}...` : name;\r\n};\r\n\r\nfunction toggleShowModal() {\r\n State.update({ showModal: !state.showModal });\r\n}\r\n\r\n//================================================END FUNCTIONS=====================================================\r\n\r\n//==============================================STYLED COMPONENTS===================================================\r\n\r\nconst CardContainer = styled.div`\r\n box-shadow: rgba(140, 149, 159, 0.1) 0px 4px 28px 0px;\r\n`;\r\n\r\nconst Card = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 16px;\r\n gap: 16px;\r\n background: rgba(140, 149, 159, 0.1) 0px 4px 28px 0px;\r\n border-radius: 10px;\r\n`;\r\nconst HeaderCard = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 12px;\r\n width: 100%;\r\n`;\r\n\r\nconst profilePictureStyles = {\r\n width: \"45px\",\r\n height: \"45px\",\r\n borderRadius: \"50%\",\r\n};\r\nconst HeaderContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 4px;\r\n width: 70%;\r\n`;\r\nconst HeaderButtonsContainer = styled.div`\r\n display: flex;\r\n gap: 0.5rem;\r\n`;\r\nconst HeaderContentText = styled.div`\r\n display: flex;\r\n width: 100%;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n cursor: pointer;\r\n`;\r\nconst NominationName = styled.p`\r\n font-weight: 500;\r\n font-size: 14px;\r\n margin: 0;\r\n align-items: center;\r\n color: #000000;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n`;\r\nconst NominationUser = styled.p`\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: 12px;\r\n margin: 0px;\r\n line-height: 120%;\r\n display: flex;\r\n align-items: center;\r\n color: #828688;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n`;\r\n\r\nconst KeyIssues = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n padding: 12px;\r\n gap: 12px;\r\n background: #ffffff; \r\n border: 1px solid rgb(248, 248, 249);\r\n border-radius: 6px;\r\n width: 100%;\r\n`;\r\nconst KeyIssuesContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 12px;\r\n width: 100%;\r\n`;\r\nconst KeyIssuesHeader = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 12px;\r\n`;\r\nconst KeyIssuesTitle = styled.p`\r\n font-style: normal;\r\n font-weight: 700;\r\n font-size: 14px;\r\n line-height: 120%;\r\n margin-bottom: 0;\r\n`;\r\nconst KeyIssuesContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 8px;\r\n overflow-y: scroll;\r\n max-height: 250px;\r\n width: 100%;\r\n border: 1px solid rgb(248, 248, 249);\r\n border-radius: var(--bs-border-radius-lg) !important;\r\n`;\r\n\r\nconst ArticleBodyContainer = styled.div`\r\n margin: 0 0.5rem 0.5rem 0.5rem;\r\n`;\r\n\r\nconst LowerSection = styled.div`\r\n display: flex;\r\n width: 100%;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 8px;\r\n`;\r\nconst LowerSectionContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 12px;\r\n align-self: stretch;\r\n`;\r\nconst ButtonsLowerSection = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n width: 100%;\r\n`;\r\nconst TextLowerSectionContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 4px;\r\n width: 239px;\r\n height: 24px;\r\n cursor: pointer;\r\n\r\n flex-grow: 1;\r\n`;\r\nconst TimestampText = styled.div`\r\n font-style: italic;\r\n font-weight: 300;\r\n font-size: 11px;\r\n line-height: 14px;\r\n margin: 0px;\r\n gap: 2px;\r\n color: #000000;\r\n\r\n b {\r\n font-weight: 600;\r\n }\r\n`;\r\nconst ButtonsContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 4px;\r\n width: 87px;\r\n height: 28px;\r\n`;\r\nconst TagSection = styled.div`\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n flex-wrap: wrap;\r\n overflow: hidden;\r\n cursor: pointer;\r\n`;\r\n\r\nconst Element = styled.div`\r\n width: 150px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 10px;\r\n\r\n &:hover {\r\n border-radius: 6px;\r\n background: #f8f8f9;\r\n }\r\n`;\r\n\r\nconst CallLibrary = styled.div`\r\n display: none;\r\n`;\r\n//============================================END STYLED COMPONENTS=================================================\r\n\r\n//=================================================MORE STYLES======================================================\r\n\r\nconst profileImageStyles = {\r\n width: profilePictureStyles.width,\r\n height: profilePictureStyles.height,\r\n borderRadius: profilePictureStyles.borderRadius,\r\n overflow: \"hidden\",\r\n};\r\n\r\n//===============================================END MORE STYLES====================================================\r\n\r\n//=================================================COMPONENTS=======================================================\r\n\r\nconst inner = (\r\n <div className=\"d-flex flex-row mx-1\">\r\n <Widget\r\n src={widgets.newStyledComponents.Element.User}\r\n props={{\r\n accountId,\r\n options: {\r\n showHumanBadge: true,\r\n showImage: true,\r\n showSocialName: true,\r\n shortenLength: 20,\r\n },\r\n }}\r\n />\r\n </div>\r\n);\r\n\r\nconst renderTags = () => {\r\n return (\r\n <>\r\n {tags &&\r\n tags.map((tag) => {\r\n const filter = { filterBy: \"tag\", value: tag };\r\n\r\n return (\r\n <div onClick={() => handleFilterArticles(filter)}>\r\n {tag && (\r\n <Widget\r\n src={widgets.newStyledComponents.Element.Badge}\r\n props={{\r\n children: tag,\r\n variant: \"round info outline\",\r\n size: \"lg\",\r\n }}\r\n />\r\n )}\r\n </div>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n\r\nconst renderArticleBody = () => {\r\n let displayedContent = state.sliceContent ? content.slice(0, 1000) : content;\r\n return (\r\n <ArticleBodyContainer>\r\n <Widget\r\n src={widgets.socialMarkdown}\r\n props={{\r\n text: displayedContent,\r\n onHashtag: (hashtag) => (\r\n <span\r\n key={hashtag}\r\n className=\"d-inline-flex\"\r\n style={{ fontWeight: 500 }}\r\n >\r\n <a\r\n href={`https://near.social/${authorForWidget}/widget/${widgets.thisForum}?tagShared=${hashtag}`}\r\n target=\"_blank\"\r\n >\r\n #{hashtag}\r\n </a>\r\n </span>\r\n ),\r\n }}\r\n />\r\n {state.sliceContent && content.length > 1000 && (\r\n <Widget\r\n src={widgets.styledComponents}\r\n props={{\r\n Button: {\r\n text: `Show more`,\r\n size: \"sm\",\r\n className: \"w-100 justify-content-center\",\r\n onClick: () => {\r\n State.update({ sliceContent: false });\r\n },\r\n icon: <i className=\"bi bi-chat-square-text-fill\"></i>,\r\n },\r\n }}\r\n />\r\n )}\r\n </ArticleBodyContainer>\r\n );\r\n};\r\n\r\n//===============================================END COMPONENTS====================================================\r\n\r\n//===================================================RENDER========================================================\r\n\r\nreturn (\r\n <CardContainer className=\"bg-white rounded-3 p-3 m-3 col-lg-8 col-md-8 col-sm-12\">\r\n <Card>\r\n {state.showModal && (\r\n <Widget\r\n src={widgets.addComment}\r\n props={{\r\n widgets,\r\n article: data,\r\n isReplying: false,\r\n isTest,\r\n username: data.author,\r\n id,\r\n onCloseModal: toggleShowModal,\r\n callLibs,\r\n baseActions,\r\n }}\r\n />\r\n )}\r\n <HeaderCard className=\"d-flex justify-content-between pb-1 border-bottom border-dark\">\r\n <div className=\"d-flex align-items-center gap-2\">\r\n <Widget\r\n src={widgets.profileOverlayTrigger}\r\n props={{ accountId, children: inner }}\r\n />\r\n {\r\n // <HeaderContent>\r\n // <HeaderContentText\r\n // onClick={() => {\r\n // handleOpenArticle(data);\r\n // }}\r\n // >\r\n // <NominationName>{getUserName()}</NominationName>\r\n // <NominationUser>{getShortUserName()}</NominationUser>\r\n // </HeaderContentText>\r\n // </HeaderContent>\r\n }\r\n </div>\r\n <HeaderButtonsContainer>\r\n <Widget\r\n src={widgets.upVoteButton}\r\n props={{\r\n isTest,\r\n authorForWidget,\r\n reactedElementData: data,\r\n widgets,\r\n disabled:\r\n !context.accountId ||\r\n (articleSbts.length > 0 && !canLoggedUserCreateComment),\r\n articleSbts,\r\n upVotes,\r\n callLibs,\r\n baseActions,\r\n }}\r\n />\r\n <Widget\r\n src={widgets.newStyledComponents.Input.Button}\r\n props={{\r\n size: \"sm\",\r\n className: \"info outline icon\",\r\n children: <i className=\"bi bi-share\"></i>,\r\n onClick: () =>\r\n handleShareButton(true, {\r\n type: \"sharedBlockHeight\",\r\n value: data.blockHeight,\r\n }),\r\n }}\r\n />\r\n </HeaderButtonsContainer>\r\n </HeaderCard>\r\n <KeyIssuesHeader>\r\n <KeyIssuesTitle\r\n role=\"button\"\r\n onClick={() => {\r\n handleOpenArticle(data);\r\n }}\r\n >\r\n {title}\r\n </KeyIssuesTitle>\r\n </KeyIssuesHeader>\r\n <KeyIssuesContent>\r\n <KeyIssuesContainer>{renderArticleBody()}</KeyIssuesContainer>\r\n </KeyIssuesContent>\r\n <LowerSection>\r\n <LowerSectionContainer>\r\n {tags.length > 0 && (\r\n <KeyIssues>\r\n <KeyIssuesContent>\r\n <KeyIssuesHeader>\r\n <KeyIssuesTitle>Tags</KeyIssuesTitle>\r\n </KeyIssuesHeader>\r\n <div className=\"d-flex w-100\">\r\n <TagSection>{renderTags()}</TagSection>\r\n </div>\r\n </KeyIssuesContent>\r\n </KeyIssues>\r\n )}\r\n <ButtonsLowerSection>\r\n <TextLowerSectionContainer\r\n className=\"align-items-center\"\r\n onClick={() => {\r\n handleOpenArticle(data);\r\n }}\r\n >\r\n <i className=\"bi bi-clock\"></i>\r\n <TimestampText>\r\n <span>{getPublicationDate(timeLastEdit)}</span>\r\n <span>by</span>\r\n <b>{author}</b>\r\n </TimestampText>\r\n </TextLowerSectionContainer>\r\n <Widget\r\n src={widgets.reactions}\r\n props={{\r\n widgets,\r\n isTest,\r\n authorForWidget,\r\n elementReactedId: id,\r\n disabled:\r\n !context.accountId ||\r\n (articleSbts.length > 0 && !canLoggedUserCreateComment),\r\n callLibs,\r\n baseActions,\r\n sbtsNames: articleSbts,\r\n }}\r\n />\r\n </ButtonsLowerSection>\r\n <div className=\"d-flex w-100 align-items-center\">\r\n <div className=\"d-flex w-100 gap-2 justify-content-start\">\r\n <Widget\r\n src={widgets.newStyledComponents.Input.Button}\r\n props={{\r\n children: (\r\n <div className=\"d-flex align-items-center justify-content-center\">\r\n <span className=\"mx-1\">Add comment</span>\r\n <i className=\"bi bi-chat-square-text-fill\"></i>\r\n </div>\r\n ),\r\n disabled:\r\n !context.accountId ||\r\n (articleSbts.length > 0 && !canLoggedUserCreateComment),\r\n size: \"sm\",\r\n className: \"info outline w-25\",\r\n onClick: toggleShowModal,\r\n }}\r\n />\r\n <Widget\r\n src={widgets.newStyledComponents.Input.Button}\r\n props={{\r\n children: (\r\n <div className=\"d-flex align-items-center justify-content-center\">\r\n <span className=\"mx-1\">View</span>\r\n <i className=\"bi bi-eye fs-6\"></i>\r\n </div>\r\n ),\r\n size: \"sm\",\r\n className: \"info w-25\",\r\n onClick: () => {\r\n handleOpenArticle(data);\r\n },\r\n }}\r\n />\r\n {context.accountId === data.author && (\r\n <Widget\r\n src={widgets.newStyledComponents.Input.Button}\r\n props={{\r\n children: (\r\n <div className=\"d-flex align-items-center justify-content-center\">\r\n <span className=\"mx-1\">Edit</span>\r\n <i className=\"bi bi-pencil\"></i>\r\n </div>\r\n ),\r\n className: `info w-25`,\r\n onClick: () => handleEditArticle(data),\r\n }}\r\n />\r\n )}\r\n </div>\r\n </div>\r\n </LowerSectionContainer>\r\n </LowerSection>\r\n </Card>\r\n <CallLibrary>\r\n {libSrcArray.map((src) => {\r\n return callLibs(\r\n src,\r\n stateUpdate,\r\n state.libsCalls,\r\n { baseAction: baseActions.commentBaseAction },\r\n \"General card\"\r\n );\r\n })}\r\n </CallLibrary>\r\n </CardContainer>\r\n);\r\n" } } } } }