Upgrade to nuxt3

package.json

@@ -20,27 +20,27 @@
     "docker:build": "lerna run docker:build"
   },
   "devDependencies": {
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@commitlint/config-lerna-scopes": "^11.0.0",
-    "commitlint": "^11.0.0",
-    "husky": "^4.3.0",
     "lerna": "^3.22.1",
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/config-lerna-scopes": "^17.6.6",
+    "commitlint": "^17.6.6",
+    "husky": "^8.0.3",
     "prettier-standard": "^16.4.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-nuxt": "^2.0.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.5.0",
-    "prettier": "^2.2.1",
-    "migrate-mongo": "^9.0.0",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-nuxt": "^3.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "prettier": "^2.8.8",
+    "migrate-mongo": "^10.0.0",
     "stylelint": "^13.9.0",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-standard": "^33.0.0"
   },
   "volta": {
-    "node": "16.20.0",
+    "node": "16.20.1",
     "yarn": "1.22.19"
   },
   "husky": {

packages/api/package.json

@@ -43,5 +43,8 @@
     "web3": "^1.9.0",
     "web3-utils": "^1.9.0",
     "graphql": "^15.5.0"
+  },
+  "volta": {
+    "node": "16.20.1"
   }
 }

packages/api/src/index.ts

@@ -1,12 +1,12 @@
 require('dotenv/config')
 
-import Web3 from 'web3'
+// import Web3 from 'web3'
 import { MongoManager } from './database'
 import { FeedRepository } from './repository/Feed'
 import { ResultRequestRepository } from './repository/ResultRequest'
 import { createServer } from './server'
 import { Repositories, RouterDataFeedsConfig, NetworksConfig } from './types'
-import { Web3Middleware } from './web3Middleware/index'
+// import { Web3Middleware } from './web3Middleware/index'
 import { normalizeNetworkConfig } from './utils/index'
 import {
   normalizeAndValidateDataFeedConfig,
@@ -45,11 +45,11 @@ async function main () {
     resultRequestRepository: new ResultRequestRepository(db, dataFeeds)
   }
 
-  const web3Middleware = new Web3Middleware(
-    { repositories, Web3: Web3 },
-    dataFeeds
-  )
-  web3Middleware.listen()
+  // const web3Middleware = new Web3Middleware(
+  //   { repositories, Web3: Web3 },
+  //   dataFeeds
+  // )
+  // web3Middleware.listen()
 
   await createServer(repositories, svgCache, {
     dataFeedsConfig: dataFeeds,

packages/ui/.eslintrc.cjs

@@ -0,0 +1,43 @@
+/* eslint-env node */
+// require('@rushstack/eslint-patch/modern-module-resolution')
+
+// module.exports = {
+//   root: true,
+//   env: {
+//     browser: true,
+//     node: true,
+//   },
+//   parserOptions: {
+//     parser: 'babel-eslint',
+//   },
+//   extends: [
+//     '@nuxtjs/eslint-config-typescript',
+//     'prettier',
+//     'plugin:prettier/recommended',
+//     'plugin:nuxt/recommended',
+//   ],
+//   plugins: ['prettier'],
+//   // add your custom rules here
+//   rules: {
+//     // Delete this line if using <script setup>
+//     'vue/script-setup-uses-vars': 'off',
+//   },
+// }
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
+  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
+  plugins: [],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'vue/script-setup-uses-vars': 'off',
+  },
+}

packages/ui/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<style lang="scss">
+@use '~/assets/styles/main.scss';
+</style>

packages/ui/assets/styles/main.scss

@@ -1,12 +1,12 @@
 @font-face{
   font-family:"Avenir Next Variable W05 Itali";
-  src: url("~assets/fonts/5616356/cf7047b5-ced0-4cb1-b66e-688e29567e96.woff2") format("woff2"), url("~assets/fonts/5616356/8a2ab6e1-4ba1-439f-a73b-29918942af3b.woff") format("woff");
+  src: url("/fonts/5616356/cf7047b5-ced0-4cb1-b66e-688e29567e96.woff2") format("woff2"), url("/fonts/5616356/8a2ab6e1-4ba1-439f-a73b-29918942af3b.woff") format("woff");
   font-display: swap;
 }
 
 @font-face{
   font-family:"Avenir Next Variable W05835004";
-  src: url("~assets/fonts/5835004/42801c92-f679-41d6-ab36-6c7ca7c7fa6c.woff2") format("woff2"), url("~assets/fonts/5835004/20522a37-c9e1-4059-b349-66eee8da006b.woff") format("woff");
+  src: url("/fonts/5835004/42801c92-f679-41d6-ab36-6c7ca7c7fa6c.woff2") format("woff2"), url("/fonts/5835004/20522a37-c9e1-4059-b349-66eee8da006b.woff") format("woff");
   font-display: swap;
 }
 
@@ -15,7 +15,7 @@
   font-family: 'Roboto Mono';
   font-style: normal;
   font-weight: 400;
-  src: url('~assets/fonts/roboto-mono/roboto-mono-v22-latin-regular.woff2') format('woff2'), url('~assets/fonts/roboto-mono/roboto-mono-v22-latin-regular.woff') format('woff');
+  src: url('/fonts/roboto-mono/roboto-mono-v22-latin-regular.woff2') format('woff2'), url('/fonts/roboto-mono/roboto-mono-v22-latin-regular.woff') format('woff');
   font-display: swap;
 }
 
