<commit_before>import { useQuery } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core/styles'
import BigNumber from 'bignumber.js'
import classnames from 'classnames'
import gql from 'graphql-tag'
import moment from 'moment'
import QRCode from 'qrcode.react'
import React, { useState } from 'react'

import TableLabel from 'src/components/TableLabel'
import Title from 'src/components/Title'
import { Tr, Td, THead, TBody, Table } from 'src/components/fake-table/Table'
import Sidebar from 'src/components/layout/Sidebar'
import {
  H3,
  Info1,
  Info2,
  Info3,
  Mono,
  Label1,
  Label3
} from 'src/components/typography'
import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
import { primaryColor } from 'src/styling/variables'
import { formatCryptoAddress } from 'src/utils/coin'

import styles from './Funding.styles'

const useStyles = makeStyles(styles)
const sizes = {
  big: 165,
  time: 140,
  date: 130
}

const GET_FUNDING = gql`
  {
    funding {
      cryptoCode
      errorMsg
      fundingAddress
      fundingAddressUrl
      confirmedBalance
      pending
      fiatConfirmedBalance
      fiatPending
      fiatCode
      display
      unitScale
    }
  }
`

const formatAddress = (cryptoCode = '', address = '') =>
  formatCryptoAddress(cryptoCode, address).replace(/(.{4})/g, '$1 ')
const sumReducer = (acc, value) => acc.plus(value)
const formatNumber = it => new BigNumber(it).toFormat(2)

const getConfirmedTotal = list => {
  return formatNumber(
    list
      .filter(it => !it.errorMsg)
      .map(it => new BigNumber(it.fiatConfirmedBalance))
      .reduce(sumReducer, new BigNumber(0))
  )
}

const getPendingTotal = list => {
  return formatNumber(
    list
      .filter(it => !it.errorMsg)
      .map(it => new BigNumber(it.fiatPending))
      .reduce(sumReducer, new BigNumber(0))
  )
}

