add frontend v2

frontend-v2/.editorconfig

@@ -0,0 +1,11 @@
+# EditorConfig: http://editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

frontend-v2/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

frontend-v2/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.idea/*

frontend-v2/README.md

@@ -0,0 +1,49 @@
+# Blockroma Frontend
+
+![Blockroma](https://tp-misc.b-cdn.net/blockroma-v0.1.png)
+
+## Getting Started
+
+Blockroma is a blockchain explorer. It is built with the modern web stack - TypeScript, KOA, React, SASS, Apollo GraphQL, TypeORM, and PostgreSQL. It is open-sourced under [GPL license](#license).
+
+![blockroma-v0.1-demo](https://tp-misc.b-cdn.net/blockroma-v0.1-2.gif)
+
+> The project is still in development with an unstable version 0.1.0. As a result, there might be breaking changes before 1.0.0.
+
+### Download the project
+
+```bash
+git clone git@github.com:blockedenhq/blockroma-frontend.git
+```
+
+### Run the project
+
+```bash
+cd blockroma-frontend
+
+yarn install
+```
+
+#### Development mode
+
+To run your project in development mode, run:
+
+```bash
+yarn dev
+```
+
+#### NPM scripts
+
+- `npm run test`: test the whole project and generate a test coverage
+- `npm run ava ./path/to/test-file.js`: run a specific test file
+- `npm run build`: build source code from `src` to `dist`
+- `npm run lint`: run the linter
+- `npm run kill`: kill the node server occupying the port 5000.
+
+## License
+
+Special thanks to the blockscout project. We are not fans of Elixir but we used its JS and style files, and thus comply with its GPL license.
+
+## Star and Fork the Project
+
+If you like the project or want to support its future development, please give it a star ⭐️ and fork it!

frontend-v2/next-i18next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  debug: false,
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  supportedLngs: ["en"],
+};

frontend-v2/next.config.js

@@ -0,0 +1,21 @@
+const { i18n } = require("./next-i18next.config");
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+  distDir: "build",
+
+  reactStrictMode: true,
+  swcMinify: true,
+  // i18n,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

frontend-v2/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "dash-v2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "yarn lint && yarn format",
+    "lint": "next lint",
+    "format": "pretty-quick --staged ./",
+    "schema:generate": "apollo client:codegen ./src/nft --no-addTypename --target=typescript --localSchemaFile=src/aptos-indexer.graphql"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.1",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
+    "date-fns": "^2.29.3",
+    "eslint": "8.28.0",
+    "eslint-config-next": "^14.1.4",
+    "graphql": "^16.6.0",
+    "highlight.js": "^11.7.0",
+    "i18next": "^22.0.6",
+    "isomorphic-unfetch": "^3.1.0",
+    "next": "^14.1.4",
+    "next-i18next": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.0.0",
+    "react-outside-click-handler": "^1.3.0",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.2",
+    "styletron-engine-atomic": "^1.5.0",
+    "styletron-react": "5.2.7",
+    "typescript": "4.9.3"
+  },
+  "devDependencies": {
+    "@tarekraafat/autocomplete.js": "^10.2.7",
+    "@types/react-outside-click-handler": "^1.3.1",
+    "@types/styletron-react": "^5.0.3",
+    "bootstrap": "^4.6.1",
+    "eslint-config-prettier": "^8.5.0",
+    "prettier": "^2.8.0",
+    "pretty-quick": "^3.1.3",
+    "sass": "^1.56.1"
+  }
+}

frontend-v2/pages/_app.tsx

@@ -0,0 +1,26 @@
+import { Provider as StyletronProvider } from "styletron-react";
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { styletron } from "../src/styletron";
+import "../src/stylesheets/app.scss";
+import { Provider as ReduxProvider } from "react-redux";
+import { configureStore } from "../src/common/configure-store";
+import { appWithTranslation } from "next-i18next";
+import { ApolloProvider } from "@apollo/client";
+import { apolloClient } from "@/shared/common/apollo-client";
+import nextI18NextConfig from "../next-i18next.config.js";
+
+export default appWithTranslation(function App({
+  Component,
+  pageProps,
+}: AppProps) {
+  return (
+    <ApolloProvider client={apolloClient}>
+      <ReduxProvider store={configureStore({ base: { theme: "dark" } })}>
+        <StyletronProvider value={styletron}>
+          <Component {...pageProps} />
+        </StyletronProvider>
+      </ReduxProvider>
+    </ApolloProvider>
+  );
+}, nextI18NextConfig);

frontend-v2/pages/_document.js

@@ -0,0 +1,74 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { Provider as StyletronProvider } from "styletron-react";
+import { styletron } from "../src/styletron";
+
+const beConfig = {
+  tagline: "tagline",
+  previewImageUrl: "https://tianpan.co/favicon.png",
+  title: `title`,
+  description: "title",
+  twitter: "@stargately",
+};
+
+class MyDocument extends Document {
+  static async getInitialProps(context) {
+    const renderPage = () =>
+      context.renderPage({
+        enhanceApp: (App) => (props) => (
+          <StyletronProvider value={styletron}>
+            <App {...props} />
+          </StyletronProvider>
+        ),
+      });
+
+    const initialProps = await Document.getInitialProps({
+      ...context,
+      renderPage,
+    });
+    const stylesheets = styletron.getStylesheets() || [];
+    return { ...initialProps, stylesheets };
+  }
+
+  render() {
+    return (
+      <Html className="dark-theme-applied">
+        <Head>
+          <meta name="twitter:site" content={beConfig.twitter} />
+          <meta name="twitter:image" content={beConfig.previewImageUrl} />
+          <meta name="twitter:title" content={beConfig.title} />
+          <meta name="twitter:description" content={beConfig.description} />
+          <meta property="twitter:card" content="summary_large_image" />
+          <meta property="og:title" content={beConfig.title} />
+          <meta property="og:description" content={beConfig.description} />
+          <meta
+            property="og:image"
+            name="og:image"
+            content={beConfig.previewImageUrl}
+          />
+          <meta charSet="utf-8" />
+
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
+          />
+
+          {this.props.stylesheets.map((sheet, i) => (
+            <style
+              className="_styletron_hydrate_"
+              dangerouslySetInnerHTML={{ __html: sheet.css }}
+              media={sheet.attrs.media}
+              data-hydrate={sheet.attrs["data-hydrate"]}
+              key={i}
+            />
+          ))}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

frontend-v2/pages/address/[addressHash].tsx

@@ -0,0 +1,30 @@
+import { BlockDetailsContainer } from "@/shared/block-details-container/block-details-container";
+import { GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import React from "react";
+import nextI18NextConfig from "../../next-i18next.config.js";
+import { AddressDetailsContainer } from "@/shared/address-details-container/address-details-container";
+
+export default function AddressHashPage() {
+  return (
+    <>
+      <RawNav />
+      <AddressDetailsContainer />
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(
+      locale ?? "en",
+      ["common"],
+      nextI18NextConfig,
+    )),
+  },
+});
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: false };
+}

frontend-v2/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string;
+};
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ name: "John Doe" });
+}

frontend-v2/pages/block/[blockNumber].tsx

@@ -0,0 +1,29 @@
+import { BlockDetailsContainer } from "@/shared/block-details-container/block-details-container";
+import { GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import React from "react";
+import nextI18NextConfig from "../../next-i18next.config.js";
+
+export default function BlockDetailsPage() {
+  return (
+    <>
+      <RawNav />
+      <BlockDetailsContainer />
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(
+      locale ?? "en",
+      ["common"],
+      nextI18NextConfig,
+    )),
+  },
+});
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: false };
+}

frontend-v2/pages/blocks.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import { BlksTableContainer } from "@/shared/blks-table-container/blks-table-container";
+
+export default function BlocksPage() {
+  return (
+    <div>
+      <RawNav />
+      <BlksTableContainer />
+    </div>
+  );
+}
+
+// or getServerSideProps: GetServerSideProps<Props> = async ({ locale })
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale ?? "en", ["common"])),
+  },
+});