Merge branch 'dev' into feat/spinner-when-restore

Author: skranee

.github/workflows/pwa-testnet.yml

@@ -0,0 +1,42 @@
+name: PWA Testnet Workflow
+
+on:
+  push:
+    branches:
+      - dev
+
+env:
+  SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+  PREVIEW_DOMAIN: https://msg-adamant-testnet.surge.sh
+
+jobs:
+  build-and-deploy-to-surge:
+    name: Build and Deploy with Testnet ADM nodes to surge
+    runs-on: ubuntu-latest
+    environment: testnet
+    steps:
+      - name: Checkout repository 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node version 🍀
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies ⚙️
+        run: npm ci
+
+      - name: Build PWA 🛠️
+        run: |
+          npm run schema:generate
+          npm run build:testnet
+
+      - name: Archive artifacts 📁
+        uses: actions/upload-artifact@v4
+        with:
+          path: dist
+
+      - name: Deploy to surge 🚀
+        run: |
+          npm install --global surge
+          surge ./dist ${{ env.PREVIEW_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}

electron-builder.yml

@@ -43,6 +43,8 @@ mac:
       - arm64
 
 afterSign: 'scripts/electron/notarize.cjs'
+afterPack: 'scripts/electron/sandboxFix.mjs'
+
 
 # Config for OSX dmg
 dmg:

package.json

@@ -10,11 +10,14 @@
     "serve": "vite preview --config vite-pwa.config.ts",
     "dev": "vite --config vite-pwa.config.ts",
     "dev:localnet": "vite --host 0.0.0.0 --config vite-pwa.config.ts",
-    "serve:test": "cross-env ADM_CONFIG_FILE=test vue-cli-service serve",
+    "dev:testnet": "vite --config vite-pwa.config.ts --mode testnet",
+    "dev:tor": "vite --config vite-pwa.config.ts --mode tor",
     "wallets:generate": "npm run wallets:data:generate && npm run wallets:types:generate",
     "wallets:data:generate": "node scripts/wallets.mjs",
     "wallets:types:generate": "swagger-typescript-api -p ./adamant-wallets/specification/openapi.json -o ./src/types/wallets -n index.ts --no-client",
     "build": "vue-tsc && vite build --config vite-pwa.config.ts",
+    "build:testnet": "vue-tsc && vite build --config vite-pwa.config.ts --mode testnet",
+    "build:tor": "vue-tsc && vite build --config vite-pwa.config.ts --mode tor",
     "lint": "eslint --ext .ts,.js,.vue --fix ./src",
     "prettify": "prettier --write src/",
     "typecheck": "vue-tsc --noEmit",

scripts/electron/sandboxFix.mjs

@@ -0,0 +1,36 @@
+// copied and modified from https://github.com/gergof/electron-builder-sandbox-fix/blob/master/lib/index.js
+
+import fs from 'fs/promises'
+import path from 'path'
+import chalk from 'chalk'
+
+const log = (message, dotFormatting = chalk.blue) => {
+  console.log(`  ${dotFormatting('•')} ${message}`)
+}
+
+const afterPackHook = async (params) => {
+  if (params.electronPlatformName !== 'linux') {
+    // this fix is only required on linux
+    return
+  }
+
+  const executable = path.join(params.appOutDir, params.packager.executableName)
+
+  const binPath = path.join(path.dirname(executable), `${params.packager.executableName}.bin`)
+
+  const loaderScript = `#!/usr/bin/env bash
+exec "${binPath}" "--no-sandbox" "$@"
+`
+  try {
+    await fs.rename(executable, executable + '.bin')
+    await fs.writeFile(executable, loaderScript)
+    await fs.chmod(executable, 0o755)
+  } catch (e) {
+    log('failed to create loader for sandbox fix: ' + e.message, chalk.red)
+    throw new Error('Failed to create loader for sandbox fix')
+  }
+
+  log('sandbox fix successfully applied', chalk.green)
+}
+
+export default afterPackHook

scripts/wallets.mjs

@@ -33,6 +33,7 @@ async function run(branch = 'master') {
 
   await updateProductionConfig(config)
   await updateDevelopmentConfig(config)
+  await updateTestnetConfig(config)
   await updateTorConfig(config)
 
   console.log('Coins updated successfully')
@@ -152,6 +153,16 @@ function updateDevelopmentConfig(configs) {
   return updateConfig(configs, 'development')
 }
 
+function updateTestnetConfig(configs) {
+  const testnetConfigs = _.mapValues(configs, (config) => {
+    if (config.testnet) config.nodes.list = config.testnet.nodes.list
+
+    return config
+  });
+
+  return updateConfig(testnetConfigs, 'testnet')
+}
+
 function updateTorConfig(configs) {
   const torConfigs = _.mapValues(configs, (config) => {
     const torConfig = _.mergeWith(config, config.tor, (value, srcValue) => {

src/components/LoginForm.vue

@@ -174,7 +174,8 @@ export default defineComponent({
 
     &:deep(.v-field__input) {
       width: 100%;
-      padding-right: 0;
+      padding-right: 32px;
+      padding-left: 32px;
     }
   }
 }

src/components/LoginPasswordForm.vue

@@ -160,7 +160,8 @@ export default defineComponent({
 
     &:deep(.v-field__input) {
       width: 100%;
-      padding-right: 0;
+      padding-right: 32px;
+      padding-left: 32px;
     }
 
     :deep(input) {

src/components/QrcodeCapture.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="className">
-    <div :class="`${className}__activator`" @click="$refs.fileInput.click()">
+  <div :class="classes.root">
+    <div :class="classes.activator" @click="fileInput?.click()">
       <slot />
     </div>
 
@@ -9,88 +9,131 @@
       ref="fileInput"
       type="file"
       accept="image/*"
-      :class="`${className}__file-input`"
+      :class="classes.input"
       @change="onFileSelect"
     />
 
-    <img ref="imageElement" :src="imageBase64" :class="`${className}__image`" />
+    <canvas ref="canvasElement" :class="classes.image" />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { vibrate } from '@/lib/vibrate'
+import { useTemplateRef } from 'vue'
+import type { BrowserQRCodeReader } from '@zxing/browser'
 
-export default {
-  emits: ['detect', 'error'],
-  data: () => ({
-    selectedImage: undefined,
-    imageBase64: '',
-    qrCodeText: '',
-    codeReader: undefined
-  }),
-  computed: {
-    className() {
-      return 'qrcode-capture'
+const IMG_MAX_SIZE = 400
+
+const emit = defineEmits<{
+  (e: 'detect', text: string): void
+  (e: 'error', err: unknown): void
+}>()
+
+const className = 'qrcode-capture'
+
+const classes = {
+  root: className,
+  activator: `${className}__activator`,
+  input: `${className}__file-input`,
+  image: `${className}__image`
+}
+
+let codeReader: BrowserQRCodeReader
+
+const canvas = useTemplateRef('canvasElement')
+const fileInput = useTemplateRef('fileInput')
+
+const drawCanvas = (file: File) => {
+  const img = new Image()
+  const imgUrl = URL.createObjectURL(file)
+
+  const revokeObjectURL = () => {
+    URL.revokeObjectURL(imgUrl)
+  }
+
+  const promise = new Promise((resolve, reject) => {
+    img.onload = () => {
+      if (!canvas.value) {
+        return reject()
+      }
+
+      const ctx = canvas.value.getContext('2d')
+
+      if (!ctx) {
+        return reject()
+      }
+
+      const ratio = img.width / img.height
+      let newWidth = IMG_MAX_SIZE
+      let newHeight = IMG_MAX_SIZE / ratio
+
+      if (newHeight > IMG_MAX_SIZE) {
+        newHeight = IMG_MAX_SIZE
+        newWidth = IMG_MAX_SIZE * ratio
+      }
+
+      canvas.value.width = newWidth
+      canvas.value.height = newHeight
+
+      ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height)
+
+      resolve(canvas)
     }
-  },
-  methods: {
-    async onFileSelect(event) {
-      this.selectedImage = event.target.files[0]
 
-      try {
-        const { BrowserQRCodeReader } = await import('@zxing/browser')
-        this.codeReader = new BrowserQRCodeReader()
-        this.imageBase64 = await this.getImageBase64()
-        this.qrCodeText = await this.tryToDecode()
+    img.onerror = (e) => reject(e)
 
-        vibrate.veryShort()
+    img.src = imgUrl
+  })
 
-        this.$emit('detect', this.qrCodeText)
-      } catch (err) {
-        vibrate.tripleVeryShort()
+  promise.finally(revokeObjectURL)
+
+  return promise
+}
 
-        this.$emit('error', err)
+const getQrcode = () => {
+  return codeReader?.decodeFromCanvas(canvas.value!).getText()
+}
+
+const tryToDecode = () => {
+  return new Promise<string>((resolve, reject) => {
+    // Vue should rerender <canvas> element,
+    // so add a callback to the macrotasks queue
+    setTimeout(() => {
+      try {
+        resolve(getQrcode())
+      } catch (e) {
+        reject(e)
       }
-      // Reset input to trigger change event later if user selects same image (Chrome)
-      this.$refs.fileInput.value = ''
-    },
-
-    /**
-     * Converts image into Base64.
-     * @returns {Promise<string>}
-     */
-    getImageBase64() {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.onload = (e) => resolve(e.target.result)
-        reader.onerror = (err) => reject(err)
-
-        reader.readAsDataURL(this.selectedImage)
-      })
-    },
-
-    /**
-     * Decode QRCode from Base64 image.
-     * @returns {Promise<string>}
-     */
-    async getQrcode() {
-      const result = await this.codeReader.decodeFromImageElement(this.$refs.imageElement)
-
-      return result.text
-    },
-
-    tryToDecode() {
-      return new Promise((resolve, reject) => {
-        // Vue should rerender <img> element,
-        // so add a callback to the macrotasks queue
-        setTimeout(() => {
-          this.getQrcode()
-            .then((qrCodeText) => resolve(qrCodeText))
-            .catch((err) => reject(err))
-        }, 0)
-      })
+    }, 0)
+  })
+}
+
+const onFileSelect = async (event: Event) => {
+  try {
+    if (!codeReader) {
+      const { BrowserQRCodeReader } = await import('@zxing/browser')
+      codeReader = new BrowserQRCodeReader()
     }
+
+    const input = event.target as HTMLInputElement
+
+    const file = input.files![0]!
+
+    await drawCanvas(file)
+    const qrCodeText = await tryToDecode()
+
+    vibrate.veryShort()
+
+    emit('detect', qrCodeText)
+  } catch (err) {
+    vibrate.tripleVeryShort()
+
+    emit('error', err)
+  }
+
+  if (fileInput.value) {
+    // Reset input to trigger change event later if user selects same image (Chrome)
+    fileInput.value.value = ''
   }
 }
 </script>

src/components/SendFundsForm.vue

@@ -189,7 +189,11 @@
 <script>
 import { adm } from '@/lib/nodes'
 import klyIndexer from '@/lib/nodes/kly-indexer'
-import { AllNodesDisabledError, AllNodesOfflineError, NoInternetConnectionError } from '@/lib/nodes/utils/errors'
+import {
+  AllNodesDisabledError,
+  AllNodesOfflineError,
+  NoInternetConnectionError
+} from '@/lib/nodes/utils/errors'
 import { PendingTransactionError } from '@/lib/pending-transactions'
 import axios from 'axios'
 import { computed, nextTick } from 'vue'
@@ -235,7 +239,6 @@ import { MAX_UINT64 } from '@klayr/validator'
 import { mdiDotsVertical, mdiMenuDown } from '@mdi/js'
 import { useStore } from 'vuex'
 
-
 /**
  * @returns {string | boolean}
  */
@@ -290,7 +293,7 @@ export default {
     const isOnline = computed(() => store.getters['isOnline'])
 
     const checkIsOnline = () => {
-      return navigator.onLine || isOnline.value;
+      return navigator.onLine || isOnline.value
     }
 
     return {