Balances can now be displayed in the desired currency. (#44)

* A Turkish language file has been added. Additionally, hardcoded values in some files have been made compatible with translations, and incorrect values have been corrected.

* Balances are now displayed in your desired currency. Users can select their preferred currency from Settings > General > Currencies. The language file has been updated.

* Tests fixed.

* update version

Signed-off-by: Ruben <rubdeivis@gmail.com>

---------

Signed-off-by: Ruben <rubdeivis@gmail.com>
Co-authored-by: Ruben <rubdeivis@gmail.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kuma-wallet",
   "displayName": "Kuma Wallet",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Kuma a cross-chain wallet that offers seamless management and transfer of assets between EVM and WASM chains.",
   "author": "Blockcoders Engineering <hello@blockcoders.io>",
   "license": "MIT",

src/constants/assets.ts

@@ -68,15 +68,15 @@ export const COINGECKO_ASSET_MAP: { [key: string]: string } = {
   ldot: "liquid-staking-dot",
   hdx: "hydradx",
   ausd: "acala-dollar",
+  matic:"matic-network",
+  eth:"ethereum",
   usdt: "tether",
   ibtc: "interbtc",
   intr: "Interlay",
   pha: "pha",
   unq: "unq",
   vdot: "voucher-dot",
-
   astr: "astar",
-
   xcdot: "polkadot",
   xchdx: "hydradx",
   xcausd: "acala-dollar",

src/i18n/en.json

@@ -130,7 +130,8 @@
     "title": "General",
     "languages": "Languages",
     "manage_networks": "Manage networks",
-    "show_testnets": "Show testnets"
+    "show_testnets": "Show testnets",
+    "currencies": "Currencies"
   },
   "advanced_settings": {
     "title": "Advanced"

src/i18n/es.json

@@ -130,7 +130,8 @@
     "title": "General",
     "languages": "Idiomas",
     "manage_networks": "Administrar redes",
-    "show_testnets": "Mostrar redes de prueba"
+    "show_testnets": "Mostrar redes de prueba",
+    "currencies": "Monedas"
   },
   "advanced_settings": {
     "title": "Avanzado"

src/i18n/it.json

@@ -130,7 +130,8 @@
     "title": "Generale",
     "languages": "Lingue",
     "manage_networks": "Gestire le reti",
-    "show_testnets": "Mostrare le testnets"
+    "show_testnets": "Mostrare le testnets",
+    "currencies": "Valute"
   },
   "advanced_settings": {
     "title": "Avanzate"

src/i18n/jp.json

@@ -130,7 +130,8 @@
     "title": "一般",
     "languages": "言語",
     "manage_networks": "ネットワーク管理",
-    "show_testnets": "テストネットを表示"
+    "show_testnets": "テストネットを表示",
+    "currencies": "通貨"
   },
   "advanced_settings": {
     "title": "高度な設定"

src/i18n/tr.json

@@ -130,7 +130,8 @@
     "title": "Genel",
     "languages": "Diller",
     "manage_networks": "Ağları yönet",
-    "show_testnets": "Test ağlarını göster"
+    "show_testnets": "Test ağlarını göster",
+    "currencies": "Para Birimi Dönüşümü"
   },
   "advanced_settings": {
     "title": "Gelişmiş"

src/pages/balance/components/TotalBalance.test.tsx

@@ -3,6 +3,8 @@ import { fireEvent, render, waitFor } from "@testing-library/react";
 import { I18nextProvider } from "react-i18next";
 import { TotalBalance } from "./TotalBalance";
 import { act } from "react-dom/test-utils";
+import {CHAINS} from "@src/constants/chains";
+import {AccountType} from "@src/accounts/types";
 
 const renderComponent = () => {
   return render(
@@ -25,6 +27,14 @@ describe("TotalBalance", () => {
             },
           ],
         },
+        loadAssets: vi.fn(),
+      }),
+      useNetworkContext: () => ({
+        state: {
+          selectedChain: CHAINS[0].chains[3],
+          type: AccountType.EVM,
+          api: null
+        },
       }),
       useAccountContext: () => ({
         state: {

src/pages/balance/components/TotalBalance.tsx

@@ -6,10 +6,10 @@ import {
   BsEyeFill,
 } from "react-icons/bs";
 import { useTranslation } from "react-i18next";
-import { formatAmountWithDecimals } from "@src/utils/assets";
+import { formatAmountWithDecimals,getCurrencyInfo } from "@src/utils/assets";
 import { useNavigate } from "react-router-dom";
 import { SEND, RECEIVE } from "@src/routes/paths";
-import { useAccountContext, useAssetContext } from "@src/providers";
+import {useAccountContext, useAssetContext, useNetworkContext} from "@src/providers";
 import { Button } from "@src/components/common";
 
 interface TotalBalanceProps {
@@ -24,6 +24,7 @@ export const TotalBalance: FC<TotalBalanceProps> = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [accountName, setAccountName] = useState("");
   const [showBalance, setShowBalance] = useState(true);
+  const [currencyLogo, setCurrencyLogo] = useState("$");
 
   const {
     state: { selectedAccount },
@@ -32,12 +33,17 @@ export const TotalBalance: FC<TotalBalanceProps> = () => {
 
   const {
     state: { assets },
+    loadAssets,
   } = useAssetContext();
+  const {
+    state: { api, selectedChain },
+  } = useNetworkContext();
 
-  const totalBalance = assets.reduce(
-    (total, item) => total + (item.amount || 0),
-    0
-  );
+  const updateAllAssets = async () => {
+    loadAssets({api, selectedAccount, selectedChain});
+  }
+
+  const totalBalance = assets.reduce((total, item) => total + (item.amount || 0), 0);
 
   const update = async () => {
     setIsEditing(false);
@@ -55,6 +61,9 @@ export const TotalBalance: FC<TotalBalanceProps> = () => {
     if (selectedAccount?.value?.name) {
       setAccountName(selectedAccount.value.name);
     }
+
+    setCurrencyLogo(getCurrencyInfo().logo);
+    updateAllAssets();
   }, [selectedAccount]);
 
   return (
@@ -82,7 +91,7 @@ export const TotalBalance: FC<TotalBalanceProps> = () => {
       </div>
       <div className="flex mb-4 gap-2 items-center justify-center">
         <div className="flex gap-2 items-center">
-          <p className="text-2xl">$</p>
+          <p className="text-2xl">{currencyLogo}</p>
           <p className="text-5xl" data-testid="balance">
             {showBalance ? (formatAmountWithDecimals(totalBalance, 5) || "0") : "***"}
           </p>

src/pages/settings/General.test.tsx

@@ -18,14 +18,25 @@ const getGeneralSettings = vi.fn().mockReturnValue([
       {},
     ],
   },
+  {
+    name:SettingKey.CURRENCY,
+    isCurrencyArray : () => true,
+    value: [
+      {
+        symbol: "usd",
+        name:"US Dollar ($)",
+      },
+      {},
+    ],
+  },
   {
     name: SettingKey.SHOW_TESTNETS,
     value: false,
   },
   {
     name: SettingKey.MANAGE_NETWORKS,
   },
-] as Setting[]);
+] as unknown as Setting[]);
 const updateSetting = vi.fn();
 const navigate = vi.fn();
 
@@ -52,7 +63,6 @@ describe("General", () => {
     Extension.updateSetting = updateSetting;
 
     const { getByTestId } = renderComponent();
-
     await waitFor(() => {
       expect(getByTestId("language-select")).toBeDefined();
     }, {

src/pages/settings/General.tsx

@@ -8,6 +8,7 @@ import Extension from "@src/Extension";
 import { useToast } from "@src/hooks";
 import Setting from "@src/storage/entities/settings/Setting";
 import {
+  Currency,
   Language,
   SettingKey,
   SettingType,
@@ -27,6 +28,7 @@ export const General = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [settings, setSettings] = useState([] as Setting[]);
   const [selectedLanguage, setSelectedLanguage] = useState("");
+  const [selectedCurrency, setSelectedCurrency] = useState("");
   const [showTestnets, setShowTestnets] = useState(false);
   const { showErrorToast } = useToast();
 
@@ -41,12 +43,15 @@ export const General = () => {
       setSettings(settings);
       const laguagesSetting = getSettingByName(settings, SettingKey.LANGUAGES)
         ?.value as Language[];
+      const currenciesSetting = getSettingByName(settings,SettingKey.CURRENCY)?.value as Currency[];
+
       const showTestnetsSetting = getSettingByName(
         settings,
         SettingKey.SHOW_TESTNETS
       )?.value as boolean;
       setSelectedLanguage(getSelectedLanguage(laguagesSetting));
       setShowTestnets(showTestnetsSetting);
+      setSelectedCurrency(getSelectedCurrency(currenciesSetting));
     } catch (error) {
       setSettings([]);
       captureError(error);
@@ -68,6 +73,13 @@ export const General = () => {
     return selectedLanguage?.lang || "en";
   };
 
+  const getSelectedCurrency = (currencies: Currency[]) => {
+    const selectedCurrency = currencies.find(
+        (currency) => currency.symbol === localStorage.getItem("currency")
+    );
+    return selectedCurrency?.symbol || "usd";
+  }
+
   const saveLanguage = async (language: string) => {
     try {
       await localStorage.setItem("language", language || "en");
@@ -80,6 +92,16 @@ export const General = () => {
     }
   };
 
+  const saveCurrency = async (currency: string) => {
+    try {
+      localStorage.setItem("currency", currency || "usd");
+      setSelectedCurrency(currency);
+    } catch (error) {
+      captureError(error);
+      showErrorToast(tCommon("failed_to_update_setting"));
+    }
+  }
+
   const changeShowTestnets = async () => {
     try {
       const showTestnetsSetting = settings.find(
@@ -136,6 +158,25 @@ export const General = () => {
                   </select>
                 </div>
               );
+            case SettingKey.CURRENCY:
+              return (
+                  <div key={index} className="flex flex-col gap-2">
+                    <p className="text-lg font-medium">{t("currencies")}</p>
+                    <select
+                    data-testid="currency-select"
+                    className="text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white"
+                    onChange={(e)=> saveCurrency(e.target.value)}
+                    value={selectedCurrency}
+                    >
+                      {setting.isCurrencyArray() &&
+                          (setting.value as Currency[]).map((option,index)=> (
+                              <option key={index} value={option.symbol}>
+                                {`${option.name}`}
+                              </option>
+                          ))}
+                    </select>
+                  </div>
+              );
             case SettingKey.MANAGE_NETWORKS:
               return (
                 <div

src/storage/entities/settings/CurrencySetting.test.ts

@@ -0,0 +1,23 @@
+import CurrencySetting from "./CurrencySetting";
+import {CURRENCIES} from "@utils/constants";
+import {expect} from "vitest";
+
+describe("CurrencySettings",()=>{
+    beforeAll(()=>{
+        vi.mock("./Settings.ts",()=> {
+            class Setting {}
+
+            return {
+                default:Setting,
+            };
+        });
+    });
+    it("should get default currency",()=>{
+        const result = CurrencySetting.getDefault();
+        expect(result).toEqual(CURRENCIES[0]);
+    })
+    it("should get all languages",()=>{
+        const result = CurrencySetting.getCurrencies();
+        expect(result).toEqual(CURRENCIES);
+    })
+})

src/storage/entities/settings/CurrencySetting.ts

@@ -0,0 +1,12 @@
+import {CURRENCIES} from "@src/utils/constants";
+import Setting from "./Setting";
+
+export default class CurrencySetting extends Setting {
+    static getDefault() {
+        return CURRENCIES[0];
+    }
+
+    static getCurrencies() {
+        return CURRENCIES;
+    }
+}

src/storage/entities/settings/Setting.test.ts

@@ -36,4 +36,8 @@ describe("Setting", () => {
     const setting = new Setting("test", [{ lang: "test" }] as SettingValue);
     expect(setting.isLanguageArray()).toBeTruthy();
   });
+  it("should return currency array", () => {
+    const setting = new Setting("test", [{ symbol: "test" }] as SettingValue);
+    expect(setting.isCurrencyArray()).toBeTruthy();
+  });
 });

src/storage/entities/settings/Setting.ts

@@ -1,4 +1,4 @@
-import { Language, SettingValue } from "./types";
+import { Language, SettingValue, Currency } from "./types";
 
 export default class Setting {
     value: SettingValue;
@@ -38,4 +38,11 @@ export default class Setting {
         return lang.length > 0 && lang[0].lang !== undefined;
       }
     }
+
+    isCurrencyArray() {
+        if (this.isObject()) {
+            const currencies = this.value as Currency[];
+            return currencies.length > 0 && currencies[0].symbol !== undefined;
+        }
+    }
   }

src/storage/entities/settings/Settings.ts

@@ -1,5 +1,6 @@
 import BaseEntity from "../BaseEntity";
 import LanguageSetting from "./LanguageSetting";
+import CurrencySetting from "./CurrencySetting";
 import Setting from "./Setting";
 import { SettingKey, SettingType, SettingValue } from "./types";
 
@@ -25,6 +26,8 @@ export default class Settings extends BaseEntity {
       SettingKey.LANGUAGES,
       LanguageSetting.getSupportedLanguages()
     );
+    settings.addToGeneral(SettingKey.CURRENCY,
+        CurrencySetting.getCurrencies());
     // this setting does not have a value (the true is just a placeholder)
     settings.addToGeneral(SettingKey.MANAGE_NETWORKS, true);
     settings.addToGeneral(SettingKey.SHOW_TESTNETS, false);