From 28a7a205680f0877e6aff1c67f1fcbbe539d06a0 Mon Sep 17 00:00:00 2001
From: lissavxo <lissavitoria12@gmail.com>
Date: Wed, 13 Nov 2024 16:31:36 -0300
Subject: [PATCH 1/5] fix: opReturn fail behavior

---
 react/lib/components/Widget/Widget.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx
index a4051285..3af893d9 100644
--- a/react/lib/components/Widget/Widget.tsx
+++ b/react/lib/components/Widget/Widget.tsx
@@ -451,7 +451,8 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
         }),
       );
     } catch (err) {
-      setErrorMsg((err as Error).message);
+      console.error((err as Error).message);
+      setDisabled(true)
     }
   }, [props.opReturn, paymentId, disablePaymentId]);
 

From eeac02b2079d683ea989eadf062b028ddf40026d Mon Sep 17 00:00:00 2001
From: lissavxo <lissavitoria12@gmail.com>
Date: Mon, 18 Nov 2024 13:31:18 -0300
Subject: [PATCH 2/5] feat: opReturn in generator

---
 paybutton/dev/demo/paybutton-generator.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/paybutton/dev/demo/paybutton-generator.html b/paybutton/dev/demo/paybutton-generator.html
index 4cb19bc8..ff85eaeb 100644
--- a/paybutton/dev/demo/paybutton-generator.html
+++ b/paybutton/dev/demo/paybutton-generator.html
@@ -117,12 +117,16 @@
           </div>
           <div class="form-input">
             <label for="theme">Theme:</label>
-            <input id="theme" style="height: 100px;" v-model="paybuttonProps.theme" type="text">
+            <input id="theme" v-model="paybuttonProps.theme" type="text">
           </div>
           <div class="form-input">
             <label for="animation">Animation:</label>
             <input id="animation" v-model="paybuttonProps.animation" type="text">
           </div>
+          <div class="form-input">
+            <label for="theme">Op Return:</label>
+            <input id="theme" v-model="paybuttonProps.opReturn" type="text">
+          </div>
         </div>
         <div style="display: flex; flex-wrap: wrap; gap: 10px;">
           <div>
@@ -192,7 +196,8 @@
             :disabled="paybuttonProps.disabled"
             :on-success="mySuccessFuction"
             :on-transaction="myTransactionFuction"
-            :enable-altpayment="paybuttonProps.enableAltpayment">
+            :enable-altpayment="paybuttonProps.enableAltpayment"
+            :op-return="paybuttonProps.opReturn">
           </div>
         </div>
       </div>
@@ -223,6 +228,7 @@
             disableEnforceFocus: false,
             enableAltpayment: false,
             contributionOffset: undefined,
+            opReturn:undefined,
             onSuccess: mySuccessFuction,
             onTransaction: myTransactionFuction
           });

From 41a73f4640cf5298eed8c4af2e5615cb312ca5f0 Mon Sep 17 00:00:00 2001
From: lissavxo <lissavitoria12@gmail.com>
Date: Mon, 18 Nov 2024 15:29:57 -0300
Subject: [PATCH 3/5] fix: show error opReturn

---
 react/lib/components/Widget/Widget.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx
index 3af893d9..c51d6842 100644
--- a/react/lib/components/Widget/Widget.tsx
+++ b/react/lib/components/Widget/Widget.tsx
@@ -159,7 +159,11 @@ const useStyles = makeStyles({
       marginLeft: '4px',
       fontSize: '16px',
     }
-  }
+  },
+  error: () => ({
+    fontSize: '0.9rem !important',
+    color: '#EB3B3B !important',
+  }),
 });
 
 
@@ -451,8 +455,13 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
         }),
       );
     } catch (err) {
-      console.error((err as Error).message);
+      console.error(err);
+      setErrorMsg((err as Error).message);
       setDisabled(true)
+      setTimeout((): void => {
+        setErrorMsg('')
+        setText(`Send any amount of ${addressType}`);
+      }, 5000);
     }
   }, [props.opReturn, paymentId, disablePaymentId]);
 
