Skip to content

Commit

Permalink
feat: swipe to change wallets
Browse files Browse the repository at this point in the history
  • Loading branch information
@im-adithya
im-adithya committed Feb 7, 2025
1 parent d7b632e commit e589fd2
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 101 deletions.
27 changes: 15 additions & 12 deletions app/_layout.tsx
View file
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
9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@
"dependencies": {
"@alevy97/react-native-userdefaults": "^0.2.2",
"@getalby/expo-shared-preferences": "^0.0.1",
"@noble/curves": "^1.6.0",
"@getalby/lightning-tools": "^5.1.2",
"@getalby/sdk": "^3.9.0",
"@noble/curves": "^1.6.0",
"@popicons/react-native": "^0.0.20",
"@react-native-async-storage/async-storage": "1.23.1",
"@rn-primitives/dialog": "^1.0.3",
Expand All @@ -42,17 +42,17 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"dayjs": "^1.11.10",
"expo-device": "~6.0.2",
"expo-notification-service-extension-plugin": "^1.0.1",
"expo-notifications": "~0.29.11",
"expo": "~52.0.20",
"expo-camera": "~16.0.10",
"expo-clipboard": "~7.0.0",
"expo-constants": "~17.0.3",
"expo-device": "~6.0.2",
"expo-font": "~13.0.2",
"expo-linear-gradient": "~14.0.1",
"expo-linking": "~7.0.3",
"expo-local-authentication": "~15.0.1",
"expo-notification-service-extension-plugin": "^1.0.1",
"expo-notifications": "~0.29.11",
"expo-router": "~4.0.15",
"expo-secure-store": "~14.0.0",
"expo-splash-screen": "^0.29.18",
Expand All @@ -64,6 +64,7 @@
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.5",
"react-native-gesture-handler": "^2.23.0",
"react-native-get-random-values": "^1.9.0",
"react-native-qrcode-svg": "^6.3.1",
"react-native-reanimated": "~3.16.1",
Expand Down
195 changes: 111 additions & 84 deletions pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { ChevronUpIcon, SettingsIcon } from "~/components/Icons";
import { Text } from "~/components/ui/text";

import { LinearGradient } from "expo-linear-gradient";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { runOnJS } from "react-native-reanimated";
import { SvgProps } from "react-native-svg";
import AlbyBanner from "~/components/AlbyBanner";
import LargeArrowDown from "~/components/icons/LargeArrowDown";
Expand Down Expand Up @@ -60,6 +62,29 @@ 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;
}
useAppStore.getState().setSelectedWalletId(newId);
refreshBalance();
}

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

return (
<>
<Screen
Expand All @@ -74,97 +99,99 @@ export function Home() {
</TouchableOpacity>
)}
/>
<View className="h-full flex p-6">
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshingBalance}
onRefresh={refreshBalance}
progressViewOffset={128}
/>
}
showsVerticalScrollIndicator={false}
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"
>
{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"
<GestureDetector gesture={swipeGesture}>
<View className="h-full flex p-6">
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshingBalance}
onRefresh={refreshBalance}
progressViewOffset={128}
/>
}
showsVerticalScrollIndicator={false}
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"
>
{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="w-full 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>
{new Date().getDate() === 21 && <AlbyBanner />}
) : (
<Skeleton className="w-32 h-8" />
)}
</View>
</TouchableOpacity>
{new Date().getDate() === 21 && <AlbyBanner />}
</View>
</ScrollView>
<View className="flex items-center justify-center">
<Link href="/transactions" asChild>
<TouchableOpacity>
<ChevronUpIcon
className="text-muted-foreground"
width={32}
height={32}
/>
</TouchableOpacity>
</Link>
</View>
<View className="flex flex-row gap-6 mt-10">
<MainButton title="Receive" href="/receive" Icon={LargeArrowDown} />
<MainButton title="Send" href="/send" Icon={LargeArrowUp} />
</View>
</ScrollView>
<View className="flex items-center justify-center">
<Link href="/transactions" asChild>
<TouchableOpacity>
<ChevronUpIcon
className="text-muted-foreground"
width={32}
height={32}
/>
</TouchableOpacity>
</Link>
</View>
<View className="flex flex-row gap-6 mt-10">
<MainButton title="Receive" href="/receive" Icon={LargeArrowDown} />
<MainButton title="Send" href="/send" Icon={LargeArrowUp} />
</View>
</View>
</GestureDetector>
</>
);
}
Expand Down
30 changes: 29 additions & 1 deletion yarn.lock
View file
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 @@ -2322,6 +2329,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 @@ -5299,6 +5311,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 @@ -8005,7 +8024,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 @@ -8022,6 +8041,15 @@ react-native-css-interop@0.1.22:
lightningcss "^1.27.0"
semver "^7.6.3"

react-native-gesture-handler@^2.23.0:
version "2.23.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.23.0.tgz#f0e77bc6bce94a976ae7917abc748b7b4ce6a490"
integrity sha512-xtkdIU4S4uc4J2WO4hy7AXxD/1M8Be2yOrLdPTuWKAOF3KyL0D0xSdvuaWhI+GdZCNQQisj9kvbnMQGGb9XZNQ==
dependencies:
"@egjs/hammerjs" "^2.0.17"
hoist-non-react-statics "^3.3.0"
invariant "^2.2.4"

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

0 comments on commit e589fd2

Please sign in to comment.