text: const syncComplete = (res) => {
    console.log('Sync Complete')
    updateProfileData(window.box)
  }
  //Start a new session using the given ethereum address
  window.ethereum.enable().then(addresses => {
    console.log(addresses);
  
    //3box will retrieve all data related to the ethereum account
    window.Box.openBox(addresses[0], window.ethereum, {}).then(box => {
      box.onSyncDone(syncComplete)
      window.box = box
      console.log(box)
  
      controlls.style.display = 'block'
      updateProfileData(box)
  
      setProfile.addEventListener('click', () => {
        box.public.set(prkey.value, prvalue.value).then(() => {
          prkey.value = null
          prvalue.value = null
          updateProfileData(box)
        })
      })
  
      /* add & modify public data and spaces */
      openSpace.addEventListener('click', () => {
        const name = spaceName.value
        window.currentSpace = name
        const opts = {
          onSyncDone: () => {
            console.log('sync done in space', name)
            updateSpaceData()
          }
        }
        box.openSpace(name, opts).then(() => {
          spacePub.innerHTML = `Public and private data in ${name}:`
          spaceCtrl.style.display = 'block'
          updateSpaceData()
        })
      })
  
      setSpacePub.addEventListener('click', () => {
        console.log(spkey.value, spvalue.value)
        box.spaces[window.currentSpace].public.set(spkey.value, spvalue.value).then(() => {
          spkey.value = null
          spvalue.value = null
          updateSpaceData()
        })
      })
  
      const updateSpaceData = () => {
        box.spaces[window.currentSpace].public.all().then(entries => {
          spaceDataPub.innerHTML = ''
          Object.keys(entries).map(k => {
            spaceDataPub.innerHTML += k + ': ' + entries[k] + '<br />'
          })
        })
      }
  
  
      /* private data and space addition - modified version of 3 functions above */
      openSpace.addEventListener('click', () => {
        const name = spaceName.value
        window.currentSpace = name
        const opts = {
          onSyncDone: () => {
            console.log('sync done in space', name)
            updateSpaceData()
          }
        }
        box.openSpace(name, opts).then(() => {
          spacePriv.innerHTML = `Private data in ${name}:`
          spaceCtrl.style.display = 'block'
          updateSpaceData()
        })
      })
      // to modify from above  
      // setSpacePub.addEventListener('click', () => {
      //   console.log(spkey.value, spvalue.value)
      //   box.spaces[window.currentSpace].public.set(spkey.value, spvalue.value).then(() => {
      //     spkey.value = null
      //     spvalue.value = null
      //     updateSpaceData()
      //   })
      // })
  
      // const updateSpaceData = () => {
      //   box.spaces[window.currentSpace].public.all().then(entries => {
      //     spaceDataPub.innerHTML = ''
      //     Object.keys(entries).map(k => {
      //       spaceDataPub.innerHTML += k + ': ' + entries[k] + '<br />'
      //     })
      //   })
      // }
  
      joinThread.addEventListener('click', () => {
        const name = threadName.value
        const firstModerator = threadfirstModerator.value
        const membersBool = members.checked
        posts.style.display = 'block'
        threadModeration.style.display = 'block'
        if (members.checked) threadMembers.style.display = 'block'
        box.spaces[window.currentSpace].joinThread(name, { firstModerator, members: membersBool }).then(thread => {
          window.currentThread = thread
          thread.onUpdate(() => {
            updateThreadData()
          })
          thread.onNewCapabilities(() => {
            updateThreadCapabilities()
          })
          updateThreadData()
          updateThreadCapabilities()
        }).catch(updateThreadError)
      })
  
      addThreadMod.addEventListener('click', () => {
        const id = threadMod.value
        window.currentThread.addModerator(id).then(res => {
          updateThreadCapabilities()
        }).catch(updateThreadError)
      })
  
      addThreadMember.addEventListener('click', () => {
        const id = threadMember.value
        window.currentThread.addMember(id).then(res => {
          updateThreadCapabilities()
        }).catch(updateThreadError)
      })
  
      window.deletePost = (el) => {
        window.currentThread.deletePost(el.id).then(res => {
          updateThreadData()
        }).catch(updateThreadError)
      }
  
      const updateThreadError = (e = '') => {
        threadACError.innerHTML = e
      }
  
      const updateThreadData = () => {
        threadData.innerHTML = ''
        updateThreadError()
        window.currentThread.getPosts().then(posts => {
          posts.map(post => {
            threadData.innerHTML += post.author + ': <br />' + post.message + '<br /><br />'
            threadData.innerHTML += `<button id="` + post.postId + `"onClick="window.deletePost(` + post.postId + `)" type="button" class="btn btn btn-primary" >Delete</button>` + '<br /><br />'
          })
        })
      }
  
      const updateThreadCapabilities = () => {
        threadMemberList.innerHTML = ''
        if (window.currentThread._members) {
          window.currentThread.listMembers().then(members => {
            members.map(member => {
              threadMemberList.innerHTML += member + '<br />'
            })
          })
        }
        threadModeratorList.innerHTML = ''
        window.currentThread.listModerators().then(moderators => {
          moderators.map(moderator => {
            threadModeratorList.innerHTML += moderator + '<br />'
          })
        })
      }
  
      postThread.addEventListener('click', () => {
        window.currentThread.post(postMsg.value).catch(updateThreadError);
        updateSpaceData();
      })
  
      /* this needs changing to pulling from pinning node in future */
      updateThreadFromEmulator.addEventListener('click', () => {
        fetch("http://localhost:3000/api/p1-reader-log.csv").then(response => {
          return response.text();
        }).then(data => {
          let filteredData = $.csv.toArray(data);
          console.log(filteredData);
          /*
          for (let i = 0; i < filteredData.length; i++) {
            console.log(filteredData[i]);
            window.currentThread.post(filteredData[i]).catch(updateThreadError);
          }
          */
          if (filteredData != '') {
            window.currentThread.post(filteredData).catch(updateThreadError);
            updateSpaceData();
          }
  
        }).catch(error => console.log(error));
      })
  
      bclose.addEventListener('click', () => {
        logout(box)
      })
    })
  });
  
  getProfile.addEventListener('click', () => {
    console.log(ethAddr.value)
    window.Box.getProfile(ethAddr.value, {}).then(profile => {
      console.log(profile)
      Object.entries(profile).map(kv => {
        getProfileData.innerHTML += kv[0] + ': ' + kv[1] + '<br />'
      })
    })
  })
  
  function updateProfileData(box) {
    profileData.innerHTML = ''
    box.public.all().then(profile => {
      console.log(profile)
      Object.entries(profile).map(kv => {
        profileData.innerHTML += kv[0] + ': ' + kv[1] + '<br />'
      })
    })
  }
  
  function logout(box) {
    box.logout().then(() => {
      privateStoreData.innerHTML = ''
      profileData.innerHTML = ''
      controlls.style.display = 'none'
    })
  }
  