@ensofinance/checkout-widget 0.1.8 → 1.0.1

package/src/components/steps/shared/TrackUserOpStep.tsx

@@ -45,15 +45,15 @@ const PhaseIndicator = ({
                         borderRadius="full"
                         bg={
                             index < currentPhase
-                                ? "green.500"
+                                ? "success"
                                 : index === currentPhase
-                                  ? "blue.500"
-                                  : "gray.300"
+                                  ? "primary"
+                                  : "border"
                         }
                         display="flex"
                         alignItems="center"
                         justifyContent="center"
-                        color="white"
+                        color="bg"
                         fontSize="xs"
                         fontWeight="bold"
                     >
@@ -83,6 +83,7 @@ const TrackUserOpStep = ({
 }: Props) => {
     const { chainIdIn, chainIdOut, tokenInData } = useAppDetails();
     const amountIn = useAppStore((s) => s.amountIn);
+    const ensoApiToken = useAppStore((s) => s.ensoApiToken);
 
     const isCrosschain = useMemo(
         () => !!chainIdIn && !!chainIdOut && chainIdIn !== chainIdOut,
@@ -128,6 +129,7 @@ const TrackUserOpStep = ({
                         method: "POST",
                         headers: {
                             "Content-Type": "application/json",
+                            Authorization: `Bearer ${ensoApiToken}`,
                         },
                         body: JSON.stringify({
                             userOperationData: {
@@ -137,10 +139,12 @@ const TrackUserOpStep = ({
                                 factoryData: userOp.factoryData,
                                 callData: userOp.callData,
                                 callGasLimit: userOp.callGasLimit,
-                                verificationGasLimit: userOp.verificationGasLimit,
+                                verificationGasLimit:
+                                    userOp.verificationGasLimit,
                                 preVerificationGas: userOp.preVerificationGas,
                                 maxFeePerGas: userOp.maxFeePerGas,
-                                maxPriorityFeePerGas: userOp.maxPriorityFeePerGas,
+                                maxPriorityFeePerGas:
+                                    userOp.maxPriorityFeePerGas,
                                 paymaster: userOp.paymaster,
                                 paymasterData: userOp.paymasterData,
                                 paymasterVerificationGasLimit:
@@ -182,7 +186,16 @@ const TrackUserOpStep = ({
         };
 
         sendUserOpToTracker();
-    }, [amountIn, chainIdIn, isCrosschain, pendingMessage, status, tokenInData, userOp]);
+    }, [
+        amountIn,
+        ensoApiToken,
+        chainIdIn,
+        isCrosschain,
+        pendingMessage,
+        status,
+        tokenInData,
+        userOp,
+    ]);
 
     // Track operation status
     useEffect(() => {
@@ -218,7 +231,9 @@ const TrackUserOpStep = ({
                         setPhase("completed");
                     }
                 } else if (
-                    ["failed", "failed_permanent"].includes(data.operation?.status)
+                    ["failed", "failed_permanent"].includes(
+                        data.operation?.status,
+                    )
                 ) {
                     setStatus("failed");
                     setMessage(
@@ -248,7 +263,12 @@ const TrackUserOpStep = ({
         }
 
         // When LayerZero shows DELIVERED, verify destination execution with Enso API
-        if (lzStatus.isComplete && !destinationVerified && txHash && chainIdIn) {
+        if (
+            lzStatus.isComplete &&
+            !destinationVerified &&
+            txHash &&
+            chainIdIn
+        ) {
             const verifyDestination = async () => {
                 try {
                     const res = await fetch(
@@ -445,15 +465,20 @@ const TrackUserOpStep = ({
                                     color="fg.muted"
                                     maxWidth="280px"
                                 >
-                                    Your operation is being processed – no action is
-                                    required from you.
+                                    Your operation is being processed – no
+                                    action is required from you.
                                 </Text>
                             )}
                     </Box>
                 </Box>
 
                 {/* Status Table */}
-                <Table.Root key="status" size="sm" variant="outline" width="100%">
+                <Table.Root
+                    key="status"
+                    size="sm"
+                    variant="outline"
+                    width="100%"
+                >
                     <Table.Body>
                         <Table.Row>
                             <Table.Cell>Status</Table.Cell>
@@ -537,7 +562,7 @@ const TrackUserOpStep = ({
                                 >
                                     <Text
                                         fontSize="sm"
-                                        color="blue.500"
+                                        color="primary"
                                         cursor="pointer"
                                         onClick={() =>
                                             window.open(
@@ -561,7 +586,7 @@ const TrackUserOpStep = ({
                                 >
                                     <Text
                                         fontSize="sm"
-                                        color="blue.500"
+                                        color="primary"
                                         cursor="pointer"
                                         onClick={() => {
                                             const explorer =
@@ -599,7 +624,7 @@ const TrackUserOpStep = ({
                                     textAlign="end"
                                     justifyContent="end"
                                 >
-                                    <Text fontSize="sm" color="orange.500">
+                                    <Text fontSize="sm" color="warning">
                                         Funds refunded to smart account
                                     </Text>
                                 </Table.Cell>

package/src/enso-api/custom-instance.ts

@@ -21,7 +21,11 @@ export const useCustomClient = <T>(): CustomClient<T> => {
         // const response = await fetch(url.replace("https://api.enso.build", "http://localhost:3000") + "?" + new URLSearchParams(params), {
         const response = await fetch(url + "?" + new URLSearchParams(params), {
             method,
-            headers: { ...data?.headers, Authorization: `Bearer ${token}` },
+            headers: {
+                ...data?.headers,
+                Authorization: `Bearer ${token}`,
+                "x-enso-widget": "checkout",
+            },
             ...(data ? { body: JSON.stringify(data) } : {}),
         });
 

package/src/util/meld-hooks.tsx

@@ -267,45 +267,6 @@ const TERMINAL_MELD_STATUSES = new Set<MeldTransactionStatus>([
     "AUTHORIZATION_EXPIRED",
 ]);
 
-/**
- * Hook to track a MELD transaction
- */
-export function useMeldTransaction(sessionId: string | null) {
-    return useQuery({
-        queryKey: ["meld-transaction", sessionId],
-        queryFn: async (): Promise<MeldTransaction | null> => {
-            if (!sessionId) return null;
-
-            const res = await fetch(`${MELD_BFF_URL}/transaction/${sessionId}`);
-
-            if (!res.ok) {
-                if (res.status === 404) {
-                    return null; // Transaction not found yet
-                }
-                const error = await res
-                    .json()
-                    .catch(() => ({ error: "Failed to fetch transaction" }));
-                throw new Error(
-                    error.error ||
-                        error.message ||
-                        "Failed to fetch transaction",
-                );
-            }
-
-            return res.json();
-        },
-        enabled: !!sessionId,
-        refetchInterval: (query) => {
-            const data = query.state.data;
-            if (data?.status && TERMINAL_MELD_STATUSES.has(data.status)) {
-                return false;
-            }
-            return 3000; // Poll every 3 seconds
-        },
-        staleTime: 0, // Always refetch
-    });
-}
-
 /**
  * Terminal status check
  */