@b3dotfun/sdk 0.0.40-test.6 → 0.0.41-alpha.0

package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -7,7 +7,8 @@ export declare enum PanelView {
     FIAT_PAYMENT_METHOD = 2,
     RECIPIENT_SELECTION = 3,
     ORDER_DETAILS = 4,
-    LOADING = 5
+    LOADING = 5,
+    POINTS_DETAIL = 6
 }
 interface UseAnyspendFlowProps {
     paymentType?: "crypto" | "fiat";
@@ -140,6 +141,8 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
             };
             timeEstimate?: number;
             userBalance?: string;
+            pointsAmount?: number;
+            pointsMultiplier?: number;
         };
         statusCode: number;
     } | undefined;

package/dist/types/anyspend/react/providers/AnyspendProvider.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
+import { FeatureFlags } from "../contexts/FeatureFlagsContext";
 interface AnyspendProviderProps {
     children: ReactNode;
+    featureFlags?: FeatureFlags;
 }
 /**
  * AnyspendProvider is a top-level provider that wraps your application to provide
@@ -12,17 +14,18 @@ interface AnyspendProviderProps {
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
  * - Handles Stripe payment redirects and modal state
+ * - Provides feature flags configuration
  *
  * @example
  * ```tsx
  * function App() {
  *   return (
- *     <AnyspendProvider>
+ *     <AnyspendProvider featureFlags={{ showPoints: true }}>
  *       <YourApp />
  *     </AnyspendProvider>
  *   );
  * }
  * ```
  */
