feat: Add currency code in record list

src/components/fields/input-field.vue

@@ -13,20 +13,34 @@
         </template>
       </template>
 
-      <input
-        v-bind="computedAttrs"
-        :type="type"
-        :value="modelValue"
-        :style="inputFieldStyles"
-        :disabled="disabled"
-        :tabindex="tabindex"
-        :min="minValue"
-        class="input-field__input"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      >
+      <div class="input-field__wrapper">
+        <template v-if="isLeadingIconExist">
+          <div class="input-field__leading-icon">
+            <slot name="iconLeading" />
+          </div>
+        </template>
+
+        <input
+          v-bind="computedAttrs"
+          :type="type"
+          :value="modelValue"
+          :style="inputFieldStyles"
+          :disabled="disabled"
+          :tabindex="tabindex"
+          :min="minValue"
+          class="input-field__input"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        >
+
+        <template v-if="isTrailIconExist">
+          <div class="input-field__trailing-icon">
+            <slot name="iconTrailing" />
+          </div>
+        </template>
+      </div>
     </FieldLabel>
 
     <template v-if="isSubLabelExist">
@@ -121,10 +135,16 @@ export default defineComponent({
 
     const isSubLabelExist = computed(() => !!slots.subLabel);
 
+    const isTrailIconExist = computed(() => !!slots.iconTrailing);
+
+    const isLeadingIconExist = computed(() => !!slots.iconLeading);
+
     return {
       minValue,
       computedAttrs,
       isSubLabelExist,
+      isTrailIconExist,
+      isLeadingIconExist,
     };
   },
 });
@@ -135,6 +155,14 @@ export default defineComponent({
   position: relative;
   width: 100%;
   flex: 1;
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 }
 .input-field--disabled {
   opacity: 0.6;
@@ -155,6 +183,9 @@ export default defineComponent({
 
   @include placeholder-custom(rgba(var(--app-on-surface-color-rgb), 0.6));
 }
+.input-field__wrapper {
+  position: relative;
+}
 .input-fields__sublabel {
   position: absolute;
   right: 0;
@@ -168,4 +199,11 @@ export default defineComponent({
     text-decoration: none;
   }
 }
+.input-field__leading-icon,
+.input-field__trailing-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 12px 24px;
+}
 </style>

src/components/modals/system-tx-form/index.vue

@@ -23,7 +23,11 @@
           type="number"
           only-positive
           placeholder="Amount"
-        />
+        >
+          <template #iconTrailing>
+            <span>{{ currencyCode }}</span>
+          </template>
+        </input-field>
       </form-row>
 
       <account-field
@@ -123,6 +127,7 @@ import {
   ref,
   watch,
   computed,
+  onMounted,
 } from 'vue';
 import { storeToRefs } from 'pinia';
 import {
@@ -204,9 +209,9 @@ export default defineComponent({
     const accountsStore = useAccountsStore();
     const categoriesStore = useCategoriesStore();
     const currenciesStore = useCurrenciesStore();
-    const { getCurrency } = useCurrenciesStore();
+    const { getCurrency, currenciesMap } = useCurrenciesStore();
 
-    const { accountsRecord } = storeToRefs(accountsStore);
+    const { accountsRecord, accounts } = storeToRefs(accountsStore);
     const { currencies } = storeToRefs(currenciesStore);
     const { categories, rawCategories } = storeToRefs(categoriesStore);
 
@@ -246,6 +251,14 @@ export default defineComponent({
 
       return form.value.account.currencyId !== form.value.toAccount.currencyId;
     });
+
+    const currencyCode = computed(() => {
+      if (form.value.account?.currencyId) {
+        return currenciesMap[form.value.account.currencyId].code;
+      }
+      return undefined;
+    });
+
     const targetCurrency = computed(() => {
       if (form.value.toAccount?.currencyId) {
         return getCurrency(form.value.toAccount.currencyId);
@@ -400,11 +413,17 @@ export default defineComponent({
       if (!disabled) form.value.type = type;
     };
 
+    onMounted(() => {
+      form.value.account = accounts.value[0];
+    });
+
     return {
       FORM_TYPES,
       TRANSACTION_TYPES,
       PAYMENT_TYPES,
       form,
+      currencyCode,
+      currenciesMap,
       currencies,
       isCurrenciesDifferent,
       targetCurrency,

src/components/transactions-list/mono-transaction.vue

@@ -15,7 +15,7 @@
     <div class="transaction__right">
       <div class="transaction__amount">
         {{ formatAmount(tx.amount) }}
-        <!-- {{ tx.account.currency.asset }} -->
+        {{ currenciesMap[tx.currencyId].code }}
       </div>
       <div class="transaction__time">
         {{ formateDate(tx.time) }}
@@ -26,9 +26,10 @@
 
 <script lang="ts">
 import { format } from 'date-fns';
+import { storeToRefs } from 'pinia';
 import { defineComponent, PropType, computed } from 'vue';
 import { MonobankTrasnactionModel } from 'shared-types';
-import { useCategoriesStore } from '@/stores';
+import { useCategoriesStore, useCurrenciesStore } from '@/stores';
 import { MODAL_TYPES, useModalCenter } from '@/components/modal-center/index';
 import { formatAmount } from '@/js/helpers';
 
@@ -41,7 +42,11 @@ export default defineComponent({
   },
   setup(props) {
     const { getCategoryTypeById } = useCategoriesStore();
+    const currenciesStore = useCurrenciesStore();
     const { addModal } = useModalCenter();
+
+    const { currenciesMap } = storeToRefs(currenciesStore);
+
     const category = computed(
       () => getCategoryTypeById(props.tx.categoryId),
     );
@@ -57,7 +62,7 @@ export default defineComponent({
 
     return {
       formatAmount,
-
+      currenciesMap,
       category,
       formateDate,
       editTransaction,

src/stores/currencies.ts

@@ -23,6 +23,13 @@ export const useCurrenciesStore = defineStore('currencies', () => {
     }, [] as CurrencyRecord[]),
   );
 
+  const currenciesMap = computed(
+    () => currencies.value.reduce((acc, curr) => {
+      acc[curr.currencyId] = curr;
+      return acc;
+    }, {}),
+  );
+
   const loadCurrencies = async () => {
     currencies.value = await loadUserCurrencies();
 
@@ -58,6 +65,7 @@ export const useCurrenciesStore = defineStore('currencies', () => {
     currencies,
     baseCurrency,
     systemCurrencies,
+    currenciesMap,
     systemCurrenciesAssociatedWithUser,
     isBaseCurrencyExists,
     loadCurrencies,