Quick n dirty 3box support

backend/src/routes/livepeer.js

@@ -52,6 +52,7 @@ const provider = new ethers.providers.JsonRpcProvider(API_L1_HTTP);
 // const ens = new ENS({ provider: web3layer1, ensAddress: getEnsAddress('1') });
 let ensDomainCache = [];
 let ensInfoCache = [];
+let threeboxCache = [];
 
 // Update CoinMarketCap related api calls every 5 minutes
 let cmcPriceGet = 0;
@@ -677,7 +678,7 @@ const parseOrchestrator = async function (reqAddr) {
           return orchestratorCache[idx];
         }
       }
-    } else{
+    } else {
       console.log("Thegraph is probably acting up, but there is no cached value. Returning null...");
       return {};
     }
@@ -1056,7 +1057,6 @@ const getEnsInfo = async function (addr) {
   }
   return ensObj;
 }
-
 // Gets and caches info for a single address
 apiRouter.get("/getENS/:orch", async (req, res) => {
   try {
@@ -1090,4 +1090,75 @@ apiRouter.get("/getEnsInfo", async (req, res) => {
   }
 });
 
+
+const getThreeBoxInfo = async function (addr) {
+  const now = new Date().getTime();
+  let wasInCache = false;
+  // See if it is cached
+  for (const thisAddr of threeboxCache) {
+    if (thisAddr.address === addr) {
+      // Check timeout
+      if (now - thisAddr.timestamp < CONF_TIMEOUT_ENS_INFO) {
+        return thisAddr;
+      }
+      wasInCache = true;
+    }
+  }
+  // Else get it and cache it
+  const url = "https://explorer.livepeer.org/api/3box?account=" + addr;
+  await https.get(url, (res) => {
+    let body = "";
+    res.on("data", (chunk) => {
+      body += chunk;
+    });
+    res.on("end", () => {
+      try {
+        const data = JSON.parse(body);
+        const threeBoxObj = {
+          address: data.id,
+          name: data.name,
+          website: data.website,
+          description: data.description,
+          image: data.image,
+          timestamp: now
+        }
+        if (wasInCache) {
+          for (var idx = 0; idx < threeboxCache.length; idx++) {
+            if (threeboxCache[idx].address == addr) {
+              console.log("Updating outdated 3box info " + threeBoxObj.address + " @ " + threeBoxObj.timestamp);
+              threeboxCache[idx] = threeBoxObj;
+              break;
+            }
+          }
+        } else {
+          console.log("Caching new 3box info " + threeBoxObj.address + " @ " + threeBoxObj.timestamp);
+          threeboxCache.push(threeBoxObj);
+        }
+      } catch (error) {
+        console.error(error.message);
+      };
+    });
+  }).on("error", (error) => {
+    console.error(error.message);
+  });
+}
+// Gets and caches info for a single address
+apiRouter.get("/getThreeBox/:orch", async (req, res) => {
+  try {
+    // First resolve addr => domain name
+    const threeBoxInfo = await getThreeBoxInfo(req.params.orch);
+    res.send(threeBoxInfo);
+  } catch (err) {
+    res.status(400).send(err);
+  }
+});
+// Returns entire 3box info mapping cache
+apiRouter.get("/getAllThreeBox", async (req, res) => {
+  try {
+    res.send(threeboxCache);
+  } catch (err) {
+    res.status(400).send(err);
+  }
+});
+
 export default apiRouter;

src/actions/livepeer.js

@@ -26,6 +26,7 @@ export const CLEAR_ORCHESTRATOR = "CLEAR_ORCHESTRATOR";
 export const RECEIVE_TICKETS = "RECEIVE_TICKETS";
 export const SET_ALL_ENS_INFO = "SET_ALL_ENS_INFO";
 export const SET_ALL_ENS_DOMAINS = "SET_ALL_ENS_DOMAINS";
+export const SET_ALL_THREEBOX_INFO = "SET_ALL_THREEBOX_INFO";
 
 const setQuotes = message => ({
   type: RECEIVE_QUOTES, message
@@ -54,6 +55,9 @@ const setAllEnsInfo = message => ({
 const setAllEnsDomains = message => ({
   type: SET_ALL_ENS_DOMAINS, message
 });
+const setAllThreeBoxInfo = message => ({
+  type: SET_ALL_THREEBOX_INFO, message
+});
 
 
 export const getQuotes = () => async dispatch => {
@@ -552,4 +556,19 @@ export const getEnsInfo = async (addr) => {
   const response = await apiUtil.getEnsInfo(addr);
   const data = await response.json();
 };
+  
+
+export const getAllThreeBoxInfo = () => async dispatch => {
+  const response = await apiUtil.getAllThreeBox();
+  const data = await response.json();
+  if (response.ok) {
+    return dispatch(setAllThreeBoxInfo(data));
+  }
+  return dispatch(receiveErrors(data));
+};
+
+export const getThreeBoxInfo = async (addr) => {
+  const response = await apiUtil.getThreeBox(addr);
+  const data = await response.json();
+};
   

src/components/OrchAddressViewer.js

@@ -5,6 +5,8 @@ import { getEnsInfo } from "../actions/livepeer";
 const Address = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
   const [hasRefreshed, setRefresh] = useState(false);
+  let hasENS = false;
+  let hasThreeBox = false;
   let thisDomain = null;
   let thisInfo = null;
   const now = new Date().getTime();
@@ -36,6 +38,7 @@ const Address = (obj) => {
     for (const thisAddr of livepeer.ensInfoMapping) {
       if (thisAddr.domain === thisDomain.domain) {
         thisInfo = thisAddr;
+        hasENS = true;
         // Check timeout
         if (now - thisAddr.timestamp < 86400000) {
           break;
@@ -55,9 +58,22 @@ const Address = (obj) => {
     }
   }
 
+  // Ugly shit, but temporary for now to quickly enable threebox. Sorry!
+  if (!hasENS) {
+    if (livepeer.threeBoxInfo) {
+      for (const thisAddr of livepeer.threeBoxInfo) {
+        if (thisAddr.address === obj.address) {
+          thisInfo = thisAddr;
+          hasThreeBox = true;
+          break;
+        }
+      }
+    }
+  }
+
   let thisName;
   let thisIcon;
-  if (thisInfo) {
+  if (hasENS) {
     thisName = thisInfo.domain;
     console.log(thisInfo.avatar);
     if (thisInfo.avatar) {
@@ -71,13 +87,24 @@ const Address = (obj) => {
           <img alt="" src="ens.png" width="20em" height="20em" />
         </a >
     }
+  } else if (hasThreeBox) {
+    if (thisInfo.name) {
+      thisName = <h4 className="elipsText elipsOnMobileExtra">{thisInfo.name}</h4>;
+    } else {
+      thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
+    }
+    if (thisInfo.image) {
+      thisIcon = <img alt="" src={"https://ipfs.livepeer.com/ipfs/" + thisInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+    } else {
+      thisIcon = null;
+    }
   } else {
     thisName = obj.address;
     thisIcon = null;
   }
 
   return (
-    <div className="row" style={{width: 'unset'}}>
+    <div className="row" style={{ width: 'unset' }}>
       <a className="selectOrchLight" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} >
         <img alt="" src="livepeer.png" width="20em" height="20em" />
       </a>

src/components/OrchInfoViewer.js

@@ -26,6 +26,8 @@ function copyLink(addr) {
 
 const OrchInfoViewer = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
+  let hasENS = false;
+  let hasThreeBox = false;
   let rewardCut = 0;
   let feeCut = 0;
   let totalStake = 0;
@@ -86,13 +88,28 @@ const OrchInfoViewer = (obj) => {
       for (const thisAddr of livepeer.ensInfoMapping) {
         if (thisAddr.domain === thisDomain.domain) {
           thisInfo = thisAddr;
+          hasENS = true;
           break;
         }
       }
     }
+
+    // Ugly shit, but temporary for now to quickly enable threebox. Sorry!
+    if (!hasENS) {
+      if (livepeer.threeBoxInfo) {
+        for (const thisAddr of livepeer.threeBoxInfo) {
+          if (thisAddr.address === thisID) {
+            thisInfo = thisAddr;
+            hasThreeBox = true;
+            break;
+          }
+        }
+      }
+    }
+
     let ensDescription;
     let ensUrl;
-    if (thisInfo) {
+    if (hasENS) {
       if (thisInfo.description) {
         ensDescription =
           <div className="stroke">
@@ -113,6 +130,27 @@ const OrchInfoViewer = (obj) => {
             </a >
           </div>
       }
+    } else if (hasThreeBox) {
+      if (thisInfo.description) {
+        ensDescription =
+          <div className="stroke">
+            <div className="verticalDivider" />
+            <span>{thisInfo.description}</span>
+          </div>
+      }
+      if (thisInfo.website) {
+        if (!thisInfo.website.startsWith('http')) {
+          thisInfo.website = "https://" + thisInfo.website;
+        }
+        ensUrl =
+          <div className="stroke">
+            <a className="selectOrchLight" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={thisInfo.website} >
+              <div className="rowAlignLeft">
+                <span>{thisInfo.website}</span>
+              </div>
+            </a >
+          </div>
+      }
     }
 
     return (

src/components/eventButtonAddress.js

@@ -1,16 +1,18 @@
 import React, { useState } from "react";
 import {
-  getOrchestratorInfo
+  getOrchestratorInfo, getEnsInfo, getThreeBoxInfo
 } from "../actions/livepeer";
 import { useDispatch, useSelector } from 'react-redux';
-import { getEnsInfo } from "../actions/livepeer";
 
 const EventButtonAddress = (obj) => {
   const dispatch = useDispatch();
   const livepeer = useSelector((state) => state.livepeerstate);
   const [hasRefreshed, setRefresh] = useState(false);
+  const [hasThreeBoxRefreshed, setThreeBoxRefresh] = useState(false);
   let thisDomain = null;
   let thisInfo = null;
+  let hasENS = false;
+  let hasThreeBox = false;
   const now = new Date().getTime();
   // Lookup domain in cache
   if (livepeer.ensDomainMapping) {
@@ -40,6 +42,7 @@ const EventButtonAddress = (obj) => {
     for (const thisAddr of livepeer.ensInfoMapping) {
       if (thisAddr.domain === thisDomain.domain) {
         thisInfo = thisAddr;
+        hasENS = true;
         // Check timeout
         if (now - thisAddr.timestamp < 86400000) {
           break;
@@ -59,21 +62,62 @@ const EventButtonAddress = (obj) => {
     }
   }
 
+  // Ugly shit, but temporary for now to quickly enable threebox. Sorry!
+  if (!hasENS) {
+    if (livepeer.threeBoxInfo) {
+      for (const thisAddr of livepeer.threeBoxInfo) {
+        if (thisAddr.address === obj.address) {
+          thisInfo = thisAddr;
+          hasThreeBox = true;
+          // Check timeout
+          if (now - thisAddr.timestamp < 86400000) {
+            break;
+          }
+          // Is outdated
+          if (!hasThreeBoxRefreshed) {
+            getThreeBoxInfo(obj.address);
+            setThreeBoxRefresh(true);
+          }
+          break;
+        }
+      }
+      // If it was not cached at all
+      if (thisDomain == null && !hasThreeBoxRefreshed) {
+        setThreeBoxRefresh(true);
+        getThreeBoxInfo(obj.address);
+      }
+    }
+  }
+
   let thisName;
   let thisIcon;
-  if (thisInfo) {
+  if (hasENS) {
-    thisName = <h4 className="elipsText elipsOnMobileExtra">{thisInfo.domain}</h4>;
+    if (thisInfo) {
-    if (thisInfo.avatar) {
+      thisName = <h4 className="elipsText elipsOnMobileExtra">{thisInfo.domain}</h4>;
-      thisIcon =
+      if (thisInfo.avatar) {
-        <a className="selectOrch" style={{ padding: '0', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
+        thisIcon =
-          <img alt="" src={thisInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+          <a className="selectOrch" style={{ padding: '0', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
-        </a >
+            <img alt="" src={thisInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+          </a >
+      }
+    } else {
+      thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
+      thisIcon = null;
+    }
+  } else if (hasThreeBox) {
+    if (thisInfo.name) {
+      thisName = <h4 className="elipsText elipsOnMobileExtra">{thisInfo.name}</h4>;
+    } else {
+      thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
+    }
+    if (thisInfo.image) {
+      thisIcon = <img alt="" src={"https://ipfs.livepeer.com/ipfs/" + thisInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+    } else {
+      thisIcon = null;
     }
-  } else {
-    thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
-    thisIcon = null;
   }
 
+
   return (
     <div className="rowAlignLeft" style={{ width: '100%' }}>
       <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}>

src/pages/loadingScreen.js

@@ -5,7 +5,7 @@ import {
 } from "../actions/user";
 import {
   getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getTickets,
-  getAllEnsDomains, getAllEnsInfo
+  getAllEnsDomains, getAllEnsInfo, getAllThreeBoxInfo
 } from "../actions/livepeer";
 import { login } from "../actions/session";
 
@@ -40,6 +40,7 @@ const Startup = (obj) => {
   const refreshENS = () => {
     console.log("Refreshing ENS data...");
     batch(() => {
+      dispatch(getAllThreeBoxInfo());
       dispatch(getAllEnsDomains());
       dispatch(getAllEnsInfo());
     });

src/reducers/livepeer/livepeerstate.js

@@ -7,7 +7,8 @@ import {
   CLEAR_ORCHESTRATOR,
   RECEIVE_TICKETS,
   SET_ALL_ENS_INFO,
-  SET_ALL_ENS_DOMAINS
+  SET_ALL_ENS_DOMAINS,
+  SET_ALL_THREEBOX_INFO
 } from "../../actions/livepeer";
 
 export default (state = {
@@ -40,6 +41,8 @@ export default (state = {
       return { ...state, ensInfoMapping: message };
     case SET_ALL_ENS_DOMAINS:
       return { ...state, ensDomainMapping: message };
+    case SET_ALL_THREEBOX_INFO:
+      return { ...state, threeBoxInfo: message };
     default:
       return { ...state };
   }

src/util/livepeer.js

@@ -89,3 +89,21 @@ export const getEnsInfo = (addr) => (
     }
   })
 );
+
+export const getAllThreeBox = () => (
+  fetch("api/livepeer/getAllThreeBox/", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+);
+
+export const getThreeBox = (addr) => (
+  fetch("api/livepeer/getThreeBox/" + addr, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+);