@ensofinance/checkout-widget 0.0.1

package/src/components/QuoteParameters.tsx

@@ -0,0 +1,341 @@
+import { useAccount } from "wagmi";
+import {
+    Box,
+    Flex,
+    Icon,
+    Image,
+    Skeleton,
+    Text,
+    Table,
+    Link,
+} from "@chakra-ui/react";
+import { ExternalLink } from "lucide-react";
+import { useAppDetails, useRouteData, useWalletIcon } from "@/util/enso-hooks";
+import { formatNumber, getChainIcon, normalizeValue } from "@/util";
+import { shortenAddress } from "@/util";
+import { getChainName, Token } from "@/util/common";
+import { Tooltip } from "@/components/ui/tooltip";
+import { getChainEtherscanUrl } from "@/util/common";
+import { MOCK_IMAGE_URL, SupportedChainId } from "@/util/constants";
+import { STARGATE_CHAIN_NAMES } from "@/util/constants";
+import { useAppStore } from "@/store";
+// @ts-ignore
+import BinanceBadge from "../assets/BinanceBadge.svg";
+
+export const ERROR_MSG =
+    "Swap not found for a required underlying of defi route, please make sure your amount is within an acceptable range";
+
+const GECKO_HOSTNAME = "coingecko";
+
+// uplift default image quality
+const transformGeckoUrl = (originalUrl: string): string =>
+    originalUrl.includes(GECKO_HOSTNAME)
+        ? originalUrl.replace("/thumb/", "/large/")
+        : originalUrl;
+
+const TokenIcon = ({
+    token,
+    chainId,
+    size = 32,
+}: {
+    token: Token;
+    chainId?: SupportedChainId;
+    size?: number;
+}) => (
+    <Box
+        position="relative"
+        borderRadius={"50%"}
+        minW={`${size}px`}
+        minH={`${size}px`}
+    >
+        <Box
+            borderRadius={"50%"}
+            overflow={"hidden"}
+            width={`${size}px`}
+            height={`${size}px`}
+        >
+            <img
+                src={
+                    token?.logoURI
+                        ? transformGeckoUrl(token?.logoURI)
+                        : MOCK_IMAGE_URL
+                }
+                title={token?.symbol}
+                alt={token?.symbol}
+                width={`${size}px`}
+                height={`${size}px`}
+            />
+        </Box>
+        {chainId && (
+            <Box
+                position="absolute"
+                bottom="0"
+                right={"-2px"}
+                width={`${size / 2}px`}
+                height={`${size / 2}px`}
+                borderRadius="50%"
+                overflow="hidden"
+                border="1px solid"
+                borderColor="bg"
+                zIndex="1"
+            >
+                <img
+                    src={`https://icons-ckg.pages.dev/stargate-light/networks/${STARGATE_CHAIN_NAMES[chainId]}.svg`}
+                    alt={`Chain ${chainId}`}
+                    width="100%"
+                    height="100%"
+                />
+            </Box>
+        )}
+    </Box>
+);
+
+const QuoteParameters = () => {
+    const { address } = useAccount();
+    const { walletIcon, walletDisplayName } = useWalletIcon();
+    const { chainIdOut, tokenOutData, tokenInData, amountIn, chainIdIn } =
+        useAppDetails();
+    const { routeLoading, routeData, routeFetched, routerError } =
+        useRouteData();
+    const { isCheckout } = useAppStore();
+    const showRouteLoading = routeLoading || (!routeFetched && !routerError);
+
+    const routeErrorMessage: string | null =
+        (routeData as any)?.error || (routeData as any)?.statusCode === 500
+            ? ERROR_MSG
+            : null;
+
+    const inWalletUrl = getChainEtherscanUrl({
+        hash: address,
+        chainId: chainIdIn,
+        type: "/address",
+    });
+
+    const outWalletUrl = getChainEtherscanUrl({
+        hash: address,
+        chainId: chainIdOut,
+        type: "/address",
+    });
+
+    return (
+        <>
+            <Table.Root
+                key={"line"}
+                size="sm"
+                variant={"outline"}
+                width={"100%"}
+                borderRadius={"sm"}
+            >
+                <Table.Body >
+                    <Table.Row>
+                        <Table.Cell>Source</Table.Cell>
+                        <Table.Cell
+                            display="flex"
+                            textAlign="end"
+                            justifyContent="end"
+                        >
+                            <Box
+                                display="flex"
+                                gap={"8px"}
+                                alignItems={"center"}
+                            >
+                                {isCheckout ? (
+                                    <>
+                                        <Image
+                                            src={BinanceBadge}
+                                            width={"16px"}
+                                            height={"16px"}
+                                        />
+                                        <Text>Binance</Text>
+                                    </>
+                                ) : (
+                                    <>
+                                        {typeof walletIcon === "string" ? (
+                                            <Image
+                                                src={walletIcon}
+                                                width={"16px"}
+                                                height={"16px"}
+                                            />
+                                        ) : (
+                                            walletIcon
+                                        )}
+                                        <Tooltip content={walletDisplayName}>
+                                            <Text>
+                                                {address &&
+                                                    walletDisplayName +
+                                                        " " +
+                                                        shortenAddress(
+                                                            address,
+                                                            true,
+                                                        )}
+                                            </Text>
+                                        </Tooltip>
+                                        {inWalletUrl && (
+                                            <Link
+                                                href={inWalletUrl}
+                                                target="_blank"
+                                            >
+                                                <Icon
+                                                    as={ExternalLink}
+                                                    color="fg.muted"
+                                                    width={"16px"}
+                                                    height={"16px"}
+                                                />
+                                            </Link>
+                                        )}
+                                    </>
+                                )}
+                            </Box>
+                        </Table.Cell>
+                    </Table.Row>
+
+                    <Table.Row>
+                        <Table.Cell>Destination</Table.Cell>
+                        <Table.Cell
+                            display="flex"
+                            textAlign="end"
+                            justifyContent="end"
+                        >
+                            <Skeleton
+                                loading={showRouteLoading}
+                                width={showRouteLoading ? "80px" : "auto"}
+                            >
+                                <Flex gap={"8px"} alignItems={"center"}>
+                                    <Image
+                                        src={getChainIcon(chainIdOut)}
+                                        width={"16px"}
+                                        height={"16px"}
+                                    />
+                                    <Text>{getChainName(chainIdOut)}</Text>
+                                    {" - "}
+                                    <Tooltip content={walletDisplayName}>
+                                        <Text>
+                                            {address && shortenAddress(address)}
+                                        </Text>
+                                    </Tooltip>
+                                    {outWalletUrl && (
+                                        <Link
+                                            href={outWalletUrl}
+                                            target="_blank"
+                                        >
+                                            <Icon
+                                                as={ExternalLink}
+                                                color="fg.muted"
+                                                width={"16px"}
+                                                height={"16px"}
+                                            />
+                                        </Link>
+                                    )}
+                                </Flex>
+                            </Skeleton>
+                        </Table.Cell>
+                    </Table.Row>
+
+                    <Table.Row>
+                        <Table.Cell>Estimated time</Table.Cell>
+                        <Table.Cell
+                            display="flex"
+                            textAlign="end"
+                            justifyContent="end"
+                        >
+                            <Skeleton
+                                loading={showRouteLoading}
+                                width={showRouteLoading ? "80px" : "auto"}
+                            >
+                                <Text>
+                                    {isCheckout
+                                        ? `~2min`
+                                        : chainIdIn !== chainIdOut
+                                          ? `~1 min`
+                                          : `instant`}
+                                </Text>
+                            </Skeleton>
+                        </Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table.Root>
+
+            {routeErrorMessage ? (
+                <Text fontSize={"xs"} color="error">
+                    {routeErrorMessage}
+                </Text>
+            ) : (
+                <Table.Root
+                    key={"line"}
+                    size="sm"
+                    variant={"outline"}
+                    bg="bg.subtle"
+                >
+                    <Table.Body>
+                        <Table.Row>
+                            <Table.Cell>You send</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Box
+                                    display="flex"
+                                    gap={"8px"}
+                                    alignItems={"center"}
+                                >
+                                    <Text>
+                                        {formatNumber(
+                                            normalizeValue(
+                                                amountIn,
+                                                tokenInData?.decimals,
+                                            ),
+                                        )}{" "}
+                                        {tokenInData?.symbol}
+                                    </Text>
+                                    <TokenIcon
+                                        token={tokenInData}
+                                        chainId={chainIdIn}
+                                        size={24}
+                                    />
+                                </Box>
+                            </Table.Cell>
+                        </Table.Row>
+                        <Table.Row>
+                            <Table.Cell>You receive</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                {" "}
+                                <Skeleton
+                                    loading={showRouteLoading}
+                                    width={showRouteLoading ? "156px" : "auto"}
+                                >
+                                    <Box
+                                        display="flex"
+                                        gap={"8px"}
+                                        alignItems={"center"}
+                                    >
+                                        <Text>
+                                            {formatNumber(
+                                                normalizeValue(
+                                                    routeData?.amountOut,
+                                                    tokenOutData?.decimals,
+                                                ),
+                                            )}{" "}
+                                            {tokenOutData?.symbol}
+                                        </Text>
+                                        <TokenIcon
+                                            token={tokenOutData}
+                                            chainId={chainIdOut}
+                                            size={24}
+                                        />
+                                    </Box>
+                                </Skeleton>
+                            </Table.Cell>
+                        </Table.Row>
+                    </Table.Body>
+                </Table.Root>
+            )}
+        </>
+    );
+};
+
+export default QuoteParameters;

