@b3dotfun/sdk 0.0.7-alpha.16 → 0.0.7-alpha.17

package/dist/cjs/anyspend/react/components/AnySpendCustom.js

@@ -95,14 +95,15 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     const [activeTab, setActiveTab] = (0, react_2.useState)("crypto");
     // Get current user's wallet
     const currentWallet = (0, react_1.useAccountWallet)();
-    const recipientPropsProfile = (0, react_1.useBsmntProfile)({ address: recipientAddressProps });
-    const recipientAddress = recipientAddressProps || currentWallet.address;
-    const recipientEnsName = recipientAddressProps
-        ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-        : currentWallet.ensName;
-    const recipientImageUrl = recipientAddressProps
-        ? recipientPropsProfile.data?.avatar
-        : currentWallet.wallet.meta?.icon;
+    // Add state for recipient modal
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = (0, react_2.useState)(false);
+    // Add state for custom recipient
+    const [customRecipientAddress, setCustomRecipientAddress] = (0, react_2.useState)(recipientAddressProps);
+    // Update recipient logic to use custom recipient
+    const recipientAddress = customRecipientAddress || currentWallet.address;
+    const recipientPropsProfile = (0, react_1.useBsmntProfile)({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = (0, react_2.useState)(loadOrder);
     const [srcChainId, setSrcChainId] = (0, react_2.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
     // Get token list for token balance check
@@ -350,7 +351,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         ? "Receive NFT at"
                         : orderType === anyspend_1.OrderType.JoinTournament
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full justify-between border-none p-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -408,20 +409,22 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                     }
                                     : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
     // Return the TransitionPanel with all views
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
-                ? oat
-                    ? PanelView.ORDER_DETAILS
-                    : PanelView.LOADING
-                : activePanel === PanelView.ORDER_DETAILS
-                    ? PanelView.CONFIRM_ORDER
-                    : activePanel, className: (0, utils_1.cn)("w-full"), variants: {
-                enter: { x: 300, opacity: 0 },
-                center: { x: 0, opacity: 1 },
-                exit: { x: -300, opacity: 0 },
-            }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
-            ] }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.StyleRoot, { children: [(0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.CONFIRM_ORDER
+                        : activePanel, className: (0, utils_1.cn)("w-full"), variants: {
+                    enter: { x: 300, opacity: 0 },
+                    center: { x: 0, opacity: 1 },
+                    exit: { x: -300, opacity: 0 },
+                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
+                ] }), (0, jsx_runtime_1.jsx)(react_1.Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: (0, jsx_runtime_1.jsx)(react_1.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                                    setIsRecipientModalOpen(false);
+                                }, children: "Save" })] }) }) })] }));
 }

package/dist/cjs/anyspend/react/components/modals/EnterRecipientModal.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnterRecipientModal = EnterRecipientModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("../../../../global-account/react");
+const react_1 = require("../../../../global-account/react");
+const react_2 = require("react");
 function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress, }) {
-    const [modalRecipientAddress, setModalRecipientAddress] = (0, react_1.useState)(recipientAddress || "");
-    (0, react_1.useEffect)(() => {
+    const [modalRecipientAddress, setModalRecipientAddress] = (0, react_2.useState)(recipientAddress || "");
+    (0, react_2.useEffect)(() => {
         setModalRecipientAddress(recipientAddress || "");
     }, [recipientAddress]);
-    return ((0, jsx_runtime_1.jsx)(react_2.Dialog, { open: isOpenPasteRecipientAddress, onOpenChange: setIsOpenPasteRecipientAddress, children: (0, jsx_runtime_1.jsx)(react_2.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: modalRecipientAddress, onChange: e => setModalRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Dialog, { open: isOpenPasteRecipientAddress, onOpenChange: setIsOpenPasteRecipientAddress, children: (0, jsx_runtime_1.jsx)(react_1.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: modalRecipientAddress, onChange: e => setModalRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
                             setIsOpenPasteRecipientAddress(false);
                             setRecipientAddress(modalRecipientAddress);
                         }, children: "Save" })] }) }) }));

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { eqci, getDefaultToken, isCustomTxMetadata, isNftMetadata, isTournamentMetadata, NftType, OrderStatus, OrderType, RELAY_ETH_ADDRESS, USDC_BASE, useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions, } from "../../../anyspend/index.js";
-import { Badge, Button, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, TransitionPanel, useAccountWallet, useB3, useBsmntProfile, useHasMounted, useModalStore, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
+import { Badge, Button, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, TransitionPanel, useAccountWallet, useB3, useBsmntProfile, useHasMounted, useModalStore, useRouter, useSearchParamsSSR, useTokenBalancesByChain, Dialog, DialogContent, Input, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/index.js";
 import centerTruncate from "../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
@@ -89,14 +89,15 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const [activeTab, setActiveTab] = useState("crypto");
     // Get current user's wallet
     const currentWallet = useAccountWallet();
-    const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
-    const recipientAddress = recipientAddressProps || currentWallet.address;
-    const recipientEnsName = recipientAddressProps
-        ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-        : currentWallet.ensName;
-    const recipientImageUrl = recipientAddressProps
-        ? recipientPropsProfile.data?.avatar
-        : currentWallet.wallet.meta?.icon;
+    // Add state for recipient modal
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
+    // Add state for custom recipient
+    const [customRecipientAddress, setCustomRecipientAddress] = useState(recipientAddressProps);
+    // Update recipient logic to use custom recipient
+    const recipientAddress = customRecipientAddress || currentWallet.address;
+    const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = useState(loadOrder);
     const [srcChainId, setSrcChainId] = useState(isMainnet ? base.id : baseSepolia.id);
     // Get token list for token balance check
@@ -344,7 +345,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                         ? "Receive NFT at"
                         : orderType === OrderType.JoinTournament
                             ? "Join for"
-                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && _jsxs("span", { children: ["@", recipientEnsName] }), _jsx("span", { children: centerTruncate(recipientAddress) })] })] }), _jsx(ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [_jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && _jsxs("span", { children: ["@", recipientEnsName] }), _jsx("span", { children: centerTruncate(recipientAddress) })] })] }), _jsx(ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -402,20 +403,22 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                     }
                                     : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
     // Return the TransitionPanel with all views
