Merge pull request #52 from u-u-z/v2

V2: optimized the program structure, add swr.
Meta-Network · Feb 17, 2022 · aab9018 · aab9018
2 parents 4d32a53 + 4bf4041
commit aab9018
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 64 deletions.
diff --git a/components/DataViewer.tsx b/components/DataViewer.tsx
@@ -11,11 +11,10 @@ import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import CustomerValidations from './CustomerValidations';
 import { getArweaveBlockByHash, getArweaveTxnStatusByHash } from '../services/arweave';
-import ShowItem from './PageElements/ShowItem';
+import { ShowItem } from './PageElements';
 import DataSourceContext from '../utils/dataSource';
-import ViewerFooter from './PageElements/GlobalFooter';
 import testPayloads from '../utils/testPayloads.json';
-import { getMetadata as getSourceCountent } from '../services/metadata';
+import { useMetadata } from '../services/metadata';
 import { getCidTimeInfo, IPFSCidTimeInfoMappingContractAddress, chainInfo, getTxnHashByCidAndBlockNumberFromRPC } from '../services/IPFSCidTimeInfoMapping';
 
 const md = require('markdown-it')().use(require('markdown-it-plantuml'));
@@ -43,15 +42,17 @@ interface IReference {
 function DataViewer<TMetadataType>(props: IDataViewerProps) {
 
   const { options } = props;
-  const [id, setId] = useState('');
-  const [dataSource, setDataSource] = useState('');
+  const [id, setId] = useState<string>(options.id);
+  const [dataSource, setDataSource] = useState<string>((options.defaultDataSource) || options.dataSourceList[0]);
   const [verifyServerMetadataSignatureStatus, setVerifyServerMetadataSignatureStatus] = useState(false);
   const [metadata, setMetadata] = useState<TMetadataType | MetadataType>({ status: 'fetching...' } as any);
   const [blockNumber, setBlockNumber] = useState<Number>(null);
   const [blockTimestamp, setBlockTimestamp] = useState<number>(0);
   const [remark, setRemark] = useState({});
   const DynamicReactJson = dynamic(() => import('react-json-view'), { ssr: false });
 
+  const metadataResult = useMetadata(dataSource, options.id, options.timeout || 1000);
+
   const getMetadata = useCallback(async () => {
     try {
       let content: any
@@ -60,7 +61,8 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
         content = testPayloads;
         verifyStatus = true;
       } else {
-        content = await getSourceCountent(dataSource, id, options.timeout || 1000);
+        content = metadataResult.metadata;
+        if (typeof content === 'undefined') return;
         const metaDataVersion = Number(content['@version']?.split('.')[0]) >= 2 ? 2 : 1;
         const { metaNetworkGridsServerSign,
           serverVerificationSign, authorMediaSign } = initMetaSignatureUtil(metaDataVersion);
@@ -84,13 +86,12 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
         if (error.message.includes('Network Error')) {
           toast.error('Please check your connection');
         } else {
-          console.error(error)
-          toast.error('Something went wrong');
+          console.error('getMetadata', error);
         }
       }
       setMetadata({ status: 'failure.' } as any)
     }
-  }, [id, dataSource, options]);
+  }, [options.isTest, metadataResult]);
 
   const getArweaveTxnStatus = useCallback(async () => {
     if (!options.id) return;
@@ -102,7 +103,6 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
   }, [options.id, setBlockNumber, setBlockTimestamp]);
 
   const getIPFSTimeInfo = useCallback(async () => {
-
     if (!options.id) return;
     try {
       const { timestamp, blockNumber } = await getCidTimeInfo(options.id);
@@ -133,20 +133,32 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
     setId(options.id);
     setDataSource((options.defaultDataSource) || options.dataSourceList[0]);
     if (options.isTest) return;
-    if (options.platform === 'arweave') {
-      getArweaveTxnStatus();
-    }
 
-    if (options.platform === 'ipfs') {
-      getIPFSTimeInfo();
+    try {
+      if (options.platform === 'arweave') {
+        getArweaveTxnStatus();
+      }
+      if (options.platform === 'ipfs') {
+        getIPFSTimeInfo();
+      }
+    } catch (error) {
+      if (metadataResult.isError) {
+
+      } else {
+        console.log(`[x]Get chain info error`);
+        console.log(error);
+      }
     }
-  }, [options, getArweaveTxnStatus, getIPFSTimeInfo]);
+
+
+  }, [options, getArweaveTxnStatus, getIPFSTimeInfo, metadataResult.isError]);
 
   useEffect(() => {
     console.log(`Metadata version: ${metadata['@version']}`);
   }, [metadata]);
 
