From ace1c4bc10851b5d2b5ef7855d96fee3bb3aef13 Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Sat, 14 Dec 2024 08:34:19 -0300
Subject: [PATCH 1/8] Feat: Add error alert on widget page

---
 src/components/Widget.tsx | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
index d12a244..5ca1677 100644
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import {
   Client,
   Event,
@@ -13,6 +13,7 @@ import {
 import { MsEdgeTTS } from "msedge-tts";
 import { loadConfig, Settings } from "@/lib/config";
 import { clientConnect } from "@/lib/nostr/client";
+import { TriangleAlert } from "lucide-react";
 
 const config: Settings = loadConfig();
 
@@ -43,6 +44,24 @@ const createTTS = async (text: string) => {
   });
 };
 
+const ErrorAlert: React.FC<{ text: string }> = ({ text }) => (
+  <div className="fixed bottom-0 left-0 z-50 p-4 sm:p-5">
+    <div
+      className="flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-neutral-300"
+      role="alert"
+    >
+      <TriangleAlert className="flex-shrink-0 inline size-4 me-2" />
+
+      <span className="sr-only">Error</span>
+
+      <div>
+        <span className="font-medium">Error!</span>
+        {text}
+      </div>
+    </div>
+  </div>
+);
+
 export const TTSWidget: React.FC<TTSWidgetProps> = ({
   pubkey,
   onEventProcessed,
@@ -51,6 +70,8 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
   const [queue, setQueue] = useState<Event[]>([]);
   const [isVisible, setIsVisible] = useState(false);
   const [widgetText, setWidgetText] = useState("");
+  const [errorText, setErrorText] = useState<string | undefined>();
+
   const containerRef = useRef<HTMLDivElement>(null);
   const lastZapRef = useRef<Event>();
   const isProcessingRef = useRef(false);
@@ -82,6 +103,7 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
         setQueue((prev) => [latestEvent, ...prev]);
       }
     } catch (error) {
+      setErrorText("Error processing audio stream");
       console.error("Error fetching events:", error);
     }
   }, [client, pubkey]);
@@ -124,10 +146,12 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
       });
 
       audioStream.on("error", (error) => {
+        setErrorText("Error processing audio stream");
         console.error("Error processing audio stream:", error);
         isProcessingRef.current = false;
       });
     } catch (error) {
+      setErrorText("Error processing event");
       console.error("Error processing event:", error);
       isProcessingRef.current = false;
     }
@@ -179,8 +203,12 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
   }, []);
 
   return (
-    <div id="widget-container" ref={containerRef}>
-      <div id="widget">{widgetText}</div>
-    </div>
+    <>
+      <div id="widget-container" ref={containerRef}>
+        <div id="widget">{widgetText}</div>
+      </div>
+
+      {errorText && <ErrorAlert text={errorText} />}
+    </>
   );
 };

From 183e5aad2691d025da3b9e7f1f16bb3b91f0ddf4 Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Sat, 14 Dec 2024 08:52:32 -0300
Subject: [PATCH 2/8] Feat: Nostr client will no use signer by default

---
 src/components/NostrProvider.tsx | 38 ++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/NostrProvider.tsx b/src/components/NostrProvider.tsx
index bb08753..c6b2358 100644
--- a/src/components/NostrProvider.tsx
+++ b/src/components/NostrProvider.tsx
@@ -1,44 +1,48 @@
 "use client";
 
-import { createContext, useState, useEffect } from "react";
+import { createContext, useEffect, useState } from "react";
 import {
   Client,
   loadWasmSync,
   Nip07Signer,
   NostrSigner,
 } from "@rust-nostr/nostr-sdk";
-import { Settings, loadConfig } from "@/lib/config";
 
 interface NostrProviderProps {
+  withSigner?: boolean;
+  relays: string[];
   children: React.ReactNode;
 }
 
 interface NostrContextProps {
   client: Client | null;
-  signer: Nip07Signer | null;
 }
 
 const NostrContext = createContext({
   client: null,
-  signer: null,
+  pubKey: null,
 } as NostrContextProps);
 
