@coin-voyage/swapkit 0.4.0-beta.0 → 0.5.0

package/dist/lib/execution.d.ts

@@ -41,5 +41,7 @@ export type SwapStage = {
     swapData: SwapExecuteResponse | null;
     message: string;
 };
+/** Whether the user's own swap transaction delivers the output, leaving no separate receive leg to track. */
+export declare function deliversInSwapTransaction(swapData: SwapExecuteResponse): boolean;
 export declare function buildSwapExecuteTransactions(swapData: SwapExecuteResponse, fromAddress: string): ExecuteTransaction[];
 export {};

package/dist/lib/execution.js

@@ -1,4 +1,10 @@
 import { isChainPaymentData, isDepositStepData } from "@coin-voyage/shared/payment";
+/** Whether the user's own swap transaction delivers the output, leaving no separate receive leg to track. */
+export function deliversInSwapTransaction(swapData) {
+    const { input, output, steps } = swapData.data;
+    const lastStep = steps[steps.length - 1];
+    return (input.currency.chain_id === output.currency.chain_id && lastStep !== undefined && !isDepositStepData(lastStep.data));
+}
 export function buildSwapExecuteTransactions(swapData, fromAddress) {
     const steps = swapData.data.steps;
     if (steps.length === 0)

package/dist/lib/execution.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/execution.test.js

@@ -0,0 +1,24 @@
+import { ChainId } from "@coin-voyage/shared/types";
+import { describe, expect, it } from "vitest";
+import { deliversInSwapTransaction } from "./execution";
+const swapStep = { data: { type: "EVM" } };
+const depositStep = { data: { amount: "1", currency: {}, deposit_address: "0x1" } };
+function swapData(inputChain, outputChain, steps) {
+    return {
+        data: { input: { currency: { chain_id: inputChain } }, output: { currency: { chain_id: outputChain } }, steps },
+    };
+}
+describe("deliversInSwapTransaction", () => {
+    it("is true for a same-chain swap executed by the user's transaction", () => {
+        expect(deliversInSwapTransaction(swapData(ChainId.ETH, ChainId.ETH, [swapStep]))).toBe(true);
+    });
+    it("is false for a cross-chain swap", () => {
+        expect(deliversInSwapTransaction(swapData(ChainId.ETH, ChainId.BASE, [swapStep]))).toBe(false);
+    });
+    it("is false when the user deposits and the output is delivered later", () => {
+        expect(deliversInSwapTransaction(swapData(ChainId.ETH, ChainId.ETH, [swapStep, depositStep]))).toBe(false);
+    });
+    it("is false without steps", () => {
+        expect(deliversInSwapTransaction(swapData(ChainId.ETH, ChainId.ETH, []))).toBe(false);
+    });
+});

package/dist/lib/format.d.ts

@@ -0,0 +1,5 @@
+import type { SwapQuote } from "@coin-voyage/shared/types";
+export declare function formatUsd(value?: number | null): string;
+export declare function formatPriceImpact(value: number): string;
+export declare function usdValue(priceUsd: number | null | undefined, amount: string): number | undefined;
+export declare function formatQuoteRate(quote: SwapQuote): string;

package/dist/lib/format.js

@@ -0,0 +1,20 @@
+export function formatUsd(value) {
+    if (value === undefined || value === null || !Number.isFinite(value))
+        return "$0.00";
+    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 2 }).format(value);
+}
+export function formatPriceImpact(value) {
+    if (value > 0 && value < 0.01)
+        return "<0.01%";
+    return `${value.toFixed(2)}%`;
+}
+export function usdValue(priceUsd, amount) {
+    const numericAmount = Number(amount);
+    if (!priceUsd || !Number.isFinite(numericAmount))
+        return undefined;
+    return priceUsd * numericAmount;
+}
+export function formatQuoteRate(quote) {
+    const rate = Number(quote.output.amount.ui) / Math.max(Number(quote.input.amount.ui), Number.EPSILON);
+    return `1 ${quote.input.currency.symbol} ≈ ${rate.toLocaleString(undefined, { maximumSignificantDigits: 6 })} ${quote.output.currency.symbol}`;
+}

package/dist/lib/quote.d.ts

