@b3dotfun/sdk 0.0.40-alpha.20 → 0.0.40-alpha.22

package/src/anyspend/react/components/AnySpend.tsx

@@ -448,6 +448,7 @@ function AnySpendInner({
           type: "swap",
           tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
           amount: activeInputAmountInWei,
+          recipientAddress,
         }
       : {
           srcChain: base.id,
@@ -457,6 +458,7 @@ function AnySpendInner({
           type: "swap",
           tradeType: "EXACT_INPUT",
           amount: srcAmountOnrampInWei,
+          recipientAddress,
           onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         },
   );

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -42,12 +42,15 @@ import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base } from "viem/chains";
+import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderToken } from "./common/OrderToken";
+import { PointsBadge } from "./common/PointsBadge";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 enum PanelView {
@@ -58,6 +61,7 @@ enum PanelView {
   RECIPIENT_SELECTION,
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
+  POINTS_DETAIL,
 }
 
 function generateGetRelayQuoteRequest({
@@ -66,6 +70,7 @@ function generateGetRelayQuoteRequest({
   srcToken,
   dstChainId,
   dstToken,
+  recipientAddress,
   dstAmount,
   contractAddress,
   tokenId,
@@ -78,6 +83,7 @@ function generateGetRelayQuoteRequest({
   srcToken: components["schemas"]["Token"];
   dstChainId: number;
   dstToken: components["schemas"]["Token"];
+  recipientAddress: string | undefined;
   dstAmount: string;
   contractAddress: string;
   tokenId?: number | null;
@@ -94,6 +100,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         price: dstAmount,
         contractAddress: contractAddress,
         tokenId: tokenId,
@@ -107,6 +114,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         price: dstAmount,
         contractAddress: contractAddress,
       };
@@ -118,6 +126,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         fundAmount: dstAmount,
         contractAddress: contractAddress,
       };
@@ -129,6 +138,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         payload: {
           amount: dstAmount,
           data: encodedData,
@@ -165,6 +175,7 @@ export function AnySpendCustom(props: {
   }) => React.JSX.Element;
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
+  onShowPointsDetail?: () => void;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -191,6 +202,7 @@ function AnySpendCustomInner({
   header,
   onSuccess,
   showRecipient = true,
+  onShowPointsDetail,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -213,8 +225,10 @@ function AnySpendCustomInner({
   }) => React.JSX.Element;
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
+  onShowPointsDetail?: () => void;
 }) {
   const hasMounted = useHasMounted();
+  const featureFlags = useFeatureFlags();
 
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -312,10 +326,11 @@ function AnySpendCustomInner({
       srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
       dstChainId: dstChainId,
       dstToken: dstToken,
+      recipientAddress,
       dstAmount: dstAmount,
       contractAddress: contractAddress,
-      tokenId: orderType === "mint_nft" ? metadata.nftContract.tokenId : undefined,
-      contractType: orderType === "mint_nft" ? metadata.nftContract.type : undefined,
+      tokenId: orderType === "mint_nft" ? metadata?.nftContract?.tokenId : undefined,
+      contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
       encodedData: encodedData,
       spenderAddress: spenderAddress,
     });
@@ -329,6 +344,7 @@ function AnySpendCustomInner({
     metadata?.nftContract?.tokenId,
     metadata?.nftContract?.type,
     orderType,
+    recipientAddress,
     spenderAddress,
     srcChainId,
     srcToken,
@@ -747,6 +763,23 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Render points badge if conditions are met
+  const renderPointsBadge = () => {
+    if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
+      return (
+        <PointsBadge
+          pointsAmount={anyspendQuote.data.pointsAmount}
+          pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+          onClick={() => {
+            onShowPointsDetail?.();
+            setActivePanel(PanelView.POINTS_DETAIL);
+          }}
+        />
+      );
+    }
+    return null;
+  };
+
   // Confirm order view.
   const confirmOrderView = (
     <div className={"relative mx-auto flex w-full flex-col items-center"}>
@@ -915,9 +948,12 @@ function AnySpendCustomInner({
                   transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                   className="relative flex w-full items-center justify-between"
                 >
-                  <span className="text-as-tertiarry text-sm">
-                    Total <span className="text-as-tertiarry">(with fee)</span>
-                  </span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-as-tertiarry text-sm">
+                      Total <span className="text-as-tertiarry">(with fee)</span>
+                    </span>
+                    {renderPointsBadge()}
+                  </div>
                   <span className="text-as-primary font-semibold">
                     {formattedSrcAmount || "--"} {srcToken.symbol}
                   </span>
@@ -1038,9 +1074,12 @@ function AnySpendCustomInner({
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
               >
-                <span className="text-as-tertiarry text-sm">
-                  Total <span className="text-as-tertiarry">(USD)</span>
-                </span>
+                <div className="flex items-center gap-2">
+                  <span className="text-as-tertiarry text-sm">
+                    Total <span className="text-as-tertiarry">(USD)</span>
+                  </span>
+                  {renderPointsBadge()}
+                </div>
                 <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
               </motion.div>
             </div>
@@ -1151,6 +1190,16 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Points detail view
+  const pointsDetailView = (
+    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+      <PointsDetailPanel
+        pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+        onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
+      />
+    </div>
+  );
+
   // Return the TransitionPanel with all views
   return (
     <StyleRoot>
@@ -1194,6 +1243,9 @@ function AnySpendCustomInner({
           <div key="fiat-payment-method-view" className="w-full">
             {fiatPaymentMethodView}
           </div>,
+          <div key="points-detail-view" className="w-full">
+            {pointsDetailView}
+          </div>,
         ]}
       </TransitionPanel>
     </StyleRoot>

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -36,12 +36,14 @@ export function AnySpendNFT({
   recipientAddress,
   nftContract,
   onSuccess,
+  onShowPointsDetail,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress?: string;
   nftContract: components["schemas"]["NftContract"];
   onSuccess?: (txHash?: string) => void;
+  onShowPointsDetail?: () => void;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const [isLoadingFallback, setIsLoadingFallback] = useState(false);
@@ -164,6 +166,7 @@ export function AnySpendNFT({
       }}
       header={header}
       onSuccess={onSuccess}
+      onShowPointsDetail={onShowPointsDetail}
     />
   );
 }

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

@@ -7,6 +7,7 @@ import { motion } from "motion/react";
 import { components } from "../../../types/api";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { OrderTokenAmount } from "./OrderTokenAmount";
+import { PointsBadge } from "./PointsBadge";
 
 interface CryptoReceiveSectionProps {
   isDepositMode?: boolean;
@@ -163,15 +164,12 @@ export function CryptoReceiveSection({
               );
             })()}
         </div>
-        {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (
-          <button
-            key={`points-${anyspendQuote.data.pointsAmount}`}
-            className="bg-as-brand hover:scale-102 active:scale-98 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+        {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && (
+          <PointsBadge
+            pointsAmount={anyspendQuote.data.pointsAmount}
+            pointsMultiplier={anyspendQuote.data.pointsMultiplier}
             onClick={() => onShowPointsDetail?.()}
-          >
-            <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
-            <span className="text-xs text-white">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
-          </button>
+          />
         )}
       </div>
     </motion.div>

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

@@ -11,6 +11,7 @@ import { toast } from "sonner";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
+import { PointsBadge } from "./PointsBadge";
 
 export function PanelOnramp({
   srcAmountOnRamp,
@@ -259,16 +260,15 @@ export function PanelOnramp({
                   return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
                 })()}
               </span>
-              {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (
-                <button
-                  key={`points-${anyspendQuote.data.pointsAmount}`}
-                  className="bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
-                  onClick={() => onShowPointsDetail?.()}
-                >
-                  <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
-                  <span className="text-xs text-white">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
-                </button>
-              )}
+              {featureFlags.showPoints &&
+                anyspendQuote?.data?.pointsAmount &&
+                anyspendQuote?.data?.pointsAmount > 0 && (
+                  <PointsBadge
+                    pointsAmount={anyspendQuote.data.pointsAmount}
+                    pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+                    onClick={() => onShowPointsDetail?.()}
+                  />
+                )}
             </div>
             <span className="text-as-primary font-semibold">
               ${getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)}

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

@@ -0,0 +1,20 @@
+interface PointsBadgeProps {
+  pointsAmount: number;
+  pointsMultiplier?: number;
+  onClick?: () => void;
+}
+
+export function PointsBadge({ pointsAmount, pointsMultiplier, onClick }: PointsBadgeProps) {
+  return (
+    <button
+      className="bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+      onClick={onClick}
+    >
+      <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
+      <span className="relative text-xs text-white">
+        +{pointsAmount.toLocaleString()} pts
+        {pointsMultiplier && pointsMultiplier > 1 && <span className="ml-1 opacity-80">({pointsMultiplier}x)</span>}
+      </span>
+    </button>
+  );
+}

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

@@ -166,6 +166,7 @@ export function useAnyspendFlow({
     type: "swap",
     tradeType: "EXACT_INPUT",
     amount: activeInputAmountInWei,
+    recipientAddress: selectedRecipientAddress,
     onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
   });
 

package/src/anyspend/types/api.ts

@@ -505,6 +505,11 @@ export interface paths {
                  * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
                  */
                 dstTokenAddress: string;
+                /**
+                 * @description Recipient address
+                 * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                 */
+                recipientAddress?: string;
                 /**
                  * @description Type of trade execution
                  * @enum {string}
@@ -547,6 +552,11 @@ export interface paths {
                  * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
                  */
                 dstTokenAddress: string;
+                /**
+                 * @description Recipient address
+                 * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                 */
+                recipientAddress?: string;
                 /** @description Custom payload for execution */
                 payload: {
                   /** @description Encoded transaction data */
@@ -571,6 +581,11 @@ export interface paths {
                 dstChain: number;
                 srcTokenAddress: string;
                 dstTokenAddress: string;
+                /**
+                 * @description Recipient address
+                 * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                 */
+                recipientAddress?: string;
                 /** @enum {string} */
                 onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
                 contractAddress: string;
@@ -586,6 +601,11 @@ export interface paths {
                 dstChain: number;
                 srcTokenAddress: string;
                 dstTokenAddress: string;
+                /**
+                 * @description Recipient address
+                 * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                 */
+                recipientAddress?: string;
                 /** @enum {string} */
                 onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
                 contractAddress: string;
@@ -598,6 +618,11 @@ export interface paths {
                 dstChain: number;
                 srcTokenAddress: string;
                 dstTokenAddress: string;
+                /**
+                 * @description Recipient address
+                 * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                 */
+                recipientAddress?: string;
                 /** @enum {string} */
                 onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
                 contractAddress: string;
@@ -629,6 +654,11 @@ export interface paths {
                  * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
                  */
                 dstTokenAddress: string;
+                /**
+                 * @description Recipient address
+                 * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                 */
+                recipientAddress?: string;
                 /**
                  * @description Amount to quote
                  * @example 1000000000000000000