Feat/add watch command

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",

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">
@@ -117,12 +125,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>
@@ -174,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"
@@ -192,14 +205,15 @@
             :disabled="paybuttonProps.disabled"
             :on-success="mySuccessFuction"
             :on-transaction="myTransactionFuction"
-            :enable-altpayment="paybuttonProps.enableAltpayment">
+            :enable-altpayment="paybuttonProps.enableAltpayment"
+            :op-return="paybuttonProps.opReturn">
           </div>
         </div>
       </div>
     </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 }))
 
@@ -223,27 +237,36 @@
             disableEnforceFocus: false,
             enableAltpayment: false,
             contributionOffset: undefined,
+            opReturn:undefined,
             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>

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,7 +455,13 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
         }),
       );
     } catch (err) {
+      console.error(err);
       setErrorMsg((err as Error).message);
+      setDisabled(true)
+      setTimeout((): void => {
+        setErrorMsg('')
+        setText(`Send any amount of ${addressType}`);
+      }, 5000);
     }
   }, [props.opReturn, paymentId, disablePaymentId]);
 
@@ -620,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>
           ) : (