Advanced Form Field errors improvements

Author: boyankostov

package-lock.json

@@ -47,7 +47,7 @@
     "vue": "^3.5.24",
     "vue-i18n": "11.2.8",
     "vue-router": "^4.6.3",
-    "web-components": "github:nolus-protocol/web-components#v2.0.59",
+    "web-components": "github:nolus-protocol/web-components#v2.0.60",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package.json

@@ -16,6 +16,7 @@
     :itemsHeadline="itemsHeadline"
     :item-template="itemTemplate"
     :valueOnly="firstInputValue"
+    :inputClass="errorInsufficientBalance? 'text-typography-error' : undefined"
     searchable
   />
   <div class="relative">
@@ -56,19 +57,36 @@
     :itemsHeadline="itemsHeadline"
     :item-template="itemTemplate"
     :valueOnly="secondInputValue"
+    :inputClass="errorInsufficientBalance? 'text-typography-error' : undefined"
     searchable
   />
-  <span
-    :class="{ hidden: !errorMsg?.length }"
-    class="px-6 py-4 text-14 text-typography-error"
-  >
-    {{ errorMsg }}
-  </span>
+  <AnimatePresence>
+    <Motion
+      v-if="errorMsg?.length"
+      :initial="{ opacity: 0, y: 4, overflow: 'hidden' }"
+      :animate="{ opacity: 1, y: 0, overflow: 'hidden', transition: { type: 'spring', stiffness: 400, damping: 20 } }"
+      :exit="{ opacity: 0, y: 4, overflow: 'hidden', transition: { type: 'spring', stiffness: 400, damping: 40 } }"
+      tag="div"
+      class="px-6 py-4 text-14 text-typography-error flex items-center gap-1"
+    >
+      <SvgIcon size="s" name="warning" class="fill-typography-error" />
+      <AnimatePresence mode="wait">
+        <Motion
+          :key="errorMsg"
+          :initial="{ opacity: 0, y: 4 }"
+          :animate="{ opacity: 1, y: 0, transition: { type: 'spring', stiffness: 400, damping: 20 } }"
+          :exit="{ opacity: 0, y: 4, transition: { type: 'spring', stiffness: 400, damping: 40 } }"
+          tag="span"
+        >{{ errorMsg }}</Motion>
+      </AnimatePresence>
+    </Motion>
+  </AnimatePresence>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch, type Component } from "vue";
-import { type AdvancedCurrencyFieldOption, AdvancedFormControl } from "web-components";
+import { type AdvancedCurrencyFieldOption, AdvancedFormControl, SvgIcon } from "web-components";
+import { AnimatePresence, Motion } from "motion-v";
 import DownArrow from "@/common/components/icons/down-arrow.vue";
 import Swap from "@/common/components/icons/swap.vue";
 import { MultipleCurrencyEventType } from "../types";
@@ -89,6 +107,7 @@ const props = defineProps<{
   selectedSecondCurrencyOption: AdvancedCurrencyFieldOption | undefined;
   currencyOptions: AdvancedCurrencyFieldOption[];
   errorMsg?: string;
+  errorInsufficientBalance?: boolean;
   disabled?: boolean;
   isLoading?: boolean;
   itemsHeadline?: string[];

src/common/components/MultipleCurrencyComponent.vue

@@ -41,6 +41,7 @@
       :disabled-input-field="isDisabled"
       :disabled-currency-picker="disablePicker || isDisabled"
       :error-msg="amountErrorMsg"
+      :input-class="errorInsufficientBalance ? 'text-typography-error' : undefined"
       :selected-currency-option="currency"
       :itemsHeadline="[$t('message.assets'), $t('message.balance')]"
       :item-template="
@@ -204,6 +205,7 @@ const networkCurrencies = ref<ExternalCurrency[] | AssetBalance[]>(balancesStore
 const selectedCurrency = ref(0);
 const amount = ref("");
 const amountErrorMsg = ref("");
+const errorInsufficientBalance = computed(() => amountErrorMsg.value === i18n.t("message.invalid-balance-big"));
 const txHashes = ref<{ hash: string; status: SwapStatus; url: string | null }[]>([]);
 
 const step = ref(CONFIRM_STEP.CONFIRM);

src/modules/assets/components/SendForm.vue

@@ -16,6 +16,7 @@
       :first-calculated-balance="firstCalculatedBalance"
       :second-calculated-balance="secondCalculatedBalance"
       :error-msg="error"
+      :error-insufficient-balance="errorInsufficientBalance"
       @swap="onSwapItems"
       :item-template="
         (item) =>
@@ -27,15 +28,17 @@
           })
       "
     />
-    <div class="flex justify-end border-t border-b border-border-color px-6 py-4">
+    <div
+      class="flex justify-end border-t border-b border-border-color px-6 py-4"
+    >
       <div class="flex flex-[3] flex-col gap-3 text-right text-16 font-normal text-typography-secondary">
         <p class="flex gap-1 self-end">{{ $t("message.price-impact") }}:</p>
         <p class="flex gap-1 self-end">
           {{ $t("message.estimated-tx-fee") }}:
           <span class="w-[18px]"> </span>
         </p>
       </div>
-      <div
+      <div 
         class="ml-2 flex flex-[1] flex-col justify-between gap-2 text-right text-16 font-semibold text-typography-default"
       >
         <template v-if="loading">
@@ -176,6 +179,8 @@ const loadingTx = ref(false);
 const priceImapact = ref(0);
 const onClose = inject("close", () => {});
 
+const errorInsufficientBalance = computed(() => error.value === i18n.t("message.invalid-balance-big"));
+
 const disabledByWallet = computed(() => {
   switch (wallet.wallet?.signer?.type) {
     case WalletTypes.evm: {

src/modules/assets/components/SwapForm.vue

@@ -15,6 +15,7 @@
       :calculatedBalance="stable"
       @input="onInput"
       :error-msg="error"
+      :input-class="errorInsufficientBalance ? 'text-typography-error' : undefined"
       :searchable="true"
       :itemsHeadline="[$t('message.assets'), $t('message.your-balance')]"
       :item-template="
@@ -179,6 +180,7 @@ const i18n = useI18n();
 
 const input = ref("0");
 const error = ref("");
+const errorInsufficientBalance = ref(false);
 const loading = ref(false);
 const disabled = ref(false);
 const supply = ref<{ [key: string]: boolean }>({});
@@ -360,10 +362,12 @@ function validateInputs() {
 
   if (verr.length > 0) {
     error.value = verr;
+    errorInsufficientBalance.value = true;
     return error.value;
   }
 
   error.value = validateAmountV2(input.value, currency.balance.value);
+  errorInsufficientBalance.value = error.value === i18n.t("message.invalid-balance-big");
   return error.value;
 }
 </script>

src/modules/earn/components/SupplyForm.vue

@@ -15,6 +15,7 @@
       :calculatedBalance="stable"
       @input="onInput"
       :error-msg="error"
+      :input-class="errorInsufficientBalance ? 'text-typography-error' : undefined"
       :searchable="true"
       :itemsHeadline="[$t('message.assets'), $t('message.supplied')]"
       :item-template="
@@ -151,6 +152,7 @@ const onShowToast = inject("onShowToast", (_data: { type: ToastType; message: st
 
 const input = ref("0");
 const error = ref("");
+const errorInsufficientBalance = computed(() => error.value === i18n.t("message.invalid-balance-big"));
 const loading = ref(false);
 const disabled = ref(false);
 const selectedCurrency = ref(0);