@@ -24,7 +24,7 @@
   font-family: 'Almarai';
   font-style: normal;
   font-weight: 300;
-  src: url('~assets/fonts/almarai/almarai-v12-arabic-300.woff2') format('woff2'), url('~assets/fonts/almarai/almarai-v12-arabic-300.woff') format('woff');
+  src: url('/fonts/almarai/almarai-v12-arabic-300.woff2') format('woff2'), url('/fonts/almarai/almarai-v12-arabic-300.woff') format('woff');
   font-display: swap;
 }
 
@@ -33,7 +33,7 @@
   font-family: 'Almarai';
   font-style: normal;
   font-weight: 400;
-  src: url('~assets/fonts/almarai/almarai-v12-arabic-regular.woff2') format('woff2'), url('~assets/fonts/almarai/almarai-v12-arabic-regular.woff') format('woff');
+  src: url('/fonts/almarai/almarai-v12-arabic-regular.woff2') format('woff2'), url('/fonts/almarai/almarai-v12-arabic-regular.woff') format('woff');
   font-display: swap;
 }
 
@@ -42,7 +42,7 @@
   font-family: 'Almarai';
   font-style: normal;
   font-weight: 700;
-  src: url('~assets/fonts/almarai/almarai-v12-arabic-700.woff2') format('woff2'), url('~assets/fonts/almarai/almarai-v12-arabic-700.woff') format('woff');
+  src: url('/fonts/almarai/almarai-v12-arabic-700.woff2') format('woff2'), url('/fonts/almarai/almarai-v12-arabic-700.woff') format('woff');
   font-display: swap;
 }
 
@@ -74,12 +74,8 @@
 
   //Pagination
 
-  --pagination-number: #fdfdfd; 
-  --pagination-button-active: #41BEA5;
   --pagination-number-active: #41BEA5;
   --pagination-number-active-text: #2D2C39;
-  --app-background-color: #2D2C39;
-  --pagination-button: #fdfdfd;
 
   //Tooltip
 
@@ -196,11 +192,8 @@
 
   //Pagination
 
-  --pagination-number: #2D2C39; 
-  --pagination-button-active: #41BEA5;
   --pagination-number-active: #41BEA5;
   --pagination-number-active-text: #fdfdfd;
-  --pagination-button: #2D2C39;
 
   //Tooltip
 

packages/ui/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="btn" :class="[type]">
-    <slot class="btn-content"> </slot>
+    <slot class="btn-content" />
   </button>
 </template>
 
@@ -27,23 +27,28 @@ export default {
   font-size: var(--text-size-medium);
   cursor: pointer;
   transition: all 0.3s ease-in-out;
+
   &.primary {
     color: var(--btn-primary-color);
     background: var(--btn-primary-background-color);
     border: 1px solid var(--btn-primary-border-color);
+
     &:hover {
       background: var(--btn-primary-background-color-active);
     }
   }
+
   &.secondary {
     color: var(--btn-secondary-color);
     background: transparent;
     border: 1px solid var(--btn-secondary-border-color);
     transition: all 0.3 ease;
+
     &:hover {
       opacity: 0.7;
     }
   }
+
   &.disable {
     opacity: 0.6;
     cursor: no-drop;

packages/ui/components/CopyTooltip.vue

@@ -99,6 +99,7 @@ export default {
   margin-right: 0;
   margin-right: 8px;
 }
+
 .tooltip,
 .copy-tooltip {
   position: absolute;
@@ -109,9 +110,11 @@ export default {
   background-color: var(--bg);
   color: var(--text);
 }
+
 .container {
   display: flex;
 }
+
 .copy {
   padding: 16px;
   margin: -16px;

packages/ui/components/DataFeedDescription.vue

@@ -1,9 +1,19 @@
 <template>
-  <i18n :path="description.i18nPath" tag="p" class="feed-description">
-    <template v-for="field in description.fields" #[field]>
-      <span :key="field.i18nPath" class="bold">{{ fieldToProp[field] }}</span>
+  <i18n-t
+    :keypath="description.i18nPath"
+    tag="p"
+    class="feed-description"
+    scope="global"
+  >
+    <template
+      v-for="field in description.fields"
+      #[field]
+      :key="field.i18nPath"
+    >
+      <!-- todo -->
+      <!-- <span :key="field.i18nPath" class="bold">{{ fieldToProp[field] }}</span> -->
     </template>
-  </i18n>
+  </i18n-t>
 </template>
 
 <script>