@coin-voyage/swapkit 0.3.0 → 0.4.0

package/LICENSE

@@ -1,8 +1,8 @@
-Copyright (c) 2026 Coin Voyage
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Copyright (c) 2026 Coin Voyage
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,68 +1,68 @@
-# @coin-voyage/swapkit
-
-Embeddable Coin Voyage swap UI for React applications. SwapKit uses styled-components and does not require Tailwind CSS.
-
-## Installation
-
-```sh
-pnpm add @coin-voyage/swapkit @tanstack/react-query react react-dom styled-components
-```
-
-Install the wallet peer dependencies listed in this package's `package.json` for the chains your application supports.
-
-## Usage
-
-```tsx
-import { Swap, SwapKitProvider, WalletProvider } from "@coin-voyage/swapkit"
-
-export function App() {
-  return (
-    <WalletProvider>
-      <SwapKitProvider apiKey={process.env.NEXT_PUBLIC_COIN_VOYAGE_API_KEY!} environment="development" mode="dark">
-        <Swap
-          defaultSourceCurrency={{ chain_id: 1 }}
-          defaultDestinationCurrency={{
-            chain_id: 30000000000001,
-            address: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
-          }}
-        />
-      </SwapKitProvider>
-    </WalletProvider>
-  )
-}
-```
-
-`SwapKitProvider` deliberately uses the public API client and never accepts an admin signing key. It must be rendered
-inside `WalletProvider`, which SwapKit re-exports from its canonical implementation in `@coin-voyage/crypto/wallets`.
-The wallet provider supplies React Query and the supported chain contexts, while reusing a compatible host Query
-Client when one already exists.
-
-`Swap` optionally accepts `defaultSourceCurrency`, `defaultDestinationCurrency`, and `defaultSlippageBps`, plus
-`onComplete` and `onError` callbacks for host notifications. Currency defaults use `{ chain_id, address? }`; token
-addresses are matched case-insensitively. Slippage is an integer from `0` to `10000` basis points.
-
-When `defaultSlippageBps` is omitted, slippage starts in Auto mode and SwapKit lets the quote service choose the
-appropriate tolerance. The custom control retains a `1%` draft. Supplying `defaultSlippageBps` starts the widget in
-Custom mode and sends that value with quote and execution requests.
-
-Defaults are read once when a widget mounts. Changing them later does not interrupt an in-progress swap; remount the
-widget with a new React `key` to apply a new set of defaults. Unsupported defaults fall back to the normal automatic
-selection.
-
-### Theming
-
-Use `mode="light"` or `mode="dark"`. The optional `theme` prop overrides individual widget colors:
-
-```tsx
-<SwapKitProvider apiKey={apiKey} mode="dark" theme={{ accent: "#7c3aed", radius: "18px" }}>
-  <Swap />
-</SwapKitProvider>
-```
-
-## Development
-
-```sh
-pnpm --filter @coin-voyage/swapkit test
-pnpm --filter @coin-voyage/swapkit type-check
-pnpm --filter @coin-voyage/swapkit build
-```
+# @coin-voyage/swapkit
+
+Embeddable Coin Voyage swap UI for React applications. SwapKit uses styled-components and does not require Tailwind CSS.
+
+## Installation
+
+```sh
+pnpm add @coin-voyage/swapkit @tanstack/react-query react react-dom styled-components
+```
+
+Install the wallet peer dependencies listed in this package's `package.json` for the chains your application supports.
+
+## Usage
+
+```tsx
+import { Swap, SwapKitProvider, WalletProvider } from "@coin-voyage/swapkit"
+
+export function App() {
+  return (
+    <WalletProvider>
+      <SwapKitProvider apiKey={process.env.NEXT_PUBLIC_COIN_VOYAGE_API_KEY!} environment="development" mode="dark">
+        <Swap
+          defaultSourceCurrency={{ chain_id: 1 }}
+          defaultDestinationCurrency={{
+            chain_id: 30000000000001,
+            address: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+          }}
+        />
+      </SwapKitProvider>
+    </WalletProvider>
+  )
+}
+```
+
+`SwapKitProvider` deliberately uses the public API client and never accepts an admin signing key. It must be rendered
+inside `WalletProvider`, which SwapKit re-exports from its canonical implementation in `@coin-voyage/crypto/wallets`.
+The wallet provider supplies React Query and the supported chain contexts, while reusing a compatible host Query
+Client when one already exists.
+
+`Swap` optionally accepts `defaultSourceCurrency`, `defaultDestinationCurrency`, and `defaultSlippageBps`, plus
+`onComplete` and `onError` callbacks for host notifications. Currency defaults use `{ chain_id, address? }`; token
+addresses are matched case-insensitively. Slippage is an integer from `0` to `10000` basis points.
+
+When `defaultSlippageBps` is omitted, slippage starts in Auto mode and SwapKit lets the quote service choose the
+appropriate tolerance. The custom control retains a `1%` draft. Supplying `defaultSlippageBps` starts the widget in
+Custom mode and sends that value with quote and execution requests.
+
+Defaults are read once when a widget mounts. Changing them later does not interrupt an in-progress swap; remount the
+widget with a new React `key` to apply a new set of defaults. Unsupported defaults fall back to the normal automatic
+selection.
+
+### Theming
+
+Use `mode="light"` or `mode="dark"`. The optional `theme` prop overrides individual widget colors:
+
+```tsx
+<SwapKitProvider apiKey={apiKey} mode="dark" theme={{ accent: "#7c3aed", radius: "18px" }}>
+  <Swap />
+</SwapKitProvider>
+```
+
+## Development
+
+```sh
+pnpm --filter @coin-voyage/swapkit test
+pnpm --filter @coin-voyage/swapkit type-check
+pnpm --filter @coin-voyage/swapkit build
+```

