Front-end challenge

.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_COBALENT_KEY=

.eslintignore

@@ -0,0 +1,5 @@
+/.husky
+/.next
+/.vscode
+/node_modules
+/public

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/jsx-runtime"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "react-hooks",
+    "simple-import-sort"
+  ],
+  "rules": {
+    "linebreak-style": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "eslint-disable-next-line": "off",
+    "prettier/prettier": [
+      "error",
+      { 
+        "singleQuote": true, 
+        "parser": "flow",
+        "eslint-disable-next-line": false
+      }
+    ]
+  }
+}
+

.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
+
+# vscode
+.vscode

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

Dockerfile

@@ -0,0 +1,56 @@
+# Install dependencies only when needed
+FROM node:16-alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm install --frozen-lockfile
+
+# If using npm with a `package-lock.json` comment out above and use below instead
+# COPY package.json package-lock.json ./ 
+# RUN npm ci
+
+# Rebuild the source code only when needed
+FROM node:16-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+# Automatically leverage output traces to reduce image size 
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

README.md

@@ -1,33 +1,79 @@
-# React Front-End challenge
+## Deployed URL
 
-## Challenge
-Create a simple (no-login) dashboard that integrates two components in two different tabs:
+https://cryptologic-front-challenge.vercel.app/
 
-1. A table component that fetches API REST information from a given endpoint
-
-    a. We recommend CovalentHQ /transactions_v2/ endpoint (you will need an api key)
+https://cryptologic-front-challenge.vercel.app/transactions/0xa79E63e78Eec28741e711f89A672A4C40876Ebf3
 
-    b. The table should show the key endpoint properties such as: tx id, gas fee, timestamp, blocknumber, etc.
+https://cryptologic-front-challenge.vercel.app/stats
 
-    c. The table should let the user sort the records by timestamp and blocknumber.
+Original repo: https://github.com/juanmavillarraza/cryptologic-front-challenge (I forgot to fork at the begenning, just if you wanna check commit history)
 
+## Build and run with docker
 
-2. A chart component (like apexcharts) to show on different types (like pie and bars) to show stats also coming from APIs endpoint (we recommend snowtrace or covalent stats)
+```bash
+docker build -t nextjs-docker .
+docker run -p 3000:3000 nextjs-docker
+```
 
-    a. The components should render on this new tab and show proper values coming from the endpoint.
+docker permission error fix if necessary
 
-    b. Any chart that reflects value based on the endpoint that it is recommended to tuse.
+```bash
+sudo usermod -a -G docker $USER
+newgrp docker
+```
 
-## Deliverable
+## Getting Started
 
-- A React application along with the instructions to satisfy dependencies and run it.
-- The application should be delivered by forking this repository, upload the code and create a PR for reviewing.
+Setup env.local with env.local.example 
+NEXT_PUBLIC_COBALENT_KEY required
 
-## Tools
+First, install dependencies:
 
-Recommended tools:
-- ReactJs
-- ApexCharts
-- MUI datatables
-- Dockerfile / docker image is preferred.
+```bash
+npm install
+```
 
+Then, run the development server:
+
+```bash
+npm run dev
+```
+
+Build
+
+```bash
+npm run build
+```
+
+## Linter
+
+```bash
+npm run lint
+npm run lint:fix
+```
+
+Linter is integrated with husky (pre-commit), prettier and also with vscode to run on-save following the steps below:
+
+1- Create `.vscode` directory
+2- Create `settings.json` inside of it
+3- Paste the following:
+
+```json
+{
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnSave": true,
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}
+```
+
+## Stack of technologies
+
+- [x] NextJS
+- [x] Typescript
+- [x] Mobx & Mobx State Tree
+- [x] Styled Components
+- [x] ESLint & prettier
+- [x] AntDesign

jest.config.js

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+
+    '^@/pages/(.*)$': '<rootDir>/pages/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  output: 'standalone',
+  experimental: {
+    outputStandalone: true,
+  },
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+  images: {
+    domains: ['logos.covalenthq.com'],
+  },
+}