diff --git a/.gitignore b/.gitignore
index 2b34e4636..8cea21ba8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@ scripts/abi-signatures.csv
/temp
storybook-static
.qodo
+.env
diff --git a/docs/guides/use-with-react.md b/docs/guides/use-with-react.md
index 108c747e4..7b2ab057b 100644
--- a/docs/guides/use-with-react.md
+++ b/docs/guides/use-with-react.md
@@ -30,3 +30,42 @@ const writeCoreSdk = hooks.useCoreSdk({
web3Provider: provider // ethers provider / signer
});
```
+
+## Get Offers
+
+```ts
+import { hooks, withQueryClientProvider } from "@bosonprotocol/react-kit";
+
+export const OffersTable = withQueryClientProvider(() => {
+ const offers = hooks.useOffers(
+ {
+ envName: "testing",
+ configId: "testing-80002-0"
+ },
+ {
+ offersFirst: 10 // return the first 10 offers
+ }
+ );
+ return (
+
+
+
+ | Offer ID |
+ Name |
+ Description |
+
+
+
+ {offers.data?.map((offer) => (
+
+ | {offer.id} |
+ {offer.metadata?.name} |
+ {offer.metadata?.description} |
+
+ ))}
+
+
+ );
+});
+
+```
diff --git a/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx b/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx
index 62653caf9..a91d25e15 100644
--- a/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx
+++ b/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx
@@ -75,19 +75,24 @@ type CoreSdkOverrides = { web3Lib?: Web3LibAdapter };
*/
export function useCoreSdk(
config: CoreSdkConfig,
- overrides?: CoreSdkOverrides
+ overrides?: CoreSdkOverrides,
+ options: {
+ enabled?: boolean;
+ } = {}
): CoreSDK {
- const [coreSdk, setCoreSdk] = useState(
- initCoreSdk(config, overrides)
+ const [coreSdk, setCoreSdk] = useState(
+ options.enabled !== false ? initCoreSdk(config, overrides) : undefined
);
useEffect(() => {
- const newCoreSdk = initCoreSdk(config, overrides);
- setCoreSdk(newCoreSdk);
+ if (options.enabled !== false) {
+ const newCoreSdk = initCoreSdk(config, overrides);
+ setCoreSdk(newCoreSdk);
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [config.web3Provider, config.configId, overrides]);
+ }, [config.web3Provider, config.configId, overrides, options.enabled]);
- return coreSdk;
+ return coreSdk as CoreSDK; // Force cast as CoreSDK since it's enabled by default
}
function initCoreSdk(config: CoreSdkConfig, overrides?: CoreSdkOverrides) {
diff --git a/packages/react-kit/src/hooks/index.ts b/packages/react-kit/src/hooks/index.ts
index 1e0c6c17a..2430cf273 100644
--- a/packages/react-kit/src/hooks/index.ts
+++ b/packages/react-kit/src/hooks/index.ts
@@ -38,3 +38,4 @@ export * from "./useMetaTx";
export * from "./useMetaTx";
export * from "./usePrevious";
export * from "./useSignerAddress";
+export * from "./useOffers";
diff --git a/packages/react-kit/src/hooks/useOffers.ts b/packages/react-kit/src/hooks/useOffers.ts
new file mode 100644
index 000000000..704d41d9a
--- /dev/null
+++ b/packages/react-kit/src/hooks/useOffers.ts
@@ -0,0 +1,24 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+import { useQuery } from "react-query";
+import { CoreSdkConfig, useCoreSdk } from "./core-sdk/useCoreSdk";
+
+export function useOffers(
+ config: CoreSdkConfig,
+ props: subgraph.GetOffersQueryQueryVariables,
+ options: {
+ enabled?: boolean;
+ } = {}
+) {
+ const coreSDK = useCoreSdk(config, undefined, options);
+ return useQuery(
+ ["offers", props, coreSDK],
+ async () => {
+ const offers = await coreSDK?.getOffers(props);
+
+ return offers;
+ },
+ {
+ ...options
+ }
+ );
+}