@ensofinance/checkout-widget 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ComponentType } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { SystemConfig as WidgetTheme } from '@chakra-ui/react';
 
-export declare const Checkout: ({ config: { apiKey, tokenOut, chainIdOut, theme, enableExchange, enableCardBuy, cexBridgeChainMapping, recipient, enforceFlow, slippage, }, onClose, wrapper, }: {
+export declare const Checkout: ({ config: { apiKey, tokenOut, chainIdOut, theme, enableExchange, cexBridgeChainMapping, recipient, enforceFlow, slippage, }, onClose, wrapper, }: {
     config: CheckoutConfig;
     wrapper?: ComponentType;
     onClose?: () => void;
@@ -14,8 +14,6 @@ export declare type CheckoutConfig = {
     apiKey: string;
     theme?: WidgetTheme;
     enableExchange?: SupportedExchanges[];
-    /** Enable card purchases via MELD onramp */
-    enableCardBuy?: boolean;
     /** Override the default CEX bridge chain mapping (maps target chains to intermediate chains for withdrawal + bridge) */
     cexBridgeChainMapping?: Record<number, number>;
     /** Override recipient address (defaults to connected wallet's smart account) */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {
@@ -21,7 +21,7 @@
         "generate-api": "orval",
         "publish": "npm publish --access public",
         "dev": "vite build --watch --mode=dev --minify=false --sourcemap=false --emptyOutDir=false",
-        "build": "vite build",
+        "build": "vite build --sourcemap=false",
         "preview": "vite preview",
         "build:pump:publish": "npm run bump &&  npm run build && npm run publish"
     },

package/src/components/AmountInput.tsx

@@ -1,4 +1,4 @@
-import { Box, Icon, Skeleton, Text } from "@chakra-ui/react";
+import { Box, Icon, Text } from "@chakra-ui/react";
 import { ArrowDownUpIcon } from "lucide-react";
 import { Input, IconButton, Tab } from "@/components/ui";
 import { formatNumber, formatUSD } from "@/util";
@@ -136,8 +136,6 @@ export const AmountInput = ({
         });
     };
 
-    const isLoading = tokenPriceUsd === undefined && !tokenSymbol;
-
     const placeholder = value.mode === "usd" ? "$10.00" : "0.00";
     const displayValue =
         value.mode === "usd"
@@ -172,28 +170,24 @@ export const AmountInput = ({
                 padding={"25.5px"}
             >
                 {/* Main Input */}
-                {isLoading ? (
-                    <Skeleton height="58px" width="180px" borderRadius="card" marginY={"8px"} />
-                ) : (
-                    <Input
-                        inputMode="decimal"
-                        marginY={"8px"}
-                        variant={"text"}
-                        placeholder={placeholder}
-                        value={displayValue}
-                        onChange={(event) => handleInputChange(event.target.value)}
-                    />
-                )}
+                <Input
+                    inputMode="decimal"
+                    marginY={"8px"}
+                    variant={"text"}
+                    placeholder={placeholder}
+                    value={displayValue}
+                    onChange={(event) => handleInputChange(event.target.value)}
+                />
 
                 {/* Toggle Button and Equivalent Display */}
                 <Box
                     display={"flex"}
                     gap={"3"}
                     alignItems={"center"}
-                    onClick={isLoading ? undefined : handleToggleMode}
-                    _hover={isLoading ? undefined : { background: "bg.subtle" }}
-                    cursor={isLoading ? "default" : "pointer"}
-                    borderRadius={"card"}
+                    onClick={handleToggleMode}
+                    _hover={{ background: "bg.subtle" }}
+                    cursor={"pointer"}
+                    borderRadius={"lg"}
                     px={"3"}
                 >
                     <IconButton
@@ -204,20 +198,16 @@ export const AmountInput = ({
                     >
                         <Icon
                             as={ArrowDownUpIcon}
-                            color="fg.muted"
+                            color="gray"
                             width={"16px"}
                             height={"16px"}
                         />
                     </IconButton>
 
                     {/* Small equivalent value display */}
-                    {isLoading ? (
-                        <Skeleton height="16px" width="80px" borderRadius="card" />
-                    ) : (
-                        <Text fontSize="sm" color="fg.muted">
-                            {equivalentValue}
-                        </Text>
-                    )}
+                    <Text fontSize="sm" color="fg.muted">
+                        {equivalentValue}
+                    </Text>
                 </Box>
             </Box>
 
@@ -228,20 +218,14 @@ export const AmountInput = ({
                     justifyContent={"center"}
                     paddingBottom={"35px"}
                 >
-                    {isLoading ? (
-                        percentOptions.map((option) => (
-                            <Skeleton key={option.label} height="32px" width="52px" borderRadius="control" />
-                        ))
-                    ) : (
-                        percentOptions.map((option) => (
-                            <Tab
-                                key={option.label}
-                                onClick={() => handlePercentSelect(option.value)}
-                            >
-                                {option.label}
-                            </Tab>
-                        ))
-                    )}
+                    {percentOptions.map((option) => (
+                        <Tab
+                            key={option.label}
+                            onClick={() => handlePercentSelect(option.value)}
+                        >
+                            {option.label}
+                        </Tab>
+                    ))}
                 </Box>
             )}
         </Box>

package/src/components/ChakraProvider.tsx

@@ -22,7 +22,7 @@ export const buttonRecipe = defineRecipe({
         width: "100%",
         justifyContent: "center",
         alignItems: "center",
-        borderRadius: "control",
+        borderRadius: "md",
     },
     variants: {
         variant: {
@@ -61,11 +61,11 @@ export const selectSlotRecipe = defineSlotRecipe({
     slots: selectAnatomy.keys(),
     base: {
         trigger: {
-            borderRadius: "control",
+            borderRadius: "6px",
             boxShadow: "none",
         },
         content: {
-            borderRadius: "control",
+            borderRadius: "6px",
             boxShadow: "none",
         },
     },
@@ -278,41 +278,18 @@ export const tableSlotRecipe = defineSlotRecipe({
 
 export const config = defineConfig({
     theme: {
-        tokens: {
-            radii: {
-                container: { value: "16px" },
-                card: { value: "8px" },
-                control: { value: "6px" },
-            },
-        },
-        keyframes: {
-            fadeSlideUp: {
-                from: { opacity: "0", transform: "translateY(6px)" },
-                to: { opacity: "1", transform: "translateY(0)" },
-            },
-            fadeIn: {
-                from: { opacity: "0" },
-                to: { opacity: "1" },
-            },
-        },
         semanticTokens: {
             colors: {
-                bg: { value: "#FFFFFF" },
-                "bg.subtle": { value: "#F8FAFC" },
-                "bg.emphasized": { value: "#F1F5F9" },
-                "bg.muted": { value: "#F8FAFC" },
-                fg: { value: "#1E171F" },
-                "fg.muted": { value: "#64748B" },
-                "fg.subtle": { value: "#94A3B8" },
-                border: { value: "#E4E4E7" },
-                "border.subtle": { value: "#F4F4F5" },
-                "border.emphasized": { value: "#1e171f4d" },
+                border: {
+                    value: "#E4E4E7",
+                },
+                "border.subtle": {
+                    value: "#F4F4F5",
+                },
+                "border.emphasized": {
+                    value: "#1e171f4d",
+                },
                 primary: { value: "black" },
-                "primary.emphasis": { value: "#000000" },
-                "primary.muted": { value: "rgba(0,0,0,0.6)" },
-                success: { value: "#10B981" },
-                error: { value: "#EF4444" },
-                warning: { value: "#F59E0B" },
                 customBlack: { value: "#1E171F" },
                 customWhite: { value: "#FAFAFA" },
                 gray: {
@@ -369,7 +346,7 @@ const ChakraProvider = ({
                 globalCss: {
                     [varRoot]: {
                         ...defaultConfig.globalCss?.html,
-                        borderRadius: "container",
+                        borderRadius: "xl",
                         shadow: "sm",
                         border: "none",
                     },

package/src/components/Checkout.tsx

@@ -14,7 +14,6 @@ import posthog from "posthog-js";
 type ICheckoutContext = {
     handleClose: () => void;
     enableExchange?: SupportedExchanges[];
-    enableCardBuy?: boolean;
     cexBridgeChainMapping?: Record<number, number>;
     enforceFlow?: EnforceFlow;
 };
@@ -28,7 +27,6 @@ const Checkout = ({
         chainIdOut,
         theme,
         enableExchange,
-        enableCardBuy,
         cexBridgeChainMapping,
         recipient,
         enforceFlow,
@@ -91,7 +89,6 @@ const Checkout = ({
             value={{
                 handleClose,
                 enableExchange,
-                enableCardBuy,
                 cexBridgeChainMapping,
                 enforceFlow,
             }}

package/src/components/CurrencySwapDisplay.tsx

@@ -1,11 +1,4 @@
-import {
-    Box,
-    chakra,
-    Flex,
-    Skeleton,
-    SkeletonCircle,
-    Text,
-} from "@chakra-ui/react";
+import { Box, chakra, Flex, Text } from "@chakra-ui/react";
 import { ChevronRightIcon } from "lucide-react";
 import { Token } from "@/util/common";
 import {
@@ -191,16 +184,6 @@ const DepositItem = ({
     );
 };
 
-const SwapItemSkeleton = ({ size = 24 }: { size?: number }) => (
-    <Flex align="center" gap={2}>
-        <SkeletonCircle size={`${size}px`} />
-        <Box>
-            <Skeleton height="12px" width="48px" mb={1} borderRadius="card" />
-            <Skeleton height="12px" width="36px" borderRadius="card" />
-        </Box>
-    </Flex>
-);
-
 const CurrencySwapDisplay = ({
     tokenIn,
     tokenOut,
@@ -216,50 +199,30 @@ const CurrencySwapDisplay = ({
     isNontokenized?: boolean;
     size?: number;
 }) => {
-    const isLoading = !tokenIn || !tokenOut;
-
     return (
         <SwapWrapper>
-            {isLoading ? (
-                <>
-                    <SwapItemSkeleton size={size} />
-                    <ChevronRightIcon
-                        color={"var(--chakra-colors-fg-muted)"}
-                        width={"16px"}
-                        height={"16px"}
-                    />
-                    <SwapItemSkeleton size={size} />
-                </>
+            <SwapItem
+                token={tokenIn}
+                chainId={chainIdIn}
+                title={"You send"}
+                subTitle={tokenIn?.symbol}
+                size={size}
+            />
+            <ChevronRightIcon
+                color={"#707070"}
+                width={"16px"}
+                height={"16px"}
+            />
+            {isNontokenized && tokenOut?.protocol ? (
+                <DepositItem token={tokenOut} chainId={chainIdOut} size={size} />
             ) : (
-                <>
-                    <SwapItem
-                        token={tokenIn}
-                        chainId={chainIdIn}
-                        title={"You send"}
-                        subTitle={tokenIn?.symbol}
-                        size={size}
-                    />
-                    <ChevronRightIcon
-                        color={"var(--chakra-colors-fg-muted)"}
-                        width={"16px"}
-                        height={"16px"}
-                    />
-                    {isNontokenized && tokenOut?.protocol ? (
-                        <DepositItem
-                            token={tokenOut}
-                            chainId={chainIdOut}
-                            size={size}
-                        />
-                    ) : (
-                        <SwapItem
-                            token={tokenOut}
-                            chainId={chainIdOut}
-                            title={"You receive"}
-                            subTitle={tokenOut?.symbol}
-                            size={size}
-                        />
-                    )}
-                </>
+                <SwapItem
+                    token={tokenOut}
+                    chainId={chainIdOut}
+                    title={"You receive"}
+                    subTitle={tokenOut?.symbol}
+                    size={size}
+                />
             )}
         </SwapWrapper>
     );

package/src/components/DepositProcessing.tsx

@@ -50,7 +50,7 @@ const DepositProcessing = ({
         <Box
             border="1px solid"
             borderColor="border.subtle"
-            borderRadius="card"
+            borderRadius="12px"
             width="100%"
             bg="bg"
         >

package/src/components/ExchangeConfirmSecurity.tsx

@@ -95,7 +95,7 @@ const ConfirmExchangeStep = ({
                 />
 
                 <Helper>
-                    <Image src={LogoSvg} color={"fg.muted"} w={"24px"} />
+                    <Image src={LogoSvg} color={"gray"} w={"24px"} />
                     Enso securely encrypts all user data.
                 </Helper>
             </Box>

package/src/components/QuoteParameters.tsx

@@ -25,7 +25,7 @@ import {
     SupportedChainId,
 } from "@/util/constants";
 import { useMemo } from "react";
-import { EXCHANGE_ICON_BY_TYPE } from "@/components/steps/shared/exchangeIntegration";
+import { EXCHANGE_ICON_BY_TYPE } from "@/components/steps/ExchangeFlow";
 
 export const ERROR_MSG =
     "Swap not found for a required underlying of defi route, please make sure your amount is within an acceptable range";

package/src/components/TransactionDetailRow.tsx

@@ -12,7 +12,7 @@ export const DetailRowContainer = chakra("div", {
         alignItems: "center",
         h: "36px",
         p: "8px 12px",
-        borderRadius: "card",
+        borderRadius: "8px",
         bg: "bg",
         w: "100%",
     },
@@ -57,7 +57,7 @@ export const TransactionDetailRow = () => {
             <Box
                 width="100%"
                 bg="bg.subtle"
-                borderRadius="card"
+                borderRadius="md"
                 padding="12px"
                 transition="all 0.2s"
             >

package/src/components/cards/ExchangeCard.tsx

@@ -32,7 +32,7 @@ const ExchangeCard: FC<IProps> = ({
     ),
     low: <Tag>Low Balance</Tag>,
     connected: (
-      <Icon as={CheckIcon} color="success" width={"16px"} height={"16px"} />
+      <Icon as={CheckIcon} color="green" width={"16px"} height={"16px"} />
     ),
     none: null,
   };

package/src/components/cards/OptionCard.tsx

@@ -39,7 +39,6 @@ const OptionCard = ({
                         <Image
                             w={"32px"}
                             h={"32px"}
-                            objectFit={"contain"}
                             borderRadius={"full"}
                             position={"relative"}
                             zIndex={index}
@@ -50,7 +49,7 @@ const OptionCard = ({
                 </Box>
                 <Icon
                     as={ChevronRight}
-                    color="fg.muted"
+                    color="gray"
                     width={"16px"}
                     height={"16px"}
                 />

package/src/components/cards/WalletCard.tsx

@@ -85,7 +85,7 @@ const WalletCard = ({
                     {status === WalletStatus.CONNECTED && (
                         <Icon
                             as={CheckIcon}
-                            color="success"
+                            color="green"
                             width={"16px"}
                             height={"16px"}
                         />

package/src/components/modal.tsx

@@ -35,11 +35,11 @@ export const ModalWrapper = chakra("div", {
         maxWidth: "374px",
         justifyContent: "center",
         alignItems: "center",
-        borderRadius: "card",
+        borderRadius: "lg",
         border: "1px solid",
-        borderColor: "border",
+        borderColor: "gray.300",
         padding: "16px",
-        backgroundColor: "bg",
+        backgroundColor: "white",
     },
 });