diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0add435..c5a435b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,35 +1,6 @@
import React, { useState, useEffect } from "react";
-import axios from "axios";
+import BlockList from "./BlockList";
export default function App() {
- let [blocks, setBlocks] = useState([]);
-
- let backendUrl: string = process.env.BACKEND_ADDRESS!;
-
- if (backendUrl === undefined) {
- throw Error("backend address not specified in ENV variable");
- }
-
- console.log(backendUrl);
-
- async function fetchBlocks() {
- let result = await axios(backendUrl);
- return result.data.Blocks;
- }
-
- useEffect(() => {
- fetchBlocks().then(blocks => {
- setBlocks(blocks);
- });
- }, []);
-
- let blocksComponent = blocks.map(block => {
- return
{block.hash};
- });
-
- return (
-
-
{blocksComponent}
-
- );
+ return ;
}
diff --git a/frontend/src/BlockList.tsx b/frontend/src/BlockList.tsx
new file mode 100644
index 0000000..826f14b
--- /dev/null
+++ b/frontend/src/BlockList.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function BlockList() {
+ let [blocks, setBlocks] = useState([]);
+
+ let backendUrl: string = process.env.BACKEND_ADDRESS!;
+
+ if (backendUrl === undefined) {
+ throw Error("backend address not specified in ENV variable");
+ }
+
+ const blocksComponent = blocks.map(block => {
+ return {block.hash};
+ });
+
+ async function fetchBlocks() {
+ let result = await axios(backendUrl);
+ return result.data.Blocks;
+ }
+
+ useEffect(() => {
+ fetchBlocks().then(blocks => {
+ setBlocks(blocks);
+ });
+ }, []);
+
+ return (
+
+
{blocksComponent}
+
+ );
+}