@b3dotfun/sdk 0.0.40-test.6 → 0.0.41-test.0

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+
+interface PaymentMethodSwitchProps {
+  currentMethod: CryptoPaymentMethodType;
+  onMethodChange?: (method: CryptoPaymentMethodType) => void;
+}
+
+export function PaymentMethodSwitch({ currentMethod, onMethodChange }: PaymentMethodSwitchProps) {
+  if (!onMethodChange) return null;
+
+  const isTransferCrypto = currentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO;
+  const isConnectWallet =
+    currentMethod === CryptoPaymentMethodType.CONNECT_WALLET || currentMethod === CryptoPaymentMethodType.GLOBAL_WALLET;
+
+  // Only show switch if we're in one of the payment states
+  if (!isTransferCrypto && !isConnectWallet) return null;
+
+  const handleSwitch = () => {
+    if (isTransferCrypto) {
+      onMethodChange(CryptoPaymentMethodType.CONNECT_WALLET);
+    } else {
+      onMethodChange(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+    }
+  };
+
+  return (
+    <div className="order-details-payment-switch-container flex items-center justify-center">
+      <button
+        onClick={handleSwitch}
+        className="order-details-payment-switch-btn text-as-primary/60 hover:text-as-primary text-sm underline transition-colors"
+      >
+        {isTransferCrypto ? "Switch to Connect Wallet" : "Switch to scan / manually send crypto"}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { Button, ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ArrowDown } from "lucide-react";
+import Link from "next/link";
+
+interface PointsDetailPanelProps {
+  pointsAmount?: number;
+  onBack: () => void;
+}
+
+export function PointsDetailPanel({ pointsAmount = 0, onBack }: PointsDetailPanelProps) {
+  return (
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4">
+      <div className="flex w-full items-center justify-between">
+        <Button
+          variant="ghost"
+          onClick={onBack}
+          className="text-as-primary/70 hover:text-as-primary flex items-center gap-2"
+        >
+          <ArrowDown className="h-4 w-4 rotate-90" />
+          Back
+        </Button>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 text-center">
+        <h3 className="text-as-primary text-xl font-bold">Earn Points with Every Swap</h3>
+        <p className="text-as-primary/70 text-balance text-sm leading-relaxed">
+          You'll earn <span className="text-as-brand font-semibold">+{pointsAmount.toLocaleString()} points</span>{" "}
+          towards the{" "}
+          <Link href="https://anyspend.com/points" target="_blank" className="text-as-brand underline">
+            next AnySpend airdrop
+          </Link>{" "}
+          when you complete this transaction.
+        </p>
+        <div className="bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left">
+          <h4 className="text-as-primary mb-2 font-semibold">How it works:</h4>
+          <ul className="text-as-primary/70 space-y-1 text-sm">
+            <li>• Points are earned based on transaction volume</li>
+            <li>• Higher volume = more points</li>
+            <li>• Points contribute to future airdrops</li>
+            <li>• Keep swapping to maximize your rewards</li>
+          </ul>
+        </div>
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          onClick={onBack}
+          className={cn("as-main-button !bg-as-brand relative w-full")}
+          textClassName={cn("text-white")}
+        >
+          Back to Swap
+        </ShinyButton>
+      </div>
+    </div>
+  );
+}

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

@@ -11,7 +11,9 @@ import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { b3 } from "viem/chains";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
 
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
@@ -26,6 +28,7 @@ interface TransferCryptoDetailsProps {
   nft?: NFT;
   onBack: () => void;
   recipientName?: string;
+  onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
 
 export const TransferCryptoDetails = memo(function TransferCryptoDetails({
@@ -36,6 +39,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
   nft,
   onBack,
   recipientName,
+  onPaymentMethodChange,
 }: TransferCryptoDetailsProps) {
   const [timeLeft, setTimeLeft] = useState(0);
 
@@ -98,21 +102,21 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
   };
 
   return (
-    <div className="flex w-full flex-col gap-6">
+    <div className="order-transfer-crypto flex w-full flex-col gap-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="order-transfer-crypto-header flex items-center justify-between">
         <button
           onClick={onBack}
-          className="text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+          className="order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors"
         >
           <ChevronLeft size={24} className="text-as-quaternary" />
         </button>
 
-        <h2 className="text-as-primary text-lg font-semibold">Transfer crypto</h2>
+        <h2 className="order-transfer-crypto-title text-as-primary text-lg font-semibold">Transfer crypto</h2>
 
         {/* Countdown Timer */}
-        <div className="relative flex h-11 w-11 items-center justify-center">
-          <svg className="h-11 w-11 -rotate-90" viewBox="0 0 44 44">
+        <div className="order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center">
+          <svg className="order-transfer-crypto-timer-svg h-11 w-11 -rotate-90" viewBox="0 0 44 44">
             <circle
               cx="22"
               cy="22"
@@ -120,7 +124,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
               stroke="currentColor"
               strokeWidth="3"
               fill="none"
-              className="text-gray-200"
+              className="order-transfer-crypto-timer-bg text-gray-200"
             />
             <circle
               cx="22"
@@ -130,7 +134,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
               strokeWidth="3"
               fill="none"
               strokeLinecap="round"
-              className="text-blue-500"
+              className="order-transfer-crypto-timer-progress text-blue-500"
               strokeDasharray={`${2 * Math.PI * 18}`}
               strokeDashoffset={`${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`}
               style={{
@@ -138,57 +142,66 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
               }}
             />
           </svg>
-          <div className="absolute inset-0 flex items-center justify-center">
+          <div className="order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center">
             <span className="text-as-primary text-[10px] font-semibold">{formatTime(timeLeft)}</span>
           </div>
         </div>
       </div>
 
       {/* Main Content Cards */}
-      <div className="flex w-full flex-col gap-4">
+      <div className="order-transfer-crypto-content flex w-full flex-col gap-4">
         {/* Amount Card */}
-        <div className="flex items-center gap-4">
-          <div className="w-full">
-            <span className="text-as-content-secondary text-sm font-medium">Amount</span>
-            <div className="border-as-border-primary rounded-lg border p-2 shadow-sm">
+        <div className="order-transfer-crypto-cards flex items-center gap-4">
+          <div className="order-transfer-crypto-amount-card w-full">
+            <span className="order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium">
+              Amount
+            </span>
+            <div className="order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm">
               <CopyToClipboard
                 text={roundedUpSrcAmount || ""}
                 onCopy={() => {
                   toast.success("Amount copied to clipboard");
                 }}
               >
-                <div className="flex cursor-pointer items-center justify-between gap-2">
-                  <strong className="text-as-primary font-semibold">
+                <div className="order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2">
+                  <strong className="order-transfer-crypto-amount-text text-as-primary font-semibold">
                     {roundedUpSrcAmount} {srcToken.symbol}
                   </strong>
-                  <Copy className="text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" />
+                  <Copy className="order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" />
                 </div>
               </CopyToClipboard>
             </div>
           </div>
 
           {/* Chain Card */}
-          <div className="w-full">
-            <span className="text-as-content-secondary text-sm font-medium">Chain</span>
-            <div className="border-as-border-primary rounded-lg border p-2 shadow-sm">
-              <div className="flex items-center gap-2">
+          <div className="order-transfer-crypto-chain-card w-full">
+            <span className="order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium">
+              Chain
+            </span>
+            <div className="order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm">
+              <div className="order-transfer-crypto-chain-info flex items-center gap-2">
                 <img
                   src={ALL_CHAINS[order.srcChain].logoUrl}
                   alt={getChainName(order.srcChain)}
-                  className={cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none")}
+                  className={cn(
+                    "order-transfer-crypto-chain-logo h-6 rounded-full",
+                    order.srcChain === b3.id && "h-5 rounded-none",
+                  )}
                 />
-                <span className="text-as-primary text-sm font-semibold">{getChainName(order.srcChain)}</span>
+                <span className="order-transfer-crypto-chain-name text-as-primary text-sm font-semibold">
+                  {getChainName(order.srcChain)}
+                </span>
               </div>
             </div>
           </div>
         </div>
 
         {/* QR Code and Deposit Address Card */}
-        <div className="border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border">
+        <div className="order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border">
           {/* QR Code Section */}
-          <div className="border-as-border-primary h-full w-full border-r">
-            <div className="flex justify-center">
-              <div className="bg-as-surface-secondary flex flex-col items-center rounded-lg p-6">
+          <div className="order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r">
+            <div className="order-transfer-crypto-qr-wrapper flex justify-center">
+              <div className="order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6">
                 <QRCodeSVG
                   value={getPaymentUrl(
                     order.globalAddress,
@@ -197,15 +210,17 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                     order.srcChain,
                     srcToken?.decimals,
                   )}
-                  className="bg-as-surface-secondary max-h-48 max-w-48"
+                  className="order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48"
                 />
-                <div className="mt-3 flex items-center justify-center gap-2 text-sm">
-                  <span className="text-as-brand/70 text-sm font-medium">SCAN WITH</span>
+                <div className="order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm">
+                  <span className="order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium">
+                    SCAN WITH
+                  </span>
                   <TextLoop interval={3}>
-                    <WalletMetamask className="h-5 w-5" variant="branded" />
-                    <WalletCoinbase className="h-5 w-5" variant="branded" />
-                    <WalletPhantom className="h-5 w-5" variant="branded" />
-                    <WalletTrust className="h-5 w-5" variant="branded" />
+                    <WalletMetamask className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
+                    <WalletCoinbase className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
+                    <WalletPhantom className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
+                    <WalletTrust className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
                   </TextLoop>
                 </div>
               </div>
@@ -213,17 +228,19 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
           </div>
 
           {/* Deposit Address Section */}
-          <div className="flex h-full w-full flex-col gap-2 p-6">
-            <span className="text-as-content-secondary text-sm font-medium">Deposit address:</span>
+          <div className="order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6">
+            <span className="order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium">
+              Deposit address:
+            </span>
             <div
-              className="flex h-full cursor-pointer flex-col items-stretch justify-between gap-4"
+              className="order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4"
               onClick={handleCopyAddress}
             >
-              <div className="text-as-primary break-all font-mono text-sm font-semibold leading-relaxed">
+              <div className="order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed">
                 {order.globalAddress}
               </div>
-              <div className="place-self-end">
-                <Copy className="group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" />
+              <div className="order-transfer-crypto-address-copy-icon-wrapper place-self-end">
+                <Copy className="order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" />
               </div>
             </div>
           </div>
@@ -240,23 +257,28 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
       </div>
 
       {/* Action Buttons */}
-      <div className="flex flex-col gap-3">
+      <div className="order-transfer-crypto-actions flex flex-col gap-3">
         <ShinyButton
           accentColor="hsl(var(--as-brand))"
           textColor="text-white"
-          className="w-full py-3"
+          className="order-transfer-crypto-copy-btn w-full py-3"
           onClick={handleCopyAddress}
         >
           Copy deposit address
         </ShinyButton>
 
         {/* <button
-          className="text-as-primary/60 hover:text-as-primary flex w-full items-center justify-center gap-2 py-2 transition-colors"
+          className="order-transfer-crypto-cancel-btn text-as-primary/60 hover:text-as-primary flex w-full items-center justify-center gap-2 py-2 transition-colors"
           onClick={onBack}
         >
           <RefreshCcw className="h-4 w-4" />
           Cancel and start over
         </button> */}
+
+        <PaymentMethodSwitch
+          currentMethod={CryptoPaymentMethodType.TRANSFER_CRYPTO}
+          onMethodChange={onPaymentMethodChange}
+        />
       </div>
     </div>
   );

package/src/anyspend/react/contexts/FeatureFlagsContext.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+
+export interface FeatureFlags {
+  showPoints?: boolean;
+}
+
+interface FeatureFlagsContextType {
+  featureFlags: FeatureFlags;
+}
+
+const FeatureFlagsContext = createContext<FeatureFlagsContextType | undefined>(undefined);
+
+interface FeatureFlagsProviderProps {
+  children: ReactNode;
+  featureFlags?: FeatureFlags;
+}
+
+const defaultFeatureFlags: FeatureFlags = {
+  showPoints: false,
+};
+
+export function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }: FeatureFlagsProviderProps) {
+  return <FeatureFlagsContext.Provider value={{ featureFlags }}>{children}</FeatureFlagsContext.Provider>;
+}
+
+export function useFeatureFlags(): FeatureFlags {
+  const context = useContext(FeatureFlagsContext);
+  if (!context) {
+    return defaultFeatureFlags;
+  }
+  return context.featureFlags;
+}

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -31,6 +31,7 @@ export enum PanelView {
   RECIPIENT_SELECTION,
   ORDER_DETAILS,
   LOADING,
+  POINTS_DETAIL,
 }
 
 interface UseAnyspendFlowProps {
@@ -244,12 +245,19 @@ export function useAnyspendFlow({
   // Handle order completion
   useEffect(() => {
     if (oat?.data?.order.status === "executed") {
-      console.log("Order executed successfully");
-      // just get the payload.amount if available from custompayload
-      const amount = (oat.data.order.payload as { amount?: string })?.amount;
-      onTransactionSuccess?.(amount);
+      // get the actualDstAmount if available from custompayload
+      const amount = (oat.data.order.payload as { actualDstAmount?: string })?.actualDstAmount;
+      const formattedActualDstAmount = amount
+        ? formatTokenAmount(BigInt(amount), oat.data.order.metadata.dstToken.decimals)
+        : undefined;
+      onTransactionSuccess?.(formattedActualDstAmount);
     }
-  }, [oat?.data?.order.status, oat?.data?.order.payload, onTransactionSuccess]);
+  }, [
+    oat?.data?.order.status,
+    oat?.data?.order.payload,
+    onTransactionSuccess,
+    oat?.data?.order.metadata.dstToken.decimals,
+  ]);
 
   return {
     // State

package/src/anyspend/react/providers/AnyspendProvider.tsx

@@ -3,10 +3,12 @@
 import { TooltipProvider } from "@b3dotfun/sdk/global-account/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
+import { FeatureFlags, FeatureFlagsProvider } from "../contexts/FeatureFlagsContext";
 import { StripeRedirectHandler } from "./StripeRedirectHandler";
 
 interface AnyspendProviderProps {
   children: ReactNode;
+  featureFlags?: FeatureFlags;
 }
 
 const defaultQueryClientConfig = {
@@ -29,27 +31,30 @@ const defaultQueryClientConfig = {
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
  * - Handles Stripe payment redirects and modal state
+ * - Provides feature flags configuration
  *
  * @example
  * ```tsx
  * function App() {
  *   return (
- *     <AnyspendProvider>
+ *     <AnyspendProvider featureFlags={{ showPoints: true }}>
  *       <YourApp />
  *     </AnyspendProvider>
  *   );
  * }
  * ```
  */
-export const AnyspendProvider = function AnyspendProvider({ children }: AnyspendProviderProps) {
+export const AnyspendProvider = function AnyspendProvider({ children, featureFlags }: AnyspendProviderProps) {
   const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
 
   return (
     <QueryClientProvider client={queryClient}>
-      <TooltipProvider>
-        <StripeRedirectHandler />
-        {children}
-      </TooltipProvider>
+      <FeatureFlagsProvider featureFlags={featureFlags}>
+        <TooltipProvider>
+          <StripeRedirectHandler />
+          {children}
+        </TooltipProvider>
+      </FeatureFlagsProvider>
     </QueryClientProvider>
   );
 };

package/src/anyspend/react/providers/index.ts

@@ -1,2 +1,3 @@
 export * from "./AnyspendProvider";
 export * from "./StripeRedirectHandler";
+export { useFeatureFlags, type FeatureFlags } from "../contexts/FeatureFlagsContext";

package/src/anyspend/types/api.ts

@@ -805,6 +805,16 @@ export interface paths {
                  * @example 0
                  */
                 userBalance?: string;
+                /**
+                 * @description Anyspend points that will be awarded for the order
+                 * @example 100
+                 */
+                pointsAmount?: number;
+                /**
+                 * @description Multiplier applied to points that will be awarded for the order
+                 * @example 1.5
+                 */
+                pointsMultiplier?: number;
               };
               /** @example 200 */
               statusCode: number;

package/src/anyspend/types/api_req_res.ts

@@ -1,16 +1,12 @@
 import { paths } from "./api";
 
-export type GetOrderAndTxsResponse =
-  paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetOrderAndTxsResponse = paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetQuoteRequest = paths["/orders/quote"]["post"]["requestBody"]["content"]["application/json"];
 export type GetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
-export type GetCoinbaseOnrampOptionsResponse =
-  paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
+
+export type GetCoinbaseOnrampOptionsResponse = paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetOrderHistoryResponse = paths["/orders"]["get"]["responses"]["200"]["content"]["application/json"];
-export type GetTokenListResponse =
-  paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetTokenListResponse = paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
 export type CreateOrderResponse = paths["/orders"]["post"]["responses"]["200"]["content"]["application/json"];
-export type GetStripeSupportedResponse =
-  paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
-export type GetStripeClientSecret =
-  paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetStripeSupportedResponse = paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetStripeClientSecret = paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];

package/src/anyspend/utils/chain.ts

@@ -149,7 +149,7 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
     name: bsc.name,
     logoUrl: "https://avatars.githubusercontent.com/u/45615063?s=280&v=4",
     type: ChainType.EVM,
-    nativeRequired: parseEther("0.000025"),
+    nativeRequired: parseEther("0.0001"),
     canDepositNative: true,
     defaultToken: getBnbToken(),
     nativeToken: getBnbToken(),