Switch to 3box comments

README.md

@@ -64,3 +64,7 @@ See [working with docker](./docs/docker.md) for details and troubleshooting.
 1. If you need more than one test account you can also import these private keys: `0x6cbed15c793ce57650b9877cf6fa156fbef513c4e6134f022a85b1ffdd59b2a1`, `0x6370fd033278c143179d81c5526140625662b8daa446c22ee2d73db3707e620c` and `0x646f1ce2fdad0e6deeeb5c7e8e5543bdde65e86029e2fd9fc169899c440a7913`. Make sure to give them all differnent names.
 1. Make sure that Metamask is connected to `127.0.0.1:8545` (choose from the "Networks" picklist in Metamask)
 1. Go to http://127.0.0.1:3000 to load Alchemy
+
+## 3Box Comment Moderation
+
+DAOstack is able to moderate comments submitted using 3Box about DAOs and proposals.  The sole account that has the permissions to perform this moderation is defined in the Alchemy code in the file named settings.ts, the setting called "3BoxCommentsAdmin".

package.json

@@ -77,7 +77,8 @@
     "test:unit": "jest"
   },
   "dependencies": {
-    "3box": "1.17.1",
+    "3box": "^1.20.0",
+    "3box-comments-react": "^3.0.5",
     "@burner-wallet/burner-connect-provider": "^0.1.1",
     "@daostack/arc.js": "^0.2.70",
     "@dorgtech/daocreator-ui": "^1.0.10",

src/actions/profilesActions.ts

@@ -1,12 +1,11 @@
 import Box = require("3box");
-
 import { AsyncActionSequence, IAsyncAction } from "actions/async";
 import { getWeb3Provider } from "arc";
 import Analytics from "lib/analytics";
-
 import { NotificationStatus, showNotification } from "reducers/notifications";
 import { ActionTypes, FollowType, newProfile } from "reducers/profilesReducer";
 import { arrayRemove } from "lib/util";
+import { Address } from "@daostack/arc.js";
 
 // Load account profile data from our database for all the "members" of the DAO
 // TODO: use this once 3box fixes getProfiles
@@ -29,6 +28,93 @@ export function getProfilesForAddresses(addresses: string[]) {
   };
 }
 
