@oasisomniverse/react 1.0.0

package/src/components/common/sidebar/SidebarMenuItem.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import oasisApi from "oasis-api"
+
+class SidebarMenuItem extends React.Component {
+
+    async componentDidMount(){
+      const auth = new oasisApi.Auth()
+      const user = await auth.getUser()
+      if(!user.error){
+        this.setState({user: user.data})
+        console.log(user);
+      }
+    }
+
+    state = {
+        show: false
+    }
+
+    expandHandler = () => {
+        this.setState({
+            show: !this.state.show
+        })
+    }
+
+    render() {
+        const { item } = this.props;
+        return (
+            <>
+                <li>
+                    <a onClick={this.expandHandler}>{item.name}</a>
+
+                    <ul className={`sidebar-inner-menu ${this.state.show ? 'show' : ''}`} id={item.id}>
+                        {
+                            item.subMenu.map((subItem, index) =>
+                                <li key={index}>
+                                    {/* {
+                                        subItem.disabled || (subItem.loginRequired && !this.state.user)
+                                        ?
+                                            <a className='disabled'>{subItem.name}</a>
+
+                                        :
+                                            <a
+                                                target={subItem.externalLink ? '_blank': ''}
+                                                href={subItem.path}
+                                                onClick={
+                                                    () => this.props.toggleScreenPopup(item.name, subItem.popupName)
+                                                }
+                                            >{subItem.name}</a>
+                                    } */}
+
+                                        {
+                                            subItem.externalLink ?
+
+                                                <a
+                                                    target={subItem.externalLink ? '_blank': ''}
+                                                    href={subItem.path}
+                                                >{subItem.name}</a>
+                                            :
+                                            
+                                                <a
+                                                    target={subItem.externalLink ? '_blank': ''}
+                                                    href={subItem.path}
+                                                    onClick={
+                                                        () => this.props.toggleScreenPopup(item.name, subItem.popupName)
+                                                        // () => this.props.toggleScreenPopup(item, subItem)
+                                                    }
+                                                >{subItem.name}</a>
+                                        }
+                                </li>
+                            )
+                        }
+                    </ul>
+                </li>
+            </>
+        );
+    }
+}
+
+export default SidebarMenuItem;

package/src/components/index.js

@@ -0,0 +1,26 @@
+// @oasisomniverse/react — OASIS Omniverse React components
+
+export { AvatarConnect }    from './common/AvatarConnect';
+export { Contact }          from './common/Contact';
+export { Eggs }             from './common/Eggs';
+export { Game }             from './common/Game';
+export { HyperDrive }       from './common/HyperDrive';
+export { KarmaToast }       from './common/KarmaToast';
+export { Map }              from './common/Map';
+export { MenuMessage }      from './common/MenuMessage';
+export { Messaging }        from './common/Messaging';
+export { Mission }          from './common/Mission';
+export { NavBar }           from './common/NavBar';
+export { NFT }              from './common/NFT';
+export { OApp }             from './common/OApp';
+export { OasisModal }       from './common/OasisModal';
+export { ONET }             from './common/ONET';
+export { ONODE }            from './common/ONODE';
+export { ProviderDropdown } from './common/ProviderDropdown';
+export { Providers }        from './common/Providers';
+export { Quest }            from './common/Quest';
+export { SearchAvatars }    from './common/SearchAvatars';
+export { Seeds }            from './common/Seeds';
+export { Settings }         from './common/Settings';
+export { StarField }        from './common/StarField';
+export { Wallet }           from './common/Wallet';

package/src/components/pages/forgotPassword.js

@@ -0,0 +1,47 @@
+import React from "react";
+// import axios from "axios";
+import { toast } from "react-toastify";
+import oasisApi from "oasis-api";
+
+class ForgotPassword extends React.Component {
+    state = {  }
+    
+    componentDidMount = () => {
+        this.forgetPasswordUrlSearch();
+    }
+
+    forgetPasswordUrlSearch = () => {
+        const queryParams = new URLSearchParams(this.props.location.search);
+        const email = queryParams.get("email");
+
+        let data = {
+            email: email
+        }
+
+        const auth = new oasisApi.Auth();
+        auth.forgotPassword(data)
+            .then(response => {
+                console.log(response)
+                if(response.data.result.isError) {
+                    toast.error(response.data.result.message)
+                    return;
+                }
+                toast.success(response.data.result.message);
+                this.props.history.goBack()
+            }).catch(error => {
+                console.log(error)
+                this.setState({ loading: false })
+                toast.error(error.data.result.message);
+                this.props.history.goBack()
+            })
+    }
+    render() { 
+        return (
+            <>
+                
+            </>
+        );
+    }
+}
+ 
+export default ForgotPassword;

