diff --git a/package.json b/package.json
index 453dae8..00f12cd 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Body/CopyToClipboard.tsx b/src/components/Body/CopyToClipboard.tsx
index 825931c..ef0b7c7 100644
--- a/src/components/Body/CopyToClipboard.tsx
+++ b/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 }) => (
-
-);
+const CopyToClipboard = ({ txt }: { txt: string }) => {
+ const toast = useToast();
+
+ return (
+
+ );
+};
export default CopyToClipboard;
diff --git a/src/components/Body/IFrameConnectTab/ShareModal.tsx b/src/components/Body/IFrameConnectTab/ShareModal.tsx
new file mode 100644
index 0000000..b83e03d
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ Share
+
+
+
+
+
+ Share this link so that anyone can auto connect to this dapp with
+ your provided address!
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ShareModal;
diff --git a/src/components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx b/src/components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx
index c4b8b0e..a266fad 100644
--- a/src/components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx
+++ b/src/components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx
@@ -33,7 +33,7 @@ function DappTile({
}}
>
-
+
{dapp.name}
diff --git a/src/components/Body/IFrameConnectTab/index.tsx b/src/components/Body/IFrameConnectTab/index.tsx
index af16599..30db514 100644
--- a/src/components/Body/IFrameConnectTab/index.tsx
+++ b/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 | null;
+ showAddress: string;
}
function IFrameConnectTab({
@@ -34,7 +40,10 @@ function IFrameConnectTab({
iframeKey,
iframeRef,
setIsIFrameLoading,
+ showAddress,
}: IFrameConnectTabParams) {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+
return (
<>
@@ -47,14 +56,32 @@ function IFrameConnectTab({
setInputAppUrl={setInputAppUrl}
/>
- setInputAppUrl(e.target.value)}
- bg={bg}
- />
+
+ setInputAppUrl(e.target.value)}
+ bg={bg}
+ />
+ {appUrl && (
+ <>
+
+
+ >
+ )}
+