Merge pull request #433 from Adamant-im/stage

v3.2.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adamant-im",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "author": "ADAMANT Foundation <[email protected]>",
   "license": "GPLv3",
   "description": "Decentralized Messenger",
@@ -19,39 +19,39 @@
     "postinstall": "electron-builder install-app-deps"
   },
   "dependencies": {
-    "@liskhq/lisk-cryptography": "3.2.0",
-    "@liskhq/lisk-transactions": "5.2.1",
-    "@mdi/font": "^6.5.95",
+    "@liskhq/lisk-cryptography": "3.2.1",
+    "@liskhq/lisk-transactions": "5.2.2",
+    "@mdi/font": "^6.7.96",
     "@stablelib/utf8": "^1.0.1",
     "@zxing/library": "0.19.1",
     "abi-decoder": "^2.4.0",
-    "axios": "^0.26.0",
+    "axios": "^0.27.2",
     "b64-to-blob": "^1.2.19",
     "bignumber.js": "^9.0.2",
     "bip39": "^3.0.4",
     "bitcoinjs-lib": "^5.2.0",
     "bytebuffer": "^5.0.1",
-    "coininfo": "^5.1.0",
-    "core-js": "^3.21.0",
-    "dayjs": "^1.10.7",
+    "coininfo": "^5.2.1",
+    "core-js": "^3.22.5",
+    "dayjs": "^1.11.2",
     "deepmerge": "^4.2.2",
     "detect-browser": "^5.3.0",
-    "dompurify": "^2.3.6",
+    "dompurify": "^2.3.8",
     "ed2curve": "^0.3.0",
     "file-saver": "^2.0.5",
     "hdkey": "^2.0.1",
-    "idb": "^7.0.0",
+    "idb": "^7.0.1",
     "js-base64": "^3.7.2",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.21",
-    "marked": "^4.0.12",
+    "marked": "^4.0.16",
     "notifyjs": "^3.0.0",
     "pbkdf2": "^3.1.2",
     "promise-queue": "^2.2.5",
     "qrcode": "^1.5.0",
     "qs": "^6.10.3",
     "register-service-worker": "^1.7.2",
-    "semver": "^7.3.5",
+    "semver": "^7.3.7",
     "simple-audio": "^1.0.1",
     "socket.io-client": "^2.4.0",
     "sodium-browserify-tweetnacl": "^0.2.6",
@@ -64,11 +64,11 @@
     "vuetify": "^1.5.24",
     "vuex": "^3.6.2",
     "vuex-persist": "^3.1.3",
-    "web3-eth": "^1.7.0",
-    "web3-utils": "^1.7.0"
+    "web3-eth": "^1.7.3",
+    "web3-utils": "^1.7.3"
   },
   "devDependencies": {
-    "@babel/core": "7.17.4",
+    "@babel/core": "7.18.0",
     "@babel/eslint-parser": "^7.17.0",
     "@intlify/vue-i18n-loader": "^1.1.0",
     "@vue/babel-preset-app": "^4.5.15",
@@ -81,25 +81,25 @@
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^28.1.0",
     "babel-plugin-rewire": "^1.2.0",
     "cross-env": "^7.0.3",
-    "electron": "^17.0.1",
+    "electron": "^18.2.4",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.31.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^8.4.1",
+    "eslint-plugin-vue": "^8.6.0",
     "lorem-ipsum": "^2.0.4",
-    "sinon": "^13.0.1",
-    "stylus": "^0.56.0",
+    "sinon": "^14.0.0",
+    "stylus": "^0.57.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.5",
+    "vue-cli-plugin-vuetify": "^2.4.8",
     "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.14",

src/assets/stylus/components/_chat.styl

@@ -181,7 +181,13 @@ $chat-avatar-size := 40px
 
     &--clickable
       cursor: pointer
-
+  &__rates-column
+    flex-direction: column
+  &__rates
+    color: hsla(0,0%,100%,.7)
+    font-style: italic
+    font-size: 14px
+    font-weight: 300
   &__status
     line-height: 1
     margin-left: 8px
@@ -257,6 +263,8 @@ $chat-avatar-size := 40px
       color: $adm-colors.muted
     &__amount
       color: $adm-colors.regular
+    &__rates
+      color: $adm-colors.muted
     &__direction
       color: $adm-colors.regular
     &__message-text

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

@@ -17,6 +17,63 @@
     &:after // [2]
       transition: unset
 
+.fake-input
+  color: rgba(255,255,255,0.5)
+  font-weight: 400
+  padding-top: 12px
+  margin-top: 4px
+  pointer-events: none
+  flex: 1 1 auto
+  font-size: 16px
+  text-align: left
+  display: flex
+  align-items: flex-start
+  min-height: inherit;
+  position: relative
+
+  &__label
+    left: 0px
+    right: auto
+    position: absolute
+    transform: translateY(-18px) scale(0.75)
+    overflow: hidden
+    text-overflow: ellipsis
+    top: 15px
+    transform-origin: top left
+    white-space: nowrap
+    max-width: 133%
+  &__box
+    width: 100%
+    padding-bottom: 20px
+    position: relative
+    display: flex
+    align-items: baseline
+    overflow: hidden
+
+    &:before
+      content: ''
+      border-image: repeating-linear-gradient(to right, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 2px, transparent 2px, transparent 4px) 1 repeat
+      border-color: rgba(255,255,255,0.7)
+      border-style: solid
+      border-width: thin 0 0 0
+      border-top-width: 1px
+      left: 0
+      position: absolute
+      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
+      width: 100%
+      top: 31px
+  &__value
+    line-height: 32px
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--rate
+      font-style: italic
+      padding-left: 3px
+      color: inherit !important
+
+
 .theme--light
   .a-input
     .v-label
@@ -42,3 +99,7 @@
     &.v-input--is-focused > .v-input__control > .v-input__slot:after // [3.c.]
       border-color: $adm-colors.primary2
       border-width: thin 0 0 0
+  .fake-input
+    color: rgba(0,0,0,0.54)
+  .fake-input__box:before
+    border-image: repeating-linear-gradient(to right, rgba(0,0,0,0.38) 0px, rgba(0,0,0,0.38) 2px, transparent 2px, transparent 4px) 1 repeat    

src/components/AChat/AChatTransaction.vue

@@ -38,7 +38,10 @@
           >
             <v-layout align-center>
               <slot name="crypto" />
-              <span class="ml-2">{{ amount }}</span>
+              <div class="a-chat__rates-column d-flex ml-2">
+                <span class="mb-1">{{ amount | currency(crypto) }}</span>
+                <span class="a-chat__rates">{{ historyRate }}</span>
+              </div>
             </v-layout>
           </div>
         </div>
@@ -56,6 +59,8 @@
 <script>
 import { tsIcon, tsUpdatable, tsColor } from '@/lib/constants'
 import { isStringEqualCI } from '@/lib/textHelpers'
+import currencyAmount from '@/filters/currencyAmount'
+import { timestampInSec } from '@/filters/helpers'
 
 export default {
   props: {
@@ -102,6 +107,17 @@ export default {
     isClickable: {
       type: Boolean,
       default: false
+    },
+    crypto: {
+      type: String,
+      default: 'ADM'
+    },
+    hash: {
+      required: true,
+      type: String
+    },
+    txTimestamp: {
+      required: true
     }
   },
   computed: {
@@ -116,10 +132,20 @@ export default {
     },
     statusColor () {
       return tsColor(this.status.virtualStatus)
+    },
+    historyRate () {
+      const amount = currencyAmount(this.amount, this.crypto)
+      return '~' + this.$store.getters['rate/historyRate'](timestampInSec(this.crypto, this.txTimestamp), amount, this.crypto)
+    }
+  },
+  watch: {
+    txTimestamp () {
+      this.getHistoryRates()
     }
   },
   mounted () {
     this.$emit('mount')
+    this.getHistoryRates()
   },
   methods: {
     isStringEqualCI (string1, string2) {
@@ -134,6 +160,11 @@ export default {
       if (this.statusUpdatable) {
         this.$emit('click:transactionStatus', this.id)
       }
+    },
+    getHistoryRates () {
+      this.$store.dispatch('rate/getHistoryRates', {
+        timestamp: timestampInSec(this.crypto, this.txTimestamp)
+      })
     }
   }
 }

src/components/Chat/Chat.vue

@@ -52,15 +52,17 @@
             @click="onClickAvatar(sender.id)"
           />
         </a-chat-message>
-
         <a-chat-transaction
           v-else-if="isTransaction(message.type)"
           v-bind="message"
           :key="message.id"
           :user-id="userId"
           :sender="sender"
-          :amount="message.amount | currency(message.type)"
+          :amount="message.amount"
+          :crypto="message.type"
           :time="message.timestamp | date"
+          :hash="message.hash"
+          :tx-timestamp="getTransaction(message.type, message.hash).timestamp"
           :currency="message.type"
           :locale="locale"
           :status="getTransactionStatus(message)"
@@ -288,7 +290,6 @@ export default {
   },
   mounted () {
     if (this.isFulfilled && this.chatPage <= 0) this.fetchChatMessages()
-
     this.scrollBehavior()
     this.$nextTick(() => {
       this.isScrolledToBottom = this.$refs.chat.isScrolledToBottom()