migrate exchange rates page to composition API and typescript

src/lib/numeral.ts

@@ -285,15 +285,3 @@ export function getExchangedAmountByRate(amount: number, fromRate: string, toRat
 
     return amount * exchangeRate;
 }
-
-export function getConvertedAmount(baseAmount: number | '', fromExchangeRate: { rate: string }, toExchangeRate: { rate: string }): number | '' | null {
-    if (!fromExchangeRate || !toExchangeRate) {
-        return '';
-    }
-
-    if (baseAmount === '') {
-        return 0;
-    }
-
-    return getExchangedAmountByRate(baseAmount as number, fromExchangeRate.rate, toExchangeRate.rate);
-}

src/locales/helper.js

@@ -47,7 +47,6 @@ import {
     appendDigitGroupingSymbol,
     parseAmount,
     formatAmount,
-    formatExchangeRateAmount,
     getAdaptiveDisplayAmountRate
 } from '@/lib/numeral.ts';
 
@@ -970,11 +969,6 @@ function getFormattedAmountWithCurrency(value, currencyCode, translateFn, userSt
     return appendCurrencySymbol(value, currencyDisplayType, currencyCode, currencyUnit, currencyName, isPlural);
 }
 
-function getFormattedExchangeRateAmount(value, translateFn, userStore) {
-    const numberFormatOptions = getNumberFormatOptions(translateFn, userStore);
-    return formatExchangeRateAmount(value, numberFormatOptions);
-}
-
 function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, translateFn, userStore) {
     const numberFormatOptions = getNumberFormatOptions(translateFn, userStore);
     return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
@@ -1538,7 +1532,6 @@ export function i18nFunctions(i18nGlobal) {
         parseAmount: (userStore, value) => getParsedAmountNumber(value, i18nGlobal.t, userStore),
         formatAmount: (userStore, value, currencyCode) => getFormattedAmount(value, i18nGlobal.t, userStore, currencyCode),
         formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
-        formatExchangeRateAmount: (userStore, value) => getFormattedExchangeRateAmount(value, i18nGlobal.t, userStore),
         getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
         getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
         getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),

src/locales/helpers.ts

@@ -72,6 +72,8 @@ import type { ErrorResponse } from '@/core/api.ts';
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
 import { KnownErrorCode, SPECIFIED_API_NOT_FOUND_ERRORS, PARAMETERIZED_ERRORS } from '@/consts/api.ts';
 
+import type { LatestExchangeRateResponse, LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';
+
 import {
     isObject,
     isString,
@@ -104,6 +106,7 @@ import {
 import services from '@/lib/services.ts';
 import logger from '@/lib/logger.ts';
 
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 export interface LocalizedErrorParameter {
@@ -143,6 +146,7 @@ export function getI18nOptions(): object {
 export function useI18n() {
     const { t, locale } = useVueI18n();
 
+    const settingsStore = useSettingsStore();
     const userStore = useUserStore();
 
     // private functions
@@ -733,6 +737,49 @@ export function useI18n() {
         return ret;
     }
 
+    function getAllDisplayExchangeRates(exchangeRatesData?: LatestExchangeRateResponse): LocalizedLatestExchangeRate[] {
+        const availableExchangeRates: LocalizedLatestExchangeRate[] = [];
+
+        if (!exchangeRatesData || !exchangeRatesData.exchangeRates) {
+            return availableExchangeRates;
+        }
+
+        for (let i = 0; i < exchangeRatesData.exchangeRates.length; i++) {
+            const exchangeRate = exchangeRatesData.exchangeRates[i];
+
+            availableExchangeRates.push({
+                currencyCode: exchangeRate.currency,
+                currencyDisplayName: getCurrencyName(exchangeRate.currency),
+                rate: exchangeRate.rate
+            });
+        }
+
+        if (settingsStore.appSettings.currencySortByInExchangeRatesPage === CurrencySortingType.Name.type) {
+            availableExchangeRates.sort(function(c1, c2) {
+                return c1.currencyDisplayName.localeCompare(c2.currencyDisplayName);
+            });
+        } else if (settingsStore.appSettings.currencySortByInExchangeRatesPage === CurrencySortingType.CurrencyCode.type) {
+            availableExchangeRates.sort(function(c1, c2) {
+                return c1.currencyCode.localeCompare(c2.currencyCode);
+            });
+        } else if (settingsStore.appSettings.currencySortByInExchangeRatesPage === CurrencySortingType.ExchangeRate.type) {
+            availableExchangeRates.sort(function(c1, c2) {
+                const rate1 = parseFloat(c1.rate);
+                const rate2 = parseFloat(c2.rate);
+
+                if (rate1 > rate2) {
+                    return 1;
+                } else if (rate1 < rate2) {
+                    return -1;
+                } else {
+                    return 0;
+                }
+            });
+        }
+
+        return availableExchangeRates;
+    }
+
     function getMonthShortName(monthName: string): string {
         return t(`datetime.${monthName}.short`);
     }
@@ -1083,6 +1130,7 @@ export function useI18n() {
         getAllTransactionEditScopeTypes: () => getLocalizedDisplayNameAndType(TransactionEditScopeType.values()),
         getAllTransactionTagFilterTypes: () => getLocalizedDisplayNameAndType(TransactionTagFilterType.values()),
         getAllTransactionScheduledFrequencyTypes: () => getLocalizedDisplayNameAndType(ScheduledTemplateFrequencyType.values()),
+        getAllDisplayExchangeRates,
         // get localized info
         getMonthShortName,
         getMonthLongName,

src/models/exchange_rate.ts

@@ -10,3 +10,9 @@ export interface LatestExchangeRateResponse {
     readonly baseCurrency: string;
     readonly exchangeRates: LatestExchangeRate[];
 }
+
+export interface LocalizedLatestExchangeRate {
+    readonly currencyCode: string;
+    readonly currencyDisplayName: string;
+    readonly rate: string;
+}

src/views/base/ExchangeRatesPageBase.ts

@@ -0,0 +1,65 @@
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import type {
+    LatestExchangeRate,
+    LatestExchangeRateResponse,
+    LocalizedLatestExchangeRate
+} from '@/models/exchange_rate.ts';
+
+import { getExchangedAmountByRate } from '@/lib/numeral.ts';
+
+export function useExchangeRatesPageBase() {
+    const { getAllDisplayExchangeRates, formatUnixTimeToLongDate, parseAmount } = useI18n();
+
+    const userStore = useUserStore();
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const baseCurrency = ref<string>(userStore.currentUserDefaultCurrency);
+    const baseAmount = ref<number>(100);
+
+    const exchangeRatesData = computed<LatestExchangeRateResponse | undefined>(() => exchangeRatesStore.latestExchangeRates.data);
+
+    const exchangeRatesDataUpdateTime = computed<string>(() => {
+        const exchangeRatesLastUpdateTime = exchangeRatesStore.exchangeRatesLastUpdateTime;
+        return exchangeRatesLastUpdateTime ? formatUnixTimeToLongDate(exchangeRatesLastUpdateTime) : '';
+    });
+
+    const availableExchangeRates = computed<LocalizedLatestExchangeRate[]>(() => {
+        return getAllDisplayExchangeRates(exchangeRatesData.value);
+    });
+
+    function getConvertedAmount(baseAmount: number | '', fromExchangeRate: LatestExchangeRate | LocalizedLatestExchangeRate, toExchangeRate: LatestExchangeRate | LocalizedLatestExchangeRate): number | '' | null {
+        if (!fromExchangeRate || !toExchangeRate) {
+            return '';
+        }
+
+        if (baseAmount === '') {
+            return 0;
+        }
+
+        return getExchangedAmountByRate(baseAmount as number, fromExchangeRate.rate, toExchangeRate.rate);
+    }
+
+    function setAsBaseline(currency: string, amount: string): void {
+        baseCurrency.value = currency;
+        baseAmount.value = parseAmount(amount);
+    }
+
+    return {
+        // states
+        baseCurrency,
+        baseAmount,
+        // computed states
+        exchangeRatesData,
+        exchangeRatesDataUpdateTime,
+        availableExchangeRates,
+        // functions
+        getConvertedAmount,
+        setAsBaseline
+    };
+}

src/views/desktop/ExchangeRatesPage.vue

@@ -5,16 +5,16 @@
                 <v-layout>
                     <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <span class="text-subtitle-2">{{ $t('Data source') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Data source') }}</span>
                             <p class="text-body-1 mt-1 mb-3">
                                 <a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
                                 <span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
-                                <span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span>
+                                <span v-else-if="!loading && !exchangeRatesData">{{ tt('None') }}</span>
                                 <span v-else-if="loading">
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
-                            <span class="text-subtitle-2" v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</span>
+                            <span class="text-subtitle-2" v-if="exchangeRatesDataUpdateTime || loading">{{ tt('Last Updated') }}</span>
                             <p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime || loading">
                                 <span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
                                 <span v-if="loading">
@@ -24,14 +24,14 @@
                         </div>
                         <v-divider />
                         <div class="mx-6 mt-4">
-                            <span class="text-subtitle-2">{{ $t('Base Amount') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Base Amount') }}</span>
                             <amount-input class="mt-2" density="compact"
                                           :currency="baseCurrency"
                                           :disabled="loading || !exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length"
                                           v-model="baseAmount"/>
                         </div>
                         <div class="mx-6 mt-4">
-                            <span class="text-subtitle-2">{{ $t('Base Currency') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Base Currency') }}</span>
                         </div>
                         <v-tabs show-arrows class="mb-4" direction="vertical"
                                 :disabled="loading" v-model="baseCurrency"
@@ -46,7 +46,7 @@
                         </v-tabs>
                         <div class="mx-6 mt-2 mb-4"
                              v-else-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
-                            <span v-if="!loading">{{ $t('None') }}</span>
+                            <span v-if="!loading">{{ tt('None') }}</span>
                             <span v-else-if="loading">
                                 <v-skeleton-loader class="skeleton-no-margin pt-2 pb-5" type="text"
                                                    :key="itemIdx" :loading="loading"
@@ -64,14 +64,14 @@
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
                                                 <v-icon :icon="icons.menu" size="24" />
                                             </v-btn>
-                                            <span>{{ $t('Exchange Rates Data') }}</span>
+                                            <span>{{ tt('Exchange Rates Data') }}</span>
                                             <v-btn density="compact" color="default" variant="text" size="24"
                                                    class="ml-2" :icon="true" :loading="loading" @click="reload">
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
-                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                                <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                         </div>
                                     </template>
@@ -81,9 +81,9 @@
                                         <tr>
                                             <th>
                                                 <div class="d-flex align-center">
-                                                    <span>{{ $t('Currency') }}</span>
+                                                    <span>{{ tt('Currency') }}</span>
                                                     <v-spacer/>
-                                                    <span>{{ $t('Amount') }}</span>
+                                                    <span>{{ tt('Amount') }}</span>
                                                 </div>
                                             </th>
                                         </tr>
@@ -98,7 +98,7 @@
                                         </tr>
 
                                         <tr v-if="!loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length)">
-                                            <td>{{ $t('No exchange rates data') }}</td>
+                                            <td>{{ tt('No exchange rates data') }}</td>
                                         </tr>
 
                                         <tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
@@ -112,10 +112,10 @@
                                                            density="comfortable" variant="text"
                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                            v-if="exchangeRate.currencyCode !== baseCurrency"
-                                                           @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))">
+                                                           @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate))">
-                                                        {{ $t('Set as Base') }}
+                                                        {{ tt('Set as Base') }}
                                                     </v-btn>
-                                                    <span>{{ getConvertedAmount(exchangeRate) }}</span>
+                                                    <span>{{ getFinalConvertedAmount(exchangeRate) }}</span>
                                                 </div>
                                             </td>
                                         </tr>
@@ -133,132 +133,114 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, useTemplateRef, watch } from 'vue';
 import { useDisplay } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import { useI18n } from '@/locales/helpers.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
+import { useExchangeRatesPageBase } from '@/views/base/ExchangeRatesPageBase.ts';
-import { useUserStore } from '@/stores/user.ts';
+
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
+import type { LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';
+
 import logger from '@/lib/logger.ts';
-import { getConvertedAmount } from '@/lib/numeral.ts';
 
 import {
     mdiRefresh,
     mdiMenu
 } from '@mdi/js';
 
-export default {
+type SnackBarType = InstanceType<typeof SnackBar>;
-    data() {
-        const { mdAndUp } = useDisplay();
-        const userStore = useUserStore();
 
-        return {
+const { mdAndUp } = useDisplay();
-            activeTab: 'exchangeRatesPage',
-            baseCurrency: userStore.currentUserDefaultCurrency,
-            baseAmount: 100,
-            loading: true,
-            alwaysShowNav: mdAndUp.value,
-            showNav: mdAndUp.value,
-            icons: {
-                refresh: mdiRefresh,
-                menu: mdiMenu
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
-        exchangeRatesData() {
-            return this.exchangeRatesStore.latestExchangeRates.data;
-        },
-        exchangeRatesDataUpdateTime() {
-            const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
-            return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
-        },
-        availableExchangeRates() {
-            return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
-        }
-    },
-    created() {
-        this.reload(false);
-    },
-    setup() {
-        const display = useDisplay();
 
-        return {
+const { tt, formatExchangeRateAmount } = useI18n();
-            display: display
+const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime, availableExchangeRates, getConvertedAmount, setAsBaseline } = useExchangeRatesPageBase();
-        };
-    },
-    watch: {
-        'display.mdAndUp.value': function (newValue) {
-            this.alwaysShowNav = newValue;
 
-            if (!this.showNav) {
+const exchangeRatesStore = useExchangeRatesStore();
-                this.showNav = newValue;
-            }
-        }
-    },
-    methods: {
-        reload(force) {
-            const self = this;
 
-            self.loading = true;
+const icons = {
+    refresh: mdiRefresh,
+    menu: mdiMenu
+};
 
-            self.exchangeRatesStore.getLatestExchangeRates({
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
-                silent: false,
-                force: force
-            }).then(() => {
-                self.loading = false;
 
-                if (self.exchangeRatesData && self.exchangeRatesData.exchangeRates) {
+const activeTab = ref<string>('exchangeRatesPage');
-                    let foundDefaultCurrency = false;
+const loading = ref<boolean>(true);
+const alwaysShowNav = ref<boolean>(mdAndUp.value);
+const showNav = ref<boolean>(mdAndUp.value);
 
-                    for (let i = 0; i < self.exchangeRatesData.exchangeRates.length; i++) {
+function reload(force: boolean): void {
-                        const exchangeRate = self.exchangeRatesData.exchangeRates[i];
+    loading.value = true;
-                        if (exchangeRate.currency === self.baseCurrency) {
-                            foundDefaultCurrency = true;
-                            break;
-                        }
-                    }
 
-                    if (force) {
+    exchangeRatesStore.getLatestExchangeRates({
-                        self.$refs.snackbar.showMessage('Exchange rates data has been updated');
+        silent: false,
-                    } else if (!foundDefaultCurrency) {
+        force: force
-                        self.$refs.snackbar.showMessage('There is no exchange rates data for your default currency');
+    }).then(() => {
-                    }
+        loading.value = false;
+
+        if (exchangeRatesData.value && exchangeRatesData.value.exchangeRates) {
+            const exchangeRates = exchangeRatesData.value.exchangeRates;
+            let foundDefaultCurrency = false;
+
+            for (let i = 0; i < exchangeRates.length; i++) {
+                const exchangeRate = exchangeRates[i];
+                if (exchangeRate.currency === baseCurrency.value) {
+                    foundDefaultCurrency = true;
+                    break;
                 }
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        getConvertedAmount(toExchangeRate) {
-            if (!this.baseCurrency) {
-                return 0;
             }
 
-            const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
+            if (force) {
-            let exchangeRateAmount = 0;
+                snackbar.value?.showMessage(tt('Exchange rates data has been updated'));
-
+            } else if (!foundDefaultCurrency) {
-            try {
+                snackbar.value?.showMessage(tt('There is no exchange rates data for your default currency'));
-                exchangeRateAmount = getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
-            } catch (ex) {
-                exchangeRateAmount = 0;
-                logger.warn('failed to convert amount by exchange rates, original base amount is ' + this.baseAmount, ex)
             }
-
-            return this.$locale.formatExchangeRateAmount(this.userStore, exchangeRateAmount);
-        },
-        setAsBaseline(currency, amount) {
-            this.baseCurrency = currency;
-            this.baseAmount = this.$locale.parseAmount(this.userStore, amount);
         }
-    }
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
 }
+
+function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate): string {
+    if (!baseCurrency.value) {
+        return '0';
+    }
+
+    const fromExchangeRate = exchangeRatesStore.latestExchangeRateMap[baseCurrency.value];
+    let exchangeRateAmount: number | '' | null = 0;
+
+    try {
+        exchangeRateAmount = getConvertedAmount(baseAmount.value / 100, fromExchangeRate, toExchangeRate);
+    } catch (ex) {
+        exchangeRateAmount = 0;
+        logger.warn('failed to convert amount by exchange rates, original base amount is ' + baseAmount.value, ex)
+    }
+
+    if (!exchangeRateAmount) {
+        return '0';
+    }
+
+    return formatExchangeRateAmount(exchangeRateAmount);
+}
+
+watch(mdAndUp, (newValue) => {
+    alwaysShowNav.value = newValue;
+
+    if (!showNav.value) {
+        showNav.value = newValue;
+    }
+});
+
+reload(false);
 </script>
 
 <style>

src/views/mobile/ExchangeRatesPage.vue

@@ -1,8 +1,8 @@
 <template>
     <f7-page ptr @ptr:refresh="update">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Exchange Rates Data')"></f7-nav-title>
+            <f7-nav-title :title="tt('Exchange Rates Data')"></f7-nav-title>
             <f7-nav-right>
                 <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
@@ -11,8 +11,8 @@
         <f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Base Currency')"
+                :header="tt('Base Currency')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Base Currency'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Base Currency'), popupCloseLinkText: tt('Done') }"
             >
                 <template #title>
                     <div class="no-padding no-margin">
@@ -30,12 +30,12 @@
                 class="currency-base-amount"
                 link="#" no-chevron
                 :class="baseAmountFontSizeClass"
-                :header="$t('Base Amount')"
+                :header="tt('Base Amount')"
                 :title="displayBaseAmount"
                 @click="showBaseAmountSheet = true"
             >
-                <number-pad-sheet :min-value="allowedMinAmount"
+                <number-pad-sheet :min-value="TRANSACTION_MIN_AMOUNT"
-                                  :max-value="allowedMaxAmount"
+                                  :max-value="TRANSACTION_MAX_AMOUNT"
                                   :currency="baseCurrency"
                                   v-model:show="showBaseAmountSheet"
                                   v-model="baseAmount"
@@ -44,12 +44,12 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical" v-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
-            <f7-list-item :title="$t('No exchange rates data')"></f7-list-item>
+            <f7-list-item :title="tt('No exchange rates data')"></f7-list-item>
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
             <f7-list-item swipeout
-                          :after="getConvertedAmount(exchangeRate)"
+                          :after="getFinalConvertedAmount(exchangeRate)"
                           :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
                 <template #title>
                     <div class="no-padding no-margin">
@@ -58,18 +58,18 @@
                     </div>
                 </template>
                 <f7-swipeout-actions right v-if="exchangeRate.currencyCode !== baseCurrency">
-                    <f7-swipeout-button color="primary" close :text="$t('Set as Base')" @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))"></f7-swipeout-button>
+                    <f7-swipeout-button color="primary" close :text="tt('Set as Base')" @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate))"></f7-swipeout-button>
                 </f7-swipeout-actions>
             </f7-list-item>
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
             <f7-list-item v-if="exchangeRatesDataUpdateTime">
-                <small>{{ $t('Last Updated') }}</small>
+                <small>{{ tt('Last Updated') }}</small>
                 <small>{{ exchangeRatesDataUpdateTime }}</small>
             </f7-list-item>
             <f7-list-item>
-                <small>{{ $t('Data source') }}</small>
+                <small>{{ tt('Data source') }}</small>
                 <small>
                     <f7-link external target="_blank" :href="exchangeRatesData.referenceUrl" v-if="exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</f7-link>
                     <span v-else-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
@@ -79,138 +79,110 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button :class="{ 'disabled': updating }" @click="update(null)">
+                <f7-actions-button :class="{ 'disabled': updating }" @click="update(undefined)">
-                    <span>{{ $t('Update') }}</span>
+                    <span>{{ tt('Update') }}</span>
                 </f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
     </f7-page>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { ref, computed } from 'vue';
-import { useSettingsStore } from '@/stores/setting.ts';
+
-import { useUserStore } from '@/stores/user.ts';
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import { useExchangeRatesPageBase } from '@/views/base/ExchangeRatesPageBase.ts';
+
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
-import { getConvertedAmount } from '@/lib/numeral.ts';
 
-export default {
+import type { LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';
-    data() {
-        const userStore = useUserStore();
 
-        return {
+const { tt, getCurrencyName, formatAmount, formatExchangeRateAmount } = useI18n();
-            baseCurrency: userStore.currentUserDefaultCurrency,
+const { showToast } = useI18nUIComponents();
-            baseAmount: 100,
+const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime, availableExchangeRates, getConvertedAmount, setAsBaseline } = useExchangeRatesPageBase();
-            updating: false,
+
-            showMoreActionSheet: false,
+const exchangeRatesStore = useExchangeRatesStore();
-            showBaseAmountSheet: false
+
-        };
+const updating = ref<boolean>(false);
-    },
+const showMoreActionSheet = ref<boolean>(false);
-    computed: {
+const showBaseAmountSheet = ref<boolean>(false);
-        ...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
+
-        exchangeRatesData() {
+const displayBaseAmount = computed<string>(() => formatAmount(baseAmount.value, baseCurrency.value));
-            return this.exchangeRatesStore.latestExchangeRates.data;
+const baseAmountFontSizeClass = computed<string>(() => {
-        },
+    if (baseAmount.value >= 100000000 || baseAmount.value <= -100000000) {
-        exchangeRatesDataUpdateTime() {
+        return 'ebk-small-amount';
-            const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
+    } else if (baseAmount.value >= 1000000 || baseAmount.value <= -1000000) {
-            return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
+        return 'ebk-normal-amount';
-        },
+    } else {
-        availableExchangeRates() {
+        return 'ebk-large-amount';
-            return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
+    }
-        },
+});
-        displayBaseAmount() {
+
-            return this.$locale.formatAmount(this.userStore, this.baseAmount, this.baseCurrency);
+function update(done?: () => void): void {
-        },
+    if (updating.value) {
-        baseAmountFontSizeClass() {
+        done?.();
-            if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
+        return;
-                return 'ebk-small-amount';
+    }
-            } else if (this.baseAmount >= 1000000 || this.baseAmount <= -1000000) {
+
-                return 'ebk-normal-amount';
+    updating.value = true;
-            } else {
+
-                return 'ebk-large-amount';
+    if (!done) {
-            }
+        showLoading();
-        },
+    }
-        allowedMinAmount() {
+
-            return TRANSACTION_MIN_AMOUNT;
+    exchangeRatesStore.getLatestExchangeRates({
-        },
+        silent: false,
-        allowedMaxAmount() {
+        force: true
-            return TRANSACTION_MAX_AMOUNT;
+    }).then(() => {
+        done?.();
+
+        updating.value = false;
+        hideLoading();
+
+        showToast('Exchange rates data has been updated');
+    }).catch(error => {
+        done?.();
+
+        updating.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
         }
-    },
+    });
-    created() {
+}
-        if (!this.exchangeRatesData || !this.exchangeRatesData.exchangeRates) {
+
-            return;
+function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate): string {
+    const fromExchangeRate = exchangeRatesStore.latestExchangeRateMap[baseCurrency.value];
+    const exchangeRateAmount = getConvertedAmount(baseAmount.value / 100, fromExchangeRate, toExchangeRate);
+
+    if (!exchangeRateAmount) {
+        return '0';
+    }
+
+    return formatExchangeRateAmount(exchangeRateAmount);
+}
+
+if (exchangeRatesData.value && exchangeRatesData.value.exchangeRates) {
+    const exchangeRates = exchangeRatesData.value.exchangeRates;
+    let hasBaseCurrency = false;
+
+    for (let i = 0; i < exchangeRates.length; i++) {
+        const exchangeRate = exchangeRates[i];
+        if (exchangeRate.currency === baseCurrency.value) {
+            hasBaseCurrency = true;
+            break;
         }
+    }
 
-        for (let i = 0; i < this.exchangeRatesData.exchangeRates.length; i++) {
+    if (!hasBaseCurrency) {
-            const exchangeRate = this.exchangeRatesData.exchangeRates[i];
+        showToast('There is no exchange rates data for your default currency');
-            if (exchangeRate.currency === this.baseCurrency) {
-                return;
-            }
-        }
-
-        this.$toast('There is no exchange rates data for your default currency');
-    },
-    methods: {
-        update(done) {
-            const self = this;
-
-            if (self.updating) {
-                if (done) {
-                    done();
-                }
-
-                return;
-            }
-
-            self.updating = true;
-
-            if (!done) {
-                self.$showLoading();
-            }
-
-            self.exchangeRatesStore.getLatestExchangeRates({
-                silent: false,
-                force: true
-            }).then(() => {
-                if (done) {
-                    done();
-                }
-
-                self.updating = false;
-                self.$hideLoading();
-
-                self.$toast('Exchange rates data has been updated');
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                self.updating = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getCurrencyName(currencyCode) {
-            return this.$locale.getCurrencyName(currencyCode);
-        },
-        getConvertedAmount(toExchangeRate) {
-            const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
-            const exchangeRateAmount = getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
-            return this.$locale.formatExchangeRateAmount(this.userStore, exchangeRateAmount);
-        },
-        setAsBaseline(currency, amount) {
-            this.baseCurrency = currency;
-            this.baseAmount = this.$locale.parseAmount(this.userStore, amount);
-        }
     }
 }
 </script>