1
Prerequistes
This guide assumes that you have completed the Setup guide.
2
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.
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 { 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;
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>
);
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(),
},
});
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();
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>
);
};
3
Create a swap component
The lifecycle of a swap is as follows:
- Get a quote
- Pick the best quote
- Initiate the transaction to complete the swap
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>
);
}
To include affiliate fees in your swap flow, refer to the implementation here.