react-feather#Moon TypeScript Examples

export default function Header() {
  const { account, chainId } = useActiveWeb3React()
  const { t } = useTranslation()

  const { faucetTransfer } = useBiconomyContracts()

  const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
  // const [isDark] = useDarkModeManager()
  const [darkMode, toggleDarkMode] = useDarkModeManager()

  const toggleClaimModal = useToggleSelfClaimModal()

  const availableClaim: boolean = useUserHasAvailableClaim(account)

  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)

  // const aggregateBalance: TokenAmount | undefined = useAggregateUniBalance()

  const [showUniBalanceModal, setShowUniBalanceModal] = useState(false)
  const [showFaucetModal, setShowFaucetModal] = useState(false)
  const showClaimPopup = useShowClaimPopup()

  // const countUpValue = aggregateBalance?.toFixed(0) ?? '0'
  // const countUpValuePrevious = usePrevious(countUpValue) ?? '0'

  const closeFaucetModal = () => {
    setShowFaucetModal(false)
  }

  const onFaucetClick = async (tokenSymbol: string) => {
    switch (tokenSymbol) {
      case 'USDC':
        await faucetTransfer('USDC')
        break
      case 'USDT':
        await faucetTransfer('USDT')
        break
      case 'DAI':
        // Redirect here to DAI faucet page
        // might make it part of
        await faucetTransfer('DAI')
        break
      case 'KETH':
        // Redirect to KETH faucet page
        await faucetTransfer('KETH')
        break
      case 'KETH':
        // Redirect to KETH faucet page
        await faucetTransfer('KETH')
        break
      case 'TUSDC':
        // Redirect to KETH faucet page
        await faucetTransfer('TUSDC')
        break
      case 'TUSDT':
        // Redirect to KETH faucet page
        await faucetTransfer('TUSDT')
        break
      default:
      // Show error message that faucet token is not supported
    }
  }

  return (
    <HeaderFrame>
      <ClaimModal />
      <Modal isOpen={showUniBalanceModal} onDismiss={() => setShowUniBalanceModal(false)}>
        <UniBalanceContent setShowUniBalanceModal={setShowUniBalanceModal} />
      </Modal>
      <Modal isOpen={showFaucetModal} onDismiss={closeFaucetModal} minHeight={false} maxHeight={90}>
        <Wrapper>
          <UpperSection>
            <CloseIcon onClick={closeFaucetModal}>
              <CloseColor />
            </CloseIcon>
            <ModalHeaderRow>
              <HoverText>Get Tokens From Faucet</HoverText>
            </ModalHeaderRow>
            <ContentWrapper>
              <div style={{ marginTop: '10px', marginBottom: '10px' }}>
                <HoverText>Fee Tokens</HoverText>
              </div>
              <FaucetChipWrapper>
                <FaucetChip
                  label="Get USDC"
                  icon={<ImageIcon src={USDCIcon} />}
                  onClick={() => {
                    onFaucetClick('USDC')
                  }}
                />
                <FaucetChip
                  label="Get USDT"
                  icon={<ImageIcon src={USDTIcon} />}
                  onClick={() => {
                    onFaucetClick('USDT')
                  }}
                />
                <FaucetChip
                  label="Get DAI"
                  icon={<ImageIcon src={DAIIcon} />}
                  onClick={() => {
                    onFaucetClick('DAI')
                  }}
                />
              </FaucetChipWrapper>

              <div style={{ marginTop: '20px', marginBottom: '10px' }}>
                <HoverText>Kovan ETH</HoverText>
              </div>
              <FaucetChipWrapper>
                <FaucetChip
                  label="Get KETH"
                  icon={<ImageIcon src={KETHIcon} />}
                  onClick={() => {
                    onFaucetClick('KETH')
                  }}
                />
              </FaucetChipWrapper>

              <div style={{ marginTop: '20px', marginBottom: '10px' }}>
                <HoverText>Trade Tokens</HoverText>
              </div>
              <FaucetChipWrapper>
                <FaucetChip
                  label="Get Trade USDC"
                  icon={<ImageIcon src={USDCIcon} />}
                  onClick={() => {
                    onFaucetClick('TUSDC')
                  }}
                />
                <FaucetChip
                  label="Get Trade USDT"
                  icon={<ImageIcon src={USDTIcon} />}
                  onClick={() => {
                    onFaucetClick('TUSDT')
                  }}
                />
              </FaucetChipWrapper>
            </ContentWrapper>
          </UpperSection>
        </Wrapper>
      </Modal>
      <HeaderRow>
        <Title href=".">
          <UniIcon>
            <img width={'25px'} height={'30px'} src={biconomyLogo} alt="logo" />
          </UniIcon>
        </Title>
        <HeaderLinks>
          <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
            {t('Forward Swap')}
          </StyledNavLink>

          <StyledExternalLink id={`stake-nav-link`} href={'http://iwaste-eth.com'}>
            See how much ETH you can save <span style={{ fontSize: '11px' }}>↗</span>
          </StyledExternalLink>
        </HeaderLinks>
      </HeaderRow>
      <HeaderControls>
        <FaucetElement onClick={() => setShowFaucetModal(true)}>Faucet</FaucetElement>

        <HeaderElement>
          <HideSmall>
            {chainId && NETWORK_LABELS[chainId] && (
              <NetworkCard title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</NetworkCard>
            )}
          </HideSmall>

          {availableClaim && !showClaimPopup && (
            <UNIWrapper onClick={toggleClaimModal}>
              <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
                <TYPE.white padding="0 2px">
                  {claimTxn && !claimTxn?.receipt ? <Dots>Claiming UNI</Dots> : 'Claim UNI'}
                </TYPE.white>
              </UNIAmount>
              <CardNoise />
            </UNIWrapper>
          )}
          {/* {!availableClaim && aggregateBalance && (
            <UNIWrapper onClick={() => setShowUniBalanceModal(true)}>
              <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
                {account && (
                  <HideSmall>
                    <TYPE.white
                      style={{
                        paddingRight: '.4rem'
                      }}
                    >
                      <CountUp
                        key={countUpValue}
                        isCounting
                        start={parseFloat(countUpValuePrevious)}
                        end={parseFloat(countUpValue)}
                        thousandsSeparator={','}
                        duration={1}
                      />
                    </TYPE.white>
                  </HideSmall>
                )}
                UNI
              </UNIAmount>
              <CardNoise />
            </UNIWrapper>
          )} */}
          <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
            {account && userEthBalance ? (
              <BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
                {userEthBalance?.toSignificant(4)} ETH
              </BalanceText>
            ) : null}
            <Web3Status />
          </AccountElement>
        </HeaderElement>

        <HeaderElementWrap>
          <StyledMenuButton onClick={() => toggleDarkMode()}>
            {darkMode ? <Moon size={20} /> : <Sun size={20} />}
          </StyledMenuButton>
          {/* <Menu /> */}
        </HeaderElementWrap>
      </HeaderControls>
    </HeaderFrame>
  )
}