chore(core): bump react-redux package (#2879)

* chore(core): bump react-redux package

* chore(core): remove cypress open local change

* refactor(deps): stricter react redux types

* chore(deps-dev): remove types of react-redux

* chore(e2e): fixes

* chore(e2e): fixes

Co-authored-by: JJ Adonis <[email protected]>

.eslintrc

@@ -52,7 +52,8 @@
         "@typescript-eslint/indent": "off",
         "react/prop-types": "off",
         "react/jsx-uses-react": "off",
-        "react/react-in-jsx-scope": "off"
+        "react/react-in-jsx-scope": "off",
+        "@typescript-eslint/no-floating-promises": "off"
       },
       "excludedFiles": [
         "*.test.ts",

mobile-app/app/components/OceanInterface/OceanInterface.tsx

@@ -12,11 +12,12 @@ import { tailwind } from '@tailwind'
 import { translate } from '@translations'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Animated } from 'react-native'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { NativeLoggingProps, useLogger } from '@shared-contexts/NativeLoggingProvider'
 import { TransactionDetail } from './TransactionDetail'
 import { TransactionError } from './TransactionError'
 import { getReleaseChannel } from '@api/releaseChannel'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 const MAX_AUTO_RETRY = 1
 const MAX_TIMEOUT = 300000
