Beno/explorer (#2330)

* crude explorer example for Beno * fixed 2/3 of the barretenberg.js reference * Update network_router.tsx * Update context.ts * Update index.tsx * Update index.tsx * Update block_list.tsx * Update index.tsx * corrections + remove bb from explorer * update sdk block types * build sdk in explorer dockerfile * Used DecodedBlock type * add barretenberg back to explorer --------- Co-authored-by: spypsy <spypsy@outlook.com> Co-authored-by: PhilWindle <philip.windle@gmail.com>
cbiniamow · Feb 2, 2023 · 084bfda · 084bfda
1 parent a6e0b51
commit 084bfda
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 92 deletions.
diff --git a/yarn-project/explorer/package.json b/yarn-project/explorer/package.json
@@ -16,7 +16,6 @@
     "last 1 chrome version"
   ],
   "devDependencies": {
-    "@aztec/barretenberg": "workspace:^",
     "@aztec/eslint-config": "workspace:^",
     "@aztec/sdk": "workspace:^",
     "@rushstack/eslint-patch": "^1.2.0",
@@ -29,7 +28,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.26",
-    "bn.js": "^5.1.3",
     "buffer": "^6.0.3",
     "class-validator": "^0.13.2",
     "classnames": "^2.2.6",
@@ -54,7 +52,6 @@
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
     "use-http": "^1.0.27",
-    "util": "^0.12.5",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }

diff --git a/yarn-project/explorer/src/block/index.tsx b/yarn-project/explorer/src/block/index.tsx
@@ -1,19 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { default as styled } from 'styled-components';
-import { default as useFetch } from 'use-http';
-import { Block } from '@aztec/barretenberg/block_source';
-import { RollupProofData } from '@aztec/barretenberg/rollup_proof';
+import { DecodedBlock, ProofId } from '@aztec/sdk';
 
 import { BlockStatusIndicator, getBlockStatus } from '../block_status/index.js';
 import { Button, Text } from '../components/index.js';
-import { NetworkContext } from '../context.js';
+import { NetworkContext, RollupProviderContext } from '../context.js';
 import { breakpoints, spacings } from '../styles/index.js';
 import { Sections, Section, SectionTitle } from '../template/index.js';
 import { TxList } from '../tx_list/index.js';
 import { BlockDetails, BlockDetailsPlaceholder, getEtherscanLink } from './block_details.js';
 import { Block as BlockInterface } from './types.js';
-import { deserializeBlocks } from '../block_utils.js';
-import { ProofId } from '@aztec/sdk';
 
 const BlockTitle = styled.div`
   display: flex;
@@ -62,17 +58,16 @@ interface BlockPageProps {
   id: number;
 }
 
-export const formatServerBlock = (block: Block): BlockInterface => {
-  const rollupProofData = RollupProofData.decode(block.encodedRollupProofData);
+export const formatServerBlock = (block: DecodedBlock): BlockInterface => {
   return {
     id: block.rollupId,
-    mined: block.mined,
-    dataRoot: rollupProofData.newDataRoot.toString('hex'),
-    nullifierRoot: rollupProofData.newNullRoot.toString('hex'),
-    hash: rollupProofData.rollupHash.toString('hex'),
-    ethTxHash: block.txHash.toString(),
-    proofData: block.encodedRollupProofData.toString('hex'),
-    txs: rollupProofData.innerProofData
+    mined: block.minedTime,
+    dataRoot: block.newDataRoot.toString('hex'),
+    nullifierRoot: block.newNullRoot.toString('hex'),
+    hash: block.rollupHash.toString('hex'),
+    ethTxHash: block.ethTxHash.toString(),
+    proofData: block.rawProofData.toString('hex'),
+    txs: block.innerProofData
       .filter(({ proofId }) => proofId !== ProofId.PADDING)
       .map(innerProof => ({
         proofId: innerProof.proofId,
@@ -83,23 +78,28 @@ export const formatServerBlock = (block: Block): BlockInterface => {
 
 export const BlockPage: React.FunctionComponent<BlockPageProps> = ({ id }) => {
   const [blockData, setBlockData] = useState<BlockInterface | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any | null>(null);
 
-  const { get, loading, error, response } = useFetch();
+  const rollupProvider = React.useContext(RollupProviderContext);
 
   const fetchBlock = async () => {
-    await get(`/get-blocks?from=${id}&take=1`);
-    if (response.ok) {
-      const result = Buffer.from(await response.arrayBuffer());
-      const blocks = deserializeBlocks(result);
-      setBlockData(formatServerBlock(blocks[0]));
+    setLoading(true);
+    try {
+      const blocks = await rollupProvider.getBlocks(id, 1);
+      setLoading(false);
+      setBlockData(formatServerBlock(new DecodedBlock(blocks[0])));
+    } catch (err) {
+      setLoading(false);
+      setError(err);
     }
   };
 
   useEffect(() => {
-    if ((!blockData && !loading && !error) || !blockData?.mined) {
-      fetchBlock().catch(err => console.log(`Error fetching block ${id}: `, err));
+    if (!loading && !blockData) {
+      fetchBlock().catch(() => console.log('Error fetching block'));
     }
-  }, [loading, blockData, error]);
+  }, [loading, blockData]);
 
   const blockTitle = (
     <StyledSectionTitle

diff --git a/yarn-project/explorer/src/block_utils.ts b/yarn-project/explorer/src/block_utils.ts
diff --git a/yarn-project/explorer/src/blocks/block_list.tsx b/yarn-project/explorer/src/blocks/block_list.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { default as styled } from 'styled-components';
-import { default as useFetch } from 'use-http';
-import { Block } from '@aztec/barretenberg/block_source';
 
 import { Text } from '../components/index.js';
 import { spacings } from '../styles/index.js';
 import { BlockItem, BlockItemPlaceholder } from './block_item.js';
 import { Block as BlockListType } from './types.js';
-import { deserializeBlocks } from '../block_utils.js';
+import { RollupProviderContext } from '../context.js';
+import { DecodedBlock } from '@aztec/sdk';
 
 const BlockRowRoot = styled.div`
   margin-top: -${spacings.s};
