> ## Documentation Index
> Fetch the complete documentation index at: https://docs.garden.finance/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

<Steps>
  <Step title="Prerequisites">
    This guide assumes that you have completed the [Setup](/developers/sdk/react/setup) guide.
  </Step>

  <Step title="Setup your React app">
    <Tip>
      For API key, reach out to us in the [Townhall](https://discord.gg/B7RczEFuJ5) or raise a support ticket.
    </Tip>

    Integrate Garden into your React app by wrapping it with the **GardenProvider**. This enables interaction with the protocol and handles session management.

    <Note>
      The Starknet and Solana configurations are only necessary if you choose to support those chains in your app.
    </Note>

    <CodeGroup>
      ```tsx app.tsx theme={null}
      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;
      ```

      ```tsx main.tsx theme={null}
      import React from 'react';
      import ReactDOM from 'react-dom/client';
      import { WagmiProvider } from 'wagmi';
      import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
      import { wagmiConfig } from 'wagmi.ts';
      import { StarknetConfig } from '@starknet-react/core';
      import { starknetChains, connectors as starknetConnectors, starknetProviders } from './starknetConfig.ts';
      import { SolanaProvider } from "./solanaProvider.tsx";

      ReactDOM.createRoot(document.getElementById('root')!).render(
          <React.StrictMode>
              <WagmiProvider config={wagmiConfig}>
                  <QueryClientProvider client={new QueryClient()}>
                      <StarknetConfig
                          chains={starknetChains}
                          provider={starknetProviders}
                          connectors={starknetConnectors}
                          autoConnect
                      >
                          <SolanaProvider>
                              <App />
                          </SolanaProvider>
                      </StarknetConfig>
                  </QueryClientProvider>
              </WagmiProvider>
          </React.StrictMode>
      );
      ```

      ```tsx constants.ts theme={null}
      export const network = import.meta.env.NETWORK
      ```

      ```tsx wagmi.ts theme={null}
      import { createConfig, http } from 'wagmi';
      import { arbitrum, arbitrumSepolia, mainnet, sepolia } from 'wagmi/chains';
      import { injected, metaMask, safe } from 'wagmi/connectors';

      export const wagmiConfig = createConfig({
          chains: [mainnet, arbitrum, sepolia, arbitrumSepolia], // All EVM chains you choose to support
          connectors: [injected(), metaMask(), safe()],
          transports: {
              [mainnet.id]: http(),
              [arbitrum.id]: http(),
              [sepolia.id]: http(),
              [arbitrumSepolia.id]: http(),
          },
      });
      ```

      ```tsx starknetConfig.ts theme={null}
      import { publicProvider } from '@starknet-react/core';
      import { sepolia, mainnet } from '@starknet-react/chains';
      import { argent } from '@starknet-react/core';
      import { braavos } from '@starknet-react/core';
      import { InjectedConnector } from 'starknetkit/injected';

      export const connectors = [
          new InjectedConnector({ options: { id: 'argentX' } }),
          new InjectedConnector({ options: { id: 'braavos' } }),
          new InjectedConnector({ options: { id: 'keplr' } }),
      ];

      export const starknetChains = [mainnet, sepolia];
      export const starknetProviders = publicProvider();
      ```

      ```tsx solanaProvider.tsx theme={null}
      import { FC, ReactNode } from "react";
      import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
      import { network } from "./constants";
      import { Network } from "@gardenfi/utils";

      interface SolanaProviderProps {
          children: ReactNode;
      }

      export const SolanaProvider: FC<SolanaProviderProps> = ({ children }) => {
          const rpcEndpoint =
              network === Network.MAINNET
              ? "https://solana-rpc.publicnode.com"
              : "https://api.devnet.solana.com";

          return (
              <ConnectionProvider endpoint={rpcEndpoint}>
                  <WalletProvider wallets={[]} autoConnect>
                      { children }
                  </WalletProvider>
              </ConnectionProvider>
          );
      };
      ```
    </CodeGroup>
  </Step>

  <Step title="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

    ```tsx swap.tsx theme={null}
    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>
        );
    }
    ```
  </Step>
</Steps>

<Note>
  To include affiliate fees in your swap flow, refer to the implementation [here](/developers/affiliate-fees#using-sdk).
</Note>