-const config: Settings = loadConfig();
-
-const NostrProvider: React.FC<NostrProviderProps> = ({ children }) => {
+const NostrProvider: React.FC<NostrProviderProps> = ({
+  withSigner = false,
+  relays,
+  children,
+}) => {
   const [client, setClient] = useState<Client | null>(null);
-  const [signer, setSigner] = useState<Nip07Signer | null>(null);
+  const [signer, setSigner] = useState<NostrSigner | null>(null);
 
   loadWasmSync();
 
   useEffect(() => {
-    const nip07Signer = new Nip07Signer();
-    setSigner(nip07Signer);
+    if (withSigner) {
+      const nip07Signer = new Nip07Signer();
+
+      const newSigner = NostrSigner.nip07(nip07Signer);
+      setSigner(newSigner);
+    }
 
-    const newSigner = NostrSigner.nip07(nip07Signer);
-    const newClient = new Client(newSigner);
+    const newClient = new Client(signer || undefined);
 
-    const relays = config.RELAYS;
     relays.map(async (relay) => {
       await newClient.addRelay(relay);
     });
@@ -46,12 +50,12 @@ const NostrProvider: React.FC<NostrProviderProps> = ({ children }) => {
     newClient.connect().then(() => {
       setClient(newClient);
     });
-  }, []);
+  }, [withSigner, relays]);
+
+  const values: NostrContextProps = { client };
 
   return (
-    <NostrContext.Provider value={{ client, signer } as NostrContextProps}>
-      {children}
-    </NostrContext.Provider>
+    <NostrContext.Provider value={values}>{children}</NostrContext.Provider>
   );
 };
 

From 790f78d4f80c277659c54c980e199a6c9b8290bc Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Sat, 14 Dec 2024 08:54:17 -0300
Subject: [PATCH 3/8] Feat: Widget will be consume by client

---
 src/app/profile/[npub]/widget/page.tsx | 13 ++++++++++---
 src/components/Widget.tsx              | 16 ++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/profile/[npub]/widget/page.tsx b/src/app/profile/[npub]/widget/page.tsx
index 43d0a78..827eb17 100644
--- a/src/app/profile/[npub]/widget/page.tsx
+++ b/src/app/profile/[npub]/widget/page.tsx
@@ -1,7 +1,12 @@
-import { TTSWidget } from "@/components/Widget";
-
 import "./widget.css";
+
 import { RemoveLogo } from "@/components/utils/RemoveLogo";
