All of our main APIs have corresponding methods in our SDK as well as React hooks for common use cases.

This includes hooks for monitoring route events, payment events, and transaction specific events that can be used to show status of on-chain transactions.

​
React Hooks

import { SuaveSDK } from 'suave-sdk';
import { useRouteEvents } from 'suave-sdk/react/routes'; //ROUTING HOOKS
import { usePaymentEvents } from 'suave-sdk/react/routes'; //Payments HOOKS
import { useEffect, useState } from 'react';

const sdk = new SuaveSDK({
    apiKey: 'your-api-key'
});
// Custom hook for managing route events
function useCurrentRoute() {
    const [currentRoute, setCurrentRoute] = useState(null);
    const routeEvents = useRouteEvents();

    useEffect(() => {
        setCurrentRoute(routeEvents);
    }, [routeEvents]);

    return currentRoute;
}


    useEffect(() => {
        if(paymentEvents.length > 0){
            console.log('Payment Events:', paymentEvents);
            setCurrentPayment(paymentEvents[0]);
        }
    }, [sdk, paymentEvents]);


// Custom hook for managing route state
function useRouteState(sdk) {
    const [routeState, setRouteState] = useState(null);

    useEffect(() => {
        const fetchRouteState = async () => {
            // Assuming there's a method in SDK to get route state
            const state = await sdk.getRouteState();
            setRouteState(state);
        };

        fetchRouteState();
    }, [sdk]);

    return routeState;
}

const sdk = new SuaveSDK({
    apiKey: 'your-api-key'
});

// Using the custom hooks
const currentRoute = useCurrentRoute();
const routeState = useRouteState(sdk);

console.log('Current Route:', currentRoute);
console.log('Route State:', routeState);
QuotesComponents