Merge remote-tracking branch 'origin/develop' into chore/merge-privat…

…e-to-public-1708949618

src/app/components/collectibleCollectionGridItem/index.tsx

@@ -1,3 +1,4 @@
+import { Inscription, NonFungibleToken } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
@@ -48,12 +49,12 @@ const GridItemContainer = styled.button`
 `;
 
 interface Props {
-  item: any;
-  itemId: string;
+  item?: Inscription | NonFungibleToken;
+  itemId?: string;
   itemSubText?: string;
   itemSubTextColor?: Color;
   children: ReactNode;
-  onClick?: (collectible: any) => void;
+  onClick?: (item: Inscription | NonFungibleToken) => void;
 }
 export function CollectibleCollectionGridItem({
   item,
@@ -63,11 +64,12 @@ export function CollectibleCollectionGridItem({
   children,
   onClick,
 }: Props) {
-  const handleOnClick = onClick
-    ? () => {
-        onClick(item);
-      }
-    : undefined;
+  const handleOnClick =
+    onClick && item
+      ? () => {
+          onClick(item);
+        }
+      : undefined;
 
   return (
     <GridItemContainer onClick={handleOnClick}>

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

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { handleRetries, InvalidParamsError } from '@utils/query';
 
 /**
- * Get inscriptions details by collection id
+ * Get inscription details belonging to an address by ordinalId
  */
 const useAddressInscription = (ordinalId: string, ordinal?: Inscription | null) => {
   const { ordinalsAddress, network } = useWalletSelector();

src/app/screens/confirmOrdinalTransaction/index.tsx

@@ -1,9 +1,8 @@
 import { ConfirmOrdinalsTransactionState, LedgerTransactionType } from '@common/types/ledger';
 import ConfirmBtcTransactionComponent from '@components/confirmBtcTransactionComponent';
+import useAddressInscription from '@hooks/queries/ordinals/useAddressInscription';
 import { useGetUtxoOrdinalBundle } from '@hooks/queries/ordinals/useAddressRareSats';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useNftDataSelector from '@hooks/stores/useNftDataSelector';
-import useOrdinalDataReducer from '@hooks/stores/useOrdinalReducer';
 import useSatBundleDataReducer from '@hooks/stores/useSatBundleReducer';
 import useBtcClient from '@hooks/useBtcClient';
 import { useResetUserFlow } from '@hooks/useResetUserFlow';
@@ -14,7 +13,7 @@ import { useMutation } from '@tanstack/react-query';
 import { isLedgerAccount } from '@utils/helper';
 import BigNumber from 'bignumber.js';
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import SendLayout from '../../layouts/sendLayout';
 
@@ -53,9 +52,8 @@ function ConfirmOrdinalTransaction() {
   if (!BigNumber.isBigNumber(fee)) {
     fee = BigNumber(fee);
   }
-
-  const { selectedOrdinal } = useNftDataSelector();
-  const { setSelectedOrdinalDetails } = useOrdinalDataReducer();
+  const { id } = useParams();
+  const { data: selectedOrdinal } = useAddressInscription(id!);
   const { setSelectedSatBundleDetails } = useSatBundleDataReducer();
   const { refetch } = useBtcWalletData();
   const [currentFee, setCurrentFee] = useState(fee);
@@ -76,7 +74,6 @@ function ConfirmOrdinalTransaction() {
 
   useEffect(() => {
     if (btcTxBroadcastData) {
-      setSelectedOrdinalDetails(null);
       setSelectedSatBundleDetails(null);
       navigate('/tx-status', {
         state: {
@@ -95,7 +92,6 @@ function ConfirmOrdinalTransaction() {
 
   useEffect(() => {
     if (txError) {
-      setSelectedOrdinalDetails(null);
       setSelectedSatBundleDetails(null);
       navigate('/tx-status', {
         state: {

src/app/screens/nftCollection/index.tsx

@@ -128,7 +128,7 @@ function IsVisibleOrPlaceholder({ children }: PropsWithChildren) {
       {isVisible ? (
         children
       ) : (
-        <CollectibleCollectionGridItem item={{}} itemId="">
+        <CollectibleCollectionGridItem>
           <NftImage />
         </CollectibleCollectionGridItem>
       )}

src/app/screens/ordinalDetail/useOrdinalDetail.ts

@@ -1,8 +1,7 @@
+import useAddressInscription from '@hooks/queries/ordinals/useAddressInscription';
 import { useGetUtxoOrdinalBundle } from '@hooks/queries/ordinals/useAddressRareSats';
 import useInscriptionCollectionMarketData from '@hooks/queries/ordinals/useCollectionMarketData';
-import useAddressInscription from '@hooks/queries/ordinals/useInscription';
 import usePendingOrdinalTxs from '@hooks/queries/usePendingOrdinalTx';
-import useOrdinalDataReducer from '@hooks/stores/useOrdinalReducer';
 import useSatBundleDataReducer from '@hooks/stores/useSatBundleReducer';
 import useTextOrdinalContent from '@hooks/useTextOrdinalContent';
 import useWalletSelector from '@hooks/useWalletSelector';
@@ -28,7 +27,6 @@ export default function useOrdinalDetail() {
     ordinalData?.collection_id,
   );
 
-  const { setSelectedOrdinalDetails } = useOrdinalDataReducer();
   const { isPending, pendingTxHash } = usePendingOrdinalTxs(ordinalData?.tx_id);
   const textContent = useTextOrdinalContent(ordinalData!);
   const { setSelectedSatBundleDetails } = useSatBundleDataReducer();
@@ -54,14 +52,12 @@ export default function useOrdinalDetail() {
   );
 
   const handleBackButtonClick = () => {
-    setSelectedOrdinalDetails(null);
     if (ordinalData?.collection_id)
       navigate(`/nft-dashboard/ordinals-collection/${ordinalData?.collection_id}`);
     else navigate('/nft-dashboard?tab=inscriptions');
   };
 
   const openInGalleryView = async () => {
-    if (ordinalData) setSelectedOrdinalDetails(ordinalData);
     await chrome.tabs.create({
       url: chrome.runtime.getURL(`options.html#/nft-dashboard/ordinal-detail/${id}`),
     });
@@ -80,7 +76,6 @@ export default function useOrdinalDetail() {
       showAlert();
       return;
     }
-    if (ordinalData) setSelectedOrdinalDetails(ordinalData);
     if (isLedgerAccount(selectedAccount) && !isInOptions()) {
       await chrome.tabs.create({
         url: chrome.runtime.getURL(`options.html#/nft-dashboard/ordinal-detail/${id}/send-ordinal`),
@@ -105,7 +100,6 @@ export default function useOrdinalDetail() {
     if (!bundle || !ordinalData) {
       return;
     }
-    setSelectedOrdinalDetails(ordinalData);
     setSelectedSatBundleDetails(bundle);
     navigate('/nft-dashboard/rare-sats-bundle', { state: { source: 'OrdinalDetail' } });
   };

src/app/screens/ordinals/index.tsx

@@ -1,4 +1,3 @@
-import useOrdinalDataReducer from '@hooks/stores/useOrdinalReducer';
 import type { Inscription } from '@secretkeylabs/xverse-core';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -46,15 +45,8 @@ const GridItemContainer = styled.button((props) => ({
 function Ordinal({ asset, isGalleryOpen }: Props) {
   const navigate = useNavigate();
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
-  const { setSelectedOrdinalDetails } = useOrdinalDataReducer();
-
-  const handleOnClick = () => {
-    setSelectedOrdinalDetails(asset);
-    navigate(`/nft-dashboard/ordinal-detail/${asset.id}`);
-  };
-
   return (
-    <GridItemContainer onClick={handleOnClick}>
+    <GridItemContainer onClick={() => navigate(`/nft-dashboard/ordinal-detail/${asset.id}`)}>
       {isGalleryOpen ? (
         <NftImageContainer>
           <OrdinalImage isNftDashboard ordinal={asset} />

src/app/screens/ordinalsCollection/index.tsx

@@ -11,12 +11,10 @@ import WebGalleryButton from '@components/webGalleryButton';
 import WrenchErrorMessage from '@components/wrenchErrorMessage';
 import useAddressInscriptions from '@hooks/queries/ordinals/useAddressInscriptions';
 import useInscriptionCollectionMarketData from '@hooks/queries/ordinals/useCollectionMarketData';
-import useOrdinalDataReducer from '@hooks/stores/useOrdinalReducer';
 import { useResetUserFlow } from '@hooks/useResetUserFlow';
 import { ArrowLeft } from '@phosphor-icons/react';
 import { GridContainer } from '@screens/nftDashboard/collectiblesTabs';
 import OrdinalImage from '@screens/ordinals/ordinalImage';
-import { Inscription } from '@secretkeylabs/xverse-core';
 import { StyledHeading, StyledP } from '@ui-library/common.styled';
 import { EMPTY_LABEL } from '@utils/constants';
 import {
@@ -138,7 +136,6 @@ const StyledBarLoader = styled(BetterBarLoader)((props) => ({
 function OrdinalsCollection() {
   const { t } = useTranslation('translation', { keyPrefix: 'COLLECTIBLE_COLLECTION_SCREEN' });
   const navigate = useNavigate();
-  const { setSelectedOrdinalDetails } = useOrdinalDataReducer();
   const { id: collectionId } = useParams();
   const { data, error, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useAddressInscriptions(collectionId);
@@ -170,11 +167,6 @@ function OrdinalsCollection() {
     ? `${collectionMarketData?.floor_price?.toFixed(8)} BTC`
     : EMPTY_LABEL;
 
-  const handleOnClick = (item: Inscription) => {
-    setSelectedOrdinalDetails(item);
-    navigate(`/nft-dashboard/ordinal-detail/${item.id}`);
-  };
-
   return (
     <>
       {isGalleryOpen ? (
@@ -241,7 +233,7 @@ function OrdinalsCollection() {
                     itemId={getInscriptionsCollectionGridItemId(inscription)}
                     itemSubText={getInscriptionsCollectionGridItemSubText(inscription)}
                     itemSubTextColor={getInscriptionsCollectionGridItemSubTextColor(inscription)}
-                    onClick={handleOnClick}
+                    onClick={() => navigate(`/nft-dashboard/ordinal-detail/${inscription.id}`)}
                   >
                     <OrdinalImage ordinal={inscription} />
                   </CollectibleCollectionGridItem>

src/app/screens/rareSatsBundle/index.tsx

@@ -166,7 +166,7 @@ function RareSatsBundle() {
   const location = useLocation();
   const { source } = location.state || {};
   const { network, selectedAccount, ordinalsAddress } = useWalletSelector();
-  const { selectedSatBundle: bundle, selectedOrdinal } = useNftDataSelector();
+  const { selectedSatBundle: bundle } = useNftDataSelector();
   const { isPending, pendingTxHash } = usePendingOrdinalTxs(bundle?.txid);
   const [showSendOrdinalsAlert, setShowSendOrdinalsAlert] = useState<boolean>(false);
   const { setSelectedSatBundleDetails } = useSatBundleDataReducer();
@@ -219,11 +219,12 @@ function RareSatsBundle() {
     navigate('/nft-dashboard/supported-rarity-scale');
   };
 
-  const isEmpty = !bundle?.satRanges?.length;
+  const goBackText =
+    location.state && location.state.source === 'OrdinalDetail'
+      ? t('SEND.MOVE_TO_ASSET_DETAIL')
+      : t('NFT_DETAIL_SCREEN.MOVE_TO_ASSET_DETAIL');
 
-  const goBackText = selectedOrdinal?.id
-    ? t('SEND.MOVE_TO_ASSET_DETAIL')
-    : t('NFT_DETAIL_SCREEN.MOVE_TO_ASSET_DETAIL');
+  const isEmpty = !bundle?.satRanges?.length;
 
   return (
     <>

src/app/screens/restoreFunds/restoreOrdinals/index.tsx

@@ -1,7 +1,6 @@
 import ActionButton from '@components/button';
 import BottomTabBar from '@components/tabBar';
 import TopRow from '@components/topRow';
-import useOrdinalDataReducer from '@hooks/stores/useOrdinalReducer';
 import useBtcClient from '@hooks/useBtcClient';
 import useOrdinalsByAddress from '@hooks/useOrdinalsByAddress';
 import useSeedVault from '@hooks/useSeedVault';
@@ -10,7 +9,6 @@ import {
   BtcOrdinal,
   ErrorCodes,
   getBtcFiatEquivalent,
-  Inscription,
   SignedBtcTx,
   signOrdinalSendTransaction,
 } from '@secretkeylabs/xverse-core';
@@ -69,17 +67,19 @@ function RestoreOrdinals() {
   const { network, ordinalsAddress, btcAddress, selectedAccount, btcFiatRate } =
     useWalletSelector();
   const { getSeed } = useSeedVault();
-  const { setSelectedOrdinalDetails } = useOrdinalDataReducer();
   const navigate = useNavigate();
-  const { ordinals } = useOrdinalsByAddress(btcAddress);
+  const ordinalsQuery = useOrdinalsByAddress(btcAddress);
   const [error, setError] = useState('');
   const [transferringOrdinalId, setTransferringOrdinalId] = useState<string | null>(null);
   const location = useLocation();
   const btcClient = useBtcClient();
 
   const isRestoreFundFlow = location.state?.isRestoreFundFlow;
 
-  const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]);
+  const ordinalsUtxos = useMemo(
+    () => ordinalsQuery.ordinals?.map((ord) => ord.utxo),
+    [ordinalsQuery.ordinals],
+  );
 
   const {
     isLoading,
@@ -119,11 +119,10 @@ function RestoreOrdinals() {
     }
   };
 
-  const onClickTransfer = async (selectedOrdinal: BtcOrdinal, ordinalData: Inscription) => {
+  const onClickTransfer = async (selectedOrdinal: BtcOrdinal) => {
     setTransferringOrdinalId(selectedOrdinal.id);
     const seedPhrase = await getSeed();
     const signedTx = await mutateAsync({ ordinal: selectedOrdinal, seedPhrase });
-    setSelectedOrdinalDetails(ordinalData);
     navigate(`/nft-dashboard/confirm-ordinal-tx/${selectedOrdinal.id}`, {
       state: {
         signedTxHex: signedTx.signedTx,
@@ -138,42 +137,37 @@ function RestoreOrdinals() {
     });
   };
 
-  const showContent =
-    ordinals?.length === 0 ? (
-      <>
-        <RestoreFundTitle>{t('RESTORE_ORDINAL_SCREEN.NO_FUNDS')}</RestoreFundTitle>
-        <ButtonContainer>
-          <ActionButton text={t('RESTORE_ORDINAL_SCREEN.BACK')} onPress={handleOnCancelClick} />
-        </ButtonContainer>
-      </>
-    ) : (
-      <>
-        <RestoreFundTitle>{t('RESTORE_ORDINAL_SCREEN.DESCRIPTION')}</RestoreFundTitle>
-        {ordinals?.map((ordinal) => (
-          <OrdinalRow
-            isLoading={transferringOrdinalId === ordinal.id}
-            disableTransfer={isLoading}
-            handleOrdinalTransfer={onClickTransfer}
-            ordinal={ordinal}
-            key={ordinal.id}
-          />
-        ))}
-        <ErrorContainer>
-          <ErrorText>{error}</ErrorText>
-        </ErrorContainer>
-      </>
-    );
-
   return (
     <>
       <TopRow title={t('RESTORE_ORDINAL_SCREEN.TITLE')} onClick={handleOnCancelClick} />
       <Container>
-        {!ordinals ? (
+        {ordinalsQuery.isLoading ? (
           <LoaderContainer>
             <Spinner color="white" size={25} />
           </LoaderContainer>
+        ) : ordinalsQuery.ordinals?.length === 0 ? (
+          <>
+            <RestoreFundTitle>{t('RESTORE_ORDINAL_SCREEN.NO_FUNDS')}</RestoreFundTitle>
+            <ButtonContainer>
+              <ActionButton text={t('RESTORE_ORDINAL_SCREEN.BACK')} onPress={handleOnCancelClick} />
+            </ButtonContainer>
+          </>
         ) : (
-          showContent
+          <>
+            <RestoreFundTitle>{t('RESTORE_ORDINAL_SCREEN.DESCRIPTION')}</RestoreFundTitle>
+            {ordinalsQuery.ordinals?.map((ordinal) => (
+              <OrdinalRow
+                isLoading={transferringOrdinalId === ordinal.id}
+                disableTransfer={isLoading}
+                handleOrdinalTransfer={onClickTransfer}
+                ordinal={ordinal}
+                key={ordinal.id}
+              />
+            ))}
+            <ErrorContainer>
+              <ErrorText>{error}</ErrorText>
+            </ErrorContainer>
+          </>
         )}
       </Container>
       <BottomTabBar tab="nft" />