@@ -72,7 +73,7 @@ async function waitForTxConfirmation (id: string, client: WhaleApiClient, logger
  * */
 export function OceanInterface (): JSX.Element | null {
   const logger = useLogger()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const client = useWhaleApiClient()
   const { wallet, address } = useWalletContext()
   const { getTransactionUrl } = useDeFiScanContext()

mobile-app/app/contexts/FeatureFlagContext.tsx

@@ -41,14 +41,16 @@ export function FeatureFlagProvider (props: React.PropsWithChildren<any>): JSX.E
   const { network } = useNetworkContext()
   const [retries, setRetries] = useState(0)
 
-  if (isError && retries < MAX_RETRY) {
-    setTimeout(() => {
+  useEffect(() => {
+    if (isError && retries < MAX_RETRY) {
+      setTimeout(() => {
+        prefetchPage({})
+        setRetries(retries + 1)
+      }, 10000)
+    } else if (!isError) {
       prefetchPage({})
-      setRetries(retries + 1)
-    }, 10000)
-  } else if (!isError) {
-    prefetchPage({})
-  }
+    }
+  }, [isError])
 
   function isBetaFeature (featureId: FEATURE_FLAG_ID): boolean {
     return featureFlags.some((flag: FeatureFlag) => satisfies(appVersion, flag.version) &&

mobile-app/app/hooks/useAddressBook.ts

@@ -1,7 +1,8 @@
 import { useNetworkContext } from '@shared-contexts/NetworkContext'
-import { RootState, useAppDispatch } from '@store'
+import { RootState } from '@store'
 import { setAddressBook, setUserPreferences } from '@store/userPreferences'
 import { useSelector } from 'react-redux'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 export function useAddressBook (): {
   clearAddressBook: () => void

mobile-app/app/hooks/useAppDispatch.tsx

@@ -0,0 +1,6 @@
+import { useDispatch } from 'react-redux'
+import { RootStore } from '@store'
+
+export type AppDispatch = RootStore['dispatch']
+/* eslint-disable */ 
+export const useAppDispatch = () => useDispatch<AppDispatch>()

mobile-app/app/screens/AppNavigator/screens/Auctions/components/BidHistory.tsx

@@ -1,6 +1,7 @@
 import { View } from '@components'
 import { ThemedFlatList, ThemedIcon, ThemedText, ThemedView } from '@components/themed'
 import { VaultAuctionBatchHistory } from '@defichain/whale-api-client/dist/api/loan'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useIsFocused } from '@react-navigation/native'
 import { useWhaleApiClient } from '@shared-contexts/WhaleContext'
 import { RootState } from '@store'
@@ -11,7 +12,7 @@ import BigNumber from 'bignumber.js'
 import { useEffect } from 'react'
 import { Platform } from 'react-native'
 import NumberFormat from 'react-number-format'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { useTokenPrice } from '../../Balances/hooks/TokenPrice'
 import { ActiveUSDValue } from '../../Loans/VaultDetail/components/ActiveUSDValue'
 import { useBidTimeAgo } from '../hooks/BidTimeAgo'
@@ -27,7 +28,7 @@ interface BidHistoryProps {
 
 export function BidHistory (props: BidHistoryProps): JSX.Element {
   const client = useWhaleApiClient()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const blockCount = useSelector((state: RootState) => state.block.count) ?? 0
   const bidHistory = useSelector((state: RootState) => state.auctions.bidHistory)
   const { getTokenPrice } = useTokenPrice()

mobile-app/app/screens/AppNavigator/screens/Auctions/components/BrowseAuctions.tsx

@@ -4,7 +4,7 @@ import { tailwind } from '@tailwind'
 import { ThemedFlatList, ThemedScrollView } from '@components/themed'
 import { BatchCard } from '@screens/AppNavigator/screens/Auctions/components/BatchCard'
 import { Platform, View } from 'react-native'
-import { useDispatch, useSelector, batch } from 'react-redux'
+import { useSelector, batch } from 'react-redux'
 import { RootState } from '@store'
 import { useWhaleApiClient } from '@shared-contexts/WhaleContext'
 import { SkeletonLoader, SkeletonLoaderScreen } from '@components/SkeletonLoader'
@@ -18,6 +18,7 @@ import { QuickBid } from './QuickBid'
 import { useDebounce } from '@hooks/useDebounce'
 import { fetchVaults, LoanVault, vaultsSelector } from '@store/loans'
 import { useWalletContext } from '@shared-contexts/WalletContext'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { tokensSelector } from '@store/wallet'
 
 interface Props {
@@ -33,7 +34,7 @@ export interface onQuickBidProps {
 }
 
 export function BrowseAuctions ({ searchString }: Props): JSX.Element {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const client = useWhaleApiClient()
   const { address } = useWalletContext()
   const tokens = useSelector((state: RootState) => tokensSelector(state.wallet))

mobile-app/app/screens/AppNavigator/screens/Auctions/components/ManageBids.tsx

@@ -4,7 +4,7 @@ import { useFeatureFlagContext } from '@contexts/FeatureFlagContext'
 import { View } from 'react-native'
 import { InfoText } from '@components/InfoText'
 import { translate } from '@translations'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { RootState } from '@store'
 import { useEffect } from 'react'
 import { fetchVaults } from '@store/loans'
@@ -14,9 +14,10 @@ import { LoanVaultLiquidated, LoanVaultLiquidationBatch } from '@defichain/whale
 import { BidCard } from './BidCard'
 import { EmptyBidsScreen } from './EmptyBidsScreen'
 import { useIsFocused } from '@react-navigation/native'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 export function ManageBids (): JSX.Element {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const client = useWhaleApiClient()
   const { address } = useWalletContext()
   const blockCount = useSelector((state: RootState) => state.block.count)

mobile-app/app/screens/AppNavigator/screens/Auctions/hooks/SignBidAndSend.tsx

@@ -3,9 +3,10 @@ import { CTransactionSegWit, PlaceAuctionBid } from '@defichain/jellyfish-transa
 import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
 import { useLogger } from '@shared-contexts/NativeLoggingProvider'
 import { hasTxQueued, transactionQueue } from '@store/transaction_queue'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { RootState } from '@store'
 import { firstTransactionSelector, hasTxQueued as hasBroadcastQueued, OceanTransaction } from '@store/ocean'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 interface ConstructSignedBidAndSendProps {
   vaultId: PlaceAuctionBid['vaultId']
@@ -21,7 +22,7 @@ export const useSignBidAndSend = (): {
   currentBroadcastJob: OceanTransaction
   constructSignedBidAndSend: (props: ConstructSignedBidAndSendProps) => Promise<void>
 } => {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const logger = useLogger()
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
   const hasPendingBroadcastJob = useSelector((state: RootState) => hasBroadcastQueued(state.ocean))

mobile-app/app/screens/AppNavigator/screens/Auctions/screens/AuctionDetailScreen.tsx

@@ -4,7 +4,7 @@ import { tailwind } from '@tailwind'
 import { Platform, TouchableOpacity, View } from 'react-native'
 import { translate } from '@translations'
 import { getNativeIcon } from '@components/icons/assets'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { NavigationProp, useNavigation, useIsFocused } from '@react-navigation/native'
 import { RootState } from '@store'
 import { useBottomSheet } from '@hooks/useBottomSheet'
@@ -31,6 +31,7 @@ import { BidHistory } from '../components/BidHistory'
 import { MinNextBidTextRow } from '../components/MinNextBidTextRow'
 import { LoanVaultLiquidationBatch } from '@defichain/whale-api-client/dist/api/loan'
 import { fetchAuctions } from '@store/auctions'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 type BatchDetailScreenProps = StackScreenProps<AuctionsParamList, 'AuctionDetailScreen'>
 
@@ -45,7 +46,7 @@ export function AuctionDetailScreen (props: BatchDetailScreenProps): JSX.Element
   const { batch: batchFromParam, vault } = props.route.params
   const [batch, setBatch] = useState<LoanVaultLiquidationBatch>(batchFromParam)
   const client = useWhaleApiClient()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const tokens = useSelector((state: RootState) => tokensSelector(state.wallet))
   const { getAuctionsUrl } = useDeFiScanContext()
   const [activeTab, setActiveTab] = useState<string>(TabKey.BidHistory)

mobile-app/app/screens/AppNavigator/screens/Auctions/screens/ConfirmPlaceBidScreen.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import { tailwind } from '@tailwind'
@@ -18,12 +18,13 @@ import { InfoRow, InfoType } from '@components/InfoRow'
 import { ThemedScrollView, ThemedSectionTitle } from '@components/themed'
 import { AuctionsParamList } from '../AuctionNavigator'
 import { WalletAddressRow } from '@components/WalletAddressRow'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 type Props = StackScreenProps<AuctionsParamList, 'ConfirmPlaceBidScreen'>
 
 export function ConfirmPlaceBidScreen (props: Props): JSX.Element {
   const navigation = useNavigation<NavigationProp<AuctionsParamList>>()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const logger = useLogger()
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
   const hasPendingBroadcastJob = useSelector((state: RootState) => hasBroadcastQueued(state.ocean))

mobile-app/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx

@@ -11,7 +11,7 @@ import { dexPricesSelectorByDenomination, fetchDexPrice, fetchTokens, tokensSele
 import { tailwind } from '@tailwind'
 import BigNumber from 'bignumber.js'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { batch, useDispatch, useSelector } from 'react-redux'
+import { batch, useSelector } from 'react-redux'
 import { BalanceParamList } from './BalancesNavigator'
 import { Announcements } from '@screens/AppNavigator/screens/Balances/components/Announcements'
 import { DFIBalanceCard } from '@screens/AppNavigator/screens/Balances/components/DFIBalanceCard'
@@ -35,6 +35,7 @@ import { SkeletonLoader, SkeletonLoaderScreen } from '@components/SkeletonLoader
 import { LoanVaultActive } from '@defichain/whale-api-client/dist/api/loan'
 import { fetchExecutionBlock, fetchFutureSwaps, hasFutureSwap } from '@store/futureSwap'
 import { useDenominationCurrency } from './hooks/PortfolioCurrency'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 type Props = StackScreenProps<BalanceParamList, 'BalancesScreen'>
 
@@ -67,7 +68,7 @@ export function BalancesScreen ({ navigation }: Props): JSX.Element {
   const blockCount = useSelector((state: RootState) => state.block.count)
   const vaults = useSelector((state: RootState) => activeVaultsSelector(state.loans))
 
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const [refreshing, setRefreshing] = useState(false)
   const [isZeroBalance, setIsZeroBalance] = useState(true)
   const hasPendingFutureSwap = useSelector((state: RootState) => hasFutureSwap(state.futureSwaps))

mobile-app/app/screens/AppNavigator/screens/Balances/components/AddressControlScreen.tsx

@@ -10,12 +10,13 @@ import { BalanceParamList } from '../BalancesNavigator'
 import { useLogger } from '@shared-contexts/NativeLoggingProvider'
 import { RandomAvatar } from '@screens/AppNavigator/screens/Balances/components/RandomAvatar'
 import { SkeletonLoader, SkeletonLoaderScreen } from '@components/SkeletonLoader'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { RootState } from '@store'
 import { hasTxQueued } from '@store/transaction_queue'
 import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
 import { wallet as walletReducer } from '@store/wallet'
 import { loans } from '@store/loans'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 export function AddressControlScreen (): JSX.Element {
   const navigation = useNavigation<NavigationProp<BalanceParamList>>()
@@ -84,7 +85,7 @@ export function AddressControlCard ({ onClose }: { onClose: () => void }): JSX.E
   const [availableAddresses, setAvailableAddresses] = useState<string[]>([])
   const [canCreateAddress, setCanCreateAddress] = useState<boolean>(false)
   const blockCount = useSelector((state: RootState) => state.block.count)
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const logger = useLogger()
 
   const fetchAddresses = async (): Promise<void> => {

mobile-app/app/screens/AppNavigator/screens/Balances/components/BottomSheetAddressBook.tsx

@@ -8,13 +8,14 @@ import { RandomAvatar } from './RandomAvatar'
 import { BottomSheetFlatList } from '@gorhom/bottom-sheet'
 import { useThemeContext } from '@shared-contexts/ThemeProvider'
 import { useSelector } from 'react-redux'
-import { RootState, useAppDispatch } from '@store'
+import { RootState } from '@store'
 import { hasTxQueued } from '@store/transaction_queue'
 import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { BottomSheetWithNavRouteParam } from '@components/BottomSheetWithNav'
 import { LabeledAddress, setAddressBook, setUserPreferences } from '@store/userPreferences'
 import { useNetworkContext } from '@shared-contexts/NetworkContext'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 interface BottomSheetAddressBookProps {
   address: string

mobile-app/app/screens/AppNavigator/screens/Balances/components/BottomSheetAddressDetail.tsx

@@ -18,7 +18,7 @@ import { useThemeContext } from '@shared-contexts/ThemeProvider'
 import { wallet as walletReducer } from '@store/wallet'
 import { useSelector } from 'react-redux'
 import { loans } from '@store/loans'
-import { RootState, useAppDispatch } from '@store'
+import { RootState } from '@store'
 import { hasTxQueued } from '@store/transaction_queue'
 import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
@@ -28,6 +28,7 @@ import { useNetworkContext } from '@shared-contexts/NetworkContext'
 import { useAddressLabel } from '@hooks/useAddressLabel'
 import { useFeatureFlagContext } from '@contexts/FeatureFlagContext'
 import { AddressListEditButton } from './AddressListEditButton'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 interface BottomSheetAddressDetailProps {
   address: string

mobile-app/app/screens/AppNavigator/screens/Balances/components/CreateOrEditAddressLabelForm.tsx

@@ -13,12 +13,13 @@ import { SubmitButtonGroup } from '@components/SubmitButtonGroup'
 import { LabeledAddress, LocalAddress } from '@store/userPreferences'
 import { fromAddress } from '@defichain/jellyfish-address'
 import { useNetworkContext } from '@shared-contexts/NetworkContext'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { RootState } from '@store'
 import { authentication, Authentication } from '@store/authentication'
 import { MnemonicStorage } from '@api/wallet/mnemonic_storage'
 import { useWalletNodeContext } from '@shared-contexts/WalletNodeProvider'
 import { useLogger } from '@shared-contexts/NativeLoggingProvider'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 export interface CreateOrEditAddressLabelFormProps {
   title: string
@@ -102,7 +103,7 @@ export const CreateOrEditAddressLabelForm = memo(({ route, navigation }: Props):
   }
 
   // Passcode prompt on create
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const { data: { type: encryptionType } } = useWalletNodeContext()
   const isEncrypted = encryptionType === 'MNEMONIC_ENCRYPTED'
   const logger = useLogger()

mobile-app/app/screens/AppNavigator/screens/Balances/screens/AddOrEditAddressBookScreen.tsx

@@ -5,6 +5,7 @@ import { SubmitButtonGroup } from '@components/SubmitButtonGroup'
 import { ThemedIcon, ThemedText, ThemedTouchableOpacity, ThemedView } from '@components/themed'
 import { WalletTextInput } from '@components/WalletTextInput'
 import { fromAddress } from '@defichain/jellyfish-address'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { StackScreenProps } from '@react-navigation/stack'
 import { useLogger } from '@shared-contexts/NativeLoggingProvider'
 import { useNetworkContext } from '@shared-contexts/NetworkContext'
@@ -14,7 +15,7 @@ import { authentication, Authentication } from '@store/authentication'
 import { tailwind } from '@tailwind'
 import { translate } from '@translations'
 import { useEffect, useLayoutEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { BalanceParamList } from '../BalancesNavigator'
 
 type Props = StackScreenProps<BalanceParamList, 'AddOrEditAddressBookScreen'>
@@ -85,7 +86,7 @@ export function AddOrEditAddressBookScreen ({ route, navigation }: Props): JSX.E
   }
 
   // Passcode prompt
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const { data: { type: encryptionType } } = useWalletNodeContext()
   const isEncrypted = encryptionType === 'MNEMONIC_ENCRYPTED'
   const logger = useLogger()

mobile-app/app/screens/AppNavigator/screens/Balances/screens/AddressBookScreen.tsx

@@ -1,7 +1,7 @@
 import { View } from '@components'
 import { ThemedFlatList, ThemedIcon, ThemedText, ThemedTouchableOpacity, ThemedView } from '@components/themed'
 import { StackScreenProps } from '@react-navigation/stack'
-import { RootState, useAppDispatch } from '@store'
+import { RootState } from '@store'
 import { hasTxQueued } from '@store/transaction_queue'
 import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
 import { LabeledAddress, setAddressBook, setUserPreferences } from '@store/userPreferences'
@@ -26,6 +26,7 @@ import { HeaderSearchInput } from '@components/HeaderSearchInput'
 import { useDeFiScanContext } from '@shared-contexts/DeFiScanContext'
 import { debounce } from 'lodash'
 import { openURL } from '@api/linking'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 type Props = StackScreenProps<BalanceParamList, 'AddressBookScreen'>
 

mobile-app/app/screens/AppNavigator/screens/Balances/screens/ConfirmWithdrawFutureSwapScreen.tsx

@@ -8,7 +8,7 @@ import { translate } from '@translations'
 import BigNumber from 'bignumber.js'
 import { Dispatch, useEffect, useState } from 'react'
 import { SubmitButtonGroup } from '@components/SubmitButtonGroup'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { RootState } from '@store'
 import { hasTxQueued, transactionQueue } from '@store/transaction_queue'
 import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
@@ -20,6 +20,7 @@ import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
 import { CTransactionSegWit } from '@defichain/jellyfish-transaction/dist'
 import { onTransactionBroadcast } from '@api/transaction/transaction_commands'
 import { useFutureSwapDate } from '../../Dex/hook/FutureSwap'
+import { useAppDispatch } from '@hooks/useAppDispatch'
 
 type Props = StackScreenProps<BalanceParamList, 'ConfirmWithdrawFutureSwapScreen'>
 
@@ -37,7 +38,7 @@ export function ConfirmWithdrawFutureSwapScreen ({
   const hasPendingBroadcastJob = useSelector((state: RootState) => hasBroadcastQueued(state.ocean))
   const blockCount = useSelector((state: RootState) => state.block.count ?? 0)
   const { isEnded } = useFutureSwapDate(executionBlock, blockCount)
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const logger = useLogger()
   const [isOnPage, setIsOnPage] = useState<boolean>(true)