Silent Swap Introduction
Silent Swap provides private, cross-chain swaps where the connection between the depositor and the recipient is hidden on-chain.
High-Level Workflow
The Silent Swap process involves several steps, all managed automatically by the SilentSwapProvider:
- Authentication: The user signs a message (SIWE) to authenticate with the SilentSwap backend.
- Wallet Generation: A temporary, secure facilitator wallet is generated for the user.
- Facilitator Accounts: User accounts are created on the facilitator wallet, each with its own state.
- Quoting: The user requests a swap quote.
- Execution: The user deposits funds into a gateway contract, starting the private swap process.
- Tracking: The progress of the swap is monitored until the funds are delivered to the destination(s).
Core Integration Components
SilentSwapProvider
The SilentSwapProvider is the primary entry point for Silent Swap. It encapsulates all the necessary providers and logic to make integration seamless.
import { SilentSwapProvider } from '@silentswap/react';
import { createSilentSwapClient, ENVIRONMENT } from '@silentswap/sdk';
const client = createSilentSwapClient({ environment: ENVIRONMENT.STAGING });
function App() {
const { isConnected, connector } = useAccount();
const { data: walletClient } = useWalletClient();
const { evmAddress, solAddress } = useUserAddress();
const { solanaConnector, solanaConnectionAdapter } = useSolanaAdapter();
return (
<SilentSwapProvider
client={client}
environment={ENVIRONMENT.STAGING}
evmAddress={evmAddress}
solAddress={solAddress}
isConnected={isConnected}
connector={connector}
walletClient={walletClient}
solanaConnector={solanaConnector}
solanaConnection={solanaConnectionAdapter}
solanaRpcUrl="https://api.mainnet-beta.solana.com" // Optional: custom RPC URL
baseUrl={undefined} // Optional: override base URL for API calls
>
{/* Your app components */}
</SilentSwapProvider>
);
}useSilentSwap Hook
The useSilentSwap hook provides access to the consolidated state and methods for executing swaps and tracking their progress.
import { useSilentSwap } from '@silentswap/react';
function SwapForm() {
const {
executeSwap,
isSwapping,
orderId,
orderComplete,
orderStatusTexts
} = useSilentSwap();
// ... implementation
}Key Return Values
Swap Execution:executeSwap(params): Execute a swap with required parameters- Parameters:
sourceAsset: Source asset CAIP-19 identifier (string)sourceAmount: Source amount in human-readable units (string, e.g., "1.5")destinations: Array of destination objects (Destination[])splits: Array of split percentages (number[])senderContactId: Contact ID of the sender (string, e.g., "caip10:eip155:*:0x...")integratorId: Optional integrator ID for tracking (string, optional)
- Parameters:
swapLoading: Boolean indicating if swap is being executedisSwapping: Boolean indicating if swap is in progresscurrentStep: Current step description (e.g., "Fetching quote...")swapError: Error object if swap failed
orderId: Current order ID (string | null)orderComplete: Boolean indicating if order is completeorderProgresses: Array of progress percentages for each outputorderStatusTexts: Array of status text for each outputorderOutputs: Array of output status objectsorderTrackingError: Error object if tracking failedviewingAuth: Viewing auth token for the current order
serviceFeeUsd: Service fee in USDbridgeFeeIngressUsd: Bridge fee for ingress in USDbridgeFeeEgressUsd: Bridge fee for egress in USDslippageUsd: Slippage amount in USDoverheadUsd: Overhead fee in USDserviceFeeRate: Service fee rate (percentage)egressEstimatesLoading: Boolean indicating if egress estimates are loadingfetchEstimates(direction?): Function to fetch estimates (input-to-output or output-to-input)
wallet: SilentSwap wallet instance (null if not loaded)walletLoading: Boolean indicating if wallet is being generatedauth: Auth response (null if not authenticated)authLoading: Boolean indicating if authentication is in progress
handleNewSwap(): Reset form and start a new swapclearQuote(): Clear the current quoteclient: SilentSwap client instanceenvironment: Current environmentconfig: Client configuration
useSwap Hook (Zustand)
The useSwap hook manages the local form state, including selected tokens, amounts, and destinations.
import { useSwap } from '@silentswap/react';
function SwapForm() {
const {
tokenIn,
tokenOut,
inputAmount,
setInputAmount,
setTokenIn
} = useSwap();
// ... implementation
}Supported Features
- Cross-Chain Privacy: Hide the link between sender and recipient.
- Multi-Output Swaps: Split a single deposit into multiple destinations.
- Dynamic Fees: Real-time service and bridge fee estimation.
- Automatic Auth: Seamless SIWE authentication flow.
- Order Tracking: Real-time status updates for multi-stage swaps.
- Solana Support: Integrated support for Solana both as source and destination.
Next Steps
- Learn about Full Integration Example
- Explore Balances, Prices and Orders hooks