Quickstart

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.

   app.tsx

   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.