From b58d323f7d7efe6de27bb3fb7e478f5d9025570f Mon Sep 17 00:00:00 2001 From: Tim Man Date: Tue, 4 Jul 2023 16:51:39 +0800 Subject: [PATCH 1/2] feat: add a validation on send ordinal for ordinal is owned by account --- src/app/screens/sendOrdinal/index.tsx | 8 ++++++++ src/locales/en.json | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx index 140efed9f..205997457 100644 --- a/src/app/screens/sendOrdinal/index.tsx +++ b/src/app/screens/sendOrdinal/index.tsx @@ -21,6 +21,7 @@ import useNftDataSelector from '@hooks/stores/useNftDataSelector'; import useBtcClient from '@hooks/useBtcClient'; import useTextOrdinalContent from '@hooks/useTextOrdinalContent'; import { isLedgerAccount } from '@utils/helper'; +import { isOrdinalOwnedByAccount } from '@secretkeylabs/xverse-core/api'; const ScrollContainer = styled.div` display: flex; @@ -166,7 +167,14 @@ function SendOrdinal() { navigate(-1); }; + const activeAccountOwnsOrdinal = + selectedOrdinal && selectedAccount && isOrdinalOwnedByAccount(selectedOrdinal, selectedAccount); + function validateFields(associatedAddress: string): boolean { + if (!activeAccountOwnsOrdinal) { + setError(t('ERRORS.ORDINAL_NOT_OWNED')); + return false; + } if (!associatedAddress) { setError(t('ERRORS.ADDRESS_REQUIRED')); return false; diff --git a/src/locales/en.json b/src/locales/en.json index 2a06f5059..6c8753dd1 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -163,7 +163,8 @@ "INSUFFICIENT_BALANCE": "Insufficient balance", "MEMO_LENGTH": "Memo exceeds allowed length", "INSUFFICIENT_BALANCE_FEES": "Insufficient balance when including transaction fees", - "NFT_SEND_DETAIL": "This Nft is already sent and is in pending state" + "NFT_SEND_DETAIL": "This Nft is already sent and is in pending state", + "ORDINAL_NOT_OWNED": "This ordinal is not owned by your active account" }, "SEND_NFT": "Send NFT", "ASSOCIATED_BNS_DOMAIN": "Associated BNS Name", From 7646d4dfebeb4120622ca04f585896c52b19fff9 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Tue, 4 Jul 2023 17:18:19 +0800 Subject: [PATCH 2/2] feat: navigate the user back to nft dashboard upon account switch --- src/app/screens/confirmNftTransaction/index.tsx | 12 +++++++++++- src/app/screens/confirmOrdinalTransaction/index.tsx | 12 +++++++++++- src/app/screens/sendNft/index.tsx | 11 +++++++++++ src/app/screens/sendOrdinal/index.tsx | 12 +++++++++++- 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/app/screens/confirmNftTransaction/index.tsx b/src/app/screens/confirmNftTransaction/index.tsx index 711ba1833..ba855ad90 100644 --- a/src/app/screens/confirmNftTransaction/index.tsx +++ b/src/app/screens/confirmNftTransaction/index.tsx @@ -20,6 +20,8 @@ import useWalletSelector from '@hooks/useWalletSelector'; import useStxWalletData from '@hooks/queries/useStxWalletData'; import { isLedgerAccount } from '@utils/helper'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; +import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useDispatch } from 'react-redux'; const ScrollContainer = styled.div` display: flex; @@ -96,9 +98,10 @@ const ReviewTransactionText = styled.h1((props) => ({ function ConfirmNftTransaction() { const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; - const { selectedAccount } = useWalletSelector(); + const { selectedAccount, shouldResetUserFlow } = useWalletSelector(); const navigate = useNavigate(); const location = useLocation(); + const dispatch = useDispatch(); const { id } = useParams(); const { nftData } = useNftDataSelector(); const nftIdDetails = id!.split('::'); @@ -161,6 +164,13 @@ function ConfirmNftTransaction() { mutate({ signedTx: txs[0] }); }; + useEffect(() => { + if (shouldResetUserFlow) { + navigate('/nft-dashboard'); + dispatch(setShouldResetUserFlow(false)); + } + }, [shouldResetUserFlow]); + const handleOnCancelClick = () => { navigate(-1); }; diff --git a/src/app/screens/confirmOrdinalTransaction/index.tsx b/src/app/screens/confirmOrdinalTransaction/index.tsx index 080adf47c..3b5848c4a 100644 --- a/src/app/screens/confirmOrdinalTransaction/index.tsx +++ b/src/app/screens/confirmOrdinalTransaction/index.tsx @@ -16,6 +16,8 @@ import useBtcClient from '@hooks/useBtcClient'; import { isLedgerAccount } from '@utils/helper'; import useWalletSelector from '@hooks/useWalletSelector'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; +import { useDispatch } from 'react-redux'; +import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; const ScrollContainer = styled.div` display: flex; @@ -89,11 +91,12 @@ const NFtContainer = styled.div((props) => ({ function ConfirmOrdinalTransaction() { const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; - const { selectedAccount } = useWalletSelector(); + const { selectedAccount, shouldResetUserFlow } = useWalletSelector(); const navigate = useNavigate(); const btcClient = useBtcClient(); const [recipientAddress, setRecipientAddress] = useState(''); const location = useLocation(); + const dispatch = useDispatch(); const { fee, feePerVByte, signedTxHex, ordinalUtxo, } = location.state; @@ -154,6 +157,13 @@ function ConfirmOrdinalTransaction() { navigate(-1); }; + useEffect(() => { + if (shouldResetUserFlow) { + navigate('/nft-dashboard'); + dispatch(setShouldResetUserFlow(false)); + } + }, [shouldResetUserFlow]); + return ( <> {isGalleryOpen && ( diff --git a/src/app/screens/sendNft/index.tsx b/src/app/screens/sendNft/index.tsx index 849fc268f..8d50cb992 100644 --- a/src/app/screens/sendNft/index.tsx +++ b/src/app/screens/sendNft/index.tsx @@ -20,6 +20,8 @@ import useNftDataSelector from '@hooks/stores/useNftDataSelector'; import { NftData } from '@secretkeylabs/xverse-core/types/api/stacks/assets'; import AccountHeaderComponent from '@components/accountHeader'; import useNetworkSelector from '@hooks/useNetwork'; +import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useDispatch } from 'react-redux'; const ScrollContainer = styled.div` display: flex; @@ -100,6 +102,7 @@ function SendNft() { const navigate = useNavigate(); const { id } = useParams(); const location = useLocation(); + const dispatch = useDispatch(); let address: string | undefined; if (location.state) { @@ -123,6 +126,7 @@ function SendNft() { stxPublicKey, network, feeMultipliers, + shouldResetUserFlow, } = useWalletSelector(); const [error, setError] = useState(''); const [recipientAddress, setRecipientAddress] = useState(''); @@ -172,6 +176,13 @@ function SendNft() { } }, [data]); + useEffect(() => { + if (shouldResetUserFlow) { + navigate('/nft-dashboard'); + dispatch(setShouldResetUserFlow(false)); + } + }, [shouldResetUserFlow]); + const handleBackButtonClick = () => { navigate(-1); }; diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx index 205997457..965f22076 100644 --- a/src/app/screens/sendOrdinal/index.tsx +++ b/src/app/screens/sendOrdinal/index.tsx @@ -21,6 +21,8 @@ import useNftDataSelector from '@hooks/stores/useNftDataSelector'; import useBtcClient from '@hooks/useBtcClient'; import useTextOrdinalContent from '@hooks/useTextOrdinalContent'; import { isLedgerAccount } from '@utils/helper'; +import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useDispatch } from 'react-redux'; import { isOrdinalOwnedByAccount } from '@secretkeylabs/xverse-core/api'; const ScrollContainer = styled.div` @@ -103,8 +105,9 @@ function SendOrdinal() { const { selectedOrdinal } = useNftDataSelector(); const btcClient = useBtcClient(); const location = useLocation(); + const dispatch = useDispatch(); const { - network, ordinalsAddress, btcAddress, selectedAccount, seedPhrase, btcFiatRate, + network, ordinalsAddress, btcAddress, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow } = useWalletSelector(); const [ordinalUtxo, setOrdinalUtxo] = useState(undefined); const [error, setError] = useState(''); @@ -167,6 +170,13 @@ function SendOrdinal() { navigate(-1); }; + useEffect(() => { + if (shouldResetUserFlow) { + navigate('/nft-dashboard'); + dispatch(setShouldResetUserFlow(false)); + } + }, [shouldResetUserFlow]); + const activeAccountOwnsOrdinal = selectedOrdinal && selectedAccount && isOrdinalOwnedByAccount(selectedOrdinal, selectedAccount);