Skip to content

Commit

Permalink
init server
Browse files Browse the repository at this point in the history
  • Loading branch information
@diyahir
diyahir committed Feb 16, 2024
1 parent 636671c commit 4a1f3eb
Show file tree
Hide file tree
Showing 9 changed files with 15,644 additions and 246 deletions.
14,671 changes: 14,671 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,12 @@
"usehooks-ts@^2.7.2": "patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch"
},
"devDependencies": {
"@types/express": "^4.17.1",
"husky": "~8.0.3",
"lint-staged": "~13.2.2"
},
"packageManager": "[email protected]"
"packageManager": "[email protected]",
"dependencies": {
"express": "^4.17.1"
}
}
195 changes: 77 additions & 118 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,93 @@
"use client";

import { useState } from "react";
import {
Button,
Card,
CardBody,
CardFooter,
CardHeader,
Container,
Heading,
Table,
Td,
Th,
Thead,
Tr,
useDisclosure,
} from "@chakra-ui/react";
// import { QrScanner } from "@yudiel/react-qr-scanner";
import { PaymentRequestObject, decode } from "bolt11";
import type { NextPage } from "next";
import { useAccount, useWalletClient } from "wagmi";
import { PaymentInvoice } from "~~/components/PaymentInvoice";
import { useAccountBalance, useScaffoldContract } from "~~/hooks/scaffold-eth";
import { LnPaymentInvoice } from "~~/types/utils";
import { useAccount } from "wagmi";
import SendModal from "~~/components/SendModalPopup";
import { useAccountBalance } from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
const { address } = useAccount();
const { balance } = useAccountBalance(address);
const { isOpen, onClose, onOpen } = useDisclosure();

// function handleScan(data: any) {
// console.log("Scanning", data);
// console.log("Scanning", data);
// const decoded = decode(data);
// console.log(decoded);
// }
// function handleError(err: any) {
// console.error(err);
// }
const { data: walletClient } = useWalletClient();

const { data: yourContract } = useScaffoldContract({
contractName: "HashedTimelock",
walletClient,
});

const [invoice, setInvoice] = useState<string>("");
const [decoded, setDecoded] = useState<PaymentRequestObject | null>(null);
const [lnInvoice, setLnInvoice] = useState<LnPaymentInvoice | null>(null);

console.log(decoded);

function getPaymentHash(requestObject: PaymentRequestObject): `0x${string}` | undefined {
// go through the tags and find the 'payment_hash' tagName and return the 'data'
const paymentHash = requestObject.tags.find(tag => tag.tagName === "payment_hash");
if (!paymentHash) {
return undefined;
}
return ("0x" + paymentHash.data.toString()) as `0x${string}`;
}

function submitPayment() {
if (!yourContract) return;
if (!lnInvoice) return;
yourContract.write.newContract(
["0x0f82D24134bDE2e536B801B26F120B8F60f54a9f", lnInvoice.paymentHash, BigInt(lnInvoice.timeExpireDate)],
{
value: BigInt(lnInvoice.satoshis),
},
);
}

