persist dapp url

src/components/Body/IFrameConnectTab/ShareModal.tsx

@@ -43,7 +43,7 @@ function ShareModal({
         <ModalCloseButton />
         <ModalBody>
           <Text>
-            Share this link so that anyone can auto connect to this dapp with
+            Share this link so that anyone can auto-connect to this dapp with
             your provided address!
           </Text>
           <HStack my="3">

src/components/Body/IFrameConnectTab/index.tsx

@@ -8,7 +8,10 @@ import {
   Input,
   Text,
   useDisclosure,
+  InputGroup,
+  InputRightElement,
 } from "@chakra-ui/react";
+import { DeleteIcon } from "@chakra-ui/icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
 import SupportedDapps from "./SupportedDapps";
@@ -57,14 +60,30 @@ function IFrameConnectTab({
           />
         </HStack>
         <HStack mt="2">
-          <Input
-            placeholder="https://app.uniswap.org/"
-            aria-label="dapp-url"
-            autoComplete="off"
-            value={inputAppUrl}
-            onChange={(e) => setInputAppUrl(e.target.value)}
-            bg={bg}
-          />
+          <InputGroup>
+            <Input
+              pr="3.5rem"
+              placeholder="https://app.uniswap.org/"
+              aria-label="dapp-url"
+              autoComplete="off"
+              value={inputAppUrl}
+              onChange={(e) => setInputAppUrl(e.target.value)}
+              bg={bg}
+            />
+            {inputAppUrl && (
+              <InputRightElement px="1rem" mr="0.5rem">
+                <Button
+                  h="1.75rem"
+                  size="sm"
+                  onClick={() => {
+                    setInputAppUrl("");
+                  }}
+                >
+                  <DeleteIcon />
+                </Button>
+              </InputRightElement>
+            )}
+          </InputGroup>
           {appUrl && (
             <>
               <Button onClick={onOpen}>

src/components/Body/index.tsx

@@ -78,6 +78,7 @@ function Body() {
     "address"
   );
   const urlFromURL = new URLSearchParams(window.location.search).get("url");
+  const urlFromCache = localStorage.getItem("appUrl");
   const chainFromURL = new URLSearchParams(window.location.search).get("chain");
   let networkIdViaURL = 1;
   if (chainFromURL) {
@@ -129,7 +130,7 @@ function Body() {
   const [isIFrameLoading, setIsIFrameLoading] = useState(false);
 
   const [inputAppUrl, setInputAppUrl] = useState<string | undefined>(
-    urlFromURL ?? undefined
+    urlFromURL ?? urlFromCache ?? undefined
   );
   const [iframeKey, setIframeKey] = useState(0); // hacky way to reload iframe when key changes
 
@@ -209,6 +210,12 @@ function Body() {
     localStorage.setItem("showAddress", showAddress);
   }, [showAddress]);
 
+  useEffect(() => {
+    if (inputAppUrl) {
+      localStorage.setItem("appUrl", inputAppUrl);
+    }
+  }, [inputAppUrl]);
+
   useEffect(() => {
     setIFrameAddress(address);
     // eslint-disable-next-line