@r3l/app/lib/modules/wallet/balance.component.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Balance = Balance;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactRedux = require("react-redux");

var _numbers = require("../../utils/numbers");

var _eth = require("../../utils/eth");

var _price = require("./price.context");

var _styled = require("../styled");

var _coinStat = _interopRequireDefault(require("../stats/coinStat.component"));

var _common = require("@r3l/common");

var _tooltip = _interopRequireDefault(require("../tooltip/tooltip.component"));

var _walletLinks = _interopRequireDefault(require("./walletLinks"));

var _nextUnlock = require("./nextUnlock");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function Balance() {
  var user = (0, _reactRedux.useSelector)(function (state) {
    return state.auth.user;
  });
  var screenSize = (0, _reactRedux.useSelector)(function (state) {
    return state.navigation.screenSize;
  });
  var maxUSD = (0, _price.usePrice)(_common.CASHOUT_MAX);
  if (!user) return null;
  var metaMaskTokens = user.tokenBalance || 0;
  var fullMetamaskTokens = user.fullTokenBalance || 0;
  var airdropTokens = user.airdropTokens,
      lockedTokens = user.lockedTokens;
  var stakingPower = user.balance ? Math.round(100 * (1 - lockedTokens / (metaMaskTokens + user.balance))) : 0;
  var unclaimed = user.balance - user.airdropTokens;
  var accountDetail = getAccountDetail({
    unclaimed: unclaimed,
    metaMaskTokens: metaMaskTokens,
    fullMetamaskTokens: fullMetamaskTokens,
    getAccountDetail: getAccountDetail,
    airdropTokens: airdropTokens,
    lockedTokens: lockedTokens,
    stakingPower: stakingPower,
    stakedTokens: user.stakedTokens,
    pendingCashout: user.pendingCashout
  });
  return /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      mx: [2, 4],
      mt: [2, 0]
    }
  }, !screenSize ? /*#__PURE__*/_react.default.createElement(_styled.View, null, /*#__PURE__*/_react.default.createElement(_styled.BodyText, {
    sx: {
      mt: 2
    }
  }, "These are coins you earned as rewards. You can transfer up to ", _common.CASHOUT_MAX, maxUSD, " coins to your Ethereum wallet (this limit will be increased as the network grows).")) : null, /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      variant: 'borders.navBorder',
      borderWidth: 1,
      borderBottomWidth: 0,
      p: 2,
      mt: 2
    }
  }, /*#__PURE__*/_react.default.createElement(_styled.Row, {
    sx: {
      justifyContent: 'space-between',
      flexWrap: 'wrap'
    }
  }, /*#__PURE__*/_react.default.createElement(_styled.BodyText, {
    sx: {
      mb: 4.001
    }
  }, "Account Balance"), /*#__PURE__*/_react.default.createElement(_styled.SecondaryText, null, (0, _eth.truncateAddress)(user.ethAddress[0]))), /*#__PURE__*/_react.default.createElement(_styled.Row, {
    sx: {
      alignItems: 'center',
      mt: 2
    }
  }, /*#__PURE__*/_react.default.createElement(_coinStat.default, {
    fs: 4.5,
    lh: 5,
    size: 7,
    user: user,
    align: "center",
    showPrice: true
  })), /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mt: 2
    }
  }), /*#__PURE__*/_react.default.createElement(_nextUnlock.NextUnlock, null)), /*#__PURE__*/_react.default.createElement(_styled.Row, {
    sx: {
      flexWrap: 'wrap',
      variant: 'borders.navBorder',
      borderWidth: 1,
      p: 2
    }
  }, accountDetail.map(function (detail) {
    return (!!detail.value || detail.alwayShow) && /*#__PURE__*/_react.default.createElement(_styled.View, {
      key: detail.text
    }, detail.tip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
      name: detail.text.replace(' ', ''),
      data: {
        text: detail.tip
      }
    }), /*#__PURE__*/_react.default.createElement(_styled.SecondaryText, {
      sx: {
        mr: 2
      }
    }, detail.text, ": ", (0, _numbers.abbreviateNumber)(detail.value)));
  })), /*#__PURE__*/_react.default.createElement(_walletLinks.default, null), /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mt: 2
    }
  }), /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      mt: [4, 9]
    }
  }), /*#__PURE__*/_react.default.createElement(_styled.Header, null, "Recent Activity"));
}

function getAccountDetail(_ref) {
  var unclaimed = _ref.unclaimed,
      metaMaskTokens = _ref.metaMaskTokens,
      fullMetamaskTokens = _ref.fullMetamaskTokens,
      airdropTokens = _ref.airdropTokens,
      lockedTokens = _ref.lockedTokens,
      stakingPower = _ref.stakingPower,
      stakedTokens = _ref.stakedTokens,
      pendingCashout = _ref.pendingCashout;
  return [{
    text: 'Unclaimed Coins',
    value: Math.max(unclaimed, 0),
    tip: 'These are your in-app coins. You can use them for betting on posts.'
  }, {
    text: 'Staked REL Balance',
    value: stakedTokens,
    tip: 'sRel Balance'
  }, {
    text: 'Metamask Coins',
    value: metaMaskTokens,
    tip: 'These are the coins located in your connected Ethereum wallet and can be used for betting.'
  }, {
    text: 'All Metamask Coins',
    value: fullMetamaskTokens,
    tip: 'Total coins in your Ethereum wallet. New transfers will be available for betting after 3 days.'
  }, {
    text: 'Pending Cashout',
    value: pendingCashout
  }, {
    text: 'Airdrop Coins',
    value: airdropTokens,
    tip: 'These are coins you got for referrals and verifying social accounts.\nYou cannot transfer these coins to Metamask.',
    alwaysShow: true
  }, {
    text: 'Locked Coins',
    value: lockedTokens,
    tip: 'These are coins that you are currently betting on posts.\nThey get unlocked once the bets expire.'
  }, {
    text: 'Staking Power',
    value: stakingPower + '%',
    tip: 'This is the ratio between unlocked and locked coins.',
    alwaysShow: true,
    stringValue: true
  }];
}

var _default = /*#__PURE__*/(0, _react.memo)(Balance);

exports.default = _default;
//# sourceMappingURL=balance.component.js.map