Merge branch 'master' of https://github.com/GoodDollar/GoodProtocolUI

Author: sirpy

.browserslistrc

@@ -0,0 +1,4 @@
+> 3% in VN
+> 3% in ID
+last 3 major versions
+not dead

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  //lintOnSave: process.env.NODE_ENV !== 'production',
+  root: true,
+  env: {
+    'node': true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    'parser': 'babel-eslint'
+  },
+  rules: {
+    'no-unused-vars': 1,
+    'no-debugger': 1,
+    'no-constant-condition': 1,
+    'vue/no-unused-components': 1,
+  }
+}

.github/workflows/tests.yml

@@ -0,0 +1,29 @@
+name: Tests
+
+on: push
+
+jobs:
+  test:
+    name: Pass tests and build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Load node v15
+        uses: actions/setup-node@v1
+        with:
+          node-version: '15'
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install deps
+        run: yarn install
+      # Basics: test & build
+      - name: Run tests
+        run: yarn test
+      - name: Build app
+        run: yarn build
+      # Keep an eye on bundle size
+      - name: (bundlemon) run
+        run: yarn bundlemon
+        env:
+          BUNDLEMON_PROJECT_ID: ${{ secrets.BUNDLEMON_PROJECT_ID }}
+          BUNDLEMON_PROJECT_APIKEY: ${{ secrets.BUNDLEMON_PROJECT_APIKEY }}
+          BUNDLEMON_GITHUB_TOKEN: ${{ secrets.BUNDLEMON_GITHUB_TOKEN }}

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

bundlemon.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  baseDir: './dist',
+  reportOutput: [
+    [
+      'github-pr',
+      {
+        statusCheck: true,
+        prComment: true,
+      }
+    ]
+  ],
+  files: [
+    {
+      path: 'js/app.<hash>.js',
+      maxPercentIncrease: 40,
+      maxSize: '50kb',
+    },
+    {
+      path: 'js/chunk-vendors.<hash>.js',
+      maxPercentIncrease: 40,
+      maxSize: '1000kb',
+    },
+    {
+      path: 'css/app.<hash>.css',
+      maxPercentIncrease: 40,
+      maxSize: '300kb',
+    },
+  ]
+}

package.json

@@ -4,12 +4,15 @@
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "test": "vue-cli-service lint"
   },
   "dependencies": {
+    "anylogger": "^1.0.11",
     "buefy": "^0.9.7",
     "core-js": "^3.6.5",
     "ethers": "^5.1.4",
+    "ulog": "^2.0.0-beta.18",
     "vue": "^2.6.12",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
@@ -20,7 +23,12 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "bundlemon": "^0.3.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.32.11",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.12"

src/App.vue

@@ -1,16 +1,22 @@
 <template>
   <div>
     <NavBar/>
-    <router-view class="app-router-view m-3" />
+    <router-view class="app-router-view m-3"/>
+    <UxModal ref="uxModal"/>
   </div>
 </template>
 <script>
 import NavBar from './components/NavBar'
 import router from './plugins/Router'
+import UxModal from './components/organisms/UxModal'
+import UxEvents from './modules/UxEvents'
 
 export default {
   router,
-  components: { NavBar },
+  components: { UxModal, NavBar },
+  created () {
+    UxEvents.setUiApp(this)
+  },
   mounted () {
     this.$router.replace('/')
   }

src/components/molecules/WalletDetails.vue

@@ -51,7 +51,10 @@ export default {
   computed: {
     isConnected () {
       this.updateProviderInfo()
-      this.canConnect = this.$wallet.getState() === WalletState.IDLE
+      this.$nextTick(() => {
+        // temporary workaround for vue/no-side-effects-in-computed-properties
+        this.canConnect = this.$wallet.getState() === WalletState.IDLE
+      })
       return this.$wallet.isConnected()
     },
     account () { return this.$wallet.getAccount() },

src/components/organisms/UxModal.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="uxmodal-container">
+    <b-modal v-model="isVisible" :width="width">
+      <div class="card">
+        <div class="card-content">
+          <div class="title is-4" :class="titleClass">{{ title }}</div>
+          <div class="content" v-html="content"></div>
+        </div>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UxModal',
+  data () {
+    return {
+      isVisible: false,
+      title: '',
+      titleClass: '',
+      content: '',
+      width: 400,
+    }
+  },
+  methods: {
+    setupModal (options) {
+      // set modal data from options as is
+      Object.keys(options).forEach((k) => {
+        this.$set(this.$data, k, options[k])
+      })
+      return this
+    },
+    // toggle modal to foreground
+    show () {
+      this.isVisible = true
+    },
+    // toggle modal back to background
+    hide () {
+      this.isVisible = false
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/modules/UxEvents.js

@@ -0,0 +1,54 @@
+import { chains } from './EthChains'
+
+export const UxEventCategory = {
+  ETH_WRONG_CHAIN: 'ethWrongChain'
+}
+
+class UxEvents {
+
+  uiApp
+
+  setUiApp (appInstance) {
+    this.uiApp = appInstance
+  }
+
+  getModalProvider () {
+    return this.uiApp.$refs.uxModal
+  }
+
+  raise (eventCategory, payload) {
+    switch (eventCategory) {
+
+      case UxEventCategory.ETH_WRONG_CHAIN: {
+        // compose error message
+        let content = [
+          'Please connect to the appropriate Ethereum network. Allowed networks:'
+        ]
+        // populate with allowed networks for reference
+        content = content.concat(chains.reduce((list, chain) => {
+          if (chain.allowed) {
+            list.push('<span><b>' + chain.chainId + '</b>&nbsp;' + chain.label + '</span>')
+          }
+          return list
+        }, []))
+        // if wrong network id provided - show it too
+        if (payload) {
+          content.push('Trying to connect: <b class="has-text-danger">' + payload + '</b>')
+        }
+        // run the modal
+        let options = {
+          title: 'Wrong network',
+          titleClass: 'has-text-danger',
+          content: content.join('<br/>')
+        }
+        this.getModalProvider().setupModal(options).show()
+        break
+      }
+      default:
+        break
+    }
+  }
+
+}
+
+export default new UxEvents()