@b3dotfun/sdk 0.0.51-alpha.2 → 0.0.51-alpha.3

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

@@ -0,0 +1,96 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { StyleRoot } from "@b3dotfun/sdk/global-account/react";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import invariant from "invariant";
+import { encodeFunctionData } from "viem";
+import { base } from "viem/chains";
+import { B3_STAKING_CONTRACT, WETH_STAKING_CONTRACT } from "../../abis/upsideStaking";
+import { AnySpendCustom } from "./AnySpendCustom";
+
+function generateEncodedDataForStaking(amount: string, beneficiary: string, poolType: "b3" | "weth"): string {
+  invariant(BigInt(amount) > 0, "Amount must be greater than zero");
+  if (poolType === "weth") {
+    return encodeFunctionData({
+      abi: WETH_STAKING_CONTRACT,
+      functionName: "stakeFor",
+      args: [beneficiary as `0x${string}`, BigInt(amount)],
+    });
+  } else if (poolType === "b3") {
+    return encodeFunctionData({
+      abi: B3_STAKING_CONTRACT,
+      functionName: "stakeFor",
+      args: [beneficiary as `0x${string}`, BigInt(amount)],
+    });
+  }
+  throw new Error("Unsupported pool type");
+}
+
+export function AnySpendStakeUpside({
+  loadOrder,
+  mode = "modal",
+  beneficiaryAddress,
+  stakeAmount,
+  stakingContractAddress,
+  token,
+  poolType,
+  onSuccess,
+}: {
+  loadOrder?: string;
+  mode?: "modal" | "page";
+  beneficiaryAddress: string;
+  stakeAmount: string;
+  stakingContractAddress: string;
+  token: components["schemas"]["Token"];
+  poolType: "b3" | "weth";
+  onSuccess?: () => void;
+}) {
+  const header = () => (
+    <>
+      <div className="relative mx-auto size-32">
+        <img alt="token" className="size-full" src={token.metadata.logoURI || "https://cdn.b3.fun/b3-coin-3d.png"} />
+      </div>
+      <div className="from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t">
+        <div className="h-[60px] w-full" />
+        <div className="mb-1 flex w-full flex-col items-center gap-2 p-5">
+          <span className="font-sf-rounded text-2xl font-semibold">
+            Swap & Stake {stakeAmount ? formatTokenAmount(BigInt(stakeAmount), token.decimals) : ""} {token.symbol}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+
+  // Only generate encoded data if we have a valid beneficiary address
+  // This is used for the AnySpendCustom swap & stake flow
+  if (!beneficiaryAddress || beneficiaryAddress === "") {
+    return (
+      <StyleRoot>
+        <div className="bg-b3-react-background flex w-full flex-col items-center justify-center p-8">
+          <p className="font-medium text-yellow-600 dark:text-yellow-400">⚠️ Please connect your wallet to continue.</p>
+        </div>
+      </StyleRoot>
+    );
+  }
+
+  const encodedData = generateEncodedDataForStaking(stakeAmount, beneficiaryAddress, poolType);
+
+  return (
+    <AnySpendCustom
+      loadOrder={loadOrder}
+      mode={mode}
+      recipientAddress={beneficiaryAddress}
+      orderType={"custom"}
+      dstChainId={base.id}
+      dstToken={token}
+      dstAmount={stakeAmount}
+      contractAddress={stakingContractAddress}
+      encodedData={encodedData}
+      metadata={{
+        action: `stake ${token.symbol}`,
+      }}
+      header={header}
+      onSuccess={onSuccess}
+      showRecipient={true}
+    />
+  );
+}

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -9,6 +9,7 @@ import {
   OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
 import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
+import { AnySpendStakeUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpside";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -35,6 +36,7 @@ export function B3DynamicModal() {
     "anySpendJoinTournament",
     "anySpendFundTournament",
     "anySpendStakeB3",
+    "anySpendStakeUpside",
     "anySpendBuySpin",
     "anySpendOrderHistory",
     "signInWithB3",
@@ -49,6 +51,7 @@ export function B3DynamicModal() {
     "anySpendJoinTournament",
     "anySpendFundTournament",
     "anySpendStakeB3",
+    "anySpendStakeUpside",
     "anySpendBuySpin",
     "anySpendSignatureMint",
     "anySpendBondKit",
@@ -97,6 +100,8 @@ export function B3DynamicModal() {
         return <OrderHistory onBack={() => {}} mode="modal" />;
       case "anySpendStakeB3":
         return <AnySpendStakeB3 {...contentType} mode="modal" />;
+      case "anySpendStakeUpside":
+        return <AnySpendStakeUpside {...contentType} mode="modal" />;
       case "anySpendBuySpin":
         return <AnySpendBuySpin {...contentType} mode="modal" />;
       case "anySpendSignatureMint":

package/src/global-account/react/stores/useModalStore.ts

@@ -223,6 +223,27 @@ export interface AnySpendStakeB3Props extends BaseModalProps {
   onSuccess?: () => void;
 }
 
+/**
+ * Props for the AnySpend Stake Contract modal
+ * Handles token staking operations to a given contract
+ */
+export interface AnySpendStakeUpsideProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "anySpendStakeUpside";
+  /** Recipient address to stake B3 for */
+  beneficiaryAddress: string;
+  /** Stake amount */
+  stakeAmount: string;
+  /** Staking contract address */
+  stakingContractAddress: string;
+  /** Pool type for staking */
+  poolType: "b3" | "weth";
+  /** Token address to stake */
+  token: components["schemas"]["Token"];
+  /** Callback function called when the stake is successful */
+  onSuccess?: () => void;
+}
+
 /**
  * Props for the AnySpend Buy Spin modal
  * Handles spin wheel entry purchases
@@ -332,6 +353,7 @@ export type ModalContentType =
   | AnySpendFundTournamentProps
   | AnySpendOrderHistoryProps
   | AnySpendStakeB3Props
+  | AnySpendStakeUpsideProps
   | AnySpendBuySpinProps
   | AnySpendSignatureMintProps
   | AnySpendBondKitProps