@b3dotfun/sdk 0.1.66-alpha.0 → 0.1.66-alpha.2

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

@@ -0,0 +1,91 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { Check, ExternalLink } from "lucide-react";
+import { motion } from "motion/react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CheckoutSuccessProps {
+  txHash?: string;
+  orderId?: string;
+  returnUrl?: string;
+  returnLabel?: string;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps) {
+  return (
+    <div className={cn("anyspend-checkout-success flex flex-col items-center py-8 text-center", classes?.successPanel)}>
+      {/* Animated success icon - scale + opacity entry */}
+      <motion.div
+        initial={{ scale: 0.3, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        className="anyspend-success-icon mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+      >
+        <Check className="h-8 w-8 text-green-600 dark:text-green-400" />
+      </motion.div>
+
+      {/* Staggered text entry */}
+      <motion.h2
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.2, ease: "easeOut" }}
+        className="anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100"
+      >
+        Payment Successful
+      </motion.h2>
+
+      <motion.p
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.35, ease: "easeOut" }}
+        className="anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400"
+      >
+        Your payment has been processed successfully.
+      </motion.p>
+
+      {txHash && (
+        <motion.a
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
+          href={`https://explorer.b3.fun/tx/${txHash}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="anyspend-success-tx-link mt-4 flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400"
+        >
+          View Transaction
+          <ExternalLink className="h-3.5 w-3.5" />
+        </motion.a>
+      )}
+
+      {!txHash && orderId && (
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
+          className="anyspend-success-order-id mt-4 text-xs text-gray-400 dark:text-gray-500"
+        >
+          Order ID: {orderId}
+        </motion.p>
+      )}
+
+      {returnUrl && (
+        <motion.a
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.6, ease: "easeOut" }}
+          href={returnUrl}
+          className={cn(
+            "anyspend-success-return-btn mt-6 inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors",
+            classes?.returnButton,
+          )}
+          style={{ backgroundColor: "#111827", color: "#fff" }}
+        >
+          {returnLabel || "Return to Store"}
+        </motion.a>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { TextShimmer, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CoinbaseCheckoutPanelProps {
+  recipientAddress: string;
+  destinationTokenAddress: string;
+  destinationTokenChainId: number;
+  totalAmount: string;
+  themeColor?: string;
+  onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
+  onError?: (error: Error) => void;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CoinbaseCheckoutPanel({
+  destinationTokenAddress,
+  destinationTokenChainId,
+  totalAmount,
+  themeColor,
+}: CoinbaseCheckoutPanelProps) {
+  const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+
+  const formattedAmount = useMemo(() => {
+    const decimals = tokenData?.decimals || 18;
+    return formatTokenAmount(BigInt(totalAmount), decimals);
+  }, [totalAmount, tokenData]);
+
+  const { coinbaseAvailablePaymentMethods, isLoading } = useGeoOnrampOptions(formattedAmount);
+
+  if (isLoading) {
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        className="anyspend-coinbase-loading flex items-center justify-center py-6"
+      >
+        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+        <TextShimmer duration={1.5} className="ml-2 text-sm">
+          Checking availability...
+        </TextShimmer>
+      </motion.div>
+    );
+  }
+
+  if (coinbaseAvailablePaymentMethods.length === 0) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25, ease: "easeOut" }}
+        className="anyspend-coinbase-unavailable py-4 text-center"
+      >
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Coinbase Pay is not available in your region for this amount.
+        </p>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+      className="anyspend-coinbase-panel flex flex-col gap-3"
+    >
+      <p className="anyspend-coinbase-description text-sm text-gray-600 dark:text-gray-400">
+        Pay with your Coinbase account using debit card, bank account, or crypto balance.
+      </p>
+      <button
+        className={cn(
+          "anyspend-coinbase-btn w-full rounded-xl px-4 py-3 text-sm font-semibold text-white transition-all",
+          "bg-[#0052FF] hover:bg-[#003ECF] active:scale-[0.98]",
+        )}
+        style={themeColor ? { backgroundColor: themeColor } : undefined}
+      >
+        Continue with Coinbase
+      </button>
+    </motion.div>
+  );
+}