Skip to content

feat: swipe to change wallets #265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
im-adithya wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

feat: swipe to change wallets #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e589fd2
feat: swipe to change wallets
im-adithya Feb 7, 2025
00c602e
Merge branch 'master' into task-swipe
im-adithya Feb 20, 2025
227caa5
chore: do not force balance refresh
im-adithya Feb 20, 2025
f2cc4bd
chore: add gesturewrapper with wiggle animation
im-adithya Feb 21, 2025
29dfb64
Merge branch 'master' into task-swipe
im-adithya Feb 25, 2025
ad52652
chore: use expo compatible version
im-adithya Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions app/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { swrConfiguration } from "lib/swr";
import * as React from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";
import { SWRConfig } from "swr";
Expand Down Expand Up @@ -120,18 +121,20 @@ export default function RootLayout() {
className="w-full h-full bg-background"
edges={["left", "right", "bottom"]}
>
<UserInactivityProvider>
<SessionProvider>
<Slot />
</SessionProvider>
</UserInactivityProvider>
<Toast
config={toastConfig}
position="bottom"
bottomOffset={140}
topOffset={140}
/>
<PortalHost />
<GestureHandlerRootView>
<UserInactivityProvider>
<SessionProvider>
<Slot />
</SessionProvider>
</UserInactivityProvider>
<Toast
config={toastConfig}
position="bottom"
bottomOffset={140}
topOffset={140}
/>
<PortalHost />
</GestureHandlerRootView>
</SafeAreaView>
</ThemeProvider>
</NotificationProvider>
Expand Down
59 changes: 59 additions & 0 deletions components/GestureWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useFocusEffect } from "expo-router";
import React from "react";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedStyle,
useSharedValue,
withDelay,
withSequence,
withTiming,
} from "react-native-reanimated";

interface GestureWrapperProps {
children: React.ReactNode;
onSwipe: (direction: "left" | "right") => void;
shouldWiggle?: boolean;
}

export function GestureWrapper({
children,
onSwipe,
shouldWiggle,
}: GestureWrapperProps) {
const wiggle = useSharedValue(0);

useFocusEffect(
React.useCallback(() => {
if (shouldWiggle) {
wiggle.value = withDelay(
500,
withSequence(
withTiming(-10, { duration: 150 }),
withTiming(10, { duration: 300 }),
withTiming(0, { duration: 150 }),
),
);
}
}, [shouldWiggle, wiggle]),
);

const gesture = Gesture.Pan().onEnd((evt) => {
const threshold = 50;
if (evt.translationX < -threshold) {
runOnJS(onSwipe)("left");
} else if (evt.translationX > threshold) {
runOnJS(onSwipe)("right");
}
});

const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: wiggle.value }],
}));

return (
<GestureDetector gesture={gesture}>
<Animated.View style={animatedStyle}>{children}</Animated.View>
</GestureDetector>
);
}
8 changes: 8 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.7",
"react-native-gesture-handler": "~2.20.2",
"react-native-get-random-values": "^1.9.0",
"react-native-qrcode-svg": "^6.3.1",
"react-native-reanimated": "~3.16.1",
Expand Down Expand Up @@ -104,5 +105,12 @@
"transformIgnorePatterns": [
"node_modules/(?!(?:.pnpm/)?((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg))"
]
},
"expo": {
"doctor": {
"reactNativeDirectoryCheck": {
"listUnknownPackages": false
}
}
}
}
126 changes: 73 additions & 53 deletions pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Text } from "~/components/ui/text";
import { LinearGradient } from "expo-linear-gradient";
import { SvgProps } from "react-native-svg";
import AlbyBanner from "~/components/AlbyBanner";
import { GestureWrapper } from "~/components/GestureWrapper";
import LargeArrowDown from "~/components/icons/LargeArrowDown";
import LargeArrowUp from "~/components/icons/LargeArrowUp";
import Screen from "~/components/Screen";
Expand Down Expand Up @@ -60,6 +61,20 @@ export function Home() {
}
}

function handleSwipe(direction: "left" | "right") {
if (!wallets.length) {
return;
}
let newId = selectedWalletId;
if (direction === "left") {
newId = (selectedWalletId + 1) % wallets.length;
} else {
newId = (selectedWalletId - 1 + wallets.length) % wallets.length;
}
// SWR detects the key change and updates the balance
useAppStore.getState().setSelectedWalletId(newId);
}

