Merge pull request #167 from figment-networks/LEA-415

Remove dynamic routing and loading

components/protocols/polygon/components/steps/Query.tsx

@@ -2,7 +2,8 @@ import {PolygonQueryResponse} from '@figment-polygon/types';
 import {LoadingOutlined} from '@ant-design/icons';
 import {Alert, Button, Col, Space} from 'antd';
 import {useState} from 'react';
-import ReactJson from 'react-json-view';
+import dynamic from 'next/dynamic';
+const DynamicReactJson = dynamic(() => import('react-json-view'), {ssr: false});
 import axios from 'axios';
 import {
   getCurrentChainId,
@@ -57,7 +58,7 @@ const Query = () => {
                 boxSizing: 'content-box',
               }}
             >
-              <ReactJson
+              <DynamicReactJson
                 src={queryData}
                 collapsed={false}
                 name={'query data'}

components/protocols/solana/components/nav/index.tsx

@@ -1,7 +1,8 @@
 import {trackStorageCleared} from 'utils/tracking-utils';
 import {Typography, Popover, Button, Select} from 'antd';
 import type {EntryT, ErrorT} from '@figment-solana/types';
-import ReactJson from 'react-json-view';
+import dynamic from 'next/dynamic';
+const DynamicReactJson = dynamic(() => import('react-json-view'), {ssr: false});
 import {StepMenuBar} from 'components/shared/Layout/StepMenuBar';
 import {
   getCurrentChainId,
@@ -127,7 +128,7 @@ const Nav = () => {
 
 export const ErrorBox = ({error}: {error: ErrorT}) => {
   return (
-    <ReactJson
+    <DynamicReactJson
       src={error}
       collapsed={false}
       name={'error'}

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -3,4 +3,8 @@ module.exports = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    // Enables the styled-components SWC transform
+    styledComponents: true,
+  },
 };

package.json

@@ -35,30 +35,25 @@
     "@taquito/signer": "^10.0.0",
     "@taquito/taquito": "^10.0.0",
     "@taquito/tzip16": "^10.1.0",
-    "@types/js-yaml": "^4.0.3",
-    "@types/node": "^15.12.4",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/styled-components": "^5.1.10",
-    "lodash": "^4.17.21",
-    "avalanche": "3.7.0",
     "antd": "^4.16.1",
+    "avalanche": "3.7.0",
     "axios": "^0.21.1",
     "bn.js": "^5.2.0",
     "dids": "^2.4.0",
     "ethereumjs-util": "^7.1.0",
     "graphql": "^15.6.1",
     "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
     "lodash.unescape": "^4.0.1",
     "mz": "^2.7.0",
     "near-api-js": "^0.41.0",
-    "next": "11.0.1",
-    "nextjs-progressbar": "^0.0.11",
-    "react": "17.0.2",
+    "next": "^12.0.4-canary.4",
+    "nextjs-progressbar": "^0.0.13",
+    "react": "^17.0.2",
     "react-confetti": "^6.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
+    "react-is": ">= 16.8.0",
     "react-json-view": "^1.21.3",
     "react-markdown": "^7.0.1",
     "react-player": "^2.9.0",
@@ -77,10 +72,17 @@
     "@testing-library/react": "^12.1.0",
     "@types/depd": "^1.1.32",
     "@types/jest": "^27.0.1",
+    "@types/js-yaml": "^4.0.3",
     "@types/lodash.unescape": "^4.0.6",
     "@types/mz": "^2.7.4",
+    "@types/node": "^15.12.4",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "@types/react-router-dom": "^5.1.7",
     "@types/react-syntax-highlighter": "^13.5.2",
+    "@types/styled-components": "^5.1.10",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.0.0",
     "babel-jest": "^27.2.0",
     "babel-plugin-styled-components": "^1.13.1",
     "dotenv": "^10.0.0",

pages/avalanche.tsx

@@ -0,0 +1,31 @@
+import Head from 'next/head';
+import {CHAINS_CONFIG} from 'lib/constants';
+import {CHAINS, ChainPropT} from 'types';
+import {fetchMarkdownForChainId} from 'utils/markdown';
+import WithLayoutAvalanche from 'components/protocols/avalanche';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      chain: CHAINS_CONFIG[CHAINS.AVALANCHE],
+      markdown: fetchMarkdownForChainId(CHAINS.AVALANCHE),
+    },
+  };
+}
+
+const Avalanche = (props: ChainPropT) => {
+  const {chain, markdown} = props;
+
+  return (
+    <>
+      <Head>
+        <title>{`Figment Learn - ${chain.label} Pathway`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <WithLayoutAvalanche chain={chain} markdown={markdown} />
+    </>
+  );
+};
+
+export default Avalanche;

pages/celo.tsx

@@ -0,0 +1,31 @@
+import Head from 'next/head';
+import {CHAINS_CONFIG} from 'lib/constants';
+import {CHAINS, ChainPropT} from 'types';
+import {fetchMarkdownForChainId} from 'utils/markdown';
+import WithLayoutCelo from 'components/protocols/celo';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      chain: CHAINS_CONFIG[CHAINS.CELO],
+      markdown: fetchMarkdownForChainId(CHAINS.CELO),
+    },
+  };
+}
+
+const Celo = (props: ChainPropT) => {
+  const {chain, markdown} = props;
+
+  return (
+    <>
+      <Head>
+        <title>{`Figment Learn - ${chain.label} Pathway`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <WithLayoutCelo chain={chain} markdown={markdown} />
+    </>
+  );
+};
+
+export default Celo;

pages/ceramic.tsx

@@ -0,0 +1,31 @@
+import Head from 'next/head';
+import {CHAINS_CONFIG} from 'lib/constants';
+import {CHAINS, ChainPropT} from 'types';
+import {fetchMarkdownForChainId} from 'utils/markdown';
+import WithLayoutCeramic from 'components/protocols/ceramic';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      chain: CHAINS_CONFIG[CHAINS.CERAMIC],
+      markdown: fetchMarkdownForChainId(CHAINS.CERAMIC),
+    },
+  };
+}
+
+const Ceramic = (props: ChainPropT) => {
+  const {chain, markdown} = props;
+
+  return (
+    <>
+      <Head>
+        <title>{`Figment Learn - ${chain.label} Pathway`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <WithLayoutCeramic chain={chain} markdown={markdown} />
+    </>
+  );
+};
+
+export default Ceramic;

pages/near.tsx

@@ -0,0 +1,31 @@
+import Head from 'next/head';
+import {CHAINS_CONFIG} from 'lib/constants';
+import {CHAINS, ChainPropT} from 'types';
+import {fetchMarkdownForChainId} from 'utils/markdown';
+import WithLayoutNear from 'components/protocols/near';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      chain: CHAINS_CONFIG[CHAINS.NEAR],
+      markdown: fetchMarkdownForChainId(CHAINS.NEAR),
+    },
+  };
+}
+
+const Near = (props: ChainPropT) => {
+  const {chain, markdown} = props;
+
+  return (
+    <>
+      <Head>
+        <title>{`Figment Learn - ${chain.label} Pathway`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <WithLayoutNear chain={chain} markdown={markdown} />
+    </>
+  );
+};
+
+export default Near;

pages/polkadot.tsx

@@ -0,0 +1,31 @@
+import Head from 'next/head';
+import {CHAINS_CONFIG} from 'lib/constants';
+import {CHAINS, ChainPropT} from 'types';
+import {fetchMarkdownForChainId} from 'utils/markdown';
+import WithLayoutPolkadot from 'components/protocols/polkadot';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      chain: CHAINS_CONFIG[CHAINS.POLKADOT],
+      markdown: fetchMarkdownForChainId(CHAINS.POLKADOT),
+    },
+  };
+}
+
+const Polkadot = (props: ChainPropT) => {
+  const {chain, markdown} = props;
+
+  return (
+    <>
+      <Head>
+        <title>{`Figment Learn - ${chain.label} Pathway`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <WithLayoutPolkadot chain={chain} markdown={markdown} />
+    </>
+  );
+};
+
+export default Polkadot;

pages/polygon.tsx

@@ -0,0 +1,31 @@
+import Head from 'next/head';
+import {CHAINS_CONFIG} from 'lib/constants';
+import {CHAINS, ChainPropT} from 'types';
+import {fetchMarkdownForChainId} from 'utils/markdown';
+import WithLayoutPolygon from 'components/protocols/polygon';
+
+export async function getStaticProps() {
+  return {
+    props: {
+      chain: CHAINS_CONFIG[CHAINS.POLYGON],
+      markdown: fetchMarkdownForChainId(CHAINS.POLYGON),
+    },
+  };
+}
+
+const Polygon = (props: ChainPropT) => {
+  const {chain, markdown} = props;
+
+  return (
+    <>
+      <Head>
+        <title>{`Figment Learn - ${chain.label} Pathway`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <WithLayoutPolygon chain={chain} markdown={markdown} />
+    </>
+  );
+};
+
+export default Polygon;