fix(wallet-mobile): tx review uat utxos tab (#3790)

Emurgo · Jan 15, 2025 · f4788dc · f4788dc
1 parent 1179457
commit f4788dc
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/ReviewTx.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/ReviewTx.tsx
@@ -14,7 +14,7 @@ import {
 
 import {Button} from '../../../../../components/Button/Button'
 import {SafeArea} from '../../../../../components/SafeArea'
-import {ScrollView} from '../../../../../components/ScrollView/ScrollView'
+import {ScrollView, useScrollView} from '../../../../../components/ScrollView/ScrollView'
 import {isEmptyString} from '../../../../../kernel/utils'
 import {useStrings} from '../../../common/hooks/useStrings'
 import {FormattedMetadata, FormattedTx} from '../../../common/types'
@@ -25,6 +25,7 @@ import {MintTab} from './Mint/MintTab'
 import {ReferenceInputsTab} from './ReferenceInputs/ReferenceInputs'
 
 const MaterialTab = createMaterialTopTabNavigator()
+type Tabs = 'overview' | 'utxos' | 'metadata' | 'mint' | 'reference_inputs'
 
 export const ReviewTx = ({
   formattedTx,
@@ -46,10 +47,11 @@ export const ReviewTx = ({
   const {styles} = useStyles()
   const strings = useStrings()
 
-  const tabsData = [
+  const tabsData: Array<[string, Tabs]> = [
     [strings.overviewTab, 'overview'],
     [strings.utxosTab, 'utxos'],
   ]
+  const [activeTab, setActiveTab] = React.useState<Tabs>(tabsData[0][1])
 
   const showMetadataTab = !isEmptyString(formattedMetadata?.hash) && formattedMetadata?.metadata != null
   const showMintTab = !!formattedTx.mint
@@ -59,12 +61,32 @@ export const ReviewTx = ({
   if (showMintTab) tabsData.push([strings.mintTab, 'mint'])
   if (showReferenceInoutsTab) tabsData.push([strings.referenceInputsTab, 'reference_inputs'])
 
+  // intentionally not using ref
+  const {isScrollBarShown: isOverviewScrollBarShown, setIsScrollBarShown: setOverviewIsScrollBarShown} = useScrollView()
+  const {isScrollBarShown: isUtxosScrollBarShown, setIsScrollBarShown: setUtxosIsScrollBarShown} = useScrollView()
+  const {isScrollBarShown: isMetadataScrollBarShown, setIsScrollBarShown: setMetadataIsScrollBarShown} = useScrollView()
+  const {isScrollBarShown: isMintScrollBarShown, setIsScrollBarShown: setMintIsScrollBarShown} = useScrollView()
+  const {isScrollBarShown: isReferenceInputsScrollBarShown, setIsScrollBarShown: setReferenceInputsIsScrollBarShown} =
+    useScrollView()
+
+  const scrollbarActive =
+    (isOverviewScrollBarShown && activeTab === 'overview') ||
+    (isUtxosScrollBarShown && activeTab === 'utxos') ||
+    (isMetadataScrollBarShown && activeTab === 'metadata') ||
+    (isMintScrollBarShown && activeTab === 'mint') ||
+    (isReferenceInputsScrollBarShown && activeTab === 'reference_inputs')
+
   return (
     <SafeArea style={styles.root}>
-      <MaterialTab.Navigator tabBar={(props) => <TabBar {...props} tabsData={tabsData} />}>
+      <MaterialTab.Navigator
+        tabBar={(props) => {
+          setActiveTab(tabsData[props.state.index][1])
+          return <TabBar {...props} tabsData={tabsData} />
+        }}
+      >
         <MaterialTab.Screen name="overview">
           {() => (
-            <ScrollView style={styles.root}>
+            <ScrollView style={styles.root} onScrollBarChange={setOverviewIsScrollBarShown}>
               <OverviewTab
                 tx={formattedTx}
                 extraOperations={operations}
@@ -78,7 +100,7 @@ export const ReviewTx = ({
 
         <MaterialTab.Screen name="utxos">
           {() => (
-            <ScrollView style={styles.root}>
+            <ScrollView style={styles.root} onScrollBarChange={setUtxosIsScrollBarShown}>
               <UTxOsTab tx={formattedTx} />
             </ScrollView>
           )}
@@ -87,7 +109,7 @@ export const ReviewTx = ({
         {showMetadataTab && (
           <MaterialTab.Screen name="metadata">
             {() => (
-              <ScrollView style={styles.root}>
+              <ScrollView style={styles.root} onScrollBarChange={setMetadataIsScrollBarShown}>
                 <MetadataTab hash={formattedMetadata?.hash ?? null} metadata={formattedMetadata?.metadata ?? null} />
               </ScrollView>
             )}
@@ -97,7 +119,7 @@ export const ReviewTx = ({
         {showMintTab && (
           <MaterialTab.Screen name="mint">
             {() => (
-              <ScrollView style={styles.root}>
+              <ScrollView style={styles.root} onScrollBarChange={setMintIsScrollBarShown}>
                 <MintTab mintData={formattedTx.mint} />
               </ScrollView>
             )}
@@ -107,15 +129,15 @@ export const ReviewTx = ({
         {showReferenceInoutsTab && (
           <MaterialTab.Screen name="reference_inputs">
             {() => (
-              <ScrollView style={styles.root}>
+              <ScrollView style={styles.root} onScrollBarChange={setReferenceInputsIsScrollBarShown}>
                 <ReferenceInputsTab referenceInputs={formattedTx.referenceInputs} />
               </ScrollView>
             )}
           </MaterialTab.Screen>
         )}
       </MaterialTab.Navigator>
 
-      <Actions>
+      <Actions style={scrollbarActive && styles.actionsScroll}>
         <Button title={strings.confirm} onPress={onConfirm} />
       </Actions>
     </SafeArea>
@@ -206,6 +228,10 @@ const useStyles = () => {
       width: '100%',
       backgroundColor: color.el_primary_medium,
     },
+    actionsScroll: {
+      ...atoms.border_t,
+      borderTopColor: color.gray_200,
+    },
   })
 
   const colors = {

diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/UTxOs/UTxOsTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/UTxOs/UTxOsTab.tsx
@@ -31,6 +31,8 @@ export const UTxOsTab = ({tx}: {tx: FormattedTx}) => {
       <Accordion label={`${strings.utxosOutputsLabel} (${tx.outputs.length})`}>
         <Outputs outputs={tx.outputs} />
       </Accordion>
+
+      <Space height="lg" />
     </View>
   )
 }
@@ -176,7 +178,7 @@ const useStyles = () => {
     utxoTitleCircleInput: {
       width: 12,
       height: 12,
-      backgroundColor: color.primary_500,
+      backgroundColor: color.el_primary_medium,
       ...atoms.rounded_full,
     },
     utxoTitleCircleOutput: {