Implement first components

package.json

@@ -18,12 +18,19 @@
   },
   "devDependencies": {
     "lerna": "^3.22.1",
-    "@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",
-    "prettier-standard": "^16.4.1"
+    "prettier-standard": "^16.4.1",
+    "sass-loader": "^10.1.1",
+    "node-sass": "^5.0.0",
+    "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",
+    "stylelint": "^13.9.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^20.0.0"
   },
   "volta": {
     "node": "14.15.4",

packages/api/src/server.ts

@@ -31,7 +31,7 @@ async function createApp (): Promise<any> {
 
   const resolvers = {
     Query: {
-      feeds: () =>  feeds
+      feeds: () => feeds
     }
   }
 

packages/ui/assets/styles/main.scss

@@ -1,3 +1,159 @@
+:root {
+  --bg: #2D2C39;
+  --responsive-menu: white;
+  --text: white;
+  --link: #E54343;
+  --text-background: #2d2c39d3;
+  --default-border: 1px solid white;
+
+  // Select
+
+  --selected-background: #37414c;
+  --selected-text: rgb(233, 231, 231);
+  --selected-icon: #62B1B058;
+  --selected-options-background: #37414c;
+  --selected-options-text: rgb(231, 231, 231);
+  --selected-options-border: 1px solid #1F1F24;
+  --selected-options-shadow: 1px 1px 10 2px #62B1B029;
+  --selected-options-highlight: #62B1B015;
+
+  // FeedCard
+
+  --card-border: 2px solid #62B1B015;
+  --card-background: #62B1B015;
+  --network-color: #41BEA562;
+  --mainnet-network-color: #41BEA562;
+  --rinkeby-network-color: #BEA24162;
+  --goerly-network-color: #4182BE62;
+
+  //Fieledset
+
+  --fieldset-title: white;
+  --fieldset-background: #FFFFFF08;
+
+  //Logo
+
+  --logo-main: white;
+  --logo-dot: #41BEA5;
+
+  //NavBar
+
+  --nav-bar-background: #2d2c39;
+
+  // links
+
+  --text-hover: #41BEA5;
+
+  // links
+
+  --transaction-blur-background: #FFFFFF10;
+}
+
+.dark-mode {
+  --bg: #2D2C39;
+  --responsive-menu: white;
+  --text: white;
+  --link: #E54343;
+  --text-background: #2d2c39d3;
+  --default-border: 1px solid white;
+
+  // Select
+
+  --selected-background: #37414c;
+  --selected-text: white;
+  --selected-icon: #62B1B058;
+  --selected-border: 1px solid #1F1F24;
+  --selected-options-background: #37414c;
+  --selected-options-text: white;
+  --selected-options-border: 1px solid #1F1F24;
+  --selected-options-shadow: 1px 1px 10 2px #62B1B029;
+  --selected-options-highlight: #62B1B015;
+
+  // FeedCard
+
+  --card-border: 2px solid #62B1B015;
+  --card-background: #62B1B015;
+  --network-color: #41BEA562;
+  --mainnet-network-color: #41BEA562;
+  --rinkeby-network-color: #BEA24162;
+  --goerly-network-color: #4182BE62;
+
+  //Fieledset
+
+  --fieldset-title: white;
+  --fieldset-background: #FFFFFF08;
+
+  //Logo
+
+  --logo-main: white;
+  --logo-dot: #41BEA5;
+
+  //NavBar
+
+  --nav-bar-background: #2d2c39;
+
+  // links
+
+  --text-hover: #41BEA5;
+
+  // links
+
+  --transaction-blur-background: #FFFFFF10;
+}
+
+.light-mode {
+  --bg: white;
+  --responsive-menu: #2D2C39;
+  --text: #2D2C39;
+  --link: #E54343;
+  --text-background: #ffffffd3;
+  --default-border: 1px solid #2D2C39;
+
+  // Select
+
+  --selected-background: linear-gradient(90deg, #3f92a5 0%, #41bea5 57%);;
+  --selected-text: white;
+  --selected-icon: white;
+  --selected-border: none;
+  --selected-options-background: #F6F6F6;
+  --selected-options-text: #1F1F24;
+  --selected-options-border: 1px solid white;
+  --selected-options-shadow: 1px 1px 10 2px #1F1F24;
+  --selected-options-highlight: #1F1F2414;
+
+  // FeedCard
+
+  --card-border: 2px solid #41BEA5;
+  --card-background: white;
+  --network-color: #41BEA5;
+  --name-color: #1F1F24;
+  --value-color: #1F1F24;
+  --mainnet-network-color: #41BEA5;
+  --rinkeby-network-color: #E9BD28;
+  --goerly-network-color: #2584DC;
+
+  //Fieledset
+
+  --fieldset-title: #2D2C39;
+  --fieldset-background: #2d2c3910;
+
+  //Logo
+  --logo-dot: #41BEA5;
+  --logo-main: #1F1F24;
+
+  //NavBar
+
+  --nav-bar-background: #fff;
+
+  // links
+
+  --text-hover: #41BEA5;
+
+  // links
+
+  --transaction-blur-background: #2d2c3909;
+}
+
 h1 {
   font-size: 4rem;
   font-weight: bold;

packages/ui/components/ChartExample.vue

@@ -0,0 +1,183 @@
+<template>
+  <div ref="container">
+    <div v-show="tooltip" class="tooltip">
+      <span class="value">
+        {{ value }} <span class="date"> {{ date }}</span></span
+      >
+      <span class="name"> {{ name }} </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+    dataLabel: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      tooltip: true,
+      dateTooltip: true,
+      width: 400,
+      height: 300,
+      value: '',
+      date: '',
+      toolTipWidth: 100,
+      tooltipLeftPosition: 10,
+    }
+  },
+  computed: {
+    chart() {
+      const { LightWeightCharts } = this.$lwcCore()
+      return LightWeightCharts.createChart(this.$refs.container, {
+        rightPriceScale: {
+          borderVisible: false,
+        },
+        timeScale: {
+          visible: true,
+        },
+        crosshair: {
+          horzLine: {
+            visible: false,
+          },
+          vertLine: {
+            visible: true,
+          },
+        },
+        layout: {
+          backgroundColor: 'transparent',
+          textColor: '#d1d4dc',
+        },
+        grid: {
+          vertLines: {
+            color: 'transparent',
+          },
+          horzLines: {
+            color: 'transparent',
+          },
+        },
+      })
+    },
+    lineChart() {
+      return this.chart.addAreaSeries({
+        topColor: '#41BEA556',
+        bottomColor: '#41BEA504',
+        lineColor: '#41BEA5',
+        lineWidth: 2,
+      })
+    },
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler(oldvalue, newvalue) {
+        if (oldvalue !== newvalue) {
+          const oldTime = oldvalue.map((data) => data.time)
+          const newTime = newvalue.map((data) => this.dateToString(data.time))
+          const newDataTime = oldTime.filter((val) => !newTime.includes(val))
+          const dataToUpdate = oldvalue.filter((val) =>
+            newDataTime.includes(val.time)
+          )
+          dataToUpdate.forEach((el) => this.updateData(el))
+        }
+      },
+    },
+  },
+  mounted() {
+    this.setData()
+    this.updateTooltip()
+    this.value = `${this.dataLabel} ${this.data[this.data.length - 1].value}`
+    this.date = this.dateToString(this.data[this.data.length - 1].time)
+  },
+  methods: {
+    setData() {
+      this.lineChart.setData(this.data)
+    },
+    updateData(data) {
+      this.lineChart.update(data)
+    },
+    dateToString(date) {
+      const month = date.month > 10 ? date.month : `0${date.month}`
+      return `${date.year}-${month}-${date.day}`
+    },
+    updateTooltip() {
+      const { LightWeightCharts } = this.$lwcCore()
+      this.chart.subscribeCrosshairMove((param) => {
+        const price = param.seriesPrices.get(this.lineChart)
+        if (param.time) {
+          const dateStr = LightWeightCharts.isBusinessDay(param.time)
+            ? this.dateToString(param.time)
+            : new Date(param.time * 1000).toLocaleDateString()
+
+          this.value = `${this.dataLabel} ${Math.round(price * 100) / 100}`
+          this.date = dateStr
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.container {
+  width: 100%;
+  max-width: 1500px;
+  position: relative;
+}
+.tooltip {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  height: max-content;
+  position: relative;
+  padding: 6px;
+  box-sizing: border-box;
+  font-size: 32px;
+  border-radius: 2px;
+  background-color: var(--text-background);
+  text-align: left;
+  top: 60px;
+  font-weight: bold;
+  pointer-events: none;
+  color: var(--text);
+  .name {
+    font-size: 24px;
+    margin-top: 8px;
+  }
+  .value {
+    font-size: 32px;
+    display: flex;
+    align-items: center;
+    .date {
+      font-size: 24px;
+      margin-left: 16px;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .tooltip {
+    padding-left: 24px;
+    font-size: 24px;
+    .name {
+      font-size: 16px;
+    }
+    .value {
+      font-size: 24px;
+      .date {
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>