-    return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
-                ? oat
-                    ? PanelView.ORDER_DETAILS
-                    : PanelView.LOADING
-                : activePanel === PanelView.ORDER_DETAILS
-                    ? PanelView.CONFIRM_ORDER
-                    : activePanel, className: cn("w-full"), variants: {
-                enter: { x: 300, opacity: 0 },
-                center: { x: 0, opacity: 1 },
-                exit: { x: -300, opacity: 0 },
-            }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                _jsx("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                _jsx("div", { className: "w-full", children: historyView }, "history-view"),
-                _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                _jsx("div", { className: "w-full", children: loadingView }, "loading-view"),
-            ] }) }));
+    return (_jsxs(StyleRoot, { children: [_jsx(TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.CONFIRM_ORDER
+                        : activePanel, className: cn("w-full"), variants: {
+                    enter: { x: 300, opacity: 0 },
+                    center: { x: 0, opacity: 1 },
+                    exit: { x: -300, opacity: 0 },
+                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                    _jsx("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
+                    _jsx("div", { className: "w-full", children: historyView }, "history-view"),
+                    _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                    _jsx("div", { className: "w-full", children: loadingView }, "loading-view"),
+                ] }), _jsx(Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: _jsx(DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "text-as-primary font-semibold", children: "To address" }), _jsx(Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                                    setIsRecipientModalOpen(false);
+                                }, children: "Save" })] }) }) })] }));
 }

package/dist/esm/anyspend/react/components/modals/EnterRecipientModal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { Dialog, DialogContent, Input, ShinyButton } from "../../../../global-account/react/index.js";
+import { useEffect, useState } from "react";
 export function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress, }) {
     const [modalRecipientAddress, setModalRecipientAddress] = useState(recipientAddress || "");
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.7-alpha.16",
+  "version": "0.0.7-alpha.17",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -43,6 +43,9 @@ import {
   useRouter,
   useSearchParamsSSR,
   useTokenBalancesByChain,
+  Dialog,
+  DialogContent,
+  Input,
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
@@ -203,15 +206,17 @@ export function AnySpendCustom({
   // Get current user's wallet
   const currentWallet = useAccountWallet();
 
-  const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
+  // Add state for recipient modal
+  const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
 
-  const recipientAddress = recipientAddressProps || currentWallet.address;
-  const recipientEnsName = recipientAddressProps
-    ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-    : currentWallet.ensName;
-  const recipientImageUrl = recipientAddressProps
-    ? recipientPropsProfile.data?.avatar
-    : currentWallet.wallet.meta?.icon;
+  // Add state for custom recipient
+  const [customRecipientAddress, setCustomRecipientAddress] = useState<string | undefined>(recipientAddressProps);
+
+  // Update recipient logic to use custom recipient
+  const recipientAddress = customRecipientAddress || currentWallet.address;
+  const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
+  const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+  const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
 
@@ -505,7 +510,11 @@ export function AnySpendCustom({
                 : "Recipient"}
         </div>
         <div>
-          <Button variant="outline" className="w-full justify-between border-none p-0">
+          <Button
+            variant="outline"
+            className="w-full justify-between border-none p-0"
+            onClick={() => setIsRecipientModalOpen(true)}
+          >
             <div className="flex items-center gap-2">
               {recipientImageUrl && (
                 <img
@@ -864,6 +873,32 @@ export function AnySpendCustom({
           </div>,
         ]}
       </TransitionPanel>
+
+      {/* Add EnterRecipientModal */}
+      <Dialog open={isRecipientModalOpen} onOpenChange={setIsRecipientModalOpen}>
+        <DialogContent className="w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5">
+          <div className="flex flex-col gap-3">
+            <div className="text-as-primary font-semibold">To address</div>
+            <Input
+              value={customRecipientAddress || ""}
+              onChange={e => setCustomRecipientAddress(e.target.value)}
+              placeholder="Enter address"
+              className="h-12 rounded-lg"
+              spellCheck={false}
+            />
+            <ShinyButton
+              accentColor={"hsl(var(--as-brand))"}
+              textColor="text-white"
+              className="w-full rounded-lg"
+              onClick={() => {
+                setIsRecipientModalOpen(false);
+              }}
+            >
+              Save
+            </ShinyButton>
+          </div>
+        </DialogContent>
+      </Dialog>
     </StyleRoot>
   );
 }

package/src/anyspend/react/components/modals/EnterRecipientModal.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 import { Dialog, DialogContent, Input, ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { useEffect, useState } from "react";
 
 export function EnterRecipientModal({
   isOpenPasteRecipientAddress,