46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import { GridItem, Center, Image, Text } from "@chakra-ui/react";
|
|
import { SafeDappInfo } from "../../../../types";
|
|
|
|
interface DappTileParams {
|
|
initIFrame: (_inputAppUrl?: string | undefined) => Promise<void>;
|
|
setInputAppUrl: (value: string | undefined) => void;
|
|
closeSafeApps: () => void;
|
|
dapp: SafeDappInfo;
|
|
}
|
|
|
|
function DappTile({
|
|
initIFrame,
|
|
setInputAppUrl,
|
|
closeSafeApps,
|
|
dapp,
|
|
}: DappTileParams) {
|
|
return (
|
|
<GridItem
|
|
border="2px solid"
|
|
borderColor={"gray.500"}
|
|
bg={"white"}
|
|
color={"black"}
|
|
_hover={{
|
|
cursor: "pointer",
|
|
bgColor: "gray.600",
|
|
color: "white",
|
|
}}
|
|
rounded="lg"
|
|
onClick={() => {
|
|
initIFrame(dapp.url);
|
|
setInputAppUrl(dapp.url);
|
|
closeSafeApps();
|
|
}}
|
|
>
|
|
<Center flexDir={"column"} h="100%" p="1rem">
|
|
<Image bg="white" w="2rem" src={dapp.iconUrl} borderRadius="full" />
|
|
<Text mt="0.5rem" textAlign={"center"}>
|
|
{dapp.name}
|
|
</Text>
|
|
</Center>
|
|
</GridItem>
|
|
);
|
|
}
|
|
|
|
export default DappTile;
|