@silentswap/react 0.0.41

package/dist/stories/useSilentQuote.stories.js

@@ -0,0 +1,267 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { useQuote } from '../hooks/useQuote.js';
+import { useAccount } from 'wagmi';
+// Demo component to demonstrate the bridge quote hook
+function BridgeQuoteDemo() {
+    const { address } = useAccount();
+    const { getQuote, estimateLive, interpolateSamples, ingressEstimates, egressEstimates, isLoading, error } = useQuote({
+        address: address || undefined,
+        maxImpactPercent: 5,
+    });
+    const solveOptimalUsdcAmount = useCallback(async (srcChainId, srcToken, srcAmount) => {
+        throw new Error('TODO: implement example');
+        return {};
+    }, [address]);
+    // Results state
+    const [quoteResult, setQuoteResult] = useState(null);
+    const [solveResult, setSolveResult] = useState(null);
+    const [estimateResult, setEstimateResult] = useState(null);
+    const [interpolateResult, setInterpolateResult] = useState(null);
+    const [isActionLoading, setIsActionLoading] = useState(false);
+    // getQuote parameters
+    const [quoteSrcChain, setQuoteSrcChain] = useState('1');
+    const [quoteSrcToken, setQuoteSrcToken] = useState('0x0000000000000000000000000000000000000000');
+    const [quoteSrcAmount, setQuoteSrcAmount] = useState('100000000000000000');
+    const [quoteDstChain, setQuoteDstChain] = useState('43114');
+    const [quoteDstToken, setQuoteDstToken] = useState('0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E');
+    // solveUsdcAmount parameters
+    const [solveSrcChain, setSolveSrcChain] = useState('1');
+    const [solveSrcToken, setSolveSrcToken] = useState('0x0000000000000000000000000000000000000000');
+    const [solveSrcAmount, setSolveSrcAmount] = useState('100000000000000000');
+    // estimateLive parameters
+    const [estimateDirection, setEstimateDirection] = useState('ingress');
+    const [estimateCaip19, setEstimateCaip19] = useState('eip155:1/slip44:60');
+    const [estimateChainId, setEstimateChainId] = useState('1');
+    const [estimateToken, setEstimateToken] = useState('0x0000000000000000000000000000000000000000');
+    const [estimateAmount, setEstimateAmount] = useState('0.1');
+    const [estimateUsdPrice, setEstimateUsdPrice] = useState('3000');
+    /**
+     * Test getting a quote for cross-chain swap
+     */
+    const handleGetQuote = async () => {
+        if (!address) {
+            alert('Please connect your wallet first');
+            return;
+        }
+        setIsActionLoading(true);
+        try {
+            const result = await getQuote(parseInt(quoteSrcChain), quoteSrcToken, quoteSrcAmount, parseInt(quoteDstChain), quoteDstToken);
+            setQuoteResult(JSON.stringify({
+                provider: result.provider,
+                outputAmount: result.outputAmount,
+                outputAmountFormatted: (Number(result.outputAmount) / 1e6).toFixed(6) + ' tokens',
+                inputAmount: result.inputAmount,
+                inputAmountFormatted: (Number(result.inputAmount) / 1e18).toFixed(6) + ' tokens',
+                feeUsd: result.feeUsd.toFixed(2),
+                slippage: result.slippage.toFixed(2) + '%',
+                estimatedTime: result.estimatedTime + 's',
+                retentionRate: (result.retentionRate * 100).toFixed(2) + '%',
+                txCount: result.txCount,
+                explanation: `Best quote from ${result.provider} with ${result.retentionRate.toFixed(4)} retention rate`,
+            }, null, 2));
+        }
+        catch (error) {
+            console.error('Get quote failed:', error);
+            setQuoteResult(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+        finally {
+            setIsActionLoading(false);
+        }
+    };
+    /**
+     * Test solving optimal USDC amount
+     */
+    const handleSolveUsdcAmount = async () => {
+        if (!address) {
+            alert('Please connect your wallet first');
+            return;
+        }
+        setIsActionLoading(true);
+        try {
+            const result = await solveOptimalUsdcAmount(parseInt(solveSrcChain), solveSrcToken, solveSrcAmount);
+            setSolveResult(JSON.stringify({
+                provider: result.provider,
+                usdcAmountOut: result.usdcAmountOut.toString(),
+                usdcAmountOutFormatted: (Number(result.usdcAmountOut) / 1e6).toFixed(6) + ' USDC',
+                actualAmountIn: result.actualAmountIn.toString(),
+                actualAmountInFormatted: (Number(result.actualAmountIn) / 1e18).toFixed(6) + ' tokens',
+                allowanceTarget: result.allowanceTarget || 'N/A',
+                explanation: `Found optimal quote from ${result.provider}`,
+            }, null, 2));
+        }
+        catch (error) {
+            console.error('Solve USDC amount failed:', error);
+            setSolveResult(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+        finally {
+            setIsActionLoading(false);
+        }
+    };
+    /**
+     * Test getting live estimate
+     */
+    const handleEstimateLive = async () => {
+        if (!address) {
+            alert('Please connect your wallet first');
+            return;
+        }
+        setIsActionLoading(true);
+        try {
+            const result = await estimateLive(estimateDirection, estimateCaip19, parseInt(estimateChainId), estimateToken, parseFloat(estimateAmount), parseFloat(estimateUsdPrice));
+            setEstimateResult(JSON.stringify({
+                provider: result.provider,
+                gasFee: result.estimate.gasFee,
+                gasAmount: result.gasAmount.toString(),
+                samplesCount: result.estimate.samples.length,
+                samples: result.estimate.samples.map((s) => ({
+                    baseline: s.baseline,
+                    retention: s.retention,
+                    source: s.source,
+                })),
+                explanation: `${result.provider} quote with ${(result.estimate.samples[result.estimate.samples.length - 1]?.retention * 100 || 0).toFixed(2)}% retention rate`,
+            }, null, 2));
+        }
+        catch (error) {
+            console.error('Estimate live failed:', error);
+            setEstimateResult(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+        finally {
+            setIsActionLoading(false);
+        }
+    };
+    /**
+     * Test sample interpolation
+     */
+    const handleInterpolateSamples = async () => {
+        setIsActionLoading(true);
+        try {
+            // Create sample data
+            const samples = [
+                { baseline: 100, retention: 0.95, source: 'relay' },
+                { baseline: 500, retention: 0.93, source: 'relay' },
+                { baseline: 1000, retention: 0.91, source: 'debridge' },
+                { baseline: 5000, retention: 0.89, source: 'relay' },
+            ];
+            // Test interpolation at various points
+            const results = [
+                { value: 50, retention: interpolateSamples(samples, 50) },
+                { value: 300, retention: interpolateSamples(samples, 300) },
+                { value: 750, retention: interpolateSamples(samples, 750) },
+                { value: 3000, retention: interpolateSamples(samples, 3000) },
+                { value: 5500, retention: interpolateSamples(samples, 5500) },
+            ];
+            setInterpolateResult(JSON.stringify({
+                samples,
+                interpolations: results.map((r) => ({
+                    usdValue: r.value,
+                    retention: r.retention,
+                    retentionPercent: `${(r.retention * 100).toFixed(2)}%`,
+                })),
+                explanation: 'Interpolation smoothly estimates retention rates between known sample points',
+            }, null, 2));
+        }
+        catch (error) {
+            console.error('Interpolate samples failed:', error);
+            setInterpolateResult(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+        finally {
+            setIsActionLoading(false);
+        }
+    };
+    const isDisabled = isLoading || isActionLoading;
+    const inputStyle = {
+        width: '100%',
+        padding: '8px 12px',
+        background: '#f8f9fa',
+        border: '1px solid #dee2e6',
+        borderRadius: '4px',
+        fontSize: '14px',
+        fontFamily: 'monospace',
+    };
+    const labelStyle = {
+        display: 'block',
+        marginBottom: '5px',
+        fontWeight: 'bold',
+        fontSize: '14px',
+    };
+    const buttonStyle = (disabled) => ({
+        width: '100%',
+        padding: '12px 20px',
+        background: disabled ? '#6c757d' : '#007bff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontSize: '16px',
+        fontWeight: 'bold',
+        opacity: disabled ? 0.6 : 1,
+    });
+    const sectionStyle = {
+        marginBottom: '20px',
+        padding: '15px',
+        border: '2px solid #e0e0e0',
+        borderRadius: '8px',
+        background: '#fafafa',
+    };
+    return (_jsxs("div", { style: { maxWidth: '800px', fontFamily: 'Arial, sans-serif' }, children: [_jsx("h2", { children: "\uD83D\uDCB1 SilentSwap Bridge Quote - Advanced Estimation" }), _jsx("p", { style: { color: '#666', marginBottom: '20px' }, children: "Comprehensive bridge quote system with optimal solving, retention rate tracking, and sample-based interpolation" }), _jsxs("div", { style: sectionStyle, children: [_jsx("h3", { children: "Connection Status" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsxs("p", { children: [_jsx("strong", { children: "Loading:" }), " ", isLoading || isActionLoading ? '⏳ Processing...' : '✅ Ready'] }), _jsxs("p", { children: [_jsx("strong", { children: "Error:" }), " ", error ? `❌ ${error.message}` : '✅ None'] }), !address && (_jsx("div", { style: {
+                                    padding: '10px',
+                                    background: '#fff3cd',
+                                    border: '1px solid #ffc107',
+                                    borderRadius: '4px',
+                                    color: '#856404',
+                                }, children: "\u26A0\uFE0F Please connect your wallet to test bridge functions" })), address && (_jsxs("p", { children: [_jsx("strong", { children: "Address:" }), " ", address.slice(0, 6), "...", address.slice(-4)] }))] })] }), _jsxs("div", { style: sectionStyle, children: [_jsx("h3", { children: "Estimate Cache" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsxs("p", { children: [_jsx("strong", { children: "Ingress Estimates:" }), " ", Object.keys(ingressEstimates).length, " assets cached"] }), _jsxs("p", { children: [_jsx("strong", { children: "Egress Estimates:" }), " ", Object.keys(egressEstimates).length, " assets cached"] }), Object.keys(ingressEstimates).length > 0 && (_jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer', color: '#007bff' }, children: "View Ingress Cache" }), _jsx("pre", { style: {
+                                            fontSize: '12px',
+                                            marginTop: '8px',
+                                            overflow: 'auto',
+                                            background: '#f8f9fa',
+                                            padding: '10px',
+                                            borderRadius: '4px',
+                                        }, children: JSON.stringify(ingressEstimates, null, 2) })] }))] })] }), _jsxs("div", { style: sectionStyle, children: [_jsx("h3", { children: "\uD83D\uDCB1 Get Cross-Chain Quote" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Source Chain ID" }), _jsx("input", { style: inputStyle, value: quoteSrcChain, onChange: (e) => setQuoteSrcChain(e.target.value), placeholder: "1" })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Source Token Address" }), _jsx("input", { style: inputStyle, value: quoteSrcToken, onChange: (e) => setQuoteSrcToken(e.target.value), placeholder: "0x..." })] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Source Amount (wei)" }), _jsx("input", { style: inputStyle, value: quoteSrcAmount, onChange: (e) => setQuoteSrcAmount(e.target.value), placeholder: "100000000000000000" })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Destination Chain ID" }), _jsx("input", { style: inputStyle, value: quoteDstChain, onChange: (e) => setQuoteDstChain(e.target.value), placeholder: "43114" })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Destination Token Address" }), _jsx("input", { style: inputStyle, value: quoteDstToken, onChange: (e) => setQuoteDstToken(e.target.value), placeholder: "0x..." })] })] }), _jsx("button", { onClick: handleGetQuote, disabled: isDisabled || !address, style: buttonStyle(isDisabled || !address), children: isActionLoading ? '⏳ Getting Quote...' : 'Get Quote' }), quoteResult && (_jsx("div", { style: { marginTop: '12px' }, children: _jsxs("details", { open: true, children: [_jsx("summary", { style: { cursor: 'pointer', color: '#007bff', fontWeight: 'bold', marginBottom: '10px' }, children: "\uD83D\uDCB1 Cross-Chain Quote Result" }), _jsx("pre", { style: {
+                                                overflow: 'auto',
+                                                maxHeight: '400px',
+                                                fontSize: '12px',
+                                                background: '#000',
+                                                color: '#fff',
+                                                padding: '15px',
+                                                borderRadius: '4px',
+                                            }, children: quoteResult })] }) }))] })] }), _jsxs("div", { style: sectionStyle, children: [_jsx("h3", { children: "\uD83C\uDFAF Solve Optimal USDC Amount" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Source Chain ID" }), _jsx("input", { style: inputStyle, value: solveSrcChain, onChange: (e) => setSolveSrcChain(e.target.value), placeholder: "1" })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Source Token Address" }), _jsx("input", { style: inputStyle, value: solveSrcToken, onChange: (e) => setSolveSrcToken(e.target.value), placeholder: "0x..." })] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Source Amount (wei)" }), _jsx("input", { style: inputStyle, value: solveSrcAmount, onChange: (e) => setSolveSrcAmount(e.target.value), placeholder: "100000000000000000" })] }), _jsx("button", { onClick: handleSolveUsdcAmount, disabled: isDisabled || !address, style: buttonStyle(isDisabled || !address), children: isActionLoading ? '⏳ Solving...' : 'Solve USDC Amount' }), solveResult && (_jsx("div", { style: { marginTop: '12px' }, children: _jsxs("details", { open: true, children: [_jsx("summary", { style: { cursor: 'pointer', color: '#007bff', fontWeight: 'bold', marginBottom: '10px' }, children: "\uD83C\uDFAF Solve USDC Amount Result" }), _jsx("pre", { style: {
+                                                overflow: 'auto',
+                                                maxHeight: '400px',
+                                                fontSize: '12px',
+                                                background: '#000',
+                                                color: '#fff',
+                                                padding: '15px',
+                                                borderRadius: '4px',
+                                            }, children: solveResult })] }) }))] })] }), _jsxs("div", { style: sectionStyle, children: [_jsx("h3", { children: "\uD83D\uDCCA Get Live Estimate" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Direction" }), _jsxs("select", { value: estimateDirection, onChange: (e) => setEstimateDirection(e.target.value), style: inputStyle, children: [_jsx("option", { value: "ingress", children: "Ingress" }), _jsx("option", { value: "egress", children: "Egress" })] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "CAIP-19 Asset ID" }), _jsx("input", { style: inputStyle, value: estimateCaip19, onChange: (e) => setEstimateCaip19(e.target.value), placeholder: "eip155:1/slip44:60" })] })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Chain ID" }), _jsx("input", { style: inputStyle, value: estimateChainId, onChange: (e) => setEstimateChainId(e.target.value), placeholder: "1" })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Token Address" }), _jsx("input", { style: inputStyle, value: estimateToken, onChange: (e) => setEstimateToken(e.target.value), placeholder: "0x..." })] })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Amount (decimal)" }), _jsx("input", { style: inputStyle, value: estimateAmount, onChange: (e) => setEstimateAmount(e.target.value), placeholder: "0.1" })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "USD Price" }), _jsx("input", { style: inputStyle, value: estimateUsdPrice, onChange: (e) => setEstimateUsdPrice(e.target.value), placeholder: "3000" })] })] }), _jsx("button", { onClick: handleEstimateLive, disabled: isDisabled || !address, style: buttonStyle(isDisabled || !address), children: isActionLoading ? '⏳ Estimating...' : 'Get Live Estimate' }), estimateResult && (_jsx("div", { style: { marginTop: '12px' }, children: _jsxs("details", { open: true, children: [_jsx("summary", { style: { cursor: 'pointer', color: '#007bff', fontWeight: 'bold', marginBottom: '10px' }, children: "\uD83D\uDCCA Live Estimate Result" }), _jsx("pre", { style: {
+                                                overflow: 'auto',
+                                                maxHeight: '400px',
+                                                fontSize: '12px',
+                                                background: '#000',
+                                                color: '#fff',
+                                                padding: '15px',
+                                                borderRadius: '4px',
+                                            }, children: estimateResult })] }) }))] })] }), _jsxs("div", { style: sectionStyle, children: [_jsx("h3", { children: "\uD83D\uDCC8 Interpolate Samples" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx("p", { style: { fontSize: '14px', color: '#666' }, children: "Test retention rate interpolation using sample data points" }), _jsx("button", { onClick: handleInterpolateSamples, disabled: isDisabled, style: buttonStyle(isDisabled), children: isActionLoading ? '⏳ Interpolating...' : 'Run Interpolation Test' }), interpolateResult && (_jsx("div", { style: { marginTop: '12px' }, children: _jsxs("details", { open: true, children: [_jsx("summary", { style: { cursor: 'pointer', color: '#007bff', fontWeight: 'bold', marginBottom: '10px' }, children: "\uD83D\uDCC8 Sample Interpolation Result" }), _jsx("pre", { style: {
+                                                overflow: 'auto',
+                                                maxHeight: '400px',
+                                                fontSize: '12px',
+                                                background: '#000',
+                                                color: '#fff',
+                                                padding: '15px',
+                                                borderRadius: '4px',
+                                            }, children: interpolateResult })] }) }))] })] }), _jsx("div", { style: { marginTop: '20px' }, children: _jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer', color: '#007bff', fontWeight: 'bold', fontSize: '18px', marginBottom: '15px' }, children: "\uD83D\uDCDA Available Methods Documentation" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px', marginTop: '15px' }, children: [_jsxs("div", { style: { borderLeft: '4px solid #28a745', paddingLeft: '15px' }, children: [_jsx("h4", { style: { color: '#28a745', marginBottom: '8px' }, children: "getQuote()" }), _jsx("p", { style: { fontSize: '14px', marginBottom: '8px' }, children: "Gets the best cross-chain quote by comparing multiple providers" }), _jsxs("ul", { style: { listStyle: 'disc', marginLeft: '20px', fontSize: '14px', color: '#666' }, children: [_jsx("li", { children: "Queries relay.link and deBridge in parallel" }), _jsx("li", { children: "Compares retention rates to select the best provider" }), _jsx("li", { children: "Returns unified quote with output amount, fees, and estimated time" }), _jsx("li", { children: "Handles provider-specific errors gracefully" })] })] }), _jsxs("div", { style: { borderLeft: '4px solid #007bff', paddingLeft: '15px' }, children: [_jsx("h4", { style: { color: '#007bff', marginBottom: '8px' }, children: "solveUsdcAmount()" }), _jsx("p", { style: { fontSize: '14px', marginBottom: '8px' }, children: "Finds the optimal USDC output amount by querying both relay and debridge, then comparing rates" }), _jsxs("ul", { style: { listStyle: 'disc', marginLeft: '20px', fontSize: '14px', color: '#666' }, children: [_jsx("li", { children: "Iteratively solves for best bridge price (up to 4 attempts)" }), _jsx("li", { children: "Validates price impact is below threshold" }), _jsx("li", { children: "Returns provider with best rate (USDC out / amount in)" }), _jsx("li", { children: "Handles allowance targets for deBridge" })] })] }), _jsxs("div", { style: { borderLeft: '4px solid #ffc107', paddingLeft: '15px' }, children: [_jsx("h4", { style: { color: '#ffc107', marginBottom: '8px' }, children: "estimateLive()" }), _jsx("p", { style: { fontSize: '14px', marginBottom: '8px' }, children: "Gets live quotes from providers and calculates retention rates with sample caching" }), _jsxs("ul", { style: { listStyle: 'disc', marginLeft: '20px', fontSize: '14px', color: '#666' }, children: [_jsx("li", { children: "Queries relay.link and deBridge in parallel" }), _jsx("li", { children: "Calculates retention rate (value preserved after fees)" }), _jsx("li", { children: "Stores samples for interpolation" }), _jsx("li", { children: "Returns gas estimates and provider details" })] })] }), _jsxs("div", { style: { borderLeft: '4px solid #6f42c1', paddingLeft: '15px' }, children: [_jsx("h4", { style: { color: '#6f42c1', marginBottom: '8px' }, children: "interpolateSamples()" }), _jsx("p", { style: { fontSize: '14px', marginBottom: '8px' }, children: "Uses linear interpolation to estimate retention rates between sample points" }), _jsxs("ul", { style: { listStyle: 'disc', marginLeft: '20px', fontSize: '14px', color: '#666' }, children: [_jsx("li", { children: "Returns exact match if sample exists at USD value" }), _jsx("li", { children: "Uses lowest sample for values below range" }), _jsx("li", { children: "Uses highest sample for values above range (with optional margin check)" }), _jsx("li", { children: "Linearly interpolates for values within sample range" })] })] }), _jsxs("div", { style: { borderLeft: '4px solid #e83e8c', paddingLeft: '15px' }, children: [_jsx("h4", { style: { color: '#e83e8c', marginBottom: '8px' }, children: "ingressEstimates / egressEstimates" }), _jsx("p", { style: { fontSize: '14px', marginBottom: '8px' }, children: "Cached estimate data indexed by CAIP-19 asset identifier" }), _jsxs("ul", { style: { listStyle: 'disc', marginLeft: '20px', fontSize: '14px', color: '#666' }, children: [_jsx("li", { children: "Stores retention rate samples for each asset" }), _jsx("li", { children: "Automatically updated on each estimateLive call" }), _jsx("li", { children: "Samples within $5 of each other are deduplicated" }), _jsx("li", { children: "Enables fast estimation via interpolation" })] })] })] })] }) })] }));
+}
+const meta = {
+    title: 'Hooks/useQuote',
+    component: BridgeQuoteDemo,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Advanced bridge quote hook with optimal solving, retention rate tracking, and sample-based interpolation. Replicates functionality from the original estimate.ts implementation.',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {};

package/dist/stories/useTransaction.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare function BridgeDemo(): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof BridgeDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/useTransaction.stories.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTransaction, useQuote } from '../index.js';
+import { useAccount, useWalletClient } from 'wagmi';
+import { getBridgeQuote } from '@silentswap/sdk';
+import { Button, Card } from '@silentswap/ui-kit';
+// Demo component to demonstrate the bridge execution hook
+function BridgeDemo() {
+    const { address, connector } = useAccount();
+    const { data: walletClient } = useWalletClient();
+    // Get the best quote using optimal USDC solving
+    const { isLoading: quoteLoading, error: quoteError } = useQuote({
+        address: address || undefined,
+    });
+    // Execute the transaction
+    const { executeTransaction, getStatus, isLoading: bridgeLoading, currentStep, error: bridgeError, } = useTransaction({
+        address: address,
+        walletClient: walletClient,
+        connector: connector || undefined,
+    });
+    const [quote, setQuote] = useState(null);
+    const [statusResult, setStatusResult] = useState(null);
+    const [isActionLoading, setIsActionLoading] = useState(false);
+    const [loadingAction, setLoadingAction] = useState(null);
+    const handleGetQuote = async () => {
+        if (!address) {
+            alert('Please connect your wallet first');
+            return;
+        }
+        setIsActionLoading(true);
+        setLoadingAction('quote');
+        try {
+            const quoteResult = await getBridgeQuote(1, // Ethereum
+            '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC on Ethereum
+            '1000000', // 1 USDC (6 decimals)
+            43114, // Avalanche
+            '0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E', // USDC.e on Avalanche
+            address, new AbortController().signal);
+            if (quoteResult) {
+                setQuote(quoteResult);
+                console.log('Quote:', quoteResult);
+            }
+        }
+        catch (error) {
+            console.error('Get quote failed:', error);
+        }
+        finally {
+            setIsActionLoading(false);
+            setLoadingAction(null);
+        }
+    };
+    const handleExecuteTransaction = async () => {
+        if (!quote) {
+            alert('Please get a quote first');
+            return;
+        }
+        if (!walletClient || !connector) {
+            alert('Wallet client and connector required');
+            return;
+        }
+        setIsActionLoading(true);
+        setLoadingAction('execute');
+        try {
+            const result = await executeTransaction(quote);
+            if (result) {
+                console.log('Bridge transaction executed:', result);
+                setStatusResult(JSON.stringify(result, null, 2));
+            }
+        }
+        catch (error) {
+            console.error('Execute transaction failed:', error);
+        }
+        finally {
+            setIsActionLoading(false);
+            setLoadingAction(null);
+        }
+    };
+    const handleGetStatus = async () => {
+        if (!quote?.route) {
+            alert('No quote available');
+            return;
+        }
+        setIsActionLoading(true);
+        setLoadingAction('status');
+        try {
+            // Extract request ID from quote
+            const requestId = quote.provider === 'relay' ? quote.route.steps?.find((s) => s.requestId)?.requestId : quote.route.orderId;
+            if (!requestId) {
+                throw new Error('No request ID found in quote');
+            }
+            const status = await getStatus(requestId, quote.provider);
+            if (status) {
+                setStatusResult(JSON.stringify(status, null, 2));
+            }
+        }
+        catch (error) {
+            console.error('Get status failed:', error);
+            setStatusResult(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+        finally {
+            setIsActionLoading(false);
+            setLoadingAction(null);
+        }
+    };
+    const isDisabled = quoteLoading || bridgeLoading || isActionLoading;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-xl font-bold", children: "SilentSwap Bridge Execution Demo" }), _jsx("p", { className: "text-gray-400", children: "Execute bridge transactions from quotes obtained via useQuote" }), _jsx(Card, { children: _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { children: [_jsx("strong", { children: "Loading:" }), " ", isDisabled ? '⏳' : '✅'] }), _jsxs("p", { children: [_jsx("strong", { children: "Quote Error:" }), " ", quoteError ? `❌ ${quoteError.message}` : '✅ None'] }), _jsxs("p", { children: [_jsx("strong", { children: "Bridge Error:" }), " ", bridgeError ? `❌ ${bridgeError.message}` : '✅ None'] }), currentStep && (_jsxs("p", { children: [_jsx("strong", { children: "Current Step:" }), " ", currentStep] })), !address && (_jsx("p", { className: "text-red-500", children: _jsx("strong", { children: "\u26A0\uFE0F Please connect your wallet" }) }))] }) }), _jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx(Button, { onClick: handleGetQuote, disabled: isDisabled || !address, variant: "primary", children: loadingAction === 'quote' ? '⏳ Getting Quote...' : '1. Get Best Quote' }), _jsx(Button, { onClick: handleExecuteTransaction, disabled: isDisabled || !quote || !walletClient || !connector, variant: "primary", children: loadingAction === 'execute' ? '⏳ Executing...' : '2. Execute Transaction' }), _jsx(Button, { onClick: handleGetStatus, disabled: isDisabled || !quote, variant: "secondary", children: loadingAction === 'status' ? '⏳ Checking...' : '3. Get Status' })] }), quote && (_jsxs("details", { children: [_jsxs("summary", { className: "cursor-pointer text-blue-400 hover:text-blue-300", children: ["Current Quote (", quote.provider, ")"] }), _jsx(Card, { className: "mt-2", children: _jsxs("div", { className: "space-y-1", children: [_jsxs("p", { children: [_jsx("strong", { children: "Provider:" }), " ", quote.provider] }), _jsxs("p", { children: [_jsx("strong", { children: "Fee:" }), " ", quote.fee.amount, " ", quote.fee.token] }), quote.fee.usdValue && (_jsxs("p", { children: [_jsx("strong", { children: "Fee (USD):" }), " $", quote.fee.usdValue] })), _jsxs("p", { children: [_jsx("strong", { children: "Slippage:" }), " ", quote.slippage, "%"] }), _jsxs("p", { children: [_jsx("strong", { children: "Estimated Time:" }), " ", quote.estimatedTime, "s"] }), _jsxs("p", { children: [_jsx("strong", { children: "Transactions:" }), " ", quote.txs.length] })] }) })] })), statusResult && (_jsxs("details", { children: [_jsx("summary", { className: "cursor-pointer text-blue-400 hover:text-blue-300", children: "Status Result" }), _jsx(Card, { className: "mt-2", children: _jsx("pre", { className: "overflow-auto max-h-96 text-sm", children: statusResult }) })] })), _jsxs("details", { className: "mt-5", children: [_jsx("summary", { className: "cursor-pointer text-blue-400 hover:text-blue-300", children: "Available Methods:" }), _jsx(Card, { className: "mt-2", children: _jsxs("ul", { className: "list-disc list-inside space-y-2", children: [_jsxs("li", { children: [_jsx("code", { className: "text-blue-300", children: "executeTransaction(quote: BridgeQuote)" }), " - Execute a bridge transaction", _jsxs("ul", { className: "list-disc list-inside ml-4 mt-1 space-y-1", children: [_jsx("li", { children: "Automatically switches chains as needed" }), _jsx("li", { children: "Handles multiple transactions for relay provider" }), _jsx("li", { children: "Returns bridge status with transaction hashes and request ID" })] })] }), _jsxs("li", { children: [_jsx("code", { className: "text-blue-300", children: "getStatus(requestId: string, provider: BridgeProvider)" }), " - Get bridge status", _jsxs("ul", { className: "list-disc list-inside ml-4 mt-1 space-y-1", children: [_jsx("li", { children: "Monitors the status of a bridge transaction" }), _jsx("li", { children: "Returns current status (pending, success, failed, etc.)" })] })] })] }) })] })] }));
+}
+const meta = {
+    title: 'Hooks/useTransaction',
+    component: BridgeDemo,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'React hook for executing bridge transactions. Works with quotes from useQuote to execute cross-chain bridge operations.',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {};

package/dist/utils/formatters.d.ts

@@ -0,0 +1,33 @@
+import type { AssetInfo } from '@silentswap/sdk';
+/**
+ * Format USD value with comma as decimal separator (German format: $19.966,98)
+ * Used for displaying USD values in InputPlate and OutputPlate
+ */
+export declare function formatUsdValue(value: number | string | null): string | null;
+export declare function formatUSD(amount: string | number): string;
+/**
+ * Format price for display (e.g., "1 ETH = $2,500.00")
+ * Uses comma as decimal separator
+ */
+export declare function formatPrice(price: number): string;
+/**
+ * Format balance for display using asset decimals and precision
+ */
+export declare function formatBalance(balance: bigint | undefined, assetInfo: AssetInfo | null): string;
+/**
+ * Calculate USD value from amount and price
+ */
+export declare function calculateUsdValue(amount: string, price: number | undefined): number | null;
+/**
+ * Calculate dynamic font size for large numbers
+ * Used in OutputPlate for amount display
+ */
+export declare function calculateAmountFontSize(amount: string): number;
+/**
+ * Format secondary value for swap transaction card (matches Figma: "WBTC $30,253,08")
+ * Combines asset symbol with formatted USD value
+ * @param assetInfo - Asset information with symbol (can be null or undefined)
+ * @param usdValue - USD value (can be number or already formatted string)
+ * @returns Formatted string like "WBTC $30,253,08" or null if inputs are invalid
+ */
+export declare function formatSecondaryValue(assetInfo: AssetInfo | null | undefined, usdValue: number | string | null): string | null;

package/dist/utils/formatters.js

@@ -0,0 +1,82 @@
+import { BigNumber } from 'bignumber.js';
+/**
+ * Format USD value with comma as decimal separator (German format: $19.966,98)
+ * Used for displaying USD values in InputPlate and OutputPlate
+ */
+export function formatUsdValue(value) {
+    if (value === null || value === undefined)
+        return null;
+    const num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
+        return null;
+    // Format with thousands separator (dot) and decimal separator (comma)
+    return num.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+export function formatUSD(amount) {
+    // Convert to number and handle potential parsing errors
+    const numAmount = typeof amount === 'string' ? parseFloat(amount.replace(/[^0-9.-]/g, '')) : amount;
+    // Check for invalid input
+    if (isNaN(numAmount)) {
+        return '0';
+    }
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 0,
+    }).format(numAmount);
+}
+/**
+ * Format price for display (e.g., "1 ETH = $2,500.00")
+ * Uses comma as decimal separator
+ */
+export function formatPrice(price) {
+    return price.toFixed(2).replace('.', ',');
+}
+/**
+ * Format balance for display using asset decimals and precision
+ */
+export function formatBalance(balance, assetInfo) {
+    if (!balance || !assetInfo)
+        return '0';
+    const balanceBN = BigNumber(balance.toString()).shiftedBy(-assetInfo.decimals);
+    return balanceBN.toFixed(assetInfo.precision ?? 6);
+}
+/**
+ * Calculate USD value from amount and price
+ */
+export function calculateUsdValue(amount, price) {
+    if (!amount || !price)
+        return null;
+    const numAmount = parseFloat(amount) || 0;
+    return numAmount * price;
+}
+/**
+ * Calculate dynamic font size for large numbers
+ * Used in OutputPlate for amount display
+ */
+export function calculateAmountFontSize(amount) {
+    const len = amount.length;
+    if (len > 12)
+        return 20;
+    if (len > 8)
+        return 24;
+    return 28;
+}
+/**
+ * Format secondary value for swap transaction card (matches Figma: "WBTC $30,253,08")
+ * Combines asset symbol with formatted USD value
+ * @param assetInfo - Asset information with symbol (can be null or undefined)
+ * @param usdValue - USD value (can be number or already formatted string)
+ * @returns Formatted string like "WBTC $30,253,08" or null if inputs are invalid
+ */
+export function formatSecondaryValue(assetInfo, usdValue) {
+    if (!assetInfo || !usdValue)
+        return null;
+    // Format USD value if it's a number, otherwise use the string as-is
+    const formatted = typeof usdValue === 'number' ? formatUsdValue(usdValue) : usdValue;
+    if (!formatted)
+        return null;
+    const symbol = assetInfo.symbol?.toUpperCase() || '';
+    return `${symbol} $${formatted}`;
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@silentswap/react",
+  "type": "module",
+  "version": "0.0.41",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "dev": "tsc --watch",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "dependencies": {
+    "@ensdomains/ensjs": "^4.2.0",
+    "@silentswap/sdk": "workspace:*",
+    "@silentswap/ui-kit": "workspace:*",
+    "@solana/codecs-strings": "^5.1.0",
+    "@solana/kit": "^5.1.0",
+    "@solana/rpc": "^5.1.0",
+    "@solana/rpc-subscriptions": "^5.1.0",
+    "@solana/spl-token": "^0.4.14",
+    "@solana/wallet-adapter-base": "^0.9.27",
+    "@solana/wallet-adapter-react": "^0.15.39",
+    "@storybook/react": "10.0.7",
+    "@tanstack/react-query": "5.90.14",
+    "bignumber.js": "9.3.1",
+    "usehooks-ts": "^3.1.1",
+    "viem": "2.43.3",
+    "wagmi": "3.1.3",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.38.0",
+    "@storybook/addon-docs": "10.0.7",
+    "@storybook/addon-onboarding": "10.0.7",
+    "@storybook/react-vite": "10.0.7",
+    "@stylistic/eslint-plugin": "5.5.0",
+    "@tsconfig/node24": "24.0.1",
+    "@types/node": "24.9.1",
+    "@types/react": "19.2.2",
+    "@types/web": "0.0.283",
+    "@typescript-eslint/parser": "8.46.2",
+    "buffer": "^6.0.3",
+    "eslint": "9.38.0",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import-x": "4.16.1",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-storybook": "10.0.7",
+    "prettier": "3.5.3",
+    "react": "19.2.0",
+    "storybook": "10.0.7",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.46.2",
+    "vite-plugin-node-polyfills": "^0.24.0"
+  }
+}