11import * as Haptics from "expo-haptics" ;
22import { Image } from "expo-image" ;
33import { router , UnknownOutputParams , useLocalSearchParams } from "expo-router" ;
4- import React , { useEffect , useRef } from "react" ;
5- import { Animated , Dimensions , StyleSheet , View } from "react-native" ;
4+ import React , { useEffect } from "react" ;
5+ import { StyleSheet , View } from "react-native" ;
66import { useSafeAreaInsets } from "react-native-safe-area-context" ;
77
88import { Button } from "@/components/button" ;
@@ -11,11 +11,6 @@ import { BorderRadius, Spacing } from "@/constants/spacing";
1111import { useTheme } from "@/hooks/use-theme-color" ;
1212import { TokenKey } from "@/utils/networks" ;
1313
14- const { width : screenWidth , height : screenHeight } = Dimensions . get ( "window" ) ;
15- const diagonalLength = Math . sqrt ( screenWidth ** 2 + screenHeight ** 2 ) ;
16- const initialCircleSize = 20 ;
17- const finalScale = Math . round ( diagonalLength / initialCircleSize ) + 1 ;
18-
1914interface ScreenParams extends UnknownOutputParams {
2015 amount : string ;
2116 token : TokenKey ;
@@ -28,9 +23,6 @@ export default function PaymentSuccessScreen() {
2823 const insets = useSafeAreaInsets ( ) ;
2924 const params = useLocalSearchParams < ScreenParams > ( ) ;
3025
31- const circleScale = useRef ( new Animated . Value ( 1 ) ) . current ;
32- const contentOpacity = useRef ( new Animated . Value ( 0 ) ) . current ;
33-
3426 const handleRetry = ( ) => {
3527 const { amount, token, networkCaipId, recipientAddress } = params ;
3628 router . dismissTo ( {
@@ -46,93 +38,46 @@ export default function PaymentSuccessScreen() {
4638
4739 useEffect ( ( ) => {
4840 Haptics . impactAsync ( Haptics . ImpactFeedbackStyle . Heavy ) ;
49-
50- Animated . parallel ( [
51- Animated . spring ( circleScale , {
52- toValue : finalScale ,
53- tension : 15 ,
54- friction : 12 ,
55- useNativeDriver : true ,
56- } ) ,
57- Animated . sequence ( [
58- Animated . delay ( 300 ) ,
59- Animated . timing ( contentOpacity , {
60- toValue : 1 ,
61- duration : 400 ,
62- useNativeDriver : true ,
63- } ) ,
64- ] ) ,
65- ] ) . start ( ) ;
66- // eslint-disable-next-line react-hooks/exhaustive-deps
6741 } , [ ] ) ;
6842
6943 return (
7044 < View style = { [ styles . container , { paddingTop : insets . top } ] } >
71- { /* Expanding circle background */ }
72- < Animated . View
73- style = { [
74- styles . circle ,
75- {
76- backgroundColor : Theme [ "bg-primary" ] ,
77- width : initialCircleSize ,
78- height : initialCircleSize ,
79- borderRadius : initialCircleSize / 2 ,
80- transform : [ { scale : circleScale } ] ,
81- } ,
82- ] }
83- />
84-
85- { /* Content that fades in after circle expands */ }
86- < Animated . View
87- style = { [
88- styles . contentContainer ,
89- {
90- opacity : contentOpacity ,
91- } ,
92- ] }
93- >
94- < View
95- style = { { flex : 1 , justifyContent : "center" , alignItems : "center" } }
45+ < View style = { { flex : 1 , justifyContent : "center" , alignItems : "center" } } >
46+ < Image
47+ source = { { uri : "warning_circle" } }
48+ style = { [ styles . warningCircle , { tintColor : Theme [ "icon-error" ] } ] }
49+ cachePolicy = "memory-disk"
50+ priority = "high"
51+ />
52+ < ThemedText
53+ style = { [ styles . failedText , { color : Theme [ "text-primary" ] } ] }
54+ >
55+ Payment failed
56+ </ ThemedText >
57+ < ThemedText
58+ style = { [ styles . failedDescription , { color : Theme [ "text-secondary" ] } ] }
59+ >
60+ The payment couldn't be completed due to an error. Please try again or
61+ use a different payment method.
62+ </ ThemedText >
63+ </ View >
64+ < View style = { styles . buttonContainer } >
65+ < Button
66+ onPress = { handleRetry }
67+ style = { [
68+ styles . button ,
69+ {
70+ backgroundColor : Theme [ "bg-accent-primary" ] ,
71+ } ,
72+ ] }
9673 >
97- < Image
98- source = { require ( "@/assets/images/warning-circle.png" ) }
99- style = { [ styles . warningCircle , { tintColor : Theme [ "icon-error" ] } ] }
100- cachePolicy = "memory-disk"
101- priority = "high"
102- />
103- < ThemedText
104- style = { [ styles . failedText , { color : Theme [ "text-primary" ] } ] }
105- >
106- Payment failed
107- </ ThemedText >
10874 < ThemedText
109- style = { [
110- styles . failedDescription ,
111- { color : Theme [ "text-secondary" ] } ,
112- ] }
75+ style = { [ styles . buttonText , { color : Theme [ "text-invert" ] } ] }
11376 >
114- The payment couldn’t be completed due to an error. Please try again
115- or use a different payment method.
77+ Try again
11678 </ ThemedText >
117- </ View >
118- < View style = { styles . buttonContainer } >
119- < Button
120- onPress = { handleRetry }
121- style = { [
122- styles . button ,
123- {
124- backgroundColor : Theme [ "bg-accent-primary" ] ,
125- } ,
126- ] }
127- >
128- < ThemedText
129- style = { [ styles . buttonText , { color : Theme [ "text-invert" ] } ] }
130- >
131- Try again
132- </ ThemedText >
133- </ Button >
134- </ View >
135- </ Animated . View >
79+ </ Button >
80+ </ View >
13681 </ View >
13782 ) ;
13883}
@@ -143,17 +88,6 @@ const styles = StyleSheet.create({
14388 paddingHorizontal : Spacing [ "spacing-5" ] ,
14489 paddingBottom : Spacing [ "spacing-5" ] ,
14590 } ,
146- circle : {
147- position : "absolute" ,
148- top : "50%" ,
149- left : "50%" ,
150- marginLeft : - initialCircleSize / 2 ,
151- marginTop : - initialCircleSize / 2 ,
152- } ,
153- contentContainer : {
154- flex : 1 ,
155- width : "100%" ,
156- } ,
15791 failedText : {
15892 fontSize : 26 ,
15993 lineHeight : 28 ,
0 commit comments