@oasisomniverse/react 1.0.0

package/src/components/popups/data-screen/index.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import AddData from './components/AddData';
+import LoadData from './components/LoadData';
+import OffChainManagement from './components/OffChainManagement';
+import CrossChainManagement from './components/CrossChainManagement';
+
+import "../../../assets/scss/data-screen.scss";
+import SearchData from './components/SearchData';
+import ManageData from './components/ManageData';
+
+class DataScreen extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <AddData
+                    show={props.data.sendData}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <LoadData
+                    show={props.data.loadData}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageData
+                    show={props.data.manageData}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <OffChainManagement
+                    show={props.data.offChainManagement}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <CrossChainManagement
+                    show={props.data.crossChainManagement}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchData
+                    show={props.data.searchData}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default DataScreen;

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

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import ManageEggs from './components/ManageEggs';
+import SearchEggs from './components/SearchEggs';
+import ViewEggs from './components/ViewEggs';
+
+class Eggs extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <ViewEggs
+                    show={props.eggs.viewEggs}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageEggs
+                    show={props.eggs.manageEggs}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchEggs
+                    show={props.eggs.searchEggs}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Eggs;

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

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

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

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

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import SearchProfiles from './components/SearchProfiles';
+import ViewAchievements from './components/ViewAchievements';
+import ViewLeagues from './components/ViewLeagues';
+import ViewTournaments from './components/ViewTournaments';
+
+class Game extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <SearchProfiles
+                    show={props.game.searchProfiles}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewTournaments
+                    show={props.game.viewTournaments}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewLeagues
+                    show={props.game.viewLeagues}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewAchievements
+                    show={props.game.viewAchievements}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Game;

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

package/src/components/popups/karma/components/ViewAvatarKarma.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+// import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+import axios from "axios";
+import { toast } from 'react-toastify';
+import { AgGridReact } from 'ag-grid-react';
+import API_BASE_URL from "../../../../config/api";
+
+class ViewAvatarKarma extends React.Component {
+    state = {
+        columnDefs: [
+            { 
+                field: "date",
+                headerName: "Date"
+            },
+            {
+                field: 'level',
+
+            },
+            { 
+                field: "type",
+                headerName: "Type"
+            },
+            {
+                field: "karma",
+                headerName: "Karma",
+            },
+            {
+                field: "source",
+                headerName: "Source" 
+            },
+            {
+                field: "title",
+                headerName: "Title" 
+            },
+            {
+                field: "description",
+                headerName: "Description" 
+            },
+            {
+                field: "weblink",
+                headerName: "Weblink" 
+            },
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+            // overflow: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));
+    };
+
+    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"
+                    centered 
+                    className="custom-modal custom-popup-component light-custom-popup" 
+                    show={show}
+                    onHide={() => hide('karma', 'viewAvatarKarma')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('karma', 'viewAvatarKarma')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <h1 className="single-heading">Karma</h1>
+
+                        <div className="grids-container">
+                            <div className="single-grid">
+                                <p className="heading">Seeds Sent</p>
+
+                                <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 ViewAvatarKarma;

package/src/components/popups/karma/components/ViewKarma.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+// import Loader from "react-loader-spinner";
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+import oasisApi from "oasis-api";
+
+class ViewKarma extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            columnDefs: [
+                { field: 'date' },
+                { field: 'avatar' },
+                { field: 'positive/negative' },
+                { field: 'type' },
+                { field: 'karma' },
+                { field: 'source' },
+                { field: 'description' },
+                { field: 'weblink' },
+            ],
+            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;
+        let karmaRecords = []
+
+        const avatarApi = new oasisApi.Avatar()
+        const karmaApi = new oasisApi.Karma()
+
+        const avatarRes = await avatarApi.getAll()
+        if(!avatarRes.error){
+          const avatars = avatarRes.data.result
+          for(let i=0; i<=avatars.length-1; i++){
+            const avatar = avatars[i]
+            const karmaRes = await karmaApi.getKarmaAkashicRecordsForAvatar(avatar.avatarId)
+            if(!karmaRes.error){
+              if(karmaRes.data.result){
+                const karmas = karmaRes.data.result
+                for(let j=0; j<=karmas.length-1; j++){
+                  const karma = karmas[j]
+                  console.log(karma)
+                  const karmaRecord = {
+                    date: karma.date,
+                    avatar: avatar.username,
+                    'positive/negative': karma.karmaTypePositive.value,
+                    type: karma.karmaTypePositive.name,
+                    source: karma.karmaSource.name,
+                    description: karma.karmaSourceDesc,
+                    weblink: 'oasisweb4.one',
+                    karma: karma.karma
+                  }
+                  karmaRecords.push(karmaRecord)
+                  console.log(karmaRecord)
+                };
+              }
+            }
+          };
+        }
+        console.log(karmaRecords);
+        this.setState({rowData: karmaRecords})
+    }
+    //run this after component mounts
+    render() {
+        const { show, hide } = this.props;
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('karma', 'viewKarmaWeightings')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('karma', 'viewKarmaWeightings')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+
+    }
+}
+
+export default ViewKarma;

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