feat: first steps towards explore

package.json

@@ -24,9 +24,11 @@
     "@sentry/vue": "^7.101.0",
     "@vueuse/head": "^2.0.0",
     "bignumber.js": "^9.1.2",
+    "chart.js": "^4.4.3",
     "dex-contracts-v2": "github:aeternity/dex-contracts-v2#69f800fece02da1444af7f0d6622fec356a15496",
     "node-polyfill-webpack-plugin": "^3.0.0",
     "vue": "^3.4.19",
+    "vue-chartjs": "^5.3.1",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0",

src/components/NavigationMenu.vue

@@ -6,6 +6,9 @@
     <router-link data-cy="pool" to="/pool" @click.prevent="navigatePool">
       {{ $t('nav.pool') }}
     </router-link>
+    <router-link data-cy="explore" to="/explore">
+      {{ $t('nav.explore') }}
+    </router-link>
   </nav>
 </template>
 <script>

src/components/explore/ExploreWrapper.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="explore-wrapper">
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  name: 'ExploreWrapper',
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/variables.scss';
+@use '../../styles/typography.scss';
+@use '../../styles/mixins.scss';
+
+.explore-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 4vh auto 0;
+  border-radius: 24px;
+  max-width: 1280px;
+  background: variables.$color-black3;
+  box-shadow:
+    rgb(0 0 0 / 1%) 0 0 1px,
+    rgb(0 0 0 / 4%) 0 4px 8px,
+    rgb(0 0 0 / 4%) 0 16px 24px,
+    rgb(0 0 0 / 1%) 0 24px 32px;
+  color: white;
+}
+</style>

src/components/explore/StyledGraph.vue

@@ -0,0 +1,36 @@
+<template>
+  <Bar :data="data" :options="options" />
+</template>
+
+<script>
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js';
+import { Bar } from 'vue-chartjs';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+export default {
+  name: 'App',
+  components: {
+    Bar,
+  },
+  data() {
+    return {
+      data: {
+        labels: ['January', 'February', 'March'],
+        datasets: [{ data: [40, 20, 12] }],
+      },
+      options: {
+        responsive: true,
+      },
+    };
+  },
+};
+</script>

src/locales/en.json

@@ -2,6 +2,7 @@
   "nav": {
     "swap": "Swap",
     "pool": "Pool",
+    "explore": "Explore",
     "aboutUs": "About us",
     "aboutDex": "About DEX",
     "termsCondition": "Terms & Condition",

src/router/index.js

@@ -1,11 +1,13 @@
 import { h } from 'vue';
 import { createRouter, createWebHistory, RouterView } from 'vue-router';
+import ExploreView from '../views/ExploreView.vue';
 import SwapView from '../views/SwapView.vue';
 import PoolView from '../views/PoolView.vue';
 import ImportPool from '../views/ImportPool.vue';
 import AddLiquidity from '../views/AddLiquidity.vue';
 import RemoveLiquidity from '../views/RemoveLiquidity.vue';
 import NotFound from '../views/NotFound.vue';
+import TokenDetailView from '../views/TokenDetailView.vue';
 
 const routes = [
   {
@@ -43,6 +45,37 @@ const routes = [
       },
     ],
   },
+  {
+    path: '/explore',
+    component: { render: () => h(RouterView) },
+    children: [
+      {
+        path: '',
+        name: 'explore',
+        component: ExploreView,
+      },
+      {
+        path: 'tokens',
+        name: 'token-list',
+        component: ExploreView,
+      },
+      {
+        path: 'tokens/:id',
+        name: 'token-detail',
+        component: TokenDetailView,
+      },
+      {
+        path: 'pools',
+        name: 'pool-list',
+        component: ExploreView,
+      },
+      {
+        path: 'pools/:id',
+        name: 'pool-detail',
+        component: ExploreView,
+      },
+    ],
+  },
   {
     path: '/404',
     name: 'not-found',

src/views/ExploreView.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="explore-wrapper">
+    <StyledGraph> </StyledGraph>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+import StyledGraph from '@/components/explore/StyledGraph.vue';
+
+export default defineComponent({
+  components: { StyledGraph },
+});
+</script>
+<style lang="scss" scoped>
+@use '../styles/variables.scss';
+@use '../styles/typography.scss';
+@use '../styles/mixins.scss';
+
+.explore-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 4vh auto 0;
+  border-radius: 24px;
+  max-width: 1280px;
+  background: variables.$color-black3;
+  box-shadow:
+    rgb(0 0 0 / 1%) 0 0 1px,
+    rgb(0 0 0 / 4%) 0 4px 8px,
+    rgb(0 0 0 / 4%) 0 16px 24px,
+    rgb(0 0 0 / 1%) 0 24px 32px;
+}
+</style>

src/views/TokenDetailView.vue

@@ -0,0 +1,25 @@
+<template>
+  <ExploreWrapper>
+    <div>BREADCRUMB</div>
+    <div>
+      <span>LOGO</span>
+      AE / Aeternity
+    </div>
+    <!-- Graph that shows price over time -->
+    <!-- Stats -->
+    <!-- List of transactions -->
+    <!-- List of pools -->
+  </ExploreWrapper>
+</template>
+<script>
+import { defineComponent } from 'vue';
+import ExploreWrapper from '@/components/explore/ExploreWrapper.vue';
+
+export default defineComponent({
+  components: { ExploreWrapper },
+  mounted() {
+    // Fetch data
+  },
+});
+</script>
+<style lang="scss" scoped></style>