hotfix: logging, apm, ga (#866)

Author: moshmage

.env.example

@@ -105,4 +105,25 @@ NEXT_PUBLIC_PROPOSAL_ACCEPTED=
 NEXT_PUBLIC_PROPOSAL_REJECTED=
 
 # Google Analytics Measurement ID
-NEXT_PUBLIC_GA_MEASUREMENT_ID=
+NEXT_PUBLIC_GA_MEASUREMENT_ID=
+
+# API log level: 0 none, 1 error, 2 warn, 3 info, 4 trace, 5 log, 6 debug
+LOG_LEVEL=6
+
+# Elastic APM integration secret token
+ELASTIC_APM_SECRET_TOKEN=
+
+# Elastic APM integration server url
+ELASTIC_APM_SERVER_URL=
+
+# Elastic APM integration service name
+ELASTIC_APM_SERVICE_NAME=
+
+# true|false - Enable Elastic APM integration
+ELASTIC_APM_ACTIVE=
+
+# Elastic APM _local_ log level
+ELASTIC_APM_LOG_LEVEL=
+
+# true|false - should we index Logger.trace() into elastic
+ELASTIC_INDEX_STACK_TRACE=

components/bounties/list-active-networks.tsx

@@ -45,7 +45,6 @@ export default function ListActiveNetworks() {
         <h4 className="mt-1">{t("most-active-networks")}</h4>
         <Link href={"/networks"}>
           <a
-            target="_blank"
             className="text-decoration-none text-primary mt-2"
             rel="noreferrer"
           >

components/connect-wallet-button.tsx

@@ -19,11 +19,9 @@ import {changeShowWeb3} from "../contexts/reducers/update-show-prop";
 export default function ConnectWalletButton({children = null, asModal = false, forceLogin = false,}) {
   const { t } = useTranslation(["common", "connect-wallet-button"]);
 
-  const {dispatch, state: { loading, connectedChain },} = useAppState();
+  const {dispatch, state} = useAppState();
   const [showModal, setShowModal] = useState(false);
 
-  const {state} = useAppState();
-
   const { connectWallet } = useAuthentication();
 
   async function handleLogin()  {
@@ -35,11 +33,12 @@ export default function ConnectWalletButton({children = null, asModal = false, f
     if (!state.Service?.active)
       return;
 
-    if (+state.connectedChain?.id === +state.Settings?.requiredChain?.id) {
+    if (
+      (+state.connectedChain?.id || +window?.ethereum?.chainId) ===
+      +state.Settings?.requiredChain?.id
+      ) {
       connectWallet();
     } else {
-      console.log('no connected chain?', connectedChain, state.Settings?.requiredChain);
-
       dispatch(changeChain.update({...state.connectedChain, id: state.Settings?.requiredChain?.id}));
       setShowModal(false);
     }
@@ -64,7 +63,7 @@ export default function ConnectWalletButton({children = null, asModal = false, f
 
 
   if (asModal) {
-    if (loading?.isLoading) return <></>;
+    if (state?.loading?.isLoading) return <></>;
 
     return (
       <Modal

components/main-nav.tsx

@@ -3,6 +3,7 @@ import {ReactElement, ReactNode, useEffect, useState} from "react";
 import {Defaults} from "@taikai/dappkit";
 import {useRouter} from "next/router";
 
+import ExternalLinkIcon from "assets/icons/external-link-icon";
 import HelpIcon from "assets/icons/help-icon";
 import LogoPlaceholder from "assets/icons/logo-placeholder";
 import PlusIcon from "assets/icons/plus-icon";
@@ -45,7 +46,7 @@ export default function MainNav() {
   const { searchNetworks } = useApi();
   const { getURLWithNetwork } = useNetworkTheme();
 
-  const noNeedNetworkInstance = ["/networks", "/new-network", "/bounty-hall", "/leaderboard"].includes(pathname);
+  const noNeedNetworkInstance = ["/networks", "/new-network", "/explore", "/leaderboard"].includes(pathname);
   const fullLogoUrl = state.Service?.network?.active?.fullLogo;
 
   useEffect(() => {
@@ -74,7 +75,21 @@ export default function MainNav() {
     if(!window.ethereum) return dispatch(changeShowWeb3(true))
     return dispatch(changeShowCreateBounty(true))
 
-  } 
+  }
+  
+  function LinkExplore() {
+    return (
+      <InternalLink
+        className="mt-1"
+        href={"/explore"}
+        blank={!noNeedNetworkInstance}
+        label={<Translation label={"main-nav.explorer"} />}
+        nav
+        uppercase
+        icon={!noNeedNetworkInstance ? <ExternalLinkIcon className="mb-1" width={12} height={12} />:null}
+      />
+    );
+  }
 
   function LinkNetworks() {
     return(
@@ -101,7 +116,9 @@ export default function MainNav() {
   function LinkBounties() {
     return (
       <InternalLink
-        href={"/bounty-hall"}
+        href={getURLWithNetwork("/bounties", {
+          network: state.Service?.network?.active?.name,
+        })}
         label={<Translation label={"main-nav.nav-avatar.bounties"} />}
         nav
         uppercase
@@ -110,41 +127,17 @@ export default function MainNav() {
   }
 
   const brandLogo = !noNeedNetworkInstance ? (
-      <InternalLink
-        href={getURLWithNetwork("/", {
-          network: state.Service?.network?.active?.name,
-        })}
-        icon={
-          fullLogoUrl ? (
-            <img
-              src={`${state.Settings?.urls?.ipfs}/${fullLogoUrl}`}
-              width={104}
-              height={40}
-            />
-          ) : (
-            <LogoPlaceholder />
-          )
-        }
-        className="brand"
-        nav
-        active
-        brand
-      />
-    ): (
-      <InternalLink
-        href={'/'}
-        icon={                  
-            <img
-              src={`/images/Bepro_Logo_Light.svg`}
-              width={104}
-              height={40}
-            />                  
-        }
-        className="brand"
-        nav
-        active
-        brand
+    fullLogoUrl ? (
+      <img
+        src={`${state.Settings?.urls?.ipfs}/${fullLogoUrl}`}
+        width={104}
+        height={40}
       />
+    ) : (
+      <LogoPlaceholder />
+    )
+  ) : (
+    <img src={`/images/Bepro_Logo_Light.svg`} width={104} height={40} />
   );
 
   return (
@@ -163,7 +156,6 @@ export default function MainNav() {
                 <li>
                   <LinkBounties />
                 </li>
-
                 <li>
                   <InternalLink
                     href={getURLWithNetwork("/curators", {
@@ -180,18 +172,21 @@ export default function MainNav() {
                 <li>
                   <LinkLeaderBoard />
                 </li>
+                <li>
+                  <LinkExplore />
+                </li>
               </ul>
             )) || (
               <ul className="nav-links">
-                <li>
-                  <LinkBounties />
-                </li>
                 <li>
                   <LinkNetworks/>
                 </li>
                 <li>
                   <LinkLeaderBoard />
                 </li>
+                <li>
+                  <LinkExplore />
+                </li>
               </ul>
             )}
           </div>

components/transaction-modal.tsx

@@ -19,6 +19,7 @@ import {toastInfo} from "contexts/reducers/change-toaster";
 import {CopyValue} from "helpers/copy-value";
 import {formatStringToCurrency} from "helpers/formatNumber";
 import {truncateAddress} from "helpers/truncate-address";
+import { isValidUrl } from "helpers/validateUrl";
 
 import {BlockTransaction, Transaction} from "interfaces/transaction";
 
@@ -99,7 +100,9 @@ export default function TransactionModal({
   }
 
   function getEtherScanHref(tx: string) {
-    return `${state.Settings?.urls?.blockScan}/${tx}`;
+    const url = state.Settings?.urls?.blockScan
+    const validUrl = isValidUrl(url) ? url : `https://${url}`
+    return `${validUrl}/${tx}`;
   }
 
   return (

components/web3-dialog.tsx

@@ -31,12 +31,12 @@ export default function WebThreeDialog() {
 
   useEffect(() => {
     if (![
+      "/explore",
+      "/leaderboard",
+      "/networks",
       getURLWithNetwork("/").pathname,
       getURLWithNetwork("/bounties").pathname,
       getURLWithNetwork("/curators").pathname,
-      getURLWithNetwork("/oracle").pathname,
-      getURLWithNetwork("/oracle/new-bounties").pathname,
-      getURLWithNetwork("/oracle/ready-to-merge").pathname,
       "/[network]/bounty",
       "/[network]",
     ].includes(router.pathname))

elastic-apm-node.js

@@ -0,0 +1,9 @@
+require(`dotenv`).config();
+
+module.exports = {
+  serverUrl: process.env.ELASTIC_APM_SERVER_URL,  // E.g. https://my-deployment-name.apm.us-west2.gcp.elastic-cloud.com
+  secretToken: process.env.ELASTIC_APM_SECRET_TOKEN,
+  serviceName: process.env.ELASTIC_APM_SERVICE_NAME,
+  active: process.env.ELASTIC_APM_ACTIVE === "true",
+  logLevel: process.env.ELASTIC_APM_LOG_LEVEL
+}

helpers/error-messages.ts

@@ -0,0 +1,2 @@
+export const UNAUTHORIZED = `Unauthorized`;
+export const INVALID_JWT_TOKEN = `Invalid JWT Token`;

helpers/validateUrl.ts

@@ -0,0 +1,8 @@
+export function isValidUrl(string) {
+  try {
+    new URL(string);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}

middleware/index.ts

@@ -1,5 +1,8 @@
+import {LogAccess} from "./log-access";
 import withCors from "./withCors";
 import WithJwt from "./withJwt";
 
 const withProtected = (handler) => withCors(WithJwt(handler))
-export {withCors, WithJwt, withProtected}
+const RouteMiddleware = (handler) => LogAccess(withCors(WithJwt(handler)));
+
+export {withCors, WithJwt, withProtected, RouteMiddleware};