97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import {
|
|
Button,
|
|
Box,
|
|
Center,
|
|
Spacer,
|
|
HStack,
|
|
FormControl,
|
|
Input,
|
|
} from "@chakra-ui/react";
|
|
import SupportedDapps from "./SupportedDapps";
|
|
import AppUrlLabel from "./AppUrlLabel";
|
|
|
|
interface IFrameConnectTabParams {
|
|
networkId: number;
|
|
initIFrame: (_inputAppUrl?: string | undefined) => Promise<void>;
|
|
inputAppUrl: string | undefined;
|
|
setInputAppUrl: (value: string | undefined) => void;
|
|
appUrl: string | undefined;
|
|
bg: string;
|
|
isIFrameLoading: boolean;
|
|
setIsIFrameLoading: (value: boolean) => void;
|
|
iframeKey: number;
|
|
iframeRef: React.RefObject<HTMLIFrameElement> | null;
|
|
}
|
|
|
|
function IFrameConnectTab({
|
|
networkId,
|
|
initIFrame,
|
|
setInputAppUrl,
|
|
inputAppUrl,
|
|
bg,
|
|
isIFrameLoading,
|
|
appUrl,
|
|
iframeKey,
|
|
iframeRef,
|
|
setIsIFrameLoading,
|
|
}: IFrameConnectTabParams) {
|
|
return (
|
|
<>
|
|
<FormControl my={4}>
|
|
<HStack>
|
|
<AppUrlLabel />
|
|
<Spacer />
|
|
<SupportedDapps
|
|
networkId={networkId}
|
|
initIFrame={initIFrame}
|
|
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}
|
|
/>
|
|
</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;
|