+interface IThreeBoxInfo {
+  threeBox: any;
+  threeBoxSpace: any;
+}
+
+const spaceName = "DAOstack";
+
+/**
+ * Returns an authorized 3Box instance and 3BoxSpace, ensures that the
+ * account's 3Box space exists, and all account-specific data has
+ * been fetched.  Updates state if needed.
+ *
+ * Caller is expected to handle exceptions.
+ *
+ * @param accountAddress
+ */
+async function get3Box(accountAddress: Address, dispatch: any, state: any, withSpace = false): Promise<IThreeBoxInfo> {
+  let box;
+  let space;
+  let updateState = false;
+
+  if (state.profiles.threeBox) {
+    box = state.profiles.threeBox;
+  } else {
+    const web3Provider = getWeb3Provider();
+
+    console.log("Box.create...");
+    console.time("Box.create");
+    box = await Box.create(web3Provider);
+    console.timeEnd("Box.create");
+    //box = await Box.openBox(accountAddress, web3Provider);
+
+    console.log(`accountAddress for auth: ${accountAddress}`);
+
+    console.log("box.auth...");
+    console.time("box.auth");
+    await box.auth([spaceName], { address: accountAddress });
+    console.timeEnd("box.auth");
+
+    console.log("box.syncDone...");
+    console.time("box.syncDone");
+    await box.syncDone;
+    console.timeEnd("box.syncDone");
+    updateState = true;
+  }
+  /**
+   * this ensures that a space for the account exists
+   */
+  if (state.profiles.threeBoxSpace) {
+    space = state.profiles.threeBoxSpace;
+  }
+  else if (withSpace) {
+    /**
+     * It is assumed here that the 3box admin space has already been created
+     */
+    console.log("box.openSpace");
+    console.time("box.openSpace");
+    space = await box.openSpace(spaceName);
+    console.timeEnd("box.openSpace");
+
+    console.log("space.syncDone");
+    console.time("space.syncDone");
+    await space.syncDone;
+    console.timeEnd("space.syncDone");
+    updateState = true;
+  }
+
+  const result = {
+    threeBox: box,
+    threeBoxSpace: space,
+  };
+
+  if (updateState) {
+    /**
+     * This is synchronous.
+     * Has the annoying side-effect of deleting the threeBox and threeBoxSpace properties in the payload.
+     */
+    dispatch({
+      type: ActionTypes.SAVE_THREEBOX,
+      sequence: AsyncActionSequence.Success,
+      payload: {...result},
+    });
+  }
+
+  return result;
+}
+
 export function getProfile(accountAddress: string, currentAccount = false) {
   return async (dispatch: any) => {
     try {
@@ -38,7 +124,7 @@ export function getProfile(accountAddress: string, currentAccount = false) {
       if (profile) {
         profile.ethereumAccountAddress = accountAddress;
         profile.socialURLs = await Box.getVerifiedAccounts(profile);
-        const space = await Box.getSpace(accountAddress, "DAOstack");
+        const space = await Box.getSpace(accountAddress, spaceName);
         await space.syncDone;
 
         if (space.follows) {
@@ -85,7 +171,32 @@ export function getProfile(accountAddress: string, currentAccount = false) {
   };
 }
 
-export function threeBoxLogout() {
+export function threeboxLogin(accountAddress: string): (dispatch: any, _getState: any) => Promise<boolean> {
+  return async (dispatch: any, _getState: any) => {
+    const state = _getState();
+
+    try {
+      if (state.profiles.threeBox && state.profiles.threeBoxSpace) {
+        return true;
+      } else {
+        await get3Box(accountAddress, dispatch, state, true);
+      }
+    } catch (e) {
+      const errorMsg = e.message;
+
+      // eslint-disable-next-line no-console
+      console.error("Error logging in to 3box: ", errorMsg);
+
+      dispatch(showNotification(NotificationStatus.Failure, `Logging in to 3box failed: ${errorMsg}`));
+      return false;
+    }
+
+    dispatch(showNotification(NotificationStatus.Success, "Logged in to 3box"));
+    return true;
+  };
+}
+
+export function threeBoxLogout(): (dispatch: any, _getState: any) => Promise<void> {
   return async (dispatch: any, _getState: any) => {
     const state = _getState();
     if (state.profiles.threeBox) {
@@ -101,25 +212,18 @@ export function threeBoxLogout() {
 
 export type UpdateProfileAction = IAsyncAction<"UPDATE_PROFILE", { accountAddress: string }, { description: string; name: string; socialURLs?: any }>;
 
-export function updateProfile(accountAddress: string, name: string, description: string) {
+export function updateProfile(accountAddress: string, name: string, description: string): (dispatch: any, _getState: any) => Promise<boolean> {
   return async (dispatch: any, _getState: any) => {
     dispatch({
       type: ActionTypes.UPDATE_PROFILE,
       sequence: AsyncActionSequence.Pending,
       meta: { accountAddress },
     } as UpdateProfileAction);
 
-    const state = _getState();
     let threeBox;
 
     try {
-      if (state.profiles.threeBox) {
-        threeBox = state.profiles.threeBox;
-      } else {
-        const web3Provider = await getWeb3Provider();
-        threeBox = await Box.openBox(accountAddress, web3Provider);
-      }
-      await threeBox.syncDone;
+      threeBox = (await get3Box(accountAddress, dispatch, _getState())).threeBox;
       await threeBox.public.setMultiple(["name", "description"], [name, description]);
     } catch (e) {
       const errorMsg = e.message;
@@ -163,26 +267,10 @@ export type FollowItemAction = IAsyncAction<"FOLLOW_ITEM", { accountAddress: str
 
 export function toggleFollow(accountAddress: string, type: FollowType, id: string) {
   return async (dispatch: any, _getState: any) => {
-    const state = _getState();
-    let threeBox;
     let threeBoxSpace;
 
     try {
-      if (state.profiles.threeBox) {
-        threeBox = state.profiles.threeBox;
-      } else {
-        const web3Provider = await getWeb3Provider();
-        threeBox = await Box.openBox(accountAddress, web3Provider);
-      }
-
-      await threeBox.syncDone;
-
-      if (state.profiles.threeBoxSpace) {
-        threeBoxSpace = state.profiles.threeBoxSpace;
-      } else {
-        threeBoxSpace = await threeBox.openSpace("DAOstack");
-      }
-      await threeBoxSpace.syncDone;
+      threeBoxSpace = (await get3Box(accountAddress, dispatch, _getState())).threeBoxSpace;
     } catch (e) {
       dispatch(showNotification(NotificationStatus.Failure, `Failed to connect to 3box: ${e.message}`));
       return false;
@@ -216,7 +304,7 @@ export function toggleFollow(accountAddress: string, type: FollowType, id: strin
       type: ActionTypes.FOLLOW_ITEM,
       sequence: AsyncActionSequence.Success,
       meta: { accountAddress },
-      payload: { type, id, isFollowing, threeBox, threeBoxSpace },
+      payload: { type, id, isFollowing },
     } as FollowItemAction);
 
     dispatch(showNotification(NotificationStatus.Success, (isFollowing ? "Now following" : "No longer following") + ` ${type.slice(0, -1)} ${id.slice(0, 8)}...`));

src/assets/styles/global.scss

@@ -42,3 +42,28 @@
 :global div#walletconnect-qrcode-modal {
   z-index: 10000001 !important;
 }
+
+:global {
+  .threebox-comments-react {
+    /**
+     * hack to fix misaligned 3box label while spinning
+     */
+    .input_postLoading_text,
+    .input_login {
+      display: none;
+    }
+    /**
+     * hack to fix 3box footer being horizontally misaligned
+     */
+    .comments_footer {
+      span.footer_text {
+        white-space: nowrap;
+
+        a .footer_text_image {
+          margin-left: 10px;
+          width: 50px;
+        }
+      }
+    }
+  }
+}

src/components/Dao/DaoLandingPage.scss

@@ -53,4 +53,32 @@
   .wallContainer {
     padding-bottom: 5px;
   }
+
+  div.threeBoxLoginButton {
+    padding-right: 8px;
+    button {
+      height: 30px;
+      border-radius: 30px;
+      border-width: 1px;
+      background-color: #0071ff;
+      padding: 0 15px;
+      border-color: #0376ff;
+      color: white;
+      font-weight: bold;
+      font-size: 11px;
+      text-align: center;
+      cursor: pointer;
+      outline: none;
+      white-space: nowrap;
+    }
+  }
+}
+.discussionWarning {
+  font-weight: 600;
+  font-style: italic;
+  background-color: lightcoral;
+  padding: 10px;
+  font-size: 14px;
+  margin-top: -20px;
+  margin-bottom: 36px;
 }