Skip to main content
1

Prerequisites

This guide assumes that you have completed the Setup guide.
2

Setup your React app

For API key, reach out to us in the Townhall or raise a support ticket.
Integrate Garden into your React app by wrapping it with the GardenProvider. This enables interaction with the protocol and handles session management.
The Starknet and Solana configurations are only necessary if you choose to support those chains in your app.
import { GardenProvider } from '@gardenfi/react-hooks';
import { Network } from '@gardenfi/utils';
import { useAccount } from 'starknet-react/core';
import { useWalletClient } from 'wagmi';
import { useAnchorWallet, useConnection } from "@solana/wallet-adapter-react";
import { AnchorProvider } from "@coral-xyz/anchor";

function App() {
    // EVM
    const { data: walletClient } = useWalletClient();
    // Starknet
    const { account: starknetWallet } = useAccount();
    // Solana
    const { connection } = useConnection();
    const anchorWallet = useAnchorWallet();
    const solanaAnchorProvider = new AnchorProvider(connection, anchorWallet, {});

    return (
    <GardenProvider
        config={{
            environment: Network.TESTNET,
            apiKey: <YOUR_API_KEY>,
            wallets: {
                evm: walletClient,
                starknet: starknetWallet,
                solana: solanaAnchorProvider
            }
        }}
        store={localStorage}
    >
        {/* Your swap component */}
    </GardenProvider>
    );
}

export default App;
3

Create a swap component

The lifecycle of a swap is as follows:
  1. Get a quote
  2. Pick the best quote
  3. Initiate the transaction to complete the swap
swap.tsx
import { useState } from 'react';
import { useGarden } from '@gardenfi/react-hooks';
import { Assets } from '@gardenfi/orderbook';
import BigNumber from 'bignumber.js';
import { useAccount } from "wagmi";

export const Swap = () => {
    const [quoteAmount, setQuoteAmount] = useState<string>();
    const [solverId, setSolverId] = useState<string>();

    const { swap, getQuote } = useGarden();
    const { address: evmAddress } = useAccount();

    // Define the assets involved in the swap
    const inputAsset = Assets.arbitrum_sepolia.WBTC;
    const outputAsset = Assets.bitcoin_testnet.BTC;

    // Amount to be swapped, converted to the smallest unit of the input asset
    const amount = new BigNumber(0.01).multipliedBy(10 ** inputAsset.decimals);

    // User's Bitcoin address to receive funds
    const btcAddress = 'tb1q25q3632323232323232323232323232323232';

    const handleGetQuote = async () => {
        if (!getQuote) return;

        // Fetch a quote for the swap
        const quote = await getQuote({
            fromAsset: inputAsset,
            toAsset: outputAsset,
            amount: amount.toNumber(),
            isExactOut: false, // Set to `true` if you wish to specify the output (receive) amount
        });
        if (!quote.ok) {
            return alert(quote.error);
        }

        // Select a quote and save it (the user will confirm this quote before the swap is executed)
        const quoteAmount = quote.val[0].destination.amount
        const solverId = quote.val[0].solver_id
        setQuoteAmount(quoteAmount);
        setSolverId(solverId)
    };

    const handleSwap = async () => {
        if (!swap || !quote) return;

        // Initiate the swap with the selected quote and user's details
        const order = await swap({
            fromAsset: inputAsset,
            toAsset: outputAsset,
            sendAmount: amount.toString(),
            receiveAmount: quoteAmount,
            solverId,
            sourceAddress: evmAddress,
            destinationAddress: btcAddress,
        });
        if (!order.ok) {
            return alert(order.error);
        }

        console.log('✅ Order created:', order.val);
    };

    return (
        <div>
            {/* Fetch swap quote */}
            <button onClick={handleGetQuote}>Get Quote</button>

            {/* Initiate the swap */}
            <button onClick={handleSwap}>Swap</button>
        </div>
    );
}
To include affiliate fees in your swap flow, refer to the implementation here.