> ## Documentation Index
> Fetch the complete documentation index at: https://garden-e60e7dd0-chore-update-preview.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

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

  <Step title="Setup your React app">
    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
      import { GardenProvider } from '@gardenfi/react-hooks';
      import { Environment } 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: Environment.TESTNET,
                  wallets: {
                      evm: walletClient,
                      starknet: starknetWallet,
                      solana: solanaAnchorProvider,
                  }
              }}
          >
              {/* Your swap component */}
          </GardenProvider>
          );
      }

      export default App;
      ```

      ```tsx main.tsx
      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 wagmi.ts
      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
      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
      import { FC, ReactNode } from "react";
      import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
      import { network } from "../../constants/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
    import { SupportedAssets } from '@gardenfi/orderbook';
    import { useGarden } from '@gardenfi/react-hooks';
    import BigNumber from 'bignumber.js';
    import { useState } from 'react';

    export const Swap = () => {
        const [quote, setQuote] = useState<{
            strategyId: string; // A unique identifier for each solver's quote
            quoteAmount: string;
        }>();

        const { swapAndInitiate, getQuote } = useGarden();

        // Define the assets involved in the swap
        const inputAsset = SupportedAssets.testnet.arbitrum_sepolia_WBTC;
        const outputAsset = SupportedAssets.testnet.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 [_strategyId, quoteAmount] = Object.entries(quote.val.quotes)[0];
            setQuote({
                strategyId: _strategyId,
                quoteAmount: quoteAmount,
            });
        };

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

            // Initiate the swap with the selected quote and user's details
            const order = await swapAndInitiate({
                fromAsset: inputAsset,
                toAsset: outputAsset,
                sendAmount: amount.toString(),
                receiveAmount: quote.quoteAmount,
                additionalData: {
                    btcAddress,
                    strategyId: quote.strategyId,
                },
            });
            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/fees#react).
</Note>