-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
separating out payment UI + removing color overwrites + homogenizing …
…styling | 3h
- Loading branch information
svub
committed
Oct 9, 2024
1 parent
b305820
commit 6eb78cc
Showing
4 changed files
with
224 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,6 +45,7 @@ | |
| }, | ||
| "packageManager": "[email protected]", | ||
| "dependencies": { | ||
| "eslint-plugin-react": "^7.37.1" | ||
| "eslint-plugin-react": "^7.37.1", | ||
| "qrcode.react": "^4.0.1" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 122 additions & 0 deletions
122
packages/nextjs/app/pay/[paymentReference]/[amount]/[currency]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| "use client"; | ||
|
|
||
| import { useEffect, useState } from "react"; | ||
| import type { NextPage } from "next"; | ||
| import { EtherInput } from "~~/components/scaffold-eth"; | ||
| import { useScaffoldWatchContractEvent, useTargetNetwork } from "~~/hooks/scaffold-eth"; | ||
| import { fetchPriceFromUniswap } from "~~/utils/scaffold-eth"; | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| temp: unknown; | ||
| } | ||
| } | ||
|
|
||
| type PageProps = { | ||
| params: { | ||
| paymentReference: string; | ||
| amount: number; | ||
| currency: string; | ||
| }; | ||
| }; | ||
|
|
||
| const PaymentPage: NextPage<PageProps> = ({ params }: PageProps) => { | ||
| const paymentReferenceParam = params?.paymentReference as string; | ||
| const amountParam = params?.amount as number; | ||
| const currencyParam = params?.currency as string; | ||
|
|
||
| const [reference, setReference] = useState(""); | ||
| const [amount, setAmount] = useState(""); | ||
| // const [currency, setCurrency] = useState("ETH"); | ||
| const [receipt, setReceipt] = useState(""); // TODO define struct of receipt | ||
| // const { writeContractAsync } = useScaffoldWriteContract("NunyaBusiness"); | ||
| const { targetNetwork } = useTargetNetwork(); | ||
| // const encoder: TextEncoder = new global.TextEncoder(); | ||
|
|
||
| useEffect(() => { | ||
| setReference(paymentReferenceParam); | ||
|
|
||
| if (currencyParam === "USD") { | ||
| // convert amount to ETH | ||
| fetchPriceFromUniswap(targetNetwork).then(price => { | ||
| console.log("Convert to ETH", amountParam, price, amountParam / price); | ||
| if (price > 0) setAmount(amountParam / price + ""); | ||
| else console.error("Couldn't fetch ETH price."); | ||
| }); | ||
| } else { | ||
| setAmount(amountParam + ""); | ||
| } | ||
|
|
||
| // setCurrency(currencyParam || "ETH"); | ||
| }, []); | ||
|
|
||
| const handlePay = async (event: React.FormEvent) => { | ||
| event.preventDefault(); | ||
|
|
||
| // TODO | ||
| // await writeContractAsync({ | ||
| // functionName: "pay", | ||
| // value: parseEther(amount), | ||
| // args: [encoder.encode(reference)], | ||
| // }); | ||
| }; | ||
|
|
||
| useScaffoldWatchContractEvent({ | ||
| contractName: "NunyaBusiness", | ||
| // TODO | ||
| // eventName: "payment-receipt-received", | ||
| eventName: "Request_success", | ||
| onLogs: logs => { | ||
| logs.forEach(() => { | ||
| // const { receiptBytes } = log.args; | ||
| // TODO extract the huamn readable part, show the bytes somehow (v2: show as QR code or write as file for book keeping) | ||
| const receipt = "123"; // decoder.decode(receiptBytes as ArrayBuffer); | ||
| console.log("📡 Payment Receipt " + receipt + " created"); | ||
| setReceipt(receipt); | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="bg-base-200 min-h-screen flex flex-col justify-center py-10 w-full"> | ||
| <h1 className="text-center"> | ||
| <span className="block text-5xl font-bold">Nunya.business</span> | ||
| <span className="block text-3xl bg-base-100 mb-4">Receive Business Payments</span> | ||
| </h1> | ||
| <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row mb-8"> | ||
| <p className="my-2 font-medium text-base">... without revealing to other clients what you've earned.</p> | ||
| </div> | ||
|
|
||
| <h3 className="text-center text-2xl mt-8">Make a Payment</h3> | ||
| <form onSubmit={handlePay} className="flex flex-col items-center mb-8 mx-5 space-y-4"> | ||
| <div className="flex flex-col items-center justify-center space-y-3"> | ||
| <input | ||
| className="border bg-base-100 p-3 w-full rounded-md shadow focus:outline-none focus:ring-2 focus:ring-blue-500" | ||
| type="text" | ||
| value={reference} | ||
| placeholder="Your payment reference..." | ||
| onChange={e => setReference(e.target.value)} | ||
| /> | ||
| <EtherInput value={amount} onChange={amount => setAmount(amount)} /> | ||
| <button | ||
| className="btn bg-blue-600 text-white hover:bg-blue-700 transition duration-200 p-3 rounded-md" | ||
| type="submit" | ||
| > | ||
| Pay Bill Now | ||
| </button> | ||
| </div> | ||
| {receipt ? ( | ||
| <> | ||
| <p className="text-center">Receipt: {receipt}</p> | ||
| </> | ||
| ) : ( | ||
| <></> | ||
| )} | ||
| </form> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default PaymentPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| export type SupportedCurrencies = "ETH" | "USD"; | ||
|
|
||
| export function createPaymentLink( | ||
| reference: string, | ||
| amount: string | number = 0, | ||
| currency: SupportedCurrencies = "ETH", | ||
| ): string { | ||
| const root = global.location.origin; | ||
| const route = "pay"; | ||
| const elements = [root, route, reference]; | ||
| if (amount) { | ||
| elements.push(amount + "", currency); | ||
| } | ||
| const link = elements.join("/"); | ||
| return link; | ||
| } |