const Funding = () => {
  const [selected, setSelected] = useState(null)
  const [viewHistory] = useState(false)
  const classes = useStyles()
  const fundingHistory = [
    {
      cryptoAmount: 2.0,
      balance: 10.23,
      fiatValue: 1000.0,
      date: new Date(),
      performedBy: null,
      pending: true
    },
    {
      cryptoAmount: 10.0,
      balance: 12.23,
      fiatValue: 12000.0,
      date: new Date(),
      performedBy: null
    },
    {
      cryptoAmount: 5.0,
      balance: 5.0,
      fiatValue: 50000.0,
      date: new Date(),
      performedBy: null
    }
  ]

  const isSelected = it => {
    return selected && selected.cryptoCode === it.cryptoCode
  }

  const { data: fundingResponse } = useQuery(GET_FUNDING)

  if (fundingResponse?.funding?.length && !selected) {
    setSelected(fundingResponse?.funding[0])
  }

  const itemRender = (it, active) => {
    const itemClass = {
      [classes.item]: true,
      [classes.inactiveItem]: !active
    }
    const wrapperClass = {
      [classes.itemWrapper]: true,
      [classes.error]: it.errorMsg
    }

    return (
      <div className={classnames(wrapperClass)}>
        <div className={classes.firstItem}>{it.display}</div>
        {!it.errorMsg && (
          <>
            <div className={classnames(itemClass)}>
              {it.fiatConfirmedBalance} {it.fiatCode}
            </div>
            <div className={classnames(itemClass)}>
              {it.confirmedBalance} {it.cryptoCode}
            </div>
          </>
        )}
      </div>
    )
  }

  return (
    <>
      <div>
        <Title>Funding</Title>
        {/* <button onClick={it => setViewHistory(!viewHistory)}>history</button> */}
      </div>
      <div className={classes.wrapper}>
        <Sidebar
          data={fundingResponse?.funding}
          isSelected={isSelected}
          onClick={setSelected}
          displayName={it => it.display}
          itemRender={itemRender}>
          {fundingResponse?.funding && fundingResponse?.funding?.length && (
            <div className={classes.total}>
              <Label1 className={classes.totalTitle}>
                Total Crypto Balance
              </Label1>
              <Info1 noMargin>
                {getConfirmedTotal(fundingResponse.funding)}
                {fundingResponse.funding[0].fiatCode}
              </Info1>
              <Label1 className={classes.totalPending}>
                (+{getPendingTotal(fundingResponse.funding)} pending)
              </Label1>
            </div>
          )}
        </Sidebar>
        {selected && !viewHistory && selected.errorMsg && (
          <div className={classes.main}>
            <div className={classes.firstSide}>
              <Info3 className={classes.error}>{selected.errorMsg}</Info3>
            </div>
          </div>
        )}
        {selected && !viewHistory && !selected.errorMsg && (
          <div className={classes.main}>
            <div className={classes.firstSide}>
              <H3>Balance ({selected.display})</H3>
              <div className={classes.coinTotal}>
                <Info1 inline noMargin>
                  {`${selected.confirmedBalance} ${selected.cryptoCode}`}
                </Info1>
                <Info2 inline noMargin className={classes.leftSpacer}>
                  {`(+ ${selected.pending} pending)`}
                </Info2>
              </div>

              <div className={classes.coinTotal}>
                <Info3 inline noMargin>
                  {`= ${formatNumber(selected.fiatConfirmedBalance)} ${
                    selected.fiatCode
                  }`}
                </Info3>
                <Label3 inline noMargin className={classes.leftSpacer}>
                  {`(+${formatNumber(selected.fiatPending)} pending)`}
                </Label3>
              </div>
<commit_msg>fix: negative numbers on funding<commit_after>import { useQuery } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core/styles'
import BigNumber from 'bignumber.js'
import classnames from 'classnames'
import gql from 'graphql-tag'
import moment from 'moment'
import QRCode from 'qrcode.react'
import React, { useState } from 'react'

import TableLabel from 'src/components/TableLabel'
import Title from 'src/components/Title'
import { Tr, Td, THead, TBody, Table } from 'src/components/fake-table/Table'
import Sidebar from 'src/components/layout/Sidebar'
import {
  H3,
  Info1,
  Info2,
  Info3,
  Mono,
  Label1,
  Label3
} from 'src/components/typography'
import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
import { primaryColor } from 'src/styling/variables'
import { formatCryptoAddress } from 'src/utils/coin'

import styles from './Funding.styles'

const useStyles = makeStyles(styles)
const sizes = {
  big: 165,
  time: 140,
  date: 130
}

const GET_FUNDING = gql`
  {
    funding {
      cryptoCode
      errorMsg
      fundingAddress
      fundingAddressUrl
      confirmedBalance
      pending
      fiatConfirmedBalance
      fiatPending
      fiatCode
      display
      unitScale
    }
  }
`

const formatAddress = (cryptoCode = '', address = '') =>
  formatCryptoAddress(cryptoCode, address).replace(/(.{4})/g, '$1 ')
const sumReducer = (acc, value) => acc.plus(value)
const formatNumber = it => new BigNumber(it).toFormat(2)

const getConfirmedTotal = list => {
  return formatNumber(
    list
      .filter(it => !it.errorMsg)
      .map(it => new BigNumber(it.fiatConfirmedBalance))
      .reduce(sumReducer, new BigNumber(0))
  )
}

const getPendingTotal = list => {
  return formatNumber(
    list
      .filter(it => !it.errorMsg)
      .map(it => new BigNumber(it.fiatPending))
      .reduce(sumReducer, new BigNumber(0))
  )
}

const Funding = () => {
  const [selected, setSelected] = useState(null)
  const [viewHistory] = useState(false)
  const classes = useStyles()
  const fundingHistory = [
    {
      cryptoAmount: 2.0,
      balance: 10.23,
      fiatValue: 1000.0,
      date: new Date(),
      performedBy: null,
      pending: true
    },
    {
      cryptoAmount: 10.0,
      balance: 12.23,
      fiatValue: 12000.0,
      date: new Date(),
      performedBy: null
    },
    {
      cryptoAmount: 5.0,
      balance: 5.0,
      fiatValue: 50000.0,
      date: new Date(),
      performedBy: null
    }
  ]

  const isSelected = it => {
    return selected && selected.cryptoCode === it.cryptoCode
  }

  const { data: fundingResponse } = useQuery(GET_FUNDING)

  if (fundingResponse?.funding?.length && !selected) {
    setSelected(fundingResponse?.funding[0])
  }

  const itemRender = (it, active) => {
    const itemClass = {
      [classes.item]: true,
      [classes.inactiveItem]: !active
    }
    const wrapperClass = {
      [classes.itemWrapper]: true,
      [classes.error]: it.errorMsg
    }

    return (
      <div className={classnames(wrapperClass)}>
        <div className={classes.firstItem}>{it.display}</div>
        {!it.errorMsg && (
          <>
            <div className={classnames(itemClass)}>
              {it.fiatConfirmedBalance} {it.fiatCode}
            </div>
            <div className={classnames(itemClass)}>
              {it.confirmedBalance} {it.cryptoCode}
            </div>
          </>
        )}
      </div>
    )
  }

  const pendingTotal = getPendingTotal(fundingResponse?.funding || [])
  const signIfPositive = num => (num >= 0 ? '+' : '')

  return (
    <>
      <div>
        <Title>Funding</Title>
        {/* <button onClick={it => setViewHistory(!viewHistory)}>history</button> */}
      </div>
      <div className={classes.wrapper}>
        <Sidebar
          data={fundingResponse?.funding}
          isSelected={isSelected}
          onClick={setSelected}
          displayName={it => it.display}
          itemRender={itemRender}>
          {fundingResponse?.funding && fundingResponse?.funding?.length && (
            <div className={classes.total}>
              <Label1 className={classes.totalTitle}>
                Total Crypto Balance
              </Label1>
              <Info1 noMargin>
                {getConfirmedTotal(fundingResponse.funding)}
                {fundingResponse.funding[0].fiatCode}
              </Info1>
              <Label1 className={classes.totalPending}>
                ({signIfPositive(pendingTotal)} {pendingTotal} pending)
              </Label1>
            </div>
          )}
        </Sidebar>
        {selected && !viewHistory && selected.errorMsg && (
          <div className={classes.main}>
            <div className={classes.firstSide}>
              <Info3 className={classes.error}>{selected.errorMsg}</Info3>
            </div>
          </div>
        )}
        {selected && !viewHistory && !selected.errorMsg && (
          <div className={classes.main}>
            <div className={classes.firstSide}>
              <H3>Balance ({selected.display})</H3>
              <div className={classes.coinTotal}>
                <Info1 inline noMargin>
                  {`${selected.confirmedBalance} ${selected.cryptoCode}`}
                </Info1>
                <Info2 inline noMargin className={classes.leftSpacer}>
                  {`(${signIfPositive(selected.pending)} ${
                    selected.pending
                  } pending)`}
                </Info2>
              </div>

              <div className={classes.coinTotal}>
                <Info3 inline noMargin>
                  {`= ${formatNumber(selected.fiatConfirmedBalance)} ${
                    selected.fiatCode
                  }`}
                </Info3>
                <Label3 inline noMargin className={classes.leftSpacer}>
                  {`(${signIfPositive(selected.fiatPending)} ${formatNumber(
                    selected.fiatPending
                  )} pending)`}
                </Label3>
              </div>

{'fraction_non_alphanumeric': 0.127263409634438, 'fraction_numerical': 0.0127263409634438, 'mean_word_length': 2.166306111411574, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 133, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6186751', 'n_tokens_mistral': 3539, 'n_tokens_neox': 3450, 'n_words': 690}