More styling

diyahir · Mar 8, 2024 · 53de3a9 · 53de3a9
1 parent 508665d
commit 53de3a9
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 74 deletions.
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">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 font-plex">
       <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
@@ -65,7 +65,7 @@ export const Header = () => {
 
   const { isWebSocketConnected, reconnect } = useLightningApp();
   return (
-    <div className="sticky 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-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="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label

diff --git a/packages/nextjs/components/HistoryTable.tsx b/packages/nextjs/components/HistoryTable.tsx
@@ -1,12 +1,12 @@
 import React, { Fragment, useState } from "react";
-import { useToast } from "@chakra-ui/react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import { useWalletClient } from "wagmi";
 import { HistoricalTransaction, useLightningApp } from "~~/hooks/LightningProvider";
 import { useScaffoldContract } from "~~/hooks/scaffold-eth";
 
 export const HistoryTable = () => {
   const { transactions, addTransaction } = useLightningApp();
-  const toast = useToast();
   const [expandedRow, setExpandedRow] = useState<number | null>(null); // State to manage expanded row index
   const { data: walletClient } = useWalletClient();
   const { data: yourContract } = useScaffoldContract({
@@ -24,12 +24,9 @@ export const HistoryTable = () => {
 
   const toastAndCopy = (text: string, message: string) => {
     navigator.clipboard.writeText(text);
-    toast({
-      position: "top",
-      title: message,
-      status: "success",
-      duration: 3000,
-      isClosable: true,
+    toast.success(message, {
+      position: "top-center",
+      autoClose: 5000,
     });
   };
 
@@ -58,12 +55,9 @@ export const HistoryTable = () => {
       .refund([transaction.contractId as `0x${string}`], {})
       .then(tx => {
         console.log(tx);
-        toast({
-          position: "top",
-          title: "Refund Success",
-          status: "success",
-          duration: 3000,
-          isClosable: true,
+        toast.success("Refund Successful", {
+          position: "top-center",
+          autoClose: 5000,
         });
         addTransaction({
           status: "refunded",
@@ -77,12 +71,9 @@ export const HistoryTable = () => {
       })
       .catch(e => {
         console.error(e);
-        toast({
-          position: "top",
-          title: "Refund Failed",
-          status: "error",
-          duration: 3000,
-          isClosable: true,
+        toast.error("Refund Failed", {
+          position: "top-center",
+          autoClose: 5000,
         });
       });
   }
@@ -157,6 +148,7 @@ export const HistoryTable = () => {
           )}
         </table>
       </div>
+      <ToastContainer />
     </div>
   );
 };
diff --git a/packages/nextjs/components/PaymentInvoice.tsx b/packages/nextjs/components/PaymentInvoice.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-// import { DotLoader } from "react-spinners";
 import { useLightningApp } from "~~/hooks/LightningProvider";
 import { LnPaymentInvoice } from "~~/types/utils";
 
@@ -33,7 +32,7 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
 
   return (
     <div className="flex h-full flex-col justify-evenly content-evenly gap-5">
-      <table className="w-full text-white text-xs">
+      <table className="w-full text-white text-sm">
         <tbody>
           <tr>
             <td className="border-transparent">Expiry Time</td>
@@ -58,8 +57,16 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
       {/* You'll need to adapt or implement your own stepper logic with Tailwind CSS */}
       <ul className="steps steps-vertical">
         {steps.map((stepInfo, index) => (
-          <li key={index} className={`${index < step ? "step step-primary" : "step"} text-white`}>
-            {stepInfo.title}
+          <li
+            // data-content={index === step ? "" : index + 1}
+            key={index}
+            className={`${index < step ? "step step-primary" : "step"} text-gray-400`}
+          >
+            <div className="flex">
+              {stepInfo.title}
+              &nbsp;
+              {step === index && <span className="loading loading-spinner"></span>}
+            </div>
           </li>
         ))}
       </ul>
@@ -68,14 +75,14 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
       {step < 2 ? (
         <div className="w-full flex justify-between">
           <button
-            className={`btn btn-error text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
+            className={`btn btn-error w-2/5 text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
             onClick={() => cancelPayment()}
             disabled={step == 2 || step == 3}
           >
             Cancel
           </button>
           <button
-            className={`btn btn-success text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
+            className={`btn btn-success w-2/5 text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
             onClick={() => submitPayment()}
             disabled={step == 2 || step == 3}
           >
@@ -84,7 +91,7 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
         </div>
       ) : (
         <button
-          className="bg-blue-500 w-full text-white"
+          className="btn btn-neutral  w-full text-white "
           onClick={() => cancelPayment()}
           disabled={step == 2 || step == 3}
         >

diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect } from "react";
-import { ChakraProvider } from "@chakra-ui/react";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { Toaster } from "react-hot-toast";
 import { WagmiConfig } from "wagmi";
@@ -42,19 +41,17 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
   const { isDarkMode } = useDarkMode();
 
   return (
-    <ChakraProvider>
-      <WagmiConfig config={wagmiConfig}>
-        <ProgressBar />
-        <RainbowKitProvider
-          chains={[...appChains.chains, botanixTestnet]}
-          avatar={BlockieAvatar}
-          theme={isDarkMode ? darkTheme() : lightTheme()}
-        >
-          <LightningProvider>
-            <ScaffoldEthApp>{children}</ScaffoldEthApp>
-          </LightningProvider>
-        </RainbowKitProvider>
-      </WagmiConfig>
-    </ChakraProvider>
+    <WagmiConfig config={wagmiConfig}>
+      <ProgressBar />
+      <RainbowKitProvider
+        chains={[...appChains.chains, botanixTestnet]}
+        avatar={BlockieAvatar}
+        theme={isDarkMode ? darkTheme() : lightTheme()}
+      >
+        <LightningProvider>
+          <ScaffoldEthApp>{children}</ScaffoldEthApp>
+        </LightningProvider>
+      </RainbowKitProvider>
+    </WagmiConfig>
   );
 };
diff --git a/packages/nextjs/components/SendModalPopup.tsx b/packages/nextjs/components/SendModalPopup.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useSteps } from "@chakra-ui/react";
 import { Scanner } from "@yudiel/react-qr-scanner";
 import { PaymentRequestObject, decode } from "bolt11";
 import toast from "react-hot-toast";
 import { useWalletClient } from "wagmi";
-import { PaymentInvoice, steps } from "~~/components/PaymentInvoice";
+import { PaymentInvoice } from "~~/components/PaymentInvoice";
 import { useLightningApp } from "~~/hooks/LightningProvider";
 import { useScaffoldContract } from "~~/hooks/scaffold-eth";
 import { LnPaymentInvoice } from "~~/types/utils";
@@ -54,10 +53,7 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
     walletClient,
   });
 
-  const { activeStep, setActiveStep } = useSteps({
-    index: 1,
-    count: steps.length,
-  });
+  const [activeStep, setActiveStep] = useState<number>(1);
 
   function getMinTimelock(lnInvoiceTimelock: number) {
     const now = Math.floor(Date.now() / 1000);
@@ -143,9 +139,12 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
       {isOpen && (
         <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-40 flex justify-center items-center">
           <div className="bg-base-200 rounded-lg">
-            <div className="text-white bg-brand-bg text-center p-4 rounded-t-lg">
-              {lnInvoiceRef.current == null ? "Scan QR Code" : "Review"}
-              <button onClick={cleanAndClose} className="absolute top-0 right-0 m-4">
+            <div className="flex 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>
+              <button
+                onClick={cleanAndClose}
+                className="btn-neutral absolute right-5 top-1/2 transform -translate-y-2 btn btn-circle btn-sm"
+              >
                 X
               </button>
             </div>
@@ -158,9 +157,9 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
                     onResult={result => handleScan(result)}
                     // onDecode={result => handleScan(result)}
                   />
-                  <div className="flex">
+                  <div className="join">
                     <button
-                      className="cursor-pointer bg-gray-200 p-2"
+                      className="btn join-item cursor-pointer bg-gray-600 p-2"
                       onClick={() => {
                         navigator.clipboard.readText().then(text => {
                           handleInvoiceChange(text);
@@ -172,7 +171,7 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
                     <input
                       type="text"
                       placeholder="ln1232...."
-                      className="border p-2"
+                      className="input input-bordered join-item"
                       value={invoice}
                       onChange={e => handleInvoiceChange(e.target.value)}
                     />

diff --git a/packages/nextjs/hooks/LightningProvider.tsx b/packages/nextjs/hooks/LightningProvider.tsx
@@ -1,7 +1,8 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { useNativeCurrencyPrice, useScaffoldEventSubscriber } from "./scaffold-eth";
 import { useWebSocket } from "./useWebSocket";
-import { useToast } from "@chakra-ui/react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 // import { useWalletClient } from "wagmi";
 import { InvoiceRequest, InvoiceResponse } from "~~/types/utils";
 
@@ -35,7 +36,6 @@ export const LightningProvider = ({ children }: { children: React.ReactNode }) =
   const [transactions, setTransactionsState] = useState<HistoricalTransaction[]>([]);
   const transactionRef = React.useRef<HistoricalTransaction[]>([]);
   const [invoiceContractIdPair, setInvoiceContractIdPair] = useState<string[]>([]);
-  const toast = useToast();
   const setTransactions = (transactions: HistoricalTransaction[]) => {
     transactionRef.current = transactions;
     setTransactionsState(transactions);
@@ -90,22 +90,16 @@ export const LightningProvider = ({ children }: { children: React.ReactNode }) =
         hashLockTimestamp: lastTransaction.hashLockTimestamp,
         lnInvoice: lastTransaction.lnInvoice,
       });
-      toast({
-        title: "Payment Success",
-        description: "Payment has been successfully completed",
-        status: "success",
-        duration: 9000,
-        isClosable: true,
-        position: "top",
+      toast.success("Payment Success", {
+        position: "top-center",
+        autoClose: 5000,
+        theme: "colored",
       });
     } else {
-      toast({
-        title: "Payment Failed",
-        description: data?.message || "Payment has failed",
-        status: "error",
-        duration: 9000,
-        isClosable: true,
-        position: "top",
+      toast.error(data?.message || "Payment has failed", {
+        autoClose: 5000,
+        position: "top-center",
+        theme: "colored",
       });
       addTransaction({
         status: "failed",
@@ -144,6 +138,7 @@ export const LightningProvider = ({ children }: { children: React.ReactNode }) =
       value={{ transactions, data, addTransaction, sendMessage, isWebSocketConnected, price, reconnect }}
     >
       {children}
+      <ToastContainer position="top-center" />
     </HistoricalTransactionsContext.Provider>
   );
 };

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -39,6 +39,7 @@
     "react-copy-to-clipboard": "~5.1.0",
     "react-dom": "~18.2.0",
     "react-hot-toast": "~2.4.0",
+    "react-toastify": "^10.0.4",
     "use-debounce": "~8.0.4",
     "usehooks-ts": "~2.9.1",
     "viem": "1.19.9",

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
     themes: [
       {
         customDark: {
-          primary: "#8A3FFC", // A shade of purple for primary elements
+          primary: "#67cff1", // A shade of purple for primary elements
           "primary-content": "#F9FBFF", // High contrast content color for readability
           secondary: "#323f61", // A subdued shade for secondary elements
           "secondary-content": "#F9FBFF",

diff --git a/yarn.lock b/yarn.lock
@@ -3128,6 +3128,7 @@ __metadata:
     react-copy-to-clipboard: ~5.1.0
     react-dom: ~18.2.0
     react-hot-toast: ~2.4.0
+    react-toastify: ^10.0.4
     tailwindcss: ~3.3.3
     type-fest: ~4.6.0
     typescript: ~5.1.6
@@ -6056,7 +6057,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:2.1.0":
+"clsx@npm:2.1.0, clsx@npm:^2.1.0":
   version: 2.1.0
   resolution: "clsx@npm:2.1.0"
   checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
@@ -11563,6 +11564,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^10.0.4":
+  version: 10.0.4
+  resolution: "react-toastify@npm:10.0.4"
+  dependencies:
+    clsx: ^2.1.0
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: fea1b6924f8f15cd2b5d27df0d1a4aec40321080d00fb12188d9fb14f7249554bad591da0a500024424685bc81576a6b04e4190b2a4e9b3f9054c73fff25db6a
+  languageName: node
+  linkType: hard
+
 "react@npm:~18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"