fixing weird nextjs issues

diyahir · Mar 16, 2024 · 586a1a2 · 586a1a2
1 parent 9d4ca9a
commit 586a1a2
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 86 deletions.
diff --git a/example.nginx.config b/example.nginx.config
@@ -16,6 +16,14 @@ server {
     proxy_read_timeout 600s;
   }
 
+  # this fixes a weird nextjs bug
+  location /_next/webpack-hmr {
+    proxy_pass http://127.0.0.1:3000/_next/webpack-hmr;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
   location /websocket {
     proxy_pass http://127.0.0.1:3003;
     proxy_http_version 1.1;

diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,3 +1,4 @@
+import { IBM_Plex_Mono } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { Metadata } from "next";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
@@ -8,6 +9,8 @@ const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
   : `http://localhost:${process.env.PORT}`;
 const imageUrl = `${baseUrl}/thumbnail.jpg`;
 
+const ibmPlexMono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["100", "200"], display: "swap" });
+
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
   title: {
@@ -43,13 +46,9 @@ export const metadata: Metadata = {
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html>
+    <html className={ibmPlexMono.className}>
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" />
-      <link
-        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100&display=swap"
-        rel="stylesheet"
-      />
 
       <body>
         <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -45,7 +45,7 @@ const Home = () => {
               {getBalanceWithVisibility()}
             </h1>
           </div>
-          <div className="card-footer p-4 flex justify-between flex-wrap">
+          <div className="card-footer p-4 flex justify-between flex-wrap font-mono">
             <button
               className={`btn btn-neutral w-full min-w-[136px] disabled:opacity-50 glow glow-on-hover outline-none focus:outline-none ring-violet-800 ring-2 ring-offset-2`}
               disabled={!isWebSocketConnected || balance === null || address === undefined}

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -15,7 +15,7 @@ export const Footer = () => {
   const isLocalNetwork = targetNetwork.id === hardhat.id;
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 font-plex">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 font-mono">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -57,11 +57,11 @@ export const HeaderMenuLinks = () => {
 export const Header = () => {
   const { isWebSocketConnected, reconnect } = useLightningApp();
   return (
-    <div className="sticky font-plex lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
+    <div className="sticky font-mono lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 ">
       <div className="navbar-start w-auto lg:w-1/2">
         <Link color={"white"} href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
           <Image src="/logo.svg" alt="Botanix Logo" width={"24"} height={"24"} />
-          <div className="flex flex-col font-plex font-bold text-white">Botanix {"<>"} Lightning </div>
+          <div className="flex flex-col font-bold text-white">Botanix {"<>"} Lightning </div>
         </Link>
       </div>
       <div className="navbar-end flex-grow mr-4">

diff --git a/packages/nextjs/components/HistoryTable.tsx b/packages/nextjs/components/HistoryTable.tsx
@@ -69,7 +69,7 @@ export const HistoryTable = () => {
   }
 
   return (
-    <div className="card bg-brand-bg text-white">
+    <div className="card bg-brand-bg text-white font-mono">
       <div className="card-body p-4">
         <h2 className="text-center font-mono text-md">History</h2>
         <table className="table table-auto w-full text-sm">
@@ -82,83 +82,87 @@ export const HistoryTable = () => {
                   <th className="text-right">Amount</th>
                 </tr>
               </thead>
-              <tbody>
-                {transactions.map((transaction, index) => (
-                  <React.Fragment key={index}>
-                    <tr
-                      onClick={() => toggleRow(index)}
-                      className={`cursor-pointer  ${
-                        transaction.status === "failed" ? "bg-red-400" : ""
-                      } hover:bg-white hover:bg-opacity-10`}
-                    >
-                      <td>{transaction.status}</td>
-                      <td className="tooltip" data-tip={getTooltipText(transaction)}>
-                        {transaction.date}
-                      </td>
-                      <td className="text-right">{transaction.amount} sats</td>
-                    </tr>
-                    {expandedRow === index && (
-                      <tr>
-                        <td colSpan={3}>
-                          <div className="p-2">
-                            TimeLock expiry: {new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}
-                            <br />
-                            <br />
-                            <button
-                              className="btn btn-neutral text-white text-xs p-2"
-                              onClick={() => toastAndCopy(transaction.txHash, "Transaction hash copied to clipboard")}
+              {transactions.map((transaction, index) => (
+                <tbody key={index}>
+                  {" "}
+                  {/* Move React.Fragment key to tbody */}
+                  <tr
+                    onClick={() => toggleRow(index)}
+                    className={`cursor-pointer ${
+                      transaction.status === "failed" ? "bg-red-400" : ""
+                    } hover:bg-white hover:bg-opacity-10`}
+                  >
+                    <td>{transaction.status}</td>
+                    <td className="tooltip" data-tip={getTooltipText(transaction)}>
+                      {transaction.date}
+                    </td>
+                    <td className="text-right">{transaction.amount} sats</td>
+                  </tr>
+                  {expandedRow === index && (
+                    <tr>
+                      <td colSpan={3}>
+                        <div className="p-2">
+                          TimeLock expiry: {new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}
+                          <br />
+                          <br />
+                          <button
+                            className="btn btn-neutral text-white text-xs p-2"
+                            onClick={() => toastAndCopy(transaction.txHash, "Transaction hash copied to clipboard")}
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              strokeWidth={1.5}
+                              stroke="currentColor"
+                              className="w-6 h-6"
                             >
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                strokeWidth={1.5}
-                                stroke="currentColor"
-                                className="w-6 h-6"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                                />
-                              </svg>
-                            </button>
-                            &nbsp; txHash: {transaction.txHash.substring(0, 20)}...
-                            <br />
-                            <br />
-                            <button
-                              className="btn btn-neutral text-white text-xs p-2"
-                              onClick={() => toastAndCopy(transaction.contractId, "Contract ID copied to clipboard")}
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
+                              />
+                            </svg>
+                          </button>
+                          &nbsp; txHash: {transaction.txHash.substring(0, 20)}...
+                          <br />
+                          <br />
+                          <button
+                            className="btn btn-neutral text-white text-xs p-2"
+                            onClick={() => toastAndCopy(transaction.contractId, "Contract ID copied to clipboard")}
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              strokeWidth={1.5}
+                              stroke="currentColor"
+                              className="w-6 h-6"
                             >
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                strokeWidth={1.5}
-                                stroke="currentColor"
-                                className="w-6 h-6"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                                />
-                              </svg>
-                            </button>
-                            &nbsp; contractId: {transaction.contractId.substring(0, 16)}...
-                          </div>
-                        </td>
-                      </tr>
-                    )}
-                  </React.Fragment>
-                ))}
-              </tbody>
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
+                              />
+                            </svg>
+                          </button>
+                          &nbsp; contractId: {transaction.contractId.substring(0, 16)}...
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              ))}
             </>
           )}
           {transactions.length === 0 && (
-            <tr>
-              <td className=" text-center py-4">No history...go send your first lightning payment!</td>
-            </tr>
+            <tbody>
+              <tr>
+                <td className="text-center py-4" colSpan={3}>
+                  No history...go send your first lightning payment!
+                </td>
+              </tr>
+            </tbody>
           )}
         </table>
       </div>

diff --git a/packages/nextjs/components/SendModalPopup.tsx b/packages/nextjs/components/SendModalPopup.tsx
@@ -136,7 +136,7 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
   return (
     <>
       {isOpen && (
-        <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-40 flex justify-center items-center">
+        <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-40 flex justify-center items-center font-mono">
           <div className="card lg:w-1/3 md:w-1/2 w-full bg-base-200 rounded-lg md:h-auto">
             <div className="flex w-full items-center justify-center relative text-white bg-brand-bg pt-4 rounded-t-lg">
               <span className="">{lnInvoiceRef.current == null ? "Scan QR Code" : "Review"}</span>

diff --git a/packages/nextjs/hooks/useWebSocket.tsx b/packages/nextjs/hooks/useWebSocket.tsx
@@ -40,6 +40,9 @@ export const useWebSocket = (url: string) => {
     socket.current.onerror = event => setError(event);
     socket.current.onmessage = event => {
       try {
+        if (event.data === "Server online: You are now connected!") {
+          return;
+        }
         const responseData: InvoiceResponse = JSON.parse(event.data);
         setData(responseData);
       } catch (err) {

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -6,7 +6,7 @@
 :root,
 [data-theme] {
   background: oklch(var(--b2));
-  font-family: 'plex';
+  font-family: var(--font-ibm-plex-mono);
 }
 
 body {

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -116,10 +116,10 @@ module.exports = {
         "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
       height: {
-        'full-minus-200': 'calc(100vh - 200px)', // Full height minus 200 pixels
+        "full-minus-200": "calc(100vh - 200px)", // Full height minus 200 pixels
       },
       fontFamily: {
-        plex: ["IBM Plex Mono"],
+        plex: ["var(--font-ibm-plex-mono)"],
       },
       backgroundImage: {
         "custom-gradient": "radial-gradient(var(--tw-gradient-stops))",