const contract = props.contract || "taskchain.ws-protocol-63"; const componentOwnerId = props.componentOwnerId || "calimero.testnet"; const accountId = context.accountId; const methods = [ "create_new_project", "edit_name", "change_owner", "delete_project", "get_owners_projects", "get_members_projects", "get_project", "get_statuses", "add_status", "reorder_statuses", "remove_status", "add_member", "remove_member", "create_task", "get_task", "change_task_name", "edit_task_description", "assign_task", "remove_assignee", "move_task", "delete_task_by_id", "comment_on_task", "delete_comment_by_id", "edit_comment", "create_label", "get_label", "get_labels", "delete_label", "change_label_text", "change_label_color", "add_label_to_task", "remove_label_from_task", "add_checklist_element", "edit_checklist_element", "mark_checkmark", "delete_checkmark", "upload_file", "remove_file", "set_priority", "reset_priority", "add_application_member", "remove_application_member", "get_application_members", "get_members", "rename_status" ]; const PageContainer = styled.div` display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #0E0E10; padding-left: 60px; padding-right: 60px; padding-top: 30px; padding-bottom: 30px; gap: 24px; `; const TaskChainLogo = styled.a` display: flex; flex-direction: space-between; align-items: center width: 100%; height: 100%; background-color: #0E0E10; color: #FFFFFF; font-family: Inter; font-weight: 700; font-size: 20.92px; line-height: 31.39px; :hover { text-decoration: none; } `; const HeaderContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; position: relative; `; const BoardContainer = styled.div` padding-top: 8px; display: flex; flex-direction: row; justify-content: start; width: 100%; height: 100%; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; `; const [ selectedProjectId, setSelectedProjectId ] = useState( undefined ); const [ bootStrapping, setBootStrapping ] = useState( true ); const [ loggedIn, setLoggedIn ] = useState( false ); const [ functionLoader, setFunctionLoader ] = useState( false ); const [ actionStatuses, setActionStatuses ] = useState( [] ); const addActionStatus = useCallback(( newActionStatus ) => { setActionStatuses( [ ...actionStatuses, newActionStatus ] ); }, [actionStatuses]); const setActionStatusNotVisible = (actionStatus) => { setActionStatuses(actionStatuses.map(status => { if (status.id === actionStatus.id) { return { ...actionStatus, seen: true }; } else { return actionStatus; } })) } const bootStrapApp = () => Near.hasValidCalimeroFak( contract ).then( ( result ) => { if ( result ) { setLoggedIn( true ); setBootStrapping( false ); } else { setLoggedIn( false ); setBootStrapping( false ); } } ); const Logo = () => ( <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.TaskChainLogo` } /> ); if ( !accountId ) { return <>Please login to continue.</>; } if ( bootStrapping ) { bootStrapApp(); return ( <PageContainer> <Widget src={ `${ componentOwnerId }/widget/Calimero.Common.Popups.Loading` } props={ { logo: <Logo />, } } /> </PageContainer> ); } if ( !loggedIn ) { return ( <PageContainer> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.JoinApp` } props={ { contractName: contract, methodNames: methods, componentOwnerId, } } /> </PageContainer> ); } return ( <PageContainer> <HeaderContainer> <Logo /> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.ActionStatus.StatusContainer` } props={ { componentOwnerId, actionStatuses, setActionStatusNotVisible } } /> </HeaderContainer> <Divider>.</Divider> <BoardContainer> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.SideMenu.SideMenu` } props={ { contract, componentOwnerId, selectedProjectId, setSelectedProjectId, functionLoader, setFunctionLoader, accountId, addActionStatus } } /> { selectedProjectId && ( <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.BoardContainer.Board` } props={ { componentOwnerId, contract, projectId: selectedProjectId, addActionStatus, addNewStatus } } /> ) } </BoardContainer> </PageContainer> );