feat: verbose logging in console

package.json

@@ -89,6 +89,7 @@
     "path-browserify": "^1.0.1",
     "pbkdf2": "^3.1.2",
     "pinia": "^3.0.0",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "popmotion": "^11.0.5",
     "promise-queue": "^2.2.5",
     "qrcode": "^1.5.4",

scripts/electron/notarize.cjs

@@ -1,4 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
+import { logger } from '@/utils/devTools/logger'
+
 const { notarize } = require('@electron/notarize')
 
 exports.default = async function notarizing(context) {
@@ -9,13 +11,13 @@ exports.default = async function notarizing(context) {
   }
 
   if (process.env.APPLE_NOTARIZE !== 'true') {
-    console.log('APPLE_NOTARIZE=false | Skipping the notarization"')
+    logger.log('notarizing', 'info', 'APPLE_NOTARIZE=false | Skipping the notarization"')
     return
   }
 
   const appName = context.packager.appInfo.productFilename
 
-  console.log(`Preparing the app ${appName} for notarization`)
+  logger.log("notarizing", 'info', `Preparing the app ${appName} for notarization`)
 
   return notarize({
     appPath: `${appOutDir}/${appName}.app`,

scripts/electron/sandboxFix.mjs

@@ -3,9 +3,10 @@
 import fs from 'fs/promises'
 import path from 'path'
 import chalk from 'chalk'
+import { logger } from '@/utils/devTools/logger'
 
 const log = (message, dotFormatting = chalk.blue) => {
-  console.log(`  ${dotFormatting('•')} ${message}`)
+  logger.log('sandboxFix', 'info', `  ${dotFormatting('•')} ${message}`)
 }
 
 const afterPackHook = async (params) => {

scripts/wallets.mjs

@@ -3,6 +3,7 @@ import { $ } from 'execa'
 import { copyFile, readdir, readFile, writeFile, mkdir, rm } from 'fs/promises'
 import { resolve, join } from 'path'
 import _ from 'lodash'
+import { logger } from '@/utils/devTools/logger'
 
 const CRYPTOS_DATA_FILE_PATH = resolve('src/lib/constants/cryptos/data.json')
 const CRYPTOS_ICONS_DIR_PATH = resolve('src/components/icons/cryptos')
@@ -22,7 +23,7 @@ async function run(branch = 'master') {
   await $`git submodule update`
   await $`git submodule foreach git pull origin ${branch}`
 
-  console.log('Updating coins data from `adamant-wallets`. Using branch:', branch)
+  logger.log('wallets', 'info', 'Updating coins data from `adamant-wallets`. Using branch:', branch)
 
   const { coins, config, coinDirNames, coinSymbols } = await initCoins()
   await applyBlockchains(coins, coinSymbols)
@@ -36,7 +37,7 @@ async function run(branch = 'master') {
   await updateTestnetConfig(config)
   await updateTorConfig(config)
 
-  console.log('Coins updated successfully')
+  logger.log('wallets', 'info', 'Coins updated successfully')
 }
 
 async function initCoins() {

src/components/AChat/AChatActionsOverlay.vue

@@ -38,6 +38,7 @@ import { usePartnerId } from '@/components/AChat/hooks/usePartnerId'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { computed, defineComponent, onMounted, PropType, reactive, ref } from 'vue'
 import { vibrate } from '@/lib/vibrate'
+import { logger } from '@/utils/devTools/logger'
 
 const className = 'a-chat-actions-overlay'
 const classes = {
@@ -73,7 +74,9 @@ export default defineComponent({
       if (element) {
         return element.getBoundingClientRect()
       } else {
-        console.warn(
+        logger.log(
+          'AChatActionsOverlay',
+          'warn',
           `[AChatActionsOverlay]: <AChatMessage/> with "data-id"="${props.transaction.id}" was not found`
         )
         return null

src/components/AChat/AChatAttachment/AChatImageModal.vue

@@ -67,6 +67,7 @@ import AChatModalFile from './AChatModalFile.vue'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { FileAsset } from '@/lib/adamant-api/asset'
 import { mdiArrowCollapseDown, mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js'
+import { logger } from '@/utils/devTools/logger'
 
 function delay(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
@@ -222,7 +223,9 @@ export default {
     const downloadFile = async () => {
       const file = props.files[slide.value]
       if (!file) {
-        console.warn(
+        logger.log(
+          'AChatImageModal',
+          'warn',
           `Failed to download the file. Reason: The file with index ${slide.value} does not exist`
         )
         return

src/components/AChat/QuotedMessage.vue

@@ -45,6 +45,7 @@ import { Cryptos } from '@/lib/constants'
 import currencyFormatter from '@/filters/currencyAmountWithSymbol'
 import { formatChatPreviewMessage } from '@/lib/markdown'
 import { ChatMessageTransaction } from '@/lib/schema/client/api'
+import { logger } from '@/utils/devTools/logger'
 
 const className = 'quoted-message'
 const classes = {
@@ -157,7 +158,7 @@ export default defineComponent({
             errorCode.value = err.errorCode
           }
 
-          console.warn(err)
+          logger.log('QuotedMessage', 'warn', err)
         } finally {
           loading.value = false
         }

src/components/Chat/Chat.vue

@@ -140,7 +140,7 @@
           :flashing="flashingMessageId === message.id"
           :data-id="message.id"
           :partner-id="partnerId"
-          @resend="() => console.debug('Not implemented')"
+          @resend="() => logger.log('Chat', 'debug', 'Not implemented')"
           @click:quoted-message="onQuotedMessageClick"
           @swipe:left="onSwipeLeft(message)"
           @longpress="onMessageLongPress(message)"
@@ -276,6 +276,7 @@ import { useAttachments } from '@/stores/attachments'
 import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import Visibility from 'visibilityjs'
 import copyToClipboard from 'copy-to-clipboard'
+import { logger } from '@/utils/devTools/logger'
 
 import {
   Cryptos,
@@ -793,7 +794,9 @@ const onQuotedMessageClick = async (transactionId: string) => {
   // if after fetching chat history the message still cannot be found
   // then do nothing
   if (transactionIndex === -1) {
-    console.warn(
+    logger.log(
+      'Chat',
+      'warn',
       'onQuotedMessageClick: Transaction not found in the chat history',
       `tx.id="${transactionId}"`
     )

src/components/ChatStartDialog.vue

@@ -75,6 +75,7 @@ import QrcodeScannerDialog from '@/components/QrcodeScannerDialog.vue'
 import QrcodeRendererDialog from '@/components/QrcodeRendererDialog.vue'
 import partnerName from '@/mixins/partnerName'
 import { mdiDotsVertical } from '@mdi/js'
+import { logger } from '@/utils/devTools/logger'
 
 export default {
   components: {
@@ -172,7 +173,7 @@ export default {
       this.$store.dispatch('snackbar/show', {
         message: this.$t('transfer.invalid_qr_code')
       })
-      console.warn(error)
+      logger.log('ChatStartDialog', 'warn', error)
     },
 
     /**

src/components/EmojiPicker.vue

@@ -16,6 +16,7 @@ import axios from 'axios'
 import { defineComponent, onMounted, PropType, ref } from 'vue'
 import { Picker } from 'emoji-mart'
 import { useIsMobile } from '@/hooks/useIsMobile'
+import { logger } from '@/utils/devTools/logger'
 
 const className = 'emoji-picker'
 const classes = {
@@ -57,7 +58,7 @@ export default defineComponent({
       if (container.value && picker.value) {
         container.value.appendChild(picker.value as unknown as Node)
       } else {
-        console.warn('Element not found')
+        logger.log('EmojiPicker', 'warn', 'Element not found')
       }
     })
 

src/components/LoginForm.vue

@@ -63,6 +63,7 @@ import { isAxiosError } from 'axios'
 import { isAllNodesOfflineError, isAllNodesDisabledError } from '@/lib/nodes/utils/errors'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
 import { useSaveCursor } from '@/hooks/useSaveCursor'
+import { logger } from '@/utils/devTools/logger'
 
 const className = 'login-form'
 const classes = {
@@ -130,7 +131,7 @@ const login = () => {
       } else {
         emit('error', t('errors.something_went_wrong'))
       }
-      console.log(err)
+      logger.log('LoginForm', 'info', err)
     })
     .finally(() => {
       antiFreeze()

src/components/LoginPasswordForm.vue

@@ -53,6 +53,7 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
+import { logger } from '@/utils/devTools/logger'
 
 import { clearDb } from '@/lib/idb'
 import { isAllNodesDisabledError, isAllNodesOfflineError } from '@/lib/nodes/utils/errors'
@@ -136,7 +137,7 @@ const submit = () => {
       } else {
         emit('error', t('errors.something_went_wrong'))
       }
-      console.log(err)
+      logger.log('LoginPassswordForm', 'info', err)
     })
     .finally(() => {
       showSpinner.value = false

src/components/PassphraseGenerator.vue

@@ -98,6 +98,7 @@ import SaveIcon from '@/components/icons/common/Save.vue'
 import QrCodeIcon from '@/components/icons/common/QrCode.vue'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
 import { VTextarea } from 'vuetify/components'
+import { logger } from '@/utils/devTools/logger'
 
 const { t } = useI18n()
 
@@ -165,7 +166,7 @@ const generatePassphrase = () => {
     if (element) {
       element.scrollIntoView({ behavior: 'smooth' })
     } else {
-      console.warn('[PassphraseGenerator] `element` is undefined')
+      logger.log('PassphraseGenerator', 'warn', '[PassphraseGenerator] `element` is undefined')
     }
   }, 0)
 }

src/components/SendFundsForm.vue

@@ -204,6 +204,7 @@ import get from 'lodash/get'
 import { BigNumber } from 'bignumber.js'
 import * as transactions from '@klayr/transactions'
 import { KLY_DECIMALS } from '@/lib/klayr/klayr-constants'
+import { logger } from '@/utils/devTools/logger'
 
 import {
   Cryptos,
@@ -734,7 +735,7 @@ export default {
       this.$store.dispatch('snackbar/show', {
         message: this.$t('transfer.invalid_qr_code')
       })
-      console.warn(error)
+      logger.log('SendFundsForm', 'warn', error)
     },
 
     /**
@@ -817,7 +818,7 @@ export default {
         })
         .catch((error) => {
           const formattedError = formatSendTxError(error)
-          console.warn('Error while sending transaction', formattedError)
+          logger.log('SendFundsForm', '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')
@@ -1008,7 +1009,7 @@ export default {
 
         this.estimatedGasLimit = gasLimit
       } catch (error) {
-        console.warn(`${this.currency} EstimateGas failed:`, error)
+        logger.log('SendFundsForm', 'warn', `${this.currency} EstimateGas failed:`, error)
         this.estimatedGasLimit = null
       }
     }

src/components/UploadFile.vue

@@ -12,6 +12,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { useStore } from 'vuex'
+import { logger } from '@/utils/devTools/logger'
 import {
   computeCID,
   cropImage,
@@ -29,7 +30,7 @@ function getImageResolution(file: File): Promise<{ width?: number; height?: numb
       resolve({ width: img.width, height: img.height })
     }
     img.onerror = (err) => {
-      console.warn('Error loading image:', err)
+      logger.log('UploadFile', 'warn', 'Error loading image:', err)
       resolve({})
       URL.revokeObjectURL(img.src)
     }
@@ -58,7 +59,7 @@ export default defineComponent({
       const selectedFiles = input.files
 
       if (!selectedFiles) {
-        console.warn('No files selected')
+        logger.log('UploadFile', 'warn', 'No files selected')
         return
       }
 

src/directives/longPress.ts

@@ -1,11 +1,12 @@
 import { Directive } from 'vue'
+import { logger } from '@/utils/devTools/logger'
 
 export const LONG_PRESS_TIMEOUT = 500
 
 export const longPressDirective: Directive = {
   created: (el: HTMLElement, { value }) => {
     if (typeof value !== 'function') {
-      console.warn(`Expect a function, got ${value}`)
+      logger.log('longPress', 'warn', `Expect a function, got ${value}`)
       return
     }
 

src/electron/main.js

@@ -3,6 +3,7 @@ import { fileURLToPath, URL } from 'node:url'
 import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer'
 import path from 'node:path'
 import { readFile } from 'node:fs'
+import { logger } from '@/utils/devTools/logger'
 
 const SCHEME = 'app'
 const __filename = fileURLToPath(import.meta.url)
@@ -155,8 +156,8 @@ app.on('ready', async () => {
   if (import.meta.env.DEV) {
     // Install Vue Devtools
     installExtension(REDUX_DEVTOOLS, { loadExtensionOptions: { allowFileAccess: true } })
-      .then((name) => console.log(`Electron extensions: added ${name}`))
-      .catch((err) => console.log('Electron extensions: an error occurred: ', err))
+      .then((name) => logger.log('main', 'info', `Electron extensions: added ${name}`))
+      .catch((err) => logger.log('main', 'info', 'Electron extensions: an error occurred: ', err))
   }
   createWindow()
 })