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 && ( + <> + + + + )} +