Pagination, Eslint & Context refactor

.env.template

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_INFURA_ID=
+FLASHBOTS_API_URL=https://blocks.flashbots.net/v1/blocks

.eslintrc.json

@@ -0,0 +1,82 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020, 
+    "sourceType": "module", 
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint", "ternary"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:ternary/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double"],
+    "semi": ["error", "never"],
+    "max-len": [
+      "error",
+      {
+        "code": 140
+      }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": 0,
+    "react/jsx-max-props-per-line": [2, {
+      "maximum": 1,
+      "when": "always"
+    }],
+    "react/jsx-fragments": "error",
+    "arrow-spacing": "error",
+    "space-infix-ops": "error",
+    "no-trailing-spaces": ["error", { "ignoreComments": true }],
+    "comma-dangle": ["error", "never"],
+    "object-curly-spacing": ["error", "always"],
+    "space-in-parens": ["error", "never"],
+    "ternary/no-unreachable": "off",
+    "ternary/nesting": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/member-delimiter-style" : ["warn", {
+        "multiline": {
+            "delimiter": "none",
+            "requireLast": true
+        },
+        "singleline": {
+            "delimiter": "semi",
+            "requireLast": false
+        }
+    }]
+  },
+  "ignorePatterns": [
+    ".github/**",
+    ".vscode/**",
+    ".yarn/**",
+    "**/dist/*",
+    "**/node_modules/*"
+  ],
+  "env": {
+    "browser": true,
+    "amd": true,
+    "node": true
+  }
+}

.gitignore

@@ -25,10 +25,12 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 # vercel
 .vercel
+

README.md

@@ -3,6 +3,14 @@
 
 Deployed at https://flashbots-explorer.marto.lol/
 
+## Installation
+
+Firstly, please run preferably `yarn` or alternatively `npm i` to install the dependancies
+
+Then make a copy of the `.env.template` file and rename it to `.env` 
+
+For now, you dont need to make any changes to the file.
+
 ## Development
 This is a create next app project so:
 

components/Address.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+export const Address = ({ address } : { address: string }) =>  {
+  const size = 6
+  const shorten = (address: string): string => address.slice(0, size) + "..." + address.slice(-size)
+  return <a className="flex text-sm justify-center hover:underline"
+    target="_blank"
+    rel="noreferrer"
+    href={`https://etherscan.io/address/${ address }`}>
+    <div className="text-sm text-gray-900">{ shorten(address) } </div>
+  </a>
+}