@ensofinance/checkout-widget 0.0.1

package/src/components/cards/OptionCard.tsx

@@ -0,0 +1,59 @@
+import { Card } from "../ui";
+import { Box, Icon, Image } from "@chakra-ui/react";
+import { ChevronRight } from "lucide-react";
+
+const OptionCard = ({
+    title,
+    limit,
+    delay,
+    icons,
+    onClick,
+}: {
+    title: string;
+    limit: string;
+    delay: string;
+    icons: Array<string>;
+    onClick: () => void;
+}) => {
+    return (
+        <Card onClick={onClick}>
+            <Box display="flex" alignItems="center" gap="1" minWidth="320px">
+                <Box
+                    display="flex"
+                    alignItems="center"
+                    gap="1"
+                    marginRight="auto"
+                >
+                    <Box>
+                        <Card.Title>{title}</Card.Title>
+                        {limit && (
+                            <Card.Description>
+                                {limit}
+                                {delay ? ` - ${delay}` : ""}
+                            </Card.Description>
+                        )}
+                    </Box>
+                </Box>
+                <Box display={"flex"} position={"relative"}>
+                    {icons.map((icon, index) => (
+                        <Image
+                            w={"32px"}
+                            position={"relative"}
+                            zIndex={index}
+                            right={`${0 - (icons.length - 1 - index) * 10}px`}
+                            src={icon}
+                        />
+                    ))}
+                </Box>
+                <Icon
+                    as={ChevronRight}
+                    color="gray"
+                    width={"16px"}
+                    height={"16px"}
+                />
+            </Box>
+        </Card>
+    );
+};
+
+export default OptionCard;

package/src/components/cards/WalletCard.tsx

@@ -0,0 +1,99 @@
+import { FC, PropsWithChildren, ReactElement } from "react";
+import { Card, Tag } from "../ui";
+import {
+    Box,
+    Icon,
+    Image,
+    SkeletonCircle,
+    SkeletonText,
+} from "@chakra-ui/react";
+import { CheckIcon } from "lucide-react";
+
+export enum WalletStatus {
+    LOADING = "loading",
+    CONNECTED = "connected",
+    NONE = "none",
+}
+
+const WalletCardSkeleton: FC<PropsWithChildren<{ isLoading: boolean }>> = ({
+    children,
+    isLoading,
+}) => {
+    if (isLoading) {
+        return (
+            <Box display="flex" alignItems="center" gap="1" minWidth="320px">
+                <SkeletonCircle size="8" />
+                <Box display="flex" flexDirection="column" gap="1">
+                    <SkeletonText noOfLines={1} width="80px" />
+                    <Card.Description>Loading wallet...</Card.Description>
+                </Box>
+            </Box>
+        );
+    }
+
+    return children;
+};
+
+const WalletCard = ({
+    icon,
+    walletHash,
+    balance,
+    delay,
+    status,
+    badge,
+    onClick,
+}: {
+    icon?: ReactElement | string;
+    walletHash: string;
+    balance: string | number;
+    delay: string;
+    status: WalletStatus;
+    badge?: string;
+    onClick?: () => void;
+}) => {
+    return (
+        <Card onClick={onClick}>
+            <WalletCardSkeleton isLoading={status === WalletStatus.LOADING}>
+                <Box
+                    display="flex"
+                    alignItems="center"
+                    gap="1"
+                    minWidth="320px"
+                >
+                    <Box
+                        display="flex"
+                        alignItems="center"
+                        gap="1"
+                        marginRight="auto"
+                    >
+                        {icon &&
+                            (typeof icon === "string" ? (
+                                <Image src={icon as string} />
+                            ) : (
+                                icon
+                            ))}
+                        <Box>
+                            <Card.Title>{walletHash}</Card.Title>
+                            {balance && delay && (
+                                <Card.Description>
+                                    {balance} - {delay}
+                                </Card.Description>
+                            )}
+                        </Box>
+                    </Box>
+                    {badge && <Tag>{badge}</Tag>}
+                    {status === WalletStatus.CONNECTED && (
+                        <Icon
+                            as={CheckIcon}
+                            color="green"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    )}
+                </Box>
+            </WalletCardSkeleton>
+        </Card>
+    );
+};
+
+export default WalletCard;

package/src/components/cards/index.ts

@@ -0,0 +1,6 @@
+import AssetCard from "./AssetCard";
+import WalletCard from "./WalletCard";
+import OptionCard from "./OptionCard";
+import ExchangeCard from "./ExchangeCard";
+
+export { WalletCard, AssetCard, OptionCard, ExchangeCard };

package/src/components/modal.tsx

@@ -0,0 +1,83 @@
+import { FC, PropsWithChildren, ReactElement } from "react";
+import { chakra } from "@chakra-ui/react";
+
+export const ModalLayout = chakra("div", {
+    base: {
+        position: "sticky",
+        top: "0px",
+        display: "flex",
+        flexDirection: "column",
+        width: "100vw",
+        height: "100vh",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+
+export const ModalOverlay = chakra("div", {
+    base: {
+        zIndex: 1,
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "rgba(0, 0, 0, 0.58)",
+    },
+});
+
+export const ModalWrapper = chakra("div", {
+    base: {
+        zIndex: 2,
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        maxWidth: "374px",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "lg",
+        border: "1px solid",
+        borderColor: "gray.300",
+        padding: "16px",
+        backgroundColor: "white",
+    },
+});
+
+export const ModalHeaderWrapper = chakra("div", {
+    base: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+
+export const ModalBodyWrapper = chakra("div", {
+    base: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+
+const Modal = ({ children }: { children: ReactElement }) => {
+    return (
+        <ModalLayout>
+            <ModalWrapper>{children}</ModalWrapper>
+            <ModalOverlay />
+        </ModalLayout>
+    );
+};
+
+const ModalHeader: FC<PropsWithChildren<{}>> = ({ children }) => {
+    return <ModalHeaderWrapper>{children}</ModalHeaderWrapper>;
+};
+Modal.Header = ModalHeader;
+
+const ModalBody: FC<PropsWithChildren<{}>> = ({ children }) => {
+    return <ModalBodyWrapper>{children}</ModalBodyWrapper>;
+};
+Modal.Body = ModalBody;
+
+export default Modal;