@@ -621,7 +630,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
           textAlign="center"
         >
           {errorMsg ? (
-            <Typography className={classes.text} style={{ color: '#EB3B3B' }}>
+            <Typography className={classes.error}>
               {errorMsg}
             </Typography>
           ) : (

From 106411ae88152765fc5a1647df5030b48134e7ff Mon Sep 17 00:00:00 2001
From: lissavxo <lissavitoria12@gmail.com>
Date: Mon, 18 Nov 2024 15:47:21 -0300
Subject: [PATCH 4/5] feat: generator render widgets

---
 paybutton/dev/demo/paybutton-generator.html | 49 ++++++++++++++-------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/paybutton/dev/demo/paybutton-generator.html b/paybutton/dev/demo/paybutton-generator.html
index ff85eaeb..28e51269 100644
--- a/paybutton/dev/demo/paybutton-generator.html
+++ b/paybutton/dev/demo/paybutton-generator.html
@@ -11,7 +11,8 @@
       }
 
       input,
-      button {
+      button,
+      select {
         padding: 8px;
         border-radius: 6px !important;
         border: 1px solid #ccc;
@@ -77,6 +78,13 @@
     <div id="playground">
       <form @submit.prevent="updateProps" class="card">
         <div>
+          <div class="form-input">
+            <label for="paybutton-type">Type:</label>
+            <select id="paybutton-type" v-model="paybuttonType" class="selector">
+              <option value="paybutton-widget">Widget</option>
+              <option value="paybutton">Button</option>
+            </select>
+          </div>
           <div class="form-input">
             <label for="to">To:</label>
             <input id="to" v-model="paybuttonProps.to" type="text">
@@ -178,7 +186,8 @@
           <div class="spinner"></div>
         </div>
         <div id="paybutton-generator-container">
-          <div id="paybutton-generator" class="paybutton"
+          <div id="paybutton-generator" 
+            :class="paybuttonType"
             :to="paybuttonProps.to"
             :amount="paybuttonProps.amount"
             :goal-amount="paybuttonProps.goalAmount"
@@ -204,7 +213,7 @@
     </div>
 
     <script>
-      const { createApp, reactive } = Vue;
+      const { createApp, reactive, ref } = Vue;
       const mySuccessFuction = (tx) => (console.log("Success", { tx }))
       const myTransactionFuction = (tx) => (console.log("Transaction", { tx }))
 
@@ -232,24 +241,32 @@
             onSuccess: mySuccessFuction,
             onTransaction: myTransactionFuction
           });
-
+          const paybuttonType = ref("paybutton-widget");
           const updateProps = () => {
-          const loadingOverlay = document.getElementById("loading-overlay");
-          const paybuttonGenerator = document.getElementById("paybutton-generator");
+            const loadingOverlay = document.getElementById("loading-overlay");
+            const paybuttonGenerator = document.getElementById("paybutton-generator");
+
 
+            loadingOverlay.style.display = "flex";
+            paybuttonGenerator.hidden = true
 
-          loadingOverlay.style.display = "flex";
-          paybuttonGenerator.hidden = true
-          setTimeout(() => {
-            paybuttonGenerator.hidden = false
-            
-            PayButton.render(paybuttonGenerator, { ...paybuttonProps });
-            loadingOverlay.style.display = "none";
+            setTimeout(() => {
+              paybuttonGenerator.hidden = false
+              switch (paybuttonType.value) {
+                case "paybutton-widget":
+                  PayButton.renderWidget(paybuttonGenerator, { ...paybuttonProps });
+                  break;
+                case "paybutton":
+                  PayButton.render(paybuttonGenerator, { ...paybuttonProps });
+                  break;
+              }
+              
+              loadingOverlay.style.display = "none";
 
-          }, 600);
-  };
+            }, 600);
+          };
 
-          return { paybuttonProps, updateProps };
+          return { paybuttonProps, updateProps, paybuttonType };
         }
       }).mount('#playground');
     </script>

From 7e9367bf31a0e623d9002bea62a1efcbbe797c9c Mon Sep 17 00:00:00 2001
From: lissavxo <lissavitoria12@gmail.com>
Date: Mon, 18 Nov 2024 15:51:23 -0300
Subject: [PATCH 5/5] feat: add watch command

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 08dec8ae..0cdb4ffe 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "scripts": {
     "dev": "cd paybutton && yarn dev",
     "build:dev": "yarn build:react && yarn dev",
+    "watch": "(cd paybutton && yarn dev) & (cd react && yarn dev)",
     "test": "cd react && yarn test",
     "test:coverage": "cd react && yarn test:coverage",
     "build:react": "cd react && yarn && yarn build",