Skip to content

Commit 37de06b

Browse files
im-adithyaim-adithya
authored
Merge pull request #396 from getAlby/chore/success-screen
chore: improve success screens
2 parents c6b5554 + df3e582 commit 37de06b

5 files changed

Lines changed: 171 additions & 77 deletions

File tree

‎animations/Tick.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export function Tick() {
99
autoPlay
1010
loop={false}
1111
style={{
12-
width: dimensions.width,
13-
height: dimensions.width,
12+
width: dimensions.width * 1.5,
13+
height: dimensions.width * 1.5,
1414
}}
1515
source={require("../assets/animations/success.json")}
1616
/>

‎components/CreateInvoice.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export function CreateInvoice() {
9797
polling = false;
9898
unsubscribe?.();
9999
router.dismissAll();
100-
router.navigate({
100+
router.replace({
101101
pathname: "/receive/success",
102102
params: { invoice: transaction.invoice },
103103
});

‎components/SuccessMessage.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import {
2+
BottomSheetBackdrop,
3+
type BottomSheetBackdropProps,
4+
BottomSheetModal,
5+
BottomSheetView,
6+
} from "@gorhom/bottom-sheet";
7+
import { openURL } from "expo-linking";
8+
import React, { useCallback, useRef } from "react";
9+
import { TouchableOpacity, View } from "react-native";
10+
import { ChevronDownIcon } from "~/components/Icons";
11+
import { Button } from "~/components/ui/button";
12+
import { Text } from "~/components/ui/text";
13+
import { LNURLPaymentSuccessAction } from "~/lib/lnurl";
14+
import { useColorScheme } from "~/lib/useColorScheme";
15+
16+
interface SuccessMessageProps {
17+
lnurlSuccessAction: LNURLPaymentSuccessAction;
18+
}
19+
20+
export function SuccessMessage({ lnurlSuccessAction }: SuccessMessageProps) {
21+
const { isDarkColorScheme } = useColorScheme();
22+
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
23+
24+
const renderBackdrop = useCallback(
25+
(props: BottomSheetBackdropProps) => (
26+
<BottomSheetBackdrop
27+
{...props}
28+
style={{ backgroundColor: isDarkColorScheme ? "#FFFFFF" : "#09090B" }} // translates to background
29+
disappearsOnIndex={-1}
30+
appearsOnIndex={0}
31+
opacity={isDarkColorScheme ? 0.3 : 0.7}
32+
pressBehavior="close"
33+
/>
34+
),
35+
[isDarkColorScheme],
36+
);
37+
38+
return (
39+
<>
40+
<TouchableOpacity
41+
onPress={() => bottomSheetModalRef.current?.present()}
42+
className="flex flex-row items-center justify-center gap-2 px-12 py-4"
43+
>
44+
<Text
45+
ellipsizeMode="tail"
46+
className="text-muted-foreground font-medium2 text-xl"
47+
>
48+
Success Message
49+
</Text>
50+
<ChevronDownIcon className="text-muted-foreground" />
51+
</TouchableOpacity>
52+
53+
<BottomSheetModal
54+
ref={bottomSheetModalRef}
55+
backgroundStyle={{
56+
backgroundColor: isDarkColorScheme ? "#09090B" : "#FFFFFF", // translates to muted
57+
}}
58+
handleIndicatorStyle={{
59+
backgroundColor: isDarkColorScheme ? "#FAFAFA" : "#1F2937", // translates to foreground
60+
}}
61+
backdropComponent={renderBackdrop}
62+
enablePanDownToClose
63+
>
64+
<BottomSheetView className="p-4 pt-0">
65+
<View className="flex flex-col mt-2 gap-2 items-center">
66+
<Text className="text-muted-foreground text-center font-semibold2">
67+
Message From Receiver
68+
</Text>
69+
{lnurlSuccessAction.tag === "message" && (
70+
<Text className="text-foreground text-center text-xl font-medium2">
71+
{lnurlSuccessAction.message}
72+
</Text>
73+
)}
74+
{lnurlSuccessAction.tag === "url" && (
75+
<>
76+
{lnurlSuccessAction.description && (
77+
<Text className="px-6 text-foreground text-center text-xl font-medium2">
78+
{lnurlSuccessAction.description}
79+
</Text>
80+
)}
81+
{lnurlSuccessAction.url && (
82+
<Button
83+
variant="secondary"
84+
onPress={() => openURL(lnurlSuccessAction.url ?? "")}
85+
>
86+
<Text>Open Link</Text>
87+
</Button>
88+
)}
89+
</>
90+
)}
91+
</View>
92+
</BottomSheetView>
93+
</BottomSheetModal>
94+
</>
95+
);
96+
}

‎pages/receive/ReceiveSuccess.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ export function ReceiveSuccess() {
2121
});
2222
return (
2323
<View className="flex-1 flex flex-col">
24-
<Screen title="" animation="slide_from_left" />
25-
<View className="flex-1 gap-8">
26-
<AlbyGoLogo className="w-52 h-16 mx-auto" />
27-
<View className="flex-1 flex justify-center items-center">
28-
<Tick />
29-
</View>
30-
<View className="flex-1 flex flex-col gap-5 justify-center items-center">
31-
<Text className="text-4xl font-bold2 text-muted-foreground">
32-
Received
33-
</Text>
34-
<View className="flex flex-col items-center justify-center gap-2">
24+
<Screen title="Success" animation="slide_from_left" />
25+
<View className="flex-1">
26+
<AlbyGoLogo className="w-52 h-16 mx-auto my-4" />
27+
<View className="flex-1 gap-6">
28+
<View className="flex-[0.45] flex justify-center items-center">
29+
<Tick />
30+
</View>
31+
<View className="flex-[0.55] flex flex-col justify-center items-center">
32+
<Text className="text-2xl font-semibold2 text-muted-foreground">
33+
Received
34+
</Text>
3535
<View className="flex flex-row items-end">
3636
<Text
3737
className={cn(
@@ -54,20 +54,23 @@ export function ReceiveSuccess() {
5454
{getFiatAmount(+decodedInvoice.satoshi)}
5555
</Text>
5656
)}
57+
{decodedInvoice.description && (
58+
<View className="flex flex-col gap-2 items-center mt-6">
59+
<Text className="text-muted-foreground text-center font-semibold2">
60+
Description
61+
</Text>
62+
<Text
63+
numberOfLines={1}
64+
className="text-foreground text-center text-xl font-medium2 px-6"
65+
>
66+
{decodedInvoice.description}
67+
</Text>
68+
</View>
69+
)}
5770
</View>
5871
</View>
59-
{decodedInvoice.description && (
60-
<View className="flex flex-col gap-2 items-center">
61-
<Text className="text-muted-foreground text-center font-semibold2">
62-
Description
63-
</Text>
64-
<Text className="text-foreground text-center text-xl font-medium2">
65-
{decodedInvoice.description}
66-
</Text>
67-
</View>
68-
)}
6972
</View>
70-
<View className="p-6">
73+
<View className="flex p-6">
7174
<Button
7275
size="lg"
7376
onPress={() => {

‎pages/send/PaymentSuccess.tsx‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { openURL } from "expo-linking";
21
import { router, useLocalSearchParams } from "expo-router";
32
import { type LNURLPaymentSuccessAction } from "lib/lnurl";
43
import React from "react";
54
import { View } from "react-native";
65
import { Tick } from "~/animations/Tick";
76
import AlbyGoLogo from "~/components/AlbyGoLogo";
8-
import { Receiver } from "~/components/Receiver";
97
import Screen from "~/components/Screen";
8+
import { SuccessMessage } from "~/components/SuccessMessage";
109
import { Button } from "~/components/ui/button";
1110
import { Text } from "~/components/ui/text";
1211
import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
1312
import { useAppStore } from "~/lib/state/appStore";
13+
import { cn } from "~/lib/utils";
1414

1515
export function PaymentSuccess() {
1616
const getFiatAmount = useGetFiatAmount();
@@ -30,61 +30,56 @@ export function PaymentSuccess() {
3030

3131
return (
3232
<View className="flex-1 flex flex-col">
33-
<Screen title="" />
34-
<View className="flex-1 gap-8">
35-
<AlbyGoLogo className="w-52 h-16 mx-auto" />
36-
<View className="flex-1 flex justify-center items-center">
37-
<Tick />
38-
</View>
39-
<View className="flex flex-col items-center gap-2">
40-
<View className="flex flex-row items-end justify-center">
41-
<Text className="text-3xl text-foreground font-semibold2">
42-
{bitcoinDisplayFormat === "bip177" && "₿ "}
43-
{new Intl.NumberFormat().format(Math.ceil(+amount))}
44-
</Text>
45-
{bitcoinDisplayFormat === "sats" && (
46-
<Text className="text-2xl text-muted-foreground font-semibold2">
47-
{" "}
48-
sats
49-
</Text>
50-
)}
33+
<Screen title="Success" />
34+
<View className="flex-1">
35+
<AlbyGoLogo className="w-52 h-16 mx-auto my-4" />
36+
<View className="flex-1 gap-6">
37+
<View className="flex-[0.45] flex justify-center items-center">
38+
<Tick />
5139
</View>
52-
{getFiatAmount && (
53-
<Text className="text-2xl text-muted-foreground font-semibold2">
54-
{getFiatAmount(+amount)}
55-
</Text>
56-
)}
57-
</View>
58-
<Receiver lightningAddress={receiver} />
59-
{lnurlSuccessAction && (
60-
<View className="flex flex-col gap-2 items-center">
61-
<Text className="text-muted-foreground text-center font-semibold2">
62-
Message From Receiver
63-
</Text>
64-
{lnurlSuccessAction.tag === "message" && (
65-
<Text className="text-foreground text-center text-xl font-medium2">
66-
{lnurlSuccessAction.message}
40+
<View className="flex-[0.55] flex flex-col justify-center items-center gap-4">
41+
<View className="flex">
42+
<Text className="text-2xl text-muted-foreground text-center font-semibold2">
43+
Sent to
6744
</Text>
68-
)}
69-
{lnurlSuccessAction.tag === "url" && (
70-
<>
71-
{lnurlSuccessAction.description && (
72-
<Text className="text-foreground text-center text-xl font-medium2">
73-
{lnurlSuccessAction.description}
45+
<Text className="text-center text-foreground text-2xl font-semibold2">
46+
{receiver.toLowerCase().replace("lightning:", "")}
47+
</Text>
48+
</View>
49+
<View className="flex items-center">
50+
<View className="flex flex-row items-end">
51+
<Text
52+
className={cn(
53+
"text-5xl gap-2 font-semibold2 text-muted-foreground",
54+
bitcoinDisplayFormat === "bip177" && "leading-[1.5]",
55+
)}
56+
>
57+
-{bitcoinDisplayFormat === "bip177" && " ₿"}{" "}
58+
</Text>
59+
<Text
60+
className={cn(
61+
"text-5xl gap-2 font-semibold2 text-foreground",
62+
bitcoinDisplayFormat === "bip177" && "leading-[1.5]",
63+
)}
64+
>
65+
{new Intl.NumberFormat().format(Math.ceil(+amount))}
66+
</Text>
67+
{bitcoinDisplayFormat === "sats" && (
68+
<Text className="text-3xl font-semibold2 text-muted-foreground mb-1">
69+
{" "}
70+
sats
7471
</Text>
7572
)}
76-
{lnurlSuccessAction.url && (
77-
<Button
78-
variant="secondary"
79-
onPress={() => openURL(lnurlSuccessAction.url ?? "")}
80-
>
81-
<Text>Open Link</Text>
82-
</Button>
83-
)}
84-
</>
85-
)}
73+
</View>
74+
{getFiatAmount && (
75+
<Text className="text-3xl font-semibold2 text-muted-foreground">
76+
{getFiatAmount(+amount)}
77+
</Text>
78+
)}
79+
</View>
80+
<SuccessMessage lnurlSuccessAction={lnurlSuccessAction} />
8681
</View>
87-
)}
82+
</View>
8883
</View>
8984
<View className="p-6">
9085
<Button

0 commit comments

Comments
 (0)