Merge pull request #422 from Adamant-im/stage

v3.0.0 Chatrooms

Author: dev-adamant-im

.travis.yml

@@ -1,19 +1,19 @@
 language: node_js
 node_js:
-  - 10
+  - 14
 os:
   - linux
 cache:
   directories:
     - node_modules
 install:
-  - yarn install
+  - yarn install --ignore-engines
 before_deploy:
   - source ./deploy.sh
 deploy:
   provider: surge
   project: ./dist/
-  domain: $SUBDOMAIN-adamant-im.surge.sh
+  domain: $SUBDOMAIN-adamant-pwa.surge.sh
   skip_cleanup: true
   on:
     all_branches: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adamant-im",
-  "version": "2.15.0",
+  "version": "3.0.0",
   "author": "ADAMANT Foundation <[email protected]>",
   "license": "GPLv3",
   "description": "Decentralized Messenger",
@@ -20,30 +20,30 @@
   "dependencies": {
     "@liskhq/lisk-cryptography": "3.2.0",
     "@liskhq/lisk-transactions": "5.2.0",
-    "@mdi/font": "^6.3.95",
+    "@mdi/font": "^6.5.95",
     "@stablelib/utf8": "^1.0.1",
     "@zxing/library": "0.18.6",
     "abi-decoder": "^2.4.0",
-    "axios": "^0.23.0",
+    "axios": "^0.24.0",
     "b64-to-blob": "^1.2.19",
     "bignumber.js": "^9.0.1",
     "bip39": "^3.0.4",
     "bitcoinjs-lib": "^5.2.0",
     "bytebuffer": "^5.0.1",
     "coininfo": "^5.1.0",
-    "core-js": "^3.18.3",
+    "core-js": "^3.19.1",
     "dayjs": "^1.10.7",
     "deepmerge": "^4.2.2",
     "detect-browser": "^5.2.1",
     "dompurify": "^2.3.3",
     "ed2curve": "^0.3.0",
     "file-saver": "^2.0.5",
     "hdkey": "^2.0.1",
-    "idb": "^6.1.5",
+    "idb": "^7.0.0",
     "js-base64": "^3.7.2",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.21",
-    "marked": "^3.0.7",
+    "marked": "^4.0.4",
     "notifyjs": "^3.0.0",
     "pbkdf2": "^3.1.2",
     "promise-queue": "^2.2.5",
@@ -57,47 +57,47 @@
     "throttle-promise": "^1.0.4",
     "visibilityjs": "^2.0.2",
     "vue": "^2.6.14",
-    "vue-i18n": "^8.26.5",
-    "vue-router": "^3.5.2",
+    "vue-i18n": "^8.26.7",
+    "vue-router": "^3.5.3",
     "vue-scrollto": "^2.20.0",
     "vuetify": "^1.5.24",
     "vuex": "^3.6.2",
     "vuex-persist": "^3.1.3",
-    "web3-eth": "^1.6.0",
-    "web3-utils": "^1.6.0"
+    "web3-eth": "^1.6.1",
+    "web3-utils": "^1.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
+    "@babel/core": "7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
     "@intlify/vue-i18n-loader": "^1.1.0",
-    "@vue/babel-preset-app": "^4.5.14",
-    "@vue/cli-plugin-babel": "^4.5.14",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.14",
-    "@vue/cli-plugin-eslint": "^4.5.14",
-    "@vue/cli-plugin-pwa": "^4.5.14",
-    "@vue/cli-plugin-unit-jest": "^4.5.14",
-    "@vue/cli-service": "^4.5.14",
+    "@vue/babel-preset-app": "^4.5.15",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-e2e-cypress": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@vue/cli-plugin-pwa": "^4.5.15",
+    "@vue/cli-plugin-unit-jest": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
     "@vue/eslint-config-standard": "^6.1.0",
-    "@vue/test-utils": "^1.2.2",
+    "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^27.3.1",
     "babel-plugin-rewire": "^1.2.0",
     "cross-env": "^7.0.3",
     "electron": "^3.0.0",
     "eslint": "^7.31.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-vue": "^7.20.0",
     "lorem-ipsum": "^2.0.4",
-    "sinon": "^11.1.2",
+    "sinon": "^12.0.1",
     "stylus": "^0.55.0",
     "stylus-loader": "^3.0.2",
     "uuid": "^8.3.2",
     "vue-cli-plugin-electron-builder": "^2.1.1",
     "vue-cli-plugin-i18n": "^2.3.1",
-    "vue-cli-plugin-vuetify": "^2.4.3",
+    "vue-cli-plugin-vuetify": "^2.4.4",
     "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.14",

src/assets/stylus/themes/adamant/_typography.styl

@@ -42,6 +42,9 @@
 .a-text-active
   a-text-active()
 
+.a-text-attention
+  a-text-attention()
+
 .theme--light
   .a-text-regular,
   .a-text-regular-bold,
@@ -62,6 +65,12 @@
   .a-divider
     border-color: $adm-colors.secondary
 
+  .a-text-attention
+    background-color: $adm-colors.danger
+
 .theme--dark
   .a-text-regular
     color: $shades.white
+
+  .a-text-attention
+    background-color: $adm-colors.danger

src/components/BuyTokensDialog.vue

@@ -105,19 +105,13 @@ export default {
           link: websiteUriToOnion(this.adamantAddress
             ? `${this.$t('home.buy_tokens_btn_link')}?wallet=${this.adamantAddress}`
             : `${this.$t('home.buy_tokens_btn_link')}`)
-        },
-        {
-          icon: 'RES',
-          title: 'Resfinex',
-          link: 'https://trade.resfinex.com?ref=7ccb34d867&pair=ADM_USDT'
         }
       ]
     }
   },
   methods: {
     openLink (link) {
       if (link.startsWith('U')) {
-        console.log('routing to ', link)
         this.$router.push({
           name: 'Chat',
           params: { partnerId: link }

src/components/Chat/Chat.vue

@@ -209,6 +209,7 @@ export default {
   data: () => ({
     chatFormLabel: '',
     loading: false,
+    noMoreMessages: false,
     isScrolledToBottom: true,
     visibilityId: null,
     showFreeTokensDialog: false
@@ -240,6 +241,15 @@ export default {
     sendMessageOnEnter () {
       return this.$store.state.options.sendMessageOnEnter
     },
+    isFulfilled () {
+      return this.$store.state.chat.isFulfilled
+    },
+    lastMessage () {
+      return this.$store.getters['chat/lastMessage'](this.partnerId)
+    },
+    chatPage () {
+      return this.$store.getters['chat/chatPage'](this.partnerId)
+    },
     scrollPosition () {
       return this.$store.getters['chat/scrollPosition'](this.partnerId)
     },
@@ -263,6 +273,10 @@ export default {
 
         if (!Visibility.hidden()) this.markAsRead()
       })
+    },
+    // watch `isFulfilled` when opening chat directly from address bar
+    isFulfilled (value) {
+      if (value && (!this.chatPage || this.chatPage <= 0)) this.fetchChatMessages()
     }
   },
   created () {
@@ -273,6 +287,8 @@ export default {
     Visibility.unbind(this.visibilityId)
   },
   mounted () {
+    if (this.isFulfilled && this.chatPage <= 0) this.fetchChatMessages()
+
     this.scrollBehavior()
     this.$nextTick(() => {
       this.isScrolledToBottom = this.$refs.chat.isScrolledToBottom()
@@ -317,7 +333,7 @@ export default {
       this.$store.commit('chat/markAsRead', this.partnerId)
     },
     onScrollTop () {
-      //
+      this.fetchChatMessages()
     },
     onScrollBottom () {
       this.markAsRead()
@@ -370,6 +386,21 @@ export default {
 
       return sanitizeHTML(transaction.message)
     },
+    fetchChatMessages () {
+      if (this.noMoreMessages) return
+      if (this.loading) return
+
+      this.loading = true
+
+      return this.$store.dispatch('chat/getChatRoomMessages', { contactId: this.partnerId })
+        .catch(() => {
+          this.noMoreMessages = true
+        })
+        .finally(() => {
+          this.loading = false
+          this.$refs.chat.maintainScrollPosition()
+        })
+    },
     scrollBehavior () {
       this.$nextTick(() => {
         if (this.numOfNewMessages > 0) {

src/components/Chat/ChatAvatar.vue

@@ -97,6 +97,13 @@ export default {
           .then(key => {
             identicon.avatar(el, key, this.canvasSize)
 
+            return el.toDataURL()
+          })
+          .catch(() => {
+            // use `userId` to generate identicon if the user
+            // does not have a public key yet
+            identicon.avatar(el, this.userId, this.canvasSize)
+
             return el.toDataURL()
           })
       } else {

src/components/ChatPreview.vue

@@ -1,5 +1,20 @@
 <template>
   <v-list-tile
+    v-if="isLoadingSeparator"
+  >
+    <v-list-tile-content
+      style="align-items: center"
+    >
+      <v-icon
+        ref="loadingDots"
+        :class="{ kmove: isLoadingSeparatorActive }"
+      >
+        mdi-dots-horizontal
+      </v-icon>
+    </v-list-tile-content>
+  </v-list-tile>
+  <v-list-tile
+    v-else
     :class="className"
     @click="$emit('click')"
   >
@@ -129,6 +144,14 @@ export default {
     isAdamantChat: {
       type: Boolean,
       default: false
+    },
+    isLoadingSeparator: {
+      type: Boolean,
+      default: false
+    },
+    isLoadingSeparatorActive: {
+      type: Boolean,
+      default: false
     }
   },
   data: () => ({
@@ -212,6 +235,19 @@ export default {
 @import '../assets/stylus/settings/_colors.styl'
 @import '../assets/stylus/themes/adamant/_mixins.styl'
 
+@keyframes movement {
+  from { left: -50px }
+  to { left: 50px }
+}
+
+.kmove {
+  position: relative;
+  animation-name: movement;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
 /**
  * 1. Message/Transaction content.
  */

src/components/SendFundsForm.vue

@@ -630,7 +630,7 @@ export default {
         })
         .catch(error => {
           const formattedError = formatSendTxError(error)
-          console.log('Error while sending transaction', formattedError)
+          console.warn('Error while sending transaction', formattedError)
           let message = formattedError.errorMessage
           if (/dust/i.test(message) || get(error, 'response.data.error.code') === -26) {
             message = this.$t('transfer.error_dust_amount')