@@ -1,4 +1,4 @@
-import type { CurrencyBase, SwapQuoteRequest } from "@coin-voyage/shared/types";
+import type { CurrencyBase, SwapExecuteRequest, SwapQuoteRequest } from "@coin-voyage/shared/types";
 export type SwapSide = "input" | "output";
 export declare function toCurrencyBase(currency: CurrencyBase): CurrencyBase;
 interface BuildSwapQuoteRequestProps {
@@ -9,5 +9,14 @@ interface BuildSwapQuoteRequestProps {
     slippageBps?: number;
 }
 export declare function buildSwapQuoteRequest({ amount, activeSide, source, destination, slippageBps, }: BuildSwapQuoteRequestProps): SwapQuoteRequest | null;
+interface BuildSwapExecuteRequestProps {
+    quoteRequest: SwapQuoteRequest;
+    source: CurrencyBase;
+    destination: CurrencyBase;
+    senderAddress: string;
+    recipient: string;
+    slippageBps?: number;
+}
+export declare function buildSwapExecuteRequest({ quoteRequest, source, destination, senderAddress, recipient, slippageBps, }: BuildSwapExecuteRequestProps): SwapExecuteRequest;
 export declare function isSameSwap(source: CurrencyBase | undefined, destination: CurrencyBase | undefined, inputWalletAddress?: string, outputWalletAddress?: string): boolean;
 export {};

package/dist/lib/quote.js

@@ -16,6 +16,18 @@ export function buildSwapQuoteRequest({ amount, activeSide, source, destination,
         ...(slippageBps === undefined ? {} : { slippage_bps: slippageBps }),
     };
 }
+export function buildSwapExecuteRequest({ quoteRequest, source, destination, senderAddress, recipient, slippageBps, }) {
+    return {
+        trade_type: quoteRequest.trade_type,
+        amount: quoteRequest.amount,
+        source: {
+            currency: toCurrencyBase(source),
+            sender_address: senderAddress,
+            ...(slippageBps === undefined ? {} : { slippage_bps: slippageBps }),
+        },
+        destination: { currency: toCurrencyBase(destination), recipient },
+    };
+}
 export function isSameSwap(source, destination, inputWalletAddress, outputWalletAddress) {
     if (!source || !destination || !currenciesMatch(source, destination))
         return false;

package/dist/lib/slippage.d.ts

@@ -0,0 +1,11 @@
+import type { SlippageMode } from "../hooks/use-swap-state";
+export interface ResolvedSlippage {
+    invalid: boolean;
+    /** Undefined in auto mode, or while the custom value is invalid. */
+    bps?: number;
+    warning?: {
+        tone: "warning" | "danger";
+        message: string;
+    };
+}
+export declare function resolveSlippage(mode: SlippageMode, percent: string): ResolvedSlippage;

package/dist/lib/slippage.js

@@ -0,0 +1,17 @@
+const HIGH_SLIPPAGE_PERCENT = 6;
+const SEVERE_SLIPPAGE_PERCENT = 40;
+export function resolveSlippage(mode, percent) {
+    if (mode !== "custom")
+        return { invalid: false };
+    const value = Number(percent);
+    const invalid = percent.length === 0 || !Number.isFinite(value) || value < 0 || value > 100;
+    return {
+        invalid,
+        bps: invalid ? undefined : Math.round(value * 100),
+        warning: value >= SEVERE_SLIPPAGE_PERCENT
+            ? { tone: "danger", message: "This slippage tolerance may cause a severely unfavorable trade." }
+            : value >= HIGH_SLIPPAGE_PERCENT
+                ? { tone: "warning", message: "High slippage can result in a worse execution price." }
+                : undefined,
+    };
+}

package/dist/styles/root.js

@@ -2,23 +2,23 @@ import { css } from "styled-components";
 import styled from "./styled";
 import { darkTheme, lightTheme } from "./theme";
 function variables(theme) {
-    return css `
-    --sk-font-family: ${theme.fontFamily};
-    --sk-background: ${theme.background};
-    --sk-surface: ${theme.surface};
-    --sk-surface-elevated: ${theme.surfaceElevated};
-    --sk-border: ${theme.border};
-    --sk-text: ${theme.text};
-    --sk-text-muted: ${theme.textMuted};
-    --sk-accent: ${theme.accent};
-    --sk-accent-hover: ${theme.accentHover};
-    --sk-accent-text: ${theme.accentText};
-    --sk-danger: ${theme.danger};
-    --sk-warning: ${theme.warning};
-    --sk-success: ${theme.success};
-    --sk-overlay: ${theme.overlay};
-    --sk-shadow: ${theme.shadow};
-    --sk-radius: ${theme.radius};
+    return css `
+    --sk-font-family: ${theme.fontFamily};
+    --sk-background: ${theme.background};
+    --sk-surface: ${theme.surface};
+    --sk-surface-elevated: ${theme.surfaceElevated};
+    --sk-border: ${theme.border};
+    --sk-text: ${theme.text};
+    --sk-text-muted: ${theme.textMuted};
+    --sk-accent: ${theme.accent};
+    --sk-accent-hover: ${theme.accentHover};
+    --sk-accent-text: ${theme.accentText};
+    --sk-danger: ${theme.danger};
+    --sk-warning: ${theme.warning};
+    --sk-success: ${theme.success};
+    --sk-overlay: ${theme.overlay};
+    --sk-shadow: ${theme.shadow};
+    --sk-radius: ${theme.radius};
   `;
 }
 function modeVariables(mode, customTheme) {
@@ -28,48 +28,48 @@ function modeVariables(mode, customTheme) {
         return variables(light);
     if (mode === "dark")
         return variables(dark);
-    return css `
-    ${variables(light)}
-    @media (prefers-color-scheme: dark) {
-      ${variables(dark)}
-    }
+    return css `
+    ${variables(light)}
+    @media (prefers-color-scheme: dark) {
+      ${variables(dark)}
+    }
   `;
 }
-export const SwapKitRoot = styled.div `
-  ${({ $mode, $customTheme }) => modeVariables($mode, $customTheme)}
-
-  all: initial;
-  display: block;
-  width: 100%;
-  color: var(--sk-text);
-  background: ${({ $customTheme }) => $customTheme.background ?? "transparent"};
-  font-family: var(--sk-font-family);
-  font-size: 16px;
-  text-align: left;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-
-  &,
-  * {
-    box-sizing: border-box;
-    font-family: var(--sk-font-family);
-  }
-
-  button,
-  input {
-    font-family: var(--sk-font-family);
-  }
-
-  button:focus-visible,
-  input:focus-visible,
-  a:focus-visible {
-    outline: 2px solid var(--sk-accent);
-    outline-offset: 2px;
-  }
-
-  img,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
+export const SwapKitRoot = styled.div `
+  ${({ $mode, $customTheme }) => modeVariables($mode, $customTheme)}
+
+  all: initial;
+  display: block;
+  width: 100%;
+  color: var(--sk-text);
+  background: ${({ $customTheme }) => $customTheme.background ?? "transparent"};
+  font-family: var(--sk-font-family);
+  font-size: 16px;
+  text-align: left;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+
+  &,
+  * {
+    box-sizing: border-box;
+    font-family: var(--sk-font-family);
+  }
+
+  button,
+  input {
+    font-family: var(--sk-font-family);
+  }
+
+  button:focus-visible,
+  input:focus-visible,
+  a:focus-visible {
+    outline: 2px solid var(--sk-accent);
+    outline-offset: 2px;
+  }
+
+  img,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/swapkit",
   "description": "A reusable cross-chain swap component for CoinVoyage.",
-  "version": "0.4.0-beta.0",
+  "version": "0.5.0",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -22,8 +22,8 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@coin-voyage/crypto": "3.6.0-beta.0",
-    "@coin-voyage/shared": "3.6.0-beta.0"
+    "@coin-voyage/crypto": "3.7.0",
+    "@coin-voyage/shared": "3.7.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -36,7 +36,7 @@
     "typescript-plugin-styled-components": "^3.0.0"
   },
   "peerDependencies": {
-    "@bigmi/react": "^0.9.1",
+    "@bigmi/react": "^0.9.4",
     "@mysten/dapp-kit-react": "^2.1.4",
     "@solana/wallet-adapter-react": "^0.15.39",
     "@tanstack/react-query": "^5.90.6",