Merge branch 'develop' into release-4.7.0

src/App.tsx

@@ -1,7 +1,7 @@
 import 'intl'
 
 import React, {useEffect} from 'react'
-import {AppState, AppStateStatus, Platform} from 'react-native'
+import {AppState, AppStateStatus, Platform, UIManager} from 'react-native'
 import RNBootSplash from 'react-native-bootsplash'
 import * as RNP from 'react-native-paper'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
@@ -18,6 +18,12 @@ const queryClient = new QueryClient()
 
 enableScreens()
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true)
+  }
+}
+
 const useInitializeApp = () => {
   const dispatch = useDispatch()
   useEffect(() => {

src/TxHistory/CollapsibleHeader.tsx

@@ -1,11 +1,5 @@
 import React from 'react'
-import {LayoutAnimation, Platform, UIManager, View, ViewProps} from 'react-native'
-
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true)
-  }
-}
+import {LayoutAnimation, View, ViewProps} from 'react-native'
 
 export const CollapsibleHeader = ({expanded, children}: {expanded: boolean} & ViewProps) => {
   const [_expanded, setExpanded] = React.useState(expanded)

src/TxHistory/TxDetails/TxDetails.stories.tsx

@@ -0,0 +1,16 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+
+import {mockWallet, RouteProvider} from '../../../storybook'
+import {SelectedWalletProvider} from '../../SelectedWallet'
+import {TxDetails} from './TxDetails'
+
+storiesOf('TxDetails', module).add('default', () => {
+  return (
+    <RouteProvider params={{id: '31b1abca49857fd50c7959cc019d14c7dc5deaa754ba45372fb21748c411f210'}}>
+      <SelectedWalletProvider wallet={mockWallet}>
+        <TxDetails />
+      </SelectedWalletProvider>
+    </RouteProvider>
+  )
+})

src/TxHistory/TxDetails/TxDetails.tsx

@@ -25,7 +25,7 @@ import {Boundary} from '../../components'
 import {useTokenInfo} from '../../hooks'
 import AddressModal from '../../Receive/AddressModal'
 import {useSelectedWallet} from '../../SelectedWallet'
-import {TransactionInfo} from '../../types/cardano'
+import {TokenEntry, TransactionInfo} from '../../types/cardano'
 import {AssetList} from './AssetList'
 
 export type Params = {
@@ -93,7 +93,7 @@ export const TxDetails = () => {
                   <Image source={expandedIn ? arrowUp : arrowDown} />
                 </TouchableOpacity>
               )}
-              {expandedIn && <AssetList styles={assetListStyle} assets={item.assets} />}
+              <ExpandableAssetList expanded={expandedIn} assets={item.assets} />
             </View>
           ))}
 
@@ -109,7 +109,7 @@ export const TxDetails = () => {
                   <Image source={expandedOut ? arrowUp : arrowDown} />
                 </TouchableOpacity>
               )}
-              {expandedOut && <AssetList styles={assetListStyle} assets={item.assets} />}
+              <ExpandableAssetList expanded={expandedOut} assets={item.assets} />
             </View>
           ))}
 
@@ -165,6 +165,20 @@ const Fee = ({amount}: {amount: BigNumber}) => {
   )
 }
 
