@oasisomniverse/nextjs 1.0.0

package/src/components/popups/avatar/components/SearchAvatar.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 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.tsx

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

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

@@ -0,0 +1,29 @@
+'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 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.tsx

@@ -0,0 +1,31 @@
+'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 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;

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

@@ -0,0 +1,101 @@
+'use client';
+import React from 'react';
+import '../../../assets/scss/contact-popup.scss';
+import { Modal } from 'react-bootstrap';
+import { AgGridReact } from 'ag-grid-react';
+
+class ContactPopup extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "avatar",
+                headerName: "Avatar",
+            },
+            {
+                fieldName: "levelKarma",
+                headerName: "Level Karma",
+            },
+            {
+                fieldName: "beamedIn",
+                headerName: "Beamed In",
+            },
+            {
+                fieldName: "lastBeamedIn",
+                headerName: "Last Beamed In",
+            },
+            {
+                fieldName: "addedToContacts",
+            }
+        ],
+        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;
+    }
+
+    render() {
+        const { show, hide } = this.props;
+
+        console.log(this.props)
+
+        return (
+            <>
+                <Modal
+                    size="xl"
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide()}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide()}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <h1 className="single-heading">Contact</h1>
+                                <div className='contact-navbar'>
+                                    <ul>
+                                        <li>Friends</li>
+                                        <li>Friends</li>
+                                        <li>Colleagues</li>
+                                        <li>MyList</li>
+                                    </ul>
+                                </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='contact-popup-button'>
+                                    <button>Send Message</button>
+                                    <button>Remove Friends</button>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default ContactPopup;

package/src/components/popups/data-screen/components/AddData.tsx

@@ -0,0 +1,90 @@
+'use client';
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import ProviderDropdown from '../../../common/ProviderDropdown';
+import axios from "axios";
+import { toast } from 'react-toastify';
+import API_BASE_URL from "../../../../config/api";
+
+class AddData extends React.Component {
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'post',
+            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" 
+                    show={show} 
+                    onHide={() => hide('data','sendData')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('data', 'sendData')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <h1 className="single-heading">Data</h1>
+
+                                <div className="form-container">
+                                    <form>
+                                        <ProviderDropdown />
+
+                                        <p className="single-form-row">
+                                            <label>Json: </label>
+                                            <textarea></textarea>
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>File: </label>
+                                            <input type="file" />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <button 
+                                                className="submit-button sm-button" 
+                                                type="submit"
+                                            >Save</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default AddData;

package/src/components/popups/data-screen/components/CrossChainManagement.tsx

@@ -0,0 +1,88 @@
+'use client';
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import ProviderDropdown from '../../../common/ProviderDropdown';
+import axios from "axios";
+import { toast } from 'react-toastify';
+import API_BASE_URL from "../../../../config/api";
+
+class CrossChainManagement extends React.Component {
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'post',
+            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" 
+                    show={show} 
+                    onHide={() => hide('data', 'crossChainManagement')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('data', 'crossChainManagement')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                <h1 className="single-heading">Cross Chain Management</h1>
+
+                                <div className="form-container">
+                                    <form className="custom-form" style={{padding: 0}}>
+                                        
+                                        <ProviderDropdown />
+
+                                        <p className="single-form-row">
+                                            <label>Json: </label>
+                                            <textarea></textarea>
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>File: </label>
+                                            <input type="file" />
+                                        </p>
+
+                                        <button type="submit" className="submit-button">
+                                            Save
+                                        </button>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default CrossChainManagement;