From 0524ca2ca7cd6aee2cecfede8c391047be892434 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Thu, 6 Jul 2023 13:42:39 +0800 Subject: [PATCH 1/7] chore: commit sort order on package.json deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cbcee14d5..45ce1ba65 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,11 @@ "@stacks/connect": "^6.10.2", "@stacks/encryption": "4.3.5", "@stacks/stacks-blockchain-api-types": "^6.1.1", + "@stacks/transactions": "^4.3.8", "@tanstack/query-sync-storage-persister": "^4.29.1", "@tanstack/react-query": "^4.29.3", "@tanstack/react-query-devtools": "^4.29.3", "@tanstack/react-query-persist-client": "^4.29.3", - "@stacks/transactions": "^4.3.8", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", From 07889ab97a69851d362ff2df32008222b8f8493e Mon Sep 17 00:00:00 2001 From: Tim Man Date: Fri, 7 Jul 2023 10:55:03 +0800 Subject: [PATCH 2/7] fix: check open tabs for flows which need to be reset otherwise the user flow gets reset on the next start --- src/app/screens/accountList/index.tsx | 7 ++++++- src/app/utils/helper.ts | 20 +++++++++++++++++++- src/manifest.json | 2 +- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx index 0244cc13c..696753e22 100644 --- a/src/app/screens/accountList/index.tsx +++ b/src/app/screens/accountList/index.tsx @@ -12,6 +12,7 @@ import { Account } from '@secretkeylabs/xverse-core/types'; import useWalletSelector from '@hooks/useWalletSelector'; import useWalletReducer from '@hooks/useWalletReducer'; import React, { useMemo } from 'react'; +import { hasTabWhichRequiresReset } from '@utils/helper'; const Container = styled.div` display: flex; @@ -106,7 +107,11 @@ function AccountList(): JSX.Element { account.accountName ) ); - dispatch(setShouldResetUserFlow(true)); + (async function dispatchIfResetRequired() { + if (await hasTabWhichRequiresReset()) { + dispatch(setShouldResetUserFlow(true)); + } + })(); navigate('/'); }; diff --git a/src/app/utils/helper.ts b/src/app/utils/helper.ts index f8da72108..f18c682a3 100644 --- a/src/app/utils/helper.ts +++ b/src/app/utils/helper.ts @@ -162,4 +162,22 @@ export const isHardwareAccount = (account: Account | null): boolean => !!account export const isLedgerAccount = (account: Account | null): boolean => account?.accountType === 'ledger'; -export const isInOptions = (): boolean => !!location?.pathname?.match(/options.html$/); +export const isInOptions = (): boolean => !!window.location?.pathname?.match(/options.html$/); + +const userFlowConfig = [ + { matchPattern: '/send-btc', resetTo: '/send-btc' }, + { matchPattern: '/confirm-btc-tx', resetTo: '/send-btc' }, + { matchPattern: '/send-brc20', resetTo: '/send-brc20' }, + { matchPattern: '/confirm-inscription-request', resetTo: '/send-brc20' }, + { matchPattern: '/send-ordinal', resetTo: '/nft-dashboard' }, + { matchPattern: '/confirm-ordinal-tx', resetTo: '/nft-dashboard' }, + { matchPattern: '/send-nft', resetTo: '/nft-dashboard' }, + { matchPattern: '/confirm-nft-tx', resetTo: '/nft-dashboard' }, +]; + +export const hasTabWhichRequiresReset = async (): Promise => { + const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') }); + return !!optionsTabs?.some((tab) => + userFlowConfig.some(({ matchPattern }) => tab.url?.match(matchPattern)), + ); +}; diff --git a/src/manifest.json b/src/manifest.json index 8d8b1e0e9..980ebba79 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -19,7 +19,7 @@ "devtools_page": "devtools.html", "web_accessible_resources": [{ "resources": ["inpage.js"], "matches": ["*://*/*"] }], "host_permissions": ["*://*/*"], - "permissions": ["storage"], + "permissions": ["storage", "tabs"], "content_security_policy": { "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src 'none'; frame-ancestors 'none';" }, From b7aecac476294a23f9396586e045689b6bb68d31 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Thu, 6 Jul 2023 18:04:50 +0800 Subject: [PATCH 3/7] chore: prettier --- src/app/utils/helper.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/utils/helper.ts b/src/app/utils/helper.ts index f18c682a3..b2a8522f3 100644 --- a/src/app/utils/helper.ts +++ b/src/app/utils/helper.ts @@ -121,8 +121,9 @@ export function checkNftExists( ): boolean { const principal: string[] = nft?.fully_qualified_token_id?.split('::'); const transaction = pendingTransactions.find( - (tx) => tx.contractCall?.contract_id === principal[0] - && tx.contractCall.function_args[0].repr.substring(1) === nft.token_id.toString(), + (tx) => + tx.contractCall?.contract_id === principal[0] && + tx.contractCall.function_args[0].repr.substring(1) === nft.token_id.toString(), ); if (transaction) return true; return false; @@ -156,11 +157,14 @@ export async function isValidBtcApi(url: string, network: NetworkType) { throw new Error('Invalid URL'); } -export const getNetworkType = (stxNetwork) => (stxNetwork.chainId === ChainID.Mainnet ? 'Mainnet' : 'Testnet'); +export const getNetworkType = (stxNetwork) => + stxNetwork.chainId === ChainID.Mainnet ? 'Mainnet' : 'Testnet'; -export const isHardwareAccount = (account: Account | null): boolean => !!account?.accountType && account?.accountType !== 'software'; +export const isHardwareAccount = (account: Account | null): boolean => + !!account?.accountType && account?.accountType !== 'software'; -export const isLedgerAccount = (account: Account | null): boolean => account?.accountType === 'ledger'; +export const isLedgerAccount = (account: Account | null): boolean => + account?.accountType === 'ledger'; export const isInOptions = (): boolean => !!window.location?.pathname?.match(/options.html$/); From 29e8f54753bd07d947c6789bb6635827e59b93c1 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Thu, 6 Jul 2023 18:55:20 +0800 Subject: [PATCH 4/7] refactor: move reset user flow logic into custom hook --- src/app/hooks/useResetUserFlow.ts | 35 +++++++++++++++++++ src/app/screens/accountList/index.tsx | 2 +- .../screens/confirmBtcTransaction/index.tsx | 13 ++----- .../confirmInscriptionRequest/index.tsx | 10 +++++- .../screens/confirmNftTransaction/index.tsx | 9 ++--- .../confirmOrdinalTransaction/index.tsx | 9 ++--- src/app/screens/sendBrc20/index.tsx | 12 +++++-- src/app/screens/sendBtc/index.tsx | 10 +++--- src/app/screens/sendNft/index.tsx | 8 ++--- src/app/screens/sendOrdinal/index.tsx | 5 +-- src/app/utils/helper.ts | 18 ---------- 11 files changed, 74 insertions(+), 57 deletions(-) create mode 100644 src/app/hooks/useResetUserFlow.ts diff --git a/src/app/hooks/useResetUserFlow.ts b/src/app/hooks/useResetUserFlow.ts new file mode 100644 index 000000000..1f489efd0 --- /dev/null +++ b/src/app/hooks/useResetUserFlow.ts @@ -0,0 +1,35 @@ +import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; + +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-ordinal': { resetTo: '/nft-dashboard' }, + '/confirm-ordinal-tx': { resetTo: '/nft-dashboard' }, + '/send-nft': { resetTo: '/nft-dashboard' }, + '/confirm-nft-tx': { resetTo: '/nft-dashboard' }, +}; + +export const hasTabWhichRequiresReset = async (): Promise => { + const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') }); + return !!optionsTabs?.some((tab) => + Object.keys(userFlowConfig).some((matchPattern) => tab.url?.match(matchPattern)), + ); +}; + +export const useResetUserFlow = () => { + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const resetUserFlow = (path: keyof typeof userFlowConfig) => { + if (!userFlowConfig[path]) { + return; + } + navigate(userFlowConfig[path]?.resetTo); + dispatch(setShouldResetUserFlow(false)); + }; + return resetUserFlow; +}; diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx index 696753e22..14e823623 100644 --- a/src/app/screens/accountList/index.tsx +++ b/src/app/screens/accountList/index.tsx @@ -12,7 +12,7 @@ import { Account } from '@secretkeylabs/xverse-core/types'; import useWalletSelector from '@hooks/useWalletSelector'; import useWalletReducer from '@hooks/useWalletReducer'; import React, { useMemo } from 'react'; -import { hasTabWhichRequiresReset } from '@utils/helper'; +import { hasTabWhichRequiresReset } from '@hooks/useResetUserFlow'; const Container = styled.div` display: flex; diff --git a/src/app/screens/confirmBtcTransaction/index.tsx b/src/app/screens/confirmBtcTransaction/index.tsx index ae9f84f51..ce4ffb66e 100644 --- a/src/app/screens/confirmBtcTransaction/index.tsx +++ b/src/app/screens/confirmBtcTransaction/index.tsx @@ -17,8 +17,7 @@ import useBtcClient from '@hooks/useBtcClient'; import { isLedgerAccount } from '@utils/helper'; import BigNumber from 'bignumber.js'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; -import { useDispatch } from 'react-redux'; -import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const BottomBarContainer = styled.h1((props) => ({ marginTop: props.theme.spacing(5), @@ -41,7 +40,6 @@ function ConfirmBtcTransaction() { fee, amount, signedTxHex, recipient, isRestoreFundFlow, unspentUtxos, isBrc20TokenFlow, feePerVByte, } = location.state; - const dispatch = useDispatch(); const { isLoading, @@ -62,15 +60,10 @@ function ConfirmBtcTransaction() { }); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/send-btc', { - state: { - amount, - recipientAddress, - }, - }); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/confirm-btc-tx'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/confirmInscriptionRequest/index.tsx b/src/app/screens/confirmInscriptionRequest/index.tsx index cb9c42676..2297a48b9 100644 --- a/src/app/screens/confirmInscriptionRequest/index.tsx +++ b/src/app/screens/confirmInscriptionRequest/index.tsx @@ -28,6 +28,7 @@ import OrdinalsIcon from '@assets/img/nftDashboard/white_ordinals_icon.svg'; import SettingIcon from '@assets/img/dashboard/faders_horizontal.svg'; import { isLedgerAccount } from '@utils/helper'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const OuterContainer = styled.div` display: flex; @@ -137,7 +138,7 @@ function ConfirmInscriptionRequest() { feePerVByte, } = location.state; const { - btcAddress, network, selectedAccount, seedPhrase, btcFiatRate, + btcAddress, network, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow } = useWalletSelector(); const btcClient = useBtcClient(); const [signedTx, setSignedTx] = useState(''); @@ -152,6 +153,13 @@ function ConfirmInscriptionRequest() { const content = useMemo(() => textContent && JSON.parse(textContent), [textContent]); + const resetUserFlow = useResetUserFlow(); + useEffect(() => { + if (shouldResetUserFlow) { + resetUserFlow('/confirm-inscription-request'); + } + }, [shouldResetUserFlow]); + useEffect(() => { axios .get(brcContent, { diff --git a/src/app/screens/confirmNftTransaction/index.tsx b/src/app/screens/confirmNftTransaction/index.tsx index 16fa6f825..86489239a 100644 --- a/src/app/screens/confirmNftTransaction/index.tsx +++ b/src/app/screens/confirmNftTransaction/index.tsx @@ -5,7 +5,6 @@ import { useEffect } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { StacksTransaction } from '@secretkeylabs/xverse-core/types'; import { broadcastSignedTransaction } from '@secretkeylabs/xverse-core/transactions'; -import ArrowLeft from '@assets/img/dashboard/arrow_left.svg'; import BottomBar from '@components/tabBar'; import AssetIcon from '@assets/img/transactions/Assets.svg'; import ConfirmStxTransationComponent from '@components/confirmStxTransactionComponent'; @@ -20,8 +19,7 @@ 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'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -101,7 +99,6 @@ function ConfirmNftTransaction() { const { selectedAccount, shouldResetUserFlow } = useWalletSelector(); const navigate = useNavigate(); const location = useLocation(); - const dispatch = useDispatch(); const { id } = useParams(); const { nftData } = useNftDataSelector(); const nftIdDetails = id!.split('::'); @@ -164,10 +161,10 @@ function ConfirmNftTransaction() { mutate({ signedTx: txs[0] }); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/confirm-nft-tx'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/confirmOrdinalTransaction/index.tsx b/src/app/screens/confirmOrdinalTransaction/index.tsx index 3ba66fe4f..6265794d9 100644 --- a/src/app/screens/confirmOrdinalTransaction/index.tsx +++ b/src/app/screens/confirmOrdinalTransaction/index.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { useMutation } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import ArrowLeft from '@assets/img/dashboard/arrow_left.svg'; import BottomBar from '@components/tabBar'; import useNftDataSelector from '@hooks/stores/useNftDataSelector'; import AccountHeaderComponent from '@components/accountHeader'; @@ -16,8 +15,7 @@ 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'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -96,7 +94,6 @@ function ConfirmOrdinalTransaction() { const btcClient = useBtcClient(); const [recipientAddress, setRecipientAddress] = useState(''); const location = useLocation(); - const dispatch = useDispatch(); const { fee, feePerVByte, signedTxHex, ordinalUtxo, } = location.state; @@ -157,10 +154,10 @@ function ConfirmOrdinalTransaction() { navigate(-1); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/confirm-ordinal-tx'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/sendBrc20/index.tsx b/src/app/screens/sendBrc20/index.tsx index 03c105f0f..e50957dbe 100644 --- a/src/app/screens/sendBrc20/index.tsx +++ b/src/app/screens/sendBrc20/index.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import BigNumber from 'bignumber.js'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; import { @@ -10,6 +10,7 @@ import { ErrorCodes, } from '@secretkeylabs/xverse-core'; import { Recipient } from '@secretkeylabs/xverse-core/transactions/btc'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; import useWalletSelector from '@hooks/useWalletSelector'; import TopRow from '@components/topRow'; import BottomBar from '@components/tabBar'; @@ -53,7 +54,7 @@ function SendBrc20Screen() { const { t } = useTranslation('translation'); const navigate = useNavigate(); const { - btcAddress, ordinalsAddress, selectedAccount, seedPhrase, network, btcFiatRate, brcCoinsList, + btcAddress, ordinalsAddress, selectedAccount, seedPhrase, network, btcFiatRate, brcCoinsList, shouldResetUserFlow } = useWalletSelector(); const [amountError, setAmountError] = useState(''); const [amountToSend, setAmountToSend] = useState(''); @@ -65,6 +66,13 @@ function SendBrc20Screen() { const coinName = location.search ? location.search.split('coinName=')[1] : undefined; const fungibleToken = location.state?.fungibleToken || brcCoinsList?.find((coin) => coin.name === coinName); + const resetUserFlow = useResetUserFlow(); + useEffect(() => { + if (shouldResetUserFlow) { + resetUserFlow('/send-brc20'); + } + }, [shouldResetUserFlow]); + const handleBackButtonClick = () => { if (showForm) { setAmountError(''); diff --git a/src/app/screens/sendBtc/index.tsx b/src/app/screens/sendBtc/index.tsx index 67079de47..09d20be8a 100644 --- a/src/app/screens/sendBtc/index.tsx +++ b/src/app/screens/sendBtc/index.tsx @@ -2,7 +2,7 @@ import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useMutation } from '@tanstack/react-query'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import { useLocation, useNavigate } from 'react-router-dom'; import SendForm from '@components/sendForm'; import TopRow from '@components/topRow'; @@ -15,7 +15,7 @@ import { BITCOIN_DUST_AMOUNT_SATS } from '@utils/constants'; import { Recipient, SignedBtcTx } from '@secretkeylabs/xverse-core/transactions/btc'; import { ErrorCodes, ResponseError } from '@secretkeylabs/xverse-core'; import { isInOptions } from '@utils/helper'; -import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; function SendBtcScreen() { const location = useLocation(); @@ -40,7 +40,6 @@ function SendBtcScreen() { shouldResetUserFlow, } = useSelector((state: StoreState) => state.walletState); const { t } = useTranslation('translation', { keyPrefix: 'SEND' }); - const dispatch = useDispatch(); const navigate = useNavigate(); const { @@ -81,11 +80,10 @@ function SendBtcScreen() { } }, [data]); + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - setAmount(''); - setRecipientAddress(''); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/send-btc'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/sendNft/index.tsx b/src/app/screens/sendNft/index.tsx index 8d50cb992..49686cd65 100644 --- a/src/app/screens/sendNft/index.tsx +++ b/src/app/screens/sendNft/index.tsx @@ -20,8 +20,7 @@ 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'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -102,7 +101,6 @@ function SendNft() { const navigate = useNavigate(); const { id } = useParams(); const location = useLocation(); - const dispatch = useDispatch(); let address: string | undefined; if (location.state) { @@ -176,10 +174,10 @@ function SendNft() { } }, [data]); + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/send-nft'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx index 3f0108297..558975db5 100644 --- a/src/app/screens/sendOrdinal/index.tsx +++ b/src/app/screens/sendOrdinal/index.tsx @@ -24,6 +24,7 @@ import { isLedgerAccount } from '@utils/helper'; import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; import { useDispatch } from 'react-redux'; import { isOrdinalOwnedByAccount } from '@secretkeylabs/xverse-core/api'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -170,10 +171,10 @@ function SendOrdinal() { navigate(-1); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/send-ordinal'); } }, [shouldResetUserFlow]); diff --git a/src/app/utils/helper.ts b/src/app/utils/helper.ts index b2a8522f3..cfa93438f 100644 --- a/src/app/utils/helper.ts +++ b/src/app/utils/helper.ts @@ -167,21 +167,3 @@ export const isLedgerAccount = (account: Account | null): boolean => account?.accountType === 'ledger'; export const isInOptions = (): boolean => !!window.location?.pathname?.match(/options.html$/); - -const userFlowConfig = [ - { matchPattern: '/send-btc', resetTo: '/send-btc' }, - { matchPattern: '/confirm-btc-tx', resetTo: '/send-btc' }, - { matchPattern: '/send-brc20', resetTo: '/send-brc20' }, - { matchPattern: '/confirm-inscription-request', resetTo: '/send-brc20' }, - { matchPattern: '/send-ordinal', resetTo: '/nft-dashboard' }, - { matchPattern: '/confirm-ordinal-tx', resetTo: '/nft-dashboard' }, - { matchPattern: '/send-nft', resetTo: '/nft-dashboard' }, - { matchPattern: '/confirm-nft-tx', resetTo: '/nft-dashboard' }, -]; - -export const hasTabWhichRequiresReset = async (): Promise => { - const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') }); - return !!optionsTabs?.some((tab) => - userFlowConfig.some(({ matchPattern }) => tab.url?.match(matchPattern)), - ); -}; From 4e9bcef9f835dde6a30c0d8d3e0f08a657f1b59c Mon Sep 17 00:00:00 2001 From: Tim Man Date: Thu, 6 Jul 2023 19:09:57 +0800 Subject: [PATCH 5/7] fix: include ordinal-detail and nft-detail screens in reset user flow config --- src/app/hooks/useResetUserFlow.ts | 2 ++ src/app/screens/nftDetail/index.tsx | 10 +++++++++- src/app/screens/ordinalDetail/index.tsx | 10 +++++++++- src/app/screens/sendOrdinal/index.tsx | 3 --- 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/app/hooks/useResetUserFlow.ts b/src/app/hooks/useResetUserFlow.ts index 1f489efd0..0411fa983 100644 --- a/src/app/hooks/useResetUserFlow.ts +++ b/src/app/hooks/useResetUserFlow.ts @@ -7,8 +7,10 @@ const userFlowConfig: Record = { '/confirm-btc-tx': { resetTo: '/send-btc' }, '/send-brc20': { resetTo: '/send-brc20' }, '/confirm-inscription-request': { resetTo: '/send-brc20' }, + '/ordinal-detail': { resetTo: '/nft-dashboard' }, '/send-ordinal': { resetTo: '/nft-dashboard' }, '/confirm-ordinal-tx': { resetTo: '/nft-dashboard' }, + '/nft-detail': { resetTo: '/nft-dashboard' }, '/send-nft': { resetTo: '/nft-dashboard' }, '/confirm-nft-tx': { resetTo: '/nft-dashboard' }, }; diff --git a/src/app/screens/nftDetail/index.tsx b/src/app/screens/nftDetail/index.tsx index d450caa4e..484609295 100644 --- a/src/app/screens/nftDetail/index.tsx +++ b/src/app/screens/nftDetail/index.tsx @@ -26,6 +26,7 @@ import AccountHeaderComponent from '@components/accountHeader'; import SmallActionButton from '@components/smallActionButton'; import NftAttribute from './nftAttribute'; import DescriptionTile from './descriptionTile'; +import {useResetUserFlow} from '@hooks/useResetUserFlow'; const Container = styled.div` display: flex; @@ -247,7 +248,7 @@ const LoaderContainer = styled.div({ function NftDetailScreen() { const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' }); const navigate = useNavigate(); - const { stxAddress, selectedAccount } = useWalletSelector(); + const { stxAddress, selectedAccount, shouldResetUserFlow } = useWalletSelector(); const { id } = useParams(); const nftIdDetails = id!.split('::'); const { nftData } = useNftDataSelector(); @@ -272,6 +273,13 @@ function NftDetailScreen() { const [showShareNftOptions, setShowNftOptions] = useState(false); const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; + const resetUserFlow = useResetUserFlow(); + useEffect(() => { + if (shouldResetUserFlow) { + resetUserFlow('/nft-detail'); + } + }, [shouldResetUserFlow]); + useEffect(() => { const data = nftData.find((nftItem) => Number(nftItem?.token_id) === Number(nftIdDetails[2].slice(1))); if (!data) { diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx index 3f32148ab..d64b2f80c 100644 --- a/src/app/screens/ordinalDetail/index.tsx +++ b/src/app/screens/ordinalDetail/index.tsx @@ -23,6 +23,7 @@ import { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import styled, { useTheme } from 'styled-components'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; import OrdinalAttributeComponent from './ordinalAttributeComponent'; const Container = styled.div` @@ -270,7 +271,7 @@ const DetailSection = styled.div((props) => ({ function OrdinalDetailScreen() { const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' }); const navigate = useNavigate(); - const { ordinalsAddress, network, selectedAccount } = useWalletSelector(); + const { ordinalsAddress, network, selectedAccount, shouldResetUserFlow } = useWalletSelector(); const { selectedOrdinal } = useNftDataSelector(); const { setSelectedOrdinalDetails } = useOrdinalDataReducer(); const { isPending, pendingTxHash } = usePendingOrdinalTxs(selectedOrdinal?.tx_id); @@ -286,6 +287,13 @@ function OrdinalDetailScreen() { [selectedOrdinal], ); + const resetUserFlow = useResetUserFlow(); + useEffect(() => { + if (shouldResetUserFlow) { + resetUserFlow('/ordinal-detail'); + } + }, [shouldResetUserFlow]); + useEffect(() => { if (selectedOrdinal) { if ( diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx index 558975db5..7bfe57b4e 100644 --- a/src/app/screens/sendOrdinal/index.tsx +++ b/src/app/screens/sendOrdinal/index.tsx @@ -21,8 +21,6 @@ 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'; import { useResetUserFlow } from '@hooks/useResetUserFlow'; @@ -106,7 +104,6 @@ function SendOrdinal() { const { selectedOrdinal } = useNftDataSelector(); const btcClient = useBtcClient(); const location = useLocation(); - const dispatch = useDispatch(); const { network, ordinalsAddress, btcAddress, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow } = useWalletSelector(); From 4b67741e0dd22165a844a1d11309ec8396c8b634 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Fri, 7 Jul 2023 11:03:20 +0800 Subject: [PATCH 6/7] docs: add local dev steps to README --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 15e1f2482..7797cffe6 100644 --- a/README.md +++ b/README.md @@ -19,3 +19,15 @@ 2. Check `Developer mode` 3. Click on `Load unpacked extension` 4. Select the `build` folder. + +### Developing with local dependencies + +Use esm build, and reference your filesystem in package.json + +For example, if your xverse-core and xverse-web-extension are in same directory, +make or pull your local changes to xverse-core, then: + +``` +cd ../xverse-core && npm i && npm run build:esm && \ +cd $OLDPWD && npm i --legacy-peer-deps @secretkeylabs/xverse-core@../xverse-core && npm start +``` From 1100da5766ea0d6b79e7726a8ed75ff3185e6202 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Fri, 7 Jul 2023 12:43:11 +0800 Subject: [PATCH 7/7] refactor: use broadcast channel instead of shared redux state and remove extra "tabs" permission --- src/app/hooks/useResetUserFlow.ts | 63 +++++++++++++++---- src/app/screens/accountList/index.tsx | 16 ++--- .../screens/confirmBtcTransaction/index.tsx | 10 +-- .../confirmInscriptionRequest/index.tsx | 10 +-- .../screens/confirmNftTransaction/index.tsx | 10 +-- .../confirmOrdinalTransaction/index.tsx | 10 +-- src/app/screens/nftDetail/index.tsx | 12 ++-- src/app/screens/ordinalDetail/index.tsx | 10 +-- src/app/screens/sendBrc20/index.tsx | 10 +-- src/app/screens/sendBtc/index.tsx | 9 +-- src/app/screens/sendNft/index.tsx | 9 +-- src/app/screens/sendOrdinal/index.tsx | 11 ++-- src/app/stores/index.ts | 1 - .../stores/wallet/actions/actionCreators.ts | 9 --- src/app/stores/wallet/actions/types.ts | 7 --- src/app/stores/wallet/reducer.ts | 7 --- src/manifest.json | 2 +- 17 files changed, 89 insertions(+), 117 deletions(-) diff --git a/src/app/hooks/useResetUserFlow.ts b/src/app/hooks/useResetUserFlow.ts index 0411fa983..ede719bb3 100644 --- a/src/app/hooks/useResetUserFlow.ts +++ b/src/app/hooks/useResetUserFlow.ts @@ -1,7 +1,14 @@ -import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; -import { useDispatch } from 'react-redux'; +import { useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; +const resetUserFlowChannel = 'resetUserFlow'; + +/* + * Extend UserFlowConfigKey here + * + * resetTo: should be a valid route + * + */ const userFlowConfig: Record = { '/send-btc': { resetTo: '/send-btc' }, '/confirm-btc-tx': { resetTo: '/send-btc' }, @@ -14,24 +21,54 @@ const userFlowConfig: Record = { '/send-nft': { resetTo: '/nft-dashboard' }, '/confirm-nft-tx': { resetTo: '/nft-dashboard' }, }; +type UserFlowConfigKey = keyof typeof userFlowConfig; -export const hasTabWhichRequiresReset = async (): Promise => { - const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') }); - return !!optionsTabs?.some((tab) => - Object.keys(userFlowConfig).some((matchPattern) => tab.url?.match(matchPattern)), - ); -}; - +/* + * Usage: + * + * To subscribe: + * const { subscribeToResetUserFlow } = useResetUserFlow(); + * useEffect(() => subscribeToResetUserFlow('/nft-detail'), []); + * + * To broadcast (once on first render): + * const { broadcastResetUserFlow, closeChannel } = useResetUserFlow(); + * useEffect(() => broadcastResetUserFlow(), []); + * + * Both subscribe and broadcast methods return the cleanup callback, + * but you can also use closeChannel, which only returns a close callback: + * const { closeChannel } = useResetUserFlow(); + * useEffect(() => closeChannel, []); + * + */ export const useResetUserFlow = () => { const navigate = useNavigate(); - const dispatch = useDispatch(); - const resetUserFlow = (path: keyof typeof userFlowConfig) => { + const resetUserFlow = (path: UserFlowConfigKey) => { + // TODO: infer UserFlowConfigKey from location? if (!userFlowConfig[path]) { return; } navigate(userFlowConfig[path]?.resetTo); - dispatch(setShouldResetUserFlow(false)); }; - return resetUserFlow; + + const broadcastChannel = useMemo(() => new BroadcastChannel(resetUserFlowChannel), []); + const closeChannel = () => broadcastChannel.close(); + + const broadcastResetUserFlow = () => { + broadcastChannel.postMessage('reset'); + return closeChannel; + }; + + const subscribeToResetUserFlow = (path: UserFlowConfigKey) => { + broadcastChannel.onmessage = (message) => { + if (message.data !== 'reset') { + return; + } + resetUserFlow(path); + }; + return closeChannel; + }; + return { subscribeToResetUserFlow, broadcastResetUserFlow, closeChannel }; }; + +export default useResetUserFlow; diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx index 14e823623..9cb05ef3d 100644 --- a/src/app/screens/accountList/index.tsx +++ b/src/app/screens/accountList/index.tsx @@ -6,13 +6,13 @@ import styled from 'styled-components'; import Plus from '@assets/img/dashboard/plus.svg'; import ConnectLedger from '@assets/img/dashboard/connect_ledger.svg'; import { useDispatch } from 'react-redux'; -import { selectAccount, setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { selectAccount } from '@stores/wallet/actions/actionCreators'; import Seperator from '@components/seperator'; import { Account } from '@secretkeylabs/xverse-core/types'; import useWalletSelector from '@hooks/useWalletSelector'; import useWalletReducer from '@hooks/useWalletReducer'; -import React, { useMemo } from 'react'; -import { hasTabWhichRequiresReset } from '@hooks/useResetUserFlow'; +import React, { useEffect, useMemo } from 'react'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const Container = styled.div` display: flex; @@ -90,6 +90,10 @@ function AccountList(): JSX.Element { return accountsList; }, [accountsList, ledgerAccountsList, network]); + const { broadcastResetUserFlow, closeChannel } = useResetUserFlow(); + // destructor + useEffect(() => closeChannel, []); + const handleAccountSelect = (account: Account) => { dispatch( selectAccount( @@ -107,11 +111,7 @@ function AccountList(): JSX.Element { account.accountName ) ); - (async function dispatchIfResetRequired() { - if (await hasTabWhichRequiresReset()) { - dispatch(setShouldResetUserFlow(true)); - } - })(); + broadcastResetUserFlow(); navigate('/'); }; diff --git a/src/app/screens/confirmBtcTransaction/index.tsx b/src/app/screens/confirmBtcTransaction/index.tsx index ce4ffb66e..c34694b00 100644 --- a/src/app/screens/confirmBtcTransaction/index.tsx +++ b/src/app/screens/confirmBtcTransaction/index.tsx @@ -26,7 +26,7 @@ const BottomBarContainer = styled.h1((props) => ({ function ConfirmBtcTransaction() { const navigate = useNavigate(); const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); - const { ordinalsAddress, btcAddress, selectedAccount, shouldResetUserFlow } = useWalletSelector(); + const { ordinalsAddress, btcAddress, selectedAccount } = useWalletSelector(); const btcClient = useBtcClient(); const [recipientAddress, setRecipientAddress] = useState(''); const [signedTx, setSignedTx] = useState(''); @@ -60,12 +60,8 @@ function ConfirmBtcTransaction() { }); }; - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/confirm-btc-tx'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/confirm-btc-tx'), []); const onContinueButtonClick = () => { mutate({ signedTx }); diff --git a/src/app/screens/confirmInscriptionRequest/index.tsx b/src/app/screens/confirmInscriptionRequest/index.tsx index 2297a48b9..73683e1c5 100644 --- a/src/app/screens/confirmInscriptionRequest/index.tsx +++ b/src/app/screens/confirmInscriptionRequest/index.tsx @@ -138,7 +138,7 @@ function ConfirmInscriptionRequest() { feePerVByte, } = location.state; const { - btcAddress, network, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow + btcAddress, network, selectedAccount, seedPhrase, btcFiatRate } = useWalletSelector(); const btcClient = useBtcClient(); const [signedTx, setSignedTx] = useState(''); @@ -153,12 +153,8 @@ function ConfirmInscriptionRequest() { const content = useMemo(() => textContent && JSON.parse(textContent), [textContent]); - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/confirm-inscription-request'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/confirm-inscription-request'), []); useEffect(() => { axios diff --git a/src/app/screens/confirmNftTransaction/index.tsx b/src/app/screens/confirmNftTransaction/index.tsx index 86489239a..12a5c13f9 100644 --- a/src/app/screens/confirmNftTransaction/index.tsx +++ b/src/app/screens/confirmNftTransaction/index.tsx @@ -96,7 +96,7 @@ const ReviewTransactionText = styled.h1((props) => ({ function ConfirmNftTransaction() { const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; - const { selectedAccount, shouldResetUserFlow } = useWalletSelector(); + const { selectedAccount } = useWalletSelector(); const navigate = useNavigate(); const location = useLocation(); const { id } = useParams(); @@ -161,12 +161,8 @@ function ConfirmNftTransaction() { mutate({ signedTx: txs[0] }); }; - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/confirm-nft-tx'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/confirm-nft-tx'), []); const handleOnCancelClick = () => { navigate(-1); diff --git a/src/app/screens/confirmOrdinalTransaction/index.tsx b/src/app/screens/confirmOrdinalTransaction/index.tsx index 6265794d9..c8040d5b0 100644 --- a/src/app/screens/confirmOrdinalTransaction/index.tsx +++ b/src/app/screens/confirmOrdinalTransaction/index.tsx @@ -89,7 +89,7 @@ const NftContainer = styled.div((props) => ({ function ConfirmOrdinalTransaction() { const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; - const { selectedAccount, shouldResetUserFlow } = useWalletSelector(); + const { selectedAccount } = useWalletSelector(); const navigate = useNavigate(); const btcClient = useBtcClient(); const [recipientAddress, setRecipientAddress] = useState(''); @@ -154,12 +154,8 @@ function ConfirmOrdinalTransaction() { navigate(-1); }; - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/confirm-ordinal-tx'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/confirm-ordinal-tx'), []); return ( <> diff --git a/src/app/screens/nftDetail/index.tsx b/src/app/screens/nftDetail/index.tsx index 484609295..95e269db1 100644 --- a/src/app/screens/nftDetail/index.tsx +++ b/src/app/screens/nftDetail/index.tsx @@ -24,9 +24,9 @@ import { NftDetailResponse } from '@secretkeylabs/xverse-core/types'; import { MoonLoader } from 'react-spinners'; import AccountHeaderComponent from '@components/accountHeader'; import SmallActionButton from '@components/smallActionButton'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; import NftAttribute from './nftAttribute'; import DescriptionTile from './descriptionTile'; -import {useResetUserFlow} from '@hooks/useResetUserFlow'; const Container = styled.div` display: flex; @@ -248,7 +248,7 @@ const LoaderContainer = styled.div({ function NftDetailScreen() { const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' }); const navigate = useNavigate(); - const { stxAddress, selectedAccount, shouldResetUserFlow } = useWalletSelector(); + const { stxAddress, selectedAccount } = useWalletSelector(); const { id } = useParams(); const nftIdDetails = id!.split('::'); const { nftData } = useNftDataSelector(); @@ -273,12 +273,8 @@ function NftDetailScreen() { const [showShareNftOptions, setShowNftOptions] = useState(false); const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/nft-detail'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/nft-detail'), []); useEffect(() => { const data = nftData.find((nftItem) => Number(nftItem?.token_id) === Number(nftIdDetails[2].slice(1))); diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx index d64b2f80c..eb4788034 100644 --- a/src/app/screens/ordinalDetail/index.tsx +++ b/src/app/screens/ordinalDetail/index.tsx @@ -271,7 +271,7 @@ const DetailSection = styled.div((props) => ({ function OrdinalDetailScreen() { const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' }); const navigate = useNavigate(); - const { ordinalsAddress, network, selectedAccount, shouldResetUserFlow } = useWalletSelector(); + const { ordinalsAddress, network, selectedAccount } = useWalletSelector(); const { selectedOrdinal } = useNftDataSelector(); const { setSelectedOrdinalDetails } = useOrdinalDataReducer(); const { isPending, pendingTxHash } = usePendingOrdinalTxs(selectedOrdinal?.tx_id); @@ -287,12 +287,8 @@ function OrdinalDetailScreen() { [selectedOrdinal], ); - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/ordinal-detail'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/ordinal-detail'), []); useEffect(() => { if (selectedOrdinal) { diff --git a/src/app/screens/sendBrc20/index.tsx b/src/app/screens/sendBrc20/index.tsx index e50957dbe..cdec7f623 100644 --- a/src/app/screens/sendBrc20/index.tsx +++ b/src/app/screens/sendBrc20/index.tsx @@ -54,7 +54,7 @@ function SendBrc20Screen() { const { t } = useTranslation('translation'); const navigate = useNavigate(); const { - btcAddress, ordinalsAddress, selectedAccount, seedPhrase, network, btcFiatRate, brcCoinsList, shouldResetUserFlow + btcAddress, ordinalsAddress, selectedAccount, seedPhrase, network, btcFiatRate, brcCoinsList } = useWalletSelector(); const [amountError, setAmountError] = useState(''); const [amountToSend, setAmountToSend] = useState(''); @@ -66,12 +66,8 @@ function SendBrc20Screen() { const coinName = location.search ? location.search.split('coinName=')[1] : undefined; const fungibleToken = location.state?.fungibleToken || brcCoinsList?.find((coin) => coin.name === coinName); - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/send-brc20'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/send-brc20'), []); const handleBackButtonClick = () => { if (showForm) { diff --git a/src/app/screens/sendBtc/index.tsx b/src/app/screens/sendBtc/index.tsx index 09d20be8a..578a5cd20 100644 --- a/src/app/screens/sendBtc/index.tsx +++ b/src/app/screens/sendBtc/index.tsx @@ -37,7 +37,6 @@ function SendBtcScreen() { selectedAccount, seedPhrase, btcFiatRate, - shouldResetUserFlow, } = useSelector((state: StoreState) => state.walletState); const { t } = useTranslation('translation', { keyPrefix: 'SEND' }); @@ -80,12 +79,8 @@ function SendBtcScreen() { } }, [data]); - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/send-btc'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/send-btc'), []); useEffect(() => { if (recipientAddress && amount && txError) { diff --git a/src/app/screens/sendNft/index.tsx b/src/app/screens/sendNft/index.tsx index 49686cd65..a40235d79 100644 --- a/src/app/screens/sendNft/index.tsx +++ b/src/app/screens/sendNft/index.tsx @@ -124,7 +124,6 @@ function SendNft() { stxPublicKey, network, feeMultipliers, - shouldResetUserFlow, } = useWalletSelector(); const [error, setError] = useState(''); const [recipientAddress, setRecipientAddress] = useState(''); @@ -174,12 +173,8 @@ function SendNft() { } }, [data]); - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/send-nft'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/send-nft'), []); const handleBackButtonClick = () => { navigate(-1); diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx index 7bfe57b4e..917967eeb 100644 --- a/src/app/screens/sendOrdinal/index.tsx +++ b/src/app/screens/sendOrdinal/index.tsx @@ -105,7 +105,7 @@ function SendOrdinal() { const btcClient = useBtcClient(); const location = useLocation(); const { - network, ordinalsAddress, btcAddress, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow + network, ordinalsAddress, btcAddress, selectedAccount, seedPhrase, btcFiatRate } = useWalletSelector(); const [ordinalUtxo, setOrdinalUtxo] = useState(undefined); const [error, setError] = useState(''); @@ -168,12 +168,9 @@ function SendOrdinal() { navigate(-1); }; - const resetUserFlow = useResetUserFlow(); - useEffect(() => { - if (shouldResetUserFlow) { - resetUserFlow('/send-ordinal'); - } - }, [shouldResetUserFlow]); + const { subscribeToResetUserFlow } = useResetUserFlow(); + useEffect(() => subscribeToResetUserFlow('/send-ordinal'), []); + const activeAccountOwnsOrdinal = selectedOrdinal && selectedAccount && isOrdinalOwnedByAccount(selectedOrdinal, selectedAccount); diff --git a/src/app/stores/index.ts b/src/app/stores/index.ts index ded78d637..d93264ccf 100644 --- a/src/app/stores/index.ts +++ b/src/app/stores/index.ts @@ -42,7 +42,6 @@ const storeMiddleware = [ actions.SetWalletSeedPhraseKey, actions.UnlockWalletKey, actions.SelectAccountKey, - actions.SetShouldResetUserFlowKey ], }), ]; diff --git a/src/app/stores/wallet/actions/actionCreators.ts b/src/app/stores/wallet/actions/actionCreators.ts index 951ffa868..a866b7d22 100644 --- a/src/app/stores/wallet/actions/actionCreators.ts +++ b/src/app/stores/wallet/actions/actionCreators.ts @@ -248,12 +248,3 @@ export function setWalletLockPeriodAction( walletLockPeriod, }; } - -export function setShouldResetUserFlow( - shouldResetUserFlow: boolean -): actions.SetShouldResetUserFlow { - return { - type: actions.SetShouldResetUserFlowKey, - shouldResetUserFlow - }; -} diff --git a/src/app/stores/wallet/actions/types.ts b/src/app/stores/wallet/actions/types.ts index cde4a668c..8e522bcaa 100644 --- a/src/app/stores/wallet/actions/types.ts +++ b/src/app/stores/wallet/actions/types.ts @@ -44,7 +44,6 @@ export const AddLedgerAccountKey = 'AddLedgerAccountKey'; export const SetBrcCoinsListKey = 'SetBrcCoinsList'; export const SetWalletLockPeriodKey = 'SetWalletLockPeriod'; -export const SetShouldResetUserFlowKey = 'SetShouldResetUserFlow'; export enum WalletSessionPeriods { LOW = 1, @@ -86,7 +85,6 @@ export interface WalletState { accountName: string | undefined; btcApiUrl: string; walletLockPeriod: WalletSessionPeriods; - shouldResetUserFlow: boolean; } export interface SetWallet { @@ -247,8 +245,3 @@ export type WalletActions = | SetBrcCoinsData | SetWalletLockPeriod | DisableWalletExistsGuard; - -export type ShouldResetUserFlow = { - type: typeof ShouldResetUserFlowKey; - shouldResetUserFlow: boolean; -} diff --git a/src/app/stores/wallet/reducer.ts b/src/app/stores/wallet/reducer.ts index 0cb454017..d1add3d62 100644 --- a/src/app/stores/wallet/reducer.ts +++ b/src/app/stores/wallet/reducer.ts @@ -28,7 +28,6 @@ import { WalletActions, WalletSessionPeriods, WalletState, - SetShouldResetUserFlowKey, } from './actions/types'; const initialWalletState: WalletState = { @@ -65,7 +64,6 @@ const initialWalletState: WalletState = { accountType: 'software', accountName: undefined, walletLockPeriod: WalletSessionPeriods.STANDARD, - shouldResetUserFlow: false, }; const walletReducer = ( @@ -211,11 +209,6 @@ const walletReducer = ( ...state, walletLockPeriod: action.walletLockPeriod, }; - case SetShouldResetUserFlowKey: - return { - ...state, - shouldResetUserFlow: action.shouldResetUserFlow - } default: return state; } diff --git a/src/manifest.json b/src/manifest.json index 980ebba79..8d8b1e0e9 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -19,7 +19,7 @@ "devtools_page": "devtools.html", "web_accessible_resources": [{ "resources": ["inpage.js"], "matches": ["*://*/*"] }], "host_permissions": ["*://*/*"], - "permissions": ["storage", "tabs"], + "permissions": ["storage"], "content_security_policy": { "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src 'none'; frame-ancestors 'none';" },