Swap process improvement

[Luphia]

Main Problem

• during fromToken and toToken is selected
• trigger setIsLoading will trigger useEffect
• infinite loop happened

Sub Problem

• ConnectorProvider work too frequently

Requirement

• Add allowanceMonitor in ConnectorProvider
• Add balanceMonitor in ConnectorProvider
• Refactor ConnectorProvider by Class
• Swap use only one userEffect
• Enhance useEffect logic

Allowance Monitor and Balance Monitor

• monitor interval = 1s
• reusable with toggle on / off

ConnectorProvider

class ConnectorProvider extends React.Component {
  const allowance = {};
  const balance = {};
  const allowanceMonitor = {};
  const balanceMonitor = {};
  const allowanceListener = {};
  const balanceListener = {};
  const monitorInterval = 1000;

  constructor(props) {
    super(props);
  }

  watchAllowance(erc20, switchOn) {
    const currentMonitor = this.allowanceMonitor[erc20];
    if(switchOn || (erc20 && switchOn == undefined && currentMonitor == undefined)) {
      // monitor switch on
      allowanceMonitor[erc20] = setInterval(() => {
        ...
        if(result != this.allowance[erc20]) {
          this.allowance[erc20] = result;
          // notice allowanceListener
        }
      }, this.monitorInterval);
    }
    else {
      // monitor switch off
      clearInterval(statusMonitor.approve);
      delete statusMonitor.approve;
    }
  }

  addAllowanceListener(erc20) {
    ...
    return listenerID;
  }

  removeAllowanceListener(erc20, listenerID) {
    ...
  }

  watchBalance(asset, switchOn) {
    const currentMonitor = this.balanceMonitor[asset];
    if(switchOn || (asset && switchOn == undefined && currentMonitor == undefined)) {
      // monitor switch on
      this.balanceMonitor[asset] = setInterval(() => {
        ...
        if(result != this.balance[asset]) {
          this.balance[asset] = result;
          // notice balanceListener
        }
      }, this.monitorInterval);
    }
    else {
      // monitor switch off
      clearInterval(currentMonitor);
      delete this.balanceMonitor[asset];
    }
  }

  addBalanceListener(asset) {
    ...
    return listenerID;
  }

  removeBalanceListener(asset, listenerID) {
    ...
  }

  render() {
    ...
  }
}

userEffect

1. find pool if fromToken and toToken are both selected
2. toggleOn and listen to fromToken and toToken balanceMonitor and allowanceMonitor
3. toggleOff and stop listening oldTokens balanceMonitor and allowanceMonitor
4. if fromAmount and toAmount is change, countdown input timeout for 0.5 second and clean old countdown
5. enable loading status after countdown and check every amount
6. disable loading status and update button state and summary after checking every amount
7. if balance or allowance is changed, do 5. 6.

[TzuHanLiang]

• take 8hrs to fix infinity loop
• remain 8hr to enhance