package/src/components/popups/avatar/components/AvatarWallet.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import '../../../../assets/scss/avatar-popup.scss';
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from 'react-toastify';
+import API_BASE_URL from "../../../../config/api";
+
+class AvatarWallet extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "date",
+                headerName: "Date",
+            },
+            {
+                fieldName: "note",
+                headerName: "Note",
+            },
+            {
+                fieldName: "fromAvatar",
+                headerName: "From Avatar",
+            },
+            {
+                fieldName: "fromWallet",
+                headerName: "From Wallet",
+            },
+            {
+                fieldName: "token",
+                headerName: "Token"
+            },
+            {
+                fieldName: "amount",
+                headerName: "Amount"
+            },
+            {
+                fieldName: "balance",
+                headerName: "Balance"
+            },
+            {
+                fieldName: "provider",
+                headerName: "Provider"
+            },
+            {
+                fieldName: "type",
+                headerName: "Type"
+            }
+        ],
+        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
+                    centered
+                    className="custom-modal custom-popup-component w-100 "
+                    show={show}
+                    onHide={() => hide('avatar', 'avatarWallet')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('avatar', 'avatarWallet')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="page new-skin">
+                            <div className="container opened" data-animation-in="fadeInLeft" data-animation-out="fadeOutLeft">
+                                
+                                    <h1 class="single-heading">Avatar Wallet</h1>    
+                                
+                                <div className="card-started" id="home-card">
+                                    
+                                    <div className="profile no-photo">
+                                        <div className="slide" />
+                                        <div className="title">Username</div>
+                                        <div className="subtitle"> User Level </div>
+                                        <div className="lnks">
+                                            <a href="#" className="lnk">
+                                                <span className="text">2D Avatar</span>
+                                            </a>
+                                            <a href="#" className="lnk discover">
+                                                <span className="text">3d Avatar</span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                               
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal> */}
+
+                <Modal
+                    size="xl"
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide('avatar', 'avatarWallet')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('avatar', 'avatarWallet')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <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 AvatarWallet;

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

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

package/src/components/popups/avatar/components/ViewAvatar.jsx

@@ -0,0 +1,148 @@
+import React from "react";
+// import axios from "axios";
+import { Modal } from "react-bootstrap";
+
+// import { login, getUserById } from "../../../../functions";
+// import ReactGrid from "../../../ReactGrid";
+import { AgGridReact } from 'ag-grid-react'
+import '../../../../assets/scss/avatar-popup.scss';
+import oasisApi from "oasis-api";
+import axios from "axios";
+import { toast } from 'react-toastify';
+import API_BASE_URL from "../../../../config/api";
+
+class ViewAvatar extends React.Component {
+    state = {
+        columnDefs: [
+            { 
+                field: 'avatar',
+                // filterParams: filterParams,
+            },
+            {
+                field: 'level',
+
+            },
+            { 
+                field: 'karma'
+            },
+            {
+                field: 'sex',
+            },
+            {
+                field: 'created' 
+            },
+            
+            {
+                field: 'last' 
+            },
+            
+            {
+                field: 'online' 
+            },
+        ],
+        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;
+
+        const avatar = new oasisApi.Avatar()
+        const karma = new oasisApi.Karma()
+
+        const res = await avatar.getAll()
+        if(!res.error){
+            let avatars=[]
+            const users = res.data.result
+            for(let i=0; i<=users.length-1; i++){
+                let user = users[i]
+                console.log('user')
+                const karmaRes = await karma.getKarmaForAvatar(user.avatarId)
+                console.log(karmaRes)
+                let temp = {
+                    avatar: user.username,
+                    level: 1,
+                    karma: karmaRes.data.result,
+                    sex: user.title === 'Mr' ? 'Male':'Female',
+                    created: 'Now',
+                    last: 'Now ',
+                    online: user.isBeamedIn
+                }
+                avatars.push(temp)
+            }
+            this.setState({rowData: avatars})
+        }
+    }
+
+    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 
+                    centered 
+                    className="custom-modal custom-popup-component light-custom-popup" 
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('avatar', 'viewAvatar')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('avatar', 'viewAvatar')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <h1 className="single-heading">View Avatar</h1>
+
+                        <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>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default ViewAvatar

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+// import AvatarDetail from './components/AvatarDetail';
+import AvatarWallet from './components/AvatarWallet';
+import EditAvatar from './components/EditAvatar';
+import SearchAvatar from './components/SearchAvatar';
+import ViewAvatar from './components/ViewAvatar';
+
+class Avatar extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <ViewAvatar
+                    show={props.avatar.viewAvatar}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <EditAvatar
+                    show={props.avatar.editAvatar}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchAvatar
+                    show={props.avatar.searchAvatar}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <AvatarWallet
+                    show={props.avatar.avatarWallet}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Avatar;

package/src/components/popups/comingsoon/ComingSoon.jsx

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

package/src/components/popups/confirmation/Confirmation.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Modal } from "react-bootstrap";
+import '../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../assets/images/icon-info.svg';
+
+class Confirmation extends React.Component {
+    render() {
+        return (
+            <Modal
+                size="sm"
+                show={this.props.show}
+                onHide={this.props.hide}
+            >
+                <Modal.Body className="text-center coming-soon">
+                    <img
+                        src={InfoIcon}
+                        alt="icon"
+                    />
+                    <h2>Are you Sure?</h2>
+                    <p>Are you sure you want to Beam Out?</p>
+
+                    <button onClick={this.props.hide}>Cancel</button>
+                    <button onClick={this.props.logout}>Beam Out</button>
+                </Modal.Body>
+            </Modal>
+        );
+    }
+}
+
+export default Confirmation;