@oasisomniverse/react 1.0.0

package/src/components/popups/oapp/components/InstallOAPP.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class InstallOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'installOAPP')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>STAR ODK Coming Soon.</h2>
+                        <p>This is functionaliy that is built in the STAR ODK and will soon be released. You can then download STAR ODK from the Developer menu.</p>
+                        <button onClick={() => hide('oapp', 'installOAPP')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default InstallOAPP;

package/src/components/popups/oapp/components/LaunchOAPP.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class LaunchOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'launchOAPP')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>STAR ODK Coming Soon.</h2>
+                        <p>This is functionaliy that is built in the STAR ODK and will soon be released. You can then download STAR ODK from the Developer menu.</p>
+                        <button onClick={() => hide('oapp', 'launchOAPP')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default LaunchOAPP;

package/src/components/popups/oapp/components/ManageOAPP.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+// import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="md"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'manageOAPP')}
+                >
+                    <Modal.Body className="">
+                        <div className="popup-heading">
+                            <h3>OAPPS INSTALLED</h3>
+                        </div>
+
+                        <div className="all-oaps-data">
+                            <div>
+                                <p>hAPP: 5</p>
+                                <p>SOLID: 3</p>
+                                <p>ETH: 7</p>
+                                <p>WEB: 3</p>
+                            </div>
+
+                            <p>Total: 18</p>
+                        </div>
+
+                        <div className="all-oaps-table">
+                            <div className="oapp-table-heading">
+                                <p>OAPP</p>
+                                <p>Installed</p>
+                                <p>Version</p>
+                                <p>Type</p>
+                            </div>
+
+                            <div className="oapp-table-data">
+                                <div className="oapp-table-row">
+                                    <div className="oapp-single-row">
+                                        <p>Our World</p>
+                                        <p>01/01/2023</p>
+                                        <p>Alpha 0.01</p>
+                                        <p>hApp</p>
+                                    </div>
+
+                                    <div className="oapp-single-row">
+                                        <p>Our World</p>
+                                        <p>01/01/2023</p>
+                                        <p>Alpha 0.01</p>
+                                        <p>hApp</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageOAPP;

package/src/components/popups/oapp/components/SearchOAPP.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class SearchOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'searchOAPP')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>STAR ODK Coming Soon.</h2>
+                        <p>This is functionaliy that is built in the STAR ODK and will soon be released. You can then download STAR ODK from the Developer menu.</p>
+                        <button onClick={() => hide('oapp', 'searchOAPP')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchOAPP;

package/src/components/popups/oapp/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import CreateOAPP from './components/CreateOAPP';
+import DeployOAPP from './components/DeployOAPP';
+import DownloadOurWorld from './components/DownloadOurWorld';
+import EditOAPP from './components/EditOAPP';
+import InstallOAPP from './components/InstallOAPP';
+import LaunchOAPP from './components/LaunchOAPP';
+import ManageOAPP from './components/ManageOAPP';
+
+import SearchOAPP from './components/SearchOAPP';
+
+class OAPP extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <CreateOAPP
+                    show={props.oapp.createOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <DeployOAPP
+                    show={props.oapp.deployOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <DownloadOurWorld
+                    show={props.oapp.downloadOurWorld}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <EditOAPP
+                    show={props.oapp.editOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <InstallOAPP
+                    show={props.oapp.installOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <LaunchOAPP
+                    show={props.oapp.launchOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageOAPP
+                    show={props.oapp.manageOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchOAPP
+                    show={props.oapp.searchOAPP}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default OAPP;

package/src/components/popups/provider/components/ActivityPub.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ActivityPub extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'activityPub')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'activityPub')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ActivityPub;

package/src/components/popups/provider/components/CompareProviderSpeeds.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+// import InfoIcon from '../../../../assets/images/icon-info.svg'
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class CompareProviderSpeeds extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "provider",
+                headerName: "Provider",
+            },
+            {
+                fieldName: "installed",
+                headerName: "Installed",
+            },
+            {
+                fieldName: "view",
+                headerName: "View",
+            },
+            {
+                fieldName: "running",
+                headerName: "Running",
+            },
+            {
+                fieldName: "vpTime",
+                headerName: "VPTime"
+            }
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+        loading: true,
+        loggedIn: true,
+    };
+
+    onGridReady = async (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    }
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="xl"
+                    show={show}
+                    dialogClassName=""
+                    className="custom-modal custom-popup-component"
+                    onHide={() => hide('providers', 'compareProviderSpeeds')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <span className="form-cross-icon" onClick={() => hide('providers', 'compareProviderSpeeds')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        {/* <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'compareProviderSpeeds')}>OK</button> */}
+                        
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <div className="ag-theme-alpine custom-ag-parent">
+                                    <AgGridReact
+                                        columnDefs={this.state.columnDefs}
+                                        defaultColDef={this.state.defaultColDef}
+                                        onGridReady={this.onGridReady}
+                                        rowData={this.state.rowData}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default CompareProviderSpeeds;

package/src/components/popups/provider/components/Eosio.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Eosio extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'Eosio')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'eosio')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Eosio;

package/src/components/popups/provider/components/Ethereum.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Ethereum extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'ethereum')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'ethereum')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Ethereum;

package/src/components/popups/provider/components/Holochain.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Holochain extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'holochain')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('providers', 'holochain')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Holochain;

package/src/components/popups/provider/components/Ipfs.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class Ipfs extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'ipfs')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.
+</p>
+                        <button onClick={() => hide('providers', 'ipfs')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Ipfs;

package/src/components/popups/provider/components/ManageAutoFailOver.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageAutoFailOver extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'manageAutoFailOver')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'manageAutoFailOver')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageAutoFailOver;

package/src/components/popups/provider/components/ManageAutoReplicaton.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageAutoReplicaton extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'manageAutoReplicaton')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'manageAutoReplicaton')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageAutoReplicaton;

package/src/components/popups/provider/components/ManageLoadBalancing.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageLoadBalancing extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'manageLoadBalancing')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'manageLoadBalancing')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageLoadBalancing;

package/src/components/popups/provider/components/ManageProviders.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageProviders extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('providers', 'manageProviders')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('providers', 'manageProviders')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageProviders;