All files / src/components/elements NftSearchBox.tsx

0% Statements 0/27
0% Branches 0/10
0% Functions 0/12
0% Lines 0/27

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115                                                                                                                                                                                                                                     
import { useState } from "react";
import { Info } from "@rimble/icons";
import { Box, Button, Input, Flash, Flex, Tooltip } from "rimble-ui";
import { H5, H6 } from "../layouts/LayoutComponents";
import { getNftIdentifiersFromUrl } from "../../utils";
import { baseColors, colors } from "../../themes";
import { StyledTabbedInput } from "./";
import { SearchIcon } from "./Icons";
 
export interface NftSearchBoxProps {
  onSearch(value: string, id: string): void;
}
 
export const NftSearchBox: React.FunctionComponent<NftSearchBoxProps> = (props) => {
  const urlParams = new URLSearchParams(window.location.search);
  const contract = urlParams.get("contract");
  const tokenId = urlParams.get("tokenId");
  const [contractAddress, setContractAddress] = useState<string>(contract || "");
  const [token, setToken] = useState<string>(tokenId || "");
  const [search, setSearch] = useState<string>("");
  const [error, setError] = useState<string>("");
 
  function onKeyDown(event: any) {
    if (event.code === "Enter") {
      props.onSearch(contractAddress, token);
    }
  }
 
  function onSearchChanged(val: string) {
    setError("");
    setSearch(val);
    const nftIdentifiers = getNftIdentifiersFromUrl(val);
    setContractAddress(nftIdentifiers.contractAddress);
    setToken(nftIdentifiers.tokenId);
    setError(nftIdentifiers.error);
  }
 
  function onTrySearch() {
    if (!error) {
      props.onSearch(contractAddress, token);
    }
  }
 
  return (
    <>
      <Box position="relative" mb="2" width="100%">
        <StyledTabbedInput
          onChange={(event: any) => onSearchChanged(event.target.value)}
          onKeyDown={(event: any) => onKeyDown(event)}
          placeholder="Enter NFT URL"
          required
          type="text"
          value={search}
        />
        <Button.Text onClick={() => onTrySearch()} style={{ position: "absolute", top: 10, right: 5, zIndex: 9 }}>
          <SearchIcon />
        </Button.Text>
      </Box>
      <Box bg={baseColors.white} border={2} borderRadius={1} pb={5} pt={3} px={4} width="100%">
        {error && <Flash variant="danger">{error}</Flash>}
        <H5 color="silver" mb={2}>
          Or search by
        </H5>
        <Box mb={3}>
          <Flex alignItems="center" mb={2}>
            <H6 mr={1} my={0}>
              NFT Contract Address
            </H6>
            <Tooltip
              placement="top"
              message="The Ethereum ERC721 or ERC1155 Contract Address associated with the token"
            >
              <Info color={colors.silver} size="16px" />
            </Tooltip>
          </Flex>
          <Input
            onChange={(event: any) => setContractAddress(event.target.value)}
            onKeyDown={(event: any) => onKeyDown(event)}
            placeholder="Enter NFT contract address"
            required
            type="text"
            value={contractAddress}
            width="100%"
          />
        </Box>
        <Box>
          <Flex alignItems="center" mb={2}>
            <H6 mr={1} my={0}>
              NFT Token ID
            </H6>
            <Tooltip placement="top" message="The Token ID associated with the NFT">
              <Info color={colors.silver} size="16px" />
            </Tooltip>
          </Flex>
          <Flex>
            <Input
              onChange={(event: any) => setToken(event.target.value)}
              onKeyDown={(event: any) => onKeyDown(event)}
              placeholder="Enter NFT token ID"
              required
              type="text"
              value={token}
              width="100%"
              mr={3}
            />
            <Button onClick={() => props.onSearch(contractAddress, token)} width="125px">
              Search
            </Button>
          </Flex>
        </Box>
      </Box>
    </>
  );
};