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 && ( - - alert - - {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 && ( + + )}