release: v0.22.0 (#626)

package.json

@@ -1,13 +1,13 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "2.0.0",
+    "@secretkeylabs/xverse-core": "2.2.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

src/app/components/confirmBtcTransactionComponent/index.tsx

@@ -15,9 +15,9 @@ import {
   getBtcFiatEquivalent,
   ResponseError,
   satsToBtc,
+  signBtcTransaction,
   UTXO,
 } from '@secretkeylabs/xverse-core';
-import { signBtcTransaction } from '@secretkeylabs/xverse-core/transactions';
 import {
   Recipient,
   SignedBtcTx,
@@ -82,7 +82,7 @@ const Button = styled.button((props) => ({
 }));
 
 const ButtonText = styled.div((props) => ({
-  ...props.theme.body_medium_m,
+  ...props.theme.typography.body_medium_m,
   color: props.theme.colors.white_0,
   textAlign: 'center',
 }));
@@ -100,15 +100,15 @@ const ErrorContainer = styled.div((props) => ({
 }));
 
 const ErrorText = styled.h1((props) => ({
-  ...props.theme.body_xs,
-  color: props.theme.colors.feedback.error,
+  ...props.theme.typography.body_s,
+  color: props.theme.colors.danger_medium,
 }));
 
 interface ReviewTransactionTitleProps {
   isOridnalTx: boolean;
 }
 const ReviewTransactionText = styled.h1<ReviewTransactionTitleProps>((props) => ({
-  ...props.theme.headline_s,
+  ...props.theme.typography.headline_s,
   color: props.theme.colors.white_0,
   marginBottom: props.theme.spacing(16),
   textAlign: props.isOridnalTx ? 'center' : 'left',
@@ -318,7 +318,7 @@ function ConfirmBtcTransactionComponent({
     const newFee = new BigNumber(modifiedFee);
     setCurrentFee(newFee);
     const seed = await getSeed();
-    setCurrentFeeRate(new BigNumber(feeRate));
+    setCurrentFeeRate(new BigNumber(feeRate ?? ''));
     if (ordinalTxUtxo) ordinalMutate({ txFee: modifiedFee, seedPhrase: seed });
     else if (isRestoreFundFlow) {
       mutateSignNonOrdinalBtcTransaction({ txFee: modifiedFee, seedPhrase: seed });
@@ -414,6 +414,7 @@ function ConfirmBtcTransactionComponent({
           ) : (
             recipients?.map((recipient, index) => (
               <RecipientComponent
+                key={recipient.address}
                 recipientIndex={index + 1}
                 address={recipient.address}
                 value={satsToBtc(recipient.amountSats).toString()}

src/app/components/sendForm/index.tsx

@@ -439,7 +439,7 @@ function SendForm({
   } else if (!hideDefaultWarning) {
     switch (currencyType) {
       case 'Ordinal':
-        displayedWarning = t('SEND_ORDINAL_WALLET_WARNING');
+        displayedWarning = t('MAKE_SURE_THE_RECIPIENT');
         break;
       case 'brc20-Ordinal':
         displayedWarning = t('SEND_BRC20_ORDINAL_WALLET_WARNING');

src/app/components/transactionSetting/editFee.tsx

@@ -229,7 +229,7 @@ function EditFee({
             btcAddress,
             nonOrdinalUtxos!,
             ordinalsAddress,
-            'Mainnet',
+            network.type,
             mode,
           );
           setFeeRateInput(selectedFeeRate?.toString() || '');
@@ -288,7 +288,7 @@ function EditFee({
             btcAddress,
             nonOrdinalUtxos!,
             ordinalsAddress,
-            'Mainnet',
+            network.type,
             feeMode,
             feeRateInput,
           );

src/app/components/transactionSetting/index.tsx

@@ -93,7 +93,7 @@ function TransactionSettingAlert({
   const [selectedOption, setSelectedOption] = useState<string>('standard');
   const [showNonceSettings, setShowNonceSettings] = useState(false);
   const [isLoading, setIsLoading] = useState(loading);
-  const { btcBalance, stxAvailableBalance } = useWalletSelector();
+  const { btcBalance, stxAvailableBalance, network } = useWalletSelector();
 
   const applyClickForStx = () => {
     if (stxAvailableBalance) {
@@ -129,7 +129,7 @@ function TransactionSettingAlert({
       return;
     }
     if (selectedOption === 'custom' && feeRate) {
-      const response = await isCustomFeesAllowed(feeRate.toString());
+      const response = await isCustomFeesAllowed(network.type, feeRate.toString());
       if (!response) {
         setError(t('TRANSACTION_SETTING.LOWER_THAN_MINIMUM'));
         return;

src/app/hooks/queries/ordinals/useAddressInscriptionCollections.ts

@@ -9,13 +9,13 @@ const PAGE_SIZE = 30;
  * Get collections belonging to an address
  */
 const useAddressInscriptionCollections = () => {
-  const { ordinalsAddress } = useWalletSelector();
+  const { ordinalsAddress, network } = useWalletSelector();
 
   const getCollectionsByAddress = async ({ pageParam = 0 }) => {
     if (!ordinalsAddress) {
       throw new InvalidParamsError('ordinalsAddress is required');
     }
-    return getCollections(ordinalsAddress, pageParam || 0, PAGE_SIZE);
+    return getCollections(network.type, ordinalsAddress, pageParam || 0, PAGE_SIZE);
   };
 
   return useInfiniteQuery(['inscription-collections', ordinalsAddress], getCollectionsByAddress, {

src/app/hooks/queries/ordinals/useAddressInscriptions.ts

@@ -9,13 +9,14 @@ const PAGE_SIZE = 30;
  * Get inscriptions belonging to an address, filtered by collection id
  */
 const useAddressInscriptions = (collectionId?: string) => {
-  const { ordinalsAddress } = useWalletSelector();
+  const { ordinalsAddress, network } = useWalletSelector();
 
   const getInscriptionsByAddress = async ({ pageParam = 0 }) => {
     if (!ordinalsAddress || !collectionId) {
       throw new InvalidParamsError('ordinalsAddress and collectionId are required');
     }
     return getCollectionSpecificInscriptions(
+      network.type,
       ordinalsAddress,
       collectionId,
       pageParam || 0, // offset,

src/app/hooks/queries/ordinals/useAddressRareSats.ts

@@ -1,20 +1,21 @@
 import useWalletSelector from '@hooks/useWalletSelector';
 import { getAddressUtxoOrdinalBundles, getUtxoOrdinalBundle } from '@secretkeylabs/xverse-core';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
-import { InvalidParamsError, handleRetries } from '@utils/query';
+import { handleRetries, InvalidParamsError } from '@utils/query';
 import { mapRareSatsAPIResponseToRareSats } from '@utils/rareSats';
 
 const PAGE_SIZE = 30;
 
 export const useAddressRareSats = () => {
-  const { ordinalsAddress } = useWalletSelector();
+  const { ordinalsAddress, network } = useWalletSelector();
 
   const getRareSatsByAddress = async ({ pageParam = 0 }) => {
     if (!ordinalsAddress) {
       throw new InvalidParamsError('ordinalsAddress is required');
     }
 
     const bundleResponse = await getAddressUtxoOrdinalBundles(
+      network.type,
       ordinalsAddress,
       pageParam,
       PAGE_SIZE,
@@ -40,13 +41,14 @@ export const useAddressRareSats = () => {
 };
 
 export const useGetUtxoOrdinalBundle = (output?: string, shouldMakeTheCall?: boolean) => {
+  const { network } = useWalletSelector();
   const getUtxoOrdinalBundleByOutput = async () => {
     if (!output) {
       throw new InvalidParamsError('output is required');
     }
 
     const [txid, vout] = output.split(':');
-    const bundleResponse = await getUtxoOrdinalBundle(txid, parseInt(vout, 10));
+    const bundleResponse = await getUtxoOrdinalBundle(network.type, txid, parseInt(vout, 10));
     return bundleResponse;
   };
 

src/app/hooks/queries/ordinals/useCollectionMarketData.ts

@@ -1,3 +1,4 @@
+import useWalletSelector from '@hooks/useWalletSelector';
 import { CollectionMarketDataResponse, getCollectionMarketData } from '@secretkeylabs/xverse-core';
 import { useQuery } from '@tanstack/react-query';
 import { handleRetries, InvalidParamsError } from '@utils/query';
@@ -6,11 +7,12 @@ import { handleRetries, InvalidParamsError } from '@utils/query';
  * Get inscription collection market data
  */
 const useInscriptionCollectionMarketData = (collectionId?: string | null) => {
+  const { network } = useWalletSelector();
   const collectionMarketData = async (): Promise<CollectionMarketDataResponse | undefined> => {
     if (!collectionId) {
       throw new InvalidParamsError('collectionId is required');
     }
-    return getCollectionMarketData(collectionId);
+    return getCollectionMarketData(network.type, collectionId);
   };
 
   return useQuery({

src/app/hooks/queries/ordinals/useInscription.ts

@@ -7,13 +7,13 @@ import { handleRetries, InvalidParamsError } from '@utils/query';
  * Get inscriptions details by collection id
  */
 const useAddressInscription = (ordinalId: string, ordinal: Inscription | null) => {
-  const { ordinalsAddress } = useWalletSelector();
+  const { ordinalsAddress, network } = useWalletSelector();
   const fetchOrdinals = async (): Promise<Inscription> => {
     if (ordinal) return ordinal;
     if (!ordinalsAddress || !ordinalId) {
       throw new InvalidParamsError('ordinalsAddress and ordinalId are required');
     }
-    return getInscription(ordinalsAddress, ordinalId);
+    return getInscription(network.type, ordinalsAddress, ordinalId);
   };
 
   return useQuery({

src/app/hooks/queries/useAppConfig.ts

@@ -9,9 +9,9 @@ const useAppConfig = () => {
   const dispatch = useDispatch();
 
   return useQuery({
-    queryKey: ['app-config'],
+    queryKey: ['app-config', network.type, btcApiUrl],
     queryFn: async () => {
-      const response = await getAppConfig();
+      const response = await getAppConfig(network.type);
       if (response.data.btcApiURL && network.type === 'Mainnet' && !btcApiUrl) {
         const updatedNetwork = { ...network, btcApiUrl: response.data.btcApiURL };
         dispatch(ChangeNetworkAction(updatedNetwork, networkAddress, ''));

src/app/hooks/queries/useBtcCoinsBalance.ts

@@ -7,11 +7,11 @@ import { useDispatch } from 'react-redux';
 
 const useBtcCoinBalance = () => {
   const dispatch = useDispatch();
-  const { ordinalsAddress } = useWalletSelector();
+  const { ordinalsAddress, network } = useWalletSelector();
 
   const fetchBrcCoinsBalances = async () => {
     try {
-      const list = await getOrdinalsFtBalance(ordinalsAddress);
+      const list = await getOrdinalsFtBalance(network.type, ordinalsAddress);
       dispatch(
         setBrcCoinsDataAction(
           list.map((brcToken) => ({ ...brcToken, ticker: brcToken.ticker?.toUpperCase() })),

src/app/hooks/queries/useCoinData.ts

@@ -1,16 +1,16 @@
+import useNetworkSelector from '@hooks/useNetwork';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { useDispatch } from 'react-redux';
-import { useQuery } from '@tanstack/react-query';
-import { CoinsResponse, FungibleToken } from '@secretkeylabs/xverse-core/types';
+import { getCoinMetaData } from '@secretkeylabs/xverse-core';
 import { getCoinsInfo, getFtData } from '@secretkeylabs/xverse-core/api';
-import useNetworkSelector from '@hooks/useNetwork';
+import { FungibleToken } from '@secretkeylabs/xverse-core/types';
 import { setCoinDataAction } from '@stores/wallet/actions/actionCreators';
-import { getCoinMetaData } from '@secretkeylabs/xverse-core';
-import { InvalidParamsError, handleRetries } from '@utils/query';
+import { useQuery } from '@tanstack/react-query';
+import { handleRetries, InvalidParamsError } from '@utils/query';
+import { useDispatch } from 'react-redux';
 
 export const useCoinsData = () => {
   const dispatch = useDispatch();
-  const { stxAddress, coinsList, fiatCurrency } = useWalletSelector();
+  const { stxAddress, coinsList, fiatCurrency, network } = useWalletSelector();
   const currentNetworkInstance = useNetworkSelector();
 
   const fetchCoinData = async () => {
@@ -46,12 +46,12 @@ export const useCoinsData = () => {
       fungibleTokenList.forEach((ft) => {
         contractids.push(ft.principal);
       });
-      let coinsReponse: CoinsResponse = await getCoinsInfo(contractids, fiatCurrency);
-      if (!coinsReponse) {
-        coinsReponse = await getCoinMetaData(contractids, currentNetworkInstance);
+      let coinsResponse = await getCoinsInfo(network.type, contractids, fiatCurrency);
+      if (!coinsResponse) {
+        coinsResponse = await getCoinMetaData(contractids, currentNetworkInstance);
       }
 
-      coinsReponse.forEach((coin) => {
+      coinsResponse.forEach((coin) => {
         if (!coin.name) {
           const coinName = coin.contract.split('.')[1];
           coin.name = coinName;
@@ -60,7 +60,7 @@ export const useCoinsData = () => {
 
       // update attributes of fungible token list
       fungibleTokenList.forEach((ft) => {
-        coinsReponse.forEach((coin) => {
+        coinsResponse!.forEach((coin) => {
           if (ft.principal === coin.contract) {
             ft.ticker = coin.ticker;
             ft.decimals = coin.decimals;
@@ -81,8 +81,8 @@ export const useCoinsData = () => {
         else unSupportedFts.push(ft);
       });
       const sortedFtList: FungibleToken[] = [...supportedFts, ...unSupportedFts];
-      dispatch(setCoinDataAction(sortedFtList, coinsReponse));
-      return { sortedFtList, coinsReponse };
+      dispatch(setCoinDataAction(sortedFtList, coinsResponse));
+      return { sortedFtList, coinsResponse };
     } catch (error: any) {
       return Promise.reject(error);
     }

src/app/hooks/queries/useCoinRates.ts

@@ -1,19 +1,19 @@
 import useWalletSelector from '@hooks/useWalletSelector';
-import { useDispatch } from 'react-redux';
-import { useQuery } from '@tanstack/react-query';
-import { setCoinRatesAction } from '@stores/wallet/actions/actionCreators';
 import { fetchBtcToCurrencyRate, fetchStxToBtcRate } from '@secretkeylabs/xverse-core/api';
+import { setCoinRatesAction } from '@stores/wallet/actions/actionCreators';
+import { useQuery } from '@tanstack/react-query';
+import { useDispatch } from 'react-redux';
 
 export const useCoinRates = () => {
   const dispatch = useDispatch();
-  const { fiatCurrency } = useWalletSelector();
+  const { fiatCurrency, network } = useWalletSelector();
 
   const fetchCoinRates = async () => {
     try {
-      const btcFiatRate = await fetchBtcToCurrencyRate({
+      const btcFiatRate = await fetchBtcToCurrencyRate(network.type, {
         fiatCurrency,
       });
-      const stxBtcRate = await fetchStxToBtcRate();
+      const stxBtcRate = await fetchStxToBtcRate(network.type);
       dispatch(setCoinRatesAction(stxBtcRate, btcFiatRate));
       return { stxBtcRate, btcFiatRate };
     } catch (e: any) {