package/src/components/TransactionDetailRow.tsx

@@ -0,0 +1,124 @@
+import { chakra, Flex, Span, Icon, Box, Collapsible } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import BridgingFee from "./BridgeFee";
+import { useAppDetails, useRouteData } from "@/util/enso-hooks";
+import { useAppStore } from "@/store";
+import { useState } from "react";
+
+export const DetailRowContainer = chakra("div", {
+    base: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        h: "36px",
+        p: "8px 12px",
+        borderRadius: "8px",
+        bg: "bg",
+        w: "100%",
+    },
+});
+
+export const TransactionDetailRow = () => {
+    const { routerData } = useRouteData();
+    const { chainIdIn, chainIdOut, isCheckout } = useAppDetails();
+    const slippage = useAppStore((state) => state.slippage);
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const formattedPriceImpact = routerData?.priceImpact
+        ? (-routerData?.priceImpact / 100).toFixed(2)
+        : "0.00";
+
+    const detailItems = [
+        {
+            detail: `${formattedPriceImpact}%`,
+            label: "Est. price impact",
+        },
+        {
+            detail: `${slippage / 100}%`,
+            label: "Max. slippage",
+        },
+        {
+            detail: isCheckout
+                ? `~2min`
+                : chainIdIn !== chainIdOut
+                  ? `~1 min`
+                  : `instant`,
+            label: "Est. processing time",
+        },
+    ];
+
+    return (
+        <Collapsible.Root
+            open={isExpanded}
+            onOpenChange={(details) => setIsExpanded(details.open)}
+            w={"full"}
+        >
+            <Box
+                width="100%"
+                bg="bg.subtle"
+                borderRadius="md"
+                padding="12px"
+                transition="all 0.2s"
+            >
+                {/* Header - Always visible */}
+                <Collapsible.Trigger asChild>
+                    <Flex
+                        align="center"
+                        justify="space-between"
+                        width="100%"
+                        cursor="pointer"
+                    >
+                        <Flex align="center" gap={2}>
+                            <Span color="fg.muted" fontSize="sm">
+                                Transaction details
+                            </Span>
+                            <Icon
+                                as={ChevronDown}
+                                width="14px"
+                                height="14px"
+                                color="fg.muted"
+                                transform={
+                                    isExpanded
+                                        ? "rotate(180deg)"
+                                        : "rotate(0deg)"
+                                }
+                                transition="transform 0.2s ease-in-out"
+                            />
+                        </Flex>
+                        <BridgingFee />
+                    </Flex>
+                </Collapsible.Trigger>
+
+                {/* Expandable Details with Animation */}
+                <Collapsible.Content>
+                    <Box
+                        marginTop="12px"
+                        paddingTop="12px"
+                        borderTop="1px solid"
+                        borderColor="border"
+                    >
+                        {detailItems.map((item, index) => (
+                            <Flex
+                                key={index}
+                                justify="space-between"
+                                align="center"
+                                paddingY="6px"
+                            >
+                                <Span fontSize="sm" color="fg.muted">
+                                    {item.label}
+                                </Span>
+                                <Span
+                                    fontSize="sm"
+                                    color="fg"
+                                    fontWeight="medium"
+                                >
+                                    {item.detail}
+                                </Span>
+                            </Flex>
+                        ))}
+                    </Box>
+                </Collapsible.Content>
+            </Box>
+        </Collapsible.Root>
+    );
+};

