add new fiat currencies (#603)

* add new currencies

* add new flags and standardize to iso flag code

* use latest core

* use hook

* rename useCoinRates

* use latest core

* use correct core

src/app/components/confirmBtcTransaction/itemRow/amount.tsx

@@ -1,6 +1,6 @@
 import FiatAmountText from '@components/fiatAmountText';
 import TokenImage from '@components/tokenImage';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getBtcFiatEquivalent, satsToBtc } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
@@ -50,7 +50,7 @@ type Props = {
 
 export default function Amount({ amount }: Props) {
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
   const { t } = useTranslation('translation');
 
   if (!amount) return null;

src/app/components/confirmBtcTransaction/sections/feeSection.tsx

@@ -1,5 +1,5 @@
 import TransferFeeView from '@components/transferFeeView';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useBtcFeeRate from '@hooks/useBtcFeeRate';
 import useWalletSelector from '@hooks/useWalletSelector';
 import {
@@ -55,7 +55,7 @@ function FeeSection({
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
   const { data: recommendedFees } = useBtcFeeRate();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
 
   const { extractedTxSummary } = useTxSummaryContext();
 

src/app/components/confirmStxTransactionComponent/index.tsx

@@ -5,8 +5,8 @@ import BottomModal from '@components/bottomModal';
 import ActionButton from '@components/button';
 import LedgerConnectionView from '@components/ledger/connectLedgerView';
 import TransactionSettingAlert from '@components/transactionSetting';
-import useCoinRates from '@hooks/queries/useCoinRates';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useNetworkSelector from '@hooks/useNetwork';
 import useSeedVault from '@hooks/useSeedVault';
 import useSelectedAccount from '@hooks/useSelectedAccount';
@@ -96,7 +96,7 @@ function ConfirmStxTransactionComponent({
     keyPrefix: 'TRANSACTION_SETTING',
   });
   const selectedNetwork = useNetworkSelector();
-  const { stxBtcRate, btcFiatRate } = useCoinRates();
+  const { stxBtcRate, btcFiatRate } = useSupportedCoinRates();
   const { data: stxData } = useStxWalletData();
   const { getSeed } = useSeedVault();
   const [showFeeSettings, setShowFeeSettings] = useState(false);

src/app/components/recipientComponent/index.tsx

@@ -3,7 +3,7 @@ import WalletIcon from '@assets/img/transactions/wallet.svg';
 import { StyledFiatAmountText } from '@components/fiatAmountText';
 import TokenImage from '@components/tokenImage';
 import TransferDetailView from '@components/transferDetailView';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { CubeTransparent } from '@phosphor-icons/react';
@@ -155,7 +155,7 @@ function RecipientComponent({
   const [fiatAmount, setFiatAmount] = useState<string | undefined>('0');
   const { ordinalsAddress } = useSelectedAccount();
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
 
   useEffect(() => {
     setFiatAmount(

src/app/components/speedUpTransaction/btc.tsx

@@ -1,5 +1,5 @@
 import FiatAmountText from '@components/fiatAmountText';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getBtcFiatEquivalent } from '@secretkeylabs/xverse-core';
 import { EMPTY_LABEL } from '@utils/constants';
@@ -74,7 +74,7 @@ function SpeedUpBtcTransaction({
   const { t } = useTranslation('translation', { keyPrefix: 'SPEED_UP_TRANSACTION' });
   const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
 
   const theme = useTheme();
 

src/app/components/speedUpTransaction/stx.tsx

@@ -1,5 +1,5 @@
 import FiatAmountText from '@components/fiatAmountText';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getStxFiatEquivalent, stxToMicrostacks } from '@secretkeylabs/xverse-core';
 import { EMPTY_LABEL } from '@utils/constants';
@@ -73,7 +73,7 @@ function SpeedUpStxTransaction({
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'SPEED_UP_TRANSACTION' });
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const theme = useTheme();
 
   return (

src/app/components/tokenTile/index.tsx

@@ -2,8 +2,8 @@ import { BetterBarLoader } from '@components/barLoader';
 import { StyledFiatAmountText } from '@components/fiatAmountText';
 import TokenImage from '@components/tokenImage';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getFiatEquivalent, type FungibleToken } from '@secretkeylabs/xverse-core';
 import type { CurrencyTypes } from '@utils/constants';
@@ -119,7 +119,7 @@ function TokenTile({
   hideBalance = false,
 }: Props) {
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const { data: stxData } = useStxWalletData();
   const { data: btcBalance } = useBtcWalletData();
 

src/app/components/transactionSetting/editBtcFee.tsx

@@ -1,6 +1,6 @@
 import FiatAmountText from '@components/fiatAmountText';
 import useBtcClient from '@hooks/apiClients/useBtcClient';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useBtcFees from '@hooks/useBtcFees';
 import useDebounce from '@hooks/useDebounce';
 import useOrdinalsByAddress from '@hooks/useOrdinalsByAddress';
@@ -189,7 +189,7 @@ function EditBtcFee({
   const selectedAccount = useSelectedAccount();
   const { btcAddress, ordinalsAddress } = selectedAccount;
   const { network, fiatCurrency } = useWalletSelector();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
   const [totalFee, setTotalFee] = useState(fee);
   const [feeRateInput, setFeeRateInput] = useState(feeRate?.toString() ?? '');
   const inputRef = useRef<HTMLInputElement>(null);

src/app/components/transactionSetting/editStxFee.tsx

@@ -1,5 +1,5 @@
 import FiatAmountText from '@components/fiatAmountText';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getStxFiatEquivalent, stxToMicrostacks } from '@secretkeylabs/xverse-core';
 import BigNumber from 'bignumber.js';
@@ -129,7 +129,7 @@ function EditStxFee({
 }: Props) {
   const { t } = useTranslation('translation');
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const [totalFee, setTotalFee] = useState(fee);
   const [feeRateInput, setFeeRateInput] = useState(feeRate?.toString() ?? '');
   const inputRef = useRef<HTMLInputElement>(null);

src/app/components/transferFeeView/index.tsx

@@ -1,6 +1,6 @@
 import AmountWithInscriptionSatribute from '@components/confirmBtcTransaction/itemRow/amountWithInscriptionSatribute';
 import FiatAmountText from '@components/fiatAmountText';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import {
   btcTransaction,
@@ -71,7 +71,7 @@ function TransferFeeView({
   const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
 
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
 
   return (
     <Container>

src/app/hooks/queries/useAccountBalance.ts

@@ -1,6 +1,6 @@
 import useBtcClient from '@hooks/apiClients/useBtcClient';
 import useRunesApi from '@hooks/apiClients/useRunesApi';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useNetworkSelector from '@hooks/useNetwork';
 import useWalletSelector from '@hooks/useWalletSelector';
 import {
@@ -31,7 +31,7 @@ const useAccountBalance = () => {
     sip10ManageTokens,
     runesManageTokens,
   } = useWalletSelector();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const runesApi = useRunesApi();
   const dispatch = useDispatch();
   const queue = useRef<Account[]>([]);

src/app/hooks/queries/useCoinRates.ts → src/app/hooks/queries/useSupportedCoinRates.ts

@@ -1,50 +1,43 @@
+import useXverseApi from '@hooks/apiClients/useXverseApi';
 import useWalletSelector from '@hooks/useWalletSelector';
-import {
-  fetchBtcToCurrencyRate,
-  fetchStxToBtcRate,
-  type NetworkType,
-  type SupportedCurrency,
-} from '@secretkeylabs/xverse-core';
+import { type SupportedCurrency } from '@secretkeylabs/xverse-core';
 import { useQuery } from '@tanstack/react-query';
 
-const useGetRates = (fiatCurrency: SupportedCurrency, networkType: NetworkType) => {
+const useGetSupportedRates = (fiatCurrency: SupportedCurrency) => {
+  const xverseApi = useXverseApi();
   const fetchCoinRates = async () => {
     try {
-      const btcFiatRate = await fetchBtcToCurrencyRate(networkType, {
+      const btcFiatRate = await xverseApi.fetchBtcToCurrencyRate({
         fiatCurrency,
       });
-
       const btcUsdRate =
         fiatCurrency === 'USD'
           ? btcFiatRate
-          : await fetchBtcToCurrencyRate(networkType, {
+          : await xverseApi.fetchBtcToCurrencyRate({
               fiatCurrency: 'USD' as SupportedCurrency,
             });
-
-      const stxBtcRate = await fetchStxToBtcRate(networkType);
+      const stxBtcRate = await xverseApi.fetchStxToBtcRate();
       return { stxBtcRate, btcFiatRate, btcUsdRate };
     } catch (e: any) {
       return Promise.reject(e);
     }
   };
 
   return useQuery({
-    queryKey: ['coin_rates', fiatCurrency, networkType],
+    queryKey: ['coin_rates', fiatCurrency],
     queryFn: fetchCoinRates,
     staleTime: 5 * 60 * 1000, // 5 min
   });
 };
 
-const useCoinRates = () => {
-  const { fiatCurrency, network } = useWalletSelector();
-
-  const { data } = useGetRates(fiatCurrency, network.type);
-
+const useSupportedCoinRates = () => {
+  const { fiatCurrency } = useWalletSelector();
+  const { data } = useGetSupportedRates(fiatCurrency);
   const stxBtcRate = data?.stxBtcRate.toString() || '0';
   const btcFiatRate = data?.btcFiatRate.toString() || '0';
   const btcUsdRate = data?.btcUsdRate?.toString() || '0';
 
   return { stxBtcRate, btcFiatRate, btcUsdRate };
 };
 
-export default useCoinRates;
+export default useSupportedCoinRates;

src/app/screens/coinDashboard/coinHeader.tsx

@@ -9,8 +9,8 @@ import ActionButton from '@components/button';
 import SmallActionButton from '@components/smallActionButton';
 import TokenImage from '@components/tokenImage';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useHasFeature from '@hooks/useHasFeature';
 import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
@@ -61,7 +61,7 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
   const { fiatCurrency, network, selectedAccountType } = useWalletSelector();
   const { data: btcBalance } = useBtcWalletData();
   const { data: stxData } = useStxWalletData();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const navigate = useNavigate();
   const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   const [openReceiveModal, setOpenReceiveModal] = useState(false);

src/app/screens/confirmBrc20Transaction/index.tsx

@@ -2,7 +2,7 @@ import InfoContainer from '@components/infoContainer';
 import BottomBar from '@components/tabBar';
 import TopRow from '@components/topRow';
 import TransactionDetailComponent from '@components/transactionDetailComponent';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useBtcFeeRate from '@hooks/useBtcFeeRate';
 import useDebounce from '@hooks/useDebounce';
 import { useResetUserFlow } from '@hooks/useResetUserFlow';
@@ -53,7 +53,7 @@ function ConfirmBrc20Transaction() {
   const { network, fiatCurrency, feeMultipliers } = useWalletSelector();
   const selectedAccount = useSelectedAccount();
   const { btcAddress, ordinalsAddress } = selectedAccount;
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
   const navigate = useNavigate();
   const {
     recipientAddress,

src/app/screens/createInscription/index.tsx

@@ -28,8 +28,8 @@ import useWalletSelector from '@hooks/useWalletSelector';
 import { isLedgerAccount } from '@utils/helper';
 
 import useBtcClient from '@hooks/apiClients/useBtcClient';
-import useCoinRates from '@hooks/queries/useCoinRates';
 import useConfirmedBtcBalance from '@hooks/queries/useConfirmedBtcBalance';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useSelectedAccount from '@hooks/useSelectedAccount';
 import useTransactionContext from '@hooks/useTransactionContext';
 import Button from '@ui-library/button';
@@ -108,7 +108,7 @@ function CreateInscription() {
   const selectedAccount = useSelectedAccount();
   const { ordinalsAddress, btcAddress } = selectedAccount;
   const { network, fiatCurrency } = useWalletSelector();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
 
   const transactionContext = useTransactionContext();
 

src/app/screens/home/balanceCard/index.tsx

@@ -4,8 +4,8 @@ import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungib
 import { useVisibleSip10FungibleTokens } from '@hooks/queries/stx/useGetSip10FungibleTokens';
 import useAccountBalance from '@hooks/queries/useAccountBalance';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { currencySymbolMap } from '@secretkeylabs/xverse-core';
@@ -76,7 +76,7 @@ function BalanceCard(props: BalanceCardProps) {
   const { fiatCurrency, hideStx, accountBalances } = useWalletSelector();
   const { data: btcBalance } = useBtcWalletData();
   const { data: stxData } = useStxWalletData();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const { setAccountBalance } = useAccountBalance();
   const { isLoading, isRefetching } = props;
   const oldTotalBalance = accountBalances[selectedAccount.btcAddress];

src/app/screens/home/index.tsx

@@ -15,10 +15,10 @@ import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungib
 import { useVisibleSip10FungibleTokens } from '@hooks/queries/stx/useGetSip10FungibleTokens';
 import useAppConfig from '@hooks/queries/useAppConfig';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
 import useFeeMultipliers from '@hooks/queries/useFeeMultipliers';
 import useSpamTokens from '@hooks/queries/useSpamTokens';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useAvatarCleanup from '@hooks/useAvatarCleanup';
 import useHasFeature from '@hooks/useHasFeature';
 import useNotificationBanners from '@hooks/useNotificationBanners';
@@ -110,7 +110,7 @@ function Home() {
     useBtcWalletData();
   const { isInitialLoading: loadingStxWalletData, isRefetching: refetchingStxWalletData } =
     useStxWalletData();
-  const { btcFiatRate, stxBtcRate } = useCoinRates();
+  const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const { data: notificationBannersArr, isFetching: isFetchingNotificationBannersArr } =
     useNotificationBanners();
   const {

src/app/screens/listRune/index.tsx

@@ -5,7 +5,7 @@ import useRuneFloorPricePerMarketplaceQuery from '@hooks/queries/runes/useRuneFl
 import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungibleTokensQuery';
 import useRuneSellPsbtPerMarketplace from '@hooks/queries/runes/useRuneSellPsbtPerMarketplace';
 import useRuneUtxosQueryPerMarketplace from '@hooks/queries/runes/useRuneUtxosQueryPerMarketplace';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useHasFeature from '@hooks/useHasFeature';
 import { useResetUserFlow } from '@hooks/useResetUserFlow';
 import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
@@ -74,7 +74,7 @@ export default function ListRuneScreen() {
   const { visible: runesCoinsList } = useVisibleRuneFungibleTokens(false);
   const selectedRune = runesCoinsList.find((ft) => ft.principal === runeId);
   const { fiatCurrency } = useWalletSelector();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const locationFrom = params.get('from');

src/app/screens/listRune/setRunePriceItem.tsx

@@ -1,4 +1,4 @@
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { PencilSimple } from '@phosphor-icons/react';
 import FloorComparisonLabel from '@screens/listRune/floorComparisonLabel';
@@ -84,7 +84,7 @@ function SetRunePriceItem({
   handleShowCustomPriceModal,
 }: Props) {
   const { t } = useTranslation('translation');
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
   const { fiatCurrency } = useWalletSelector();
 
   return (

src/app/screens/sendBtc/amountSelector.tsx

@@ -1,5 +1,5 @@
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useBtcFeeRate from '@hooks/useBtcFeeRate';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getBtcFiatEquivalent } from '@secretkeylabs/xverse-core';
@@ -66,7 +66,7 @@ function AmountSelector({
 
   const { fiatCurrency } = useWalletSelector();
   const { data: btcBalance, isLoading: btcBalanceLoading } = useBtcWalletData();
-  const { btcFiatRate } = useCoinRates();
+  const { btcFiatRate } = useSupportedCoinRates();
 
   const { data: recommendedFees } = useBtcFeeRate();