141 lines
3.6 KiB
TypeScript
141 lines
3.6 KiB
TypeScript
import {
|
|
Button,
|
|
Box,
|
|
Center,
|
|
Spacer,
|
|
HStack,
|
|
FormControl,
|
|
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";
|
|
import AppUrlLabel from "./AppUrlLabel";
|
|
import ShareModal from "./ShareModal";
|
|
|
|
interface IFrameConnectTabParams {
|
|
networkId: number;
|
|
initIFrame: (_inputAppUrl?: string | undefined) => Promise<void>;
|
|
inputAppUrl: string | undefined;
|
|
setInputAppUrl: (value: string | undefined) => void;
|
|
appUrl: string | undefined;
|
|
isIFrameLoading: boolean;
|
|
setIsIFrameLoading: (value: boolean) => void;
|
|
iframeKey: number;
|
|
iframeRef: React.RefObject<HTMLIFrameElement> | null;
|
|
showAddress: string;
|
|
}
|
|
|
|
function IFrameConnectTab({
|
|
networkId,
|
|
initIFrame,
|
|
setInputAppUrl,
|
|
inputAppUrl,
|
|
isIFrameLoading,
|
|
appUrl,
|
|
iframeKey,
|
|
iframeRef,
|
|
setIsIFrameLoading,
|
|
showAddress,
|
|
}: IFrameConnectTabParams) {
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
return (
|
|
<>
|
|
<FormControl my={4}>
|
|
<HStack>
|
|
<AppUrlLabel />
|
|
<Spacer />
|
|
<SupportedDapps
|
|
networkId={networkId}
|
|
initIFrame={initIFrame}
|
|
setInputAppUrl={setInputAppUrl}
|
|
/>
|
|
</HStack>
|
|
<HStack mt="2">
|
|
<InputGroup>
|
|
<Input
|
|
pr="3.5rem"
|
|
bg={"brand.lightBlack"}
|
|
placeholder="https://app.uniswap.org/"
|
|
aria-label="dapp-url"
|
|
autoComplete="off"
|
|
value={inputAppUrl}
|
|
onChange={(e) => setInputAppUrl(e.target.value)}
|
|
/>
|
|
{inputAppUrl && (
|
|
<InputRightElement px="1rem" mr="0.5rem">
|
|
<Button
|
|
h="1.75rem"
|
|
size="sm"
|
|
onClick={() => {
|
|
setInputAppUrl("");
|
|
}}
|
|
>
|
|
<DeleteIcon />
|
|
</Button>
|
|
</InputRightElement>
|
|
)}
|
|
</InputGroup>
|
|
{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}>
|
|
Connect
|
|
</Button>
|
|
</Center>
|
|
<Center
|
|
mt="1rem"
|
|
ml={{ base: "-385", sm: "-315", md: "-240", lg: "-60" }}
|
|
px={{ base: "10rem", lg: 0 }}
|
|
w="70rem"
|
|
>
|
|
{appUrl && (
|
|
<Box
|
|
as="iframe"
|
|
w={{
|
|
base: "22rem",
|
|
sm: "45rem",
|
|
md: "55rem",
|
|
lg: "1500rem",
|
|
}}
|
|
h={{ base: "33rem", md: "35rem", lg: "38rem" }}
|
|
title="app"
|
|
src={appUrl}
|
|
key={iframeKey}
|
|
borderWidth="1px"
|
|
borderStyle={"solid"}
|
|
borderColor="white"
|
|
bg="white"
|
|
ref={iframeRef}
|
|
onLoad={() => setIsIFrameLoading(false)}
|
|
/>
|
|
)}
|
|
</Center>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default IFrameConnectTab;
|