91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import {
|
|
FormControl,
|
|
HStack,
|
|
FormLabel,
|
|
Tooltip,
|
|
Box,
|
|
Text,
|
|
Input,
|
|
InputGroup,
|
|
InputRightElement,
|
|
Button,
|
|
} from "@chakra-ui/react";
|
|
import { InfoIcon, DeleteIcon } from "@chakra-ui/icons";
|
|
|
|
interface URIInputParams {
|
|
uri: string;
|
|
setUri: (value: string) => void;
|
|
isConnected: boolean;
|
|
initWalletConnect: () => void;
|
|
}
|
|
|
|
function URIInput({
|
|
uri,
|
|
setUri,
|
|
isConnected,
|
|
initWalletConnect,
|
|
}: URIInputParams) {
|
|
const [pasted, setPasted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (pasted) {
|
|
initWalletConnect();
|
|
setPasted(false);
|
|
}
|
|
}, [uri]);
|
|
|
|
return (
|
|
<FormControl my={4}>
|
|
<HStack>
|
|
<FormLabel>WalletConnect URI</FormLabel>
|
|
<Tooltip
|
|
label={
|
|
<>
|
|
<Text>Visit any dApp and select WalletConnect.</Text>
|
|
<Text>
|
|
Click "Copy to Clipboard" beneath the QR code, and paste it
|
|
here.
|
|
</Text>
|
|
</>
|
|
}
|
|
hasArrow
|
|
placement="top"
|
|
>
|
|
<Box pb="0.8rem">
|
|
<InfoIcon />
|
|
</Box>
|
|
</Tooltip>
|
|
</HStack>
|
|
<Box>
|
|
<InputGroup>
|
|
<Input
|
|
pr={isConnected ? "0" : "3.5rem"}
|
|
bg={"brand.lightBlack"}
|
|
placeholder="wc:xyz123"
|
|
aria-label="uri"
|
|
autoComplete="off"
|
|
value={uri}
|
|
onChange={(e) => setUri(e.target.value)}
|
|
onPaste={(e) => {
|
|
e.preventDefault();
|
|
setPasted(true);
|
|
setUri(e.clipboardData.getData("text"));
|
|
}}
|
|
isDisabled={isConnected}
|
|
/>
|
|
{uri && !isConnected && (
|
|
<InputRightElement px="1rem" mr="0.5rem">
|
|
<Button h="1.75rem" size="sm" onClick={() => setUri("")}>
|
|
<DeleteIcon />
|
|
</Button>
|
|
</InputRightElement>
|
|
)}
|
|
</InputGroup>
|
|
</Box>
|
|
</FormControl>
|
|
);
|
|
}
|
|
|
|
export default URIInput;
|