-  if (metadata?.status == 'fetching...') {
+  // if (metadata?.status == 'fetching...') {
+  if (metadataResult.isLoading) {
     return <div className='flex flex-row justify-center items-center h-screen bg-purple-500' style={{
       visibility: 'visible',
       opacity: 1,
@@ -170,7 +182,8 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
     </div>
   }
 
-  if (metadata?.status == 'failure.') {
+  // if (metadata?.status == 'failure.') {
+  if (metadataResult.isError) {
     return <div className='flex flex-row justify-center items-center h-screen bg-red-800' style={{
       visibility: 'visible',
       opacity: 1,
@@ -194,9 +207,7 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
     </div>
   }
 
-  return <div style={{
-
-  }}>
+  return <div>
     <MetadataVersion.Provider value={{ metadataVersion: metadata['@version'] || metadata['version'] || '1.0.0' }} >
       <DataSourceContext.Provider value={{ platform: props.options.platform, source: dataSource }}>
         <ToastContainer />
@@ -355,7 +366,7 @@ function DataViewer<TMetadataType>(props: IDataViewerProps) {
             }
 
           </div>
-          <ViewerFooter />
+
         </main>
       </DataSourceContext.Provider>
     </MetadataVersion.Provider>

diff --git a/components/MetaSignGenerator.tsx b/components/MetaSignGenerator.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { ToastContainer } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 import MetaSignGeneratorArea from './MetaSignGeneratorArea';
-import ViewerFooter from "./PageElements/GlobalFooter";
+import { ViewerFooter } from "./PageElements";
 
 const MetaSignGenerator = () => {
 
@@ -51,7 +51,7 @@ const MetaSignGenerator = () => {
 
   return <div className="">
     <Head>
-      <title>MetaData Generator</title>
+      <title>Metadata Generator</title>
       <meta name="description" content="meta-network-data-viewer" />
       <link rel="icon" href="/favicon.ico" />
     </Head>

diff --git a/components/MetaSignGeneratorArea.tsx b/components/MetaSignGeneratorArea.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from "react";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
-import ShowItem from "./PageElements/ShowItem";
+import { ShowItem } from "./PageElements";
 import * as signUtils from '@metaio/meta-signature-util-v2';
 import metaSignaturePayloads from '../utils/metaSignaturePayloads.json'
 

diff --git a/components/PageElements/GlobalFooter.tsx b/components/PageElements/GlobalFooter.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 const ViewerFooter = () => {
-  return <footer className="flex flex-col md:flex-row w-full py-12 justify-between font-light text-sm ">
+  return <footer className="mx-auto max-w-6xl p-4 flex flex-col md:flex-row w-full py-12 justify-between font-light text-sm ">
     <div className='text-purple-400'>Github: <Link href={'https://github.com/Meta-Network/meta-network-data-viewer'}>Meta-Network/meta-network-data-viewer</Link></div>
     <div className='text-purple-400'>LICENSE: <Link href="https://github.com/Meta-Network/meta-network-data-viewer/blob/main/LICENSE">GNU Affero General Public License v3.0</Link></div>
   </footer>

diff --git a/components/PageElements/Header.tsx b/components/PageElements/Header.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable react/no-unknown-property */
+import Head from 'next/head';
+
+const Header = (props: {
+  title?: string
+  head?: {
+    title: string
+  }
+}) => {
+  return <>
+    {
+      props.head ? <Head>
+        <title>{props.head?.title || "Data Viewer"}</title>
+        <meta name="description" content="meta-network-data-viewer" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head> : undefined
+    }
+    <header className=" bg-purple-900">
+      <div className="mx-auto max-w-6xl p-4 flex flex-row items-center">
+        <div>
+          <svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14.75 0.721688C14.9047 0.632371 15.0953 0.632371 15.25 0.721688L28.9724 8.64434C29.1271 8.73365 29.2224 8.89872 29.2224 9.07735V24.9226C29.2224 25.1013 29.1271 25.2663 28.9724 25.3557L15.25 33.2783C15.0953 33.3676 14.9047 33.3676 14.75 33.2783L1.02757 25.3557C0.872868 25.2663 0.777568 25.1013 0.777568 24.9226V9.07735C0.777568 8.89872 0.872867 8.73365 1.02757 8.64434L14.75 0.721688Z" stroke="white" />
+            <circle cx="15" cy="17" r="6.5" stroke="white" />
+          </svg>
+
+
+
+        </div>
+        <h1 className="m-0 ml-3 text-2xl font-thin text-white">{props.title || "DATA VIEWER"}</h1>
+      </div>
+    </header>
+  </>
+}
+
+export default Header;
diff --git a/components/PageElements/index.ts b/components/PageElements/index.ts
@@ -0,0 +1,9 @@
+import ViewerFooter from './GlobalFooter';
+import Header from './Header';
+import ShowItem from './ShowItem';
+import VerifyResult from './VerifyResult';
+const GlobalFooter = ViewerFooter;
+
+export {
+  GlobalFooter, ViewerFooter, Header, ShowItem, VerifyResult
+};
diff --git a/components/Validations/AuthorDigestRequestMetadataValidation.tsx b/components/Validations/AuthorDigestRequestMetadataValidation.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState, useContext } from 'react';
 import initMetaSignatureUtil, { AuthorDigestMetadata, MetadataVersion } from '../../utils/metaSignature';
 import { VerifyStatus } from '../../utils/status';
-import VerifyResult from '../PageElements/VerifyResult';
-import ShowItem from '../PageElements/ShowItem';
+import { VerifyResult, ShowItem } from '../PageElements';
 
 type AuthorDigestRequestMetadataValidatioProps = {
   metadata: AuthorDigestMetadata

diff --git a/components/Validations/AuthorMediaSignatureMetadataValidation.tsx b/components/Validations/AuthorMediaSignatureMetadataValidation.tsx
@@ -1,7 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { VerifyStatus } from '../../utils/status';
-import VerifyResult from '../PageElements/VerifyResult';
-import ShowItem from '../PageElements/ShowItem';
+import { VerifyResult, ShowItem } from '../PageElements';
 import DataSourceContext from '../../utils/dataSource';
 import initMetaSignatureUtil, { AuthorMediaSignatureMetadata, MetadataVersion } from '../../utils/metaSignature';
 import platformSourceList from '../../utils/source';

diff --git a/components/Validations/AuthorPublishMetaSpaceRequestMetadataSignatureValidation.tsx b/components/Validations/AuthorPublishMetaSpaceRequestMetadataSignatureValidation.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState, useContext } from 'react';
 import initMetaSignatureUtil, { AuthorDigestMetadata, MetadataVersion } from '../../utils/metaSignature';
 import { VerifyStatus } from '../../utils/status';
-import VerifyResult from '../PageElements/VerifyResult';
-import ShowItem from '../PageElements/ShowItem';
+import { VerifyResult, ShowItem } from '../PageElements';
 
 interface AuthorPublishMetaSpaceRequestMetadataSignatureValidationProps {
   metadata: AuthorDigestMetadata

diff --git a/components/Validations/MetaNetworkGridsServerSignValidations.tsx b/components/Validations/MetaNetworkGridsServerSignValidations.tsx
@@ -1,8 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import initMetaSignatureUtil, { BatchGridActionsMetadata, MetadataVersion } from '../../utils/metaSignature';
 import { VerifyStatus } from '../../utils/status';
-import VerifyResult from '../PageElements/VerifyResult';
-import ShowItem from '../PageElements/ShowItem';
+import { VerifyResult, ShowItem } from '../PageElements';
 
 // MetaNetworkGridsServerSignValidations
 type ValidatioProps = {

diff --git a/components/Validations/SignatureMetadataValidation.tsx b/components/Validations/SignatureMetadataValidation.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState, useContext } from 'react';
 import initMetaSignatureUtil, { BaseSignatureMetadata, MetadataVersion } from '../../utils/metaSignature';
 import { VerifyStatus } from '../../utils/status';
-import VerifyResult from '../PageElements/VerifyResult';
-import ShowItem from '../PageElements/ShowItem';
+import { VerifyResult, ShowItem } from '../PageElements';
 
 type SignatureMetadataValidationProps = {
   metadata: BaseSignatureMetadata

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react-dom": "17.0.2",
     "react-json-view": "^1.21.3",
     "react-toastify": "^8.0.3",
+    "swr": "^1.2.1",
     "ts-node": "^10.4.0"
   },
   "devDependencies": {
@@ -55,4 +56,4 @@
   "jest": {
     "testTimeout": 15000
   }
-}
+}
diff --git a/pages/arweave/[hash].tsx b/pages/arweave/[hash].tsx
@@ -1,8 +1,8 @@
-import Head from 'next/head';
 import arweaveNodeList from '../../arweave-node.json';
-// import DataViewer from '../../components/DataViewer';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
+import { Header, ViewerFooter } from '../../components/PageElements';
+
 const DataViewer = dynamic(() => import('../../components/DataViewer'));
 
 const ArweaveViewer: any = (props) => {
@@ -11,16 +11,7 @@ const ArweaveViewer: any = (props) => {
   const { hash } = router.query;
 
   return <div>
-    <Head>
-      <title>meta-network-data-viewer {hash}</title>
-      <meta name="description" content="meta-network-data-viewer" />
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-    <header className=" bg-purple-900">
-      <div className="mx-auto max-w-6xl p-4">
-        <h1 className="m-0 text-2xl font-thin text-white">meta-network-data-viewer</h1>
-      </div>
-    </header>
+    <Header head={{ title: `Data Viewer: ${hash || "loading..."}` }} />
     <DataViewer options={
       {
         platform: 'arweave',
@@ -31,7 +22,7 @@ const ArweaveViewer: any = (props) => {
         timeout: 20000
       }
     } />
-
+    <ViewerFooter />
   </div>
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link'
 import 'react-toastify/dist/ReactToastify.css';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import ViewerFooter from '../components/PageElements/GlobalFooter';
+import { ViewerFooter } from '../components/PageElements';
 
 const Home: NextPage = () => {
 

diff --git a/pages/ipfs/[cid].tsx b/pages/ipfs/[cid].tsx
@@ -1,8 +1,7 @@
-import Head from 'next/head';
 import ipfsGatewayList from '../../ipfs-gateway.json';
-// import DataViewer from '../../components/DataViewer';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
+import { Header, ViewerFooter } from '../../components/PageElements';
 const DataViewer = dynamic(() => import('../../components/DataViewer'));
 
 const IPFSViewer: any = () => {
@@ -11,16 +10,7 @@ const IPFSViewer: any = () => {
   const { cid } = router.query;
 
   return <div>
-    <Head>
-      <title>meta-network-data-viewer</title>
-      <meta name="description" content="meta-network-data-viewer" />
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-    <header className=" bg-purple-900">
-      <div className="mx-auto max-w-6xl p-4">
-        <h1 className="m-0 text-2xl font-thin text-white">meta-network-data-viewer</h1>
-      </div>
-    </header>
+    <Header head={{ title: `Data Viewer: ${cid || "loading..."}` }} />
     <DataViewer options={
       {
         platform: 'ipfs',
@@ -31,6 +21,7 @@ const IPFSViewer: any = () => {
         timeout: 20000
       }
     } />
+    <ViewerFooter />
   </div>
 }
 

diff --git a/services/metadata.ts b/services/metadata.ts
@@ -1,6 +1,17 @@
 import axios from 'axios';
+import useSWR from 'swr';
+import { fetcher } from '../utils/fetcher';
 
 export const getMetadata = async (dataSource: string, id: string, timeout?: number) => {
   const result = await axios.get(`${dataSource.replace(':hash', id)}`, { timeout: timeout || 1000 });
   return await (result).data;
+}
+
+export const useMetadata = (source: string, id: string, timeout?: number) => {
+  const { data, error } = useSWR(`${source.replace(':hash', id)}`, fetcher, { loadingTimeout: timeout || 5000 })
+  return {
+    metadata: data,
+    isLoading: !error && !data,
+    isError: error,
+  }
 }
diff --git a/utils/fetcher.ts b/utils/fetcher.ts
@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+const fetcher = url => axios.get(url).then(res => res.data);
+
+export { fetcher };