diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx index f12300eeee..2c7b5f7117 100644 --- a/apps/wallet-mobile/src/components/Button/Button.tsx +++ b/apps/wallet-mobile/src/components/Button/Button.tsx @@ -96,7 +96,7 @@ const useStyles = ({ pressed: color.text_primary_max, disabled: color.text_primary_min, }, - [ButtonType.Critical]: {idle: color.white_static, pressed: color.white_static, disabled: color.white_static}, + [ButtonType.Critical]: {idle: color.gray_min, pressed: color.gray_min, disabled: color.gray_min}, [ButtonType.Text]: { idle: color.text_primary_medium, pressed: color.text_primary_max, diff --git a/apps/wallet-mobile/src/components/Icon/TotalAda.tsx b/apps/wallet-mobile/src/components/Icon/TotalAda.tsx index a23c306fbb..f6cab180a1 100644 --- a/apps/wallet-mobile/src/components/Icon/TotalAda.tsx +++ b/apps/wallet-mobile/src/components/Icon/TotalAda.tsx @@ -1,38 +1,43 @@ +import {useTheme} from '@yoroi/theme' import React from 'react' import Svg, {Circle, G, Path} from 'react-native-svg' import {IconProps} from './type' -export const TotalAda = ({size = 44, color = 'black'}: IconProps) => ( - - - - - +export const TotalAda = ({size = 44, color = 'black'}: IconProps) => { + const {color: colors, isDark} = useTheme() - - - + return ( + + + + + - + + - + + + + + - - -) + + ) +} diff --git a/apps/wallet-mobile/src/components/Icon/TotalDelegated.tsx b/apps/wallet-mobile/src/components/Icon/TotalDelegated.tsx index 7bbf2c373d..7e0692e9ce 100644 --- a/apps/wallet-mobile/src/components/Icon/TotalDelegated.tsx +++ b/apps/wallet-mobile/src/components/Icon/TotalDelegated.tsx @@ -1,49 +1,54 @@ +import {useTheme} from '@yoroi/theme' import React from 'react' import Svg, {Circle, G, Path} from 'react-native-svg' import {IconProps} from './type' -export const TotalDelegated = ({size = 44, color = 'black'}: IconProps) => ( - - - - - - - - +export const TotalDelegated = ({size = 44, color = 'black'}: IconProps) => { + const {color: colors, isDark} = useTheme() - - + return ( + + + + + + - - - + + - - + + - - + + - + + + + + + + + - - -) + + ) +} diff --git a/apps/wallet-mobile/src/components/Icon/TotalReward.tsx b/apps/wallet-mobile/src/components/Icon/TotalReward.tsx index 7a80d8824f..5656ed8bd3 100644 --- a/apps/wallet-mobile/src/components/Icon/TotalReward.tsx +++ b/apps/wallet-mobile/src/components/Icon/TotalReward.tsx @@ -1,35 +1,40 @@ +import {useTheme} from '@yoroi/theme' import React from 'react' import Svg, {Circle, G, Path} from 'react-native-svg' import {IconProps} from './type' -export const TotalReward = ({size = 44, color = 'black'}: IconProps) => ( - - - - - +export const TotalReward = ({size = 44, color = 'black'}: IconProps) => { + const {color: colors, isDark} = useTheme() + + return ( + + + + + - - + + - + - + + - - -) + + ) +} diff --git a/apps/wallet-mobile/src/components/Info/Info.tsx b/apps/wallet-mobile/src/components/Info/Info.tsx index b4272cc14e..0cad9bef29 100644 --- a/apps/wallet-mobile/src/components/Info/Info.tsx +++ b/apps/wallet-mobile/src/components/Info/Info.tsx @@ -40,7 +40,7 @@ const useStyles = () => { const colors = { yellow: color.sys_orange_500, - blue: color.primary_500, + blue: color.el_primary_medium, } return {colors, styles} as const diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx index 45dea2a1e6..e72a49e84a 100644 --- a/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx +++ b/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx @@ -4,6 +4,7 @@ import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native' import {useCopy} from '../../../components/Clipboard/ClipboardProvider' import {Icon} from '../../../components/Icon' +import {Space} from '../../../components/Space/Space' export const CopiableText = ({ children, @@ -20,6 +21,8 @@ export const CopiableText = ({ {children} + + ) @@ -30,7 +33,7 @@ export const CopyButton = ({textToCopy}: {textToCopy: string}) => { const {copy} = useCopy() return ( copy({text: textToCopy})} activeOpacity={0.5}> - + ) } diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx index fa86831745..57d10d6a3d 100644 --- a/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx +++ b/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx @@ -140,7 +140,7 @@ const Overview = ({ if (info.type === 'ft') { return ( - + @@ -150,17 +150,17 @@ const Overview = ({ - + ) } return ( - + - + ) } diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/TokenItem.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/TokenItem.tsx index fabea93b81..54423fd055 100644 --- a/apps/wallet-mobile/src/features/ReviewTx/common/TokenItem.tsx +++ b/apps/wallet-mobile/src/features/ReviewTx/common/TokenItem.tsx @@ -1,7 +1,7 @@ import {useTheme} from '@yoroi/theme' import {Portfolio} from '@yoroi/types' import * as React from 'react' -import {StyleSheet, Text, TouchableOpacity, useWindowDimensions} from 'react-native' +import {ScrollView, StyleSheet, Text, TouchableOpacity, useWindowDimensions} from 'react-native' import {useModal} from '../../../components/Modal/ModalContext' import {useStrings} from './hooks/useStrings' @@ -24,7 +24,13 @@ export const TokenItem = ({ const {height: windowHeight} = useWindowDimensions() const handleShowTokenDetails = () => { - openModal(strings.tokenDetailsTitle, , windowHeight * 0.8) + openModal( + strings.tokenDetailsTitle, + + + , + windowHeight * 0.8, + ) } if (!isSent) diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx index 1d42b47eb4..70f3279bf1 100644 --- a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx +++ b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx @@ -116,7 +116,7 @@ const WalletInfoSection = ({tx, createdBy}: {tx: FormattedTx; createdBy?: React. - + {`${plate} | ${meta.name}`} @@ -177,7 +177,13 @@ const MyWalletSection = ({ {address} - {ownedOutputs[0]?.addressKind === CredKind.Script && } + {ownedOutputs[0]?.addressKind === CredKind.Script && ( + <> + + + + + )} @@ -273,12 +279,7 @@ const OneExternalPartySection = ({ - - {output?.addressKind === CredKind.Script && receiverCustomTitle == null - ? strings.receiveToScriptLabel - : strings.receiveToLabel} - : - + {strings.receiveToLabel}: {receiverCustomTitle ?? ( @@ -290,7 +291,13 @@ const OneExternalPartySection = ({ {address} - {output?.addressKind === CredKind.Script && } + {output?.addressKind === CredKind.Script && ( + <> + + + + + )} )} @@ -320,7 +327,13 @@ const MultiExternalPartiesSection = ({outputs}: {outputs: FormattedOutputs}) => {address} - {output?.addressKind === CredKind.Script && } + {output?.addressKind === CredKind.Script && ( + <> + + + + + )} @@ -489,7 +502,7 @@ export const CreatedByInfoItem = ({logo, url}: {logo?: string; url: string}) => {logo != null && } - + Linking.openURL(url)}> {url.replace(/^https?:\/\//, '').replace(/\/+$/, '')} @@ -678,7 +691,7 @@ const useStyles = () => { }) const colors = { - send: color.primary_500, + send: color.el_primary_medium, received: color.green_static, icon: color.el_gray_medium, } 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 00e58ebfab..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 = ({ )} - +