Skip to content
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.

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

feat: modify receive screen for wallets without ln address and set up #224

Merged
merged 10 commits into from
Feb 7, 2025
5 changes: 5 additions & 0 deletions app/(app)/receive/invoice.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { CreateInvoice } from "../../../pages/receive/CreateInvoice";

export default function Page() {
return <CreateInvoice />;
}
5 changes: 5 additions & 0 deletions app/(app)/receive/withdraw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Withdraw } from "../../../pages/receive/Withdraw";

export default function Page() {
return <Withdraw />;
}
5 changes: 0 additions & 5 deletions app/(app)/withdraw/index.js

This file was deleted.

200 changes: 200 additions & 0 deletions pages/receive/CreateInvoice.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
import { Nip47Transaction } from "@getalby/sdk/dist/NWCClient";
import * as Clipboard from "expo-clipboard";
import { router } from "expo-router";
import React from "react";
import { Image, View } from "react-native";
import Toast from "react-native-toast-message";
import DismissableKeyboardView from "~/components/DismissableKeyboardView";
import { DualCurrencyInput } from "~/components/DualCurrencyInput";
import { Copy } from "~/components/Icons";
import Loading from "~/components/Loading";
import QRCode from "~/components/QRCode";
import Screen from "~/components/Screen";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Text } from "~/components/ui/text";
import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
import { errorToast } from "~/lib/errorToast";
import { useAppStore } from "~/lib/state/appStore";

export function CreateInvoice() {
const getFiatAmount = useGetFiatAmount();
const [isLoading, setLoading] = React.useState(false);
const [invoice, setInvoice] = React.useState("");
const [amount, setAmount] = React.useState("");
const [comment, setComment] = React.useState("");
const selectedWalletId = useAppStore((store) => store.selectedWalletId);
const wallets = useAppStore((store) => store.wallets);
const lightningAddress = wallets[selectedWalletId].lightningAddress;

function generateInvoice(amount?: number) {
if (!amount) {
console.error("0-amount invoices are currently not supported");
return;
}
(async () => {
setLoading(true);
try {
const nwcClient = useAppStore.getState().nwcClient;
if (!nwcClient) {
throw new Error("NWC client not connected");
}
const response = await nwcClient.makeInvoice({
amount: amount * 1000 /*FIXME: allow 0-amount invoices */,
...(comment ? { description: comment } : {}),
});

console.info("makeInvoice Response", response);

setInvoice(response.invoice);
} catch (error) {
console.error(error);
errorToast(error);
}
setLoading(false);
})();
}

function copy() {
const text = invoice || lightningAddress;
if (!text) {
errorToast(new Error("Nothing to copy"));
return;
}
Clipboard.setStringAsync(text);
Toast.show({
type: "success",
text1: "Copied to clipboard",
});
}

React.useEffect(() => {
let polling = true;
let pollCount = 0;
let prevTransaction: Nip47Transaction | undefined;
(async () => {
while (polling) {
try {
const transactions = await useAppStore
.getState()
.nwcClient?.listTransactions({
limit: 1,
type: "incoming",
});
const receivedTransaction = transactions?.transactions[0];
if (receivedTransaction) {
if (
polling &&
pollCount > 0 &&
receivedTransaction.payment_hash !== prevTransaction?.payment_hash
) {
if (invoice && receivedTransaction.invoice === invoice) {
router.dismissAll();
router.navigate({
pathname: "/receive/success",
params: { invoice: receivedTransaction.invoice },
});
} else {
console.info("Received another payment");
}
}
prevTransaction = receivedTransaction;
}
++pollCount;
} catch (error) {
console.error("Failed to list transactions", error);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
}
})();
return () => {
polling = false;
};
}, [invoice]);

return (
<>
<Screen title="Invoice" animation="slide_from_left" />
{invoice ? (
<>
<View className="flex-1 justify-center items-center gap-8">
<View className="justify-center">
<QRCode value={invoice} />
<View className="absolute self-center p-2 rounded-2xl bg-white">
<Image
source={require("../../assets/icon.png")}
className="w-20 h-20 rounded-xl"
resizeMode="contain"
/>
</View>
</View>
<View className="flex flex-col items-center justify-center gap-2">
<View className="flex flex-row items-end">
<Text className="text-foreground text-3xl font-semibold2">
{new Intl.NumberFormat().format(+amount)}{" "}
</Text>
<Text className="text-muted-foreground text-2xl font-semibold2">
sats
</Text>
</View>
{getFiatAmount && (
<Text className="text-muted-foreground text-2xl font-medium2">
{getFiatAmount(+amount)}
</Text>
)}
</View>
<View className="flex flex-row justify-center items-center gap-3">
<Loading />
<Text className="text-xl">Waiting for payment</Text>
</View>
</View>
<View className="flex flex-row gap-3 p-6">
<Button
variant="secondary"
onPress={copy}
className="flex-1 flex flex-col gap-2"
>
<Copy className="text-muted-foreground" />
<Text>Copy</Text>
</Button>
</View>
</>
) : (
<DismissableKeyboardView>
<View className="flex-1 flex flex-col">
<View className="flex-1 h-full flex flex-col justify-center gap-5 p-3">
<DualCurrencyInput
amount={amount}
setAmount={setAmount}
autoFocus
/>
<View>
<Text className="text-muted-foreground text-center mt-6">
Description (optional)
</Text>
<Input
className="w-full text-center border-transparent bg-transparent native:text-2xl font-semibold2"
placeholder="No description"
value={comment}
onChangeText={setComment}
returnKeyType="done"
/>
</View>
</View>
<View className="m-6">
<Button
size="lg"
className="flex flex-row gap-2"
onPress={() => generateInvoice(+amount)}
disabled={isLoading}
>
{isLoading && <Loading className="text-primary-foreground" />}
<Text>Create Invoice</Text>
</Button>
</View>
</View>
</DismissableKeyboardView>
)}
</>
);
}
Loading
Loading