react-feather#XCircle TypeScript Examples

BetaWarningBanner: React.FC = () => {
  const classes = useStyles();
  const [showBanner, setShowBanner] = useState(true);
  return (
    <>
      {showBanner && (
        <Box className={classes.warningBanner}>
          <AlertTriangle size={20} />
          <Typography variant='caption'>
            This site is in beta. By using this software, you understand,
            acknowledge and accept that Quickswap and/or the underlying software
            are provided “as is” and “as available” basis and without warranties
            or representations of any kind either expressed or implied
          </Typography>
          <Box
            onClick={() => setShowBanner(false)}
            className={classes.closeBanner}
          >
            <XCircle size={20} />
          </Box>
        </Box>
      )}
    </>
  );
}

function DelegateInfo({
  match: {
    params: { protocolID, delegateAddress },
  },
}: RouteComponentProps<{ protocolID?: string; delegateAddress?: string }>) {
  // if valid protocol id passed in, update global active protocol
  useProtocolUpdate(protocolID)

  const { chainId, account } = useActiveWeb3React()
  const [activeProtocol] = useActiveProtocol()

  const formattedAddress = isAddress(delegateAddress)

  // get governance data and format amounts
  const delegateInfo = useDelegateInfo(delegateAddress)
  const delegatedVotes = delegateInfo ? (
    localNumber(delegateInfo.delegatedVotes)
  ) : delegateInfo === null ? (
    '0'
  ) : (
    <Loader />
  )

  const userDelegatee: string | undefined = useUserDelegatee(formattedAddress)

  const holdersRepresented = delegateInfo ? (
    localNumber(
      delegateInfo.tokenHoldersRepresentedAmount - (userDelegatee && userDelegatee === formattedAddress ? 1 : 0)
    )
  ) : delegateInfo === null ? (
    '0'
  ) : (
    <Loader />
  )

  const isEOA = useIsEOA(delegateAddress)

  // proposal data
  const proposalData = useAllProposals()
  const proposalStatuses = useAllProposalStates()

  // get gov token balance
  const govToken: Token | undefined = useGovernanceToken()
  const delegateTokenBalance = useTokenBalance(formattedAddress ? formattedAddress : undefined, govToken)

  // user gov data
  const isDelegatee =
    userDelegatee && delegateAddress ? userDelegatee.toLowerCase() === delegateAddress.toLowerCase() : false

  // don't show govToken balance for Aave until multi-token support implemented in Sybil
  const isAave = useIsAave()

  // get social data from Sybil list
  const identity = useIdentity(delegateAddress)
  const twitterHandle = identity?.twitter?.handle
  const twitterData = useTwitterProfileData(twitterHandle)
  const [allIdentities] = useAllIdentities()

  // ens name if they have it
  const ensName = useENS(formattedAddress ? formattedAddress : null)?.name

  const nameShortened = nameOrAddress(
    formattedAddress ? formattedAddress : undefined,
    allIdentities,
    true,
    delegateInfo?.autonomous,
    ensName
  )

  // toggle for showing delegation modal with prefilled delegate
  const toggelDelegateModal = useToggleModal(ApplicationModal.DELEGATE)
  const [, setPrefilledDelegate] = useModalDelegatee()

  // detect if they can delegate
  const userTokenBalance = useTokenBalance(account ?? undefined, govToken)
  const showDelegateButton = Boolean(userTokenBalance && JSBI.greaterThan(userTokenBalance.raw, BIG_INT_ZERO))

  // mainnet only
  if (chainId && chainId !== ChainId.MAINNET) {
    return (
      <BodyWrapper>
        <OutlineCard>Please switch to Ethereum mainnet. </OutlineCard>
      </BodyWrapper>
    )
  }

  return (
    <BodyWrapper>
      {formattedAddress && chainId && delegateAddress ? (
        <AutoColumn gap="lg">
          <RowFixed style={{ width: '100%', height: '20px' }}>
            <ArrowWrapper to={'/delegates/' + activeProtocol?.id}>
              <TYPE.body fontSize="16px" fontWeight="600">
                Top Delegates
              </TYPE.body>
            </ArrowWrapper>
            <ChevronRight size={16} />

            <ExternalLink
              href={
                twitterHandle
                  ? getTwitterProfileLink(twitterHandle)
                  : getEtherscanLink(chainId, formattedAddress, 'address')
              }
            >
              <TYPE.black>{nameShortened}</TYPE.black>
            </ExternalLink>
          </RowFixed>
          <GreyCard>
            <RowBetween>
              <AutoRow gap="10px">
                {twitterData?.profileURL ? (
                  <RoundedProfileImage>
                    <img src={twitterData.profileURL} alt="profile" />
                  </RoundedProfileImage>
                ) : (
                  <WrappedListLogo src={EmptyProfile} />
                )}
                <AutoColumn gap="2px">
                  <RowFixed>
                    <ExternalLink
                      href={
                        twitterHandle
                          ? getTwitterProfileLink(twitterHandle)
                          : getEtherscanLink(chainId, formattedAddress, 'address')
                      }
                    >
                      <TYPE.black>
                        {nameShortened === formattedAddress ? ensName ?? formattedAddress : nameShortened}
                      </TYPE.black>
                    </ExternalLink>
                    {!twitterHandle && !delegateInfo?.autonomous && <CopyHelper toCopy={formattedAddress} />}
                  </RowFixed>
                  {twitterHandle || delegateInfo?.autonomous || nameShortened !== shortenAddress(delegateAddress) ? (
                    <RowFixed>
                      <ExternalLink href={getEtherscanLink(chainId, formattedAddress, 'address')}>
                        <TYPE.black fontSize="12px">{shortenAddress(delegateAddress)}</TYPE.black>
                      </ExternalLink>
                      <CopyHelper toCopy={formattedAddress} />
                    </RowFixed>
                  ) : (
                    <TYPE.black fontSize="12px">
                      {isEOA === true ? '? EOA' : isEOA === false && '? Smart Contract'}
                    </TYPE.black>
                  )}
                </AutoColumn>
              </AutoRow>
              <DelegateButton
                width="fit-content"
                disabled={!showDelegateButton || !account || isDelegatee}
                onClick={() => {
                  setPrefilledDelegate(delegateAddress)
                  toggelDelegateModal()
                }}
              >
                {isDelegatee ? 'Delegated' : 'Delegate'}
              </DelegateButton>
            </RowBetween>
          </GreyCard>
          <GreyCard>
            <DataRow>
              {!isAave && (
                <AutoColumn gap="sm">
                  <TYPE.main fontSize="14px">{`${activeProtocol?.token.symbol} Balance`}</TYPE.main>
                  <ResponsiveDataText>
                    {delegateTokenBalance ? delegateTokenBalance?.toFixed(0) : <Loader />}
                  </ResponsiveDataText>
                </AutoColumn>
              )}
              <AutoColumn gap="sm">
                <TYPE.main fontSize="14px">Votes</TYPE.main>
                <ResponsiveDataText>{delegatedVotes}</ResponsiveDataText>
              </AutoColumn>
              <OnlyAboveSmall>
                <AutoColumn gap="sm">
                  <TYPE.main fontSize="14px">Token Holders Represented</TYPE.main>
                  <ResponsiveDataText>{holdersRepresented}</ResponsiveDataText>
                </AutoColumn>
              </OnlyAboveSmall>
            </DataRow>
          </GreyCard>
          <GreyCard>
            <AutoColumn gap="lg">
              <TYPE.main fontSize="16px">Voting History</TYPE.main>
              <Break />
              {delegateInfo && proposalStatuses && delegateInfo.votes ? (
                delegateInfo.votes
                  ?.map((vote, i) => {
                    const proposal = proposalData?.[vote.proposal]
                    // need to offset by one because proposal ids start at 1
                    const index = proposal ? parseFloat(proposal?.id) - 1 : 0
                    const status = proposalStatuses[index] ? enumerateProposalState(proposalStatuses[index]) : 'loading'
                    return (
                      proposal && (
                        <div key={i}>
                          <RowBetween key={i + proposal.id} style={{ alignItems: 'flex-start' }}>
                            <AutoColumn gap="sm" style={{ maxWidth: '500px' }} justify="flex-start">
                              <StyledInternalLink to={'/proposals/' + activeProtocol?.id + '/' + proposal.id}>
                                <ResponsiveBodyText style={{ maxWidth: '240px' }}>{proposal.title}</ResponsiveBodyText>
                              </StyledInternalLink>
                              {status && (
                                <RowFixed>
                                  <ProposalStatusSmall status={status}>{status}</ProposalStatusSmall>
                                </RowFixed>
                              )}
                            </AutoColumn>
                            <AutoColumn gap="sm" justify="flex-start" style={{ height: '100%' }}>
                              <RowFixed>
                                <ResponsiveBodyText mr="6px" ml="6px" textAlign="right">
                                  {`${localNumber(vote.votes)} votes ${vote.support ? 'in favor' : 'against'}`}
                                </ResponsiveBodyText>
                                {vote.support ? (
                                  <GreenIcon>
                                    <CheckCircle />
                                  </GreenIcon>
                                ) : (
                                  <RedIcon>
                                    <XCircle />
                                  </RedIcon>
                                )}
                              </RowFixed>
                            </AutoColumn>
                          </RowBetween>
                          {i !== 0 && <Break style={{ marginTop: '24px' }} />}
                        </div>
                      )
                    )
                  })
                  .reverse()
              ) : delegateInfo === null ? (
                <TYPE.body>No past votes</TYPE.body>
              ) : (
                <Loader />
              )}
              {delegateInfo && delegateInfo?.votes?.length === 0 && <TYPE.body>No past votes</TYPE.body>}
            </AutoColumn>
          </GreyCard>
        </AutoColumn>
      ) : (
        <Loader />
      )}
    </BodyWrapper>
  )
}