react-device-detect#isDesktop TypeScript Examples

AddressButton: React.FC<AddressButtonProps> = ({
  address,
  transactionsCounter,
  onClick,
}) => {
  const { ensName, imageUrl } = useENSAvatar(address, 1);

  return (
    <StyledAddressButton variant="secondary" onClick={onClick} iconLeft>
      <IconHolder>
        {address ? (
          <Avatar src={imageUrl} defaultSeed={address} size={24} />
        ) : (
          <Loading
            loading
            text
            skeletonProps={{ circle: true, width: '24px', height: '24px' }}
          />
        )}
      </IconHolder>
      {isDesktop && (
        <AddressText>
          {ensName || address ? (
            shortenAddress(address)
          ) : (
            <Loading loading text />
          )}
        </AddressText>
      )}
      {transactionsCounter ? (
        <Badge size="25">{transactionsCounter}</Badge>
      ) : null}
    </StyledAddressButton>
  );
}

Filter = () => {
  const { guild_id: guildId } =
    useParams<{ chain_name?: string; guild_id?: string }>();
  const [viewFilter, setViewFilter] = useState(false);
  const { totalFilters } = useFilter();

  const history = useHistory();
  const location = useLocation();

  const { account } = useWeb3React();
  const { data: votingPower } = useVotingPowerOf({
    contractAddress: guildId,
    userAddress: account,
  });
  const { data: guildConfig } = useGuildConfig(guildId);
  const isProposalCreationAllowed = useMemo(() => {
    if (!guildConfig || !votingPower) {
      return false;
    }
    if (votingPower.gte(guildConfig.votingPowerForProposalCreation)) {
      return true;
    }
    return false;
  }, [votingPower, guildConfig]);
  const [openSearchBar, setOpenSearchBar] = useState(false);
  return (
    <FilterContainer>
      <FilterRow>
        {isMobile && !isProposalCreationAllowed && (
          <FilterButton
            onClick={() => setViewFilter(!viewFilter)}
            active={viewFilter || totalFilters > 0}
          >
            Filter
            {totalFilters > 0 && <FilterBadge>{totalFilters}</FilterBadge>}
          </FilterButton>
        )}
        {isDesktop && <FilterMenu />}

        <ButtonContainer>
          <StyledIconButton
            variant="secondary"
            padding="0.4rem"
            onClick={() => setOpenSearchBar(!openSearchBar)}
          >
            <AiOutlineSearch size={20} />
          </StyledIconButton>
          {isProposalCreationAllowed && (
            <Button
              variant="secondary"
              onClick={() => history.push(location.pathname + '/proposalType')}
              data-testid="create-proposal-button"
            >
              Create Proposal
            </Button>
          )}
        </ButtonContainer>
      </FilterRow>
      {isMobile && viewFilter && <FilterMenu />}
      {openSearchBar ? (
        <StyledInputWrapper>
          <Input
            icon={<AiOutlineSearch size={24} />}
            placeholder="Search title, ENS, address"
          />
        </StyledInputWrapper>
      ) : null}
    </FilterContainer>
  );
}

export default function WalletInfoBox({ openOptions }: Props) {
  const { account, connector, chainId } = useWeb3React();
  const { ensName, imageUrl } = useENSAvatar(account, MAINNET_ID);
  const [isCopied, copyAddress] = useClipboard(account, 3000);

  const networkName = NETWORK_NAMES[chainId];

  return (
    <Wrapper>
      <ConnectionStatusRow>
        <ConnectionStatusText>
          <LiveIndicator />
          Connected to {findWalletType(connector)}
        </ConnectionStatusText>
        {isDesktop && (
          <div>
            <Button onClick={openOptions}>Change</Button>
          </div>
        )}
      </ConnectionStatusRow>

      <WalletAddressRow>
        <IconHolder>
          <Avatar src={imageUrl} defaultSeed={account} size={24} />
        </IconHolder>
        <AddressText>{ensName || shortenAddress(account)}</AddressText>
      </WalletAddressRow>

      <Row>
        <ConnectionActionButton
          variant="minimal"
          onClick={copyAddress}
          iconLeft
        >
          {isCopied ? <FiCheckCircle /> : <FiCopy />}
          {isCopied ? 'Copied Address!' : 'Copy Address'}
        </ConnectionActionButton>

        <ExternalLink
          href={getBlockchainLink(account, networkName, 'address')}
          target="_blank"
        >
          <ConnectionActionButton variant="minimal" iconLeft>
            <FiExternalLink />
            View on Explorer
          </ConnectionActionButton>
        </ExternalLink>
      </Row>
      {isMobile && (
        <CenteredButton onClick={openOptions}>Change Connection</CenteredButton>
      )}
    </Wrapper>
  );
}

