diff --git a/src/app/hooks/useNonOrdinalUtxo.ts b/src/app/hooks/useNonOrdinalUtxo.ts
new file mode 100644
index 000000000..b531e9fab
--- /dev/null
+++ b/src/app/hooks/useNonOrdinalUtxo.ts
@@ -0,0 +1,36 @@
+import { getNonOrdinalUtxo } from '@secretkeylabs/xverse-core';
+import { UnspentOutput } from '@secretkeylabs/xverse-core/transactions/btc';
+import { useQuery } from '@tanstack/react-query';
+import { REFETCH_UNSPENT_UTXO_TIME } from '@utils/constants';
+import { getTimeForNonOrdinalTransferTransaction } from '@utils/localStorage';
+import useWalletSelector from './useWalletSelector';
+
+const useNonOrdinalUtxos = () => {
+ const {
+ network, ordinalsAddress,
+ } = useWalletSelector();
+
+ const fetchNonOrdinalUtxo = async () => {
+ const lastTransactionTime = await getTimeForNonOrdinalTransferTransaction(ordinalsAddress);
+ if (!lastTransactionTime) {
+ return getNonOrdinalUtxo(ordinalsAddress, network.type);
+ }
+ const diff = new Date().getTime() - Number(lastTransactionTime);
+ if (diff > REFETCH_UNSPENT_UTXO_TIME) {
+ return getNonOrdinalUtxo(ordinalsAddress, network.type);
+ }
+ return [] as UnspentOutput[];
+ };
+
+ const { data: unspentUtxos, isLoading } = useQuery({
+ keepPreviousData: false,
+ queryKey: [`getNonOrdinalsUtxo-${ordinalsAddress}`],
+ queryFn: fetchNonOrdinalUtxo,
+ });
+ return {
+ unspentUtxos,
+ isLoading,
+ };
+};
+
+export default useNonOrdinalUtxos;
diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx
index 2dca5b9e5..4a7eb7484 100644
--- a/src/app/routes/index.tsx
+++ b/src/app/routes/index.tsx
@@ -181,7 +181,7 @@ const router = createHashRouter([
element: ,
},
{
- path: 'nft-dashboard/restore-funds',
+ path: 'settings/restore-funds',
element: ,
},
{
diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx
index 2197b9cd7..fb88cc021 100644
--- a/src/app/screens/nftDashboard/index.tsx
+++ b/src/app/screens/nftDashboard/index.tsx
@@ -3,16 +3,14 @@ import { MoonLoader } from 'react-spinners';
import useWalletSelector from '@hooks/useWalletSelector';
import BottomTabBar from '@components/tabBar';
import { useTranslation } from 'react-i18next';
-import InfoIcon from '@assets/img/info.svg';
import SquaresFour from '@assets/img/nftDashboard/squares_four.svg';
import ArrowDownLeft from '@assets/img/dashboard/arrow_down_left.svg';
-import ShareNetwork from '@assets/img/nftDashboard/share_network.svg';
import ActionButton from '@components/button';
-import { getNfts, getNonOrdinalUtxo, getOrdinalsByAddress } from '@secretkeylabs/xverse-core/api';
+import { getNfts, getOrdinalsByAddress } from '@secretkeylabs/xverse-core/api';
import { useCallback, useEffect, useState } from 'react';
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
import BarLoader from '@components/barLoader';
-import { GAMMA_URL, LoaderSize, REFETCH_UNSPENT_UTXO_TIME } from '@utils/constants';
+import { GAMMA_URL, LoaderSize } from '@utils/constants';
import ShareDialog from '@components/shareNft';
import AccountHeaderComponent from '@components/accountHeader';
import useNetworkSelector from '@hooks/useNetwork';
@@ -21,9 +19,6 @@ import { ChangeActivateOrdinalsAction } from '@stores/wallet/actions/actionCreat
import { useDispatch } from 'react-redux';
import { BtcOrdinal, NftsListData } from '@secretkeylabs/xverse-core/types';
import AlertMessage from '@components/alertMessage';
-import { useNavigate } from 'react-router-dom';
-import { getTimeForNonOrdinalTransferTransaction } from '@utils/localStorage';
-import { UnspentOutput } from '@secretkeylabs/xverse-core/transactions/btc';
import Nft from './nft';
import ReceiveNftModal from './receiveNft';
@@ -131,45 +126,6 @@ const BottomBarContainer = styled.div({
marginTop: '5%',
});
-const WithdrawAlertContainer = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'row',
- borderRadius: 12,
- alignItems: 'flex-start',
- backgroundColor: 'transparent',
- padding: props.theme.spacing(8),
- border: '1px solid rgba(255, 255, 255, 0.2)',
- marginTop: 24,
-}));
-
-const TextContainer = styled.div((props) => ({
- marginLeft: props.theme.spacing(5),
- display: 'flex',
- flexDirection: 'column',
-}));
-
-const RedirectButton = styled.button((props) => ({
- ...props.theme.body_medium_m,
- background: 'transparent',
- display: 'flex',
- alignItems: 'flex-start',
- justifyContent: 'flex-start',
- marginTop: 4,
- color: props.theme.colors.white['0'],
-}));
-
-const SubText = styled.h1((props) => ({
- ...props.theme.body_xs,
- marginTop: props.theme.spacing(2),
- color: props.theme.colors.white['200'],
-}));
-
-const Text = styled.h1((props) => ({
- ...props.theme.body_m,
- color: props.theme.colors.white['200'],
- lineHeight: 1.4,
-}));
-
const CollectiblesHeadingText = styled.h1((props) => ({
...props.theme.headline_category_s,
color: props.theme.colors.white['200'],
@@ -231,42 +187,22 @@ const BarLoaderContainer = styled.div((props) => ({
function NftDashboard() {
const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
const selectedNetwork = useNetworkSelector();
- const { network } = useWalletSelector();
const { stxAddress, ordinalsAddress, hasActivatedOrdinalsKey } = useWalletSelector();
const [showShareNftOptions, setShowNftOptions] = useState(false);
const [openReceiveModal, setOpenReceiveModal] = useState(false);
const [showActivateOrdinalsAlert, setShowActivateOrdinalsAlert] = useState(false);
const dispatch = useDispatch();
- const navigate = useNavigate();
function fetchNfts({ pageParam = 0 }): Promise {
return getNfts(stxAddress, selectedNetwork, pageParam);
}
- const fetchNonOrdinalUtxo = async () => {
- const lastTransactionTime = await getTimeForNonOrdinalTransferTransaction(ordinalsAddress);
- if (!lastTransactionTime) {
- return getNonOrdinalUtxo(ordinalsAddress, network.type);
- }
- const diff = new Date().getTime() - Number(lastTransactionTime);
- if (diff > REFETCH_UNSPENT_UTXO_TIME) {
- return getNonOrdinalUtxo(ordinalsAddress, network.type);
- }
- return [] as UnspentOutput[];
- };
-
const fetchOrdinals = useCallback(async (): Promise => {
let response = await getOrdinalsByAddress(ordinalsAddress);
response = response.filter((ordinal) => ordinal.id !== undefined);
return response;
}, [ordinalsAddress]);
- const { data: unspentUtxos, refetch: refetchNonOrdinalUtxos } = useQuery({
- keepPreviousData: false,
- queryKey: [`getNonOrdinalsUtxo-${ordinalsAddress}`],
- queryFn: fetchNonOrdinalUtxo,
- });
-
const {
isLoading, data, fetchNextPage, isFetchingNextPage, hasNextPage, refetch,
} = useInfiniteQuery(
@@ -292,7 +228,6 @@ function NftDashboard() {
const refetchCollectibles = useCallback(async () => {
await refetch();
await fetchOrdinals();
- refetchNonOrdinalUtxos();
}, [refetch, fetchOrdinals]);
useEffect(() => {
@@ -374,14 +309,6 @@ function NftDashboard() {
setShowNftOptions(false);
};
- const onRestoreFundClick = () => {
- navigate('restore-funds', {
- state: {
- unspentUtxos,
- },
- });
- };
-
const onActivateOrdinalsAlertCrossPress = () => {
setShowActivateOrdinalsAlert(false);
};
@@ -455,15 +382,6 @@ function NftDashboard() {
)}
- {!isGalleryOpen && unspentUtxos && unspentUtxos.length > 0 && (
-
-
-
- {t('WITHDRAW_BTC_ALERT_TITLE')}
- {t('WITHDRAW_BTC_ALERT_DESCRIPTION')}
-
-
- )}
{isLoading ? (
diff --git a/src/app/screens/settings/index.tsx b/src/app/screens/settings/index.tsx
index 1c11aa911..67ba798de 100644
--- a/src/app/screens/settings/index.tsx
+++ b/src/app/screens/settings/index.tsx
@@ -5,15 +5,18 @@ import XverseLogo from '@assets/img/settings/logo.svg';
import ArrowIcon from '@assets/img/settings/arrow.svg';
import ArrowSquareOut from '@assets/img/arrow_square_out.svg';
import BottomBar from '@components/tabBar';
-import { PRIVACY_POLICY_LINK, TERMS_LINK, SUPPORT_LINK } from '@utils/constants';
+import {
+ PRIVACY_POLICY_LINK, TERMS_LINK, SUPPORT_LINK,
+} from '@utils/constants';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import PasswordInput from '@components/passwordInput';
import useWalletReducer from '@hooks/useWalletReducer';
import { useDispatch } from 'react-redux';
import { ChangeActivateOrdinalsAction } from '@stores/wallet/actions/actionCreators';
-import SettingComponent from './settingComponent';
+import useNonOrdinalUtxos from '@hooks/useNonOrdinalUtxo';
import ResetWalletPrompt from '../../components/resetWallet';
+import SettingComponent from './settingComponent';
declare const VERSION: string;
@@ -54,10 +57,16 @@ function Setting() {
const [showResetWalletDisplay, setShowResetWalletDisplay] = useState(false);
const [password, setPassword] = useState('');
const [error, setError] = useState('');
- const { fiatCurrency, network, hasActivatedOrdinalsKey } = useWalletSelector();
+ const {
+ fiatCurrency, network, hasActivatedOrdinalsKey,
+ } = useWalletSelector();
const navigate = useNavigate();
const dispatch = useDispatch();
const { unlockWallet, resetWallet } = useWalletReducer();
+ const {
+ unspentUtxos,
+ isLoading,
+ } = useNonOrdinalUtxos();
const openTermsOfService = () => {
window.open(TERMS_LINK);
@@ -113,6 +122,13 @@ function Setting() {
navigate('/');
};
+ const onRestoreFundClick = () => {
+ navigate('restore-funds', {
+ state: {
+ unspentUtxos,
+ },
+ });
+ };
const handlePasswordNextClick = async () => {
try {
await unlockWallet(password);
@@ -175,13 +191,21 @@ function Setting() {
showWarningTitle
/>
+ {!isLoading && unspentUtxos && unspentUtxos?.length > 0 && (
+
+ )}