@oasisomniverse/react 1.0.0

package/src/components/popups/mission/components/ViewMission.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 ViewMission extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('mission', 'viewMission')}
+                >
+                    <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('mission', 'viewMission')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewMission;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import ManageMission from './components/ManageMission';
+import SearchMission from './components/SearchMission';
+import ViewMission from './components/ViewMission';
+
+class Mission extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <ViewMission
+                    show={props.mission.viewMission}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageMission
+                    show={props.mission.manageMission}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchMission
+                    show={props.mission.searchMission}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Mission;

package/src/components/popups/nft/ContactPopup.jsx

@@ -0,0 +1,146 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+
+import '../../../assets/scss/contact-popup.scss';
+
+import { AgGridReact } from 'ag-grid-react';
+
+var filterParams = {
+    comparator: function (filterLocalDateAtMidnight, cellValue) {
+        var dateAsString = cellValue;
+        if (dateAsString === null) return -1;
+        var dateParts = dateAsString.split('/');
+        var cellDate = new Date(
+            Number(dateParts[2]),
+            Number(dateParts[1]) - 1,
+            Number(dateParts[0])
+        );
+        if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
+            return 0;
+        }
+        if (cellDate < filterLocalDateAtMidnight) {
+            return -1;
+        }
+        if (cellDate > filterLocalDateAtMidnight) {
+            return 1;
+        }
+    },
+    browserDatePicker: true,
+};
+
+class ContactPopup extends React.Component {
+
+    state = {
+        columnDefs: [
+            { 
+                field: 'athlete'
+            },
+            {
+                field: 'age',
+                filter: 'agNumberColumnFilter',
+                maxWidth: 100,
+            },
+            { field: 'country' },
+            {
+                field: 'year',
+                maxWidth: 100,
+            },
+            {
+                field: 'date',
+                filter: 'agDateColumnFilter',
+                filterParams: filterParams,
+            },
+            { field: 'sport' },
+            {
+                field: 'gold',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'silver',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'bronze',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'total',
+                filter: false,
+            },
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+    };
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    
+        const updateData = (data) => {
+          this.setState({ rowData: data });
+        };
+    
+        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+          .then((resp) => resp.json())
+          .then((data) => updateData(data));
+    };
+
+    
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal 
+                    centered 
+                    className="custom-modal custom-contact-modal custom-popup-component" 
+                    show={show} 
+                    onHide={() => hide('nft', 'contactPopup')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('nft', 'contactPopup')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container contact-Popup default-popup">
+                            <div className="popup-content">
+                                <h1 className="single-heading">Contacts</h1>
+                                <div className="button-bar">
+                                    <button className="sm-button" >Friends</button>
+                                    <button className="sm-button">Family</button>
+                                    <button className="sm-button">Colleagues</button>
+                                    <button className="sm-button">My list 1</button>
+                                    <button className="sm-button">My list 2</button>    
+                                </div>   
+                            </div>
+                            
+                            <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 className="right-btn">
+                                <button className="sm-button" >Find Avatar</button>
+                                <button className="sm-button" >Create List</button>
+                            </div>
+                            
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ContactPopup;

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

@@ -0,0 +1,70 @@
+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.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 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.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 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.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 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.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 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.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 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.jsx

@@ -0,0 +1,45 @@
+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.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 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.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 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.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 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.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 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;