add share button for sharing link with encoded url params

package.json

@@ -10,6 +10,7 @@
     "@emotion/styled": "^11",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/components/Body/CopyToClipboard.tsx

@@ -1,15 +1,25 @@
-import { Button } from "@chakra-ui/react";
+import { Button, useToast } from "@chakra-ui/react";
 import { CopyIcon } from "@chakra-ui/icons";
 
-const CopyToClipboard = ({ txt }: { txt: string }) => (
-  <Button
-    onClick={() => {
-      navigator.clipboard.writeText(txt);
-    }}
-    size="sm"
-  >
-    <CopyIcon />
-  </Button>
-);
+const CopyToClipboard = ({ txt }: { txt: string }) => {
+  const toast = useToast();
+
+  return (
+    <Button
+      onClick={() => {
+        navigator.clipboard.writeText(txt);
+        toast({
+          title: "Copied to clipboard",
+          status: "success",
+          isClosable: true,
+          duration: 1000,
+        });
+      }}
+      size="sm"
+    >
+      <CopyIcon />
+    </Button>
+  );
+};
 
 export default CopyToClipboard;

src/components/Body/IFrameConnectTab/ShareModal.tsx

@@ -0,0 +1,59 @@
+import {
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Input,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
+import CopyToClipboard from "../CopyToClipboard";
+
+interface ShareModalParams {
+  isOpen: boolean;
+  onClose: () => void;
+  appUrl: string;
+  showAddress: string;
+}
+
+function ShareModal({
+  isOpen,
+  onClose,
+  appUrl,
+  showAddress,
+}: ShareModalParams) {
+  const urlToShare = `https://impersonator.xyz/?address=${showAddress}&url=${encodeURI(
+    appUrl
+  )}`;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay bg="none" backdropFilter="auto" backdropBlur="5px" />
+      <ModalContent>
+        <ModalHeader>
+          <HStack>
+            <FontAwesomeIcon icon={faShareAlt} />
+            <Text>Share</Text>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text>
+            Share this link so that anyone can auto connect to this dapp with
+            your provided address!
+          </Text>
+          <HStack my="3">
+            <Input value={urlToShare} isReadOnly />
+            <CopyToClipboard txt={urlToShare} />
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default ShareModal;

src/components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx

@@ -33,7 +33,7 @@ function DappTile({
       }}
     >
       <Center flexDir={"column"} h="100%" p="1rem">
-        <Image w="2rem" src={dapp.iconUrl} borderRadius="full" />
+        <Image bg="white" w="2rem" src={dapp.iconUrl} borderRadius="full" />
         <Text mt="0.5rem" textAlign={"center"}>
           {dapp.name}
         </Text>

src/components/Body/IFrameConnectTab/index.tsx

@@ -6,9 +6,14 @@ import {
   HStack,
   FormControl,
   Input,
+  Text,
+  useDisclosure,
 } from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
 import SupportedDapps from "./SupportedDapps";
 import AppUrlLabel from "./AppUrlLabel";
+import ShareModal from "./ShareModal";
 
 interface IFrameConnectTabParams {
   networkId: number;
@@ -21,6 +26,7 @@ interface IFrameConnectTabParams {
   setIsIFrameLoading: (value: boolean) => void;
   iframeKey: number;
   iframeRef: React.RefObject<HTMLIFrameElement> | null;
+  showAddress: string;
 }
 
 function IFrameConnectTab({
@@ -34,7 +40,10 @@ function IFrameConnectTab({
   iframeKey,
   iframeRef,
   setIsIFrameLoading,
+  showAddress,
 }: IFrameConnectTabParams) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   return (
     <>
       <FormControl my={4}>
@@ -47,14 +56,32 @@ function IFrameConnectTab({
             setInputAppUrl={setInputAppUrl}
           />
         </HStack>
-        <Input
-          placeholder="https://app.uniswap.org/"
-          aria-label="dapp-url"
-          autoComplete="off"
-          value={inputAppUrl}
-          onChange={(e) => setInputAppUrl(e.target.value)}
-          bg={bg}
-        />
+        <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}
+          />
+          {appUrl && (
+            <>
+              <Button onClick={onOpen}>
+                <HStack>
+                  <FontAwesomeIcon icon={faShareAlt} />
+                  <Text>Share</Text>
+                </HStack>
+              </Button>
+              <ShareModal
+                isOpen={isOpen}
+                onClose={onClose}
+                appUrl={appUrl}
+                showAddress={showAddress}
+              />
+            </>
+          )}
+        </HStack>
       </FormControl>
       <Center>
         <Button onClick={() => initIFrame()} isLoading={isIFrameLoading}>

src/components/Body/index.tsx

@@ -137,34 +137,37 @@ function Body() {
   const [sendTxnData, setSendTxnData] = useState<TxnDataType[]>([]);
 
   useEffect(() => {
-    // WC V1
-    const { session, _showAddress } = getCachedSession();
-    if (session) {
-      let _legacySignClient = new LegacySignClient({ session });
+    // only use cached address if no address from url provided
+    if (!addressFromURL) {
+      // WC V1
+      const { session, _showAddress } = getCachedSession();
+      if (session) {
+        let _legacySignClient = new LegacySignClient({ session });
 
-      if (_legacySignClient.peerMeta) {
-        try {
-          setLegacySignClient(_legacySignClient);
-          setShowAddress(
-            _showAddress ? _showAddress : _legacySignClient.accounts[0]
-          );
-          setAddress(_legacySignClient.accounts[0]);
-          setUri(_legacySignClient.uri);
-          setLegacyPeerMeta(_legacySignClient.peerMeta);
-          setIsConnected(true);
-          const chainId =
-            (_legacySignClient.chainId as unknown as { chainID: number })
-              .chainID || _legacySignClient.chainId;
+        if (_legacySignClient.peerMeta) {
+          try {
+            setLegacySignClient(_legacySignClient);
+            setShowAddress(
+              _showAddress ? _showAddress : _legacySignClient.accounts[0]
+            );
+            setAddress(_legacySignClient.accounts[0]);
+            setUri(_legacySignClient.uri);
+            setLegacyPeerMeta(_legacySignClient.peerMeta);
+            setIsConnected(true);
+            const chainId =
+              (_legacySignClient.chainId as unknown as { chainID: number })
+                .chainID || _legacySignClient.chainId;
 
-          setNetworkId(chainId);
-        } catch {
-          console.log("Corrupt old session. Starting fresh");
-          localStorage.removeItem("walletconnect");
+            setNetworkId(chainId);
+          } catch {
+            console.log("Corrupt old session. Starting fresh");
+            localStorage.removeItem("walletconnect");
+          }
         }
       }
+      // WC V2
+      initWeb3Wallet(true, _showAddress);
     }
-    // WC V2
-    initWeb3Wallet(true, _showAddress);
 
     setProvider(
       new ethers.providers.JsonRpcProvider(
@@ -789,6 +792,7 @@ function Body() {
                 iframeKey={iframeKey}
                 iframeRef={iframeRef}
                 setIsIFrameLoading={setIsIFrameLoading}
+                showAddress={showAddress}
               />
             );
           case 2:

yarn.lock

@@ -2193,6 +2193,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.4.0"
 
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
 "@fortawesome/react-fontawesome@^0.1.18":
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz#2b36917578596f31934e71f92b7cf9c425fd06e4"