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 index 8b9806c9b5..dda6424a28 100644 --- 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(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 ( - }> + { + setActiveTab(tabsData[props.state.index][1]) + return + }} + > {() => ( - + {() => ( - + )} @@ -87,7 +109,7 @@ export const ReviewTx = ({ {showMetadataTab && ( {() => ( - + )} @@ -97,7 +119,7 @@ export const ReviewTx = ({ {showMintTab && ( {() => ( - + )} @@ -107,7 +129,7 @@ export const ReviewTx = ({ {showReferenceInoutsTab && ( {() => ( - + )} @@ -115,7 +137,7 @@ export const ReviewTx = ({ )} - +