isTouchscreenDevice =
    isDesktop || isTablet
        ? false
        : (typeof window !== "undefined"
              ? navigator.maxTouchPoints > 0
              : false) || isMobile

function ContextMenuFlex({
  menuItems,
  menuOrDrawerItems = [],
  children,
  forwardedRef,
  ...rest
}: Props) {
  const [isOpen, setOpen] = useState(false)
  const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 })

  return (
    <Flex
      {...rest}
      ref={forwardedRef}
      onContextMenu={event => {
        const { target, clientX, clientY } = event

        if (
          !isDesktop ||
          (target as HTMLElement).tagName?.toLowerCase() === 'input'
        ) {
          return
        }

        event.preventDefault()
        setAnchorPoint({ x: clientX, y: clientY })
        setOpen(true)
      }}
    >
      {isDesktop && (
        <ControlledMenu
          anchorPoint={anchorPoint}
          isOpen={isOpen}
          viewScroll="close"
          portal={true}
          onClose={() => setOpen(false)}
        >
          {getMenuItems(menuOrDrawerItems)}
        </ControlledMenu>
      )}
      {children}
    </Flex>
  )
}

FilterMenu = () => {
  const [showState, setShowState] = useState(false);
  const [showType, setShowType] = useState(false);
  const [showCurrency, setShowCurrency] = useState(false);

  const {
    onToggleState,
    onResetState,
    isStateSelected,
    countStateSelected,
    onToggleType,
    onResetType,
    isTypeSelected,
    countTypeSelected,
    onToggleCurrency,
    onResetCurrency,
    isCurrencySelected,
    countCurrencySelected,
  } = useFilter();
  const stateRef = useRef(null);
  const typeRef = useRef(null);
  const currencyRef = useRef(null);

  // hook that handles the click outside the ref element, when clicked calls callback to close.
  useDetectBlur(stateRef, () => setShowState(false));
  useDetectBlur(typeRef, () => setShowType(false));
  useDetectBlur(currencyRef, () => setShowCurrency(false));

  return (
    <FilterButtons>
      <DropdownMenu ref={stateRef} position={DropdownPosition.BottomRight}>
        <FilterButton
          iconRight
          onClick={() => {
            setShowState(!showState);
          }}
          active={countStateSelected > 0}
        >
          State <FiChevronDown />
        </FilterButton>
        <DropdownContent fullScreenMobile={true} show={showState}>
          {isMobile && (
            <DropdownHeader onClick={() => setShowState(false)}>
              <FiArrowLeft /> <span>State</span>{' '}
              <FilterResetMobile onClick={onResetState}>
                Reset
              </FilterResetMobile>
            </DropdownHeader>
          )}
          <Menu>
            <DropdownMenuItem onClick={() => onToggleState('a')}>
              State 1 {isStateSelected('a') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleState('b')}>
              State 2 {isStateSelected('b') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleState('c')}>
              State 3 {isStateSelected('c') && <FiCheck />}
            </DropdownMenuItem>
          </Menu>
          {isDesktop && countStateSelected > 0 && (
            <FilterResetDesktop onClick={onResetState}>
              Reset
            </FilterResetDesktop>
          )}
        </DropdownContent>
      </DropdownMenu>
      <DropdownMenu ref={typeRef} position={DropdownPosition.BottomRight}>
        <FilterButton
          iconRight
          onClick={() => setShowType(!showType)}
          active={countTypeSelected > 0}
        >
          Type <FiChevronDown />
        </FilterButton>
        <DropdownContent fullScreenMobile={true} show={showType}>
          {isMobile && (
            <DropdownHeader onClick={() => setShowType(false)}>
              <FiArrowLeft /> <span>Type</span>{' '}
              <FilterResetMobile onClick={onResetType}>Reset</FilterResetMobile>
            </DropdownHeader>
          )}
          <Menu>
            <DropdownMenuItem onClick={() => onToggleType('a')}>
              Type a {isTypeSelected('a') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleType('b')}>
              Type b {isTypeSelected('b') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleType('c')}>
              Type c {isTypeSelected('c') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleType('d')}>
              Type d {isTypeSelected('d') && <FiCheck />}
            </DropdownMenuItem>
          </Menu>
          {isDesktop && countTypeSelected > 0 && (
            <FilterResetDesktop onClick={onResetType}>Reset</FilterResetDesktop>
          )}
        </DropdownContent>
      </DropdownMenu>

      <DropdownMenu ref={currencyRef} position={DropdownPosition.BottomRight}>
        <FilterButton
          iconRight
          onClick={() => setShowCurrency(!showCurrency)}
          active={countCurrencySelected > 0}
        >
          Currency <FiChevronDown />
        </FilterButton>
        <DropdownContent fullScreenMobile={true} show={showCurrency}>
          {isMobile && (
            <DropdownHeader onClick={() => setShowCurrency(false)}>
              <FiArrowLeft /> <span>Currency</span>{' '}
              <FilterResetMobile onClick={onResetCurrency}>
                Reset
              </FilterResetMobile>
            </DropdownHeader>
          )}
          <Menu>
            <DropdownMenuItem onClick={() => onToggleCurrency('a')}>
              Currency a {isCurrencySelected('a') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleCurrency('b')}>
              Currency b {isCurrencySelected('b') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleCurrency('c')}>
              Currency c {isCurrencySelected('c') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleCurrency('d')}>
              Currency d {isCurrencySelected('d') && <FiCheck />}
            </DropdownMenuItem>
          </Menu>
          {isDesktop && countCurrencySelected > 0 && (
            <FilterResetDesktop onClick={onResetCurrency}>
              Reset
            </FilterResetDesktop>
          )}
        </DropdownContent>
      </DropdownMenu>
    </FilterButtons>
  );
}

