From 3d73311eebf0cb403f9756344c617f7e54946304 Mon Sep 17 00:00:00 2001
From: apoorvlathey <latheyapoorv@gmail.com>
Date: Mon, 12 Jun 2023 00:26:50 +0530
Subject: [PATCH] Add clear buttons to address & WC URI inputs

---
 src/components/Body/AddressInput.tsx          | 20 ++++++++-
 .../Body/WalletConnectTab/URIInput.tsx        | 43 ++++++++++++-------
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/Body/AddressInput.tsx b/src/components/Body/AddressInput.tsx
index b9201c7..2e34ec6 100644
--- a/src/components/Body/AddressInput.tsx
+++ b/src/components/Body/AddressInput.tsx
@@ -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>
diff --git a/src/components/Body/WalletConnectTab/URIInput.tsx b/src/components/Body/WalletConnectTab/URIInput.tsx
index 14c7f21..17b1c9c 100644
--- a/src/components/Body/WalletConnectTab/URIInput.tsx
+++ b/src/components/Body/WalletConnectTab/URIInput.tsx
@@ -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>
   );