As you build your DeFi business, it’s likely that you are including swaps directly in-app to help your users easily and conveniently trade at the best price. As your business grows, you may consider low-friction ways to monetize in order to generate revenue and build a sustainable Web3 business.
Out-of-the-box with 0x Swap API, you have two monetization options:
- Collect affiliate fees (aka trading fee or commission)
- Collect trade surplus (aka positive slippage)
Example of adding affiliate fee in swap widget
As a 0x Swap API integrator, you have full flexibility to collect an affiliate fee on any trade made through your application.
Setup requires including the following two parameters when making a Swap API request:
feeRecipient- The ETH address that should receive affiliate feesbuyTokenPercentageFee- The percentage of the buyAmount (tokens received by the user) that should be attributed to feeRecipient (your wallet) as affiliate fees. Denoted as a decimal between 0 - 1.0 where 1.0 represents 100%.
https://api.0x.org/swap/v1/quote // Request a firm quote
?sellToken=DAI // Sell DAI
&sellAmount=4000000000000000000000 // Sell amount: 4000 (18 decimal)
&buyToken=ETH // Buy ETH
&takerAddress=$USER_TAKER_ADDRESS // Address that will make the trade
&feeRecipient=$INTEGRATOR_WALLET_ADDRESS // Wallet address that should receive the affiliate fees
&buyTokenPercentageFee=0.01 // Percentage of buyAmount that should be attributed as affiliate fees
--header '0x-api-key: [API_KEY]' // Replace with your own API key
When the transaction has gone through, the fee amount will be sent to the feeRecipient address you've set. The fee is received in the buyToken (the token that the user will receive). If you would like to receive a specific type of token (e.g. USDC), you will need to convert those on your own.
The fee amount is incorporated as part of the quoted price. Two recommended methods of displaying the fees are:
- display the amount returned by
grossBuyAmount * buyTokenPercentageFee - display the
grossBuyAmountand thebuyTokenPercentageFeeseparately
When deciding how much to set your fee amount, consider the following. We recommend setting your pricing in a way that strengthens your bottom line, aligning it with the value you provide to customers while considering any transaction costs. Note that the additional affiliate fee will impact the price for the end user, so find that sweet spot where your solution remains competitive and impactful.
The second option is to collect trade surplus, aka positive slippage. Trade surplus occurs when the user ends up receiving more tokens than their quoted amount. This occurs in trading when an order is executed at a better price than the initially quoted or expected price at the time the order was placed. This may happen for several reasons including:
- fast-moving markets - volatile markets and prices can lead to favorable pricing
- highly liuqidy markets - more buyers and sellers can lead to more favorable offers and bids
- efficient trading platforms and routes - efficient trading platforms and routes can take advantage of breif moments when prices are more favorable
0x Swap API can be easily configured so that you collect the trade surplus and send that to a specified address. This can be done by setting the feeRecipientTradeSurplus parameter in a Swap API request.
feeRecipientTradeSurplus represents the wallet address you want to collect the fee in. When a transaction produces trade surplus, 100% of it will be collected in that wallet. The fee is received in the buyToken (the token that the user will receive). If you would like to receive a specific type of token (e.g. USDC), you will need to make that conversion on your own.
feeRecipientTradeSurplus represents the wallet address you want to collect the fee in. When a transaction produces trade surplus, 100% of it will be collected in that wallet. The fee is received in the buyToken (the token that the user will receive). If you would like to receive a specific type of token (e.g. USDC), you will need to make that conversion on your own.
When feeRecipientTradeSurplus is not specified, the feature is effectively OFF and all trade surplus will be passed back to the user.
Note: Trade surplus is only sent to feeRecipientTradeSurplus for SELLs (i.e. when the sellAmount is specified). It is a no-op for BUYs (i.e. when the buyAmount is specified), which means the user will always receive the trade surplus.
https://api.0x.org/swap/v1/quote // Request a firm quote
?sellToken=DAI // Sell DAI
&sellAmount=4000000000000000000000 // Sell amount: 4000 (18 decimal)
&buyToken=ETH // Buy ETH
&takerAddress=$USER_TAKER_ADDRESS // Address that will make the trade
&feeRecipientTradeSurplus=$INTEGRATOR_WALLET_ADDRESS // The recipient of any trade surplus fees
--header '0x-api-key: [API_KEY]' // Replace with your own API key
Let's add the affiliate fee and trade surplus collection to our app.
First, let's add it in PriceView. We need to set the following constants to /src/constants.ts:
// Add to /src/contants.ts
const AFFILIATE_FEE = 0.01; // Percentage of the buyAmount that should be attributed to feeRecipient as affiliate fees
const FEE_RECIPIENT = "0x75A94931B81d81C7a62b76DC0FcFAC77FbE1e917"; // The ETH address that should receive affiliate fees and trade surplus
Then, we need to include these when we fetch the price from our useEffect hook:
// Fetch price data and set the buyAmount whenever the sellAmount changes
useEffect(() => {
const params = {
sellToken: sellTokenObject.address,
buyToken: buyTokenObject.address,
sellAmount: parsedSellAmount,
buyAmount: parsedBuyAmount,
takerAddress,
feeRecipient: FEE_RECIPIENT, // affiliate fee collection
buyTokenPercentageFee: AFFILIATE_FEE, // affiliate fee collection
feeRecipientTradeSurplus: FEE_RECIPIENT, // trade surplus collection
};
...
[
sellTokenObject.address,
buyTokenObject.address,
parsedSellAmount,
parsedBuyAmount,
chainId,
sellAmount,
setPrice,
FEE_RECIPIENT,
AFFILIATE_FEE,
]);
Lastly, we will display it in the UI:
<div className="text-slate-400">
{price && price.grossBuyAmount
? "Affiliate Fee: " +
Number(
formatUnits(
BigInt(price.grossBuyAmount),
POLYGON_TOKENS_BY_SYMBOL[buyToken].decimals
)
) *
AFFILIATE_FEE +
" " +
POLYGON_TOKENS_BY_SYMBOL[buyToken].symbol
: null}
</div>
Here's how it will look in PriceView:
Next, we will update the QuoteView, the changes will be very similar to what we just did in PriceView.
Our constants should be set already:
const AFFILIATE_FEE = 0.01; // Percentage of the buyAmount that should be attributed to feeRecipient as affiliate fees
const FEE_RECIPIENT = "0x75A94931B81d81C7a62b76DC0FcFAC77FbE1e917"; // The ETH address that should receive affiliate fees
Then, we need to include these when we fetch the price from our useEffect hook:
// Fetch quote data
useEffect(() => {
const params = {
sellToken: price.sellTokenAddress,
buyToken: price.buyTokenAddress,
sellAmount: price.sellAmount,
takerAddress,
feeRecipient: FEE_RECIPIENT, // affiliate fee collection
buyTokenPercentageFee: AFFILIATE_FEE, // affiliate fee collection
feeRecipientTradeSurplus: FEE_RECIPIENT, // trade surplus collection
};
...
[
price.sellTokenAddress,
price.buyTokenAddress,
price.sellAmount,
takerAddress,
setQuote,
FEE_RECIPIENT,
AFFILIATE_FEE,
]);
...
Lastly, we will display it in the UI:
<div className="bg-slate-200 dark:bg-slate-800 p-4 rounded-sm mb-3">
<div className="text-slate-400">
{quote && quote.grossBuyAmount
? "Affiliate Fee: " +
Number(
formatUnits(
BigInt(quote.grossBuyAmount),
buyTokenInfo(chainId).decimals
)
) *
AFFILIATE_FEE +
" " +
buyTokenInfo(chainId).symbol
: null}
</div>
</div>
Here's how it will look in QuoteView:
That's it for collecting affiliate fees and trade surplus!
In this lesson, we cover two out-of-the box ways to easily monetize your swap application - collecting affiliate fees and trade surplus. As our business grows, consider these options in order to generate revenue adn build a sustainble web3 business.
See final code for this lesson
https://github.com/0xProject/token-swap-dapp-course-code/blob/main/L7/app/components/quote.tsx#L20-L21