v0.7.2

* update stdlib to v0.1.10-rc.4

* adds getting-started instructions to home

* adds reusable hooks

* updates reachduck

.eslintrc.js

@@ -13,10 +13,11 @@ module.exports = {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/no-use-before-define": "off",
-    'no-shadow': 'off',
-    '@typescript-eslint/no-shadow': ['warn'],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["warn"],
+    "import/prefer-default-export": "off",
     "no-unused-vars": "off",
     "no-use-before-define": "off",
     "react/button-has-type": "off",

package.json

@@ -4,11 +4,11 @@
   "private": true,
   "dependencies": {
     "@jackcom/raphsducks": "^1.1.6",
-    "@jackcom/reachduck": "^0.2.10",
+    "@jackcom/reachduck": "^0.2.11",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@randlabs/myalgo-connect": "^1.1.3",
-    "@reach-sh/stdlib": "^0.1.10-rc.1",
+    "@reach-sh/stdlib": "^0.1.10-rc.4",
     "cryptocurrency-icons": "^0.18.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.tsx

@@ -8,37 +8,26 @@ import AppHeader from "AppHeader";
 import "./App.scss";
 import { UIThemeType } from "types/shared";
 import ActiveNotifications from "components/ActiveNotifications";
-import WalletNotFound from "components/Reach/WalletNotFound";
-import store from "state";
 
 function App() {
   const sTheme = getTheme();
   const [theme, setTheme] = useState(THEME[sTheme] || {});
-  const [user, setUser] = useState("");
+  // const [user, setUser] = useState("");
 
   useEffect(() => {
     /* Change your document title here */
     document.title = "Reach + ReactJS Starter App";
 
-    /* Listen to theme changes; you can build on this functionality */
+    /* Listen to theme changes; you can expand on this functionality */
     const onTheme = (s: any) => setTheme(THEME[s.theme as UIThemeType]);
 
     /**
      * This is how you 1. Subscribe to a state, and 2. Get an 'unsubscribe' function.
-     * Over here, the App.tsx component is listening to two different state instances;
-     * one for just theme stuff, one for data that will come from using stdlib.
-     * You can create as many state instances (like `themeState` and `store`) as you need.
+     * The App.tsx component is listening to the `theme` state instance; when it changes,
+     * the UI will update accordingly. We return the "unsubscribe" fn so that React can
+     * cleanup when the component unmounts
      */
-    const unsubTheme = themeState.subscribeToKeys(onTheme, ["theme"]);
-    const unsubReach = store.subscribeToKeys(
-      (s) => setUser(s.address || ""),
-      ["address"]
-    );
-
-    return function unsubAll() {
-      unsubTheme();
-      unsubReach();
-    };
+    return themeState.subscribeToKeys(onTheme, ["theme"]);
   });
 
   return (
@@ -54,21 +43,18 @@ function App() {
             <AppHeader />
 
             {/* Routes */}
-            {user ? (
-              <Switch>
-                {routes.map(({ path, component, render }) => (
-                  <Route
-                    exact
-                    path={path}
-                    component={component}
-                    key={path}
-                    render={render}
-                  />
-                ))}
-              </Switch>
-            ) : (
-              <WalletNotFound />
-            )}
+
+            <Switch>
+              {routes.map(({ path, component, render }) => (
+                <Route
+                  exact
+                  path={path}
+                  component={component}
+                  key={path}
+                  render={render}
+                />
+              ))}
+            </Switch>
           </section>
         </Router>
       </React.Suspense>

src/components/Common/Containers.tsx

@@ -5,6 +5,11 @@ type FlexContainerProps = {
   padded?: boolean;
 };
 
+export const ExLink = styled.a.attrs({
+  target: "_blank",
+  rel: "noopener noreferrer",
+})``;
+
 /** General-purpose default container */
 export const BaseContainer = styled.section``;
 
@@ -35,9 +40,28 @@ export const GridContainer = styled.div`
 `;
 
 export const PageContainer = styled(FlexColumn)`
+  justify-content: flex-start;
   margin: 0 auto;
-  min-height: 70vmax;
   max-width: 80vmin;
+  min-height: 70vmax;
+  text-align: left;
+
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    margin: 0.5rem 0;
+  }
+
+  > hr {
+    background-color: ${({ theme }) => theme.colors.primary};
+    border: 0;
+    height: 1px;
+    margin: 1.5rem 0;
+    opacity: 0.6;
+  }
 `;
 
 export const Figure = styled.figure`

src/components/GlobalCountButton.tsx

@@ -0,0 +1,21 @@
+import { useGlobalCount } from "hooks/GlobalCount";
+import store from "state";
+import Button from "./Forms/Button";
+
+const GlobalCountButton = () => {
+  const { globalCount } = useGlobalCount();
+
+  return (
+    <Button onClick={incGlobalState}>
+      <b>Global State Count ( + )&nbsp;</b> <span>{globalCount}</span>
+    </Button>
+  );
+};
+
+export default GlobalCountButton;
+
+// Update global state property
+function incGlobalState(): void {
+  const { globalCount } = store.getState();
+  store.globalCount(globalCount + 1);
+}

src/css/reset.scss

@@ -99,6 +99,14 @@ input[type=text] {
 	border-bottom: 1px solid;
 }
 
+pre,
+code{
+	background-color: #0003;
+	font-family: monospace;
+	font-weight: bolder;
+	padding: 0 0.2rem;
+}
+
 table {
 	border-collapse: collapse;
 	border-spacing: 0;

src/hooks/GlobalCount.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import store from "state";
+
+export function useGlobalCount() {
+  const gState = store.getState();
+  const [count, setCount] = useState(gState.globalCount);
+  const onAppState = (s: Partial<typeof gState>) => {
+    if (s.globalCount) setCount(s.globalCount);
+  };
+
+  // Subscribe to global state, and unsubscribe on component unmount
+  useEffect(() => store.subscribeToKeys(onAppState, ["globalCount"]));
+
+  return { globalCount: count };
+}

src/hooks/GlobalUser.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import store from "state";
+
+export function useGlobalUser() {
+  const gState = store.getState();
+  const [user, setUser] = useState(gState.address);
+  const [account, setAccount] = useState<typeof gState["account"]>();
+  const [assets, setAssets] = useState<typeof gState["assets"]>();
+  const onAppState = (s: Partial<typeof gState>) => {
+    if (s.address) setUser(s.address);
+    if (s.account) setAccount(s.account);
+    if (s.assets) setAssets(s.assets);
+  };
+
+  // Subscribe to global state, and unsubscribe on component unmount
+  useEffect(() =>
+    store.subscribeToKeys(onAppState, ["address", "account", "assets"])
+  );
+
+  return { user, account, assets };
+}

src/routes/Demo.tsx

@@ -1,44 +1,44 @@
-import { useState, useEffect } from "react";
-import { FlexColumn } from "components/Common/Containers";
-import store from "state";
 import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { FlexColumn, PageContainer } from "components/Common/Containers";
+import { useGlobalCount } from "hooks/GlobalCount";
+import GlobalCountButton from "components/GlobalCountButton";
 
-const Demo = () => {
-  const gState = store.getState();
-  const { globalCount: gCount } = gState;
-  const [count, setCount] = useState(gCount);
-  const onAppState = ({ globalCount }: Partial<typeof gState>) => {
-    setCount(globalCount || 0);
-  };
+const GlobalCount = styled(FlexColumn)`
+  border: ${({ theme }) => `1px solid ${theme.colors.primary}`};
+  border-radius: 4px;
+  padding: 1rem;
+  text-align: center;
+`;
 
-  // Subscribe to global state, and unsubscribe on component unmount
-  useEffect(() => store.subscribeToKeys(onAppState, ["globalCount"]));
+const Demo = () => {
+  const { globalCount } = useGlobalCount();
 
   return (
-    <FlexColumn padded>
+    <PageContainer padded>
       <h1 className="h2">Demo.tsx</h1>
 
       <p>
-        This is a Demo page. It is a
-        <b>
-          <code> Route </code>
-        </b>
-        in your application. Look at <b>routes/Demo.tsx</b> to see how it works.
-      </p>
-      <p>
-        This route is linked up to the global state. You can modify or remove it
-        if not needed
+        This is a Demo page. It is a <code> Route </code>
+        in your application, and is linked up to the global state. Look at{" "}
+        <code>routes/Demo.tsx</code> to see how it works.
       </p>
 
-      <p>
-        <b>Global Count:</b> <span>{count}</span>
-      </p>
+      <h3 className="h4">Application State Demo</h3>
 
       <p>
         <b>Global Count</b> is a property in your global state. You can update
         it using a button on the <Link to="/">Home route</Link>.
       </p>
-    </FlexColumn>
+
+      <GlobalCount>
+        <p>
+          <b>Global Count:</b> <span>{globalCount}</span>
+        </p>
+
+        <GlobalCountButton />
+      </GlobalCount>
+    </PageContainer>
   );
 };