Fix: deeplink nonce order

src/logic/safe/store/reducer/gatewayTransactions.ts

@@ -119,6 +119,11 @@ export const gatewayTransactionsReducer = handleActions<GatewayTransactionsState
           return
         }
 
+        if (!label) {
+          const oldNext = state[chainId]?.[safeAddress]?.queued?.next
+          label = oldNext[txNonce] ? 'next' : 'queued'
+        }
+
         const newTx = value.transaction
         if (label === 'queued') {
           if (newQueued?.[txNonce]) {

src/routes/routes.ts

@@ -28,7 +28,7 @@ export const SAFE_SECTION_ROUTE = `${ADDRESSED_ROUTE}/:${SAFE_SECTION_SLUG}`
 export const SAFE_SUBSECTION_SLUG = 'safeSubsection'
 export const SAFE_SUBSECTION_ROUTE = `${SAFE_SECTION_ROUTE}/:${SAFE_SUBSECTION_SLUG}`
 
-export const TRANSACTION_ID_SLUG = `txId`
+export const TRANSACTION_ID_SLUG = `safeTxHash`
 
 // URL: gnosis-safe.io/app/:[SAFE_ADDRESS_SLUG]/:[SAFE_SECTION_SLUG]/:[SAFE_SUBSECTION_SLUG]
 export type SafeRouteSlugs = {
@@ -53,8 +53,7 @@ export const SAFE_ROUTES = {
   TRANSACTIONS: `${ADDRESSED_ROUTE}/transactions`,
   TRANSACTIONS_HISTORY: `${ADDRESSED_ROUTE}/transactions/history`,
   TRANSACTIONS_QUEUE: `${ADDRESSED_ROUTE}/transactions/queue`,
-  // RegExp route rejection, i.e. !history|queue does not work so it is important to have singular after the above two in Switches
-  TRANSACTIONS_SINGULAR: `${ADDRESSED_ROUTE}/transactions/:${TRANSACTION_ID_SLUG}`, // [TRANSACTION_HASH_SLUG] === 'txId'
+  TRANSACTIONS_SINGULAR: `${ADDRESSED_ROUTE}/transactions/:${TRANSACTION_ID_SLUG}(${hashRegExp}+)`, // [TRANSACTION_HASH_SLUG] === 'safeTxHash'
   ADDRESS_BOOK: `${ADDRESSED_ROUTE}/address-book`,
   APPS: `${ADDRESSED_ROUTE}/apps`,
   SETTINGS: `${ADDRESSED_ROUTE}/settings`,

src/routes/safe/components/Transactions/TxList/TxShareButton.tsx

@@ -6,13 +6,13 @@ import { getPrefixedSafeAddressSlug, SAFE_ADDRESS_SLUG, SAFE_ROUTES, TRANSACTION
 import { PUBLIC_URL } from 'src/utils/constants'
 
 type Props = {
-  id: string
+  safeTxHash: string
 }
 
-const TxShareButton = ({ id }: Props): ReactElement => {
+const TxShareButton = ({ safeTxHash }: Props): ReactElement => {
   const txDetailsPathname = generatePath(SAFE_ROUTES.TRANSACTIONS_SINGULAR, {
     [SAFE_ADDRESS_SLUG]: getPrefixedSafeAddressSlug(),
-    [TRANSACTION_ID_SLUG]: id,
+    [TRANSACTION_ID_SLUG]: safeTxHash,
   })
   const txDetailsLink = `${window.location.origin}${PUBLIC_URL}${txDetailsPathname}`
 

src/routes/safe/components/Transactions/TxList/TxSingularDetails.tsx

@@ -5,7 +5,15 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { TransactionDetails } from '@gnosis.pm/safe-react-gateway-sdk'
 
 import { isTxQueued, TxLocation } from 'src/logic/safe/store/models/types/gateway.d'
-import { extractSafeAddress, SafeRouteSlugs, TRANSACTION_ID_SLUG } from 'src/routes/routes'
+import {
+  extractPrefixedSafeAddress,
+  extractSafeAddress,
+  generateSafeRoute,
+  SafeRouteSlugs,
+  SAFE_ROUTES,
+  TRANSACTION_ID_SLUG,
+  history,
+} from 'src/routes/routes'
 import { Centered } from './styled'
 import { getTransactionWithLocationByAttribute } from 'src/logic/safe/store/selectors/gatewayTransactions'
 import { TxLocationContext } from './TxLocationProvider'
@@ -54,6 +62,8 @@ const TxSingularDetails = (): ReactElement => {
     setFetchedTx(undefined)
 
     if (!safeTxHash) {
+      const txsRoute = generateSafeRoute(SAFE_ROUTES.TRANSACTIONS, extractPrefixedSafeAddress())
+      history.replace(txsRoute)
       return
     }
 

src/routes/safe/components/Transactions/TxList/TxSummary.tsx

@@ -30,7 +30,7 @@ export const TxSummary = ({ txDetails }: Props): ReactElement => {
     <>
       {!IS_PRODUCTION && isMultiSigExecutionDetails(txDetails.detailedExecutionInfo) && (
         <div className="tx-share">
-          <TxShareButton id={txDetails.detailedExecutionInfo.safeTxHash} />
+          <TxShareButton safeTxHash={txDetails.detailedExecutionInfo.safeTxHash} />
         </div>
       )}
       <div className="tx-hash">

src/routes/safe/components/Transactions/TxList/hooks/useQueueTransactions.ts

@@ -1,8 +1,12 @@
 import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { _getChainId } from 'src/config'
+import { loadQueuedTransactions } from 'src/logic/safe/store/actions/transactions/fetchTransactions/loadGatewayTransactions'
+import { addQueuedTransactions } from 'src/logic/safe/store/actions/transactions/gatewayTransactions'
 
 import { TransactionDetails } from 'src/logic/safe/store/models/types/gateway.d'
 import { nextTransactions, queuedTransactions } from 'src/logic/safe/store/selectors/gatewayTransactions'
+import { extractSafeAddress } from 'src/routes/routes'
 
 export type QueueTransactionsInfo = {
   next: TransactionDetails
@@ -15,6 +19,7 @@ export type QueueTransactionsInfo = {
 export const useQueueTransactions = (): QueueTransactionsInfo | undefined => {
   const nextTxs = useSelector(nextTransactions)
   const queuedTxs = useSelector(queuedTransactions)
+  const dispatch = useDispatch()
   const [txsCount, setTxsCount] = useState<{ next: number; queued: number } | undefined>()
 
   useEffect(() => {
@@ -24,8 +29,20 @@ export const useQueueTransactions = (): QueueTransactionsInfo | undefined => {
     const queued = queuedTxs
       ? Object.entries(queuedTxs).reduce((acc, [, transactions]) => (acc += transactions.length), 0)
       : 0
+
+    // If 'queued.queued' deeplinked tx was open then queue visited before next poll
+    const hasDeeplinkLoaded = next === 0 && queued === 1
+    if (hasDeeplinkLoaded) {
+      const getQueuedTxs = async () => {
+        const safeAddress = extractSafeAddress()
+        const values = await loadQueuedTransactions(safeAddress)
+        dispatch(addQueuedTransactions({ chainId: _getChainId(), safeAddress, values }))
+      }
+      getQueuedTxs()
+    }
+
     setTxsCount({ next, queued })
-  }, [nextTxs, queuedTxs])
+  }, [dispatch, nextTxs, queuedTxs])
 
   // no data loaded to the store yet
   if ((!nextTxs && !queuedTxs) || typeof txsCount === 'undefined') {

src/routes/safe/container/index.tsx

@@ -72,7 +72,6 @@ const Container = (): React.ReactElement => {
             SAFE_ROUTES.TRANSACTIONS,
             SAFE_ROUTES.TRANSACTIONS_HISTORY,
             SAFE_ROUTES.TRANSACTIONS_QUEUE,
-            // Must be below the above due to :txId slug recognising history/queue
             SAFE_ROUTES.TRANSACTIONS_SINGULAR,
           ]}
           render={() => wrapInSuspense(<TxList />, null)}