@oasisomniverse/nextjs 1.0.0

package/src/components/popups/nft/Solana.tsx

@@ -0,0 +1,71 @@
+'use client';
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+
+import '../../../assets/scss/nft.scss';
+import ProviderDropdown from '../../common/ProviderDropdown';
+
+class Solana extends React.Component {
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal 
+                    centered 
+                    className="custom-modal custom-popup-component" 
+                    show={show} 
+                    onHide={() => hide('nft', 'solana')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('nft', 'solana')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="nft-container solana">
+                                <h1 className="single-heading">Solana Provider</h1>
+
+                                <div className="form-container">
+                                    <form>
+                                        <p className="single-form-row">
+                                            <label>Solana : </label>
+                                             <input type="text" />
+                                        </p>
+
+                                        <ProviderDropdown />
+
+                                        <p className="single-form-row">
+                                            <label>To Avatar :</label>
+                                            <input type="text" />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>Or Wallet Address :</label>
+                                            <input type="text" />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>Message :</label>
+                                            <textarea ></textarea>
+                                        </p>
+                                        
+                                        <p className="single-form-row btn-right">
+                                            <button 
+                                                className="sm-button" 
+                                                type="submit"
+                                            >Send</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default Solana;

package/src/components/popups/nft/components/ManageOasisNft.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageOasisNft extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('nft', 'manageOasisNft')}
+                >
+                    <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('nft', 'manageOasisNft')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageOasisNft;

package/src/components/popups/nft/components/PurchaseOasisNft.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class PurchaseOasisNft extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('nft', 'purchaseOasisNft')}
+                >
+                    <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('nft', 'purchaseOasisNft')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default PurchaseOasisNft;

package/src/components/popups/nft/components/PurchaseOasisVirtualLandNft.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class PurchaseOasisVirtualLandNft extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('nft', 'purchaseOasisVirtualLandNft')}
+                >
+                    <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('nft', 'purchaseOasisVirtualLandNft')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default PurchaseOasisVirtualLandNft;

package/src/components/popups/nft/components/SearchOasisNft.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class SearchOasisNft extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('nft', 'searchOasisNft')}
+                >
+                    <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('nft', 'searchOasisNft')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchOasisNft;

package/src/components/popups/nft/components/ViewOasisNft.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewOasisNft extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('nft', 'viewOasisNft')}
+                >
+                    <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('nft', 'viewOasisNft')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewOasisNft;

package/src/components/popups/nft/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+import React from 'react';
+
+import ManageOasisNft from './components/ManageOasisNft';
+import PurchaseOasisNft from './components/PurchaseOasisNft';
+import ViewOasisNft from './components/ViewOasisNft';
+import PurchaseOasisVirtualLandNft from './components/PurchaseOasisVirtualLandNft';
+import SearchOasisNft from './components/SearchOasisNft';
+
+class Quest extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <ViewOasisNft
+                    show={props.nft.viewOasisNft}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageOasisNft
+                    show={props.nft.manageOasisNft}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <PurchaseOasisNft
+                    show={props.nft.purchaseOasisNft}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <PurchaseOasisVirtualLandNft
+                    show={props.nft.purchaseOasisVirtualLandNft}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchOasisNft
+                    show={props.nft.searchOasisNft}
+                    hide={props.toggleScreenPopup}
+                />
+                
+            </>
+        )
+    }
+}
+
+export default Quest;

package/src/components/popups/oapp/components/CreateOAPP.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class CreateOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'createOAPP')}
+                >
+                    <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', 'createOAPP')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default CreateOAPP;

package/src/components/popups/oapp/components/DeployOAPP.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class DeployOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'deployOAPP')}
+                >
+                    <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', 'deployOAPP')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default DeployOAPP;

package/src/components/popups/oapp/components/DownloadOurWorld.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class DownloadOurWorld extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'downloadOurWorld')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>STAR ODK Coming Soon.</h2>
+                        <p>The alpha release of this will be coming soon… please check back soon… thank you.</p>
+                        <button onClick={() => hide('oapp', 'downloadOurWorld')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default DownloadOurWorld;

package/src/components/popups/oapp/components/EditOAPP.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class EditOAPP extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('oapp', 'editOAPP')}
+                >
+                    <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', 'editOAPP')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default EditOAPP;

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

@@ -0,0 +1,35 @@
+'use client';
+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.tsx

@@ -0,0 +1,35 @@
+'use client';
+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.tsx

@@ -0,0 +1,69 @@
+'use client';
+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.tsx

@@ -0,0 +1,35 @@
+'use client';
+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;