@oasisomniverse/react 1.0.0

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

@@ -0,0 +1,100 @@
+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.jsx

@@ -0,0 +1,89 @@
+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.jsx

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

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

@@ -0,0 +1,157 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import axios from "axios";
+import { toast } from 'react-toastify';
+import { AgGridReact } from 'ag-grid-react';
+import API_BASE_URL from "../../../../config/api";
+
+var filterParams = {
+    comparator: function (filterLocalDateAtMidnight, cellValue) {
+        var dateAsString = cellValue;
+        if (dateAsString === null) return -1;
+        var dateParts = dateAsString.split('/');
+        var cellDate = new Date(
+            Number(dateParts[2]),
+            Number(dateParts[1]) - 1,
+            Number(dateParts[0])
+        );
+        if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
+            return 0;
+        }
+        if (cellDate < filterLocalDateAtMidnight) {
+            return -1;
+        }
+        if (cellDate > filterLocalDateAtMidnight) {
+            return 1;
+        }
+    },
+    browserDatePicker: true,
+};
+
+class LoadData extends React.Component {
+
+    state = {
+        columnDefs: [
+            { 
+                field: 'athlete'
+            },
+            {
+                field: 'age',
+                filter: 'agNumberColumnFilter',
+                maxWidth: 100,
+            },
+            { field: 'country' },
+            {
+                field: 'year',
+                maxWidth: 100,
+            },
+            {
+                field: 'date',
+                filter: 'agDateColumnFilter',
+                filterParams: filterParams,
+            },
+            { field: 'sport' },
+            {
+                field: 'gold',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'silver',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'bronze',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'total',
+                filter: false,
+            },
+        ],
+        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 
+                    centered 
+                    className="custom-modal custom-popup-component light-custom-popup" 
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('data', 'loadData')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('data', 'loadData')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <h1 className="single-heading">Data</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 LoadData;

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

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

@@ -0,0 +1,177 @@
+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 OffChainManagement extends React.Component {
+  state = {
+    tagsList: [
+      { id: 1, name: "Item 01", status: false },
+      { id: 2, name: "Item 02", status: false },
+      { id: 3, name: "Item 03", status: false },
+      { id: 4, name: "Item 04", status: false },
+      { id: 5, name: "Item 05", status: false },
+      { id: 6, name: "Item 06", status: false },
+      { id: 7, name: "Item 07", status: false },
+      { id: 8, name: "Item 08", status: false },
+    ],
+  };
+
+  handleInputTagChange = (item) => {
+    let tags = [...this.state.tagsList];
+
+    const index = tags.indexOf(item);
+    tags[index].status = !tags[index].status;
+
+    this.setState({
+      tagsList: tags,
+    });
+  };
+
+  toggleAllTags = (action) => {
+    let tags = [...this.state.tagsList];
+    tags.map((tag) => {
+      tag.status = action === "add" ? true : false;
+    });
+
+    this.setState({
+      tagsList: tags,
+    });
+  };
+
+  toggleSelectedTags = (action) => {
+    let tags = [...this.state.tagsList];
+
+    tags.map((tag) => {
+      tag.status = action === "add" ? true : false;
+    });
+  };
+
+  saveData = () => {
+    toast.success(" Your Data is Saved!");
+  };
+
+  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"
+          show={show}
+          onHide={() => hide("data", "offChainManagement")}
+        >
+          <Modal.Body>
+            <span
+              className="form-cross-icon"
+              onClick={() => hide("data", "offChainManagement")}
+            >
+              <i className="fa fa-times"></i>
+            </span>
+
+            <div className="popup-container default-popup">
+              <div className="data-screen-container off-chain-management">
+                <h1 className="single-heading">Off Chain Management</h1>
+
+                <form className="custom-form" style={{padding: 0}}>
+                  <div className="off-chain-container">
+                    <div className="All-provider">
+                      <h3>All Providers</h3>
+                      <ul className="list-item list-box">
+                        {this.state.tagsList.map((tag) =>
+                          tag.status ? null : (
+                            <li key={tag.id}>
+                              <label>
+                                <input
+                                  type="checkbox"
+                                  name="checkbox"
+                                  checked={tag.status}
+                                  onChange={() => this.handleInputTagChange(tag)}
+                                />
+                                <span>{tag.name}</span>
+                              </label>
+                            </li>
+                          )
+                        )}
+                      </ul>
+                    </div>
+
+                    <div className="buttons-list">
+                      {/* <button>ADD</button> */}
+
+                      {/* <button className=" sm-button" onClick={() => this.toggleAllTags("add")}>
+                        ADD ALL
+                      </button> */}
+
+                      {/* <button>REMOVE</button> */}
+
+                      {/* <button className=" sm-button" onClick={() => this.toggleAllTags("remove")}>
+                        REMOVE ALL
+                      </button> */}
+                    </div>
+                    <div className="off-chain-provider">
+                      <h3>Off Chain Providers</h3>
+                      <ul className="list-item list-box">
+                        {this.state.tagsList.map((tag) =>
+                          tag.status ? (
+                            <li key={tag.id}>
+                              <label>
+                                <input
+                                  type="checkbox"
+                                  name="checkbox"
+                                  checked={tag.status}
+                                  onChange={() => this.handleInputTagChange(tag)}
+                                />
+                                <span>{tag.name}</span>
+                              </label>
+                            </li>
+                          ) : null
+                        )}
+                      </ul>
+                    </div>
+                  </div>
+
+                  <button className="submit-button" onClick={this.saveData} type="submit">
+                      Save
+                  </button>
+                </form>
+              </div>
+            </div>
+          </Modal.Body>
+        </Modal>
+      </>
+    );
+  }
+}
+
+export default OffChainManagement;

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