@b3dotfun/sdk 0.1.66 → 0.1.68

package/src/anyspend/react/components/checkout/ShippingSelector.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
+import type { ShippingOption } from "../../../types/forms";
+
+interface ShippingSelectorProps {
+  options: ShippingOption[];
+  selectedId: string | null;
+  onSelect: (option: ShippingOption) => void;
+  tokenSymbol?: string;
+  tokenDecimals?: number;
+  className?: string;
+}
+
+function formatAmount(amount: string, decimals: number, symbol: string): string {
+  const bi = safeBigInt(amount);
+  if (bi === BigInt(0)) return "Free";
+  return `${formatTokenAmount(bi, decimals)} ${symbol}`;
+}
+
+export function ShippingSelector({
+  options,
+  selectedId,
+  onSelect,
+  tokenSymbol = "",
+  tokenDecimals = 6,
+  className,
+}: ShippingSelectorProps) {
+  if (options.length === 0) return null;
+
+  return (
+    <div className={cn("anyspend-shipping-selector space-y-2", className)}>
+      <div className="anyspend-shipping-title text-sm font-semibold text-gray-900 dark:text-gray-100">Shipping</div>
+      <div className="anyspend-shipping-options space-y-2">
+        {options.map(option => (
+          <label
+            key={option.id}
+            className={cn(
+              "anyspend-shipping-option flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors",
+              selectedId === option.id
+                ? "anyspend-shipping-option-selected border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20"
+                : "border-gray-200 bg-white hover:border-gray-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:border-neutral-500",
+            )}
+          >
+            <div className="flex items-center gap-3">
+              <input
+                type="radio"
+                name="shipping"
+                checked={selectedId === option.id}
+                onChange={() => onSelect(option)}
+                className="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500"
+              />
+              <div>
+                <div className="anyspend-shipping-option-name text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {option.name}
+                </div>
+                {(option.description || option.estimated_days) && (
+                  <div className="anyspend-shipping-option-detail text-xs text-gray-500 dark:text-gray-400">
+                    {option.description || (option.estimated_days && `${option.estimated_days}`)}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100">
+              {formatAmount(option.amount, tokenDecimals, tokenSymbol)}
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/anyspend/react/components/common/ConnectWalletPayment.tsx

@@ -7,6 +7,7 @@ import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
@@ -46,6 +47,8 @@ export default function ConnectWalletPayment({
       ? connectedSmartWallet?.getAccount()?.address
       : connectedEOAWallet?.getAccount()?.address;
 
+  const { slots } = useAnySpendCustomization();
+
   const srcToken = order.metadata.srcToken;
   const dstToken = order.metadata.dstToken;
 
@@ -62,6 +65,31 @@ export default function ConnectWalletPayment({
     return <div>Loading...</div>;
   }
 
+  const paymentLabel =
+    order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+      ? "Pay from Phantom Wallet"
+      : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+        ? "Pay from Global Account"
+        : "Pay from Connected Wallet";
+
+  const connectedAddress =
+    order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+      ? phantomWalletAddress
+      : connectedEvmAddress;
+
+  if (slots.connectWalletButton) {
+    return (
+      <div className="flex w-full flex-col items-center gap-6">
+        {slots.connectWalletButton({
+          onPayment,
+          txLoading,
+          connectedAddress: connectedAddress || undefined,
+          paymentLabel,
+        })}
+      </div>
+    );
+  }
+
   return (
     <div className="flex w-full flex-col items-center gap-6">
       {/* Payment Button */}
@@ -85,13 +113,7 @@ export default function ConnectWalletPayment({
             </>
           ) : (
             <>
-              <span className="whitespace-nowrap pl-4 text-lg md:text-sm">
-                {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
-                  ? "Pay from Phantom Wallet"
-                  : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
-                    ? "Pay from Global Account"
-                    : "Pay from Connected Wallet"}
-              </span>
+              <span className="whitespace-nowrap pl-4 text-lg md:text-sm">{paymentLabel}</span>
               <ChevronRight className="h-4 w-4" />
             </>
           )}

package/src/anyspend/react/components/common/CryptoPaySection.tsx

@@ -108,7 +108,7 @@ export function CryptoPaySection({
         <button
           className={
             classes?.paymentMethodButton ||
-            "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+            "text-as-tertiary flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
           }
           onClick={onSelectCryptoPaymentMethod}
         >

package/src/anyspend/react/components/common/CryptoPaymentMethodDisplay.tsx

@@ -25,7 +25,7 @@ export function CryptoPaymentMethodDisplay({
     return (
       <>
         {connectedAddress ? (
-          <span className="text-as-tertiarry whitespace-nowrap">
+          <span className="text-as-tertiary whitespace-nowrap">
             {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress)}
           </span>
         ) : (

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -85,11 +85,11 @@ export function CryptoReceiveSection({
         </div>
         {effectiveRecipientAddress ? (
           <button
-            className={classes?.recipientButton || "text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"}
+            className={classes?.recipientButton || "text-as-tertiary flex h-7 items-center gap-2 rounded-lg"}
             onClick={onSelectRecipient}
           >
             <>
-              <span className={classes?.recipientValue || "text-as-tertiarry flex items-center gap-1 text-sm"}>
+              <span className={classes?.recipientValue || "text-as-tertiary flex items-center gap-1 text-sm"}>
                 {customRecipientLabel ||
                   (recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || ""))}
               </span>

package/src/anyspend/react/components/common/OrderDetailsCollapsible.tsx

@@ -63,7 +63,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
       ? "0"
       : order.type === "custom" || order.type === "deposit_first"
         ? order.payload.amount?.toString() || "0"
-        : order.payload.expectedDstAmount.toString();
+        : order.payload.expectedDstAmount?.toString() || "0";
 
   const finalFormattedExpectedDstAmount =
     formattedExpectedDstAmount || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
@@ -86,7 +86,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
           <div className="order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm">
             {/* Recipient Section */}
             <div className="order-details-recipient-section flex w-full justify-between gap-4">
-              <div className="order-details-recipient-label text-as-tertiarry">Recipient</div>
+              <div className="order-details-recipient-label text-as-tertiary">Recipient</div>
               <div className="order-details-recipient-info flex flex-col items-end gap-1">
                 {recipientName && (
                   <div className="order-details-recipient-name text-as-primary font-semibold">{recipientName}</div>
@@ -108,7 +108,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
 
             {/* Expected Amount/Action Section */}
             <div className="order-details-expected-section flex w-full items-start justify-between gap-2">
-              <div className="order-details-expected-label text-as-tertiarry shrink-0">
+              <div className="order-details-expected-label text-as-tertiary shrink-0">
                 {order.type === "swap" ||
                 order.type === "deposit_first" ||
                 order.type === "mint_nft" ||
@@ -174,7 +174,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                 <div className="order-details-divider divider w-full" />
                 {/* Points Section */}
                 <div className="order-details-points-section flex w-full justify-between gap-4">
-                  <div className="order-details-points-label text-as-tertiarry">Points</div>
+                  <div className="order-details-points-label text-as-tertiary">Points</div>
                   <div className="order-details-points-value text-as-brand font-semibold">
                     +{formatNumber(points)} pts
                   </div>
@@ -186,7 +186,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
 
             {/* Order ID / Total Section */}
             <div className="order-details-id-total-section flex w-full justify-between gap-4">
-              <div className="order-details-id-total-label text-as-tertiarry">
+              <div className="order-details-id-total-label text-as-tertiary">
                 {showTotal ? "Total (included fee)" : "Order ID"}
               </div>
               <div className="order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap">

package/src/anyspend/react/components/common/OrderStatus.tsx

@@ -1,11 +1,20 @@
 import { getStatusDisplay } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { useSearchParams } from "@b3dotfun/sdk/shared/react";
-import { Check, X } from "lucide-react";
-import { memo } from "react";
+import { Clock, Loader2, RotateCcw, X } from "lucide-react";
+import React, { memo, useEffect, useRef } from "react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { Step, StepProgress } from "./StepProgress";
 
+/** Map order status to its step index in the StepProgress. -1 = not a step state. */
+function getStepIndex(status: string): number {
+  if (["waiting_stripe_payment", "scanning_deposit_transaction"].includes(status)) return 0;
+  if (["quoting_after_deposit", "sending_token_from_vault", "relay", "executing"].includes(status)) return 1;
+  return -1;
+}
+
 export const OrderStatus = memo(function OrderStatus({
   order,
   selectedCryptoPaymentMethod,
@@ -13,63 +22,160 @@ export const OrderStatus = memo(function OrderStatus({
   order: components["schemas"]["Order"];
   selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }) {
-  const showCheck = order.status === "executed" || order.status === "quoting_after_deposit";
-  const { text, status: displayStatus, description } = getStatusDisplay(order);
+  const { text: defaultText, description: defaultDescription } = getStatusDisplay(order);
+  const { content, slots } = useAnySpendCustomization();
   const searchParams = useSearchParams();
   const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
 
-  console.log("OrderStatus", displayStatus);
-  console.log("OrderStatus", order);
+  const currentStepIndex = getStepIndex(order.status);
+  const prevStepIndexRef = useRef<number>(currentStepIndex);
+  const shouldAnimateCheck = currentStepIndex > prevStepIndexRef.current;
+
+  useEffect(() => {
+    prevStepIndexRef.current = currentStepIndex;
+  }, [currentStepIndex]);
+
+  // Resolve content overrides based on order status
+  let text = defaultText;
+  let description: string | React.ReactNode = defaultDescription;
+
+  if (order.status === "executed") {
+    if (content.successTitle && typeof content.successTitle === "string") text = content.successTitle;
+    if (content.successDescription) description = content.successDescription;
+  } else if (order.status === "failure") {
+    if (content.failureTitle && typeof content.failureTitle === "string") text = content.failureTitle;
+    if (content.failureDescription) description = content.failureDescription;
+  } else if (order.status === "expired") {
+    if (content.expiredTitle && typeof content.expiredTitle === "string") text = content.expiredTitle;
+    if (content.expiredDescription) description = content.expiredDescription;
+  } else if (order.status === "refunded") {
+    if (content.refundedTitle && typeof content.refundedTitle === "string") text = content.refundedTitle;
+    if (content.refundedDescription) description = content.refundedDescription;
+  } else if (content.processingTitle || content.processingDescription) {
+    if (content.processingTitle && typeof content.processingTitle === "string") text = content.processingTitle;
+    if (content.processingDescription) description = content.processingDescription;
+  }
 
   const paymentSteps: Step[] = [
-    {
-      id: 1,
-      title: text,
-      description: description,
-    },
-    {
-      id: 2,
-      title: text,
-      description: description,
-    },
+    { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+    { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
   ];
 
-  if (["waiting_stripe_payment", "scanning_deposit_transaction"].includes(order.status)) {
-    // hide step if order is scanning_deposit_transaction and crypto payment method is transfer_crypto
+  if (currentStepIndex === 0) {
     if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {
       return <StepProgress steps={paymentSteps} currentStepIndex={0} />;
     }
   }
 
-  if (["relay", "executing", "sending_token_from_vault"].includes(order.status)) {
-    return <StepProgress steps={paymentSteps} currentStepIndex={1} />;
+  if (currentStepIndex === 1) {
+    return <StepProgress steps={paymentSteps} currentStepIndex={1} animateCompletedSteps={shouldAnimateCheck} />;
+  }
+
+  if (order.status === "refunding") {
+    return (
+      <div className="flex items-center justify-center gap-2">
+        <div className="flex flex-col items-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/15">
+            <Loader2 className="h-6 w-6 animate-spin text-amber-500" />
+          </div>
+          <h2 className="text-as-primary mt-4 text-xl font-semibold">{text}</h2>
+          <div className="text-as-tertiary mt-1 text-center text-sm">{description}</div>
+        </div>
+      </div>
+    );
   }
 
   if (selectedCryptoPaymentMethod === "transfer_crypto" && order.status === "scanning_deposit_transaction") {
     return null;
   }
 
-  return (
-    <div className="flex items-center justify-center gap-2">
-      {showCheck ? (
+  if (order.status === "executed") {
+    return (
+      <div className="flex items-center justify-center gap-2">
+        <div className="flex flex-col items-center">
+          <AnimatedCheckmark className="h-14 w-14" />
+          <h2 className="text-as-primary mt-4 text-xl font-semibold">{content.successTitle || text}</h2>
+          <div className="text-as-tertiary mt-1 text-center text-sm">{content.successDescription || description}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (order.status === "expired") {
+    if (slots.errorScreen) {
+      return (
+        <>
+          {slots.errorScreen({
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            errorType: "expired",
+            orderId: order.id,
+          })}
+        </>
+      );
+    }
+    return (
+      <div className="flex items-center justify-center gap-2">
         <div className="flex flex-col items-center">
-          <div className={`bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`}>
-            <Check className="text-as-content-icon-success h-6 w-6" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
+            <Clock className="h-5 w-5 text-amber-500" />
           </div>
           <h2 className="text-as-primary mt-4 text-xl font-semibold">{text}</h2>
-          <div className="text-as-tertiarry mt-1 text-center">{description}</div>
+          <div className="text-as-tertiary mt-1 text-center text-sm">{description}</div>
         </div>
-      ) : (
+      </div>
+    );
+  }
+
+  if (order.status === "refunded") {
+    if (slots.errorScreen) {
+      return (
+        <>
+          {slots.errorScreen({
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            errorType: "refunded",
+            orderId: order.id,
+          })}
+        </>
+      );
+    }
+    return (
+      <div className="flex items-center justify-center gap-2">
         <div className="flex flex-col items-center">
-          <div className="bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full text-base">
-            <X className="text-as-content-icon-error h-5 w-5" />
-          </div>
-          <div className="font-sf-rounded text-as-content-primary mt-4 text-lg font-semibold">{text}</div>
-          <div className="text-as-tertiarry text-center" style={{ whiteSpace: "normal" }}>
-            {description}
+          <div className="bg-as-surface-secondary flex h-10 w-10 items-center justify-center rounded-full">
+            <RotateCcw className="text-as-secondary h-5 w-5" />
           </div>
+          <h2 className="text-as-primary mt-4 text-xl font-semibold">{text}</h2>
+          <div className="text-as-tertiary mt-1 text-center text-sm">{description}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (slots.errorScreen) {
+    return (
+      <>
+        {slots.errorScreen({
+          title: text,
+          description: typeof description === "string" ? description : defaultDescription || "",
+          errorType: "failure",
+          orderId: order.id,
+        })}
+      </>
+    );
+  }
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <div className="flex flex-col items-center">
+        <div className="bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full">
+          <X className="text-as-content-icon-error h-5 w-5" />
+        </div>
+        <h2 className="text-as-primary mt-4 text-xl font-semibold">{text}</h2>
+        <div className="text-as-tertiary mt-1 text-center text-sm" style={{ whiteSpace: "normal" }}>
+          {description}
         </div>
-      )}
+      </div>
     </div>
   );
 });

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -142,9 +142,9 @@ export function PanelOnramp({
       {/* Pay Section */}
       <div className="border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4">
         <div className="flex h-7 w-full items-center justify-between">
-          <span className="text-as-tertiarry flex items-center text-sm font-bold">Pay</span>
+          <span className="text-as-tertiary flex items-center text-sm font-bold">Pay</span>
           <button
-            className="text-as-tertiarry flex h-7 items-center gap-1 text-sm"
+            className="text-as-tertiary flex h-7 items-center gap-1 text-sm"
             onClick={() => setActivePanel(fiatPaymentMethodIndex)} // PanelView.FIAT_PAYMENT_METHOD
           >
             {(() => {
@@ -175,7 +175,7 @@ export function PanelOnramp({
         {/* Amount Input */}
         <div className="flex items-center justify-center pb-2 pt-8">
           <div className="flex gap-1">
-            <span className="text-as-tertiarry text-2xl font-bold">$</span>
+            <span className="text-as-tertiary text-2xl font-bold">$</span>
             <Input
               ref={amountInputRef}
               type="text"
@@ -227,10 +227,10 @@ export function PanelOnramp({
       {/* Recipient Section */}
       <div className="border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4">
         <div className="flex w-full items-center justify-between gap-2">
-          <span className="text-as-tertiarry flex items-center text-sm">Recipient</span>
+          <span className="text-as-tertiary flex items-center text-sm">Recipient</span>
           {_recipientAddress ? (
             <button
-              className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
+              className="text-as-tertiary flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
               onClick={() => setActivePanel(recipientSelectionPanelIndex)} // Recipient selection panel
             >
               <span className="text-sm">
@@ -241,7 +241,7 @@ export function PanelOnramp({
             </button>
           ) : (
             <button
-              className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
+              className="text-as-tertiary flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
               onClick={() => setActivePanel(5)} // Recipient selection panel
             >
               <Wallet className="text-as-brand" size={16} />
@@ -254,13 +254,13 @@ export function PanelOnramp({
         <div className="divider w-full" />
 
         <div className="flex items-center justify-between gap-4">
-          <span className="text-as-tertiarry text-sm">Expected to receive</span>
+          <span className="text-as-tertiary text-sm">Expected to receive</span>
           <div className="flex flex-wrap items-center justify-end gap-1">
             <span className="text-as-primary font-semibold">
               {destinationAmount || "0"} {dstTokenSymbol || destinationToken?.symbol || ""}
             </span>
             <div className="flex items-center gap-1">
-              <span className="text-as-tertiarry text-sm">
+              <span className="text-as-tertiary text-sm">
                 on {destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""}
               </span>
               {destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (
@@ -275,7 +275,7 @@ export function PanelOnramp({
         <div className="">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-1.5">
-              <span className="text-as-tertiarry text-sm">Total</span>
+              <span className="text-as-tertiary text-sm">Total</span>
               {anyspendQuote?.data?.fee && onShowFeeDetail && (
                 <button
                   onClick={onShowFeeDetail}

package/src/anyspend/react/components/common/PaySection.tsx

@@ -82,7 +82,7 @@ export function CryptoPaySection({
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
         <button
-          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          className="text-as-tertiary flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
           onClick={onSelectCryptoPaymentMethod}
         >
           {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (

package/src/anyspend/react/components/common/StepProgress.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { CheckIcon } from "lucide-react";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
 
 export interface Step {
   id: string | number;
@@ -13,9 +13,18 @@ export interface StepProgressProps {
   steps: Step[];
   currentStepIndex: number;
   className?: string;
+  /** When false, completed step checkmarks render in their static (post-animation) state.
+   *  Use false when the step was already completed in a previous render (e.g. transitioning
+   *  between sub-states within the same step). Defaults to true. */
+  animateCompletedSteps?: boolean;
 }
 
-export function StepProgress({ steps, currentStepIndex, className = "" }: StepProgressProps) {
+export function StepProgress({
+  steps,
+  currentStepIndex,
+  className = "",
+  animateCompletedSteps = true,
+}: StepProgressProps) {
   const currentStep = steps[currentStepIndex];
 
   return (
@@ -25,32 +34,34 @@ export function StepProgress({ steps, currentStepIndex, className = "" }: StepPr
         {steps.map((_, index) => (
           <>
             <div key={index} className="flex items-center">
-              <motion.div
-                initial={{ scale: 0.8, opacity: 0 }}
-                animate={{ scale: 1, opacity: 1 }}
-                transition={{ delay: index * 0.2 }}
-                className={`relative flex h-10 w-10 items-center justify-center rounded-full ${
-                  index < currentStepIndex
-                    ? "bg-as-success-secondary" // Completed step
-                    : index === currentStepIndex
-                      ? "border-as-border-secondary border-[3px]" // Current step
-                      : "border-as-border-secondary border-[3px]" // Future step
-                } `}
-              >
-                {index < currentStepIndex ? (
-                  // Completed step - show check icon
-                  <CheckIcon className="text-as-content-icon-success h-6 w-6" />
-                ) : index === currentStepIndex ? (
-                  // Current step - show spinning border and step number
-                  <>
-                    <div className="border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" />
-                    <span className="text-as-primary font-semibold">{index + 1}</span>
-                  </>
-                ) : (
-                  // Future step - show step number with disabled styling
-                  <span className="text-as-content-disabled font-semibold">{index + 1}</span>
-                )}
-              </motion.div>
+              {index < currentStepIndex ? (
+                // Completed step - checkmark replaces the whole circle
+                <motion.div
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ delay: index * 0.2 }}
+                >
+                  <AnimatedCheckmark className="h-10 w-10" strokeWidth={2.5} static={!animateCompletedSteps} />
+                </motion.div>
+              ) : (
+                <motion.div
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ delay: index * 0.2 }}
+                  className={`border-as-border-secondary relative flex h-10 w-10 items-center justify-center rounded-full border-[3px]`}
+                >
+                  {index === currentStepIndex ? (
+                    // Current step - show spinning border and step number
+                    <>
+                      <div className="border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" />
+                      <span className="text-as-primary font-semibold">{index + 1}</span>
+                    </>
+                  ) : (
+                    // Future step - show step number with disabled styling
+                    <span className="text-as-content-disabled font-semibold">{index + 1}</span>
+                  )}
+                </motion.div>
+              )}
             </div>
             {/* Connector dots - don't show after last step */}
             {index < steps.length - 1 && (
@@ -73,32 +84,9 @@ export function StepProgress({ steps, currentStepIndex, className = "" }: StepPr
           className="text-center"
         >
           <h2 className="text-as-primary text-xl font-semibold">{currentStep.title}</h2>
-          {currentStep.description && <p className="text-as-primary/50 mt-1 text-sm">{currentStep.description}</p>}
+          {currentStep.description && <p className="text-as-tertiary mt-1 text-sm">{currentStep.description}</p>}
         </motion.div>
       )}
     </div>
   );
 }
-
-// Example usage:
-/*
-// Basic 3-step process
-const paymentSteps = [
-  { id: 1, title: "Connect Wallet", description: "Connect your wallet to continue" },
-  { id: 2, title: "Confirm Transaction", description: "Review and confirm your transaction" },
-  { id: 3, title: "Complete Payment", description: "Finalize your transaction" }
-];
-
-// 5-step onboarding process
-const onboardingSteps = [
-  { id: "signup", title: "Sign Up", description: "Create your account" },
-  { id: "verify", title: "Verify Email", description: "Check your email for verification" },
-  { id: "profile", title: "Setup Profile", description: "Complete your profile information" },
-  { id: "preferences", title: "Set Preferences", description: "Configure your settings" },
-  { id: "complete", title: "All Done!", description: "Welcome to the platform" }
-];
-
-// Usage in component:
-<StepProgress steps={paymentSteps} currentStepIndex={1} />
-<StepProgress steps={onboardingSteps} currentStepIndex={2} className="my-8" />
-*/