Lint / Format configs for lambda-dao

.editorconfig

@@ -0,0 +1,9 @@
+# http://editorconfig.org
+
+  [*]
+  indent_style = space
+  indent_size = 2
+  end_of_line = lf
+  charset = utf-8
+  trim_trailing_whitespace = true
+  insert_final_newline = true

.eslintrc.json

@@ -20,7 +20,7 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

.nvmrc

@@ -1 +1 @@
-v15.5.1
+v16.15.1

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+ "arrowParens": "avoid",
+ "bracketSpacing": true,
+ "endOfLine": "auto",
+ "printWidth": 120,
+ "proseWrap": "preserve",
+ "quoteProps": "consistent",
+ "semi": false,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "none"
+}

package.json

@@ -11,7 +11,8 @@
     "eject": "react-scripts eject",
     "lint:ci": "eslint --color 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:check": "eslint --quiet 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@hookform/resolvers": "^2.8.1",
@@ -38,6 +39,7 @@
     "graphql-request": "^3.4.0",
     "hex-to-rgba": "^2.0.1",
     "jsonschema": "^1.4.0",
+    "launchdarkly-react-client-sdk": "2.27.0",
     "mixpanel-browser": "^2.42.0",
     "notistack": "^1.0.3",
     "prism-themes": "^1.9.0",
@@ -72,10 +74,11 @@
     "@typescript-eslint/parser": "^4.18.0",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^5.1.3",
-    "lint-staged": "^10.5.4",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.2.0",
     "source-map-explorer": "2.5.2",
     "typescript": "^4.2.3"
@@ -97,9 +100,14 @@
       "last 1 safari version"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
-      "yarn lint:fix"
+      "yarn lint:check"
     ]
   }
 }

src/App.tsx

@@ -1,43 +1,40 @@
-import React from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from "react-router-dom";
-import mixpanel from "mixpanel-browser";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { Box, makeStyles, ThemeProvider } from "@material-ui/core";
-import { SnackbarProvider } from "notistack";
+import React from "react"
+import { withLDProvider } from "launchdarkly-react-client-sdk"
+import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
+import mixpanel from "mixpanel-browser"
+import { QueryClient, QueryClientProvider } from "react-query"
+import { Box, makeStyles, ThemeProvider } from "@material-ui/core"
+import { SnackbarProvider } from "notistack"
 
-import { DAOExplorerRouter } from "modules/explorer/router";
-import { DAOCreate } from "modules/creator";
-import { CreatorProvider } from "modules/creator/state";
-import ScrollToTop from "modules/common/ScrollToTop";
-import { theme } from "theme";
+import { DAOExplorerRouter } from "modules/explorer/router"
+import { DAOCreate } from "modules/creator"
+import { CreatorProvider } from "modules/creator/state"
+import ScrollToTop from "modules/common/ScrollToTop"
+import { theme } from "theme"
 
-import "App.css";
-import { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions";
-import { Landing } from "modules/home/Landing";
-import { WarningFooter } from "modules/common/WarningFooter";
-import { ActionSheetProvider } from "modules/explorer/context/ActionSheets";
-import { legacyTheme } from "theme/legacy";
-import { Footer } from "modules/common/Footer";
-import { FAQ } from "modules/home/FAQ";
+import "App.css"
+import { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions"
+import { Landing } from "modules/home/Landing"
+import { WarningFooter } from "modules/common/WarningFooter"
+import { ActionSheetProvider } from "modules/explorer/context/ActionSheets"
+import { legacyTheme } from "theme/legacy"
+import { Footer } from "modules/common/Footer"
+import { FAQ } from "modules/home/FAQ"
+import { EnvKey, getEnv } from "services/config"
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 60000),
+      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 60000),
       retry: false,
       retryOnMount: false,
       refetchOnMount: false,
       refetchOnWindowFocus: true,
       staleTime: 5000,
-      cacheTime: 30000,
-    },
-  },
-});
+      cacheTime: 30000
+    }
+  }
+})
 
 const styles = makeStyles({
   success: {
@@ -46,49 +43,52 @@ const styles = makeStyles({
     height: 54,
     fontSize: 13,
     lineHeight: "0px",
-    opacity: 1,
+    opacity: 1
   },
   error: {
     backgroundColor: "#ED254E !important",
     padding: "6px 28px",
     height: 54,
     fontSize: 13,
     lineHeight: "0px",
-    opacity: 1,
+    opacity: 1
   },
   info: {
     backgroundColor: "#3866F9 !important",
     padding: "6px 28px",
     height: 54,
     fontSize: 13,
     lineHeight: "0px",
-    opacity: 1,
-  },
-});
+    opacity: 1
+  }
+})
+
+const MIXPANEL_TOKEN = getEnv(EnvKey.REACT_APP_MIXPANEL_TOKEN)
+const MIXPANEL_DEBUG_ENABLED = getEnv(EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED)
 
-if (!process.env.REACT_APP_MIXPANEL_TOKEN) {
-  throw new Error("REACT_APP_MIXPANEL_TOKEN env variable is missing");
+if (!MIXPANEL_TOKEN) {
+  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_TOKEN} env variable is missing`)
 }
 
-if (!process.env.REACT_APP_MIXPANEL_DEBUG_ENABLED) {
-  throw new Error("REACT_APP_MIXPANEL_DEBUG_ENABLED env variable is missing");
+if (!MIXPANEL_DEBUG_ENABLED) {
+  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED} env variable is missing`)
 }
 
-mixpanel.init(process.env.REACT_APP_MIXPANEL_TOKEN, {
-  debug: process.env.REACT_APP_MIXPANEL_DEBUG_ENABLED == "true",
-});
-mixpanel.track("Visit");
+mixpanel.init(MIXPANEL_TOKEN, {
+  debug: MIXPANEL_DEBUG_ENABLED === "true"
+})
+mixpanel.track("Visit")
 
 const App: React.FC = () => {
-  const classes = styles();
+  const classes = styles()
 
   return (
     <ThemeProvider theme={theme}>
       <SnackbarProvider
         classes={{
           variantSuccess: classes.success,
           variantError: classes.error,
-          variantInfo: classes.info,
+          variantInfo: classes.info
         }}
       >
         <QueryClientProvider client={queryClient}>
@@ -134,7 +134,12 @@ const App: React.FC = () => {
         </QueryClientProvider>
       </SnackbarProvider>
     </ThemeProvider>
-  );
-};
+  )
+}
+
+const env = getEnv(EnvKey.REACT_APP_ENV)
 
-export default App;
+export default withLDProvider({
+  clientSideID:
+    env === "PROD" ? getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) : getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV)
+})(App)

src/index.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from "react"
+import ReactDOM from "react-dom"
 
-import App from "App";
-import { TezosProvider } from "services/beacon/context";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import dayjs from "dayjs";
-import BigNumber from "bignumber.js";
+import App from "App"
+import { TezosProvider } from "services/beacon/context"
+import localizedFormat from "dayjs/plugin/localizedFormat"
+import dayjs from "dayjs"
+import BigNumber from "bignumber.js"
 
 // BigNumber.config({ DECIMAL_PLACES:  })
 
-dayjs.extend(localizedFormat);
+dayjs.extend(localizedFormat)
 
 ReactDOM.render(
   <React.StrictMode>
@@ -18,4 +18,4 @@ ReactDOM.render(
     </TezosProvider>
   </React.StrictMode>,
   document.getElementById("root")
-);
+)