import React, { useCallback, useEffect, useState } from 'react'; import { Row, Col, Card, Button, Container } from 'react-bootstrap'; import { Project } from '../../core/project'; import Overview from './project/Overview'; import Contracts from './project/Contracts'; import Permissions from './project/Permissions'; import Receipts from './project/Receipts'; import Preview from './project/Preview'; import Loading from '../bootstrap/Loading'; import Gems from './project/Gems'; const Components = { Overview, Contracts, Permissions, Receipts, Preview, Gems, }; function ProjectCenter({ project = { deployedProject: {}, } as any, selectTab, defaultSelectedComponent = 'Overview', defaultComponentProps = null, }: { project: Project; selectTab: (tab: string, props?: any) => void; defaultSelectedComponent?: string; defaultComponentProps?: any; }) { const [selectedComponent, setSelectedComponent] = useState( defaultSelectedComponent ); const [Component, setComponent] = useState( React.createElement(Components[selectedComponent], { project, }) ); const selectComponent = useCallback( (componentName: string, props?: any) => { setSelectedComponent(componentName); setComponent( React.createElement(Components[componentName], { project, selectTab, selectComponent, ...(props || {}), }) ); window.scrollTo(0, 0); }, [setSelectedComponent, selectTab, project] ); useEffect(() => { selectComponent(defaultSelectedComponent, defaultComponentProps); }, [selectComponent, defaultSelectedComponent, defaultComponentProps]); return ( <> {!project ? ( ) : ( <>

{project.name}{' '} @ { project.deployedProject?.version ?.version } {' '} {' '}

{project.description || 'No description available'}
{ project.deployedProject?.network ?.name } chainId{' '} { project.deployedProject?.network ?.chainId } deployer{' '} {project.deployedProject?.deployer}

{Object.keys(Components).map((componentName) => { return ( {componentName} ); })} )}
{Component ? Component : null} ); } export default ProjectCenter;