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