## Parameters

| Parameter   | Description                                                                                                                                                              | Required |
|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
| **client**  | A RelayClient instance. You can create one using the [SDK](http://localhost:3000/references/relay-kit/sdk/createClient) or retrieve one using the `useRelayClient` hook from the UI kit. | ✅        |
| **wallet**  | A valid [WalletClient](https://viem.sh/docs/clients/wallet.html) from Viem or an AdaptedWallet generated from an adapter. This parameter can be left empty if just retrieving a quote, but is required for executing a quote. | ❌        |
| **options** | Options that map directly to the [quote API](https://docs.relay.link/references/api/get-quote-v2).                                                                 | ✅        |
| **onRequest** | A callback function that triggers when a request is made to fetch the quote.                                                                                          | ❌        |
| **onResponse** | A callback function that triggers when a response is returned.                                                                                                     | ❌        |
| **queryOptions** | Tanstack query options. Refer to the [Tanstack](https://tanstack.com/query/latest/docs/framework/react/guides/query-options) docs.                                   | ❌        |

## Return Data

The hook returns an object with the base [Tanstack Query response](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery), it also returns an `executeQuote` function which allows you to conveniently execute the quote. The function takes one parameter, an [onProgress callback](https://docs.relay.link/references/relay-kit/sdk/actions/execute) that mirrors the underlying execute action. from the SDK.

## Usage

Fetching a Quote

Executing a Quote

```javascript
import { useQuote } from '@relayprotocol/relay-kit-hooks'
import { useWalletClient } from 'wagmi'
import { getClient } from '@relayprotocol/relay-sdk'

const queryOptions = {...} //Query options from tanstack
const walletClient = useWalletClient()
const relayClient = getClient() //Either use getClient, createClient or useRelayClient from the ui kit

const {
    data: quote,
    isLoading: isFetchingQuote,
    executeQuote,
    error
} = useQuote(
    relayClient ? relayClient : undefined,
    walletClient.data,
    {
        user: address,
        originChainId: 1,
        destinationChainId: 10,
        originCurrency: "0x0000000000000000000000000000000000000000",
        destinationCurrency: "0x0000000000000000000000000000000000000000",
        tradeType: "EXACT_INPUT",
        amount: "10000000"
    },
    () => {
        console.log("Request Triggered!")
    },
    () => {
        console.log("Response Returned!")
    },
    queryOptions
)
```

const {
    data: quote,
    isLoading: isFetchingQuote,
    executeQuote,
    error
} = useQuote( ... ) //Refer to the previous example

...

//Then use the executeQuote function on a button for example
<button onClick={() => {
    executeQuote(({ steps, currentStep, currentStepItem, txHashes, details }) => {
        //Handle the callback function
    })
}}>Execute Quote</button>
```

## Query Function

```javascript
import { queryQuote } from "@relayprotocol/relay-kit-hooks";

const response = queryQuote("https://api.relay.link", {
    user: address,
    originChainId: 1,
    destinationChainId: 10,
    originCurrency: "0x0000000000000000000000000000000000000000",
    destinationCurrency: "0x0000000000000000000000000000000000000000",
    tradeType: "EXACT_INPUT",
    amount: "10000000",
});
```