package/src/components/cards/AssetCard.tsx

@@ -0,0 +1,167 @@
+import { FC, PropsWithChildren, ReactElement } from "react";
+import {
+    Box,
+    chakra,
+    Image,
+    SkeletonCircle,
+    SkeletonText,
+    Text,
+} from "@chakra-ui/react";
+import { Card, Tag } from "../ui";
+import { getChainIcon } from "@/util";
+
+export const UsdBalance = chakra("p", {
+    base: {
+        fontWeight: "500",
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0%",
+        color: "fg.muted",
+    },
+});
+
+// export const CardWrapper = chakra("div", {
+//     base: {
+//         display: "flex",
+//         alignItems: "center",
+//         justifyContent: "space-between",
+//         padding: "8px 12px",
+//         borderRadius: "md",
+//         border: "1px solid",
+//         borderColor: "border",
+//         cursor: "pointer",
+//         width: "100%",
+//         _hover: {
+//             borderColor: "border.emphasized",
+//         },
+//     },
+// });
+
+const AssetCardSkeleton: FC<PropsWithChildren<{ isLoading: boolean }>> = ({
+    children,
+    isLoading,
+}) => {
+    if (isLoading) {
+        return (
+            <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+                gap="1"
+                minWidth="320px"
+            >
+                <Box display="flex" alignItems="center" gap="1">
+                    <SkeletonCircle size="8" />
+                    <Box display="flex" flexDirection="column" gap="1">
+                        <SkeletonText noOfLines={1} width="80px" />
+                        <SkeletonText noOfLines={1} width="80px" />
+                    </Box>
+                </Box>
+                <Box display="flex" alignItems="center" gap="1">
+                    <SkeletonText noOfLines={1} width="80px" />
+                </Box>
+            </Box>
+        );
+    }
+
+    return children;
+};
+
+const AssetCard = ({
+    icon,
+    title,
+    balance,
+    usdBalance,
+    tag,
+    loading,
+    selected,
+    onClick,
+    chainId,
+}: {
+    icon?: ReactElement | string;
+    title: string;
+    balance: string | number;
+    usdBalance: string;
+    tag: string;
+    loading: boolean;
+    selected: boolean;
+    onClick: () => void;
+    chainId: number;
+}) => {
+    return (
+        <Card
+            onClick={onClick}
+            selected={selected}
+            // borderColor={selected ? "primary" : "border"}
+        >
+            <AssetCardSkeleton isLoading={loading}>
+                <Box
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="space-between"
+                    gap="1"
+                    minWidth="320px"
+                >
+                    <Box display="flex" alignItems="center" gap="1">
+                        <Box
+                            position={"relative"}
+                            borderRadius={"full"}
+                            w={"32px"}
+                            h={"32px"}
+                        >
+                            {icon && (
+                                <Image
+                                    borderRadius={"full"}
+                                    w={"32px"}
+                                    src={icon as string}
+                                />
+                            )}
+                            {chainId && (
+                                <Box
+                                    position="absolute"
+                                    bottom="0"
+                                    right="-2px"
+                                    width="16px"
+                                    height="16px"
+                                    borderRadius="50%"
+                                    overflow="hidden"
+                                    border="1px solid"
+                                    borderColor="bg"
+                                    zIndex="1"
+                                >
+                                    <img
+                                        src={getChainIcon(chainId)}
+                                        alt={`Chain ${chainId}`}
+                                        width="100%"
+                                        height="100%"
+                                    />
+                                </Box>
+                            )}
+                        </Box>
+                        <Box>
+                            <Text
+                                fontWeight="medium"
+                                color={"fg"}
+                                whiteSpace={"nowrap"}
+                                maxWidth={"80px"}
+                                overflow={"hidden"}
+                                textOverflow={"ellipsis"}
+                            >
+                                {title}
+                            </Text>
+                            <Text fontSize="xs" color="fg.muted">
+                                {balance}
+                            </Text>
+                        </Box>
+                    </Box>
+                    <Box display="flex" alignItems="center" gap="1">
+                        {tag && <Tag>{tag}</Tag>}
+                        <UsdBalance>{usdBalance}</UsdBalance>
+                    </Box>
+                </Box>
+            </AssetCardSkeleton>
+        </Card>
+    );
+};
+
+export default AssetCard;

