Add clear buttons to address & WC URI inputs

This commit is contained in:
apoorvlathey
2023-06-12 00:26:50 +05:30
parent 6d349f434b
commit 3d73311eeb
2 changed files with 46 additions and 17 deletions

View File

@@ -6,6 +6,7 @@ import {
InputRightElement,
Button,
} from "@chakra-ui/react";
import { DeleteIcon } from "@chakra-ui/icons";
interface AddressInputParams {
showAddress: string;
@@ -51,13 +52,28 @@ function AddressInput({
bg={bg}
isInvalid={!isAddressValid}
/>
{((selectedTabIndex === 0 && isConnected) ||
(selectedTabIndex === 1 && appUrl && !isIFrameLoading)) && (
{(selectedTabIndex === 0 && isConnected) ||
(selectedTabIndex === 1 && appUrl && !isIFrameLoading) ? (
<InputRightElement width="4.5rem" mr="1rem">
<Button h="1.75rem" size="sm" onClick={updateAddress}>
Update
</Button>
</InputRightElement>
) : (
showAddress && (
<InputRightElement px="1rem" mr="0.5rem">
<Button
h="1.75rem"
size="sm"
onClick={() => {
setShowAddress("");
setAddress("");
}}
>
<DeleteIcon />
</Button>
</InputRightElement>
)
)}
</InputGroup>
</FormControl>

View File

@@ -7,8 +7,11 @@ import {
Box,
Text,
Input,
InputGroup,
InputRightElement,
Button,
} from "@chakra-ui/react";
import { InfoIcon } from "@chakra-ui/icons";
import { InfoIcon, DeleteIcon } from "@chakra-ui/icons";
interface URIInputParams {
uri: string;
@@ -57,20 +60,30 @@ function URIInput({
</Tooltip>
</HStack>
<Box>
<Input
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"));
}}
bg={bg}
isDisabled={isConnected}
/>
<InputGroup>
<Input
pr={isConnected ? "0" : "3.5rem"}
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"));
}}
bg={bg}
isDisabled={isConnected}
/>
{uri && !isConnected && (
<InputRightElement px="1rem" mr="0.5rem">
<Button h="1.75rem" size="sm" onClick={() => setUri("")}>
<DeleteIcon />
</Button>
</InputRightElement>
)}
</InputGroup>
</Box>
</FormControl>
);