diff --git a/src/app/hooks/useResetUserFlow.ts b/src/app/hooks/useResetUserFlow.ts index ede719bb3..1ab3a355e 100644 --- a/src/app/hooks/useResetUserFlow.ts +++ b/src/app/hooks/useResetUserFlow.ts @@ -12,8 +12,8 @@ const resetUserFlowChannel = 'resetUserFlow'; const userFlowConfig: Record = { '/send-btc': { resetTo: '/send-btc' }, '/confirm-btc-tx': { resetTo: '/send-btc' }, - '/send-brc20': { resetTo: '/send-brc20' }, - '/confirm-inscription-request': { resetTo: '/send-brc20' }, + '/send-brc20': { resetTo: '/account-list' }, + '/confirm-inscription-request': { resetTo: '/account-list' }, '/ordinal-detail': { resetTo: '/nft-dashboard' }, '/send-ordinal': { resetTo: '/nft-dashboard' }, '/confirm-ordinal-tx': { resetTo: '/nft-dashboard' }, diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx index 85736a3e7..cbc74809b 100644 --- a/src/app/screens/accountList/index.tsx +++ b/src/app/screens/accountList/index.tsx @@ -122,7 +122,7 @@ function AccountList(): JSX.Element { account.stxAddress === selectedAccount?.stxAddress; const handleBackButtonClick = () => { - navigate(-1); + navigate('/'); }; async function onCreateAccount() { diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx index c82e5d48e..fbe47ff31 100644 --- a/src/app/screens/nftDashboard/index.tsx +++ b/src/app/screens/nftDashboard/index.tsx @@ -18,9 +18,9 @@ import { InscriptionsList } from '@secretkeylabs/xverse-core/types'; import AlertMessage from '@components/alertMessage'; import useAddressInscriptions from '@hooks/queries/ordinals/useAddressInscriptions'; import useStacksCollectibles from '@hooks/queries/useStacksCollectibles'; +import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert'; import Nft from './nft'; import ReceiveNftModal from './receiveNft'; -import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert'; const Container = styled.div` display: flex; @@ -241,12 +241,12 @@ function NftDashboard() { totalCount = ordinalsLength + totalCount; } return totalCount; - }, [ordinals, nftsList]); + }, [nftsList, hasActivatedOrdinalsKey, ordinalsLength]); const isGalleryOpen: boolean = useMemo(() => document.documentElement.clientWidth > 360, []); useEffect(() => { - if (hasActivatedOrdinalsKey === undefined && ordinals && ordinalsLength) { + if (hasActivatedOrdinalsKey === undefined && ordinalsLength) { setShowActivateOrdinalsAlert(true); } }, [hasActivatedOrdinalsKey, ordinalsLength]); diff --git a/src/app/screens/nftDashboard/receiveNft/index.tsx b/src/app/screens/nftDashboard/receiveNft/index.tsx index e27581788..2b0972122 100644 --- a/src/app/screens/nftDashboard/receiveNft/index.tsx +++ b/src/app/screens/nftDashboard/receiveNft/index.tsx @@ -11,13 +11,6 @@ import { useState } from 'react'; import { isLedgerAccount } from '@utils/helper'; import ReceiveCardComponent from '../../../components/receiveCardComponent'; -interface Props { - visible: boolean; - onClose: () => void; - setOrdinalReceiveAlert: () => void; - isGalleryOpen: boolean; -} - const ColumnContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'column', @@ -55,9 +48,17 @@ const VerifyOrViewContainer = styled.div((props) => ({ })); const VerifyButtonContainer = styled.div((props) => ({ + minWidth: 300, marginBottom: props.theme.spacing(6), })); +interface Props { + visible: boolean; + onClose: () => void; + setOrdinalReceiveAlert: () => void; + isGalleryOpen: boolean; +} + function ReceiveNftModal({ visible, onClose, isGalleryOpen, setOrdinalReceiveAlert }: Props) { const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' }); const navigate = useNavigate(); diff --git a/src/app/screens/sendBrc20/brc20TransferInfo.tsx b/src/app/screens/sendBrc20/brc20TransferInfo.tsx index 58990687c..b3edddd4a 100644 --- a/src/app/screens/sendBrc20/brc20TransferInfo.tsx +++ b/src/app/screens/sendBrc20/brc20TransferInfo.tsx @@ -13,15 +13,18 @@ const InfoTitle = styled.h1((props) => ({ ...props.theme.headline_m, marginTop: props.theme.spacing(8), })); + const InfoSubtitle = styled.h2((props) => ({ ...props.theme.body_m, color: props.theme.colors.white[200], marginTop: props.theme.spacing(6), })); + const TransferStepTitle = styled.h3((props) => ({ ...props.theme.body_bold_m, marginTop: props.theme.spacing(20), })); + const TransferStep = styled.p((props) => ({ ...props.theme.body_m, color: props.theme.colors.white[200], @@ -34,17 +37,9 @@ function Brc20TransferInfo() { {t('SEND_INFO_TITLE')} {t('SEND_INFO_SUBTITLE')} - - 1. - {' '} - {t('SEND_STEP_1_TITLE')} - + 1. {t('SEND_STEP_1_TITLE')} {t('SEND_STEP_1')} - - 2. - {' '} - {t('SEND_STEP_2_TITLE')} - + 2. {t('SEND_STEP_2_TITLE')} {t('SEND_STEP_2')} ); diff --git a/src/app/screens/sendBrc20/index.tsx b/src/app/screens/sendBrc20/index.tsx index cf140ae0a..9b56abc59 100644 --- a/src/app/screens/sendBrc20/index.tsx +++ b/src/app/screens/sendBrc20/index.tsx @@ -18,12 +18,12 @@ import ActionButton from '@components/button'; import Brc20TransferForm from './brc20TransferForm'; import Brc20TransferInfo from './brc20TransferInfo'; -const BRC20TokenTagContainer = styled.div({ +const BRC20TokenTagContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'row', justifyContent: 'center', - marginTop: 6, -}); + marginTop: props.theme.spacing(3), +})); const BRC20TokenTag = styled.div((props) => ({ background: props.theme.colors.white[400], @@ -66,13 +66,15 @@ function SendBrc20Screen() { const [amountToSend, setAmountToSend] = useState(''); const [isCreatingOrder, setIsCreatingOrder] = useState(false); const [showForm, setShowForm] = useState(false); - const location = useLocation(); const coinName = location.search ? location.search.split('coinName=')[1] : undefined; const fungibleToken = location.state?.fungibleToken || brcCoinsList?.find((coin) => coin.name === coinName); + const isSendButtonEnabled = amountToSend !== '' && amountToSend <= fungibleToken.balance; + const isActionButtonEnabled = showForm ? isSendButtonEnabled : true; + const { subscribeToResetUserFlow } = useResetUserFlow(); useEffect(() => subscribeToResetUserFlow('/send-brc20'), []); @@ -96,13 +98,6 @@ function SendBrc20Screen() { } }; - const checkIfEnableButton = () => { - if (amountToSend !== '' || amountToSend <= fungibleToken.balance) { - return true; - } - return false; - }; - const handleInscribeTransferOrder = async () => { try { const order = await createBrc20TransferOrder( @@ -206,13 +201,14 @@ function SendBrc20Screen() { ) : ( )} - +