package/src/components/cards/ExchangeCard.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactElement } from "react";
+
+import { Card, Tag } from "../ui";
+import { Box, Icon, Image, Text } from "@chakra-ui/react";
+import { CheckIcon } from "lucide-react";
+
+export enum IExchangeCardStatus {
+  CONNECT = "connect",
+  CONNECTED = "connected",
+  LOW_BALANCE = "low_balance",
+  NONE = "none",
+}
+
+type IProps = {
+  icon?: ReactElement | string;
+  title: string;
+  status: IExchangeCardStatus;
+  onClick: () => void;
+};
+
+const ExchangeCard: FC<IProps> = ({
+  icon,
+  title,
+  status = IExchangeCardStatus.NONE,
+  onClick,
+}) => {
+  const statusBadge: Record<string, ReactElement | null> = {
+    connect: (
+      <Text fontSize={"xs"} fontWeight="medium" color="pink">
+        Connect
+      </Text>
+    ),
+    low: <Tag>Low Balance</Tag>,
+    connected: (
+      <Icon as={CheckIcon} color="green" width={"16px"} height={"16px"} />
+    ),
+    none: null,
+  };
+
+  return (
+    <Card onClick={onClick}>
+      <Box display="flex" alignItems="center" gap="1">
+        {icon && <Image w={"32px"} src={icon as string} />}
+        <Box>
+          <Card.Title>{title}</Card.Title>
+        </Box>
+      </Box>
+      {statusBadge[status]}
+    </Card>
+  );
+};
+
+export default ExchangeCard;