chore: migrate yarn and update dependencies (#62)

This also applies the same eslint config as other projects

.dockerignore

@@ -0,0 +1 @@
+node_modules

.eslintignore

@@ -0,0 +1,4 @@
+**/node_modules/*
+**/out/*
+**/.next/*
+**/dist/*

.eslintrc.cjs

@@ -0,0 +1,133 @@
+const path = require("node:path");
+
+const paddingLineBetweenStatements = [
+  "error",
+  { blankLine: "always", next: "return", prev: "*" },
+]
+  .concat(
+    [
+      "multiline-block-like",
+      "multiline-expression",
+      "multiline-const",
+      "const",
+      "type",
+      "interface",
+      "if",
+    ]
+      .map((item) => [
+        { blankLine: "always", next: "*", prev: item },
+        { blankLine: "always", next: item, prev: "*" },
+      ])
+      .flat(),
+  )
+  .concat([
+    {
+      blankLine: "any",
+      next: ["singleline-const"],
+      prev: ["singleline-const"],
+    },
+  ]);
+
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: path.join(__dirname, "tsconfig.json"),
+  },
+  plugins: [
+    "@typescript-eslint",
+    "react-hooks",
+    "@stylistic",
+    "perfectionist",
+    "import",
+  ],
+  rules: {
+    "@next/next/no-img-element": "off",
+
+    "@stylistic/padding-line-between-statements": paddingLineBetweenStatements,
+
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-shadow": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { ignoreRestSiblings: true },
+    ],
+    "@typescript-eslint/no-use-before-define": "error",
+    "@typescript-eslint/no-var-requires": "off",
+
+    "arrow-body-style": "error",
+    "camelcase": "off",
+    "global-require": "off",
+
+    "import/no-duplicates": "error",
+
+    "jsx-a11y/anchor-has-content": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+
+    "no-console": ["error", { allow: ["warn", "error"] }],
+    "no-else-return": "error",
+    "no-shadow": "off",
+    "no-unused-vars": "off",
+    "no-useless-return": "error",
+    "object-shorthand": "error",
+
+    "perfectionist/sort-classes": "error",
+    "perfectionist/sort-enums": "error",
+    "perfectionist/sort-exports": "error",
+    "perfectionist/sort-interfaces": "error",
+    "perfectionist/sort-object-types": "error",
+    "perfectionist/sort-objects": "error",
+    "perfectionist/sort-union-types": "error",
+
+    "prefer-const": "error",
+    "prefer-destructuring": ["error"],
+    "prefer-spread": "error",
+    "prefer-template": "error",
+    "quote-props": ["error", "consistent-as-needed"],
+
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
+
+    "react/destructuring-assignment": [
+      "error",
+      "always",
+      { destructureInSignature: "always" },
+    ],
+    "react/display-name": "off",
+    "react/function-component-definition": "off",
+    "react/jsx-boolean-value": "error",
+    "react/jsx-curly-brace-presence": "error",
+    "react/jsx-filename-extension": "off",
+    "react/jsx-fragments": "error",
+    "react/jsx-key": ["error", { warnOnDuplicates: true }],
+    "react/jsx-no-useless-fragment": "error",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-sort-props": "error",
+    "react/no-array-index-key": "off",
+    "react/no-unescaped-entities": "off",
+    "react/no-unknown-property": "off",
+    "react/no-unstable-nested-components": "error",
+    "react/no-unused-prop-types": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off",
+    "react/self-closing-comp": "error",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.github/workflows/test.yml

@@ -5,29 +5,24 @@ jobs:
   Lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: npm install
-    - name: Run lint check
-      run: npm run lint
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: yarn install --immutable
+      - name: Run lint check
+        run: yarn lint
   Unit-tests:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: npm ci
-    - name: Run tests
-      run: npm test -- --coverage
-    # - name: Upload coverage 📤
-    #   uses: codecov/codecov-action@v1
-    #   with:
-    #     file: coverage/lcov.info
-    #     fail_ci_if_error: true
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: yarn install --immutable
+      - name: Run tests
+        run: yarn test
   Build-test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: npm ci
-    - name: Run build check
-      run: npm run build
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: yarn install --immutable
+      - name: Run build check
+        run: yarn build

.gitignore

@@ -35,3 +35,10 @@ yarn-error.log*
 
 
 test.js
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "importOrder": ["^~(.*)$", "@/(src|utils|models|api)", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "quoteProps": "consistent"
+}

.yarnrc.yml

@@ -0,0 +1,8 @@
+nodeLinker: node-modules
+
+plugins:
+  - checksum: 0141f8cfb8a5ea41428cc0a49cf412f0cf13a3f3f9e51ef354768b5c988c93d0adc46c318d11b6da858b9ce9a9c8db0069712c10be35f9ac440071bc00bc4216
+    path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
+    spec: "https://mskelton.dev/yarn-outdated/v3"
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

Dockerfile

@@ -1,14 +1,15 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:20-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 ci
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn ./.yarn
+RUN yarn --immutable
 
 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
@@ -19,10 +20,10 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV NODE_OPTIONS "--max-old-space-size=8192"
 
-RUN npm run build
+RUN yarn build
 
 # Production image, copy all the files and run next
-FROM node:16-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
@@ -32,7 +33,8 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN addgroup --system --gid 1001 nextjs && 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 /app/package.json /app/i18n.js ./
+COPY --from=builder /app/next.config.js /app/package.json /app/i18n.js /app/.yarnrc.yml /app/yarn.lock ./
+COPY --from=builder /app/.yarn ./.yarn
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/src ./src
 COPY --from=builder /app/.next ./.next
@@ -46,4 +48,4 @@ EXPOSE 3000
 
 ENV PORT 3000
 
-CMD ["npm", "run", "start"]
+CMD ["yarn", "run", "start"]

__mocks__/fileMock.js

@@ -1,7 +1,7 @@
 // __mocks__/fileMock.js
 module.exports = {
-  src: '/img.jpg',
+  blurDataURL: 'data:image/png;base64,imagedata',
   height: 24,
+  src: '/img.jpg',
   width: 24,
-  blurDataURL: 'data:image/png;base64,imagedata',
 }

__mocks__/index.ts

@@ -1,2 +1 @@
-export { default as MockTheme } from './theme';
-export { wait } from './wait';
+export { default as MockTheme } from "./theme";

declarations.d.ts

@@ -9,37 +9,37 @@ interface ComponentDefault {
 }
 
 interface NetworkLink {
-  name: string;
   chain_id: string;
+  name: string;
   url: string;
 }
 
 interface DefaultNetwork {
-  name: string;
   endpoint: string;
   links: Array<NetworkLink>;
+  name: string;
 }
 
 interface SolanaNetwork {
-  name: 'Solana';
   chain_id: string;
   endpoint: string;
   links: Array<NetworkLink>;
+  name: 'Solana';
 }
 
 interface MultiversXNetwork {
-  name: 'MultiversX';
   chain_id: string;
-  stats: string;
   economics: string;
   links: Array<NetworkLink>;
+  name: 'MultiversX';
+  stats: string;
 }
 
 interface CryptoorgNetwork {
-  name: 'Crypto.org Chain' ;
   blocks: string;
-  price: string;
   links: Array<NetworkLink>;
+  name: 'Crypto.org Chain' ;
+  price: string;
 }
 
-type Network = SolanaNetwork | MultiversXNetwork | CryptoorgNetwork | DefaultNetwork;
+type Network = CryptoorgNetwork | DefaultNetwork | MultiversXNetwork | SolanaNetwork;

i18n.js

@@ -1,19 +1,15 @@
-/* eslint-disable */
-const workaround = require('next-translate/lib/cjs/plugin/utils.js');
-
-workaround.defaultLoader =
-  '(l, n) => import(`@/public/locales/${l}/${n}.json`).then(m => m.default)';
-
 module.exports = {
-  locales: ['en'],
-  defaultLocale: 'en',
+  defaultLocale: "en",
+  loadLocaleFrom: (lang, ns) =>
+    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
+  locales: ["en"],
   pages: {
-    '*': ['common'],
-    'rgx:^/donation': ['donation'],
-    'rgx:^/about': ['about'],
-    'rgx:^/faq': ['faq'],
-    'rgx:^/terms-and-conditions': ['terms-and-conditions'],
-    'rgx:^/privacy-policy': ['privacy-policy'],
-    'rgx:^/all-networks': ['all-networks'],
+    "*": ["common"],
+    "rgx:^/about": ["about"],
+    "rgx:^/all-networks": ["all-networks"],
+    "rgx:^/donation": ["donation"],
+    "rgx:^/faq": ["faq"],
+    "rgx:^/privacy-policy": ["privacy-policy"],
+    "rgx:^/terms-and-conditions": ["terms-and-conditions"],
   },
 };