make react-json-view dynamic

Tahlil · Nov 10, 2021 · 846d55d · 846d55d
1 parent df4d707
commit 846d55d
Show file tree

Hide file tree

Showing 18 changed files with 222 additions and 443 deletions.
diff --git a/.babelrc → archive.babel.rc b/.babelrc → archive.babel.rc
diff --git a/components/protocols/polygon/components/steps/Query.tsx b/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'}

diff --git a/components/protocols/solana/components/nav/index.tsx b/components/protocols/solana/components/nav/index.tsx
@@ -1,7 +1,9 @@
 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';
+// import ReactJson from 'react-json-view';
+const DynamicReactJson = dynamic(() => import('react-json-view'), {ssr: false});
 import {StepMenuBar} from 'components/shared/Layout/StepMenuBar';
 import {
   getCurrentChainId,
@@ -127,7 +129,7 @@ const Nav = () => {
 
 export const ErrorBox = ({error}: {error: ErrorT}) => {
   return (
-    <ReactJson
+    <DynamicReactJson
       src={error}
       collapsed={false}
       name={'error'}

diff --git a/next-env.d.ts b/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.
diff --git a/package.json b/package.json
@@ -41,23 +41,23 @@
     "@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",
+    "next": "12",
     "nextjs-progressbar": "^0.0.11",
-    "react": "17.0.2",
+    "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-json-view": "^1.21.3",
     "react-markdown": "^7.0.1",

diff --git a/pages/api/solana/connect.ts b/pages/api/solana/connect.ts
@@ -9,8 +9,8 @@ export default async function connect(
   try {
     const {network} = req.body;
     const url = getNodeURL(network);
-    const connection = undefined;
-    const version = undefined;
+    const connection = new Connection(url, 'confirmed');
+    const version = await connection.getVersion();
     res.status(200).json(version['solana-core']);
   } catch (error) {
     let errorMessage = error instanceof Error ? error.message : 'Unknown Error';

diff --git a/pages/avalanche.tsx b/pages/avalanche.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutAvalanche from 'components/protocols/avalanche';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Avalanche = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/avalanche'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Avalanche = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutAvalanche chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/celo.tsx b/pages/celo.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutCelo from 'components/protocols/celo';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Celo = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/celo'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Celo = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutCelo chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/ceramic.tsx b/pages/ceramic.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutCeramic from 'components/protocols/ceramic';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Ceramic = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/ceramic'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Ceramic = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutCeramic chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/near.tsx b/pages/near.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutNear from 'components/protocols/near';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Near = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/near'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Near = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutNear chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/polkadot.tsx b/pages/polkadot.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutPolkadot from 'components/protocols/polkadot';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Polkadot = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/polkadot'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Polkadot = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutPolkadot chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/polygon.tsx b/pages/polygon.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutPolygon from 'components/protocols/polygon';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Polygon = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/polygon'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Polygon = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutPolygon chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/secret.tsx b/pages/secret.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutSecret from 'components/protocols/secret';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Secret = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/secret'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Secret = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutSecret chain={chain} markdown={markdown} />
     </>
   );
 };

diff --git a/pages/solana.tsx b/pages/solana.tsx
@@ -1,17 +1,8 @@
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
 import {CHAINS_CONFIG} from 'lib/constants';
 import {CHAINS, ChainPropT} from 'types';
 import {fetchMarkdownForChainId} from 'utils/markdown';
-import {Spinner} from 'components/shared/Layout/Spinner';
-import {colors} from 'utils/colors';
-
-const dynOptions = {
-  loading: function spinner() {
-    return <Spinner color={colors.figmentYellow} />;
-  },
-  ssr: false,
-};
+import WithLayoutSolana from 'components/protocols/solana';
 
 export async function getStaticProps() {
   return {
@@ -24,10 +15,6 @@ export async function getStaticProps() {
 
 const Solana = (props: ChainPropT) => {
   const {chain, markdown} = props;
-  const DynChain = dynamic(
-    () => import('../components/protocols/solana'),
-    dynOptions,
-  );
 
   return (
     <>
@@ -36,7 +23,7 @@ const Solana = (props: ChainPropT) => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <DynChain chain={chain} markdown={markdown} />
+      <WithLayoutSolana chain={chain} markdown={markdown} />
     </>
   );
 };