@oasisomniverse/react 1.0.0

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

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import ManageQuest from './components/ManageQuest';
+import SearchQuest from './components/SearchQuest';
+import ViewQuest from './components/ViewQuest';
+
+class Quest extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <ViewQuest
+                    show={props.quest.viewQuest}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageQuest
+                    show={props.quest.manageQuest}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchQuest
+                    show={props.quest.searchQuest}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Quest;

package/src/components/popups/seeds/components/AcceptInvite.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+
+class AcceptInvite extends React.Component {
+    render() {
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide('seeds', 'acceptInvite')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('seeds', 'acceptInvite')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="seed-container paywith-seeds">
+                                <h1 className="single-heading">
+                                    Accept Invite to Join Seeds
+                                </h1>
+                                <div className="form-container">
+                                    <form>
+                                        <p className="single-form-row">
+                                            <label className="radio-btn">
+                                                <input type="radio" id="html" name="fav_language" value="HTML" />
+                                                Avatar
+                                                <input type="radio" id="html" name="fav_language" value="HTML" />
+                                                Seed Username
+                                            </label>
+                                            <input type="text" placeholder="username" />
+                                        </p>
+
+                                        <p className="single-form-row  mb-30">
+                                            <label>Invite Secret</label>
+                                            <input type="text" />
+                                        </p>
+
+                                        <p className="single-form-row btn-right">
+                                            <button
+                                                className=" btn-width sm-button"
+                                                type="submit"
+                                            >Accept Invitation</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default AcceptInvite;

package/src/components/popups/seeds/components/DonateSeeds.jsx

@@ -0,0 +1,178 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class DonateSeeds extends React.Component {
+    constructor(){
+        super()
+    this.state = {
+        // avatar: {
+        //     selected: false,
+        //     avatar: ''
+        // },
+        // username: {
+        //     selected: false,
+        //     username: '',
+        //     amount: '',
+        //     note: ''
+        // },
+        group: '',
+        avatar: '',
+        seedUser: '',
+        amount: '',
+        note: ''
+      }
+    }
+
+    handleChange = (e) => {
+        console.log(e.target.value)
+
+        if(e.target.value === "avatar_section" || e.target.value === "username_section") {
+            this.setState({
+                group: e.target.value
+            })
+        } else {
+            this.setState({[e.target.name]: e.target.value})
+        }
+    }
+
+    handleSubmit=(e) => {
+      e.preventDefault()
+    }
+    
+    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('seeds', 'donateSeeds')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('seeds', 'donateSeeds')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="seed-container paywith-seeds">
+                                <h1 className="single-heading">
+                                    Pay with Seeds
+                                </h1>
+                                <div className="form-container">
+                                    <form onSubmit={this.handleSubmit}>
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="avatar_section" 
+                                                    checked={this.state.group === "avatar_section"} 
+                                                    onChange={this.handleChange} 
+                                                />
+                                                Avatar
+                                            </label>
+                                            <input 
+                                                type="text" 
+                                                placeholder="username" 
+                                                name="avatar" 
+                                                value={this.state.avatar} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "username_section"} 
+                                            />
+                                        </p>
+
+                                        <h3>OR</h3>
+
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="username_section"
+                                                    checked={this.state.group === "username_section"} 
+                                                    onChange={this.handleChange}  
+                                                />
+                                                Seed Username
+                                            </label>
+
+                                            <input 
+                                                type="text" 
+                                                name="seedUser" 
+                                                value={this.state.username} 
+                                                onChange={this.handleChange} 
+                                                placeholder="username"
+                                                disabled={this.state.group === "avatar_section"} 
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>Amount</label>
+                                            <input 
+                                                type="text" 
+                                                name="amount" 
+                                                value={this.state.amount} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "avatar_section"}  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row mb-30">
+                                            <label>Note</label>
+                                            <input 
+                                                type="text" 
+                                                name="note" 
+                                                value={this.state.note} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "avatar_section"}  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row btn-right">
+                                            <button
+                                                className="sm-button"
+                                                type="submit"
+                                            >Pay</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default DonateSeeds;

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

