@oasisomniverse/react 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# WEB4 OASIS API React Component Library
+
+This is the WEB4 OASIS React UI Components Library that can be used to pick n mix into other React sites who wish to integrate into the WEB4 OASIS API. It is also the main OASIS Portal site and example site of how to build a UI on the WEB4 OASIS API.
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Documentation
+
+- [React Style Guide](Docs/react_style_guide.md) - Coding standards and CSS naming conventions for contributing components
+- [React Install Guide](Docs/react_style_guide_install.md) - Step-by-step installation and setup instructions
+- [Contributing Guide](Docs/smart_commits.md) - How to contribute using smart commits
+
+## Project Structure
+```
+├── react-app 
+│   ├── public
+│   │   └── index.html
+│   ├── src
+|   |   ├── assets
+|   |   |   ├── images
+|   |   |   ├── scss
+|   |   ├── components 
+|   |   |   ├── common
+|   |   |   |   ├── sidebar
+|   |   |   ├── popups
+│   │   └── index.js
+```
+
+All of the files are stored in react-app folder.
+
+- `index.html` is the main html file
+- `assets` folder contains all assets files for each component like images and css/scss files.
+- `components` folder contains different components used in the app.
+- `components/common` folder contains different components tha are common like sidebar, navbar etc.
+- `components/popups` folder contains different popup components.
+- `index.js` is the main javaScript file needed for the react-app.
+
+## CSS Syntax rules
+Please follow these rules so that the other CSS classes does not gets messed up.
+
+For example if you create a component called `Login.js` It's outer most tag element should have a class of `login` and the child elements of login should have a class name started with `login-`
+
+The CSS file should be named `Login.css` and should be stored under the `CSS` folder.
+
+## How to run the app
+
+First make sure you are in the react-app folder. Then run this command
+
+```
+npm i
+```
+This will install all the third-part components used in the project
+
+After this run the following command to open the project in dev mode
+```
+npm start
+```
+
+## API Configuration
+
+The app uses a single shared API base URL defined in `src/config/api.js`.
+
+By default it points to `https://api.oasisweb4.one/api`, but you can override it by setting:
+
+```bash
+REACT_APP_API_URL=https://your-api-host/api
+```
+
+This lets you switch environments without changing every request in the codebase.

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@oasisomniverse/react",
+  "version": "1.0.0",
+  "description": "OASIS Omniverse React UI components",
+  "keywords": ["oasis", "omniverse", "react", "components"],
+  "author": "NextGenSoftware",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NextGenSoftwareUK/OASIS-React-UI-Component-Library.git"
+  },
+  "main": "src/components/index.js",
+  "module": "src/components/index.js",
+  "exports": {
+    ".": "./src/components/index.js",
+    "./components/*": "./src/components/*.jsx"
+  },
+  "files": ["src/components"],
+  "dependencies": {
+    "@devexpress/dx-react-core": "^2.7.6",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "ag-grid-community": "^26.0.0",
+    "ag-grid-react": "^26.0.0",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "font-awesome": "^4.7.0",
+    "formik": "^2.2.9",
+    "oasis-api": "^0.0.3",
+    "react": "^19.2.7",
+    "react-bootstrap": "^1.6.3",
+    "react-dom": "^19.2.7",
+    "react-dual-listbox": "^2.2.0",
+    "react-loader-spinner": "^4.0.0",
+    "react-router-dom": "^5.2.1",
+    "react-slide-toggle": "^0.3.5",
+    "react-toastify": "^8.0.3",
+    "web-vitals": "^1.1.2",
+    "yup": "^0.32.9"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "engines": {
+    "node": "22.x"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "sass": "^1.100.0",
+    "vite": "^6.3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/App.js

@@ -0,0 +1,504 @@
+import React from "react";
+
+import Navbar from "./common/Navbar";
+import Sidebar from "./common/sidebar/Sidebar";
+import Login from "./Login";
+import Signup from "./Signup";
+import Solana from "./popups/nft/Solana";
+// import ContactPopup from "./popups/nft/ContactPopup";
+import ContactPopup from "./popups/contact/index";
+import Karma from "./popups/karma";
+
+import "../assets/scss/general.scss";
+import "../assets/scss/style.scss";
+
+// import axios from "axios";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer, toast } from "react-toastify";
+import Avatar from "./popups/avatar";
+import DataScreen from "./popups/data-screen";
+import Seeds from "./popups/seeds";
+
+// import { BrowserRouter as Router, HashRouter, Switch, Route } from 'react-router-dom';
+import { HashRouter, Switch, Route } from "react-router-dom";
+
+import VerifyEmail from "./VerifyEmail";
+import Game from "./popups/game";
+import Eggs from "./popups/eggs";
+import Mission from "./popups/mission";
+import Quest from "./popups/quest";
+import OAPP from "./popups/oapp";
+import Map from "./popups/map";
+import Provider from "./popups/provider";
+import Nft from "./popups/nft";
+// import ForgotPassword from "./pages/forgotPassword";
+import ResetPassword from "./ResetPassword";
+import SidebarData from "./common/sidebar/SidebarData";
+import Confirmation from "./popups/confirmation/Confirmation.js";
+
+class App extends React.Component {
+    state = {
+        showSidebar: false,
+        showLogin: false,
+        showSignup: false,
+        showConfirm: false,
+        showForgetPassword: false,
+        user: null,
+        loggedIn: false,
+        sidebarMenuOption: [
+            {
+                data: {
+                loadData: false,
+                sendData: false,
+                manageData: false,
+                offChainManagement: false,
+                crossChainManagement: false,
+                searchData: false,
+                },
+            },
+            {
+                nft: {
+                solana: false,
+                contactPopup: false,
+                },
+            },
+            {
+                seeds: {
+                    payWithSeeds: false,
+                    donateSeeds: false,
+                    rewardSeeds: false,
+                    sendInvite: false,
+                    viewSeeds: false,
+                    viewOrganizations: false,
+                    manageSeeds: false,
+                    searchSeeds: false,
+                },
+            },
+            {
+                avatar: {
+                    viewAvatar: false,
+                    editAvatar: false,
+                    searchAvatar: false,
+                    avatarWallet: false,
+                },
+            },
+            {
+                karma: {
+                    viewKarmaWeightings: false,
+                    voteKarma: false,
+                    viewAvatarKarma: false,
+                    searchKarma: false
+                },
+            },
+            {
+                game: {
+                    viewLeagues: false,
+                    viewTournaments: false,
+                    viewAchievements: false,
+                    searchProfiles: false
+                },
+            },
+            {
+                eggs: {
+                    viewEggs: false,
+                    manageEggs: false,
+                    searchEggs: false
+                },
+            },
+            {
+                mission: {
+                    viewMission: false,
+                    manageMission: false,
+                    searchMission: false
+                },
+            },
+            {
+                quest: {
+                    viewQuest: false,
+                    manageQuest: false,
+                    searchQuest: false
+                },
+            },
+            {
+                oapp: {
+                    installOAPP: false,
+                    manageOAPP: false,
+                    createOAPP: false,
+                    deployOAPP: false,
+                    editOAPP: false,
+                    launchOAPP: false,
+                    searchOAPP: false,
+                    downloadOurWorld: false,
+                }
+            },
+            {
+                map: {
+                    viewGlobal3dMap: false,
+                    manageMap: false,
+                    addQuestToMap: false,
+                    add2dObjectMap: false,
+                    add3dObjectMap: false,
+                    plotRouteOnMap: false,
+                    viewOappOnMap: false,
+                    viewHalonsOnMap: false,
+                    viewQuestOnMap: false,
+                    searchMap: false,
+                    downloadOurWorld: false,
+                }
+            },
+            {
+                providers: {
+                    viewProviders: false,
+                    manageProviders: false,
+                    manageAutoReplicaton: false,
+                    manageAutoFailOver: false,
+                    manageLoadBalancing: false,
+                    viewProviderStats: false,
+                    compareProviderSpeeds: false,
+                    searchProviders: false,
+                    holochain: false,
+                    seeds: false,
+                    eosio: false,
+                    ethereum: false,
+                    ipfs: false,
+                    threeFold: false,
+                    solid: false,
+                    activityPub: false,
+                    mongoDb: false,
+                    sqlLite: false,
+                    neo4j: false,
+                    solana: false
+                }
+            },
+            {
+                nft: {
+                    manageOasisNft: false,
+                    purchaseOasisNft: false,
+                    purchaseOasisVirtualLandNft: false,
+                    searchOasisNft: false,
+                    viewOasisNft: false
+                },
+            },
+            {
+                comingSoon: false,
+            },
+        ],
+        contact: {
+            contactPopup: false
+        },
+        shortName: ''
+    };
+
+    componentDidMount() {
+        const jwtToken = localStorage.getItem("jwtToken"); 
+        const refreshToken = localStorage.getItem("refreshToken");
+
+        let loggedIn = (jwtToken && refreshToken) ? true : false;
+        this.setState({ loggedIn: loggedIn });
+
+        if(loggedIn) {
+            let user = {
+                email: localStorage.getItem("email"),
+                name: localStorage.getItem("name")
+            }
+
+            this.setState({
+                user: user
+            })
+        }
+    }
+
+    setUserData = (data) => {
+        localStorage.setItem("name", data.fullName)
+        localStorage.setItem("jwtToken", data.jwtToken)
+        localStorage.setItem("refreshToken", data.refreshToken)
+        localStorage.setItem("email", data.email)
+        
+        let user = {
+            email: data.email,
+            name: data.fullName
+        }
+
+        this.setState({
+            user: user,
+            loggedIn: true
+        })
+
+        const name = localStorage.getItem("name");
+        
+        if(name) {
+            const words = name.split(' ');
+            const fl = words.map(word => word.charAt(0).toUpperCase());
+            this.setState({
+                shortName: fl.join('')
+            })
+        }
+    };
+
+    toggleSidebar = () => {
+        this.setState({
+            showSidebar: !this.state.showSidebar,
+        });
+    };
+
+    hidePopups = () => {
+        this.setState({
+            showLogin: false,
+            showSignup: false,
+            showForgetPassword: false
+        });
+    };
+
+    hideLogin = () => {
+        this.setState({
+            showLogin: false,
+        });
+    };
+
+    hideSignup = () => {
+        this.setState({
+            showSignup: false,
+        });
+    };
+
+    showLogin = () => {
+        this.setState({
+            showLogin: true,
+            showSignup: false,
+            showForgetPassword: false
+        });
+    };
+
+    showSignup = () => {
+        this.setState({
+            showSignup: true,
+            showLogin: false,
+            showForgetPassword: false
+        });
+    };
+
+    showConfirmation = () => {
+        this.setState({
+            showConfirm: true 
+        })
+    }
+
+    hideConfirmation = () => {
+        this.setState({
+            showConfirm: false 
+        })
+    }
+
+    showContactPopup = () => {
+        this.setState({
+            contact: {
+                contactPopup: true
+            }
+        })
+    }
+
+    hideContactPopup = () => {
+        this.setState({
+            contact: {
+                contactPopup: false
+            }
+        })
+    }
+
+    handleLogout = () => {
+        const token = localStorage.getItem("jwtToken");
+        const refreshToken = localStorage.getItem("refreshToken");
+
+        console.log(token)
+        console.log(refreshToken)
+        // axios
+        //     .post("shared API base URL + /avatar/revoke-token", {token: refreshToken}, {
+        //         headers: {
+        //             Authorization: `Bearer ${token}`,
+        //         }
+        //     })
+        //     .then((res) => {
+        //         this.setState({ user: null });
+        //         localStorage.removeItem("user");
+        //         localStorage.removeItem("credentials");
+
+        //         localStorage.clear();
+        //     })
+        //     .catch((err) => {
+        //         this.setState({ user: null });
+        //         localStorage.removeItem("user");
+        //         localStorage.removeItem("credentials");
+        //         localStorage.clear();
+        //     });
+        localStorage.clear();
+        this.setState({
+            loggedIn: false,
+            showConfirm: false
+        })
+    };
+
+    toggleScreenPopup = (menuName, popupName) => {
+        let jwtToken = localStorage.getItem("jwtToken");
+        let refreshToken = localStorage.getItem("refreshToken");
+
+        let sidebarMenuOption = [...this.state.sidebarMenuOption];
+
+        SidebarData.map((item) => {
+            if(item.name === menuName) {
+                item.subMenu.map((subItem) => {
+                    if(subItem.popupName === popupName) {
+                        sidebarMenuOption.map((option) => {
+                            if(option[menuName]) {
+                                if(subItem.loginRequired) {
+                                    if(jwtToken && refreshToken) {
+                                        option[menuName][popupName] = !option[menuName][popupName];
+                                    } else {
+                                        toast.error("You are not currently beamed in, please Beam In first.")
+                                    }
+                                } else {
+                                    option[menuName][popupName] = !option[menuName][popupName];
+                                }
+                            }
+                        })
+                    }
+                })
+            }
+        })
+
+        this.setState({
+            sidebarMenuOption
+        })
+    };
+
+    render() {
+        return (
+            <HashRouter hashType="slash">
+                <Switch>
+                    <Route path="/avatar/verify-email" component={VerifyEmail} />
+                    <Route path="/avatar/reset-password" component={ResetPassword} />
+                </Switch>
+
+                <ToastContainer position="top-center" />
+
+                <div className="main-container">
+                    <header>
+                        <Navbar
+                            showSidebar={this.state.showSidebar}
+                            toggleSidebar={this.toggleSidebar}
+                            showLogin={this.showLogin}
+                            showSignup={this.showSignup}
+                            handleLogout={this.handleLogout}
+                            loggedIn={this.state.loggedIn}
+                            user={this.state.user}
+                            shortName={this.state.shortName}
+                            showConfirm={this.showConfirmation}
+                            showContactPopup={this.showContactPopup}
+                        />
+                        
+                        <Sidebar
+                            showSidebar={this.state.showSidebar}
+                            toggleSidebar={this.toggleSidebar}
+                            toggleScreenPopup={this.toggleScreenPopup}
+                        />
+                    </header>
+
+                    <Confirmation
+                        className="custom-form"
+                        show={this.state.showConfirm}
+                        hide={this.hideConfirmation}
+                        logout={this.handleLogout}
+                    />
+
+                    <Login
+                        className="custom-form"
+                        show={this.state.showLogin}
+                        hide={this.hideLogin}
+                        change={this.showSignup}
+                        setUserStateData={this.setUserData}
+                    />
+
+                    <Signup
+                        className="custom-form"
+                        show={this.state.showSignup}
+                        hide={this.hideSignup}
+                        change={this.showLogin}
+                        showLogin={this.showLogin}
+                    />
+
+                    <DataScreen
+                        data={this.state.sidebarMenuOption[0].data}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Solana
+                        show={this.state.sidebarMenuOption[1].nft.solana}
+                        hide={this.toggleScreenPopup}
+                    />
+
+                    <Seeds
+                        seeds={this.state.sidebarMenuOption[2].seeds}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+                    
+                    <Avatar
+                        avatar={this.state.sidebarMenuOption[3].avatar}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Karma 
+                        karma={this.state.sidebarMenuOption[4].karma}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Game 
+                        game={this.state.sidebarMenuOption[5].game}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Eggs 
+                        eggs={this.state.sidebarMenuOption[6].eggs}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Mission 
+                        mission={this.state.sidebarMenuOption[7].mission}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Quest 
+                        quest={this.state.sidebarMenuOption[8].quest}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <OAPP 
+                        oapp={this.state.sidebarMenuOption[9].oapp}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Map 
+                        map={this.state.sidebarMenuOption[10].map}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Provider 
+                        providers={this.state.sidebarMenuOption[11].providers}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <Nft
+                        nft={this.state.sidebarMenuOption[12].nft}
+                        toggleScreenPopup={this.toggleScreenPopup}
+                    />
+
+                    <ContactPopup
+                        show={this.state.contact.contactPopup}
+                        showPopup={this.showContactPopup}
+                        hide={this.hideContactPopup}
+                    />
+                </div>
+            </HashRouter>
+        );
+    }
+}
+
+export default App;