@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.73",
+  "version": "0.0.74-alpha.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -320,6 +320,7 @@
     "lucide-react": "0.424.0",
     "motion": "^12.23.11",
     "qrcode.react": "4.2.0",
+    "react-easy-crop": "^5.5.3",
     "react-intersection-observer": "9.16.0",
     "react-number-format": "5.4.3",
     "react-timeago": "8.2.0",

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

@@ -12,8 +12,12 @@ import {
   Button,
   ShinyButton,
   StyleRoot,
+  TabsPrimitive,
+  toast,
   TransitionPanel,
   useAccountWallet,
+  useB3,
+  useModalStore,
   useProfile,
   useRouter,
   useSearchParamsSSR,
@@ -21,13 +25,15 @@ import {
   useTokenData,
   useTokenFromUrl,
 } from "@b3dotfun/sdk/global-account/react";
+import BottomNavigation from "@b3dotfun/sdk/global-account/react/components/ManageAccount/BottomNavigation";
+import { useAccountWalletImage } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
+import { getThirdwebChain } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 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 { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
@@ -50,6 +56,8 @@ import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 
+const baseChain = getThirdwebChain(8453);
+
 export interface RecipientOption {
   address: string;
   icon?: string;
@@ -123,6 +131,9 @@ function AnySpendInner({
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
+  const { partnerId } = useB3();
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
 
@@ -448,6 +459,8 @@ function AnySpendInner({
 
   const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
 
+  const globalWalletImage = useAccountWalletImage();
+
   // Auto-set active wallet from wagmi
   useAutoSetActiveWalletFromWagmi();
 
@@ -792,6 +805,10 @@ 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");
@@ -975,7 +992,7 @@ function AnySpendInner({
   );
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full"}>
+    <div className={"mx-auto w-[460px] max-w-full p-5"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails
@@ -1005,187 +1022,212 @@ function AnySpendInner({
   );
 
   const mainView = (
-    <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2"}>
-      {/* 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 className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
+      <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>
-            <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
           </div>
-        </div>
-      )}
-
-      {/* Tab section */}
-      <TabSection
-        activeTab={activeTab}
-        setActiveTab={tab => {
-          setActiveTab(tab);
-          // Reset payment methods when switching tabs
-          resetPaymentMethods();
-          setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-        }}
-        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={effectiveCryptoPaymentMethod}
-            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" }}
+        )}
+
+        {/* Tab section */}
+        <TabSection
+          activeTab={activeTab}
+          setActiveTab={tab => {
+            setActiveTab(tab);
+            // Reset payment methods when switching tabs
+            resetPaymentMethods();
+            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+          }}
+          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={effectiveCryptoPaymentMethod}
+              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={effectiveRecipientAddress}
+                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}
+              />
+            </motion.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);
+            }}
           >
-            <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);
-                }
+            <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 */}
+          {/* Receive section - Hidden when fiat tab is active */}
+          {activeTab === "crypto" && (
+            <CryptoReceiveSection
+              isDepositMode={false}
+              isBuyMode={isBuyMode}
+              effectiveRecipientAddress={effectiveRecipientAddress}
+              recipientName={recipientName || undefined}
+              onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
+              dstAmount={dstAmount}
+              dstToken={selectedDstToken}
+              selectedDstChainId={selectedDstChainId}
+              setSelectedDstChainId={setSelectedDstChainId}
+              setSelectedDstToken={setSelectedDstToken}
+              isSrcInputDirty={isSrcInputDirty}
+              onChangeDstAmount={value => {
+                setIsSrcInputDirty(false);
+                setDstAmount(value);
               }}
-              _recipientAddress={effectiveRecipientAddress}
-              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}
             />
-          </motion.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;
-            }
+        </div>
 
-            // 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);
-          }}
+        {/* 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")}
         >
-          <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}
-            effectiveRecipientAddress={effectiveRecipientAddress}
-            recipientName={recipientName || undefined}
-            onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
-            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")}
-          />
-        )}
+          <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 || effectiveRecipientAddress) ? (
+            <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>
-
-      {/* 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="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",
+              });
+            }
+          }}
         >
-          <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 || effectiveRecipientAddress) ? (
-          <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>
+          {mode == "page" && <BottomNavigation />}
+        </TabsPrimitive>
+      </div>
     </div>
   );
 
@@ -1218,7 +1260,7 @@ function AnySpendInner({
       }}
       onBack={navigateBack}
       recipientEnsName={globalWallet?.ensName}
-      recipientImageUrl={globalWallet?.meta?.icon}
+      recipientImageUrl={globalWalletImage}
     />
   );
 
@@ -1236,8 +1278,6 @@ function AnySpendInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={globalWallet}
       selectedPaymentMethod={effectiveCryptoPaymentMethod}
       setSelectedPaymentMethod={method => {
         // When user explicitly selects a payment method, save it

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

@@ -5,6 +5,7 @@ import {
   Input,
   StyleRoot,
   TextLoop,
+  toast,
   useHasMounted,
   useModalStore,
   useTokenBalance,
@@ -16,7 +17,7 @@ import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
+
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
 import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";