feat: widget events for send to wallet #309

DNR500 · 2024-10-08T12:44:15Z

This PR adds a "FormFieldChanged" to the widget. This event will fire when..

The user updates the any form values via the Widget UI - the event will only be emitted after the Widget has done its validation
A form value is updated via a external method to the Widget UI - either via config, url search params or formRef. These do not undergo the same validation as user entered values via the UI. Strict validation of values added to things like the config should be done before adding them to the config itself.

Note: that with this implementation the initialise value from the widget config will not emit an event.

To catch the event specifically for the send to wallet address change you will need to check the fieldName value in on the payload

widgetEvents.on(WidgetEvent.FormFieldChanged, (payload) => {
   if(payload.fieldName === "toAddress") {
      // sent to wallet address was changed
   }
)

The event payload will looks like this

{
  fieldName: "toAddress",
  oldValue: "0x8131aa556b78e6D25F53DA0F01c2f046AA1012d1",
  value: "0x29DaCdF7cCaDf4eE67c923b4C22255A4B2494eD7"
}

Widget Events Tooling

I've also added some basic tooling to the the playground to assist with testing and working with events. This should help with the other events we need to add to widget as well. This sits behind the dev view toogle.

To view the tool

Open Playground, go to the Playground settings and turn on the Dev view option
The Widget events control should be visible in the playground
You can toggle on and off an event listener per event
Or you can turn on all events and have the listener available on page load
Event names with there payloads are printed in the console

…vent

github-actions · 2024-10-08T12:51:33Z

Hey! This is your new endopint: https://10069250.widget-widgeteven.pages.dev

github-actions · 2024-10-08T12:53:28Z

Hey! This is your new endopint: https://04c1b7ee.widget-widgeteven.pages.dev

github-actions · 2024-10-08T13:09:28Z

Hey! This is your new endopint: https://733c2353.widget-widgeteven.pages.dev

packages/widget/src/stores/form/FormStore.tsx

chybisov · 2024-10-09T15:01:24Z

packages/widget/src/stores/form/useFieldActions.ts

+}
+
+const fieldValueToEmittedEvents: FieldValueToEmittedEvents = {
+  toAddress: (address, emitter) =>


Let's add all fields here to avoid adding them in the future anyway. We should also think about having one event for all of them.

Lets go with one event for them all. It's simpler that way

Just gonna add in better type inference too

chybisov · 2024-10-09T15:03:36Z

packages/widget/src/types/events.ts

@@ -19,6 +19,7 @@ export enum WidgetEvent {
  WalletConnected = 'walletConnected',
  WidgetExpanded = 'widgetExpanded',
  PageEntered = 'pageEntered',
+  SendToWalletAddressChanged = 'sendToWalletAddressChanged',


If we add all fields, how about we come up with one event that handles all the fields with fieldName, oldValue and newValue.

Maybe name it something like

FormFieldChanged

FormValueChanged

Basically, the idea is to subscribe to the form changes, rather than individual events for every field. Wdyt?

Makes sense, when doing this I did wonder it we would end you wanting to do it for all values

have gone with this approach using FormFieldChanged, I'm gonna look at better type inference as well. Also I think I used value rather than newValue so will change that

I've improved the types now as well

chybisov · 2024-10-09T15:06:20Z

packages/widget/src/stores/form/useFieldActions.ts

+      emitEventForFieldValueChange(
+        fieldName,
+        value,
+        actions.getFieldValues(fieldName)[0],
+        emitter,
+      );
+
+      actions.setFieldValue(fieldName, value, options);


Should we set value first and, after that fire an event?

The actions.getFieldValues will not have the old value to do the comparison to check for change if you call actions.setFieldValue first. I tried it the other way around initially

Have changed this

chybisov · 2024-10-09T15:06:42Z

packages/widget/src/stores/form/useFieldActions.ts

+      (Object.keys(formValues) as FormFieldNames[]).forEach((fieldName) => {
+        emitEventForFieldValueChange(
+          fieldName,
+          formValues[fieldName],
+          actions.getFieldValues(fieldName)[0],
+          emitter,
+        );
+      });
+
+      actions.setUserAndDefaultValues(formValues);


Should we set value first and, after that fire an event?

The actions.getFieldValues will not have the old value to do the comparison to check for change if you call actions.setFieldValue first. I tried it the other way around initially

I guess we can save it to a variable like

const oldValue = actions.getFieldValues(fieldName)[0]

and then execute after.

That would actually become a bit more complicated in the example above for the setUserAndDefaultValuesWithEmittedEvents - you would have to store the oldValues in another object map first and then once setUserAndDefaultValues is executed you would have to the iterate over the old values map.

I don't see what the benefit will be of changing the order of execution there and I think it will make the code a little less cleaner - but I do it and can decide if you are happier with it

Have put something in place for this

github-actions · 2024-10-11T10:57:33Z

Hey! This is your new endopint: https://1ab1589f.widget-widgeteven.pages.dev

github-actions · 2024-10-11T13:31:07Z

Hey! This is your new endopint: https://530a5df8.widget-widgeteven.pages.dev

github-actions · 2024-10-11T14:05:55Z

Hey! This is your new endopint: https://11cad9c0.widget-widgeteven.pages.dev

github-actions · 2024-10-17T12:56:31Z

Hey! This is your new endopint: https://24af08e5.widget-widgeteven.pages.dev

DNR500 added 4 commits October 7, 2024 18:25

chore: delete unused widget skeleton from playground

d4fd67c

feat: introduce the SendToWalletAddressChanged event

156a84e

feat: ensure that initialisation of the to address also triggers an e…

3b7706e

…vent

feat: add widget events tooling to playground

9a11251

DNR500 added the testing label Oct 8, 2024

chore: restroe widget default config in playground

dbc14b8

refactor: get rid of code duplication

c02eaaf

DNR500 mentioned this pull request Oct 9, 2024

feat: emit settings updated widget event #311

Closed

chybisov requested changes Oct 9, 2024

View reviewed changes

chybisov reviewed Oct 9, 2024

View reviewed changes

DNR500 added 2 commits October 11, 2024 12:43

chore: remove event on widget initialization

25bde49

chore: change the emitted event to be after value is set in the store

4e3222a

feat: improve type inference

1dca6ea

Merge branch 'main' into widget-event-for-send-to-wallet

9ef5ce9

DNR500 mentioned this pull request Oct 15, 2024

feat: emit events for settings changes #312

Merged

chybisov approved these changes Oct 17, 2024

View reviewed changes

Merge branch 'main' into widget-event-for-send-to-wallet

21a02b0

chybisov merged commit b247afb into main Oct 17, 2024
1 check passed

chybisov deleted the widget-event-for-send-to-wallet branch October 17, 2024 12:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: widget events for send to wallet #309

feat: widget events for send to wallet #309

DNR500 commented Oct 8, 2024 •

edited

Loading

github-actions bot commented Oct 8, 2024

github-actions bot commented Oct 8, 2024

github-actions bot commented Oct 8, 2024

chybisov Oct 9, 2024 •

edited

Loading

DNR500 Oct 9, 2024

DNR500 Oct 11, 2024

chybisov Oct 9, 2024 •

edited

Loading

DNR500 Oct 9, 2024

DNR500 Oct 11, 2024

DNR500 Oct 11, 2024

chybisov Oct 9, 2024

DNR500 Oct 9, 2024

DNR500 Oct 11, 2024

chybisov Oct 9, 2024

DNR500 Oct 9, 2024

chybisov Oct 9, 2024

DNR500 Oct 11, 2024 •

edited

Loading

DNR500 Oct 11, 2024

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 17, 2024

feat: widget events for send to wallet #309

feat: widget events for send to wallet #309

Conversation

DNR500 commented Oct 8, 2024 • edited Loading

github-actions bot commented Oct 8, 2024

github-actions bot commented Oct 8, 2024

github-actions bot commented Oct 8, 2024

chybisov Oct 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chybisov Oct 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DNR500 Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 17, 2024

DNR500 commented Oct 8, 2024 •

edited

Loading

chybisov Oct 9, 2024 •

edited

Loading

chybisov Oct 9, 2024 •

edited

Loading

DNR500 Oct 11, 2024 •

edited

Loading