@@ -28,11 +27,11 @@ interface BlockListProps {
   loading: boolean;
 }
 
-export const formatServerBlock = (block: Block): BlockListType => ({
+export const formatServerBlock = (block: DecodedBlock): BlockListType => ({
   id: block.rollupId,
-  mined: block.mined,
-  numTxs: block.offchainTxData.length,
-  hash: block.txHash.toString(),
+  mined: block.minedTime,
+  numTxs: block.numRollupTxs,
+  hash: block.ethTxHash.toString(),
 });
 
 export const BlockList: React.FunctionComponent<BlockListProps> = ({
@@ -43,17 +42,22 @@ export const BlockList: React.FunctionComponent<BlockListProps> = ({
 }) => {
   const [blocks, setBlocks] = useState<BlockListType[]>([]);
   const [initialised, setInitialised] = useState<boolean>(false);
-  const { get, response, loading, error } = useFetch();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any | null>(null);
+  const rollupProvider = React.useContext(RollupProviderContext);
 
   const fetchBlocks = async () => {
     if (!statusLoading) {
       const from = Math.max(0, totalBlocks - blocksPerPage * page);
       const take = Math.min(blocksPerPage, totalBlocks - blocksPerPage * (page - 1));
-      await get(`/get-blocks?from=${from}&take=${take}`);
-      if (response.ok) {
-        const result = Buffer.from(await response.arrayBuffer());
-        const blocks = deserializeBlocks(result);
-        setBlocks(blocks.reverse().map(formatServerBlock));
+      try {
+        setLoading(true);
+        const blocks = await rollupProvider.getBlocks(from, take);
+        setLoading(false);
+        setBlocks(blocks.reverse().map(x => formatServerBlock(new DecodedBlock(x))));
+      } catch (err) {
+        setLoading(false);
+        setError(err);
       }
     }
   };
@@ -75,6 +79,7 @@ export const BlockList: React.FunctionComponent<BlockListProps> = ({
       </BlockRowRoot>
     );
   }
+
   if (error) {
     return (
       <BlockRowRoot>
@@ -89,6 +94,7 @@ export const BlockList: React.FunctionComponent<BlockListProps> = ({
       </BlockRowRoot>
     );
   }
+
   return (
     <BlockRowRoot>
       {blocks.map(block => (

diff --git a/yarn-project/explorer/src/context.ts b/yarn-project/explorer/src/context.ts
@@ -1,12 +1,18 @@
 import { Network } from './config.js';
 import React, { useContext } from 'react';
 import { BlockchainAsset } from '@aztec/sdk';
+import { ServerRollupProvider } from '@aztec/sdk';
 
 export const NetworkContext = React.createContext(
   // No default network
   undefined as unknown as Network,
 );
 
+export const RollupProviderContext = React.createContext(
+  // No default provider
+  undefined as unknown as ServerRollupProvider,
+);
+
 export function useAsset(assetId: number) {
   const { blockchainStatus } = useContext(NetworkContext);
   const asset = blockchainStatus.assets[assetId] as BlockchainAsset | undefined;

diff --git a/yarn-project/explorer/src/network_router.tsx b/yarn-project/explorer/src/network_router.tsx
@@ -1,21 +1,26 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { CachePolicies, Provider as FetchProvider } from 'use-http';
+import { ServerRollupProvider } from '@aztec/sdk';
 
 import { App } from './app.js';
 import { Network } from './config.js';
-import { NetworkContext } from './context.js';
+import { NetworkContext, RollupProviderContext } from './context.js';
 
 export const NetworkRouter: React.FunctionComponent<{ network: Network }> = props => {
   const { baseUrl, endpoint } = props.network;
 
+  const rollupProvider = new ServerRollupProvider(new URL(endpoint));
+
   return (
     <NetworkContext.Provider value={props.network}>
-      <FetchProvider url={endpoint} options={{ cachePolicy: CachePolicies.CACHE_AND_NETWORK }}>
-        <BrowserRouter basename={baseUrl}>
-          <App />
-        </BrowserRouter>
-      </FetchProvider>
+      <RollupProviderContext.Provider value={rollupProvider}>
+        <FetchProvider url={endpoint} options={{ cachePolicy: CachePolicies.CACHE_AND_NETWORK }}>
+          <BrowserRouter basename={baseUrl}>
+            <App />
+          </BrowserRouter>
+        </FetchProvider>
+      </RollupProviderContext.Provider>
     </NetworkContext.Provider>
   );
 };
diff --git a/yarn-project/explorer/src/search_bar/index.tsx b/yarn-project/explorer/src/search_bar/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { default as useFetch } from 'use-http';
-import { deserializeBlocks } from '../block_utils.js';
 
 import { Input } from '../components/index.js';
+import { RollupProviderContext } from '../context.js';
 import searchSvg from '../images/search.svg';
 
 export const SearchBar: React.FunctionComponent = () => {
@@ -14,8 +14,8 @@ export const SearchBar: React.FunctionComponent = () => {
   const [value, setValue] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
 
-  const { get: searchById, response } = useFetch(`/get-blocks?from=${value}&take=1`);
   const { get: searchByHash } = useFetch(`/tx/${value}`);
+  const rollupProvider = React.useContext(RollupProviderContext);
 
   useEffect(() => {
     if (!history || !searchTerm || (!idData && !hashData)) return;
@@ -40,9 +40,7 @@ export const SearchBar: React.FunctionComponent = () => {
     setSearchTerm(term);
 
     if (term.match(/^[0-9]+$/)) {
-      await searchById();
-      const result = Buffer.from(await response.arrayBuffer());
-      const blocks = deserializeBlocks(result);
+      const blocks = await rollupProvider.getBlocks(+value, 1);
       setIdData(blocks[0].rollupId?.toString());
     } else if (term.match(/^(0x)?[0-9a-f]{64}$/i)) {
       const data = await searchByHash();

diff --git a/yarn-project/explorer/webpack.config.dev.js b/yarn-project/explorer/webpack.config.dev.js
@@ -6,10 +6,6 @@ import HTMLWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 import path from 'path';
 
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
 export default {
   target: 'web',
   mode: 'development',
@@ -50,19 +46,6 @@ export default {
   ],
   resolve: {
     plugins: [new ResolveTypeScriptPlugin()],
-    fallback: {
-      crypto: false,
-      os: false,
-      fs: false,
-      path: false,
-      url: false,
-      worker_threads: false,
-      stream: false,
-      string_decoder: false,
-      events: require.resolve('events/'),
-      buffer: require.resolve('buffer/'),
-      util: require.resolve('util/'),
-    },
   },
   devServer: {
     historyApiFallback: true,

diff --git a/yarn-project/explorer/webpack.config.prod.js b/yarn-project/explorer/webpack.config.prod.js
@@ -5,10 +5,6 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import HTMLWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
 export default {
   target: 'web',
   mode: 'production',
@@ -48,19 +44,6 @@ export default {
   ],
   resolve: {
     plugins: [new ResolveTypeScriptPlugin()],
-    fallback: {
-      crypto: false,
-      os: false,
-      fs: false,
-      path: false,
-      url: false,
-      worker_threads: false,
-      stream: false,
-      string_decoder: false,
-      events: require.resolve('events/'),
-      buffer: require.resolve('buffer/'),
-      util: require.resolve('util/'),
-    },
   },
   devServer: {
     historyApiFallback: true,