const profile = Social.getr(`${context.accountId}/profile`); const metadata = Social.getr(`webuidl.near/widget/Kudos/metadata`); const sharedBlockHeight = Number(props.sharedBlockHeight); const commentSharedBlockHeight = Number(props.commentSharedBlockHeight); const blockHeight = Number.isNaN(sharedBlockHeight) ? undefined : Number(sharedBlockHeight); const commentBlockHeight = Number.isNaN(commentSharedBlockHeight) ? undefined : Number(commentSharedBlockHeight); const widgetOwner = "f2bc8abdb8ba64fe5aac9689ded9491ff0e6fdcd7a5c680b7cf364142d1789fb"; State.init({ metadata: {}, profile: {}, }); if (JSON.stringify(profile) != JSON.stringify(state.profile)) { State.update({ profile: profile }); } if (JSON.stringify(metadata) != JSON.stringify(state.metadata)) { State.update({ metadata: metadata }); } if (!state.metadata) { return "Loading metadata"; } //=============================================================================Start inline styles======================================================================================================= const standardButtonStyles = { border: "2px solid transparent", fontWeight: "500", fontSize: font_big, padding: "0.3rem 0.5rem", backgroundColor: "#010A2D", borderRadius: "12px", color: "white", textDecoration: "none", margin: "0 1rem", }; const standardButtonStylesWithoutMargin = { border: "2px solid transparent", fontWeight: "500", fontSize: font_big, padding: "0.3rem 0.5rem", backgroundColor: "#010A2D", borderRadius: "12px", color: "white", textDecoration: "none", }; const hoveringButtonStyles = { border: "2px solid black", color: "black", backgroundColor: "white", fontWeight: "500", fontSize: font_big, padding: "0.3rem 0.5rem", borderRadius: "12px", textDecoration: "none", margin: "0 1rem", }; const hoveringButtonStylesWithoutMargin = { border: "2px solid black", color: "black", backgroundColor: "white", fontWeight: "500", fontSize: font_big, padding: "0.3rem 0.5rem", borderRadius: "12px", textDecoration: "none", }; const allWidgetsInlineStyles = { standardButtonStyles: standardButtonStyles, hoveringButtonStyles: hoveringButtonStyles, standardButtonStylesWithoutMargin: standardButtonStylesWithoutMargin, hoveringButtonStylesWithoutMargin: hoveringButtonStylesWithoutMargin, styles: { container: { position: "relative", zIndex: "1", backgroundColor: "rgb(230, 230, 230)", fontFamily: "Onest", fontStyle: "normal", borderRadius: "20px", overflowY: "scroll", }, headerContainer: { backgroundColor: "white", boxShadow: "0px 4px 28px rgba(43, 68, 106, 0.04)", }, widgetImageContainer: { backgroundColor: "#010A2D", color: "white", height: "40px", minWidth: "2.5rem", aspectRatio: "1", borderRadius: "12px", }, kudosTitle: { margin: "0 0.5rem", color: "#010A2D", fontWeight: "700", fontSize: "1.3rem", letterSpacing: "0.1px", }, userName: { margin: "0", fontSize: "0.8rem", textOverflow: "ellipsis", overflow: "hidden", maxWidth: "120px", }, kudosImage: { borderRadius: "12px", }, }, //====================================================================================================================================================================================================== kudos: { generalContainer: { height: "max-content", minHeight: "80vh", }, selectedTab: { margin: "2rem 0 0.5rem 0", fontWeight: "700", }, closeKudoButton: { margin: "2rem 0 0.5rem 0", cursor: "pointer", }, allCommentAnswerBox: { cardsContainer: { boxShadow: "1px 0px 8px -3px rgba(0,0,0,0.44) inset", maxHeight: "75vh", overflowY: "scroll", transform: "translateY(calc(100% - 12px))", position: "absolute", width: "calc(100% + 2px)", bottom: "0", left: "-1px", backgroundColor: "white", borderWidth: "0 1px 1px 1px", borderStyle: "solid", borderColor: "lightGray", borderBottomRightRadius: "5px", borderBottomLeftRadius: "5px", padding: "10px", }, visibleCardsContainer: { boxShadow: "1px 0px 8px -3px rgba(0,0,0,0.44) inset", overflowY: "visible", transform: "translateY(calc(100% - 12px))", position: "absolute", width: "calc(100% + 2px)", bottom: "0", left: "-1px", backgroundColor: "white", borderWidth: "0 1px 1px 1px", borderStyle: "solid", borderColor: "lightGray", borderBottomRightRadius: "5px", borderBottomLeftRadius: "5px", padding: "10px", }, cardContainer: { padding: "0.5rem", borderRadius: "10px", marginTop: "0.5rem", textAlign: "start", width: "100%", borderBottom: "1px solid black", }, profileImageStyles: { width: "1.5em", height: "1.5em", }, commentUserNick: { maxWidth: "10rem", overflow: "hidden", textOverflow: "ellipsis", margin: "0 0.5rem", }, comment: { margin: "1rem", }, shareWidgetContainer: { margin: "0 1rem 1rem 1rem", }, }, urlTextarea: { backgroundColor: "#fafafa", border: "1px solid #fafafa", borderRadius: "0.375rem", }, renderKudoBox: { switchButtonContainer: { width: "33%", }, switchButtonActive: { backgroundColor: "rgb(53, 58, 64)", borderColor: "rgb(71, 77, 85)", cursor: "pointer", }, switchButtonInactive: { backgroundColor: "white", borderColor: "rgb(118, 123, 142)", cursor: "pointer", }, cardContainer: { position: "relative", boxSizing: "border-box", boxShadow: "0px 8px 28px rgba(43, 68, 106, 0.05)", backgroundColor: "white", borderRadius: "1rem", textAlign: "center", padding: "10px", margin: "1rem 0.5rem", height: "max-content", maxWidth: "85vw", minWidth: "318px", }, commentButtonBigContainer: { width: "33%", display: "flex", justifyContent: "center", }, showCommentsButtonContainerNoComments: { margin: "0.5rem auto", padding: "0.3rem 0.5rem", borderRadius: "12px", width: "max-content", }, displayHandlersContainer: { margin: "0.5rem auto", }, showCommentsButtonContainer: { padding: "0.3rem 0.5rem", cursor: "pointer", borderRadius: "12px", width: "max-content", }, hoveringShowCommentsButtonContainer: { padding: "0.3rem 0.5rem", cursor: "pointer", borderRadius: "12px", width: "max-content", color: "rgba(0,191,255,255)", backgroundColor: "rgba(229, 248, 255, 255)", }, textShowComment: { margin: "0", userSelect: "none", }, flipButton: { transform: "rotate(180deg)", transition: "transform 1s", }, }, }, //====================================================================================================================================================================================================== mainPage_post: { kudoBoxContainer: { minWidth: "240px", }, cardContent: { width: "100%", }, postUrl: { margin: "1rem", }, postUrlSpan: { marginRigth: "0.5rem", }, postContentContainer: { textAlign: "start", marginLeft: "1rem", }, followButtonContainer: { marginLeft: "0.5rem", }, shareingWidgetContainer: { margin: "0 0.5rem" }, headerContainer: {}, interactionButtonsContainer: {}, repostButton: { border: "0", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", width: "2.5em", height: "2.5em", fill: "currentColor", }, repostButtonHovering: { border: "0", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", width: "2.5em", height: "2.5em", fill: "currentColor", color: "rgb(0, 184, 124)", background: "rgb(0, 184, 124, 0.1)", }, repostSvgSpan: { color: "rgb(0, 184, 124)", }, repostSvg: { marginTop: "-0.2em", }, interactionButtonsContainer: { width: "100%", }, upVoteCounter: { margin: "0", }, commentInput: { container: { margin: "10px 0px", width: "100%", }, textArea: { backgroundColor: "rgb(230, 230, 230)", border: "1px solid #ced4da", borderRadius: "0.375rem", width: "100%", verticalAlign: "middle", marginBottom: "0.5rem", }, }, }, }; //===============================================================================End inline styles======================================================================================================= //==============================================================================Start class styles======================================================================================================= const allWidgetsClassNames = { styles: { container: "pb-5", headerContainer: "d-flex justify-content-between align-items-center px-4 py-3", widgetPresentationContainer: "d-flex align-items-center", widgetImageContainer: "d-flex align-items-center justify-content-center", kudosImage: "w-100 h-100 shadow", userInfoContainer: "p-2", }, //====================================================================================================================================================================================================== kudos: { selectedTabContainer: "d-flex justify-content-between", generalContainer: "px-4 pt-2", urlTextareaContainer: "d-flex flex-column my-3 justify-content-around", allCardsContainer: "d-flex flex-wrap justify-content-around", allCommentAnswerBox: { commentContainer: "d-flex flex-column align-items-start", cardContainer: "", userAnswerHeader: "d-flex flex-wrap align-items-center", }, renderKudoBox: { cardContainer: "col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12", cardContainerSingleCard: "col-12", showCommentsButtonContainer: "d-flex flex-column align-items-center ", displayHandlersContainer: "d-flex justify-content-around", }, }, mainPage_post: { headerContainer: "d-flex justify-content-between", cardContent: "mt-3 text-break w-100 d-flex justify-content-between", postUrl: "d-flex", repostButton: "btn me-1", interactionButtonsContainer: "d-flex align-items-center justify-content-between", upVoteContainer: "d-flex align-items-center justify-content-center", commentInput: { container: "d-flex align-items-end flex-column", }, }, }; //================================================================================End class styles======================================================================================================= const updateGeneralState = (object) => { State.update(object); }; return ( <div className={allWidgetsClassNames.styles.container} style={allWidgetsInlineStyles.styles.container} > <div className={allWidgetsClassNames.styles.headerContainer} style={allWidgetsInlineStyles.styles.headerContainer} > <div className={allWidgetsClassNames.styles.widgetPresentationContainer}> <div className={allWidgetsClassNames.styles.widgetImageContainer} style={allWidgetsInlineStyles.styles.widgetImageContainer} > <Widget src="mob.near/widget/Image" props={{ image: metadata.image, className: allWidgetsClassNames.styles.kudosImage, thumbnail: false, fallbackUrl: "https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e", alt: "kudos image", style: allWidgetsInlineStyles.styles.kudosImage, }} /> </div> <h3 style={allWidgetsInlineStyles.styles.kudosTitle}>Kudos!</h3> </div> <div className={allWidgetsClassNames.styles.userInfoContainer}> <p style={allWidgetsInlineStyles.styles.userName}> {state.profile.name} </p> <p style={allWidgetsInlineStyles.styles.userName}> @{context.accountId} </p> </div> </div> <Widget src={`${widgetOwner}/widget/Kudos`} props={{ blockHeight, commentBlockHeight, widgetOwner, allWidgetsInlineStyles, allWidgetsClassNames, updateGeneralState, }} /> </div> );