Skip to content

Commit a63d575

Browse files
ignaciosantiseignaciosantise
committed
chore: use pressto buttons
1 parent 57161cb commit a63d575

File tree

4 files changed

+95
-110
lines changed

4 files changed

+95
-110
lines changed

‎dapps/pos-app/app/_layout.tsx‎

Lines changed: 69 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import "@walletconnect/react-native-compat";
77
import { Stack } from "expo-router";
88
import { StatusBar } from "expo-status-bar";
9+
import { GestureHandlerRootView } from "react-native-gesture-handler";
910
import "react-native-reanimated";
1011
import Toast from "react-native-toast-message";
1112
import { WagmiProvider } from "wagmi";
@@ -62,73 +63,76 @@ export default Sentry.wrap(function RootLayout() {
6263
});
6364

6465
return (
65-
<AppKitProvider instance={appKit}>
66-
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
67-
<QueryClientProvider client={queryClient}>
68-
<ThemeProvider
69-
value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
70-
>
71-
<POSProvider posClient={posClient} isInitialized={isInitialized}>
72-
<Stack
73-
screenOptions={({ route }) => {
74-
const centerTitle =
75-
route.name === "index" || route.name === "payment-success";
76-
const isPaymentSuccess = route.name === "payment-success";
77-
const headerBackgroundColor = isPaymentSuccess
78-
? Theme["text-success"]
79-
: Theme["bg-primary"];
66+
<GestureHandlerRootView>
67+
<AppKitProvider instance={appKit}>
68+
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
69+
<QueryClientProvider client={queryClient}>
70+
<ThemeProvider
71+
value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
72+
>
73+
<POSProvider posClient={posClient} isInitialized={isInitialized}>
74+
<Stack
75+
screenOptions={({ route }) => {
76+
const centerTitle =
77+
route.name === "index" ||
78+
route.name === "payment-success";
79+
const isPaymentSuccess = route.name === "payment-success";
80+
const headerBackgroundColor = isPaymentSuccess
81+
? Theme["text-success"]
82+
: Theme["bg-primary"];
8083

81-
const headerTintColor = isPaymentSuccess
82-
? Theme["text-invert"]
83-
: Theme["text-primary"];
84+
const headerTintColor = isPaymentSuccess
85+
? Theme["text-invert"]
86+
: Theme["text-primary"];
8487

85-
return {
86-
headerTitle: centerTitle ? HeaderImage : "",
87-
headerRight: !centerTitle
88-
? () => (
89-
<HeaderImage padding tintColor={headerTintColor} />
90-
)
91-
: undefined,
92-
headerShadowVisible: false,
93-
headerTintColor,
94-
headerBackButtonDisplayMode: "minimal",
95-
headerTitleAlign: "center",
96-
headerStyle: {
97-
backgroundColor: headerBackgroundColor,
98-
},
99-
contentStyle: {
100-
backgroundColor: Theme["bg-primary"],
101-
paddingBottom: bottom,
102-
},
103-
};
104-
}}
105-
>
106-
<Stack.Screen name="index" />
107-
<Stack.Screen
108-
name="settings"
109-
options={{
110-
title: "",
88+
return {
89+
headerTitle: centerTitle ? HeaderImage : "",
90+
headerRight: !centerTitle
91+
? () => (
92+
<HeaderImage padding tintColor={headerTintColor} />
93+
)
94+
: undefined,
95+
headerShadowVisible: false,
96+
headerTintColor,
97+
headerBackButtonDisplayMode: "minimal",
98+
headerTitleAlign: "center",
99+
headerStyle: {
100+
backgroundColor: headerBackgroundColor,
101+
},
102+
contentStyle: {
103+
backgroundColor: Theme["bg-primary"],
104+
paddingBottom: bottom,
105+
},
106+
};
111107
}}
112-
/>
113-
<Stack.Screen name="amount" />
114-
<Stack.Screen name="payment-method" />
115-
<Stack.Screen name="payment-token" />
116-
<Stack.Screen name="payment-network" />
117-
<Stack.Screen name="scan" />
118-
<Stack.Screen
119-
name="payment-success"
120-
options={{
121-
headerBackVisible: false,
122-
}}
123-
/>
124-
</Stack>
125-
<StatusBar style="auto" />
126-
<AppKit />
127-
</POSProvider>
128-
<Toast />
129-
</ThemeProvider>
130-
</QueryClientProvider>
131-
</WagmiProvider>
132-
</AppKitProvider>
108+
>
109+
<Stack.Screen name="index" />
110+
<Stack.Screen
111+
name="settings"
112+
options={{
113+
title: "",
114+
}}
115+
/>
116+
<Stack.Screen name="amount" />
117+
<Stack.Screen name="payment-method" />
118+
<Stack.Screen name="payment-token" />
119+
<Stack.Screen name="payment-network" />
120+
<Stack.Screen name="scan" />
121+
<Stack.Screen
122+
name="payment-success"
123+
options={{
124+
headerBackVisible: false,
125+
}}
126+
/>
127+
</Stack>
128+
<StatusBar style="auto" />
129+
<AppKit />
130+
</POSProvider>
131+
<Toast />
132+
</ThemeProvider>
133+
</QueryClientProvider>
134+
</WagmiProvider>
135+
</AppKitProvider>
136+
</GestureHandlerRootView>
133137
);
134138
});

‎dapps/pos-app/components/button.tsx‎

Lines changed: 7 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,17 @@
1+
import { PressableScale } from "pressto";
12
import React from "react";
2-
import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
3-
import Animated, {
4-
useAnimatedStyle,
5-
useSharedValue,
6-
withSpring,
7-
withTiming,
8-
} from "react-native-reanimated";
3+
import { StyleProp, ViewStyle } from "react-native";
94

10-
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
11-
12-
interface ButtonProps extends Omit<PressableProps, "style"> {
5+
interface Props {
136
children: React.ReactNode;
147
style?: StyleProp<ViewStyle>;
15-
zoomScale?: number;
8+
onPress: () => void;
169
}
1710

18-
export const Button: React.FC<ButtonProps> = ({
19-
children,
20-
style,
21-
zoomScale = 0.99,
22-
...props
23-
}) => {
24-
const scale = useSharedValue(1);
25-
26-
const handlePressIn = () => {
27-
scale.value = withSpring(zoomScale, {
28-
damping: 20,
29-
stiffness: 400,
30-
});
31-
};
32-
33-
const handlePressOut = () => {
34-
scale.value = withTiming(1, {
35-
duration: 150,
36-
});
37-
};
38-
39-
const animatedStyle = useAnimatedStyle(() => {
40-
return {
41-
transform: [{ scale: scale.value }],
42-
};
43-
});
44-
11+
export const Button: React.FC<Props> = ({ children, style, onPress }) => {
4512
return (
46-
<AnimatedPressable
47-
onPressIn={handlePressIn}
48-
onPressOut={handlePressOut}
49-
style={[style, animatedStyle]}
50-
{...props}
51-
>
13+
<PressableScale style={style} onPress={onPress}>
5214
{children}
53-
</AnimatedPressable>
15+
</PressableScale>
5416
);
5517
};

‎dapps/pos-app/package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dapps/pos-app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"expo-symbols": "~1.0.7",
4040
"expo-system-ui": "~6.0.7",
4141
"expo-web-browser": "~15.0.8",
42+
"pressto": "^0.6.0",
4243
"qrcode": "^1.5.4",
4344
"react": "19.1.0",
4445
"react-dom": "19.1.0",

0 commit comments

Comments
 (0)