@b3dotfun/sdk 0.0.41 → 0.0.42-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.41",
+  "version": "0.0.42-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -236,27 +236,6 @@
     "utils",
     "constants"
   ],
-  "scripts": {
-    "clean": "rm -rf dist",
-    "prebuild": "pnpm clean",
-    "fix-dist": "[ -d ./dist/react/src ] && cp -r ./dist/react/src/* ./dist/ && rm -rf ./dist/react || echo \"No react directory found\"",
-    "build": "pnpm clean && pnpm lint && pnpm build:types && pnpm build:cjs && pnpm build:esm && pnpm build:css",
-    "build:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --declarationDir dist/types",
-    "build:cjs": "tsc -p tsconfig.cjs.json --outDir dist/cjs --module commonjs && tsc-alias -p tsconfig.cjs.json --outDir dist/cjs && mkdir -p dist/cjs/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/cjs/shared/generated/ && ([ -d src/bondkit/json_abis ] && mkdir -p dist/cjs/bondkit/json_abis && cp -r src/bondkit/json_abis/* dist/cjs/bondkit/json_abis/ || echo \"No bondkit json_abis\")",
-    "build:esm": "tsc -p tsconfig.esm.json --outDir dist/esm --module esnext  && tsc-alias -p tsconfig.esm.json --outDir dist/esm && mkdir -p dist/esm/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/esm/shared/generated/ && ([ -d src/bondkit/json_abis ] && mkdir -p dist/esm/bondkit/json_abis && cp -r src/bondkit/json_abis/* dist/esm/bondkit/json_abis/ || echo \"No bondkit json_abis\") && node scripts/fix-esm-imports.js",
-    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
-    "dev:cjs": "tsc-watch -p tsconfig.cjs.json --onSuccess \"tsc-alias -p tsconfig.cjs.json --outDir dist/cjs\"",
-    "dev:esm": "tsc-watch -p tsconfig.esm.json --onSuccess \"tsc-alias -p tsconfig.esm.json --outDir dist/esm\"",
-    "dev": "concurrently \"pnpm dev:cjs\" \"pnpm dev:esm\" \"pnpm dev:css\"",
-    "dev:css": "postcss src/styles/index.css -o dist/styles/index.css --watch",
-    "prepublishOnly": "pnpm build",
-    "release:test": "pnpm version prerelease --preid test && git push --follow-tags && pnpm publish --tag test --no-git-checks",
-    "release:alpha": "pnpm version prerelease --preid alpha && git push --follow-tags && pnpm publish --tag alpha --no-git-checks",
-    "typecheck": "tsc --noEmit",
-    "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
-    "lint": "eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix"
-  },
   "dependencies": {
     "@b3dotfun/b3-api": "0.0.50",
     "@b3dotfun/basement-api": "0.0.11",
@@ -369,5 +348,25 @@
     "three": {
       "optional": true
     }
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean",
+    "fix-dist": "[ -d ./dist/react/src ] && cp -r ./dist/react/src/* ./dist/ && rm -rf ./dist/react || echo \"No react directory found\"",
+    "build": "pnpm clean && pnpm lint && pnpm build:types && pnpm build:cjs && pnpm build:esm && pnpm build:css",
+    "build:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --declarationDir dist/types",
+    "build:cjs": "tsc -p tsconfig.cjs.json --outDir dist/cjs --module commonjs && tsc-alias -p tsconfig.cjs.json --outDir dist/cjs && mkdir -p dist/cjs/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/cjs/shared/generated/ && ([ -d src/bondkit/json_abis ] && mkdir -p dist/cjs/bondkit/json_abis && cp -r src/bondkit/json_abis/* dist/cjs/bondkit/json_abis/ || echo \"No bondkit json_abis\")",
+    "build:esm": "tsc -p tsconfig.esm.json --outDir dist/esm --module esnext  && tsc-alias -p tsconfig.esm.json --outDir dist/esm && mkdir -p dist/esm/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/esm/shared/generated/ && ([ -d src/bondkit/json_abis ] && mkdir -p dist/esm/bondkit/json_abis && cp -r src/bondkit/json_abis/* dist/esm/bondkit/json_abis/ || echo \"No bondkit json_abis\") && node scripts/fix-esm-imports.js",
+    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
+    "dev:cjs": "tsc-watch -p tsconfig.cjs.json --onSuccess \"tsc-alias -p tsconfig.cjs.json --outDir dist/cjs\"",
+    "dev:esm": "tsc-watch -p tsconfig.esm.json --onSuccess \"tsc-alias -p tsconfig.esm.json --outDir dist/esm\"",
+    "dev": "concurrently \"pnpm dev:cjs\" \"pnpm dev:esm\" \"pnpm dev:css\"",
+    "dev:css": "postcss src/styles/index.css -o dist/styles/index.css --watch",
+    "release:test": "pnpm version prerelease --preid test && git push --follow-tags && pnpm publish --tag test --no-git-checks",
+    "release:alpha": "pnpm version prerelease --preid alpha && git push --follow-tags && pnpm publish --tag alpha --no-git-checks",
+    "typecheck": "tsc --noEmit",
+    "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix"
   }