ProposalCard: React.FC<ProposalCardProps> = ({ id, href }) => {
  const { guild_id: guildId } = useParams<{ guild_id?: string }>();
  const { data: proposal } = useProposal(guildId, id);
  const votes = useVoteSummary(guildId, id);
  const { imageUrl, ensName } = useENSAvatar(proposal?.creator, MAINNET_ID);

  return (
    <UnstyledLink to={href || '#'}>
      <CardWrapper>
        <CardHeader>
          <IconDetailWrapper>
            {proposal?.creator ? (
              <Avatar src={imageUrl} defaultSeed={proposal.creator} size={24} />
            ) : (
              <Loading
                style={{ margin: 0 }}
                loading
                text
                skeletonProps={{ circle: true, width: '24px', height: '24px' }}
              />
            )}
            <Detail>
              {ensName ||
                (proposal?.creator ? (
                  shortenAddress(proposal.creator)
                ) : (
                  <Loading style={{ margin: 0 }} loading text />
                ))}
            </Detail>
          </IconDetailWrapper>
          <ProposalStatusWrapper>
            <ProposalStatus
              proposalId={id}
              bordered={false}
              showRemainingTime
            />
          </ProposalStatusWrapper>
        </CardHeader>
        <CardContent>
          <CardTitle size={2}>
            <strong>
              {proposal?.title || (
                <Loading style={{ margin: 0 }} loading text />
              )}
            </strong>
          </CardTitle>
        </CardContent>
        <CardFooter>
          {proposal?.value ? (
            <BorderedIconDetailWrapper>
              <Detail>150 ETH</Detail>
              {isDesktop && (
                <>
                  <Icon as="div" spaceLeft spaceRight>
                    <FiArrowRight />
                  </Icon>{' '}
                  <Detail>geronimo.eth</Detail>
                </>
              )}
            </BorderedIconDetailWrapper>
          ) : (
            <Loading
              style={{ margin: 0 }}
              skeletonProps={{ width: '200px' }}
              loading
              text
            />
          )}

          {proposal?.totalVotes ? (
            <BorderedIconDetailWrapper>
              {votes
                .sort((a, b) => b - a)
                .map((vote, i) => {
                  if (i < 3 && !(i === votes.length - 1)) {
                    return (
                      <>
                        <Detail>{vote}%</Detail>
                        <Icon as="div" spaceLeft spaceRight>
                          <FiCircle />
                        </Icon>
                      </>
                    );
                  } else {
                    return <Detail>{vote}%</Detail>;
                  }
                })}
            </BorderedIconDetailWrapper>
          ) : (
            <Loading
              style={{ margin: 0 }}
              loading
              text
              skeletonProps={{ width: '200px' }}
            />
          )}
        </CardFooter>
      </CardWrapper>
    </UnstyledLink>
  );
}