+const ExpandableAssetList: React.VFC<{expanded: boolean; assets: TokenEntry[]}> = ({
+  expanded,
+  assets,
+}: {
+  expanded: boolean
+  assets: TokenEntry[]
+}) => (
+  <View style={{borderWidth: 1, borderColor: 'transparent'}}>
+    {/* ↑↑↑ View wrapper fixes bug ↑↑↑ */}
+    {expanded && <AssetList styles={assetListStyle} assets={assets} />}
+    {/* ↓↓↓ View wrapper fixes bug ↓↓↓ */}
+  </View>
+)
+
 type AddressEntryProps = {
   address: string
   path: string

src/hooks/index.ts

@@ -1,4 +1,12 @@
-import {useMutation, UseMutationOptions, useQueries, useQuery, useQueryClient, UseQueryOptions} from 'react-query'
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQueries,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from 'react-query'
 
 import {generateShelleyPlateFromKey} from '../../legacy/crypto/shelley/plate'
 import walletManager from '../../legacy/crypto/walletManager'
@@ -36,16 +44,10 @@ export const useWalletName = (wallet: WalletInterface, options?: UseQueryOptions
 }
 
 export const useChangeWalletName = (wallet: WalletInterface, options: UseMutationOptions<void, Error, string> = {}) => {
-  const queryClient = useQueryClient()
-  const {onSuccess, ...rest} = options
-  const mutation = useMutation<void, Error, string>({
+  const mutation = useMutationWithInvalidations<void, Error, string>({
     mutationFn: (newName) => walletManager.rename(newName),
-    onSuccess: (...args) => {
-      onSuccess?.(...args)
-      queryClient.invalidateQueries([wallet.id, 'name'])
-      queryClient.invalidateQueries(['walletMetas'])
-    },
-    ...rest,
+    invalidateQueries: [[wallet.id, 'name'], ['walletMetas']],
+    ...options,
   })
 
   return {
@@ -198,15 +200,10 @@ export const useWalletMetas = () => {
   return query.data
 }
 
-export const useRemoveWallet = (mutationOptions: UseMutationOptions<void, Error, void>) => {
-  const queryClient = useQueryClient()
-  const {onSuccess, ...options} = mutationOptions || {}
-  const mutation = useMutation({
+export const useRemoveWallet = (options: UseMutationOptions<void, Error, void>) => {
+  const mutation = useMutationWithInvalidations({
     mutationFn: () => walletManager.removeCurrentWallet(),
-    onSuccess: (...args) => {
-      queryClient.invalidateQueries('walletMetas')
-      onSuccess?.(...args)
-    },
+    invalidateQueries: [['walletMetas']],
     ...options,
   })
 
@@ -225,11 +222,9 @@ type CreateBip44WalletInfo = {
   readOnly: boolean
 }
 
-export const useCreateBip44Wallet = (
-  mutationOptions?: UseMutationOptions<WalletInterface, Error, CreateBip44WalletInfo>,
-) => {
-  const mutation = useMutation<WalletInterface, Error, CreateBip44WalletInfo>(
-    ({name, bip44AccountPublic, networkId, implementationId, hwDeviceInfo, readOnly}) =>
+export const useCreateBip44Wallet = (options?: UseMutationOptions<WalletInterface, Error, CreateBip44WalletInfo>) => {
+  const mutation = useMutationWithInvalidations<WalletInterface, Error, CreateBip44WalletInfo>({
+    mutationFn: ({name, bip44AccountPublic, networkId, implementationId, hwDeviceInfo, readOnly}) =>
       walletManager.createWalletWithBip44Account(
         name,
         bip44AccountPublic,
@@ -238,8 +233,9 @@ export const useCreateBip44Wallet = (
         hwDeviceInfo,
         readOnly,
       ),
-    mutationOptions,
-  )
+    invalidateQueries: [['walletMetas']],
+    ...options,
+  })
 
   return {
     createWallet: mutation.mutate,
@@ -256,22 +252,35 @@ export type CreateWalletInfo = {
   provider?: string
 }
 
-export const useCreateWallet = (mutationOptions?: UseMutationOptions<WalletInterface, Error, CreateWalletInfo>) => {
-  const queryClient = useQueryClient()
-  const mutation = useMutation(
-    ({name, mnemonicPhrase, password, networkId, walletImplementationId, provider}) =>
+export const useCreateWallet = (options?: UseMutationOptions<WalletInterface, Error, CreateWalletInfo>) => {
+  const mutation = useMutationWithInvalidations({
+    mutationFn: ({name, mnemonicPhrase, password, networkId, walletImplementationId, provider}) =>
       walletManager.createWallet(name, mnemonicPhrase, password, networkId, walletImplementationId, provider),
-    {
-      ...mutationOptions,
-      onSuccess: (...args) => {
-        queryClient.invalidateQueries(['walletMetas'])
-        mutationOptions?.onSuccess?.(...args)
-      },
-    },
-  )
+    invalidateQueries: [['walletMetas']],
+    ...options,
+  })
 
   return {
     createWallet: mutation.mutate,
     ...mutation,
   }
 }
+
+export const useMutationWithInvalidations = <TData = unknown, TError = unknown, TVariables = void, TContext = unknown>({
+  invalidateQueries,
+  ...options
+}: UseMutationOptions<TData, TError, TVariables, TContext> & {invalidateQueries?: Array<QueryKey>} = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<TData, TError, TVariables, TContext>({
+    ...options,
+    onMutate: (variables) => {
+      invalidateQueries?.forEach((key) => queryClient.cancelQueries(key))
+      return options?.onMutate?.(variables)
+    },
+    onSuccess: (data, variables, context) => {
+      invalidateQueries?.forEach((key) => queryClient.invalidateQueries(key))
+      return options?.onSuccess?.(data, variables, context)
+    },
+  })
+}

storybook/storyLoader.js

@@ -54,6 +54,7 @@ function loadStories() {
 	require('../src/TxHistory/AssetList/ChipButton/ChipButton.stories');
 	require('../src/TxHistory/ModalInfo/ModalInfo.stories');
 	require('../src/TxHistory/TxDetails/AssetList.stories');
+	require('../src/TxHistory/TxDetails/TxDetails.stories');
 	require('../src/TxHistory/TxHistory.stories');
 	require('../src/TxHistory/TxHistoryList/ActionsBanner/ActionsBanner.stories');
 	require('../src/WalletInit/CheckNanoX/CheckNanoXScreen.stories');
@@ -132,6 +133,7 @@ const stories = [
 	'../src/TxHistory/AssetList/ChipButton/ChipButton.stories',
 	'../src/TxHistory/ModalInfo/ModalInfo.stories',
 	'../src/TxHistory/TxDetails/AssetList.stories',
+	'../src/TxHistory/TxDetails/TxDetails.stories',
 	'../src/TxHistory/TxHistory.stories',
 	'../src/TxHistory/TxHistoryList/ActionsBanner/ActionsBanner.stories',
 	'../src/WalletInit/CheckNanoX/CheckNanoXScreen.stories',