package/src/components/popups/seeds/components/PayWithSeeds.jsx

@@ -0,0 +1,233 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class PayWithSeeds extends React.Component {
+
+    constructor() {
+        console.log('Going to show Pay with Seeds');
+        super()
+        this.state = {
+            group: '',
+            seedUser: '',
+            amount: '',
+
+            avatar: {
+                enabled: true,
+                name: ''
+            },
+            seed: {
+                enabled: false,
+                username: '',
+                amount: 0
+            },
+            note: ''
+        }
+    }
+
+    componentDidMount = () => {
+        // this.loadAllAvatarData();
+    }
+
+    loadAllAvatarData = () => {
+        const jwtToken = localStorage.getItem('jwtToken');
+
+        const headers = {
+            'Authorization': `Bearer ${jwtToken}`,
+            'Content-Type': 'application/json'
+        };
+
+        console.log('going to load all avatars ')
+        axios.get(`${API_BASE_URL}/avatar/get-all-avatars`, { headers })
+        .then(response => {
+            console.log(response)
+            if(response.data.isError) {
+                toast.error(response.data.message)
+            } else {
+                toast.success(response.data.result.message)
+            }
+            // this.props.history.goBack()
+            // console.log(this.props) 
+        })
+        .catch(error => {
+            console.log(error)
+        })
+    }
+
+    handleChange = (e) => {
+        console.log(e.target.value)
+
+        if(e.target.value === "avatar_section") {
+            this.setState({
+                avatar: {
+                    enabled: true
+                },
+                seed: {
+                    enabled: false
+                }
+            })
+        } else if(e.target.value === "seed_section") {
+            this.setState({
+                avatar: {
+                    enabled: false
+                },
+                seed: {
+                    enabled: true
+                }
+            })
+        }
+
+        // if(e.target.value === "avatar_section" || e.target.value === "seed_section") {
+        //     this.setState({
+        //         group: e.target.value
+        //     })
+        // } else {
+        //     this.setState({[e.target.name]: e.target.value})
+        // }
+    }
+
+    handleSubmit=(e) => {
+      e.preventDefault()
+    }
+
+    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;
+        if(show) {
+            this.loadAllAvatarData();
+        }
+        return (
+            <>
+                <Modal
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide('seeds', 'payWithSeeds')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('seeds', 'payWithSeeds')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="seed-container paywith-seeds">
+                                <h1 className="single-heading">
+                                    Pay with Seeds
+                                </h1>
+
+                                <div className="form-container">
+                                    <form onSubmit={this.handleSubmit}>
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="avatar_section" 
+                                                    checked={this.state.avatar.enabled} 
+                                                    onChange={this.handleChange} 
+                                                />
+                                                Avatar
+                                            </label>
+
+                                            <input 
+                                                type="text" 
+                                                placeholder="Avatar" 
+                                                name="avatar" 
+                                                value={this.state.avatar.name} 
+                                                onChange={this.handleChange}
+                                                disabled={!this.state.avatar.enabled} 
+                                            />
+                                        </p>
+
+                                        <h3>OR</h3>
+
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="seed_section"
+                                                    checked={this.state.seed.enabled} 
+                                                    onChange={this.handleChange}  
+                                                />
+                                                Seed Username
+                                            </label>
+
+                                            <input 
+                                                type="text" 
+                                                name="username" 
+                                                value={this.state.seed.username} 
+                                                onChange={this.handleChange} 
+                                                placeholder="Seed Username"
+                                                disabled={!this.state.seed.enabled} 
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>Amount</label>
+                                            <input 
+                                                type="number" 
+                                                name="amount" 
+                                                value={this.state.seed.amount} 
+                                                onChange={this.handleChange}
+                                                placeholder="Amount"
+                                                disabled={!this.state.seed.enabled}   
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row mb-30">
+                                            <label>Note</label>
+                                            <input 
+                                                type="text" 
+                                                name="note" 
+                                                value={this.state.note} 
+                                                onChange={this.handleChange}
+                                                placeholder="Note"  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row btn-right">
+                                            <button
+                                                className="sm-button"
+                                                type="submit"
+                                            >Pay</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default PayWithSeeds;