const contract = props.contract || 'taskchain.ws-protocol-63'; const componentOwnerId = props.componentOwnerId || 'calimero.testnet'; const accountId = context.accountId; 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 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, 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, }} /> )} </BoardContainer> </PageContainer> );