+import { TTSWidget } from "@/components/Widget";
+
+import { loadConfig, Settings } from "@/lib/config";
+import { NostrProvider } from "@/components/NostrProvider";
+
+const config: Settings = loadConfig();
 
 interface PageProps {
   params: { npub: string };
@@ -11,7 +16,9 @@ export default function widgetPage({ params }: PageProps) {
   return (
     <>
       <RemoveLogo />
-      <TTSWidget pubkey={params.npub} />
+      <NostrProvider relays={config.RELAYS}>
+        <TTSWidget pubkey={params.npub} />
+      </NostrProvider>
     </>
   );
 }
diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
index 5ca1677..cd24231 100644
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -1,8 +1,13 @@
 "use client";
 
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useContext,
+} from "react";
 import {
-  Client,
   Event,
   EventSource,
   Filter,
@@ -12,8 +17,8 @@ import {
 } from "@rust-nostr/nostr-sdk";
 import { MsEdgeTTS } from "msedge-tts";
 import { loadConfig, Settings } from "@/lib/config";
-import { clientConnect } from "@/lib/nostr/client";
 import { TriangleAlert } from "lucide-react";
+import { NostrContext } from "./NostrProvider";
 
 const config: Settings = loadConfig();
 
@@ -66,7 +71,8 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
   pubkey,
   onEventProcessed,
 }) => {
-  const [client, setClient] = useState<Client | undefined>(undefined);
+  const { client } = useContext(NostrContext);
+
   const [queue, setQueue] = useState<Event[]>([]);
   const [isVisible, setIsVisible] = useState(false);
   const [widgetText, setWidgetText] = useState("");
@@ -78,8 +84,6 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
 
   // Fetch events handler
   const fetchEvents = useCallback(async () => {
-    setClient(await clientConnect());
-
     if (!client || !pubkey) return;
 
     try {

From 936ee9924f7df643af6e5f3edbdd7cbb9df6d20a Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Sat, 14 Dec 2024 09:07:55 -0300
Subject: [PATCH 4/8] Fix: Profile badge will use signer (temporary unused)

---
 src/components/NostrProvider.tsx           | 5 +++--
 src/components/cornerMenu/ProfileBadge.tsx | 4 ++--
 src/components/cornerMenu/cornerMenu.tsx   | 8 +++++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/NostrProvider.tsx b/src/components/NostrProvider.tsx
index c6b2358..1431fc3 100644
--- a/src/components/NostrProvider.tsx
+++ b/src/components/NostrProvider.tsx
@@ -16,11 +16,12 @@ interface NostrProviderProps {
 
 interface NostrContextProps {
   client: Client | null;
+  signer: NostrSigner | null;
 }
 
 const NostrContext = createContext({
   client: null,
-  pubKey: null,
+  signer: null,
 } as NostrContextProps);
 
 const NostrProvider: React.FC<NostrProviderProps> = ({
@@ -52,7 +53,7 @@ const NostrProvider: React.FC<NostrProviderProps> = ({
     });
   }, [withSigner, relays]);
 
-  const values: NostrContextProps = { client };
+  const values: NostrContextProps = { client, signer };
 
   return (
     <NostrContext.Provider value={values}>{children}</NostrContext.Provider>
diff --git a/src/components/cornerMenu/ProfileBadge.tsx b/src/components/cornerMenu/ProfileBadge.tsx
index f72e28e..95de319 100644
--- a/src/components/cornerMenu/ProfileBadge.tsx
+++ b/src/components/cornerMenu/ProfileBadge.tsx
@@ -119,7 +119,7 @@ export default function ProfileBadge() {
   const [error, setError] = useState<string | null>(null);
   const [user, setUser] = useState<Metadata | null>(null);
 
-  const { signer, client } = useContext(NostrContext);
+  const { client, signer } = useContext(NostrContext);
 
   useEffect(() => {
     try {
@@ -136,7 +136,7 @@ export default function ProfileBadge() {
     if (!signer) return;
 
     try {
-      const signerPubKey = await signer.getPublicKey();
+      const signerPubKey = await signer.publicKey();
       setPubkey(signerPubKey);
     } catch (error) {
       console.error("Error getting public key:", error);
diff --git a/src/components/cornerMenu/cornerMenu.tsx b/src/components/cornerMenu/cornerMenu.tsx
index 78b1175..eb00b73 100644
--- a/src/components/cornerMenu/cornerMenu.tsx
+++ b/src/components/cornerMenu/cornerMenu.tsx
@@ -1,9 +1,15 @@
+import { loadConfig, Settings } from "@/lib/config";
+import { NostrProvider } from "../NostrProvider";
 import ProfileBadge from "./ProfileBadge";
 
+const config: Settings = loadConfig();
+
 export default function CornerMenu() {
   return (
     <div className="fixed top-0 right-0 z-50 flex items-center gap-3 p-4 sm:p-5">
-      <ProfileBadge />
+      <NostrProvider relays={config.RELAYS} withSigner={true}>
+        <ProfileBadge />
+      </NostrProvider>
     </div>
   );
 }

From c42e60f59a1dc8ece36453a1b3ec83cb09e2ba31 Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Sat, 14 Dec 2024 09:09:12 -0300
Subject: [PATCH 5/8] Fix: Form componnent not access configs directly

---
 src/app/goal/[eventId]/page.tsx |  6 +++++-
 src/app/profile/[npub]/page.tsx |  9 ++++++++-
 src/components/Form.tsx         | 24 +++++++++++++++---------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/goal/[eventId]/page.tsx b/src/app/goal/[eventId]/page.tsx
index 6abae8f..5a77f16 100644
--- a/src/app/goal/[eventId]/page.tsx
+++ b/src/app/goal/[eventId]/page.tsx
@@ -90,7 +90,11 @@ export default async function GoalPage({ params }: PageProps) {
           <Form
             npub={event.author.toBech32()}
             eventId={event.id.toBech32()}
-            config={config}
+            options={{
+              MODELS: config.MODELS,
+              MAX_TEXT_LENGTH: config.MAX_TEXT_LENGTH || 200,
+              MIN_SATOSHI_QNT: config.MIN_SATOSHI_QNT || 21,
+            }}
           />
         </CardContent>
       </Card>
diff --git a/src/app/profile/[npub]/page.tsx b/src/app/profile/[npub]/page.tsx
index 298bbe6..e9050f5 100644
--- a/src/app/profile/[npub]/page.tsx
+++ b/src/app/profile/[npub]/page.tsx
@@ -51,7 +51,14 @@ export default async function GoalPage({ params }: PageProps) {
         </CardHeader>
 
         <CardContent>
-          <Form npub={params.npub} config={config} />
+          <Form
+            npub={params.npub}
+            options={{
+              MODELS: config.MODELS,
+              MAX_TEXT_LENGTH: config.MAX_TEXT_LENGTH || 200,
+              MIN_SATOSHI_QNT: config.MIN_SATOSHI_QNT || 21,
+            }}
+          />
         </CardContent>
       </Card>
     </>
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index cbefa84..ec9740e 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -4,8 +4,6 @@ import { ChangeEvent, FormEvent, useRef, useState } from "react";
 import Image from "next/image";
 import QRCode from "qrcode";
 
-import { Settings } from "@/lib/config";
-
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -31,11 +29,19 @@ interface FormData {
 
 interface FormProps {
   npub: string;
-  config: Settings;
+  options: {
+    MODELS: string[];
+    MAX_TEXT_LENGTH: number;
+    MIN_SATOSHI_QNT: number;
+  };
   eventId?: string;
 }
 
-export default function Form({ npub, config, eventId = undefined }: FormProps) {
+export default function Form({
+  npub,
+  options,
+  eventId = undefined,
+}: FormProps) {
   const [qrCode, setQRCode] = useState<string>("");
   const [paymentStatus, setPaymentStatus] = useState<boolean>(false);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -240,7 +246,7 @@ export default function Form({ npub, config, eventId = undefined }: FormProps) {
             />
           </div>
 
-          {config.MODELS?.length > 0 && (
+          {options.MODELS.length > 0 && (
             <>
               <div className="space-y-2">
                 <Label className="flex items-center gap-2">
@@ -252,7 +258,7 @@ export default function Form({ npub, config, eventId = undefined }: FormProps) {
                   onValueChange={handleModelChange}
                   className="grid grid-cols-2 gap-4"
                 >
-                  {config.MODELS.map((model, index) => (
+                  {options.MODELS.map((model, index) => (
                     <div key={index} className="flex items-center space-x-2">
                       <RadioGroupItem
                         value={model}
@@ -285,7 +291,7 @@ export default function Form({ npub, config, eventId = undefined }: FormProps) {
               id="text"
               name="text"
               value={formData.text}
-              maxLength={config.MAX_TEXT_LENGTH || 200}
+              maxLength={options.MAX_TEXT_LENGTH || 200}
               onChange={handleInputChange}
               required
             />
@@ -300,7 +306,7 @@ export default function Form({ npub, config, eventId = undefined }: FormProps) {
               id="amount"
               name="amount"
               type="number"
-              min={config.MIN_SATOSHI_QNT || 100}
+              min={options.MIN_SATOSHI_QNT}
               value={formData.amount}
               onChange={handleInputChange}
               required
@@ -308,7 +314,7 @@ export default function Form({ npub, config, eventId = undefined }: FormProps) {
 
             <p className="text-xs text-right text-card-foreground/75">
               Quantidade mínima:{" "}
-              <span className="font-bold">{config.MIN_SATOSHI_QNT} sats</span>
+              <span className="font-bold">{options.MIN_SATOSHI_QNT} sats</span>
             </p>
           </div>
 

From 2d848af51c597b393fb9414b6b3feee3050f51fb Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Sat, 14 Dec 2024 09:44:06 -0300
Subject: [PATCH 6/8] Fix: Some improvements on create_invoice form

---
 src/app/api/create_invoice/route.ts |  1 +
 src/app/profile/[npub]/page.tsx     |  2 +-
 src/components/Form.tsx             | 12 ++++++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/api/create_invoice/route.ts b/src/app/api/create_invoice/route.ts
index 14cd9e9..2d567cf 100644
--- a/src/app/api/create_invoice/route.ts
+++ b/src/app/api/create_invoice/route.ts
@@ -74,4 +74,5 @@ async function* check_payment(invoice: Invoice) {
   }
 
   yield `data: ${JSON.stringify({ status: "settled" })}\n\n`;
+  return;
 }
diff --git a/src/app/profile/[npub]/page.tsx b/src/app/profile/[npub]/page.tsx
index e9050f5..420ed95 100644
--- a/src/app/profile/[npub]/page.tsx
+++ b/src/app/profile/[npub]/page.tsx
@@ -10,7 +10,7 @@ interface PageProps {
   params: { npub: string };
 }
 
-export default async function GoalPage({ params }: PageProps) {
+export default async function ProfilePage({ params }: PageProps) {
   const profile = await getUser(params.npub);
 
   const banner = profile.getBanner();
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index ec9740e..36dd08d 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -104,7 +104,8 @@ export default function Form({
       const reader = response.body!.getReader();
       const decoder = new TextDecoder();
 
-      while (true) {
+      let loop = true;
+      while (loop) {
         const { value, done } = await reader.read();
         if (done) break;
 
@@ -126,6 +127,8 @@ export default function Form({
               // @ts-expect-error
               await window.webln.sendPayment(parsedData.invoice.pr);
               setPaymentStatus(true);
+              loop = false;
+              break;
             } catch (error) {
               console.error(error);
               setQRCode(await QRCode.toDataURL(parsedData.invoice.pr));
@@ -135,6 +138,7 @@ export default function Form({
 
           if (parsedData.status === "settled") {
             setPaymentStatus(true);
+            loop = false;
             break;
           }
         }
@@ -213,7 +217,11 @@ export default function Form({
             Pagamento bem-sucedido!
           </h3>
 
-          <p className="text-gray-600">Obrigado por ajudar na nossa meta!.</p>
+          {eventId ? (
+            <p className="text-gray-600">Obrigado por ajudar na nossa meta!.</p>
+          ) : (
+            <p className="text-gray-600">Obrigado por usar o LiveSatoshi.</p>
+          )}
 
           <div className="mt-6">
             <Button

From 4df153478010fa9e7326df48debac6c28db391c2 Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Tue, 24 Dec 2024 08:46:11 -0300
Subject: [PATCH 7/8] Feat: Add error text when audio not play

---
 src/components/Widget.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
index cd24231..9efcbff 100644
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -131,7 +131,9 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
         const audioData = Buffer.concat(audioStreamData).toString("base64");
 
         // Sequence of actions
-        await playAudio(config.NOTIFY_AUDIO_URL);
+        await playAudio(config.NOTIFY_AUDIO_URL).catch(() =>
+          setErrorText("Error when play audio")
+        );
         setWidgetText(event.content);
         setIsVisible(true);
         await new Promise((resolve) =>
@@ -163,13 +165,23 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
 
   // Set up polling
   useEffect(() => {
-    const intervalId = setInterval(fetchEvents, config.QUEUE_CHECK_INTERVAL);
-    return () => clearInterval(intervalId);
+    try {
+      const intervalId = setInterval(fetchEvents, config.QUEUE_CHECK_INTERVAL);
+      return () => clearInterval(intervalId);
+    } catch (error) {
+      console.error("Error set up polling:", error);
+      setErrorText("Error set up polling");
+    }
   }, [fetchEvents]);
 
   // Process queue when it changes
   useEffect(() => {
-    processQueue();
+    try {
+      processQueue();
+    } catch (error) {
+      console.error("Error process queue:", error);
+      setErrorText("Error process queue");
+    }
   }, [queue, processQueue]);
 
   // Handle visibility animations

From 1601638ca7153aa87288ffb11348964d7c58001d Mon Sep 17 00:00:00 2001
From: TheMhv <mhv.geral@gmail.com>
Date: Wed, 25 Dec 2024 11:42:06 -0300
Subject: [PATCH 8/8] Fix/Feat: Fix and update the Widget

---
 src/app/profile/[npub]/widget/page.tsx |  11 +-
 src/components/Widget.tsx              | 230 ++++++++++++++++++++-----
 src/components/ui/range.tsx            |  80 +++++++++
 src/components/ui/select.tsx           |  29 ++++
 src/lib/config.ts                      |  15 --
 5 files changed, 301 insertions(+), 64 deletions(-)
 create mode 100644 src/components/ui/range.tsx
 create mode 100644 src/components/ui/select.tsx

diff --git a/src/app/profile/[npub]/widget/page.tsx b/src/app/profile/[npub]/widget/page.tsx
index 827eb17..50ab585 100644
--- a/src/app/profile/[npub]/widget/page.tsx
+++ b/src/app/profile/[npub]/widget/page.tsx
@@ -1,13 +1,7 @@
 import "./widget.css";
 
-import { RemoveLogo } from "@/components/utils/RemoveLogo";
 import { TTSWidget } from "@/components/Widget";
 
-import { loadConfig, Settings } from "@/lib/config";
-import { NostrProvider } from "@/components/NostrProvider";
-
-const config: Settings = loadConfig();
-
 interface PageProps {
   params: { npub: string };
 }
@@ -15,10 +9,7 @@ interface PageProps {
 export default function widgetPage({ params }: PageProps) {
   return (
     <>
-      <RemoveLogo />
-      <NostrProvider relays={config.RELAYS}>
-        <TTSWidget pubkey={params.npub} />
-      </NostrProvider>
+      <TTSWidget pubkey={params.npub} />
     </>
   );
 }
diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
index 9efcbff..42ff22b 100644
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -1,13 +1,8 @@
 "use client";
 
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  useContext,
-} from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import {
+  Client,
   Event,
   EventSource,
   Filter,
@@ -15,20 +10,28 @@ import {
   PublicKey,
   Timestamp,
 } from "@rust-nostr/nostr-sdk";
-import { MsEdgeTTS } from "msedge-tts";
+import { MsEdgeTTS, OUTPUT_FORMAT, Voice } from "msedge-tts";
 import { loadConfig, Settings } from "@/lib/config";
-import { TriangleAlert } from "lucide-react";
-import { NostrContext } from "./NostrProvider";
+import { LoaderCircle, TriangleAlert } from "lucide-react";
+import { clientConnect } from "@/lib/nostr/client";
+import { useSearchParams } from "next/navigation";
+import { Card, CardContent, CardHeader } from "./ui/card";
+import Logo from "./logo";
+import { Select } from "./ui/select";
+import { Range } from "./ui/range";
+import { Label } from "./ui/label";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { LuArrowRight } from "react-icons/lu";
+import { RemoveLogo } from "./utils/RemoveLogo";
 
 const config: Settings = loadConfig();
 
-// Types for better type safet
 interface TTSWidgetProps {
   pubkey: string;
   onEventProcessed?: (event: Event) => void;
 }
 
-// Utility functions moved outside component
 const playAudio = async (source: string): Promise<void> => {
   const audio = new Audio(source);
 
@@ -39,13 +42,19 @@ const playAudio = async (source: string): Promise<void> => {
   });
 };
 
-const createTTS = async (text: string) => {
+const createTTS = async (
+  text: string,
+  voice: string,
+  rate: string,
+  volume: string,
+  pitch: string
+) => {
   const tts = new MsEdgeTTS();
-  await tts.setMetadata(config.TTS.voice, config.TTS.format);
+  await tts.setMetadata(voice, OUTPUT_FORMAT.AUDIO_24KHZ_96KBITRATE_MONO_MP3);
   return tts.toStream(text, {
-    rate: config.TTS.rate,
-    volume: config.TTS.volume,
-    pitch: config.TTS.pitch,
+    rate: `${rate}%`,
+    volume: `${volume}%`,
+    pitch: `${pitch}%`,
   });
 };
 
@@ -71,7 +80,7 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
   pubkey,
   onEventProcessed,
 }) => {
-  const { client } = useContext(NostrContext);
+  const [client, setClient] = useState<Client>();
 
   const [queue, setQueue] = useState<Event[]>([]);
   const [isVisible, setIsVisible] = useState(false);
@@ -82,9 +91,22 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
   const lastZapRef = useRef<Event>();
   const isProcessingRef = useRef(false);
 
-  // Fetch events handler
+  const params = useSearchParams();
+
+  const ttsVoice = params.get("voice") || "";
+  const ttsRate = params.get("rate") || "0";
+  const ttsVolume = params.get("volume") || "0";
+  const ttsPitch = params.get("pitch") || "0";
+
+  const min_sats = parseInt(params.get("min_sats") || "0");
+  const max_text = parseInt(params.get("max_text") || "0");
+
   const fetchEvents = useCallback(async () => {
-    if (!client || !pubkey) return;
+    if (!client) {
+      setClient(await clientConnect());
+    }
+
+    if (!client || !pubkey || !ttsVoice) return;
 
     try {
       const filter = new Filter()
@@ -110,9 +132,8 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
       setErrorText("Error processing audio stream");
       console.error("Error fetching events:", error);
     }
-  }, [client, pubkey]);
+  }, [client, pubkey, ttsVoice]);
 
-  // Process queue handler
   const processQueue = useCallback(async () => {
     if (isProcessingRef.current || queue.length === 0) return;
 
@@ -120,7 +141,32 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
     const event = queue[0];
 
     try {
-      const audioStream = await createTTS(event.content);
+      if (min_sats) {
+        const description = event.getTagContent("description");
+        if (description) {
+          const amount = parseInt(
+            Event.fromJson(description).getTagContent("amount") || "0"
+          );
+
+          if (amount && amount / 1000 < min_sats) {
+            isProcessingRef.current = false;
+            return;
+          }
+        }
+      }
+
+      let content = event.content;
+      if (max_text) {
+        content = content.substring(0, max_text);
+      }
+
+      const audioStream = await createTTS(
+        content,
+        ttsVoice,
+        ttsRate,
+        ttsVolume,
+        ttsPitch
+      );
       const audioStreamData: Uint8Array[] = [];
 
       audioStream.on("data", (data: Uint8Array) => {
@@ -130,22 +176,24 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
       audioStream.on("end", async () => {
         const audioData = Buffer.concat(audioStreamData).toString("base64");
 
-        // Sequence of actions
         await playAudio(config.NOTIFY_AUDIO_URL).catch(() =>
           setErrorText("Error when play audio")
         );
+
         setWidgetText(event.content);
         setIsVisible(true);
+
         await new Promise((resolve) =>
           setTimeout(resolve, config.WIDGET_DISPLAY_DELAY)
         );
+
         await playAudio(`data:audio/mp4;base64,${audioData}`);
         setIsVisible(false);
+
         await new Promise((resolve) =>
           setTimeout(resolve, config.WIDGET_HIDE_DELAY)
         );
 
-        // Cleanup
         setQueue((prev) => prev.slice(1));
         onEventProcessed?.(event);
         isProcessingRef.current = false;
@@ -161,9 +209,17 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
       console.error("Error processing event:", error);
       isProcessingRef.current = false;
     }
-  }, [queue, onEventProcessed]);
+  }, [
+    queue,
+    min_sats,
+    max_text,
+    ttsVoice,
+    ttsRate,
+    ttsVolume,
+    ttsPitch,
+    onEventProcessed,
+  ]);
 
-  // Set up polling
   useEffect(() => {
     try {
       const intervalId = setInterval(fetchEvents, config.QUEUE_CHECK_INTERVAL);
@@ -174,7 +230,6 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
     }
   }, [fetchEvents]);
 
-  // Process queue when it changes
   useEffect(() => {
     try {
       processQueue();
@@ -184,7 +239,6 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
     }
   }, [queue, processQueue]);
 
-  // Handle visibility animations
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -210,21 +264,119 @@ export const TTSWidget: React.FC<TTSWidgetProps> = ({
     }
   }, [isVisible]);
 
-  // Remove logo if present
-  useEffect(() => {
-    const logoElement = document.getElementById("logo");
-    if (logoElement) {
-      logoElement.style.display = "none";
-    }
-  }, []);
-
-  return (
+  return ttsVoice ? (
     <>
+      <RemoveLogo />
+
       <div id="widget-container" ref={containerRef}>
         <div id="widget">{widgetText}</div>
       </div>
-
       {errorText && <ErrorAlert text={errorText} />}
     </>
+  ) : (
+    <Configuration />
+  );
+};
+
+const Configuration: React.FC = () => {
+  const [voices, setVoices] = useState<Voice[]>();
+
+  useEffect(() => {
+    const tts = new MsEdgeTTS();
+    tts.getVoices().then((data) => setVoices(data));
+  }, []);
+
+  return (
+    <Card className="max-w-md mx-auto">
+      <CardHeader>
+        <Logo className="text-3xl text-center my-2" />
+
+        <p className="text-center text-gray-600">
+          Configure your widget to receive alerts
+        </p>
+      </CardHeader>
+
+      <CardContent>
+        {voices ? (
+          <form action="" method="GET" className="space-y-4">
+            <Select name="voice" required>
+              <option value="">Select TTS Voice</option>
+
+              {voices.map((voice, index) => (
+                <option key={index} value={voice.ShortName}>
+                  {voice.FriendlyName}
+                </option>
+              ))}
+            </Select>
+
+            <div>
+              <Label htmlFor="rate">Rate:</Label>
+              <Range
+                id="rate"
+                name="rate"
+                min={-100}
+                max={100}
+                defaultValue={0}
+                indicator
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="volume">Volume:</Label>
+              <Range
+                id="volume"
+                name="volume"
+                min={-100}
+                max={100}
+                defaultValue={0}
+                indicator
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="pitch">Pitch:</Label>
+              <Range
+                id="pitch"
+                name="pitch"
+                min={-100}
+                max={100}
+                defaultValue={0}
+                indicator
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="min_sats">Minimum Sats:</Label>
+              <Input
+                id="min_sats"
+                name="min_sats"
+                type="number"
+                min={0}
+                defaultValue={config.MIN_SATOSHI_QNT}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="max_text">Maximum text length:</Label>
+              <Input
+                id="max_text"
+                name="max_text"
+                type="number"
+                min={0}
+                defaultValue={config.MAX_TEXT_LENGTH}
+              />
+            </div>
+
+            <Button type="submit" className="text-center w-full">
+              Confirm <LuArrowRight className="ml-2" />
+            </Button>
+          </form>
+        ) : (
+          <span className="flex items-center justify-center gap-2">
+            <LoaderCircle className="animate-spin size-4" /> Loading...
+          </span>
+        )}
+      </CardContent>
+    </Card>
   );
 };
diff --git a/src/components/ui/range.tsx b/src/components/ui/range.tsx
new file mode 100644
index 0000000..2110df6
--- /dev/null
+++ b/src/components/ui/range.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface RangeProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  indicator?: boolean;
+}
+
+const Range = React.forwardRef<HTMLInputElement, RangeProps>(
+  ({ className, indicator = false, ...props }, ref) => {
+    const [value, setValue] = React.useState(
+      props.defaultValue || props.value || 0
+    );
+
+    // Calculate the percentage for positioning the indicator
+    const calculatePosition = () => {
+      const min = Number(props.min || 0);
+      const max = Number(props.max || 100);
+      const currentValue = Number(value);
+      const range = max - min;
+      const valueOffset = currentValue - min;
+      return (valueOffset * 100) / range;
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="range"
+          className={cn(
+            "h-2 w-full cursor-pointer appearance-none rounded-full bg-primary/20",
+            // Thumb styles
+            "[&::-webkit-slider-thumb]:appearance-none",
+            "[&::-webkit-slider-thumb]:h-4",
+            "[&::-webkit-slider-thumb]:w-4",
+            "[&::-webkit-slider-thumb]:rounded-full",
+            "[&::-webkit-slider-thumb]:bg-primary",
+            "[&::-webkit-slider-thumb]:transition-all",
+            "[&::-webkit-slider-thumb]:hover:scale-110",
+            // Firefox thumb styles
+            "[&::-moz-range-thumb]:h-4",
+            "[&::-moz-range-thumb]:w-4",
+            "[&::-moz-range-thumb]:rounded-full",
+            "[&::-moz-range-thumb]:border-0",
+            "[&::-moz-range-thumb]:bg-primary",
+            "[&::-moz-range-thumb]:transition-all",
+            "[&::-moz-range-thumb]:hover:scale-110",
+            // Track styles
+            "[&::-webkit-slider-runnable-track]:rounded-full",
+            "[&::-moz-range-track]:rounded-full",
+            // Focus styles
+            "focus-visible:outline-none",
+            "focus-visible:ring-2",
+            "focus-visible:ring-primary",
+            "focus-visible:ring-offset-2",
+            className
+          )}
+          ref={ref}
+          onChange={(e) => {
+            setValue(e.target.value);
+            props.onChange?.(e);
+          }}
+          {...props}
+        />
+        {indicator && (
+          <div
+            className="absolute -top-6 left-0 min-w-8 rounded bg-primary px-1 py-0.5 text-center text-xs text-primary-foreground"
+            style={{
+              left: `calc(${calculatePosition()}% - 16px)`,
+            }}
+          >
+            {value}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Range.displayName = "Range";
+
+export { Range };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..70ec2af
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full rounded-md border border-primary/50 bg-white px-3 py-2 text-sm ring-offset-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          // Add arrow icon with adjusted color
+          //   "bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%3E%3Cpath%20d%3D%22M3%205l3%203%203-3%22%2F%3E%3C%2Fsvg%3E')] bg-[position:right_1rem_center] bg-no-repeat pr-10",
+
+          "[&_option]:bg-white [&_option]:text-black",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  }
+);
+Select.displayName = "Select";
+
+export { Select };
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 1dd0741..d167aed 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,5 +1,4 @@
 import * as dotenv from "dotenv";
-import { OUTPUT_FORMAT, PITCH, RATE, VOLUME } from "msedge-tts";
 dotenv.config();
 
 interface Settings {
@@ -11,13 +10,6 @@ interface Settings {
   QUEUE_CHECK_INTERVAL: number;
   WIDGET_DISPLAY_DELAY: number;
   WIDGET_HIDE_DELAY: number;
-  TTS: {
-    voice: string;
-    rate: RATE | string | number;
-    volume: VOLUME | string | number;
-    pitch: PITCH | string;
-    format: OUTPUT_FORMAT;
-  };
 }
 
 const loadConfig = (): Settings => {
@@ -37,13 +29,6 @@ const loadConfig = (): Settings => {
     QUEUE_CHECK_INTERVAL: parseInt(process.env.QUEUE_CHECK_INTERVAL || "3000"),
     WIDGET_DISPLAY_DELAY: parseInt(process.env.WIDGET_DISPLAY_DELAY || "2000"),
     WIDGET_HIDE_DELAY: parseInt(process.env.WIDGET_HIDE_DELAY || "5000"),
-    TTS: {
-      voice: process.env.VOICE || "pt-BR-ThalitaNeural",
-      rate: process.env.RATE || "0%",
-      volume: process.env.VOLUME || "0%",
-      pitch: process.env.PITCH || "0%",
-      format: OUTPUT_FORMAT.AUDIO_24KHZ_96KBITRATE_MONO_MP3,
-    },
   };
 };