react-feather#ChevronRight TypeScript Examples

HeaderButton = ({
  open,
  label,
  children,
}: PropsWithChildren<HeaderButtonProps>) => {
  return (
    <Button label={label}>
      <CaretLayout>{open ? <ChevronDown /> : <ChevronRight />}</CaretLayout>
      {children}
    </Button>
  )
}

Pagination = makeWithLayout(({ value: page, onChange, totalCount }: PaginationProps) => {
  const isFirst = page === 1
  const isLast = page === totalCount

  return {
    ToFirst: (
      <PaginationButton
        aria-label="На первую страницу"
        disabled={isFirst || totalCount === 0}
        onClick={() => onChange(1)}
      >
        <ChevronsLeft />
      </PaginationButton>
    ),
    ToPrev: (
      <PaginationButton
        aria-label="На предыдущую страницу"
        disabled={isFirst || totalCount === 0}
        onClick={() => onChange(page > 1 ? page - 1 : 1)}
      >
        <ChevronLeft />
      </PaginationButton>
    ),
    Pages: `${page} / ${totalCount}`,
    ToNext: (
      <PaginationButton
        aria-label="На следующую страницу"
        disabled={isLast || totalCount === 0}
        onClick={() => onChange(page < totalCount ? page + 1 : page)}
      >
        <ChevronRight />
      </PaginationButton>
    ),
    ToLast: (
      <PaginationButton
        aria-label="На последнюю страницу"
        disabled={isLast || totalCount === 0}
        onClick={() => onChange(totalCount)}
      >
        <ChevronsRight />
      </PaginationButton>
    ),
  }
}, PaginationLayout)

BundleItemRow: React.FC<BundleItemRowProps> = ({ item, yearly }) => {
  return (
    <Fragment>
      <Link href={`/protocol/${item.id}`}>
        <a
          className="bundle-item"
          style={{
            backgroundImage: item.icon ? `url('${item.icon}')` : undefined,
          }}
        >
          <div className="name">{item.subtitle}</div>
          <div className="amount">
            {item.oneDay?.toLocaleString('en-US', {
              style: 'currency',
              currency: 'USD',
            })}
          </div>
          {!yearly && (
            <div className="amount">
              {item.sevenDayMA?.toLocaleString('en-US', {
                style: 'currency',
                currency: 'USD',
              })}
            </div>
          )}
          <div className="arrow">
            <ChevronRight />
          </div>
        </a>
      </Link>
      <style jsx>{`
        .bundle-item {
          display: flex;
          background-repeat: no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          padding: 4px;
          text-decoration: none;
          background-color: #eee;
        }
        .bundle-item:hover {
          background-color: #dddddd;
        }
        .name {
          padding-left: 32px;
          flex: 1;
        }
        .amount {
          min-width: 200px;
          text-align: right;
          font-family: 'Noto Sans TC', sans-serif;
        }
        .arrow {
          padding: 0 4px;
          height: 24px;
          opacity: 0.7;
        }

        @media (max-width: 700px) {
          .amount {
            font-size: 14px;
            min-width: 110px;
            padding-left: 8px;
          }

          .item {
            padding-left: 30px;
            background-position: 6px center;
          }

          .arrow {
            padding: 0 2px;
          }
        }
      `}</style>
    </Fragment>
  );
}

