feat(wallet): multi chain frontend extras

apps/wallet/src/components/accounts/TransferForm.vue

@@ -20,7 +20,7 @@
       :readonly="isViewMode"
       type="text"
       :prepend-icon="mdiSend"
-      :rules="[requiredRule]"
+      :rules="[requiredRule, addressValidator]"
       data-test-id="transfer-form-destination-address"
     />
     <VTextField
@@ -48,7 +48,7 @@ import { computed, ref, toRefs, watch } from 'vue';
 import { VForm, VTextField } from 'vuetify/components';
 import { Account, Asset, Transfer } from '~/generated/station/station.did';
 import { VFormValidation } from '~/types/helper.types';
-import { requiredRule, validTokenAmount } from '~/utils/form.utils';
+import { requiredRule, validAddress, validTokenAmount } from '~/utils/form.utils';
 import { amountToBigInt, formatBalance } from '~/utils/helper.utils';
 
 export type TransferFormProps = {
@@ -87,6 +87,8 @@ const emit = defineEmits<{
 const model = computed(() => props.modelValue.value);
 watch(model.value, newValue => emit('update:modelValue', newValue), { deep: true });
 
+const addressValidator = computed(() => validAddress(input.asset.blockchain));
+
 const amountInput = ref<HTMLInputElement | null>(null);
 const amount = ref<string | undefined>(undefined);
 watch(

apps/wallet/src/locales/en.locale.ts

@@ -757,6 +757,7 @@ export default {
       numberRange: 'This field must be between {min} and {max}.',
       invalidDecimalPlaces: 'This field must have a maximum of {decimals} decimal places.',
       isHex: 'This field must be a valid hexadecimal value.',
+      validAddress: 'This field must be a valid address.',
     },
   },
   navigation: {

apps/wallet/src/locales/fr.locale.ts

@@ -765,6 +765,7 @@ export default {
       numberRange: 'Le champ doit contenir une valeur valide entre {min} et {max}.',
       invalidDecimalPlaces: 'Ce champ doit contenir un maximum de {decimals} décimales.',
       isHex: 'Ce champ doit contenir une valeur hexadécimale valide.',
+      validAddress: 'Ce champ doit contenir une adresse valide.',
     },
   },
   navigation: {

apps/wallet/src/locales/pt.locale.ts

@@ -760,6 +760,7 @@ export default {
       numberRange: 'Este campo deve estar entre {min} e {max}.',
       invalidDecimalPlaces: 'Este campo deve ter no máximo {decimals} casas decimais.',
       isHex: 'Este campo deve conter um valor hexadecimal válido.',
+      validAddress: 'Este campo deve conter um endereço válido.',
     },
   },
   navigation: {

apps/wallet/src/utils/form.utils.ts

@@ -1,6 +1,7 @@
 import { Principal } from '@dfinity/principal';
 import isUUID from 'validator/es/lib/isUUID';
 import { i18n } from '~/plugins/i18n.plugin';
+import { detectAddressFormat } from './asset.utils';
 
 export const requiredRule = (value: unknown): string | boolean => {
   if (value === null || value === undefined || value === '') {
@@ -241,3 +242,25 @@ export const validEmail = (value: unknown): string | boolean => {
 
   return true;
 };
+
+export const validAddress =
+  (blockchain: string) =>
+  (value: unknown): string | boolean => {
+    const hasValue = !!value;
+    if (!hasValue) {
+      // this rule only applies if there is a value
+      return true;
+    }
+
+    if (typeof value !== 'string') {
+      return i18n.global.t('forms.rules.validAddress');
+    }
+
+    try {
+      if (detectAddressFormat(blockchain, value) !== undefined) {
+        return true;
+      }
+    } catch {}
+
+    return i18n.global.t('forms.rules.validAddress');
+  };