graceful-unwinding-widget/lib/index.js

graceful-unwinding-widget React component

'use strict';

exports.__esModule = true;

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

exports.default = GracefulUnwindingWidget;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ethers = require('ethers');

var _styles = require('./styles');

var _constants = require('./constants');

var _wrappedCdpManager = require('./wrapped-cdp-manager');

var _wrappedCdpManager2 = _interopRequireDefault(_wrappedCdpManager);

var _moreInfoBlock = require('./more-info-block');

var _moreInfoBlock2 = _interopRequireDefault(_moreInfoBlock);

var _feeInformation = require('./fee-information');

var _feeInformation2 = _interopRequireDefault(_feeInformation);

var _modal = require('./modal');

var _modal2 = _interopRequireDefault(_modal);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _window = window,
    ethereum = _window.ethereum,
    web3 = _window.web3;


if (ethereum && ethereum.isMetaMask) {
  ethereum.autoRefreshOnNetworkChange = false;
}

function GracefulUnwindingWidget(props) {
  var accountOrNetworkChangedHandler = function () {
    var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var params;
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return getNetworkParams();

            case 2:
              params = _context.sent;


              setNetwork(params.network);
              setAccount(params.account);

              connect();

            case 6:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, this);
    }));

    return function accountOrNetworkChangedHandler() {
      return _ref.apply(this, arguments);
    };
  }();

  var initialize = function () {
    var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
      return _regenerator2.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.prev = 0;

              _ethers.ethers.utils.getAddress(props.distributorAddress);
              _context2.next = 8;
              break;

            case 4:
              _context2.prev = 4;
              _context2.t0 = _context2['catch'](0);

              setError(_constants.ERRORS.INVALID_ADDRESS);
              return _context2.abrupt('return');

            case 8:
              if (!ethereum) {
                _context2.next = 16;
                break;
              }

              _context2.next = 11;
              return ethereum.enable().catch(function (error) {
                setError(_constants.ERRORS.ACCESS_DENIED);
              });

            case 11:

              if (ethereum.on) {
                ethereum.on('networkChanged', accountOrNetworkChangedHandler);
                ethereum.on('accountsChanged', accountOrNetworkChangedHandler);
              }

              _context2.next = 14;
              return connect();

            case 14:
              _context2.next = 17;
              break;

            case 16:
              if (web3) {
                setError(_constants.ERRORS.WEB3_OUTDATED);
              } else {
                setError(_constants.ERRORS.NO_WEB3);
              }

            case 17:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, this, [[0, 4]]);
    }));

    return function initialize() {
      return _ref2.apply(this, arguments);
    };
  }();

  var connect = function () {
    var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3() {
      var params, _manager, _feeInfo, activated;

      return _regenerator2.default.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              setActive(null);
              setError(null);
              setLoading(true);

              if (ethereum) {
                _context3.next = 6;
                break;
              }

              setError(_constants.ERRORS.NO_METAMASK);

              return _context3.abrupt('return');

            case 6:
              _context3.next = 8;
              return getNetworkParams();

            case 8:
              params = _context3.sent;


              setAccount(params.account);

              if (params.account) {
                _context3.next = 13;
                break;
              }

              setError(_constants.ERRORS.ACCOUNT_LOCKED);

              return _context3.abrupt('return');

            case 13:
              _context3.next = 15;
              return _wrappedCdpManager2.default.isNetworkSupported(params.lib, props.distributorAddress);

            case 15:
              if (_context3.sent) {
                _context3.next = 19;
                break;
              }

              setError(_constants.ERRORS.UNSUPPORTED_NETWORK);
              setLoading(false);

              return _context3.abrupt('return');

            case 19:

              setNetwork(params.network);

              if (!props.cdpId) {
                _context3.next = 47;
                break;
              }

              _manager = new _wrappedCdpManager2.default(params.network, params.lib, props.distributorAddress);
              _context3.prev = 22;
              _context3.next = 25;
              return _manager.getFeeInfo();

            case 25:
              _feeInfo = _context3.sent;


              setFeeInfo(_feeInfo);
              _context3.next = 34;
              break;

            case 29:
              _context3.prev = 29;
              _context3.t0 = _context3['catch'](22);

              setError(_constants.ERRORS.WRONG_CONTRACT);
              setLoading(false);

              return _context3.abrupt('return');

            case 34:
              _context3.next = 36;
              return _manager.distributorCanManageCdp(props.cdpId);

            case 36:
              activated = _context3.sent;
              _context3.next = 39;
              return _manager.isOwnCdp(props.cdpId);

            case 39:
              if (_context3.sent) {
                _context3.next = 41;
                break;
              }

              setError(_constants.ERRORS.NOT_OWNED_CDP);

            case 41:

              setManager(_manager);
              setLoading(false);
              setActive(false);

              if (!activated.isZero()) {
                setGUActivated(true);
              }
              _context3.next = 49;
              break;

            case 47:
              setError(_constants.ERRORS.NO_CDP_ID_PROVIDED);
              setLoading(false);

            case 49:
            case 'end':
              return _context3.stop();
          }
        }
      }, _callee3, this, [[22, 29]]);
    }));

    return function connect() {
      return _ref3.apply(this, arguments);
    };
  }();

  var getNetworkParams = function () {
    var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee4() {
      var lib, account, network;
      return _regenerator2.default.wrap(function _callee4$(_context4) {
        while (1) {
          switch (_context4.prev = _context4.next) {
            case 0:
              lib = new _ethers.ethers.providers.Web3Provider(ethereum);
              _context4.next = 3;
              return lib.listAccounts();

            case 3:
              account = _context4.sent[0];
              _context4.next = 6;
              return lib.getNetwork();

            case 6:
              network = _context4.sent.name;
              return _context4.abrupt('return', { account: account, network: network, lib: lib });

            case 8:
            case 'end':
              return _context4.stop();
          }
        }
      }, _callee4, this);
    }));

    return function getNetworkParams() {
      return _ref4.apply(this, arguments);
    };
  }();

  var _useState = (0, _react.useState)(null),
      isActive = _useState[0],
      setActive = _useState[1];

  var _useState2 = (0, _react.useState)(null),
      error = _useState2[0],
      setError = _useState2[1];

  var _useState3 = (0, _react.useState)(null),
      network = _useState3[0],
      setNetwork = _useState3[1];

  var _useState4 = (0, _react.useState)(null),
      account = _useState4[0],
      setAccount = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      guActivated = _useState5[0],
      setGUActivated = _useState5[1];

  var _useState6 = (0, _react.useState)(false),
      guConfirming = _useState6[0],
      setGUConfirming = _useState6[1];

  var _useState7 = (0, _react.useState)(true),
      isLoading = _useState7[0],
      setLoading = _useState7[1];

  var _useState8 = (0, _react.useState)(false),
      manager = _useState8[0],
      setManager = _useState8[1];

  var _useState9 = (0, _react.useState)(null),
      feeInfo = _useState9[0],
      setFeeInfo = _useState9[1];

  (0, _react.useEffect)(function () {

    initialize();
  }, [network, account, props.distributorAddress]);

  function handleActivation(event) {
    setActive(event.target.checked);
  }

  function closeModal() {
    setActive(false);
  }

  function handleActivateGU(value) {
    setLoading(true);

    manager.allowDistributorManageCdp(props.cdpId, value).then(function (transaction) {
      setGUConfirming(true);

      transaction.wait(1).then(function () {
        setGUActivated(!!value);
        setGUConfirming(false);
        setLoading(false);
        setActive(false);
      });
    }).catch(function (e) {
      console.log(e);
      setLoading(false);
      setActive(false);
    });
  }

  var id = +new Date();

  return _react2.default.createElement(
    _styles.WidgetWrapper,
    { className: isLoading ? 'loading' : '' },
    _react2.default.createElement(
      _modal2.default,
      { isOpen: isActive && !isLoading,
        onBackgroundClick: closeModal,
        onCloseClick: closeModal,
        onEscPressed: closeModal
      },
      _react2.default.createElement('iframe', { src: '/terms-and-conditions.html', style: { width: '100%', height: '100%', border: 'none' } }),
      _react2.default.createElement(
        _styles.Row,
        null,
        _react2.default.createElement(
          _styles.Button,
          { onClick: closeModal, background: '#aaa' },
          'Decline'
        ),
        _react2.default.createElement(
          _styles.Button,
          { onClick: function onClick() {
              return handleActivateGU(1);
            } },
          'Accept'
        )
      )
    ),
    _react2.default.createElement(
      _styles.Box,
      null,
      error && _react2.default.createElement(
        _styles.Box,
        null,
        error
      ),
      !error && isActive !== null && _react2.default.createElement(
        _react.Fragment,
        null,
        !guActivated && !guConfirming && _react2.default.createElement(
          _styles.StyledCheckbox,
          null,
          _react2.default.createElement(_styles.Checkbox, { type: 'checkbox', checked: isActive, id: 'styled-checkbox-' + id, onChange: handleActivation }),
          _react2.default.createElement(
            _styles.CheckboxLabel,
            { htmlFor: 'styled-checkbox-' + id },
            'Protect against liquidation'
          ),
          _react2.default.createElement(_moreInfoBlock2.default, null),
          feeInfo && _react2.default.createElement(_feeInformation2.default, { isFlat: feeInfo.isFlat, fee: feeInfo.fee, period: feeInfo.period })
        ),
        (guActivated || guConfirming) && _react2.default.createElement(
          _styles.Box,
          null,
          _react2.default.createElement(
            _styles.BoxFlex,
            null,
            _react2.default.createElement(_styles.Circle, { background: guConfirming ? '#fea' : '#ada' }),
            _react2.default.createElement(
              _styles.Box,
              null,
              _react2.default.createElement(
                _styles.BoxText,
                null,
                'Active Protection'
              ),
              _react2.default.createElement(_moreInfoBlock2.default, null),
              feeInfo && _react2.default.createElement(_feeInformation2.default, { isFlat: feeInfo.isFlat, fee: feeInfo.fee, period: feeInfo.period })
            )
          ),
          _react2.default.createElement(
            _styles.Button,
            { onClick: function onClick() {
                return handleActivateGU(0);
              } },
            'Deactivate'
          )
        )
      )
    )
  );
}
module.exports = exports['default'];