function ProposalDetails({
  match: {
    params: { protocolID, proposalID },
  },
  history,
}: RouteComponentProps<{ protocolID: string; proposalID: string }>) {
  const { chainId } = useActiveWeb3React()

  // if valid protocol id passed in, update global active protocol
  const dispatch = useDispatch<AppDispatch>()
  const [, setActiveProtocol] = useActiveProtocol()
  useEffect(() => {
    if (protocolID && Object.keys(SUPPORTED_PROTOCOLS).includes(protocolID)) {
      setActiveProtocol(SUPPORTED_PROTOCOLS[protocolID])
    }
  }, [dispatch, protocolID, setActiveProtocol])

  const proposalData = useProposalData(proposalID)
  const status = useProposalStatus(proposalID) // @TODO shoudlnt use spearate data for this

  // get and format data
  const currentTimestamp = useCurrentBlockTimestamp()
  const currentBlock = useBlockNumber()
  const endDate: DateTime | undefined =
    proposalData && currentTimestamp && currentBlock
      ? DateTime.fromSeconds(
          currentTimestamp
            .add(BigNumber.from(AVERAGE_BLOCK_TIME_IN_SECS).mul(BigNumber.from(proposalData.endBlock - currentBlock)))
            .toNumber()
        )
      : undefined
  const now: DateTime = DateTime.local()

  // get total votes and format percentages for UI
  const totalVotes: number | undefined =
    proposalData?.forCount !== undefined && proposalData?.againstCount !== undefined
      ? proposalData.forCount + proposalData.againstCount
      : undefined

  const forPercentage: string =
    proposalData?.forCount !== undefined && totalVotes
      ? ((proposalData.forCount * 100) / totalVotes).toFixed(0) + '%'
      : '0%'

  const againstPercentage: string =
    proposalData?.againstCount !== undefined && totalVotes
      ? ((proposalData.againstCount * 100) / totalVotes).toFixed(0) + '%'
      : '0%'

  const [allIdentities] = useAllIdentities()

  // show links in propsoal details if content is an address
  const linkIfAddress = (content: string) => {
    if (isAddress(content) && chainId) {
      return (
        <ExternalLink href={getEtherscanLink(chainId, content, 'address')}>
          {nameOrAddress(content, allIdentities)}
        </ExternalLink>
      )
    }
    return <span>{nameOrAddress(content, allIdentities)}</span>
  }
  const [support, setSupport] = useState(false)
  const toggleVoteModal = useToggleModal(ApplicationModal.VOTE)
  const voteModalOpen = useModalOpen(ApplicationModal.VOTE)
  const voteModelToggle = useToggleModal(ApplicationModal.VOTE)

  const userAvailableVotes = useUserVotes()
  // only show voting if user has > 0 votes at proposal start block and proposal is active,
  const showVotingButtons =
    userAvailableVotes &&
    userAvailableVotes.greaterThan(BIG_INT_ZERO) &&
    proposalData &&
    proposalData.status === 'active'

  return (
    <BodyWrapper>
      <VoteModal
        isOpen={voteModalOpen}
        onDismiss={voteModelToggle}
        support={support}
        proposalId={proposalID}
        proposalTitle={proposalData?.title}
      />
      <Wrapper>
        <ProposalInfo gap="lg" justify="start">
          <RowBetween style={{ width: '100%', alignItems: 'flex-start' }}>
            <RowFixed>
              <ArrowWrapper
                onClick={() => {
                  history?.length === 1 ? history.push('/') : history.goBack()
                }}
                style={{ alignItems: 'flex-start' }}
              >
                <TYPE.body fontWeight="600">Proposals</TYPE.body>
              </ArrowWrapper>
              <ChevronRight size={16} />
              <TYPE.body>{'Proposal #' + proposalID}</TYPE.body>
            </RowFixed>

            {proposalData && <ProposalStatus status={status ?? ''}>{status}</ProposalStatus>}
          </RowBetween>
          <AutoColumn gap="10px" style={{ width: '100%' }}>
            <TYPE.largeHeader style={{ marginBottom: '.5rem' }}>{proposalData?.title}</TYPE.largeHeader>
            <RowBetween>
              <TYPE.main>
                {endDate && endDate < now
                  ? 'Voting ended ' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
                  : proposalData
                  ? 'Voting ends approximately ' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
                  : ''}
              </TYPE.main>
            </RowBetween>
          </AutoColumn>
          <CardWrapper>
            {proposalData && (
              <>
                <VoterList
                  title="For"
                  amount={proposalData?.forCount}
                  percentage={forPercentage}
                  voters={proposalData?.forVotes.slice(0, Math.min(10, Object.keys(proposalData?.forVotes)?.length))}
                  support="for"
                  id={proposalData?.id}
                />
                <VoterList
                  title="Against"
                  amount={proposalData?.againstCount}
                  percentage={againstPercentage}
                  voters={proposalData?.againstVotes.slice(
                    0,
                    Math.min(10, Object.keys(proposalData?.againstVotes)?.length)
                  )}
                  support={'against'}
                  id={proposalData?.id}
                />
              </>
            )}
            {showVotingButtons && (
              <>
                <ButtonError
                  style={{ flexGrow: 1, fontSize: 16, padding: '8px 12px', width: 'unset' }}
                  onClick={() => {
                    setSupport(true)
                    toggleVoteModal()
                  }}
                >
                  Support Proposal
                </ButtonError>
                <ButtonError
                  error
                  style={{ flexGrow: 1, fontSize: 16, padding: '8px 12px', width: 'unset' }}
                  onClick={() => {
                    setSupport(false)
                    toggleVoteModal()
                  }}
                >
                  Reject Proposal
                </ButtonError>
              </>
            )}
          </CardWrapper>
          <AutoColumn gap="md">
            <TYPE.mediumHeader fontWeight={600}>Details</TYPE.mediumHeader>
            {proposalData?.details?.map((d, i) => {
              return (
                <DetailText key={i}>
                  {i + 1}: {linkIfAddress(d.target)}.{d.functionSig}(
                  {d.callData.split(',').map((content, i) => {
                    return (
                      <span key={i}>
                        {linkIfAddress(content)}
                        {d.callData.split(',').length - 1 === i ? '' : ','}
                      </span>
                    )
                  })}
                  )
                </DetailText>
              )
            })}
          </AutoColumn>
          <AutoColumn gap="md">
            <MarkDownWrapper>
              <ReactMarkdown source={proposalData?.description} disallowedTypes={['code']} />
            </MarkDownWrapper>
          </AutoColumn>
          <AutoColumn gap="md">
            <TYPE.mediumHeader fontWeight={600}>Proposer</TYPE.mediumHeader>
            <AddressWrapper>
              <ExternalLink
                href={
                  proposalData?.proposer && chainId ? getEtherscanLink(chainId, proposalData?.proposer, 'address') : ''
                }
                style={{ wordWrap: 'break-word' }}
              >
                <TYPE.blue fontWeight={500}>{nameOrAddress(proposalData?.proposer, allIdentities)}</TYPE.blue>
              </ExternalLink>
            </AddressWrapper>
          </AutoColumn>
        </ProposalInfo>
      </Wrapper>
    </BodyWrapper>
  )
}

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>
  )
}

