"": "const { href } = VM.require(\\\"thomasguntenaar.testnet/widget/core.lib.url\\\") || {\\n href: () => {},\\n};\\nconst { readableDate } = VM.require(\\n \\\"thomasguntenaar.testnet/widget/core.lib.common\\\"\\n) || { readableDate: () => {} };\\nconst { getDepositAmountForWriteAccess } = VM.require(\\n \\\"thomasguntenaar.testnet/widget/core.lib.common\\\"\\n);\\ngetDepositAmountForWriteAccess || (getDepositAmountForWriteAccess = () => {});\\n\\nconst accountId = context.accountId;\\n/*\\n---props---\\nprops.id: number;\\nprops.timestamp: number; optional\\naccountId: string\\nblockHeight:number\\n*/\\n\\nconst TIMELINE_STATUS = {\\n DRAFT: \\\"DRAFT\\\",\\n REVIEW: \\\"REVIEW\\\",\\n APPROVED: \\\"APPROVED\\\",\\n REJECTED: \\\"REJECTED\\\",\\n CANCELED: \\\"CANCELLED\\\",\\n APPROVED_CONDITIONALLY: \\\"APPROVED_CONDITIONALLY\\\",\\n PAYMENT_PROCESSING: \\\"PAYMENT_PROCESSING\\\",\\n FUNDED: \\\"FUNDED\\\",\\n};\\n\\nconst Container = styled.div`\\n .full-width-div {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n }\\n\\n .fw-bold {\\n font-weight: 600 !important;\\n }\\n\\n .card.no-border {\\n border-left: none !important;\\n border-right: none !important;\\n margin-bottom: -3.5rem;\\n }\\n\\n .description-box {\\n font-size: 14px;\\n }\\n\\n .draft-info-container {\\n background-color: #ecf8fb;\\n }\\n\\n .review-info-container {\\n background-color: #fef6ee;\\n }\\n\\n .text-sm {\\n font-size: 13px !important;\\n }\\n\\n .flex-1 {\\n flex: 1;\\n }\\n\\n .flex-3 {\\n flex: 3;\\n }\\n\\n .circle {\\n width: 20px;\\n height: 20px;\\n border-radius: 50%;\\n border: 1px solid grey;\\n }\\n\\n .green-fill {\\n background-color: rgb(4, 164, 110) !important;\\n border-color: rgb(4, 164, 110) !important;\\n color: white !important;\\n }\\n\\n .yellow-fill {\\n border-color: #ff7a00 !important;\\n }\\n\\n .vertical-line {\\n width: 2px;\\n height: 180px;\\n background-color: lightgrey;\\n }\\n\\n @media screen and (max-width: 970px) {\\n .vertical-line {\\n height: 135px !important;\\n }\\n\\n .vertical-line-sm {\\n height: 70px !important;\\n }\\n\\n .gap-6 {\\n gap: 0.5rem !important;\\n }\\n }\\n\\n @media screen and (max-width: 570px) {\\n .vertical-line {\\n height: 180px !important;\\n }\\n\\n .vertical-line-sm {\\n height: 75px !important;\\n }\\n\\n .gap-6 {\\n gap: 0.5rem !important;\\n }\\n }\\n\\n .vertical-line-sm {\\n width: 2px;\\n height: 70px;\\n background-color: lightgrey;\\n }\\n\\n .form-check-input:disabled ~ .form-check-label,\\n .form-check-input[disabled] ~ .form-check-label {\\n opacity: 1;\\n }\\n\\n .form-check-input {\\n border-color: black !important;\\n }\\n\\n .grey-btn {\\n background-color: #687076;\\n border: none;\\n color: white;\\n }\\n\\n .form-check-input:checked {\\n background-color: #04a46e !important;\\n border-color: #04a46e !important;\\n }\\n\\n .dropdown-toggle:after {\\n position: absolute;\\n top: 46%;\\n right: 5%;\\n }\\n\\n .drop-btn {\\n max-width: none !important;\\n }\\n\\n .dropdown-menu {\\n width: 100%;\\n border-radius: 0.375rem !important;\\n }\\n\\n .green-btn {\\n background-color: #04a46e !important;\\n border: none;\\n color: white;\\n\\n &:active {\\n color: white;\\n }\\n }\\n\\n .gap-6 {\\n gap: 2.5rem;\\n }\\n\\n .border-vertical {\\n border-top: var(--bs-border-width) var(--bs-border-style)\\n var(--bs-border-color) !important;\\n border-bottom: var(--bs-border-width) var(--bs-border-style)\\n var(--bs-border-color) !important;\\n }\\n\\n button.px-0 {\\n padding-inline: 0px !important;\\n }\\n\\n red-icon i {\\n color: red;\\n }\\n`;\\n\\nconst ProposalContainer = styled.div`\\n border: 1px solid lightgrey;\\n overflow: auto;\\n`;\\n\\nconst Header = styled.div`\\n position: relative;\\n background-color: #f4f4f4;\\n height: 50px;\\n\\n .menu {\\n position: absolute;\\n right: 10px;\\n top: 4px;\\n font-size: 30px;\\n }\\n`;\\n\\nconst Text = styled.p`\\n display: block;\\n margin: 0;\\n font-size: 14px;\\n line-height: 20px;\\n font-weight: 400;\\n color: #687076;\\n white-space: nowrap;\\n`;\\n\\nconst Actions = styled.div`\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n margin: -6px -6px 6px;\\n`;\\n\\nconst Avatar = styled.div`\\n width: 40px;\\n height: 40px;\\n pointer-events: none;\\n\\n img {\\n object-fit: cover;\\n border-radius: 40px;\\n width: 100%;\\n height: 100%;\\n }\\n`;\\n\\nconst stepsArray = [1, 2, 3, 4, 5];\\n\\nconst { id, timestamp } = props;\\nconst proposal = Near.view(\\\"thomasguntenaar.testnet\\\", \\\"get_proposal\\\", {\\n proposal_id: parseInt(id),\\n});\\n\\nif (!proposal) {\\n return (\\n <div\\n style={{ height: \\\"50vh\\\" }}\\n className=\\\"d-flex justify-content-center align-items-center w-100\\\"\\n >\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Spinner\\\"}\\n />\\n </div>\\n );\\n}\\nif (timestamp && proposal) {\\n proposal.snapshot =\\n proposal.snapshot_history.find((item) => item.timestamp === timestamp) ??\\n proposal.snapshot;\\n}\\n\\nconst { snapshot } = proposal;\\n\\nconst authorId = proposal.author_id;\\nconst blockHeight = parseInt(proposal.social_db_post_block_height);\\nconst item = {\\n type: \\\"social\\\",\\n path: `thomasguntenaar.testnet/post/main`,\\n blockHeight,\\n};\\nconst proposalURL = `https://near.org/thomasguntenaar.testnet/widget/app?page=proposal&id=${proposal.id}×tamp=${snapshot.timestamp}`;\\n\\nconst KycVerificationStatus = () => {\\n const isVerified = true;\\n return (\\n <div className=\\\"d-flex gap-2 align-items-center\\\">\\n <img\\n src={\\n isVerified\\n ? \\\"https://ipfs.near.social/ipfs/bafkreidqveupkcc7e3rko2e67lztsqrfnjzw3ceoajyglqeomvv7xznusm\\\"\\n : \\\"https://ipfs.near.social/ipfs/bafkreieq4222tf3hkbccfnbw5kpgedm3bf2zcfgzbnmismxav2phqdwd7q\\\"\\n }\\n height={40}\\n />\\n <div className=\\\"d-flex flex-column\\\">\\n <div className=\\\"h6 mb-0\\\">KYC Verified</div>\\n <div className=\\\"text-sm\\\">Expires on Aug 24, 2024</div>\\n </div>\\n </div>\\n );\\n};\\n\\nconst SidePanelItem = ({ title, children, hideBorder }) => {\\n return (\\n <div\\n style={{ gap: \\\"8px\\\" }}\\n className={\\\"d-flex flex-column pb-3 \\\" + (!hideBorder && \\\" border-bottom\\\")}\\n >\\n <div className=\\\"h6 mb-0\\\">{title} </div>\\n <div className=\\\"text-muted\\\">{children}</div>\\n </div>\\n );\\n};\\n\\nconst proposalStatusOptions = [\\n {\\n label: \\\"Draft\\\",\\n value: { status: TIMELINE_STATUS.DRAFT },\\n },\\n {\\n label: \\\"Review\\\",\\n value: {\\n status: TIMELINE_STATUS.REVIEW,\\n sponsor_requested_review: false,\\n reviewer_completed_attestation: false,\\n },\\n },\\n {\\n label: \\\"Approved\\\",\\n value: {\\n status: TIMELINE_STATUS.APPROVED,\\n sponsor_requested_review: true,\\n reviewer_completed_attestation: false,\\n },\\n },\\n {\\n label: \\\"Approved-Conditionally\\\",\\n value: {\\n status: TIMELINE_STATUS.APPROVED_CONDITIONALLY,\\n sponsor_requested_review: true,\\n reviewer_completed_attestation: false,\\n },\\n },\\n {\\n label: \\\"Rejected\\\",\\n value: {\\n status: TIMELINE_STATUS.REJECTED,\\n sponsor_requested_review: true,\\n reviewer_completed_attestation: false,\\n },\\n },\\n {\\n label: \\\"Canceled\\\",\\n value: {\\n status: TIMELINE_STATUS.CANCELED,\\n sponsor_requested_review: false,\\n reviewer_completed_attestation: false,\\n },\\n },\\n {\\n label: \\\"Payment-processing\\\",\\n value: {\\n status: TIMELINE_STATUS.PAYMENT_PROCESSING,\\n kyc_verified: false,\\n test_transaction_sent: false,\\n request_for_trustees_created: false,\\n sponsor_requested_review: true,\\n reviewer_completed_attestation: false,\\n },\\n },\\n {\\n label: \\\"Funded\\\",\\n value: {\\n status: TIMELINE_STATUS.FUNDED,\\n trustees_released_payment: true,\\n kyc_verified: true,\\n test_transaction_sent: true,\\n request_for_trustees_created: true,\\n sponsor_requested_review: true,\\n reviewer_completed_attestation: false,\\n },\\n },\\n];\\n\\nconst LinkedProposals = () => {\\n const linkedProposalsData = [];\\n snapshot.linked_proposals.map((item) => {\\n const data = Near.view(\\\"thomasguntenaar.testnet\\\", \\\"get_proposal\\\", {\\n proposal_id: item,\\n });\\n if (data !== null) {\\n linkedProposalsData.push(data);\\n }\\n });\\n\\n return (\\n <div className=\\\"d-flex flex-column gap-3\\\">\\n {linkedProposalsData.map((item) => {\\n const link = `https://near.org/devhub.near/widget/app?page=proposal&id=${item.id}`;\\n return (\\n <a href={link} target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\">\\n <div className=\\\"d-flex gap-2\\\">\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.Profile\\\"}\\n props={{\\n accountId: item.snapshot.editor_id,\\n }}\\n />\\n <div className=\\\"d-flex flex-column\\\" style={{ maxWidth: 250 }}>\\n <b className=\\\"text-truncate\\\">{item.snapshot.name}</b>\\n <div className=\\\"text-sm text-muted\\\">\\n created on {readableDate(item.snapshot.timestamp / 1000000)}\\n </div>\\n </div>\\n </div>\\n </a>\\n );\\n })}\\n </div>\\n );\\n};\\n\\nconst CheckBox = ({ value, isChecked, label, disabled, onClick }) => {\\n return (\\n <div className=\\\"d-flex gap-2 align-items-center\\\">\\n <input\\n class=\\\"form-check-input\\\"\\n type=\\\"checkbox\\\"\\n value={value}\\n checked={isChecked}\\n disabled={!isModerator || !showTimelineSetting || disabled}\\n onChange={(e) => onClick(e.target.checked)}\\n />\\n <label style={{ width: \\\"90%\\\" }} class=\\\"form-check-label text-black\\\">\\n {label}\\n </label>\\n </div>\\n );\\n};\\n\\nconst RadioButton = ({ value, isChecked, label }) => {\\n return (\\n <div className=\\\"d-flex gap-2 align-items-center\\\">\\n <input\\n class=\\\"form-check-input\\\"\\n type=\\\"radio\\\"\\n value={value}\\n checked={isChecked}\\n disabled={true}\\n />\\n <label class=\\\"form-check-label text-black\\\">{label}</label>\\n </div>\\n );\\n};\\n\\nconst isAllowedToEditProposal = Near.view(\\n \\\"thomasguntenaar.testnet\\\",\\n \\\"is_allowed_to_edit_proposal\\\",\\n {\\n proposal_id: proposal.id,\\n editor: accountId,\\n }\\n);\\n\\nconst isModerator = Near.view(\\\"thomasguntenaar.testnet\\\", \\\"has_moderator\\\", {\\n account_id: accountId,\\n});\\n\\nconst editProposal = ({ timeline }) => {\\n const body = {\\n proposal_body_version: \\\"V0\\\",\\n name: snapshot.name,\\n description: snapshot.description,\\n category: snapshot.category,\\n summary: snapshot.summary,\\n linked_proposals: snapshot.linked_proposals,\\n requested_sponsorship_usd_amount: snapshot.requested_sponsorship_usd_amount,\\n requested_sponsorship_paid_in_currency:\\n snapshot.requested_sponsorship_paid_in_currency,\\n receiver_account: snapshot.receiver_account,\\n supervisor: supervisor || null,\\n requested_sponsor: snapshot.requested_sponsor,\\n timeline: timeline,\\n };\\n const args = { labels: [], body: body, id: proposal.id };\\n\\n Near.call([\\n {\\n contractName: \\\"thomasguntenaar.testnet\\\",\\n methodName: \\\"edit_proposal\\\",\\n args: args,\\n gas: 270000000000000,\\n },\\n ]);\\n};\\n\\nconst editProposalStatus = ({ timeline }) => {\\n Near.call([\\n {\\n contractName: \\\"thomasguntenaar.testnet\\\",\\n methodName: \\\"edit_proposal_timeline\\\",\\n args: {\\n id: proposal.id,\\n timeline: timeline,\\n },\\n gas: 270000000000000,\\n },\\n ]);\\n};\\n\\nconst [isReviewModalOpen, setReviewModal] = useState(false);\\nconst [isCancelModalOpen, setCancelModal] = useState(false);\\nconst [showTimelineSetting, setShowTimelineSetting] = useState(false);\\nconst proposalStatus = useCallback(\\n () =>\\n proposalStatusOptions.find(\\n (i) => i.value.status === snapshot.timeline.status\\n ),\\n [snapshot]\\n);\\nconst [updatedProposalStatus, setUpdatedProposalStatus] = useState({\\n ...proposalStatus(),\\n value: { ...proposalStatus().value, ...snapshot.timeline },\\n});\\nconst [paymentHashes, setPaymentHashes] = useState([\\\"\\\"]);\\nconst [supervisor, setSupervisor] = useState(snapshot.supervisor);\\n\\nconst selectedStatusIndex = useMemo(\\n () =>\\n proposalStatusOptions.findIndex((i) => {\\n return updatedProposalStatus.value.status === i.value.status;\\n }),\\n [updatedProposalStatus]\\n);\\n\\nconst TimelineItems = ({ title, children, value, values }) => {\\n const indexOfCurrentItem = proposalStatusOptions.findIndex((i) =>\\n Array.isArray(values)\\n ? values.includes(i.value.status)\\n : value === i.value.status\\n );\\n let color = \\\"transparent\\\";\\n let statusIndex = selectedStatusIndex;\\n\\n // index 2,3,4,5 is of decision\\n if (selectedStatusIndex === 3 || selectedStatusIndex === 2) {\\n statusIndex = 2;\\n }\\n if (statusIndex === indexOfCurrentItem) {\\n color = \\\"#FEF6EE\\\";\\n }\\n if (\\n statusIndex > indexOfCurrentItem ||\\n updatedProposalStatus.value.status === TIMELINE_STATUS.FUNDED\\n ) {\\n color = \\\"#EEFEF0\\\";\\n }\\n // reject\\n if (statusIndex === 4 && indexOfCurrentItem === 2) {\\n color = \\\"#FF7F7F\\\";\\n }\\n // cancelled\\n if (statusIndex === 5 && indexOfCurrentItem === 2) {\\n color = \\\"#F4F4F4\\\";\\n }\\n\\n return (\\n <div\\n className=\\\"p-2 rounded-3\\\"\\n style={{\\n backgroundColor: color,\\n }}\\n >\\n <div className=\\\"h6 text-black\\\"> {title}</div>\\n <div className=\\\"text-sm\\\">{children}</div>\\n </div>\\n );\\n};\\n\\nconst link = href({\\n widgetSrc: \\\"thomasguntenaar.testnet/widget/app\\\",\\n params: {\\n page: \\\"create-proposal\\\",\\n id: proposal.id,\\n timestamp: timestamp,\\n },\\n});\\n\\nreturn (\\n <Container className=\\\"d-flex flex-column gap-2 w-100 mt-4\\\">\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.ConfirmReviewModal\\\"}\\n props={{\\n isOpen: isReviewModalOpen,\\n onCancelClick: () => setReviewModal(false),\\n onReviewClick: () => {\\n setReviewModal(false);\\n editProposalStatus({ timeline: proposalStatusOptions[1].value });\\n },\\n }}\\n />\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.ConfirmCancelModal\\\"}\\n props={{\\n isOpen: isCancelModalOpen,\\n onCancelClick: () => setCancelModal(false),\\n onConfirmClick: () => {\\n setCancelModal(false);\\n editProposalStatus({ timeline: proposalStatusOptions[5].value });\\n },\\n }}\\n />\\n <div className=\\\"d-flex px-3 px-lg-0 justify-content-between\\\">\\n <div className=\\\"d-flex gap-2 align-items-center h3\\\">\\n <div>{snapshot.name}</div>\\n <div className=\\\"text-muted\\\">#{proposal.id}</div>\\n </div>\\n <div className=\\\"d-flex gap-2 align-items-center\\\">\\n <Widget\\n src=\\\"near/widget/ShareButton\\\"\\n props={{\\n postType: \\\"post\\\",\\n url: proposalURL,\\n }}\\n />\\n {((isAllowedToEditProposal &&\\n snapshot.timeline.status === TIMELINE_STATUS.DRAFT) ||\\n isModerator) && (\\n <Link to={link} style={{ textDecoration: \\\"none\\\" }}>\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"}\\n props={{\\n label: \\\"Edit\\\",\\n classNames: { root: \\\"grey-btn btn-sm\\\" },\\n }}\\n />\\n </Link>\\n )}\\n </div>\\n </div>\\n <div className=\\\"d-flex flex-wrap flex-md-nowrap px-3 px-lg-0 gap-2 align-items-center text-sm pb-3 w-100\\\">\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.StatusTag\\\"}\\n props={{\\n timelineStatus: snapshot.timeline.status,\\n size: \\\"sm\\\",\\n }}\\n />\\n <div className=\\\"w-100 d-flex flex-wrap flex-md-nowrap gap-1 align-items-center\\\">\\n <div className=\\\"fw-bold text-truncate\\\">{authorId} </div>\\n <div>created on {readableDate(snapshot.timestamp / 1000000)}</div>\\n </div>\\n </div>\\n <div className=\\\"card no-border rounded-0 full-width-div px-3 px-lg-0\\\">\\n <div className=\\\"container-xl py-4\\\">\\n {snapshot.timeline.status === TIMELINE_STATUS.DRAFT &&\\n isAllowedToEditProposal && (\\n <div className=\\\"draft-info-container p-3 p-sm-4 d-flex flex-wrap flex-sm-nowrap justify-content-between align-items-center gap-2 rounded-2\\\">\\n <div style={{ minWidth: \\\"300px\\\" }}>\\n <b>\\n This proposal is in draft mode and open for community\\n comments.\\n </b>\\n <p className=\\\"text-sm text-muted mt-2\\\">\\n The author can still refine the proposal and build consensus\\n before sharing it with sponsors. Click \\u{201c}Ready for review\\u{201d} when\\n you want to start the official review process. This will lock\\n the editing function, but comments are still open.\\n </p>\\n </div>\\n <div style={{ minWidth: \\\"fit-content\\\" }}>\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"\\n }\\n props={{\\n label: \\\"Ready for review\\\",\\n classNames: { root: \\\"grey-btn btn-sm\\\" },\\n onClick: () => setReviewModal(true),\\n }}\\n />\\n </div>\\n </div>\\n )}\\n {snapshot.timeline.status === TIMELINE_STATUS.REVIEW &&\\n isAllowedToEditProposal && (\\n <div className=\\\"review-info-container p-3 p-sm-4 d-flex flex-wrap flex-sm-nowrap justify-content-between align-items-center gap-2 rounded-2\\\">\\n <div style={{ minWidth: \\\"300px\\\" }}>\\n <b>\\n This proposal is in review mode and still open for community\\n comments.\\n </b>\\n <p className=\\\"text-sm text-muted mt-2\\\">\\n You can\\u{2019}t edit the proposal, but comments are open. Only\\n moderators can make changes. Click \\u{201c}Cancel Proposal\\u{201d} to cancel\\n your proposal. This changes the status to Canceled, signaling\\n to sponsors that it\\u{2019}s no longer active or relevant.\\n </p>\\n </div>\\n <div style={{ minWidth: \\\"fit-content\\\" }}>\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"\\n }\\n props={{\\n label: (\\n <div className=\\\"d-flex align-items-center gap-1\\\">\\n <i class=\\\"bi bi-trash3\\\"></i> Cancel Proposal\\n </div>\\n ),\\n classNames: { root: \\\"btn-outline-danger btn-sm\\\" },\\n onClick: () => setCancelModal(true),\\n }}\\n />\\n </div>\\n </div>\\n )}\\n <div className=\\\"my-4\\\">\\n <div className=\\\"d-flex flex-wrap gap-6\\\">\\n <div\\n style={{ minWidth: \\\"350px\\\" }}\\n className=\\\"flex-3 order-2 order-md-1\\\"\\n >\\n <div\\n className=\\\"d-flex gap-2 flex-1\\\"\\n style={{\\n zIndex: 99,\\n background: \\\"white\\\",\\n position: \\\"relative\\\",\\n }}\\n >\\n <div className=\\\"d-none d-sm-flex\\\">\\n <Widget\\n src={\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.Profile\\\"}\\n props={{\\n accountId: authorId,\\n }}\\n />\\n </div>\\n <ProposalContainer className=\\\"rounded-2 flex-1\\\">\\n <Header className=\\\"d-flex gap-1 align-items-center p-2 px-3 \\\">\\n <div\\n className=\\\"fw-bold text-truncate\\\"\\n style={{ maxWidth: \\\"60%\\\" }}\\n >\\n {authorId}\\n </div>\\n <div\\n className=\\\"text-muted\\\"\\n style={{ minWidth: \\\"fit-content\\\" }}\\n >\\n \\u{ff65}{\\\" \\\"}\\n <Widget\\n src=\\\"near/widget/TimeAgo\\\"\\n props={{\\n blockHeight,\\n blockTimestamp: snapshot.timestamp,\\n }}\\n />\\n {context.accountId && (\\n <div className=\\\"menu\\\">\\n <Widget\\n src=\\\"near/widget/Posts.Menu\\\"\\n props={{\\n accountId: authorId,\\n blockHeight: blockHeight,\\n }}\\n />\\n </div>\\n )}\\n </div>\\n </Header>\\n <div className=\\\"d-flex flex-column gap-1 p-2 px-3 description-box\\\">\\n <div className=\\\"text-muted h6 border-bottom pb-1 mt-3\\\">\\n PROPOSAL CATEGORY\\n </div>\\n <div>\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.CategoryDropdown\\\"\\n }\\n props={{\\n selectedValue: snapshot.category,\\n disabled: true,\\n }}\\n />\\n </div>\\n <div className=\\\"text-muted h6 border-bottom pb-1 mt-3\\\">\\n SUMMARY\\n </div>\\n <div>{snapshot.summary}</div>\\n <div className=\\\"text-muted h6 border-bottom pb-1 mt-3 mb-4\\\">\\n DESCRIPTION\\n </div>\\n <Widget\\n src=\\\"thomasguntenaar.testnet/widget/devhub.components.molecule.MarkdownViewer\\\"\\n props={{ text: snapshot.description }}\\n />\\n\\n <div className=\\\"d-flex gap-2 align-items-center mt-4\\\">\\n <Widget\\n src=\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.LikeButton\\\"\\n props={{\\n item,\\n proposalId: proposal.id,\\n notifyAccountId: authorId,\\n }}\\n />\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.CommentIcon\\\"\\n }\\n props={{\\n item,\\n showOverlay: false,\\n onClick: () => {},\\n }}\\n />\\n <Widget\\n src=\\\"near/widget/CopyUrlButton\\\"\\n props={{\\n url: proposalURL,\\n }}\\n />\\n </div>\\n </div>\\n </ProposalContainer>\\n </div>\\n <div className=\\\"border-bottom pb-4 mt-4\\\">\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.CommentsAndLogs\\\"\\n }\\n props={{\\n ...props,\\n id: proposal.id,\\n item: item,\\n snapshotHistory: [...proposal.snapshot_history, snapshot],\\n }}\\n />\\n </div>\\n <div\\n style={{\\n position: \\\"relative\\\",\\n zIndex: 99,\\n backgroundColor: \\\"white\\\",\\n }}\\n className=\\\"pt-4\\\"\\n >\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.ComposeComment\\\"\\n }\\n props={{\\n ...props,\\n item: item,\\n notifyAccountId: authorId,\\n id: proposal.id,\\n }}\\n />\\n </div>\\n </div>\\n <div\\n style={{ minWidth: \\\"350px\\\" }}\\n className=\\\"d-flex flex-column gap-4 flex-1 order-1 order-md-2\\\"\\n >\\n <SidePanelItem title=\\\"Author\\\">\\n <Widget\\n src=\\\"near/widget/AccountProfile\\\"\\n props={{\\n accountId: authorId,\\n noOverlay: true,\\n }}\\n />\\n </SidePanelItem>\\n <SidePanelItem\\n title={\\n \\\"Linked Proposals \\\" + `(${snapshot.linked_proposals.length})`\\n }\\n >\\n <LinkedProposals />\\n </SidePanelItem>\\n <SidePanelItem title=\\\"Funding Ask\\\">\\n <div className=\\\"h4 text-black\\\">\\n {snapshot.requested_sponsorship_usd_amount && (\\n <div className=\\\"d-flex flex-column gap-1\\\">\\n <div>\\n {parseInt(\\n snapshot.requested_sponsorship_usd_amount\\n ).toLocaleString()}{\\\" \\\"}\\n USD\\n </div>\\n <div className=\\\"text-sm text-muted\\\">\\n Requested in{\\\" \\\"}\\n {snapshot.requested_sponsorship_paid_in_currency}\\n </div>\\n </div>\\n )}\\n </div>\\n </SidePanelItem>\\n <SidePanelItem title=\\\"Recipient Wallet Address\\\">\\n <Widget\\n src=\\\"near/widget/AccountProfile\\\"\\n props={{\\n accountId: snapshot.receiver_account,\\n noOverlay: true,\\n }}\\n />\\n </SidePanelItem>\\n <SidePanelItem title=\\\"Recipient Verification Status\\\">\\n <Widget\\n src=\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.VerificationStatus\\\"\\n props={{\\n receiverAccount: snapshot.receiver_account,\\n showGetVerifiedBtn:\\n accountId === snapshot.receiver_account ||\\n accountId === authorId,\\n }}\\n />\\n </SidePanelItem>\\n <SidePanelItem title=\\\"Requested Sponsor\\\">\\n {snapshot.requested_sponsor && (\\n <Widget\\n src=\\\"near/widget/AccountProfile\\\"\\n props={{\\n accountId: snapshot.requested_sponsor,\\n noOverlay: true,\\n }}\\n />\\n )}\\n </SidePanelItem>\\n <SidePanelItem title=\\\"Supervisor\\\">\\n {snapshot.supervisor ? (\\n <Widget\\n src=\\\"near/widget/AccountProfile\\\"\\n props={{\\n accountId: snapshot.supervisor,\\n noOverlay: true,\\n }}\\n />\\n ) : (\\n \\\"No Supervisor\\\"\\n )}\\n </SidePanelItem>\\n <SidePanelItem\\n hideBorder={true}\\n title={\\n <div>\\n <div className=\\\"d-flex justify-content-between align-content-center\\\">\\n Timeline\\n {isModerator && (\\n <div onClick={() => setShowTimelineSetting(true)}>\\n <i class=\\\"bi bi-gear\\\"></i>\\n </div>\\n )}\\n </div>\\n {showTimelineSetting && (\\n <div className=\\\"mt-2 d-flex flex-column gap-2\\\">\\n <h6 className=\\\"mb-0\\\">Proposal Status</h6>\\n <Widget\\n src=\\\"thomasguntenaar.testnet/widget/devhub.components.molecule.DropDown\\\"\\n props={{\\n options: proposalStatusOptions,\\n selectedValue: updatedProposalStatus,\\n onUpdate: (v) => {\\n setUpdatedProposalStatus({\\n ...v,\\n value: {\\n ...v.value,\\n ...updatedProposalStatus.value,\\n status: v.value.status,\\n },\\n });\\n },\\n }}\\n />\\n </div>\\n )}\\n </div>\\n }\\n >\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n <div className=\\\"d-flex gap-3 mt-2\\\">\\n <div className=\\\"d-flex flex-column\\\">\\n {stepsArray.map((_, index) => {\\n const indexOfCurrentItem = index;\\n let color = \\\"\\\";\\n let statusIndex = selectedStatusIndex;\\n // index 2,3,4 is of decision\\n if (\\n selectedStatusIndex === 3 ||\\n selectedStatusIndex === 2 ||\\n selectedStatusIndex === 4 ||\\n selectedStatusIndex === 5\\n ) {\\n statusIndex = 2;\\n }\\n if (selectedStatusIndex === 6) {\\n statusIndex = 3;\\n }\\n const current = statusIndex === indexOfCurrentItem;\\n const completed =\\n statusIndex > indexOfCurrentItem ||\\n updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.FUNDED;\\n return (\\n <div className=\\\"d-flex flex-column align-items-center gap-1\\\">\\n <div\\n className={\\n \\\"circle \\\" +\\n (completed && \\\" green-fill \\\") +\\n (current && \\\" yellow-fill \\\")\\n }\\n >\\n {completed && (\\n <div\\n className=\\\"d-flex justify-content-center align-items-center\\\"\\n style={{ height: \\\"110%\\\" }}\\n >\\n <i class=\\\"bi bi-check\\\"></i>\\n </div>\\n )}\\n </div>\\n\\n {index !== stepsArray.length - 1 && (\\n <div\\n className={\\n \\\"vertical-line\\\" +\\n (index === stepsArray.length - 2\\n ? \\\"-sm \\\"\\n : \\\" \\\") +\\n (completed && \\\" green-fill \\\") +\\n (current && \\\" yellow-fill \\\")\\n }\\n ></div>\\n )}\\n </div>\\n );\\n })}\\n </div>\\n <div className=\\\"d-flex flex-column gap-3\\\">\\n <TimelineItems\\n title=\\\"1) Draft\\\"\\n value={TIMELINE_STATUS.DRAFT}\\n >\\n <div>\\n Once an author submits a proposal, it is in draft mode\\n and open for community comments. The author can still\\n make changes to the proposal during this stage and\\n submit it for official review when ready.\\n </div>\\n </TimelineItems>\\n <TimelineItems\\n title=\\\"2) Review\\\"\\n value={TIMELINE_STATUS.REVIEW}\\n >\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n Sponsors who agree to consider the proposal may\\n request attestations from work groups.\\n <CheckBox\\n value=\\\"\\\"\\n disabled={selectedStatusIndex !== 1}\\n onClick={(value) =>\\n setUpdatedProposalStatus((prevState) => ({\\n ...prevState,\\n value: {\\n ...prevState.value,\\n sponsor_requested_review: value,\\n },\\n }))\\n }\\n label=\\\"Sponsor provides feedback or requests reviews\\\"\\n isChecked={\\n updatedProposalStatus.value\\n .sponsor_requested_review\\n }\\n />\\n <CheckBox\\n value=\\\"\\\"\\n disabled={selectedStatusIndex !== 1}\\n label=\\\"Reviewer completes attestations (Optional)\\\"\\n onClick={(value) =>\\n setUpdatedProposalStatus((prevState) => ({\\n ...prevState,\\n value: {\\n ...prevState.value,\\n reviewer_completed_attestation: value,\\n },\\n }))\\n }\\n isChecked={\\n updatedProposalStatus.value\\n .reviewer_completed_attestation\\n }\\n />\\n </div>\\n </TimelineItems>\\n <TimelineItems\\n title=\\\"3) Decision\\\"\\n values={[\\n TIMELINE_STATUS.APPROVED,\\n TIMELINE_STATUS.APPROVED_CONDITIONALLY,\\n TIMELINE_STATUS.REJECTED,\\n ]}\\n >\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n <div>Sponsor makes a final decision:</div>\\n <RadioButton\\n value=\\\"\\\"\\n label={<div className=\\\"fw-bold\\\">Approved</div>}\\n isChecked={\\n updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.APPROVED\\n }\\n />\\n <RadioButton\\n value=\\\"\\\"\\n label={\\n <>\\n <div className=\\\"fw-bold\\\">\\n Approved - Conditional{\\\" \\\"}\\n </div>\\n <span>\\n Require follow up from recipient after payment\\n </span>\\n </>\\n }\\n isChecked={\\n updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.APPROVED_CONDITIONALLY\\n }\\n />\\n <RadioButton\\n value=\\\"Reject\\\"\\n label={<div className=\\\"fw-bold\\\">Rejected</div>}\\n isChecked={\\n updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.REJECTED\\n }\\n />\\n <RadioButton\\n value=\\\"Canceled\\\"\\n label={<div className=\\\"fw-bold\\\">Canceled</div>}\\n isChecked={\\n updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.CANCELED\\n }\\n />\\n </div>\\n </TimelineItems>\\n <TimelineItems\\n title=\\\"4) Payment Processing\\\"\\n value={TIMELINE_STATUS.PAYMENT_PROCESSING}\\n >\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n <CheckBox\\n value={updatedProposalStatus.value.kyc_verified}\\n label=\\\"Sponsor verifies KYC/KYB\\\"\\n disabled={selectedStatusIndex !== 6}\\n onClick={(value) =>\\n setUpdatedProposalStatus((prevState) => ({\\n ...prevState,\\n value: {\\n ...prevState.value,\\n kyc_verified: value,\\n },\\n }))\\n }\\n isChecked={updatedProposalStatus.value.kyc_verified}\\n />\\n <CheckBox\\n value={\\n updatedProposalStatus.value.test_transaction_sent\\n }\\n disabled={selectedStatusIndex !== 6}\\n label=\\\"Sponsor confirmed sponsorship and shared funding steps with recipient\\\"\\n onClick={(value) =>\\n setUpdatedProposalStatus((prevState) => ({\\n ...prevState,\\n value: {\\n ...prevState.value,\\n test_transaction_sent: value,\\n },\\n }))\\n }\\n isChecked={\\n updatedProposalStatus.value.test_transaction_sent\\n }\\n />\\n {/* Not needed for Alpha testing */}\\n {/* <CheckBox\\n value=\\\"\\\"\\n disabled={selectedStatusIndex !== 6}\\n label=\\\"Sponsor sends test transaction\\\"\\n onClick={(value) =>\\n setUpdatedProposalStatus((prevState) => ({\\n ...prevState,\\n value: {\\n ...prevState.value,\\n test_transaction_sent: value\\n }\\n }))\\n }\\n isChecked={\\n updatedProposalStatus.value.test_transaction_sent\\n }\\n />\\n <CheckBox\\n value=\\\"\\\"\\n disabled={selectedStatusIndex !== 6}\\n label=\\\"Sponsor creates funding request from Trustees\\\"\\n onClick={(value) =>\\n setUpdatedProposalStatus((prevState) => ({\\n ...prevState,\\n value: {\\n ...prevState.value,\\n request_for_trustees_created: value\\n }\\n }))\\n }\\n isChecked={\\n updatedProposalStatus.value\\n .request_for_trustees_created\\n }\\n /> */}\\n </div>\\n </TimelineItems>\\n <TimelineItems\\n title=\\\"5) Funded\\\"\\n value={TIMELINE_STATUS.FUNDED}\\n >\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n {paymentHashes?.length && paymentHashes[0] ? (\\n paymentHashes.map((link) => (\\n <a\\n href={link}\\n className=\\\"text-decoration-underline\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener noreferrer\\\"\\n >\\n Payment Link\\n <i class=\\\"bi bi-arrow-up-right\\\"></i>\\n </a>\\n ))\\n ) : updatedProposalStatus.value.payouts.length > 0 ? (\\n <div>\\n {updatedProposalStatus.value.payouts.map(\\n (link) => {\\n return (\\n <a\\n href={link}\\n className=\\\"text-decoration-underline\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener noreferrer\\\"\\n >\\n Payment Link\\n <i class=\\\"bi bi-arrow-up-right\\\"></i>\\n </a>\\n );\\n }\\n )}\\n </div>\\n ) : (\\n \\\"No Payouts yet\\\"\\n )}\\n </div>\\n </TimelineItems>\\n </div>\\n </div>\\n {showTimelineSetting && (\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n <div className=\\\"border-vertical py-3 my-2\\\">\\n <label className=\\\"text-black h6\\\">Supervisor</label>\\n <Widget\\n src=\\\"thomasguntenaar.testnet/widget/devhub.entity.proposal.AccountInput\\\"\\n props={{\\n value: supervisor,\\n placeholder: \\\"Enter Supervisor\\\",\\n onUpdate: setSupervisor,\\n }}\\n />\\n </div>\\n {updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.FUNDED && (\\n <div className=\\\"border-vertical py-3 my-2\\\">\\n <label className=\\\"text-black h6\\\">Payment Link</label>\\n <div className=\\\"d-flex flex-column gap-2\\\">\\n {paymentHashes.map((item, index) => (\\n <div className=\\\"d-flex gap-2 justify-content-between align-items-center\\\">\\n <Widget\\n src=\\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Input\\\"\\n props={{\\n className: \\\"flex-grow-1\\\",\\n value: item,\\n onChange: (e) => {\\n const updatedHashes = [...paymentHashes];\\n updatedHashes[index] = e.target.value;\\n setPaymentHashes(updatedHashes);\\n },\\n skipPaddingGap: true,\\n placeholder: \\\"Enter URL\\\",\\n }}\\n />\\n <div style={{ minWidth: 20 }}>\\n {index !== paymentHashes.length - 1 ? (\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"\\n }\\n props={{\\n classNames: {\\n root: \\\"btn-outline-danger shadow-none w-100\\\",\\n },\\n label: <i class=\\\"bi bi-trash3 h6\\\"></i>,\\n onClick: () => {\\n const updatedHashes = [\\n ...paymentHashes,\\n ];\\n updatedHashes.splice(index, 1);\\n setPaymentHashes(updatedHashes);\\n },\\n }}\\n />\\n ) : (\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"\\n }\\n props={{\\n classNames: {\\n root: \\\"green-btn shadow-none border-0 w-100\\\",\\n },\\n label: <i class=\\\"bi bi-plus-lg\\\"></i>,\\n onClick: () =>\\n setPaymentHashes([\\n ...paymentHashes,\\n \\\"\\\",\\n ]),\\n }}\\n />\\n )}\\n </div>\\n </div>\\n ))}\\n </div>\\n </div>\\n )}\\n <div className=\\\"d-flex gap-2 align-items-center justify-content-end text-sm\\\">\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"\\n }\\n props={{\\n label: \\\"Cancel\\\",\\n classNames: {\\n root: \\\"btn-outline-danger border-0 shadow-none btn-sm\\\",\\n },\\n onClick: () => {\\n setShowTimelineSetting(false);\\n setUpdatedProposalStatus(proposalStatus);\\n },\\n }}\\n />\\n <Widget\\n src={\\n \\\"thomasguntenaar.testnet/widget/devhub.components.molecule.Button\\\"\\n }\\n props={{\\n label: \\\"Save\\\",\\n disabled: !supervisor,\\n classNames: { root: \\\"green-btn btn-sm\\\" },\\n onClick: () => {\\n if (!supervisor) {\\n return;\\n }\\n if (snapshot.supervisor !== supervisor) {\\n editProposal({\\n timeline: updatedProposalStatus.value,\\n });\\n } else if (\\n updatedProposalStatus.value.status ===\\n TIMELINE_STATUS.FUNDED\\n ) {\\n editProposalStatus({\\n timeline: {\\n ...updatedProposalStatus.value,\\n payouts: !paymentHashes[0]\\n ? []\\n : paymentHashes.filter(\\n (item) => item !== \\\"\\\"\\n ),\\n },\\n });\\n } else {\\n editProposalStatus({\\n timeline: updatedProposalStatus.value,\\n });\\n }\\n },\\n }}\\n />\\n </div>\\n </div>\\n )}\\n </div>\\n </SidePanelItem>\\n </div>\\n </div>\\n </div>\\n </div>\\n </div>\\n </Container>\\n);\\n"