- )
- }
-
- if (key === LNURL_METADATA_KEY) {
- const splitMetadata = JSON.parse(decodedInvoice[key]);
-
- // eslint-disable-next-line array-callback-return
- const toRender = splitMetadata.map((arrOfData) => {
- if (arrOfData[0] === 'text/plain') {
- return (
-
- )
- }
-
- if (arrOfData[0] === 'text/identifier') {
- return (
-
- )
- }
-
- if (arrOfData[0] === 'image/png;base64') {
- return (
-
- );
- }
- });
-
- return toRender;
+ );
}
- return (
-
- );
- }
-
- renderSubmit = () => {
- const { isInvoiceLoaded, text } = this.state;
- const submitClassnames = cx(
- 'submit',
- { 'submit__close': isInvoiceLoaded },
- );
+ );
+ }
- const onClick = () => {
- if (isInvoiceLoaded) {
- this.clearInvoiceDetails();
- } else {
- this.getInvoiceDetails(text);
+ return null;
+ }).filter(Boolean);
}
- }
-
- return (
-
- );
- }
-
- renderOptions = () => {
- const { isInvoiceLoaded } = this.state;
- const optionsClassnames = cx(
- 'options',
- { 'options--hide': isInvoiceLoaded },
- );
- return (
-
- );
- }
-
- renderCamera = () => {
- const { isQRCodeOpened, isInvoiceLoaded } = this.state;
-
- const styleQRWrapper = cx({
- 'qrcode' : true,
- 'qrcode--opened': isQRCodeOpened,
+ return [
+
,
+ ];
});
- const styleQRContainer = cx(
- 'qrcode__container',
- { 'qrcode__container--opened': isQRCodeOpened },
- );
- const styleImgQR = cx(
- 'qrcode__img',
- { 'qrcode__img--opened': isQRCodeOpened },
- );
-
- const qrReaderStyles = {
- width: '100%',
- border: '2pt solid #000000',
- };
-
- const srcImage = isQRCodeOpened ? closeImage : qrcodeImage;
-
- const handleScan = (value) => {
- if (Object.is(value, null)) return;
- let text = value;
- if (value.includes('lightning')) {
- text = value.split('lightning:')[1];
- }
-
- this.getInvoiceDetails(text);
- this.setState(() => ({
- isQRCodeOpened: false,
- text,
- }));
- }
+ const hasError = Boolean(error);
- const handleError = (error) => this.setState(() => ({
- isInvoiceLoaded: false,
- hasError: true,
- error,
- isQRCodeOpened: false
- }));
-
- return isInvoiceLoaded ? null : (
-
- {isQRCodeOpened && (
-
+ return (
+
+
+
+
+
+
+ Decode an invoice
+ Paste a Lightning invoice, LNURL, or Lightning Address to inspect it.
+
+
+
+
+
+
+
+
+
+ {!isInvoiceLoaded && (
+
+ )}
+
+
+
+ {isInvoiceLoaded && (
+
+
+
+ {isLNURL ? 'LNURL Details' : 'Invoice Details'}
+
+ {isLNURL
+ ? 'Fetched metadata and fields for the LNURL request.'
+ : 'Parsed invoice fields and tags.'}
+
+
+
+
+ {isLNURL ? lnurlDetails : invoiceDetails}
+
+
)}
-
-
- {!isQRCodeOpened ? null : (
-
- )}
-
-
- );
- }
-
- render() {
- const { isLNURL, isInvoiceLoaded, hasError } = this.state;
-
- const appClasses = cx(
- 'app',
- { 'app--opened': isInvoiceLoaded },
- );
- const appColumnClasses = cx(
- 'app__column',
- {
- 'app__column--invoice-loaded': isInvoiceLoaded,
- 'app__column--error': hasError,
- },
- );
- const appSubmitClasses = cx(
- 'app__submit',
- { 'app__submit--invoice-loaded': isInvoiceLoaded },
- );
- return (
-
- {this.renderOptions()}
- {this.renderLogo()}
-
- {this.renderInput()}
-
- {this.renderSubmit()}
- {this.renderCamera()}
-
-
-
- {isLNURL ? this.renderLNURLDetails() : this.renderInvoiceDetails()}
- {this.renderErrorDetails()}
-
+ {hasError && (
+
+ Unable to decode
+ {error.message || String(error)}
+
+ )}
- );
- }
+
+ );
}
diff --git a/src/components/ui/alert.jsx b/src/components/ui/alert.jsx
new file mode 100644
index 0000000..ae130c9
--- /dev/null
+++ b/src/components/ui/alert.jsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+ 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
+ {
+ variants: {
+ variant: {
+ default: 'bg-background text-foreground',
+ destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ },
+);
+
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
+
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/badge.jsx b/src/components/ui/badge.jsx
new file mode 100644
index 0000000..2ddb43a
--- /dev/null
+++ b/src/components/ui/badge.jsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+ 'inline-flex items-center rounded-md border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80',
+ outline: 'border-border text-foreground',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ },
+);
+
+function Badge({ className, variant, ...props }) {
+ return
;
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
new file mode 100644
index 0000000..9aba9fd
--- /dev/null
+++ b/src/components/ui/button.jsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+ outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+);
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button';
+ return (
+
+ );
+ },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx
new file mode 100644
index 0000000..0c32657
--- /dev/null
+++ b/src/components/ui/card.jsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
new file mode 100644
index 0000000..ce14526
--- /dev/null
+++ b/src/components/ui/dialog.jsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }) => (
+
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..7db8ffc
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => (
+
+));
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..36a8865
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 224 71% 4%;
+ --foreground: 210 40% 98%;
+ --card: 222 47% 11%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222 47% 11%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 45 93% 58%;
+ --primary-foreground: 222 47% 11%;
+ --secondary: 217 33% 17%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217 33% 17%;
+ --muted-foreground: 215 20% 65%;
+ --accent: 217 33% 17%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62% 51%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217 33% 17%;
+ --input: 217 33% 17%;
+ --ring: 45 93% 58%;
+ --radius: 0.75rem;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ }
+
+ * {
+ @apply border-border;
+ }
+}
diff --git a/src/index.js b/src/index.js
index 19ac71e..af48d55 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,13 @@
// Core Libs
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
+import './index.css';
// Main Component
import { App } from './app';
-// DOM Render
-ReactDOM.render(
-
,
- document.getElementById('root'),
-);
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
);
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..0ae73e1
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..1926a7e
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,49 @@
+module.exports = {
+ darkMode: ['class'],
+ content: ['./src/**/*.{js,jsx}', './public/index.html'],
+ theme: {
+ extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ },
+ },
+ plugins: [require('tailwindcss-animate')],
+};