Skip to content

Commit 82900d0

Browse files
stackchainstackchain
authored
feat(wallet-mobile): send feature new tx review (#3643)
2 parents 57f3abb + 37ee230 commit 82900d0

File tree

36 files changed

+2971
-367
lines changed

36 files changed

+2971
-367
lines changed

‎apps/wallet-mobile/.storybook/storybook.requires.js

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/wallet-mobile/src/WalletNavigator.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {useLinksShowActionResult} from './features/Links/common/useLinksShowActi
2424
import {MenuNavigator} from './features/Menu/Menu'
2525
import {PortfolioNavigator} from './features/Portfolio/PortfolioNavigator'
2626
import {CatalystNavigator} from './features/RegisterCatalyst/CatalystNavigator'
27+
import {ReviewTxNavigator} from './features/ReviewTx/ReviewTxNavigator'
2728
import {SearchProvider} from './features/Search/SearchContext'
2829
import {SettingsScreenNavigator} from './features/Settings'
2930
import {NetworkTag} from './features/Settings/ChangeNetwork/NetworkTag'
@@ -258,6 +259,8 @@ export const WalletNavigator = () => {
258259

259260
<Stack.Screen name="settings" options={{headerShown: false}} component={SettingsScreenNavigator} />
260261

262+
<Stack.Screen name="review-tx-routes" options={{headerShown: false}} component={ReviewTxNavigator} />
263+
261264
<Stack.Screen
262265
name="voting-registration"
263266
options={{headerShown: false}}
@@ -296,7 +299,7 @@ const useStyles = () => {
296299
divider: color.gray_200,
297300
}
298301

299-
return {colors, styles}
302+
return {colors, styles} as const
300303
}
301304

302305
const messages = defineMessages({

‎apps/wallet-mobile/src/components/Icon/Direction.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ThemedPalette, useTheme} from '@yoroi/theme'
22
import React from 'react'
3-
import {StyleSheet, View} from 'react-native'
3+
import {StyleSheet, View, ViewStyle} from 'react-native'
44

55
import {TransactionDirection, TransactionInfo} from '../../yoroi-wallets/types/other'
66
import {Received} from '../Icon/Received'
@@ -11,17 +11,18 @@ import {MultiParty} from './MultiParty'
1111
type Props = {
1212
transaction: TransactionInfo
1313
size?: number
14+
containerStyle?: ViewStyle
1415
}
1516

16-
export const Direction = ({transaction, size = defaultSize}: Props) => {
17+
export const Direction = ({transaction, size = defaultSize, containerStyle}: Props) => {
1718
const {color} = useTheme()
1819
const {direction} = transaction
1920

2021
const iconStyles = styleMap(color)[direction]
2122
const IconComponent = iconMap[direction]
2223

2324
return (
24-
<View style={[styles.icon, {backgroundColor: iconStyles?.background}]}>
25+
<View style={[styles.icon, {backgroundColor: iconStyles?.background}, containerStyle]}>
2526
<IconComponent color={iconStyles?.icon} size={iconStyles.size ?? size} />
2627
</View>
2728
)

‎apps/wallet-mobile/src/components/Info/Info.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {useTheme} from '@yoroi/theme'
2+
import React, {ReactNode} from 'react'
3+
import {StyleSheet, Text, View} from 'react-native'
4+
5+
import {Icon} from '../Icon'
6+
import {Space} from '../Space/Space'
7+
8+
type Props = {
9+
content: ReactNode
10+
iconSize?: number
11+
}
12+
13+
export const Info = ({content, iconSize = 30}: Props) => {
14+
const {styles, colors} = useStyles()
15+
16+
return (
17+
<View style={styles.notice}>
18+
<Icon.Info size={iconSize} color={colors.blue} />
19+
20+
<Space height="sm" />
21+
22+
<Text style={styles.text}>{content}</Text>
23+
</View>
24+
)
25+
}
26+
27+
const useStyles = () => {
28+
const {color, atoms} = useTheme()
29+
const styles = StyleSheet.create({
30+
notice: {
31+
backgroundColor: color.sys_cyan_100,
32+
...atoms.p_md,
33+
...atoms.rounded_sm,
34+
},
35+
text: {
36+
...atoms.body_2_md_regular,
37+
color: color.text_gray_max,
38+
},
39+
})
40+
41+
const colors = {
42+
yellow: color.sys_orange_500,
43+
blue: color.primary_500,
44+
}
45+
46+
return {colors, styles} as const
47+
}

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

+7-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import {StyleSheet, Text, View} from 'react-native'
55
import {Icon} from '../Icon'
66
import {Space} from '../Space/Space'
77

8-
type Props = {content: ReactNode; iconSize?: number}
8+
type Props = {
9+
content: ReactNode
10+
iconSize?: number
11+
}
912

1013
export const Warning = ({content, iconSize = 30}: Props) => {
1114
const {styles, colors} = useStyles()
@@ -26,8 +29,8 @@ const useStyles = () => {
2629
const styles = StyleSheet.create({
2730
notice: {
2831
backgroundColor: color.sys_yellow_100,
29-
padding: 12,
30-
borderRadius: 8,
32+
...atoms.p_md,
33+
...atoms.rounded_sm,
3134
},
3235
text: {
3336
...atoms.body_2_md_regular,
@@ -39,5 +42,5 @@ const useStyles = () => {
3942
yellow: color.sys_orange_500,
4043
}
4144

42-
return {colors, styles}
45+
return {colors, styles} as const
4346
}

‎apps/wallet-mobile/src/features/Discover/useCases/ReviewTransaction/ReviewTransaction.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,7 @@ const useConnectorPromptRootKey = () => {
447447
}, [promptRootKey])
448448
}
449449

450-
const useSignTxWithHW = () => {
450+
export const useSignTxWithHW = () => {
451451
const {confirmHWConnection, closeModal} = useConfirmHWConnectionModal()
452452
const {wallet, meta} = useSelectedWallet()
453453

‎apps/wallet-mobile/src/features/ReviewTx/ReviewTxNavigator.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {createStackNavigator} from '@react-navigation/stack'
2+
import {Atoms, ThemedPalette, useTheme} from '@yoroi/theme'
3+
import React from 'react'
4+
5+
import {Boundary} from '../../components/Boundary/Boundary'
6+
import {defaultStackNavigationOptions, ReviewTxRoutes} from '../../kernel/navigation'
7+
import {useStrings} from './common/hooks/useStrings'
8+
import {ReviewTxScreen} from './useCases/ReviewTxScreen/ReviewTxScreen'
9+
10+
export const Stack = createStackNavigator<ReviewTxRoutes>()
11+
12+
export const ReviewTxNavigator = () => {
13+
const {atoms, color} = useTheme()
14+
const strings = useStrings()
15+
16+
return (
17+
<Stack.Navigator
18+
screenOptions={{
19+
...screenOptions(atoms, color),
20+
}}
21+
>
22+
<Stack.Screen name="review-tx" options={{title: strings.title}}>
23+
{() => (
24+
<Boundary>
25+
<ReviewTxScreen />
26+
</Boundary>
27+
)}
28+
</Stack.Screen>
29+
</Stack.Navigator>
30+
)
31+
}
32+
33+
const screenOptions = (atoms: Atoms, color: ThemedPalette) => ({
34+
...defaultStackNavigationOptions(atoms, color),
35+
gestureEnabled: true,
36+
})

‎apps/wallet-mobile/src/features/ReviewTx/common/Address.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {useTheme} from '@yoroi/theme'
2+
import * as React from 'react'
3+
import {StyleSheet, Text, TextStyle, TouchableOpacity, View} from 'react-native'
4+
5+
import {Icon} from '../../../components/Icon'
6+
import {Space} from '../../../components/Space/Space'
7+
import {useCopy} from '../../../hooks/useCopy'
8+
9+
export const Address = ({
10+
address,
11+
index,
12+
textStyle,
13+
multiline = false,
14+
}: {
15+
address: string
16+
index?: number
17+
textStyle?: TextStyle
18+
multiline?: boolean
19+
}) => {
20+
const {styles, colors} = useStyles()
21+
const [, copy] = useCopy()
22+
23+
return (
24+
<View style={styles.address}>
25+
<Text
26+
style={[styles.addressText, textStyle]}
27+
numberOfLines={!multiline ? 1 : undefined}
28+
ellipsizeMode={!multiline ? 'middle' : undefined}
29+
>
30+
{address}
31+
</Text>
32+
33+
{index !== undefined && (
34+
<>
35+
<Space width="sm" />
36+
37+
<Text style={styles.index}>{`#${index}`}</Text>
38+
39+
<Space width="sm" />
40+
</>
41+
)}
42+
43+
<TouchableOpacity onPress={() => copy(address)} activeOpacity={0.5}>
44+
<Icon.Copy size={24} color={colors.copy} />
45+
</TouchableOpacity>
46+
</View>
47+
)
48+
}
49+
50+
const useStyles = () => {
51+
const {atoms, color} = useTheme()
52+
const styles = StyleSheet.create({
53+
address: {
54+
...atoms.flex_row,
55+
...atoms.justify_between,
56+
},
57+
addressText: {
58+
...atoms.flex_1,
59+
...atoms.body_2_md_regular,
60+
color: color.text_gray_medium,
61+
},
62+
index: {
63+
...atoms.body_2_md_medium,
64+
color: color.text_gray_medium,
65+
},
66+
})
67+
68+
const colors = {
69+
copy: color.gray_900,
70+
}
71+
72+
return {styles, colors} as const
73+
}

‎apps/wallet-mobile/src/features/ReviewTx/common/CollapsibleSection.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {useTheme} from '@yoroi/theme'
2+
import * as React from 'react'
3+
import {Animated, LayoutAnimation, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
4+
5+
import {Icon} from '../../../components/Icon'
6+
7+
export const CollapsibleSection = ({label, children}: {label: string; children: React.ReactNode}) => {
8+
const {styles, colors} = useStyles()
9+
const [isOpen, setIsOpen] = React.useState(false)
10+
const animatedHeight = React.useRef(new Animated.Value(0)).current
11+
12+
const toggleSection = () => {
13+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
14+
setIsOpen(!isOpen)
15+
Animated.timing(animatedHeight, {
16+
toValue: isOpen ? 0 : 1,
17+
duration: 300,
18+
useNativeDriver: false,
19+
}).start()
20+
}
21+
22+
return (
23+
<>
24+
<View style={styles.sectionHeader}>
25+
<Text style={styles.sectionHeaderText}>{label}</Text>
26+
27+
<TouchableOpacity activeOpacity={0.5} onPress={toggleSection}>
28+
<Icon.Chevron direction={isOpen ? 'up' : 'down'} size={28} color={colors.chevron} />
29+
</TouchableOpacity>
30+
</View>
31+
32+
<Animated.View
33+
style={[
34+
styles.childrenContainer,
35+
{
36+
maxHeight: animatedHeight.interpolate({
37+
inputRange: [0, 1],
38+
outputRange: [0, 1000],
39+
}),
40+
opacity: animatedHeight,
41+
},
42+
]}
43+
>
44+
{children}
45+
</Animated.View>
46+
</>
47+
)
48+
}
49+
50+
const useStyles = () => {
51+
const {atoms, color} = useTheme()
52+
const styles = StyleSheet.create({
53+
sectionHeader: {
54+
...atoms.flex_row,
55+
...atoms.justify_between,
56+
},
57+
sectionHeaderText: {
58+
...atoms.body_1_lg_medium,
59+
color: color.text_gray_medium,
60+
},
61+
childrenContainer: {
62+
overflow: 'hidden',
63+
},
64+
})
65+
66+
const colors = {
67+
chevron: color.gray_900,
68+
}
69+
70+
return {styles, colors} as const
71+
}

‎apps/wallet-mobile/src/features/ReviewTx/common/Divider.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {SpacingSize, useTheme} from '@yoroi/theme'
2+
import * as React from 'react'
3+
import {StyleSheet, View} from 'react-native'
4+
5+
import {Space} from '../../../components/Space/Space'
6+
7+
export const Divider = ({verticalSpace = 'none'}: {verticalSpace?: SpacingSize}) => {
8+
const {styles} = useStyles()
9+
return (
10+
<>
11+
<Space height={verticalSpace} />
12+
13+
<View style={styles.divider} />
14+
15+
<Space height={verticalSpace} />
16+
</>
17+
)
18+
}
19+
20+
const useStyles = () => {
21+
const {atoms, color} = useTheme()
22+
const styles = StyleSheet.create({
23+
divider: {
24+
height: 1,
25+
...atoms.align_stretch,
26+
backgroundColor: color.gray_200,
27+
},
28+
})
29+
30+
return {styles} as const
31+
}

0 commit comments

Comments
 (0)