Merge branch 'develop' into YV-47-alt

apps/wallet-mobile/src/components/Warning/Warning.tsx

@@ -8,14 +8,21 @@ import {Space} from '../Space/Space'
 type Props = {
   content: ReactNode
   iconSize?: number
+  title?: string
 }
 
-export const Warning = ({content, iconSize = 30}: Props) => {
+export const Warning = ({content, iconSize = 30, title = ''}: Props) => {
   const {styles, colors} = useStyles()
 
   return (
     <View style={styles.notice}>
-      <Icon.Info size={iconSize} color={colors.yellow} />
+      <View style={styles.titleContainer}>
+        <Icon.Info size={iconSize} color={colors.yellow} />
+
+        <Space width="sm" />
+
+        <Text style={styles.title}>{title}</Text>
+      </View>
 
       <Space height="sm" />
 
@@ -36,6 +43,14 @@ const useStyles = () => {
       ...atoms.body_2_md_regular,
       color: color.gray_max,
     },
+    titleContainer: {
+      ...atoms.flex_row,
+      ...atoms.align_center,
+    },
+    title: {
+      color: color.text_gray_max,
+      ...atoms.body_2_md_medium,
+    },
   })
 
   const colors = {

apps/wallet-mobile/src/features/Portfolio/common/hooks/useGetPortfolioTokenChart.ts

@@ -45,7 +45,9 @@ const getTimestamps = (timeInterval: TokenChartInterval) => {
   }[timeInterval ?? TokenChartInterval.DAY]
 
   const step = (now - from) / resolution
-  return Array.from({length: resolution}, (_, i) => from + Math.round(step * i))
+  const spread = Array.from({length: resolution}, (_, i) => from + Math.round(step * i))
+  spread.push(now)
+  return spread
 }
 
 const ptTicker = networkConfigs[Chain.Network.Mainnet].primaryTokenInfo.ticker

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/PortfolioWalletTokenList.tsx

@@ -1,9 +1,10 @@
 import {useFocusEffect} from '@react-navigation/native'
+import {FlashList} from '@shopify/flash-list'
 import {infoExtractName, isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {Chain, Portfolio} from '@yoroi/types'
 import * as React from 'react'
-import {FlatList, StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 
 import {Spacer} from '../../../../../components/Spacer/Spacer'
 import {useMetrics} from '../../../../../kernel/metrics/metricsManager'
@@ -90,6 +91,22 @@ export const PortfolioWalletTokenList = () => {
 
   const isPreprod = network === Chain.Network.Preprod
 
+  const [loadedTokens, setLoadedTokens] = React.useState(getListTokens.slice(0, batchSize))
+  const [currentIndex, setCurrentIndex] = React.useState(batchSize)
+
+  React.useEffect(() => {
+    setLoadedTokens(getListTokens.slice(0, currentIndex + batchSize))
+    setCurrentIndex(currentIndex + batchSize)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tokensList]) // must be tokensList
+
+  const handleOnEndReached = React.useCallback(() => {
+    if (currentIndex >= getListTokens.length) return
+    const nextBatch = getListTokens.slice(currentIndex, currentIndex + batchSize)
+    setLoadedTokens([...loadedTokens, ...nextBatch])
+    setCurrentIndex(currentIndex + batchSize)
+  }, [currentIndex, getListTokens, loadedTokens])
+
   const renderFooterList = () => {
     if (isSearching) return null
     if (isLoading) {
@@ -126,8 +143,8 @@ export const PortfolioWalletTokenList = () => {
 
   return (
     <View style={styles.root}>
-      <FlatList
-        data={getListTokens}
+      <FlashList
+        data={loadedTokens}
         ListHeaderComponent={
           <HeadingList
             isShowBalanceCard={!isSearching}
@@ -141,6 +158,9 @@ export const PortfolioWalletTokenList = () => {
         renderItem={({item}) => <TokenBalanceItem amount={item} />}
         contentContainerStyle={styles.container}
         ListEmptyComponent={() => <TokenEmptyList />}
+        onEndReached={handleOnEndReached}
+        onEndReachedThreshold={0.5}
+        estimatedItemSize={72}
       />
     </View>
   )
@@ -185,6 +205,8 @@ const SkeletonItem = () => {
   )
 }
 
+const batchSize = 50
+
 const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({

apps/wallet-mobile/src/features/ReviewTx/common/hooks/useOnConfirm.tsx

@@ -30,11 +30,17 @@ export const useOnConfirm = ({
   const navigateTo = useNavigateTo()
 
   const handleOnSuccess = (signedTx: YoroiSignedTx) => {
-    onSuccess?.(signedTx)
+    if (onSuccess) {
+      onSuccess(signedTx)
+      return
+    }
     navigateTo.showSubmittedTxScreen()
   }
   const handleOnError = () => {
-    onError?.()
+    if (onError) {
+      onError()
+      return
+    }
     navigateTo.showFailedTxScreen()
   }
 

apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx

@@ -81,6 +81,9 @@ export const useStrings = () => {
     operationsLabel: intl.formatMessage(messages.operationsLabel),
     policyIdLabel: intl.formatMessage(messages.policyIdLabel),
     createdBy: intl.formatMessage(messages.createdBy),
+    operationsLogTitle: intl.formatMessage(messages.operationsLogTitle),
+    operationsLogWarningText: intl.formatMessage(messages.operationsLogWarningText),
+    operationsLogWarningTitle: intl.formatMessage(messages.operationsLogWarningTitle),
   }
 }
 
@@ -309,6 +312,18 @@ const messages = defineMessages({
     id: 'txReview.operations.selectAbstain',
     defaultMessage: '!!!Select abstain',
   },
+  operationsLogTitle: {
+    id: 'txReview.operations.log.title',
+    defaultMessage: '!!!Operations log',
+  },
+  operationsLogWarningTitle: {
+    id: 'txReview.operations.warning.title',
+    defaultMessage: '!!!Unusual operations detected',
+  },
+  operationsLogWarningText: {
+    id: 'txReview.operations.warning.text',
+    defaultMessage: '!!!Please check the operations log before confirming this transaction.',
+  },
   selectNoConfidence: {
     id: 'txReview.operations.selectNoConfidence',
     defaultMessage: '!!!Select no confidence',