- {
- e.preventDefault();
- route("/menu");
- }}
- >
- IL
-
-
- Interledger POS
-
- {paymentPointer ? (
- <>
-
- {paymentPointer.split("/").pop()}
-
-
- ) : (
- No payment pointer
- )}
-
+
- {children}
+
+ {children}
+
);
}
diff --git a/src/components/PinComponent.tsx b/src/components/PinComponent.tsx
new file mode 100644
index 0000000..8e7a777
--- /dev/null
+++ b/src/components/PinComponent.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from "preact/hooks";
+import { route } from "preact-router";
+import { useAppStore } from "@state/AppStore";
+
+const PIN_LENGTH = 4;
+
+type PinComponentProps = {
+ onComplete?: () => void;
+ onCancel?: () => void;
+};
+
+export function PinComponent({ onComplete, onCancel }: PinComponentProps) {
+ const nav = route;
+ const { pin, setPin, pinTries, setPinTries, setPinVerified } = useAppStore();
+ const [localPin, setLocalPin] = useState("");
+ const [error, setError] = useState("");
+
+ useEffect(() => {
+ setPinTries(0);
+ setPin("");
+ setPinVerified(false);
+ setLocalPin("");
+ setError("");
+ }, []);
+
+ const onKey = (key: string) => {
+ if (/^\d$/.test(key)) {
+ if (localPin.length < PIN_LENGTH) setLocalPin(localPin + key);
+ } else if (key === "Backspace" || key === "⌫") {
+ setLocalPin(localPin.slice(0, -1));
+ } else if (key.toLowerCase() === "c") {
+ setLocalPin("");
+ setError("");
+ }
+ };
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.repeat) return;
+ if (e.key >= "0" && e.key <= "9") {
+ onKey(e.key);
+ e.preventDefault();
+ } else if (e.key === "Backspace") {
+ onKey("Backspace");
+ e.preventDefault();
+ } else if (e.key === "SoftLeft") {
+ if (onCancel) onCancel();
+ else nav("/menu");
+ e.preventDefault();
+ } else if (e.key.toLowerCase() === "c") {
+ onKey("c");
+ e.preventDefault();
+ } else if (e.key === "Enter") {
+ if (localPin.length === PIN_LENGTH) {
+ setPin(localPin);
+ setPinTries(pinTries + 1);
+ if (localPin === "1234") {
+ setPin(localPin);
+ setError("");
+ setPinVerified(true);
+ if (onComplete) onComplete();
+ else nav("/menu");
+ } else {
+ setError("Invalid PIN");
+ setPin("");
+ setPinVerified(false);
+ }
+ setLocalPin("");
+ }
+ e.preventDefault();
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [localPin, nav, onCancel, onComplete, pinTries, setPin, setPinTries]);
+
+ return (
+
+
+ );
+}
diff --git a/src/components/StatCard.tsx b/src/components/StatCard.tsx
index b6ea6e3..571166a 100644
--- a/src/components/StatCard.tsx
+++ b/src/components/StatCard.tsx
@@ -1,8 +1,8 @@
import { h } from "preact";
export function StatCard({ label, value }: { label: string; value: string }) {
return (
-
+ {Array.from({ length: PIN_LENGTH }).map((_, i) => {
+ return (
+
+
+ {i < localPin.length ? "●" : "○"}
+
+ );
+ })}
+ Tries: {pinTries}
+ {error && {error}
}
+
- ) {
+ return (
+
+ );
+}
diff --git a/src/components/icons/Check.tsx b/src/components/icons/Check.tsx
new file mode 100644
index 0000000..a587962
--- /dev/null
+++ b/src/components/icons/Check.tsx
@@ -0,0 +1,8 @@
+import { h } from "preact";
+export function CheckIcon({ fill = "#007E50", ...props }: { fill?: string } & preact.JSX.SVGAttributes) {
+ return (
+
+ );
+}
diff --git a/src/components/icons/ChevronIcon.tsx b/src/components/icons/ChevronIcon.tsx
new file mode 100644
index 0000000..4ca8a58
--- /dev/null
+++ b/src/components/icons/ChevronIcon.tsx
@@ -0,0 +1,15 @@
+import { h } from "preact";
+export function ChevronIcon({ fill = "currentColor", ...props }: { fill?: string } & preact.JSX.SVGAttributes) {
+ return (
+
+ );
+}
diff --git a/src/components/icons/EodIcon.tsx b/src/components/icons/EodIcon.tsx
new file mode 100644
index 0000000..6ffaaf9
--- /dev/null
+++ b/src/components/icons/EodIcon.tsx
@@ -0,0 +1,9 @@
+import { h } from "preact";
+export function EodIcon({ fill = "currentColor", ...props }: { fill?: string } & preact.JSX.SVGAttributes) {
+ return (
+
+ );
+}
diff --git a/src/components/icons/LangIcon.tsx b/src/components/icons/LangIcon.tsx
new file mode 100644
index 0000000..d92cea7
--- /dev/null
+++ b/src/components/icons/LangIcon.tsx
@@ -0,0 +1,21 @@
+import { h } from "preact";
+export function LangIcon({ fill = "currentColor", ...props }: { fill?: string } & preact.JSX.SVGAttributes) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/icons/PpIcon.tsx b/src/components/icons/PpIcon.tsx
new file mode 100644
index 0000000..2898da1
--- /dev/null
+++ b/src/components/icons/PpIcon.tsx
@@ -0,0 +1,16 @@
+import { h } from "preact";
+export function PpIcon({ fill = "currentColor", ...props }: { fill?: string } & preact.JSX.SVGAttributes) {
+ return (
+
+
+ );
+}
diff --git a/src/components/icons/SellIcon.tsx b/src/components/icons/SellIcon.tsx
new file mode 100644
index 0000000..e7b8ea2
--- /dev/null
+++ b/src/components/icons/SellIcon.tsx
@@ -0,0 +1,17 @@
+import { h } from "preact";
+export function SellIcon({ fill = "currentColor", ...props }: { fill?: string } & preact.JSX.SVGAttributes) {
+ return (
+
+ );
+}
diff --git a/src/constants/statuses.ts b/src/constants/statuses.ts
new file mode 100644
index 0000000..39e88f9
--- /dev/null
+++ b/src/constants/statuses.ts
@@ -0,0 +1,7 @@
+export const statuses = [
+ { index: 0, key: "debit-card", icon: "debit-card" },
+ { index: 1, key: "processing", icon: "processing" },
+ { index: 2, key: "complete", icon: "checked" },
+ { index: 3, key: "failed", icon: "failed" },
+ { index: 4, key: "pin", icon: "" },
+];
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index deebc0b..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-html,
-body,
-#root {
- height: 100%;
-}
-body {
- background: #0f172a;
-}
diff --git a/src/index.html b/src/index.html
index 9360c76..a025c4b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,23 +1,18 @@
-
-
-
- Interledger POS
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Interledger POS
+
+
+
+
+
+
+
+
{label}
+
+
);
diff --git a/src/components/TransactionStatus.tsx b/src/components/TransactionStatus.tsx
new file mode 100644
index 0000000..b7ae387
--- /dev/null
+++ b/src/components/TransactionStatus.tsx
@@ -0,0 +1,38 @@
+import { formatCurrency } from "@lib/currency";
+import { statuses } from "@constants/statuses";
+
+export function TransactionStatus({
+ transactionStatus,
+ amount,
+ currency,
+}: {
+ transactionStatus: number;
+ amount: string | undefined;
+ currency: string | undefined;
+}) {
+ return (
+ {label}
{value}
+
+ {transactionStatus === 0 && (
+
+ );
+}
diff --git a/src/components/icons/BalanceIcon.tsx b/src/components/icons/BalanceIcon.tsx
new file mode 100644
index 0000000..736fd90
--- /dev/null
+++ b/src/components/icons/BalanceIcon.tsx
@@ -0,0 +1,16 @@
+import { h } from "preact";
+export function BalanceIcon({ fill = "currentColor", ...props }: { fill?: string } & preact.JSX.SVGAttributes+ {formatCurrency(parseFloat(amount || "0"), currency || "EUR")} +
+ )} + +
+ {statuses[transactionStatus].icon && (
+ 
+ )}
+
+
+ )}
+