@b3dotfun/sdk 0.0.65-test.1 → 0.0.65

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

@@ -12,11 +12,8 @@ import {
   Button,
   ShinyButton,
   StyleRoot,
-  TabsPrimitive,
   TransitionPanel,
   useAccountWallet,
-  useB3,
-  useModalStore,
   useProfile,
   useRouter,
   useSearchParamsSSR,
@@ -24,7 +21,6 @@ import {
   useTokenData,
   useTokenFromUrl,
 } from "@b3dotfun/sdk/global-account/react";
-import BottomNavigation from "@b3dotfun/sdk/global-account/react/components/ManageAccount/BottomNavigation";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
@@ -32,7 +28,6 @@ import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { defineChain } from "thirdweb";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
@@ -125,31 +120,6 @@ function AnySpendInner({
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
-  const { partnerId } = useB3();
-  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-
-  // Define base chain with RPC for modal props
-  const baseChain = useMemo(
-    () =>
-      defineChain({
-        id: 8453,
-        name: "Base",
-        nativeCurrency: {
-          name: "Ether",
-          symbol: "ETH",
-          decimals: 18,
-        },
-        rpc: "https://mainnet.base.org",
-        blockExplorers: [
-          {
-            name: "Basescan",
-            url: "https://basescan.org",
-          },
-        ],
-      }),
-    [],
-  );
-
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
 
@@ -799,10 +769,6 @@ function AnySpendInner({
   const onClickHistory = () => {
     setOrderId(undefined);
     navigateToPanel(PanelView.HISTORY, "forward");
-    setB3ModalContentType({
-      type: "anySpendOrderHistory",
-      showBackButton: false,
-    });
     // Remove orderId and paymentMethod from URL when going back to history
     const params = new URLSearchParams(searchParams.toString());
     params.delete("orderId");
@@ -986,7 +952,7 @@ function AnySpendInner({
   );
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full px-5"}>
+    <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails
@@ -1013,209 +979,185 @@ function AnySpendInner({
 
   const mainView = (
     <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2"}>
-      <div className={"flex w-full max-w-full flex-col items-center gap-2 px-5"}>
-        {/* Token Header - Show when in buy mode */}
-        {isBuyMode && (
-          <div className="mb-4 flex flex-col items-center gap-3 text-center">
-            {selectedDstToken.metadata?.logoURI && (
-              <div className="relative">
-                <img
-                  src={selectedDstToken.metadata.logoURI}
-                  alt={selectedDstToken.symbol}
-                  className="border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"
-                />
-              </div>
-            )}
-            <div>
-              <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
-            </div>
-          </div>
-        )}
-
-        {/* Tab section */}
-        <TabSection
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
-          setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
-        />
-
-        <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
-          {/* Send section */}
-          {activeTab === "crypto" ? (
-            <CryptoPaySection
-              selectedSrcChainId={selectedSrcChainId}
-              setSelectedSrcChainId={setSelectedSrcChainId}
-              selectedSrcToken={selectedSrcToken}
-              setSelectedSrcToken={setSelectedSrcToken}
-              srcAmount={srcAmount}
-              setSrcAmount={setSrcAmount}
-              isSrcInputDirty={isSrcInputDirty}
-              setIsSrcInputDirty={setIsSrcInputDirty}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-              onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
-              anyspendQuote={anyspendQuote}
-              onTokenSelect={onTokenSelect}
-              onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-            />
-          ) : (
-            <motion.div
-              initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
-              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-              transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-            >
-              <PanelOnramp
-                srcAmountOnRamp={srcAmountOnRamp}
-                setSrcAmountOnRamp={setSrcAmountOnRamp}
-                selectedPaymentMethod={selectedFiatPaymentMethod}
-                setActivePanel={(panelIndex: number) => {
-                  // Map panel index to navigation with direction
-                  const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
-                  if (panelsWithForwardNav.includes(panelIndex)) {
-                    navigateToPanel(panelIndex, "forward");
-                  } else {
-                    setActivePanel(panelIndex);
-                  }
-                }}
-                _recipientAddress={recipientAddress}
-                destinationToken={selectedDstToken}
-                destinationChainId={selectedDstChainId}
-                destinationAmount={dstAmount}
-                onDestinationTokenChange={setSelectedDstToken}
-                onDestinationChainChange={setSelectedDstChainId}
-                fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
-                recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
-                hideDstToken={isBuyMode}
-                anyspendQuote={anyspendQuote}
-                onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
-                onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-                customUsdInputValues={customUsdInputValues}
+      {/* Token Header - Show when in buy mode */}
+      {isBuyMode && (
+        <div className="mb-4 flex flex-col items-center gap-3 text-center">
+          {selectedDstToken.metadata?.logoURI && (
+            <div className="relative">
+              <img
+                src={selectedDstToken.metadata.logoURI}
+                alt={selectedDstToken.symbol}
+                className="border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"
               />
-            </motion.div>
+            </div>
           )}
-
-          {/* Reverse swap direction section */}
-          <Button
-            variant="ghost"
-            className={cn(
-              "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-              isBuyMode && "top-[calc(50%+56px)] cursor-default",
-              activeTab === "fiat" && "hidden",
-            )}
-            onClick={() => {
-              if (activeTab === "fiat" || isBuyMode) {
-                return;
-              }
-
-              // Swap chain selections
-              const tempSrcChainId = selectedSrcChainId;
-              const tempDstChainId = selectedDstChainId;
-              setSelectedSrcChainId(tempDstChainId);
-              setSelectedDstChainId(tempSrcChainId);
-
-              // Swap token selections
-              const tempSrcToken = selectedSrcToken;
-              const tempDstToken = selectedDstToken;
-              setSelectedSrcToken(tempDstToken);
-              setSelectedDstToken(tempSrcToken);
-
-              // Swap amounts
-              const tempSrcAmount = srcAmount;
-              const tempDstAmount = dstAmount;
-              setSrcAmount(tempDstAmount);
-              setDstAmount(tempSrcAmount);
-            }}
+          <div>
+            <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
+          </div>
+        </div>
+      )}
+
+      {/* Tab section */}
+      <TabSection
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
+        setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
+      />
+
+      <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
+        {/* Send section */}
+        {activeTab === "crypto" ? (
+          <CryptoPaySection
+            selectedSrcChainId={selectedSrcChainId}
+            setSelectedSrcChainId={setSelectedSrcChainId}
+            selectedSrcToken={selectedSrcToken}
+            setSelectedSrcToken={setSelectedSrcToken}
+            srcAmount={srcAmount}
+            setSrcAmount={setSrcAmount}
+            isSrcInputDirty={isSrcInputDirty}
+            setIsSrcInputDirty={setIsSrcInputDirty}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
+            anyspendQuote={anyspendQuote}
+            onTokenSelect={onTokenSelect}
+            onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
+          />
+        ) : (
+          <motion.div
+            initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+            transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
           >
-            <div className="relative flex items-center justify-center transition-opacity">
-              <ArrowDown className="text-as-primary/50 h-5 w-5" />
-            </div>
-          </Button>
-
-          {/* Receive section - Hidden when fiat tab is active */}
-          {activeTab === "crypto" && (
-            <CryptoReceiveSection
-              isDepositMode={false}
-              isBuyMode={isBuyMode}
-              selectedRecipientAddress={recipientAddress}
-              recipientName={recipientName || undefined}
-              onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
-              setRecipientAddress={setRecipientAddress}
-              recipientAddressFromProps={recipientAddressFromProps}
-              globalAddress={globalAddress}
-              dstAmount={dstAmount}
-              dstToken={selectedDstToken}
-              selectedDstChainId={selectedDstChainId}
-              setSelectedDstChainId={setSelectedDstChainId}
-              setSelectedDstToken={setSelectedDstToken}
-              isSrcInputDirty={isSrcInputDirty}
-              onChangeDstAmount={value => {
-                setIsSrcInputDirty(false);
-                setDstAmount(value);
+            <PanelOnramp
+              srcAmountOnRamp={srcAmountOnRamp}
+              setSrcAmountOnRamp={setSrcAmountOnRamp}
+              selectedPaymentMethod={selectedFiatPaymentMethod}
+              setActivePanel={(panelIndex: number) => {
+                // Map panel index to navigation with direction
+                const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
+                if (panelsWithForwardNav.includes(panelIndex)) {
+                  navigateToPanel(panelIndex, "forward");
+                } else {
+                  setActivePanel(panelIndex);
+                }
               }}
+              _recipientAddress={recipientAddress}
+              destinationToken={selectedDstToken}
+              destinationChainId={selectedDstChainId}
+              destinationAmount={dstAmount}
+              onDestinationTokenChange={setSelectedDstToken}
+              onDestinationChainChange={setSelectedDstChainId}
+              fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
+              recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+              hideDstToken={isBuyMode}
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
               onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+              customUsdInputValues={customUsdInputValues}
             />
-          )}
-        </div>
+          </motion.div>
+        )}
 
-        {/* Main button section */}
-        <motion.div
-          initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
-          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-          transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
-          className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
-        >
-          <ShinyButton
-            accentColor={"hsl(var(--as-brand))"}
-            disabled={btnInfo.disable}
-            onClick={onMainButtonClick}
-            className={cn(
-              "as-main-button relative w-full",
-              btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
-            )}
-            textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
-          >
-            <div className="flex items-center justify-center gap-2">
-              {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
-              {btnInfo.text}
-            </div>
-          </ShinyButton>
-
-          {!hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (
-            <Button
-              variant="link"
-              onClick={onClickHistory}
-              className="text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
-            >
-              <HistoryIcon className="h-4 w-4" /> <span className="pr-4">Transaction History</span>
-            </Button>
-          ) : null}
-        </motion.div>
-      </div>
-      <div className="w-full">
-        <TabsPrimitive
-          defaultValue="swap"
-          onValueChange={value => {
-            if (value === "settings" || value === "home") {
-              setB3ModalContentType({
-                type: "manageAccount",
-                activeTab: value,
-                setActiveTab: () => {},
-                chain: baseChain,
-                partnerId,
-              });
-            } else if (value === "swap") {
-              setB3ModalContentType({
-                type: "anySpend",
-              });
+        {/* Reverse swap direction section */}
+        <Button
+          variant="ghost"
+          className={cn(
+            "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+            isBuyMode && "top-[calc(50%+56px)] cursor-default",
+            activeTab === "fiat" && "hidden",
+          )}
+          onClick={() => {
+            if (activeTab === "fiat" || isBuyMode) {
+              return;
             }
+
+            // Swap chain selections
+            const tempSrcChainId = selectedSrcChainId;
+            const tempDstChainId = selectedDstChainId;
+            setSelectedSrcChainId(tempDstChainId);
+            setSelectedDstChainId(tempSrcChainId);
+
+            // Swap token selections
+            const tempSrcToken = selectedSrcToken;
+            const tempDstToken = selectedDstToken;
+            setSelectedSrcToken(tempDstToken);
+            setSelectedDstToken(tempSrcToken);
+
+            // Swap amounts
+            const tempSrcAmount = srcAmount;
+            const tempDstAmount = dstAmount;
+            setSrcAmount(tempDstAmount);
+            setDstAmount(tempSrcAmount);
           }}
         >
-          <BottomNavigation />
-        </TabsPrimitive>
+          <div className="relative flex items-center justify-center transition-opacity">
+            <ArrowDown className="text-as-primary/50 h-5 w-5" />
+          </div>
+        </Button>
+
+        {/* Receive section - Hidden when fiat tab is active */}
+        {activeTab === "crypto" && (
+          <CryptoReceiveSection
+            isDepositMode={false}
+            isBuyMode={isBuyMode}
+            selectedRecipientAddress={recipientAddress}
+            recipientName={recipientName || undefined}
+            onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
+            setRecipientAddress={setRecipientAddress}
+            recipientAddressFromProps={recipientAddressFromProps}
+            globalAddress={globalAddress}
+            dstAmount={dstAmount}
+            dstToken={selectedDstToken}
+            selectedDstChainId={selectedDstChainId}
+            setSelectedDstChainId={setSelectedDstChainId}
+            setSelectedDstToken={setSelectedDstToken}
+            isSrcInputDirty={isSrcInputDirty}
+            onChangeDstAmount={value => {
+              setIsSrcInputDirty(false);
+              setDstAmount(value);
+            }}
+            anyspendQuote={anyspendQuote}
+            onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
+            onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+          />
+        )}
       </div>
+
+      {/* Main button section */}
+      <motion.div
+        initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+        transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
+        className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
+      >
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          disabled={btnInfo.disable}
+          onClick={onMainButtonClick}
+          className={cn(
+            "as-main-button relative w-full",
+            btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
+          )}
+          textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
+        >
+          <div className="flex items-center justify-center gap-2">
+            {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {btnInfo.text}
+          </div>
+        </ShinyButton>
+
+        {!hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (
+          <Button
+            variant="link"
+            onClick={onClickHistory}
+            className="text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
+          >
+            <HistoryIcon className="h-4 w-4" /> <span className="pr-4">Transaction History</span>
+          </Button>
+        ) : null}
+      </motion.div>
     </div>
   );
 

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

@@ -664,7 +664,7 @@ function AnySpendCustomInner({
   const historyView = (
     <div
       className={cn(
-        "mx-auto flex w-full max-w-2xl flex-col items-center",
+        "mx-auto flex w-full max-w-2xl flex-col items-center p-5",
         mode === "modal" && "bg-b3-react-background",
       )}
     >

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

@@ -192,7 +192,7 @@ export function CryptoPaymentMethod({
   };
 
   return (
-    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5">
+    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full">
       <div className={cn("relative flex flex-col gap-10")}>
         {/* Header */}
         <button

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

@@ -83,7 +83,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
   const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
 
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5">
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3">
       <div className="flex w-full flex-col gap-3">
         <div className="text-center">
           <h3 className="text-as-primary text-lg font-bold">Fee Breakdown</h3>

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

@@ -81,7 +81,7 @@ export function FiatPaymentMethodComponent({
   // Show loading state while checking geo availability
   if (isLoadingGeoOnramp) {
     return (
-      <div className="fiat-payment-method mx-auto w-[460px] max-w-full px-5">
+      <div className="fiat-payment-method mx-auto w-[460px] max-w-full">
         <div className="flex flex-col gap-6">
           <div className="flex items-center gap-4">
             <button
@@ -104,7 +104,7 @@ export function FiatPaymentMethodComponent({
   }
 
   return (
-    <div className="fiat-payment-method mx-auto w-[460px] max-w-full px-5">
+    <div className="fiat-payment-method mx-auto w-[460px] max-w-full">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex items-center gap-4">

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

@@ -2,13 +2,12 @@
 
 import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend/react";
 import { Button, Skeleton, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
-import ModalHeader from "@b3dotfun/sdk/global-account/react/components/ModalHeader/ModalHeader";
-import { RefreshCcw } from "lucide-react";
+import { ArrowLeft, RefreshCcw } from "lucide-react";
 import { OrderHistoryItem } from "./OrderHistoryItem";
 
 interface OrderHistoryProps {
   mode: "modal" | "page";
-  onBack?: () => void;
+  onBack: () => void;
   onSelectOrder?: (orderId: string) => void;
 }
 
@@ -18,7 +17,13 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
 
   return (
     <>
-      <ModalHeader title="Order History" showCloseButton={false} handleBack={onBack} className="w-full">
+      <div className="mb-8 flex w-full items-center gap-3">
+        <Button onClick={onBack} variant="ghost" size="icon" className="hover:bg-as-surface-secondary">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <div className="flex-1">
+          <h3 className="text-as-primary text-2xl font-bold">Order History</h3>
+        </div>
         <Button
           variant="ghost"
           size="icon"
@@ -29,20 +34,20 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
         >
           <RefreshCcw className="text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" />
         </Button>
-      </ModalHeader>
+      </div>
 
       {isLoadingOrderHistory ? (
-        <div className="w-full space-y-3 px-5">
+        <div className="w-full space-y-3">
           {[1, 2, 3].map(i => (
             <Skeleton key={i} className="h-[180px] w-full rounded-2xl" />
           ))}
         </div>
       ) : !orderHistory?.length ? (
-        <div className="bg-as-surface-secondary w-full rounded-2xl p-12 px-5 text-center">
+        <div className="bg-as-surface-secondary w-full rounded-2xl p-12 text-center">
           <p className="text-as-secondary text-sm">No order history found</p>
         </div>
       ) : (
-        <div className="mb-12 w-full space-y-3 px-5 pt-5">
+        <div className="mb-12 w-full space-y-3">
           {[...orderHistory]
             .sort((a, b) => b.createdAt - a.createdAt)
             .map(order => (

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

@@ -150,7 +150,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5">
+    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6">
       {/* Order Summary Section */}
       <>
         <h2 className="-mb-3 text-lg font-semibold">Order summary</h2>

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

@@ -9,7 +9,7 @@ interface PointsDetailPanelProps {
 
 export function PointsDetailPanel({ pointsAmount = 0, onBack }: PointsDetailPanelProps) {
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5">
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4">
       <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">

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

@@ -88,7 +88,7 @@ export function RecipientSelection({
   const canConfirm = recipientAddress && isAddressValid;
 
   return (
-    <div className="recipient-selection mx-auto w-[460px] max-w-full px-5">
+    <div className="recipient-selection mx-auto w-[460px] max-w-full">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex justify-around">