| 6 | "": "// Cheddar.GeneralCard\\\\nconst promise = new Promise((resolve, reject) => {\\\\n setTimeout(() => {\\\\n resolve([])\\\\n }, 1)\\\\n})\\\\n\\\\nconst { getUpVotes } = VM.require(\\\\n \\\\\\'chatter.cheddar.near/widget/lib.upVotes\\\\\\'\\\\n) || { getUpVotes: () => promise }\\\\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} = 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\\\\nloadUpVotes()\\\\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 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 className={`bg-white rounded-3 my-2`}>\\\\n <Card className=\\\\\\\"p-3\\\\\\\">\\\\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 flex-wrap\\\\\\\">\\\\n <div className=\\\\\\\"d-flex align-items-center gap-2\\\\\\\">\\\\n <div\\\\n className=\\\\\\\"text-truncate\\\\\\\"\\\\n style={{ maxWidth: \\\\\\'300px\\\\\\' }}\\\\n >\\\\n <Widget\\\\n src={\\\\n widgets.views.standardWidgets\\\\n .profileOverlayTrigger\\\\n }\\\\n props={{ accountId, children: inner }}\\\\n />\\\\n </div>\\\\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 || !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 !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 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" |