InvoiceView uses QRCodeSVG

macterra · Oct 23, 2023 · b0e9c6e · b0e9c6e
1 parent d7c8afe
commit b0e9c6e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",

diff --git a/frontend/src/InvoiceView.js b/frontend/src/InvoiceView.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
 
 const InvoiceView = ({ invoice }) => {
 
@@ -116,6 +117,12 @@ const InvoiceView = ({ invoice }) => {
         color: '#ffffff',
     };
 
+    const linkStyle = {
+        margin: '2px',
+        fontSize: '12px',
+        color: '#ffffff',
+    };
+
     return (
         <div>
             <p style={titleStyle}>{invoice.memo}</p>
@@ -129,26 +136,26 @@ const InvoiceView = ({ invoice }) => {
                     <div style={textStyle}>{`expires in: ${timeLeft} seconds`}</div>
                 )
             }
-            {!expired &&
-                <div style={cardStyle}>
-                    {paid ?
-                        (
-                            <div>
-                                <div style={imgContainerStyle}>
-                                    <img src={'/paid.png'} style={imgStyle} alt={'paid'} />
-                                </div>
+            {!expired && paid ?
+                (
+                    <div style={cardStyle}>
+                        <div style={imgContainerStyle}>
+                            <img src={'/paid.png'} style={imgStyle} alt={'paid'} />
+                        </div>
+                    </div>
+                ) : (
+                    <a href={invoice.paylink}>
+                        <div style={linkStyle}>Click or scan this QR code to pay the lightning invoice.</div>
+                        <div style={cardStyle}>
+                            <div style={imgContainerStyle}>
+                                <QRCodeSVG value={invoice.payment_request} size={256} />
                             </div>
-                        ) : (
-                            <a href={invoice.paylink}>
-                                <div style={imgContainerStyle}>
-                                    <img src={invoice.qrcode} style={imgStyle} alt={invoice.memo} />
-                                </div>
-                            </a>
-                        )}
-                </div>
+                        </div>
+                    </a>
+                )
             }
         </div>
-    );
+    )
 };
 
 export default InvoiceView;