function handleInvoiceChange(invoice: string) {
try {
setInvoice(invoice);
const tempdecoded = decode(invoice);
console.log(tempdecoded);
const paymentHash = getPaymentHash(tempdecoded);
setDecoded(tempdecoded);

if (!tempdecoded.satoshis) return;
if (!paymentHash) return;
if (!tempdecoded.timeExpireDate) return;
return (
<Container>
<Card>
<CardHeader>
<Heading mt="10%" textAlign={"center"} fontSize={"x-large"}>
{" "}
<span className="font-bold">
{balance ? `${(balance * 100_000_000).toLocaleString()}` : "Loading Balance..."}
</span>{" "}
sats
</Heading>
</CardHeader>

setLnInvoice({
satoshis: tempdecoded.satoshis,
timeExpireDate: tempdecoded.timeExpireDate,
paymentHash,
lnInvoice: invoice,
});
} catch (e) {
console.error(e);
setDecoded(null);
}
}
<CardBody>
<Heading fontWeight={"md"} textAlign={"center"} size={"md"}>
History
</Heading>
<Table size={"sm"}>
<Thead>
<Tr>
<Th>Status</Th>
<Th>Date</Th>
<Th>Amount</Th>
</Tr>
</Thead>

return (
<>
<div className="flex justify-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center mb-8">
<span className="block text-3xl">
<span className="font-bold">
{balance ? `${(balance * 100_000_000).toLocaleString()}` : "Loading Balance..."}
</span>{" "}
sats
</span>
</h1>
</div>
<Tr>
<Td>Completed</Td>
<Td>12/12/2024</Td>
<Td>1232</Td>
</Tr>
<Tr>
<Td>Completed</Td>
<Td>12/12/2024</Td>
<Td>1232</Td>
</Tr>
<Tr>
<Td>Completed</Td>
<Td>12/12/2024</Td>
<Td>1232</Td>
</Tr>
</Table>
</CardBody>

{/* Wallet Section */}
{!lnInvoice && (
<div className="wallet w-full py-8">
<div className="flex justify-center gap-4 mt-6">
<input
type="text"
className="form-control"
placeholder="Invoice"
value={invoice}
onChange={e => handleInvoiceChange(e.target.value)}
/>
<button className="btn btn-primary">Send</button>
<button className="btn btn-secondary">Receive</button>
</div>
</div>
)}
<CardFooter
justify="space-between"
flexWrap="wrap"
sx={{
"& > button": {
minW: "136px",
},
}}
>
<Button onClick={onOpen} flex="1">
Send
</Button>
<Button flex="1">Recieve</Button>
</CardFooter>
</Card>

{lnInvoice && (
<PaymentInvoice
invoice={lnInvoice}
submitPayment={submitPayment}
cancelPayment={() => {
setLnInvoice(null);
setInvoice("");
}}
></PaymentInvoice>
)}
{/*
<QrScanner
scanDelay={1}
onError={handleError}
onResult={result => handleScan(result)}
onDecode={result => handleScan(result)}
/> */}
</div>
</>
<SendModal isOpen={isOpen} onClose={onClose} />
</Container>
);
};

Expand Down
23 changes: 14 additions & 9 deletions packages/nextjs/components/PaymentInvoice.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Button, ButtonGroup, Container, Table, Tbody, Td, Tr } from "@chakra-ui/react";
import { Button, ButtonGroup, Flex, Table, Tbody, Td, Tr } from "@chakra-ui/react";
import { LnPaymentInvoice } from "~~/types/utils";

/**
Expand All @@ -11,28 +11,33 @@ type PaymentInvoiceProps = {
cancelPayment: () => void;
};
export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment }: PaymentInvoiceProps) => {
const expiryDate = new Date(invoice.timeExpireDate * 1000);
return (
<Container>
<Table width={"100%"} overflowX={"scroll"}>
<Flex h="100%" flexDir={"column"} justifyContent={"center"} alignContent={"center"}>
<Table>
<Tbody>
<Tr>
<Td>Expiry Time</Td>
<Td textAlign={"end"}>{invoice.timeExpireDate}</Td>
<Td textAlign={"end"}>{expiryDate.toLocaleTimeString()}</Td>
</Tr>
<Tr>
<Td>Payment amount</Td>
<Td>Amount</Td>
<Td textAlign={"end"}>{invoice.satoshis} sats</Td>
</Tr>
<Tr>
<Td>USD</Td>
<Td textAlign={"end"}>${invoice.satoshis}</Td>
</Tr>
</Tbody>
</Table>
<ButtonGroup colorScheme="red" width={"100%"}>
<ButtonGroup my="20%" colorScheme="red" width={"100%"}>
<Button width={"100%"} onClick={() => cancelPayment()}>
Cancel Payment
Cancel
</Button>
<Button colorScheme="green" width={"100%"} onClick={() => submitPayment()}>
Confirm Payment
Pay
</Button>
</ButtonGroup>
</Container>
</Flex>
);
};
Loading

0 comments on commit 4a1f3eb

Please sign in to comment.