feat: create a hook useOffers() to simply get offers in a react app

.gitignore

@@ -40,3 +40,4 @@ scripts/abi-signatures.csv
 /temp
 storybook-static
 .qodo
+.env

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 (
+    <table>
+      <thead>
+        <tr>
+          <th>Offer ID</th>
+          <th>Name</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {offers.data?.map((offer) => (
+          <tr key={offer.id}>
+            <td>{offer.id}</td>
+            <td>{offer.metadata?.name}</td>
+            <td>{offer.metadata?.description}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+});
+
+```

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<CoreSDK>(
-    initCoreSdk(config, overrides)
+  const [coreSdk, setCoreSdk] = useState<CoreSDK | undefined>(
+    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) {

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";

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
+    }
+  );
+}