fix(WidgetPreview): prevent controller already set crash on edit (#701)

Author: sidvishnoi

frontend/app/components/widget/WidgetPreview.tsx

@@ -18,18 +18,46 @@ export const WidgetPreview = ({
   const widgetRef = useRef<WidgetComponent>(null)
 
   useEffect(() => {
-    const loadWidgetElement = async () => {
-      if (!customElements.get('wm-payment-widget')) {
+    const name = 'wm-payment-widget'
+    const load = async () => {
+      if (!customElements.get(name)) {
         // dynamic import - ensure component only runs on the client side and not on SSR
         const { PaymentWidget } = await import('@tools/components/widget/index')
-        if (!customElements.get('wm-payment-widget')) {
-          customElements.define('wm-payment-widget', PaymentWidget)
+        if (!customElements.get(name)) {
+          customElements.define(name, PaymentWidget)
         }
       }
+
+      const el = document.querySelector(name)!
+      el.setController({
+        isPreviewMode: true,
+        getWallet: NO_OP_CONTROLLER.getWallet,
+        async fetchQuote(request) {
+          await sleep(500)
+          return NO_OP_CONTROLLER.fetchQuote(request)
+        },
+        async initiatePayment(request) {
+          await sleep(500)
+          return NO_OP_CONTROLLER.initiatePayment(request)
+        },
+        async *getStatus() {
+          const outgoingPaymentId = 'https://example.com/outgoing-payments/id'
+          yield { type: 'PENDING_GRANT_INTERACTION' }
+          await sleep(2000)
+          yield { type: 'OUTGOING_PAYMENT_CREATED', outgoingPaymentId }
+          await sleep(2000)
+          yield {
+            type: 'OUTGOING_PAYMENT_DONE',
+            result: 'success',
+            outgoingPaymentId,
+          }
+        },
+      })
+
       setIsLoaded(true)
     }
 
-    loadWidgetElement()
+    load()
   }, [])
 
   const widgetConfig = useMemo(() => {
@@ -41,34 +69,6 @@ export const WidgetPreview = ({
     }
   }, [profile, serviceUrls, opWallet])
 
-  useEffect(() => {
-    if (!isLoaded) return
-    widgetRef.current?.setController({
-      isPreviewMode: true,
-      getWallet: NO_OP_CONTROLLER.getWallet,
-      async fetchQuote(request) {
-        await sleep(500)
-        return NO_OP_CONTROLLER.fetchQuote(request)
-      },
-      async initiatePayment(request) {
-        await sleep(500)
-        return NO_OP_CONTROLLER.initiatePayment(request)
-      },
-      async *getStatus() {
-        const outgoingPaymentId = 'https://example.com/outgoing-payments/id'
-        yield { type: 'PENDING_GRANT_INTERACTION' }
-        await sleep(2000)
-        yield { type: 'OUTGOING_PAYMENT_CREATED', outgoingPaymentId }
-        await sleep(2000)
-        yield {
-          type: 'OUTGOING_PAYMENT_DONE',
-          result: 'success',
-          outgoingPaymentId,
-        }
-      },
-    })
-  }, [widgetRef.current, isLoaded])
-
   useEffect(() => {
     if (widgetRef.current && isLoaded) {
       const widget = widgetRef.current
@@ -77,10 +77,6 @@ export const WidgetPreview = ({
     }
   }, [widgetConfig, isLoaded])
 
-  if (!isLoaded) {
-    return <div>Loading widget...</div>
-  }
-
   return (
     <div
       style={{