Bottom = (props: BottonProps): JSX.Element => {
  const {
    resourceName,
    pageIndex,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
  } = props

  return (
    <Flex
      borderTopWidth="1px"
      overflowX="hidden"
      overflowY="hidden"
      p={4}
      bg="white"
      roundedBottomLeft={4}
      roundedBottomRight={4}
      justifyContent="space-between"
      flexDirection="row"
    >
      <Flex flexDirection="row">
        <TableIconButton
          mr={2}
          onClick={() => {
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_first_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: undefined,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            gotoPage(0)
          }}
          isDisabled={!canPreviousPage}
          icon={<ChevronsLeft size={20} />}
        />
        <TableIconButton
          mr={2}
          isDisabled={!canPreviousPage}
          onClick={() => {
            previousPage()
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_previous_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: pageIndex - 1,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
          }}
          icon={<ChevronLeft size={20} />}
        />
      </Flex>
      <Flex justifyContent="center" alignItems="center">
        <Text mr={4}>
          Страница{' '}
          <strong>
            {pageIndex + 1} из {pageOptions.length}
          </strong>{' '}
        </Text>
      </Flex>
      <Flex flexDirection="row">
        <TableIconButton
          ml={2}
          isDisabled={!canNextPage}
          onClick={() => {
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_next_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: pageIndex + 1,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            nextPage()
          }}
          icon={<ChevronRight size={20} />}
        />
        <TableIconButton
          ml={2}
          onClick={() => {
            const lastPage = pageCount ? pageCount - 1 : 1
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_last_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: lastPage,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            gotoPage(lastPage)
          }}
          isDisabled={!canNextPage}
          icon={<ChevronsRight size={20} />}
        />
      </Flex>
    </Flex>
  )
}