-export declare const AnyspendProvider: ({ children }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnyspendProvider: ({ children, featureFlags }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/providers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./AnyspendProvider";
 export * from "./StripeRedirectHandler";
+export { useFeatureFlags, type FeatureFlags } from "../contexts/FeatureFlagsContext";

package/dist/types/anyspend/services/anyspend.d.ts

@@ -28,7 +28,7 @@ export declare const anyspendService: {
     }>;
     getOrderAndTransactions: (orderId: string | undefined) => Promise<GetOrderAndTxsResponse>;
     getOrderHistory: (creatorAddress: string | undefined, limit?: number, offset?: number) => Promise<GetOrderHistoryResponse>;
-    getCoinbaseOnrampOptions: (country: string, visitorData?: VisitorData) => Promise<GetCoinbaseOnrampOptionsResponse>;
+    getCoinbaseOnrampOptions: (country: string | undefined, visitorData?: VisitorData) => Promise<GetCoinbaseOnrampOptionsResponse>;
     checkStripeSupport: (usdAmount?: string, visitorData?: VisitorData) => Promise<{
         stripeOnramp: boolean;
         stripeWeb2: components["schemas"]["StripeWeb2Support"];

package/dist/types/anyspend/types/api.d.ts

@@ -503,11 +503,16 @@ export interface paths {
                          * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
                          */
                         dstTokenAddress: string;
+                        /**
+                         * @description Recipient address
+                         * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                         */
+                        recipientAddress?: string;
                         /**
                          * @description Type of trade execution
                          * @enum {string}
                          */
-                        tradeType: "EXACT_INPUT" | "EXPECTED_OUTPUT" | "EXACT_OUTPUT";
+                        tradeType: "EXACT_INPUT" | "EXACT_OUTPUT";
                         /**
                          * @description Amount to quote
                          * @example 1000000000000000000
@@ -544,6 +549,11 @@ export interface paths {
                          * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
                          */
                         dstTokenAddress: string;
+                        /**
+                         * @description Recipient address
+                         * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                         */
+                        recipientAddress?: string;
                         /** @description Custom payload for execution */
                         payload: {
                             /** @description Encoded transaction data */
@@ -567,6 +577,11 @@ export interface paths {
                         dstChain: number;
                         srcTokenAddress: string;
                         dstTokenAddress: string;
+                        /**
+                         * @description Recipient address
+                         * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                         */
+                        recipientAddress?: string;
                         /** @enum {string} */
                         onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
                         contractAddress: string;
@@ -581,6 +596,11 @@ export interface paths {
                         dstChain: number;
                         srcTokenAddress: string;
                         dstTokenAddress: string;
+                        /**
+                         * @description Recipient address
+                         * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                         */
+                        recipientAddress?: string;
                         /** @enum {string} */
                         onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
                         contractAddress: string;
@@ -592,6 +612,11 @@ export interface paths {
                         dstChain: number;
                         srcTokenAddress: string;
                         dstTokenAddress: string;
+                        /**
+                         * @description Recipient address
+                         * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                         */
+                        recipientAddress?: string;
                         /** @enum {string} */
                         onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
                         contractAddress: string;
@@ -622,6 +647,11 @@ export interface paths {
                          * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
                          */
                         dstTokenAddress: string;
+                        /**
+                         * @description Recipient address
+                         * @example 0x55c71fca5e01cf246718748ae540473e608d0282
+                         */
+                        recipientAddress?: string;
                         /**
                          * @description Amount to quote
                          * @example 1000000000000000000
@@ -798,6 +828,16 @@ export interface paths {
                                  * @example 0
                                  */
                                 userBalance?: string;
+                                /**
+                                 * @description Anyspend points that will be awarded for the order
+                                 * @example 100
+                                 */
+                                pointsAmount?: number;
+                                /**
+                                 * @description Multiplier applied to points that will be awarded for the order
+                                 * @example 1.5
+                                 */
+                                pointsMultiplier?: number;
                             };
                             /** @example 200 */
                             statusCode: number;
@@ -1077,6 +1117,11 @@ export interface components {
              * @example 990000
              */
             actualDstAmount: string | null;
+            /**
+             * @description Amount in after fee
+             * @example 990000
+             */
+            amountInAfterFee: string | null;
         };
         /** @description HypeDuel-specific payload */
         HypeDuelPayload: {
@@ -1090,6 +1135,11 @@ export interface components {
              * @example 990000
              */
             actualDstAmount: string | null;
+            /**
+             * @description Amount in after fee
+             * @example 990000
+             */
+            amountInAfterFee: string | null;
         };
         /** @description Custom execution payload */
         CustomPayload: {

package/dist/types/bondkit/bondkitToken.d.ts

@@ -1,6 +1,7 @@
 import type { Address, EIP1193Provider, GetContractReturnType, Hex, PublicClient, WalletClient } from "viem";
 import { BondkitTokenABI } from "./abis";
-import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions, TokenDetails, TokenStatus, TransactionResponse } from "./types";
+import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions, SwapQuote, TokenDetails, TransactionResponse } from "./types";
+import { TokenStatus } from "./types";
 type ExecuteWriteOptions = {
     value?: bigint;
     gas?: bigint;
@@ -18,7 +19,8 @@ export declare class BondkitToken {
     private walletClientInstance;
     private connectedProvider?;
     private tradingToken?;
-    constructor(contractAddress: string, walletKey?: string);
+    private swapService?;
+    constructor(contractAddress: string, walletKey?: string, rpcUrl?: string);
     connect(provider?: EIP1193Provider): boolean;
     /**
      * Connects using an EIP-1193 provider and requests accounts, selecting the first one.
@@ -69,5 +71,38 @@ export declare class BondkitToken {
     migrateToDex(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
     transferTokenOwnership(newOwner: Address, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
     renounceTokenOwnership(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
+    /**
+     * Get the swap service instance (lazy initialization)
+     */
+    private getSwapService;
+    /**
+     * Check if DEX swapping is available (token must be in Dex phase)
+     */
+    isSwapAvailable(): Promise<boolean | undefined>;
+    /**
+     * Get swap quote for trading token → bondkit token
+     */
+    getSwapQuoteForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
+    /**
+     * Get swap quote for bondkit token → trading token
+     */
+    getSwapQuoteForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
+    /**
+     * Swap trading token for bondkit token
+     */
+    swapTradingTokenForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
+    /**
+     * Swap bondkit token for trading token
+     */
+    swapBondkitTokenForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
+    /**
+     * Helper method to get trading token decimals
+     */
+    private getTradingTokenDecimals;
+    /**
+     * Get trading token symbol
+     * @param tradingTokenAddress Optional trading token address to avoid fetching it again
+     */
+    getTradingTokenSymbol(tradingTokenAddress?: Address): Promise<string | undefined>;
 }
 export {};

package/dist/types/bondkit/bondkitTokenFactory.d.ts

@@ -10,7 +10,7 @@ export declare class BondkitTokenFactory {
     private rpcUrl;
     private walletClientInstance;
     private connectedProvider?;
-    constructor(chainId: SupportedChainId, walletKey?: string);
+    constructor(chainId: SupportedChainId, walletKey?: string, rpcUrl?: string);
     connect(provider?: EIP1193Provider): boolean;
     /**
      * Connects using an EIP-1193 provider and requests accounts, selecting the first one.

package/dist/types/bondkit/config.d.ts

@@ -7,4 +7,4 @@ export interface Config {
     apiEndpoint: string;
 }
 export type SupportedChainId = typeof base.id;
-export declare const getConfig: (chainId: number) => Config;
+export declare const getConfig: (chainId: number, rpcUrl?: string) => Config;

package/dist/types/bondkit/constants.d.ts

@@ -1,3 +1,7 @@
 import type { Address } from "viem";
 export declare const BaseBondkitTokenFactoryContractAddress: Address;
 export declare const BaseMainnetRpcUrl = "https://base-rpc.publicnode.com";
+export declare const UniversalRouterAddress: Address;
+export declare const QuoterAddress: Address;
+export declare const Permit2Address: Address;
+export declare const B3TokenAddress: Address;

package/dist/types/bondkit/index.d.ts

@@ -4,4 +4,5 @@ export * from "./config";
 export * from "./constants";
 export * from "./types";
 export * from "./abis";
+export { BondkitSwapService } from "./swapService";
 export { default as TradingView } from "./components/TradingView";

package/dist/types/bondkit/swapService.d.ts

@@ -0,0 +1,43 @@
+import type { Address, WalletClient } from "viem";
+import type { SwapQuote } from "./types";
+interface SwapParams {
+    tokenIn: Address;
+    tokenOut: Address;
+    amountIn: string;
+    tokenInDecimals: number;
+    tokenOutDecimals: number;
+    slippageTolerance: number;
+    recipient: Address;
+    deadline?: number;
+}
+/**
+ * Internal swap service for handling Uniswap V4 swaps between trading token and bondkit token
+ */
+export declare class BondkitSwapService {
+    private v4Config;
+    private configInitialized;
+    private readonly bondkitTokenAddress;
+    private readonly publicClient;
+    constructor(bondkitTokenAddress: Address);
+    /**
+     * Initialize V4 pool configuration from bondkit token contract
+     */
+    private initializeV4Config;
+    /**
+     * Get V4 pool configuration
+     */
+    private getV4Config;
+    /**
+     * Handle token approvals for swap
+     */
+    private handleTokenApprovals;
+    /**
+     * Get swap quote
+     */
+    getSwapQuote(params: SwapParams): Promise<SwapQuote | null>;
+    /**
+     * Execute swap transaction
+     */
+    executeSwap(params: SwapParams, walletClient: WalletClient): Promise<string | null>;
+}
+export {};

package/dist/types/bondkit/types.d.ts

@@ -49,10 +49,9 @@ export type DexMigrationEventArgs = {
     ethForFeeRecipient: bigint;
 };
 export declare enum TokenStatus {
-    Inactive = 0,// Assuming mapping from ABI, verify actual enum values if specified elsewhere
-    BondingPhase = 1,
-    DexPhase = 2,
-    Migrated = 3
+    Uninitialized = 0,
+    Bonding = 1,
+    Dex = 2
 }
 export interface GetTransactionHistoryOptions {
     userAddress?: Address;
@@ -80,3 +79,10 @@ export interface TransactionResponse {
     skip: number;
     data: Transaction[];
 }
+export interface SwapQuote {
+    amountOut: string;
+    amountOutMin: string;
+    priceImpact: string;
+    executionPrice: string;
+    fee: string;
+}

package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -6,7 +6,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, partnerId, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -18,6 +18,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
         style?: React.CSSProperties;
     };
     clientType?: ClientType;
+    rpcUrls?: Record<number, string>;
     partnerId?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**

package/dist/types/global-account/react/hooks/index.d.ts

@@ -14,6 +14,7 @@ export { useExchangeRate } from "./useExchangeRate";
 export { useFirstEOA } from "./useFirstEOA";
 export { useGetAllTWSigners, type TWSignerWithMetadata } from "./useGetAllTWSigners";
 export { useGetGeo } from "./useGetGeo";
+export { useGlobalAccount } from "./useGlobalAccount";
 export { useHandleConnectWithPrivy } from "./useHandleConnectWithPrivy";
 export { useHasMounted } from "./useHasMounted";
 export { useIsMobile } from "./useIsMobile";

package/dist/types/global-account/react/hooks/useGlobalAccount.d.ts

@@ -0,0 +1,6 @@
+import { Wallet } from "thirdweb/wallets";
+export declare function useGlobalAccount(): {
+    account: Wallet | undefined;
+    address: string | undefined;
+    info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+};

package/dist/types/shared/utils/fetchBalances.d.ts

@@ -13,4 +13,4 @@ export interface AssetBalance {
     totalBalance: string;
     chainBalances: ChainBalance[];
 }
-export declare const fetchBalances: (address: string, testnet?: boolean) => Promise<AssetBalance[]>;
+export declare const fetchBalances: (address: string | undefined, testnet?: boolean) => Promise<AssetBalance[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.40-test.6",
+  "version": "0.0.41-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/constants/index.ts

@@ -96,5 +96,3 @@ export const VENDOR_DISPLAY_NAMES = {
   stripe: "Stripe",
   unknown: "Unknown Vendor",
 } as const;
-
-export const DEPOSIT_HYPE_ACTION = "deposit_hype";

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

@@ -38,9 +38,9 @@ import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
-import { OrderStatus } from "./common/OrderStatus";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 
@@ -60,6 +60,7 @@ export enum PanelView {
   RECIPIENT_SELECTION,
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
+  POINTS_DETAIL,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -72,6 +73,12 @@ export function AnySpend(props: {
   recipientAddress?: string;
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
+  /**
+   * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+   * 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();
 
@@ -90,6 +97,8 @@ function AnySpendInner({
   loadOrder,
   hideTransactionHistoryButton,
   recipientAddress: recipientAddressFromProps,
+  onTokenSelect,
+  onSuccess,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -98,6 +107,8 @@ function AnySpendInner({
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
   recipientAddress?: string;
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  onSuccess?: (txHash?: string) => void;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -438,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,
@@ -449,6 +461,7 @@ function AnySpendInner({
           type: "swap",
           tradeType: "EXACT_INPUT",
           amount: srcAmountOnrampInWei,
+          recipientAddress,
           onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         },
   );
@@ -506,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;
@@ -807,22 +828,21 @@ function AnySpendInner({
     <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
-          <>
-            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-            <OrderDetails
-              mode={mode}
-              order={oat.data.order}
-              depositTxs={oat.data.depositTxs}
-              relayTxs={oat.data.relayTxs}
-              executeTx={oat.data.executeTx}
-              refundTxs={oat.data.refundTxs}
-              onBack={() => {
-                setOrderId(undefined);
-                setActivePanel(PanelView.MAIN);
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
-              }}
-            />
-          </>
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            onBack={() => {
+              setOrderId(undefined);
+              setActivePanel(PanelView.MAIN);
+              setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
+            }}
+          />
         )}
         {/* {mode === "page" && <div className="h-12" />} */}
       </div>
@@ -871,6 +891,7 @@ function AnySpendInner({
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
             anyspendQuote={anyspendQuote}
+            onTokenSelect={onTokenSelect}
           />
         ) : (
           <motion.div
@@ -892,6 +913,8 @@ function AnySpendInner({
               fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
               recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
               hideDstToken={isBuyMode}
+              anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           </motion.div>
         )}
@@ -951,6 +974,7 @@ function AnySpendInner({
               setDstAmount(value);
             }}
             anyspendQuote={anyspendQuote}
+            onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
           />
         )}
       </div>
@@ -1062,6 +1086,13 @@ function AnySpendInner({
     />
   );
 
+  const pointsDetailView = (
+    <PointsDetailPanel
+      pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+      onBack={() => setActivePanel(PanelView.MAIN)}
+    />
+  );
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
@@ -1117,6 +1148,9 @@ function AnySpendInner({
             <div key="fiat-payment-method-view" className={cn(mode === "page" && "p-6")}>
               {fiatPaymentMethodView}
             </div>,
+            <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
+              {pointsDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

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}