<commit_before>import h from 'react-hyperscript'
import {Link} from 'react-router-dom'
import styled from 'styled-components'

import fathomLogo from '../../assets/fathom_monkey_beret_color_cropped.svg'

import {networkName} from '../../constants.js'

const Logo = styled('img')`
  margin: 0 1.25%;
  padding: 0 1.25%;
  text-align: center;
  display: inline-block
  width:5%;
  vertical-align:top;
`

export const Header = (props) => {
  let address = props.userAddress.substring(0, 8) + '...' + props.userAddress.substring(35, 42)
  let balance = (props.AhaBalance / 1e9).toString().substring(0, 6) + ' AHA'
  let network = networkName(props.networkID)

  return (
    h('div',
      {className: 'flex w-100 bg-dark-blue'},
      [
        h('ul',
          {className: 'list flex content-around flex-row w-100 pa2 ma0 items-end'},
          [
            h(Link, {to: '/'}, h(Logo, {alt: 'logo', src: fathomLogo})),
            h(HeaderItem, {name: 'Address', value: address}),
            h(HeaderItem, {name: 'Balance', value: balance}),
            h(HeaderItem, {name: 'Network', value: network})
          ]
        )
      ]
    )
  )
}

const HeaderItem = (props) => {
  return (
    h('li',
      {className: 'flex self-end content-end pr3'},
      [
        h('div',
          {className: 'flex ba br1 b--dark-purple lightest-blue'},
          [
            h('div', {className: 'ph3 pv2'}, props.name),
            h('div', {className: 'bg-lightest-blue dark-blue ph3 pv2'}, props.value)
          ])
      ]
    )
  )
}

export default Header<commit_msg>Completed header refactor<commit_after>import h from 'react-hyperscript'
import {Link} from 'react-router-dom'
import styled from 'styled-components'

import fathomLogo from '../../assets/fathom_monkey_beret_color_cropped.svg'

import {networkName} from '../../constants.js'

const Logo = styled('img').attrs({className: 'flex w2 mh2 self-center'})`
`

export const Header = (props) => {
  let address = props.userAddress.substring(0, 8) + '...' + props.userAddress.substring(35, 42)
  let balance = (props.AhaBalance / 1e9).toString().substring(0, 6) + ' AHA'
  let network = networkName(props.networkID)

  return (
    h(headerContainer,
      [ h(headerRowLeft, [
        h(Link, {to: '/'}, h(Logo, {alt: 'logo', src: fathomLogo})),
        h(headerItem, {name: 'Address', value: address}),
        h(headerItem, {name: 'Network', value: network})
      ]),
        [ h(headerRowRight, [
          h(headerItem, {name: 'Balance', value: balance})
        ]
      )]
      ])
  )
}

const headerContainer = styled('ul').attrs({
  className: 'list flex w-100 flex-row flex-wrap pa2 ma0 items-start justify-between bg-dark-blue'})`
  `

const headerRowLeft = styled('ul').attrs({
  className: 'list pl0 flex w-auto flex-row ma0 items-center justify-start'})`
    `

const headerRowRight = styled('ul').attrs({
  className: 'list pl0 flex w-auto flex-row ma0 items-center justify-end'})`
      `

const headerItemContainer = styled('li').attrs({className: 'flex ba br1 b--dark-purple lightest-blue mh2'})`
`
const headerItemLabel = styled('div').attrs({className: 'ph3 pv2'})`
`
const headerItemValue = styled('div').attrs({className: 'bg-lightest-blue dark-blue ph3 pv2'})`
`

const headerItem = (props) => {
  return (
    h(headerItemContainer,
      [
        h(headerItemLabel, props.name),
        h(headerItemValue, props.value)
      ])
  )
}

export default Header
{'fraction_non_alphanumeric': 0.16448706771287416, 'fraction_numerical': 0.017436791630340016, 'mean_word_length': 2.9930394431554523, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '643965', 'n_tokens_mistral': 1180, 'n_tokens_neox': 1153, 'n_words': 268}