[TKN-740, TKN-724] Improve tx-sender browser wallet compatibility and add Next.js swap example (#1076)

* draft: swap example

* add comments

* tailwind

* build fix

* changeset

* lint

* Fix build. Format.

* Update swap example (#1109)

* Update project README

* Base

* Enable env var

* Improve how tx-sender works with browser wallets and add tx-sender to example

* Fix tests

* Add changeset for tx-sender

* Format

* Replace custom TxMessage type with Solana-native CompilableTransactionMessage across all transaction building utilities. Narrow feePayer type from TransactionSigner to KeyPairSigner | NoopSigner and use built-in isKeyPairSigner helper. Conditionally apply maxRetries only when resendOnPoll is enabled to optimize RPC usage.

* Format

* Fix test

* Fmt. Fix yarn.lock.

* Reduced deps in nextjs example

---------

Co-authored-by: calintje <[email protected]>
Co-authored-by: Calin <[email protected]>

Author: boosik-sol

.changeset/free-crews-reply.md

@@ -0,0 +1,5 @@
+---
+"@orca-so/whirlpools-example-ts-next": patch
+---
+
+Added Next.js example demonstrating browser wallet integration with swap functionality.

.changeset/tx-sender-browser-wallet-support.md

@@ -0,0 +1,30 @@
+---
+"@orca-so/tx-sender": major
+---
+
+Improve browser wallet compatibility and add configurable transaction sending strategy
+
+**Browser Wallet Support:**
+- `buildTransaction` now accepts `TransactionSigner` (KeyPairSigner or NoopSigner) and automatically detects signer type
+- Performs partial signing for NoopSigner (browser wallets), full signing for KeyPairSigner (Node.js)
+- `sendTransaction` now accepts `(FullySignedTransaction | Transaction) & TransactionWithLifetime` to support both workflows
+
+**Configurable RPC Usage:**
+- Added `pollIntervalMs` (default: 0) and `resendOnPoll` (default: true) options to `setRpc()`
+- Allows control over confirmation polling frequency and transaction resending behavior
+- Default settings optimized for premium RPCs; public RPC users can configure conservative settings
+
+**Breaking Changes:**
+- `buildTransaction` no longer accepts `Address` string parameter. Must pass `TransactionSigner` instance to ensure same object is used for both instruction building and transaction building (required by Solana's `@solana/kit` identity checks).
+
+**Migration:**
+```typescript
+// Before
+await buildTransaction(instructions, "7Td...zzc");
+
+// After
+const noopSigner = createNoopSigner(address("7Td...zzc"));
+const { instructions } = await swapInstructions(rpc, params, pool, 100, noopSigner);
+await buildTransaction(instructions, noopSigner);
+```
+

Cargo.lock

@@ -0,0 +1 @@
+NEXT_PUBLIC_RPC_URL=

docs/rust/Cargo.lock

@@ -1,4 +1,37 @@
 # Whirlpools Next.js Example
 
-This example demonstrates how to use the Whirlpools SDK in a Next.js application. Since the Orca SDK suite uses WebAssembly, the `experiments.asyncWebAssembly` feature of webpack must be enabled and `@orca-so/whirlpools-core` needs to be added as a `serverExternalPackages`. See `next.config.js` for more details.
+This example demonstrates how to use the Orca Whirlpools SDK in a Next.js application to build a token swap interface with wallet integration.
 
+## Features
+
+- Wallet connection using Wallet Standard
+- Token swaps (SOL ↔ USDC) with Orca's concentrated liquidity pools
+- Real-time transaction status tracking
+
+## Getting Started
+
+After [building the repository](../../../README.md#getting-started), start the development server:
+
+```bash
+yarn workspace @orca-so/whirlpools-example-ts-next start
+```
+
+Navigate to [http://localhost:3000](http://localhost:3000).
+
+## Using as a Standalone Project
+
+This example references the local version of the Whirlpools SDK via the monorepo workspace (`"@orca-so/whirlpools": "*"`). 
+
+To use this as a standalone project outside the monorepo:
+
+1. Copy this directory to your desired location
+2. Update `package.json` to use the published package version:
+   ```json
+   "@orca-so/whirlpools": "^{current version}"
+   ```
+3. Run `npm install` or `yarn install`
+4. Start the development server with `npm run start` or `yarn start`
+
+## WebAssembly Configuration
+
+The Orca SDK uses WebAssembly for performance-critical operations. See `next.config.js` for the required webpack configuration that enables `experiments.asyncWebAssembly` and adds `@orca-so/whirlpools-core` to `serverExternalPackages`.

examples/rust-sdk/whirlpool_repositioning_bot/Cargo.lock

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { useWallets } from "@wallet-standard/react";
+import { useWallet } from "../contexts/WalletContext";
+import { WalletListModal } from "./WalletListModal";
+
+export function ConnectWalletButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const wallets = useWallets();
+  const { account, isConnected } = useWallet();
+
+  const solanaWallets = wallets.filter((wallet) =>
+    wallet.chains.some((chain) => chain.startsWith("solana:")),
+  );
+
+  if (isConnected && account) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 bg-green-50 text-green-700 rounded-lg border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800">
+        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+        <span className="font-mono text-sm">
+          {account.address.slice(0, 4)}...{account.address.slice(-4)}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-10 px-4 py-2"
+      >
+        Connect Wallet
+      </button>
+      <WalletListModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        wallets={solanaWallets}
+      />
+    </>
+  );
+}

examples/ts-sdk/next/.env.example

@@ -0,0 +1,160 @@
+"use client";
+
+import {
+  useConnect,
+  useDisconnect,
+  type UiWallet,
+} from "@wallet-standard/react";
+import { useEffect } from "react";
+import { useWallet } from "../contexts/WalletContext";
+
+interface WalletListModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  wallets: UiWallet[];
+}
+
+export function WalletListModal({
+  isOpen,
+  onClose,
+  wallets,
+}: WalletListModalProps) {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black/80" onClick={onClose} />
+
+      {/* Modal Content */}
+      <div
+        className="relative z-50 w-full max-w-lg m-4 bg-white p-6 shadow-lg duration-200 border border-gray-200 rounded-lg animate-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+              fill="currentColor"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            />
+          </svg>
+          <span className="sr-only">Close</span>
+        </button>
+
+        {/* Header */}
+        <div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
+          <h3 className="text-lg font-semibold leading-none tracking-tight text-gray-900">
+            Connect Wallet
+          </h3>
+          <p className="text-sm text-gray-600">
+            Select a wallet to connect to.
+          </p>
+        </div>
+
+        {/* Wallet List */}
+        <div className="grid gap-2">
+          {wallets.map((wallet) => (
+            <WalletListItem
+              key={wallet.name}
+              wallet={wallet}
+              onConnect={onClose}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface WalletItemProps {
+  wallet: UiWallet;
+  onConnect?: () => void;
+}
+
+export const WalletListItem = ({ wallet, onConnect }: WalletItemProps) => {
+  const [isConnecting, connect] = useConnect(wallet);
+  const [isDisconnecting, disconnect] = useDisconnect(wallet);
+  const { setConnectedWallet, isConnected } = useWallet();
+
+  useEffect(() => {
+    if (isDisconnecting) {
+      setConnectedWallet(null);
+    }
+  }, [isDisconnecting, setConnectedWallet]);
+
+  const handleConnect = async () => {
+    try {
+      const connectedAccount = await connect();
+      if (!connectedAccount.length) {
+        console.warn(`Connect to ${wallet.name} but there are no accounts.`);
+        return connectedAccount;
+      }
+
+      const first = connectedAccount[0];
+      setConnectedWallet({ account: first, wallet });
+      onConnect?.(); // Close modal after successful connection
+      return connectedAccount;
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+      return [];
+    }
+  };
+
+  return (
+    <button
+      className="flex items-center justify-between w-full p-3 rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-blue-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      onClick={isConnected ? disconnect : handleConnect}
+      disabled={isConnecting}
+    >
+      <div className="flex items-center gap-3">
+        {wallet.icon ? (
+          <img
+            src={wallet.icon}
+            alt={wallet.name}
+            className="w-8 h-8 rounded-full"
+          />
+        ) : (
+          <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
+            <span className="text-sm font-medium text-gray-600">
+              {wallet.name.charAt(0).toUpperCase()}
+            </span>
+          </div>
+        )}
+        <div className="text-left">
+          <div className="font-medium text-gray-900">
+            {isConnecting ? "Connecting..." : wallet.name}
+          </div>
+          <div className="text-sm text-gray-500">
+            {isConnecting ? "Please wait..." : "Click to connect"}
+          </div>
+        </div>
+      </div>
+      {isConnecting && (
+        <div className="w-4 h-4 border-2 border-gray-200 border-t-blue-600 rounded-full animate-spin" />
+      )}
+    </button>
+  );
+};