const accountId = props.accountId; const profile = props.profile || Social.get(`${accountId}/profile/**`, "final"); const profileUrl = `#/near/widget/ProfilePage?accountId=${accountId}`; const username = props.username; const action = props.action; const componentName = props.componentName; const timestamp = props.timestamp; const desc = props.desc; const Notification = styled.div` display: flex; width: 470px; padding: 16px 24px 16px 16px; align-items: flex-start; gap: 16px; border-top: 1px solid var(--sand-light-6, #E3E3E0); `; const Content = styled.div` display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; `; const Icon = styled.div` `; const Username = styled.span` font: var(--text-s); font-weight: 600; `; const Action = styled.span` font: var(--text-s); color: #706F6C; `; const ComponentName = styled.span` font: var(--text-s); font-weight: 600; color: #604CC8; `; const Timestamp = styled.span` font: var(--text-s); color: #706F6C; `; const Desc = styled.span` font: var(--text-s); color: #706F6C; font-style: italic; border-left: 2px solid #E3E3E0; padding: 0 0 0 1rem; `; return ( <> <Notification> <Icon> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M17.5 4.99999C17.4998 4.53246 17.3684 4.07437 17.1209 3.67773C16.8734 3.28109 16.5196 2.96181 16.0998 2.75614C15.6799 2.55047 15.2108 2.46666 14.7457 2.51422C14.2806 2.56179 13.8381 2.73882 13.4686 3.02521C13.099 3.31161 12.8172 3.69589 12.6551 4.13442C12.493 4.57295 12.4571 5.04814 12.5515 5.50605C12.6459 5.96395 12.8668 6.3862 13.1891 6.72485C13.5115 7.06351 13.9223 7.30499 14.375 7.42187V8.12499C14.375 8.45651 14.2433 8.77446 14.0089 9.00888C13.7745 9.2433 13.4565 9.37499 13.125 9.37499H6.87501C6.54349 9.37499 6.22554 9.2433 5.99112 9.00888C5.7567 8.77446 5.62501 8.45651 5.62501 8.12499V7.42187C6.21417 7.26975 6.72762 6.90797 7.06913 6.40436C7.41064 5.90075 7.55675 5.28988 7.48008 4.68624C7.40341 4.08261 7.10922 3.52766 6.65265 3.12542C6.19609 2.72317 5.60849 2.50125 5.00001 2.50125C4.39152 2.50125 3.80393 2.72317 3.34736 3.12542C2.89079 3.52766 2.5966 4.08261 2.51993 4.68624C2.44326 5.28988 2.58937 5.90075 2.93088 6.40436C3.27239 6.90797 3.78584 7.26975 4.37501 7.42187V8.12499C4.37501 8.78803 4.6384 9.42392 5.10724 9.89276C5.57608 10.3616 6.21196 10.625 6.87501 10.625H9.37501V12.5781C8.78584 12.7302 8.27239 13.092 7.93088 13.5956C7.58937 14.0992 7.44326 14.7101 7.51993 15.3137C7.5966 15.9174 7.89079 16.4723 8.34736 16.8746C8.80393 17.2768 9.39152 17.4987 10 17.4987C10.6085 17.4987 11.1961 17.2768 11.6527 16.8746C12.1092 16.4723 12.4034 15.9174 12.4801 15.3137C12.5568 14.7101 12.4106 14.0992 12.0691 13.5956C11.7276 13.092 11.2142 12.7302 10.625 12.5781V10.625H13.125C13.788 10.625 14.4239 10.3616 14.8928 9.89276C15.3616 9.42392 15.625 8.78803 15.625 8.12499V7.42187C16.1615 7.28253 16.6365 6.96919 16.9758 6.53093C17.3151 6.09267 17.4995 5.55424 17.5 4.99999ZM3.75001 4.99999C3.75001 4.75277 3.82332 4.51109 3.96067 4.30553C4.09802 4.09997 4.29324 3.93975 4.52165 3.84514C4.75006 3.75053 5.00139 3.72578 5.24387 3.77401C5.48635 3.82224 5.70907 3.94129 5.88389 4.11611C6.0587 4.29092 6.17776 4.51365 6.22599 4.75613C6.27422 4.99861 6.24946 5.24994 6.15486 5.47835C6.06025 5.70675 5.90003 5.90198 5.69447 6.03933C5.48891 6.17668 5.24723 6.24999 5.00001 6.24999C4.66849 6.24999 4.35054 6.1183 4.11612 5.88388C3.8817 5.64946 3.75001 5.33151 3.75001 4.99999ZM11.25 15C11.25 15.2472 11.1767 15.4889 11.0393 15.6945C10.902 15.9 10.7068 16.0602 10.4784 16.1548C10.25 16.2495 9.99862 16.2742 9.75614 16.226C9.51367 16.1777 9.29094 16.0587 9.11612 15.8839C8.94131 15.7091 8.82226 15.4863 8.77402 15.2439C8.72579 15.0014 8.75055 14.75 8.84516 14.5216C8.93977 14.2932 9.09998 14.098 9.30554 13.9607C9.5111 13.8233 9.75278 13.75 10 13.75C10.3315 13.75 10.6495 13.8817 10.8839 14.1161C11.1183 14.3505 11.25 14.6685 11.25 15ZM15 6.24999C14.7528 6.24999 14.5111 6.17668 14.3055 6.03933C14.1 5.90198 13.9398 5.70675 13.8452 5.47835C13.7505 5.24994 13.7258 4.99861 13.774 4.75613C13.8223 4.51365 13.9413 4.29092 14.1161 4.11611C14.2909 3.94129 14.5137 3.82224 14.7561 3.77401C14.9986 3.72578 15.25 3.75053 15.4784 3.84514C15.7068 3.93975 15.902 4.09997 16.0393 4.30553C16.1767 4.51109 16.25 4.75277 16.25 4.99999C16.25 5.33151 16.1183 5.64946 15.8839 5.88388C15.6495 6.1183 15.3315 6.24999 15 6.24999Z" fill="#868682" /> </svg> </Icon> <Content> <Widget src="near/widget/DIG.Avatar" props={{ alt: accountId, image: profile.image, size: "small", }} /> <div> <Username>{username}</Username> <Action>{action}</Action> <ComponentName>{componentName}</ComponentName> <Timestamp>{timestamp}</Timestamp> </div> <Desc>{desc}</Desc> </Content> </Notification> </> );