return (
<>
<Screen
Expand Down Expand Up @@ -92,65 +107,70 @@ export function Home() {
contentContainerClassName="flex-1"
>
<View className="grow flex flex-col items-center justify-center gap-4">
<TouchableOpacity
onPress={switchBalanceState}
className="w-full flex flex-col items-center justify-center gap-4"
<GestureWrapper
onSwipe={handleSwipe}
shouldWiggle={wallets.length > 1}
>
{wallets.length > 1 && (
<TouchableOpacity
className="w-full"
onPress={() => {
router.push("/settings/wallets");
}}
>
<Text
numberOfLines={1}
ellipsizeMode="tail"
className="text-center text-muted-foreground font-medium2 text-xl px-4 mb-2"
<TouchableOpacity
onPress={switchBalanceState}
className="w-full flex flex-col items-center justify-center gap-4"
>
{wallets.length > 1 && (
<TouchableOpacity
className="w-full"
onPress={() => {
router.push("/settings/wallets");
}}
>
{wallets[selectedWalletId].name || DEFAULT_WALLET_NAME}
</Text>
</TouchableOpacity>
)}
<View className="w-full flex flex-row justify-center items-center gap-2">
{balance && !refreshingBalance ? (
<>
<Text className="text-foreground text-5xl font-bold2">
<Text
numberOfLines={1}
ellipsizeMode="tail"
className="text-center text-muted-foreground font-medium2 text-xl px-4 mb-2"
>
{wallets[selectedWalletId].name || DEFAULT_WALLET_NAME}
</Text>
</TouchableOpacity>
)}
<View className="flex flex-row justify-center items-center gap-2">
{balance && !refreshingBalance ? (
<>
<Text className="text-foreground text-5xl font-bold2">
{balanceDisplayMode === "sats" &&
new Intl.NumberFormat().format(
Math.floor(balance.balance / 1000),
)}
{balanceDisplayMode === "fiat" &&
getFiatAmount &&
getFiatAmount(Math.floor(balance.balance / 1000))}
{balanceDisplayMode === "hidden" && "****"}
</Text>
{balanceDisplayMode === "sats" && (
<Text className="text-muted-foreground text-3xl font-semibold2">
sats
</Text>
)}
</>
) : (
<Skeleton className="w-48 h-10" />
)}
</View>
<View className="flex justify-center items-center">
{balance && !refreshingBalance ? (
<Text className="text-center text-3xl text-muted-foreground font-semibold2">
{balanceDisplayMode === "sats" &&
new Intl.NumberFormat().format(
Math.floor(balance.balance / 1000),
)}
{balanceDisplayMode === "fiat" &&
getFiatAmount &&
getFiatAmount(Math.floor(balance.balance / 1000))}
{balanceDisplayMode === "hidden" && "****"}
{balanceDisplayMode === "fiat" &&
new Intl.NumberFormat().format(
Math.floor(balance.balance / 1000),
) + " sats"}
</Text>
{balanceDisplayMode === "sats" && (
<Text className="text-muted-foreground text-3xl font-semibold2">
sats
</Text>
)}
</>
) : (
<Skeleton className="w-48 h-10" />
)}
</View>
<View className="flex justify-center items-center">
{balance && !refreshingBalance ? (
<Text className="text-center text-3xl text-muted-foreground font-semibold2">
{balanceDisplayMode === "sats" &&
getFiatAmount &&
getFiatAmount(Math.floor(balance.balance / 1000))}
{balanceDisplayMode === "fiat" &&
new Intl.NumberFormat().format(
Math.floor(balance.balance / 1000),
) + " sats"}
</Text>
) : (
<Skeleton className="w-32 h-8" />
)}
</View>
</TouchableOpacity>
) : (
<Skeleton className="w-32 h-8" />
)}
</View>
</TouchableOpacity>
</GestureWrapper>
{new Date().getDate() === 21 && <AlbyBanner />}
</View>
</ScrollView>
Expand Down
31 changes: 30 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -842,6 +842,13 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

"@egjs/hammerjs@^2.0.17":
version "2.0.17"
resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
dependencies:
"@types/hammerjs" "^2.0.36"

"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
version "4.4.1"
resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
Expand Down Expand Up @@ -2266,6 +2273,11 @@
dependencies:
"@types/node" "*"

"@types/hammerjs@^2.0.36":
version "2.0.46"
resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.46.tgz#381daaca1360ff8a7c8dff63f32e69745b9fb1e1"
integrity sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==

"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.6"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
Expand Down Expand Up @@ -5231,6 +5243,13 @@ hermes-parser@0.25.1:
dependencies:
hermes-estree "0.25.1"

hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"

hosted-git-info@^7.0.0:
version "7.0.2"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-7.0.2.tgz#9b751acac097757667f30114607ef7b661ff4f17"
Expand Down Expand Up @@ -7937,7 +7956,7 @@ react-helmet-async@^1.3.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==

react-is@^16.13.1:
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand All @@ -7954,6 +7973,16 @@ react-native-css-interop@0.1.22:
lightningcss "^1.27.0"
semver "^7.6.3"

react-native-gesture-handler@~2.20.2:
version "2.20.2"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.2.tgz#73844c8e9c417459c2f2981bc4d8f66ba8a5ee66"
integrity sha512-HqzFpFczV4qCnwKlvSAvpzEXisL+Z9fsR08YV5LfJDkzuArMhBu2sOoSPUF/K62PCoAb+ObGlTC83TKHfUd0vg==
dependencies:
"@egjs/hammerjs" "^2.0.17"
hoist-non-react-statics "^3.3.0"
invariant "^2.2.4"
prop-types "^15.7.2"

react-native-get-random-values@^1.9.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.11.0.tgz#1ca70d1271f4b08af92958803b89dccbda78728d"
Expand Down