ESLinting + Readme

README.md

@@ -63,17 +63,29 @@ Before you begin, you need to install the following tools:
 
 ## Getting Started
 
-**Disclaimer: this is using REAL lightning network sats because it is just easier and more stable to do so. Do not put more than you are willing to lose.**
+#### Lightning Setup and Wallet Setup
+
+This step is half optional. I provided you 3 options for running the lightning server:
+
+A. You can run your own lightning node and server.
+
+B. You can connect to my node and websocket server, so no nead to run any lightning stuff.
 
-#### Lightning Setup
+C. Run the lightning server in 'MOCK' mode, which will simulate the lightning server.
+
+To set up, A, your own server:
+
+**Disclaimer: this is using REAL lightning network sats because it is just easier and more stable to do so. Do not put more than you are willing to lose.**
 
 1. You must have a lightning node running. I am using voltage which has a 20 day free trial to host your own node: [Voltage](https://voltage.cloud/).
 
 2. Back up your seed and store it in a safe place.
 
 3. Fund your node with some sats and fund your channel. I recommend opening a channel with someone well connected because it has higher chances of payment success.
 
-#### Running Locally
+Generate a new botanix wallet, store the hex private key somewhere safe, and fund it with some testnet sats.
+
+#### Running Locally (A)
 
 3. Clone this repo & install dependencies
 
@@ -83,7 +95,7 @@ cd lightning-dapp
 yarn install
 ```
 
-2. Copy the `sample.env` file in the root of the project pacakges and add the following and change for all 3 packages.
+2. Copy the `sample.env` file in the root of the server and nextjs packages. Rename it to `.env` and fill in the required values.
 
 3. Start the services
 
@@ -98,20 +110,48 @@ docker build -f packages/nextjs/Dockerfile . -t botanix-ln-webapp
 docker build -f packages/server/Dockerfile . -t botanix-ln-server
 ```
 
-Alternatively: 3. Run a local LSP server in the first terminal:
+Alternatively:
+
+Run the webapp in the first terminal:
 
 ```
-cd packages/server
 yarn start
 ```
 
-4. Run a local webapp in a second terminal
+Run a local LSP server relayer in a second terminal
+
+```
+yarn server
+```
+
+#### Running Locally (B: Only Webapp, My Server)
+
+1. Clone this repo & install dependencies
+
+```
+git clone https://github.com/diyahir/lightning-dapp.git
+cd lightning-dapp
+yarn install
+```
+
+2. Copy the `sample.live.env` file in the root of the nextjs package. Rename it to `.env`.
+
+3. Start the webapp
 
 ```
 yarn start
 ```
 
-This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in `hardhat.config.ts`.
+#### Running Locally (C: Mock Server)
+
+Same as A, no need to do any lightning setup, but in the server `.env` file, set
+
+```
+LND_MACAROON=""
+LND_SOCKET=""
+```
+
+This will run the server in mock mode.
 
 ## Deploying Smart Contracts
 

docker-compose.yml

@@ -8,9 +8,6 @@ services:
     image: botanix-ln-webapp:latest  
     ports:
       - "3000:3000"
-    environment:
-      - WEBSOCKET_URL=ws://localhost:3003 
-      # Websocket server URL set to your domain if hosted example "wss://yourdomain.com/websocket" 
     depends_on:
       - server
     restart: always

packages/nextjs/components/Header.tsx

@@ -7,7 +7,6 @@ import { usePathname } from "next/navigation";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useLightningApp } from "~~/hooks/LightningProvider";
 import { ServerStatus } from "~~/types/utils";
-import { get } from "http";
 
 type HeaderMenuLink = {
   label: string;
@@ -79,6 +78,7 @@ export const Header = () => {
         return "Server is in mock mode, all invoice payments will be mocked by the LSP";
     }
   }
+
   return (
     <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">
@@ -93,10 +93,10 @@ export const Header = () => {
           onClick={() => {
             if (!isWebSocketConnected) reconnect();
           }}
-
         >
-          <div className={`tooltip tooltip-bottom ${getColorFromStatus(lspStatus)} rounded-full w-2 h-2 self-center`}
-          data-tip={getTooltipFromStatus(lspStatus)}
+          <div
+            className={`tooltip tooltip-bottom ${getColorFromStatus(lspStatus)} rounded-full w-2 h-2 self-center`}
+            data-tip={getTooltipFromStatus(lspStatus)}
           ></div>
           {isWebSocketConnected ? "LSP Connected" : "LSP Disconnected"}
         </button>

packages/nextjs/hooks/useWebSocket.tsx

@@ -3,7 +3,7 @@ import { InvoiceRequest, InvoiceResponse, ServerStatus } from "~~/types/utils";
 
 export const useWebSocket = (url: string) => {
   const socket = useRef<WebSocket | null>(null);
-  const [status, setStatus] =useState<ServerStatus>(ServerStatus.INACTIVE);
+  const [status, setStatus] = useState<ServerStatus>(ServerStatus.INACTIVE);
   const [data, setData] = useState<InvoiceResponse | null>(null);
   const [error, setError] = useState<Event | null>(null);
   const [isWebSocketConnected, setIsWebSocketConnected] = useState<boolean>(false);
@@ -41,11 +41,10 @@ export const useWebSocket = (url: string) => {
     socket.current.onerror = event => setError(event);
     socket.current.onmessage = event => {
       try {
-
         const responseData: InvoiceResponse = JSON.parse(event.data);
         if (responseData.status) {
-           setStatus(responseData.status as ServerStatus);
-           return;
+          setStatus(responseData.status as ServerStatus);
+          return;
         }
         setData(responseData);
       } catch (err) {

packages/nextjs/sample.env

@@ -15,4 +15,6 @@ NEXT_PUBLIC_VERCEL_URL="http://localhost:3000"
 NEXTAUTH_URL="http://localhost:3000"
 PORT=3000
 LSP_ADDRESS="0xf89335a26933d8Dd6193fD91cAB4e1466e5198Bf"
-WEBSOCKET_URL="ws://localhost:3003"
+# Change the LSP_ADDRESS to your server address
+WEBSOCKET_URL="ws://localhost:3003"
+# Websocket server URL set to your domain if hosted example "wss://yourdomain.com/websocket" 

packages/nextjs/types/utils.ts

@@ -23,4 +23,4 @@ export enum ServerStatus {
   ACTIVE = "ACTIVE",
   INACTIVE = "INACTIVE",
   MOCK = "MOCK",
-}
+}

packages/server/sample.env

@@ -2,10 +2,12 @@
 LND_MACAROON=""
 LND_SOCKET="arandomnode.voltageapp.io:10009"
 ### You may need to use port 10009 if running on voltage
+### These two are optional, if left blank then the server runs in 'MOCK' mode
 
 ### Chain Info ###
 RPC_URL="https://node.botanixlabs.dev"
 CHAIN_ID="3636"
 
 ### LSP Private Ket ###
-LSP_PRIVATE_KEY=""
+LSP_PRIVATE_KEY="0x1233....."
+# Generate a dummy evm private key, not a seed phase