ryanpedersen42

// src/pages/main-page.jsx

// ... other imports removed for brevity
 
import CreateNewSpace from '../../components/create-new-space/create-new-space';
 
const MainPage = ({ ethAddress, spaceOptions, changeSelectedSpace, selectedSpace, handleNameChange, createNewSpace }) => (
 <Fragment>
     <Header />
     <div className='main-page'>

ryanpedersen42

import React from 'react';
 
import './form-input.styles.scss';
 
const FormInput = ({ handleChange, label, ...otherProps }) => (
 <div className='group'>
   <input className='form-input' onChange={handleChange} {...otherProps} />
   {label ? (
     <label className='shrink form-input-label'>
       {label}

ryanpedersen42

// src/components/input-form/input-form.jsx

import React, { Component, Fragment } from 'react';
import FormInput from '../form-input/form-input';

import './input-form.styles.scss'

class InputForm extends Component {
  constructor(props) {
    super(props);

ryanpedersen42

// src/components/create-new-space/create-new-space.jsx

import React, { Component } from 'react';
import FormInput from '../form-input/form-input';
 
import './create-new-space.styles.scss';
 
class CreateNewSpace extends Component {
 constructor(props) {
   super(props);

ryanpedersen42

// src/pages/main-page.jsx
 
// ... other imports removed for brevity
 
import InputForm from '../../components/input-form/input-form';
 
const MainPage = ({ ethAddress, spaceOptions, changeSelectedSpace, selectedSpace, handleNameChange, createNewSpace }) => (
 <Fragment>
     <Header />
     <div className='main-page'>

ryanpedersen42

// src/App.jsx
 
// ...imports removed for brevity
 
class App extends Component {
 constructor(props) {
    super(props);
    this.state = {
      box: null,
      ethAddress: '',

ryanpedersen42

// src/pages/main-page.jsx
 
// ... other imports removed for brevity
 
import GetSecret from '../../components/get-secret/get-secret.jsx;
 
const MainPage = ({  ethAddress, spaceOptions, changeSelectedSpace, selectedSpace, handleNameChange, createNewSpace, handleKeyChange, handleValueChange, inputValue, inputKey, onSubmit, spaceOptions, changeSelectedSpace }) => (
 <Fragment>
     <Header />
     <div className='main-page'>

ryanpedersen42

// src/components/get-secret/get-secret.jsx

import React, { Component, Fragment } from 'react';
 
import FormInput from '../form-input/form-input';
 
import './get-secret.styles.scss';
 
class GetSecret extends Component {
 constructor(props) {

ryanpedersen42

//App.jsx 
  handleAuth = async () => {
    const { history } = this.props

    // web3 actions to authenticate with metamask or other provider
    const ethAddresses = await window.ethereum.enable();
    const ethAddress = ethAddresses[0];
    
    // authenticate with openBox
    const box = await Box.openBox(ethAddress, window.ethereum, {});

ryanpedersen42

  // change the space where actions are being taken in
  changeSelectedSpace = async (event) => {
    const { box } = this.state;

    const selectedSpace = event.target.value;

    const dappStorage = await box.openSpace(selectedSpace);
    
    await this.setState({ selectedSpace, dappStorage });
  }