package/dist/components/execution-modal.d.ts

@@ -1,4 +1,4 @@
-import type { SwapStage } from "../lib/execution";
+import { type SwapStage } from "../lib/execution";
 export declare function ExecutionModal({ stage, onClose }: {
     stage: SwapStage;
     onClose: () => void;

package/dist/components/execution-modal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainExplorerTxUrl, getChainName } from "@coin-voyage/shared/chain";
+import { deliversInSwapTransaction } from "../lib/execution";
 import { AlertCircleIcon, ArrowRightIcon, CheckIcon, StatusDot, WarningIcon } from "./icons";
 import { Modal } from "./modal";
 import { ExecutionContent, ExecutionState, ExplorerLink, ProgressConnector, ProgressItem, ProgressLabel, ProgressList, ProgressMarker, ProgressMarkerColumn, ProgressText, RouteArrow, Spinner, TokenAmount, TokenRoute, } from "./styles";
@@ -79,7 +80,10 @@ export function ExecutionModal({ stage, onClose }) {
     const open = stage.kind !== "idle";
     const swapData = "swapData" in stage ? stage.swapData : null;
     const preventDismiss = stage.kind !== "done" && stage.kind !== "refunded" && stage.kind !== "error";
-    return (_jsx(Modal, { open: open, title: "Transaction Details", onClose: onClose, preventDismiss: preventDismiss, maxWidth: 384, children: stage.kind === "error" ? (_jsxs(ExecutionState, { "$tone": "danger", children: [_jsx(AlertCircleIcon, {}), _jsx("p", { children: stage.message })] })) : !swapData ? (_jsxs(ExecutionState, { children: [_jsx(Spinner, {}), _jsx("p", { children: "Loading swap data..." })] })) : (_jsxs(ExecutionContent, { children: [_jsxs(TokenRoute, { children: [_jsxs(TokenAmount, { children: [_jsx(TokenIcon, { currency: swapData.data.input.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.input.amount.ui, " ", swapData.data.input.currency.symbol] })] }), _jsx(RouteArrow, { children: _jsx(ArrowRightIcon, {}) }), _jsxs(TokenAmount, { "$align": "end", children: [_jsx(TokenIcon, { currency: swapData.data.output.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.output.amount.ui, " ", swapData.data.output.currency.symbol] })] })] }), _jsxs(ProgressList, { "aria-label": "Swap progress", children: [swapData.data.steps.map((step, index) => (_jsx(ProgressStep, { title: stepTitle(step, swapData.data.input.currency.symbol, getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"), state: paymentStepState(stage, step, index, swapData.data.steps.length), connected: true }, step.id ?? index))), _jsx(ProgressStep, { title: stage.kind === "refunded"
+    // A same-chain swap settles in the user's own transaction, so a receive step would only repeat the swap step.
+    const hasSeparateDelivery = stage.kind === "done" && stage.destinationTxHash !== undefined && stage.destinationTxHash !== stage.sourceTxHash;
+    const showOutcome = stage.kind === "refunded" || hasSeparateDelivery || !swapData || !deliversInSwapTransaction(swapData);
+    return (_jsx(Modal, { open: open, title: "Transaction Details", onClose: onClose, preventDismiss: preventDismiss, maxWidth: 384, children: stage.kind === "error" ? (_jsxs(ExecutionState, { "$tone": "danger", children: [_jsx(AlertCircleIcon, {}), _jsx("p", { children: stage.message })] })) : !swapData ? (_jsxs(ExecutionState, { children: [_jsx(Spinner, {}), _jsx("p", { children: "Loading swap data..." })] })) : (_jsxs(ExecutionContent, { children: [_jsxs(TokenRoute, { children: [_jsxs(TokenAmount, { children: [_jsx(TokenIcon, { currency: swapData.data.input.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.input.amount.ui, " ", swapData.data.input.currency.symbol] })] }), _jsx(RouteArrow, { children: _jsx(ArrowRightIcon, {}) }), _jsxs(TokenAmount, { "$align": "end", children: [_jsx(TokenIcon, { currency: swapData.data.output.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.output.amount.ui, " ", swapData.data.output.currency.symbol] })] })] }), _jsxs(ProgressList, { "aria-label": "Swap progress", children: [swapData.data.steps.map((step, index) => (_jsx(ProgressStep, { title: stepTitle(step, swapData.data.input.currency.symbol, getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"), state: paymentStepState(stage, step, index, swapData.data.steps.length), connected: showOutcome || index < swapData.data.steps.length - 1 }, step.id ?? index))), showOutcome && (_jsx(ProgressStep, { title: stage.kind === "refunded"
                                 ? `Refund ${swapData.data.input.currency.symbol} on ${getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"}`
-                                : `Receive ${swapData.data.output.currency.symbol} on ${getChainName(swapData.data.output.currency.chain_id) ?? "Unknown network"}`, state: outcomeState(stage), connected: false })] })] })) }));
+                                : `Receive ${swapData.data.output.currency.symbol} on ${getChainName(swapData.data.output.currency.chain_id) ?? "Unknown network"}`, state: outcomeState(stage), connected: false }))] })] })) }));
 }

package/dist/components/styles.d.ts

@@ -28,6 +28,7 @@ export declare const Hint: import("styled-components").StyledComponent<"p", any,
 export declare const CardWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CurrencyCard: import("styled-components").StyledComponent<"section", any, {}, never>;
 export declare const CardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardHeaderAction: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const QuickAmountActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const QuickAmountButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const AmountRow: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -45,7 +46,6 @@ export declare const ChainBadge: import("styled-components").StyledComponent<"sp
     $size: number;
 }, never>;
 export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InlineActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OutputWalletControl: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const OutputWalletTrigger: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const OutputWalletMenu: import("styled-components").StyledComponent<"span", any, {}, never>;