Issue/75 address input for known address

[haolinj]

No description provided.

[polymorpher]

Would that cause a warning "modifying another component's state inside a component"?

[haolinj]

I haven't seen this warning. But it is a call back to set the value in this component, and this component's value is being supplied as prop to the AddressInput component.

[polymorpher]

Looks good, but I am getting

react-dom.development.js:67 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

[haolinj]

Looks good, but I am getting

react-dom.development.js:67 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I will double check and fix it.

[polymorpher]

justify='spaceBetween'? Looks weird when checkmarks are unaligned

[haolinj]

Good point, I did not what to set there.

[polymorpher]

actually it will need a Row and it is space-between

[haolinj]

Yeah, I thought it would be Grid layout. I will play around it and try to make it align.

[haolinj]

Replaced with Grid layout and removed the check button, replaced with text button that spans the whole Col space.

[polymorpher]

Looks good, but I am getting
react-dom.development.js:67 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I will double check and fix it.

It is reporting setAddressCallback is changing on every render. Since it is a state-setter, and the function is quite large, it might not be a good idea to have that in the dependency array

function dispatchAction(fiber, queue, action) {
  {
    if (typeof arguments[3] === 'function') {
      error("State updates from the useState() and useReducer() Hooks don't support the " + 'second callback argument. To execute a side effect after ' + 'rendering, declare it in the component body with useEffect().');
    }
  }

  var eventTime = requestEventTime();
  var lane = requestUpdateLane(fiber);
  var update = {
    lane: lane,
    action: action,
    eagerReducer: null,
    eagerState: null,
    next: null
  }; // Append the update to the end of the list.

  var pending = queue.pending;

  if (pending === null) {
    // This is the first update. Create a circular list.
    update.next = update;
  } else {
    update.next = pending.next;
    pending.next = update;
  }

  queue.pending = update;
  var alternate = fiber.alternate;

  if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) {
    // This is a render phase update. Stash it in a lazily-created map of
    // queue -> linked list of updates. After this render pass, we'll restart
    // and apply the stashed updates on top of the work-in-progress hook.
    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
  } else {
    if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) {
      // The queue is currently empty, which means we can eagerly compute the
      // next state before entering the render phase. If the new state is the
      // same as the current state, we may be able to bail out entirely.
      var lastRenderedReducer = queue.lastRenderedReducer;

      if (lastRenderedReducer !== null) {
        var prevDispatcher;

        {
          prevDispatcher = ReactCurrentDispatcher$1.current;
          ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
        }

        try {
          var currentState = queue.lastRenderedState;
          var eagerState = lastRenderedReducer(currentState, action); // Stash the eagerly computed state, and the reducer used to compute
          // it, on the update object. If the reducer hasn't changed by the
          // time we enter the render phase, then the eager state can be used
          // without calling the reducer again.

          update.eagerReducer = lastRenderedReducer;
          update.eagerState = eagerState;

          if (objectIs(eagerState, currentState)) {
            // Fast path. We can bail out without scheduling React to re-render.
            // It's still possible that we'll need to rebase this update later,
            // if the component re-renders for a different reason and by that
            // time the reducer has changed.
            return;
          }
        } catch (error) {// Suppress the error. It will throw again in the render phase.
        } finally {
          {
            ReactCurrentDispatcher$1.current = prevDispatcher;
          }
        }
      }
    }

    {
      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
      if ('undefined' !== typeof jest) {
        warnIfNotScopedWithMatchingAct(fiber);
        warnIfNotCurrentlyActingUpdatesInDev(fiber);
      }
    }

    scheduleUpdateOnFiber(fiber, lane, eventTime);
  }
}

[polymorpher]

Turns out the issue is with this dependency knownAddresses. There might be some invalid wallets left in the user's state (e.g. my browser). If the invalid wallet has no valid address, it would become part of walletsNotInKnownAddresses and sent to dispatch for setKnownAddress. The reducer in setKnownAddress can't add that invalid wallet's address to known addresses, but would create a new object for knownAddresses, therefore trigger another useEffect here, hence causing an infinite loop

[haolinj]

I've made this effect run once when the component load.

[polymorpher]

onClick needs to be on Space, otherwise the function won't trigger

[polymorpher]

same as below

[polymorpher]

no longer needed

[polymorpher]

no longer needed, but since we are removing this option altogether - you can update it in the next PR

[haolinj]

Yes, forgot to remove it, will remove and push.

[polymorpher]

same as above

[polymorpher]

Looks good