Suave SDK provides drop-in ready components for React projects.
This includes a widget for executing swaps directly. This is the easiest way to give your users a seamless experience for swapping tokens.
This component handles all the logic to connect a wallet to our SDK and execute a swap.
Wagmi is used under the hood to connect and does require a WalletConnectId
to be provided.
You can also override the default provider by using the wagmiConfigOverride
prop.
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';
import { SuaveSDKProvider, Widget } from 'suave-sdk/react'; // Importing the necessary components
const sdk = new SuaveSDK({
apiKey: 'your-api-key'
});
// Custom hook for managing route events
// Using the custom hooks
const currentRoute = useCurrentRoute();
const routeState = useRouteState(sdk);
console.log('Current Route:', currentRoute);
console.log('Route State:', routeState);
// Main component to provide SDK context
function SDKContextProvider({ children }) {
const sdk = new SuaveSDK({
apiKey: 'your-api-key'
});
return (
<SuaveSDKProvider sdk={sdk}>
{children}
</SuaveSDKProvider>
);
}
// Using the SDKContextProvider and Widget
function App() {
return (
<SDKContextProvider>
<Widget
//wagmiConfigOverride={wagmiConfig}
walletConnectId={process.env.REACT_APP_WALLETCONNECT_ID}
style={{ backgroundColor: 'lightblue' }} // Example styling
tokens=[]
chains=[]
onSubmit={() => console.log('Submitted')}
onFailure={() => console.log('Failed')}
onQuote={() => console.log('Quoted')}
onRoute={() => console.log('Route')}
onLoaded={() => console.log('Loaded')}
/>
</SDKContextProvider>
);
}