-}
+}

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

@@ -78,6 +78,7 @@ export function AnySpend(props: {
    * Useful for handling special cases like B3 token selection.
    */
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  onSuccess?: (txHash?: string) => void;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -97,6 +98,7 @@ function AnySpendInner({
   hideTransactionHistoryButton,
   recipientAddress: recipientAddressFromProps,
   onTokenSelect,
+  onSuccess,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -106,6 +108,7 @@ function AnySpendInner({
   hideTransactionHistoryButton?: boolean;
   recipientAddress?: string;
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  onSuccess?: (txHash?: string) => void;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -446,8 +449,9 @@ function AnySpendInner({
           srcTokenAddress: selectedSrcToken.address,
           dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
           type: "swap",
-          tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXPECTED_OUTPUT",
+          tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
           amount: activeInputAmountInWei,
+          recipientAddress,
         }
       : {
           srcChain: base.id,
@@ -457,6 +461,7 @@ function AnySpendInner({
           type: "swap",
           tradeType: "EXACT_INPUT",
           amount: srcAmountOnrampInWei,
+          recipientAddress,
           onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         },
   );
@@ -514,6 +519,14 @@ function AnySpendInner({
     }
   }, [anyspendQuote, isSrcInputDirty]);
 
+  useEffect(() => {
+    if (oat?.data?.order.status === "executed") {
+      console.log("Calling onSuccess");
+      const txHash = oat?.data?.executeTx?.txHash;
+      onSuccess?.(txHash);
+    }
+  }, [oat?.data?.executeTx?.txHash, oat?.data?.order.status, onSuccess]);
+
   const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
     onSuccess: data => {
       const orderId = data.data.id;

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

@@ -366,7 +366,6 @@ export function AnySpendBondKit({
       contractAddress={contractAddress}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "BondKit Buy",
       }}
       header={header}

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

@@ -675,7 +675,6 @@ export function AnySpendBuySpin({
       spenderAddress={paymentConfig.entryModule}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
       }}
       header={header}

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: metadata.type === "mint_nft" ? metadata.nftContract.tokenId : undefined,
-      contractType: metadata.type === "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,
     });
@@ -328,8 +343,8 @@ function AnySpendCustomInner({
     encodedData,
     metadata?.nftContract?.tokenId,
     metadata?.nftContract?.type,
-    metadata?.type,
     orderType,
+    recipientAddress,
     spenderAddress,
     srcChainId,
     srcToken,
@@ -426,7 +441,7 @@ function AnySpendCustomInner({
         recipientAddress,
         creatorAddress: currentWallet?.wallet?.address,
         nft:
-          metadata.type === "mint_nft"
+          orderType === "mint_nft"
             ? metadata.nftContract.type === "erc1155"
               ? {
                   type: "erc1155",
@@ -448,7 +463,7 @@ function AnySpendCustomInner({
                 }
             : undefined,
         tournament:
-          metadata.type === "join_tournament" || metadata.type === "fund_tournament"
+          orderType === "join_tournament" || orderType === "fund_tournament"
             ? {
                 ...metadata.tournament,
                 contractAddress: contractAddress,
@@ -457,13 +472,12 @@ function AnySpendCustomInner({
             : undefined,
         // only populate payload for custom tx
         payload:
-          metadata.type === "custom"
+          orderType === "custom"
             ? {
                 amount: dstAmount,
                 data: encodedData,
                 spenderAddress: spenderAddress,
                 to: contractAddress,
-                action: metadata.action,
               }
             : undefined,
       } as CreateOrderParams;
@@ -749,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"}>
@@ -917,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>
@@ -1040,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>
@@ -1153,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>
@@ -1196,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/AnySpendStakeB3.tsx

@@ -491,7 +491,6 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "stake B3",
       }}
       header={header}

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

@@ -141,10 +141,9 @@ export function AnyspendSignatureMint({
       dstChainId={signatureData.collection.chainId}
       dstToken={dstToken}
       dstAmount={price.toString()}
-      contractAddress={signatureData.collection.address!}
+      contractAddress={signatureData.collection.address || ""}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "Signature Mint",
       }}
       header={header}

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

@@ -48,7 +48,7 @@ export function CryptoPaySection({
   const walletAddress =
     selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
       ? connectedSmartWallet?.getAccount()?.address
-      : connectedEOAWallet?.getAccount()?.address || connectedSmartWallet?.getAccount()?.address;
+      : connectedEOAWallet?.getAccount()?.address;
 
   const { data: profileData } = useProfile({ address: walletAddress });
   const connectedName = profileData?.displayName;

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

@@ -157,15 +157,17 @@ export function useAnyspendFlow({
   };
 
   // Get quote
-  const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString();
+  // For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
+  const effectiveDecimals = paymentType === "fiat" ? USDC_BASE.decimals : selectedSrcToken.decimals;
+  const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
   const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote({
     srcChain: paymentType === "fiat" ? base.id : selectedSrcChainId,
     dstChain: isDepositMode ? base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
     srcTokenAddress: paymentType === "fiat" ? USDC_BASE.address : selectedSrcToken.address,
     dstTokenAddress: isDepositMode ? B3_TOKEN.address : selectedSrcToken.address, // For deposits, always B3
-    type: "swap",
-    tradeType: "EXACT_INPUT",
+    type: "hype_duel",
     amount: activeInputAmountInWei,
+    recipientAddress: selectedRecipientAddress,
     onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
   });
 

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

@@ -35,7 +35,7 @@ export function useAnyspendOrderAndTransactions(orderId: string | undefined) {
 
   const { data, isLoading, refetch, error } = useQuery<GetOrderAndTxsResponse>({
     queryKey: ["getAnyspendOrderAndTransactions", orderId],
-    queryFn: () => anyspendService.getOrderAndTransactions(orderId!),
+    queryFn: () => anyspendService.getOrderAndTransactions(orderId),
     enabled: !!orderId,
     refetchInterval: 3000,
     staleTime: 1000,

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

@@ -6,7 +6,7 @@ import { useMemo } from "react";
 export function useCoinbaseOnrampOptions(country?: string, visitorData?: VisitorData, isLoadingVisitorData?: boolean) {
   const { data, isLoading, error, refetch } = useQuery({
     queryKey: ["getCoinbaseOnrampOptions", country, visitorData],
-    queryFn: () => anyspendService.getCoinbaseOnrampOptions(country!, visitorData),
+    queryFn: () => anyspendService.getCoinbaseOnrampOptions(country, visitorData),
     enabled: Boolean(country) && !isLoadingVisitorData,
   });
 

package/src/anyspend/services/anyspend.ts

@@ -111,6 +111,7 @@ export const anyspendService = {
   },
 
   getOrderAndTransactions: async (orderId: string | undefined): Promise<GetOrderAndTxsResponse> => {
+    invariant(orderId, "orderId is required");
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders/${orderId}`);
     const data: GetOrderAndTxsResponse = await response.json();
     return data;
@@ -134,9 +135,10 @@ export const anyspendService = {
   },
 
   getCoinbaseOnrampOptions: async (
-    country: string,
+    country: string | undefined,
     visitorData?: VisitorData,
   ): Promise<GetCoinbaseOnrampOptionsResponse> => {
+    invariant(country, "country is required");
     const params = new URLSearchParams({
       country,
       // include fingerprintId and requestId in the query params