@echoxyz/sonar-react 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @echoxyz/sonar-react
 
+## 0.5.0
+
+### Minor Changes
+
+- 2e6e793: Introduce useSonarPurchase hook
+
+## 0.4.2
+
+### Patch Changes
+
+- 1102d83: Ensure that entity is refetched whenever the wallet address changes
+
 ## 0.4.1
 
 ### Patch Changes

package/README.md

@@ -118,52 +118,76 @@ const ExampleEntityPanel = () => {
 
 ```
 
-5. Optional: call APIs with the low level client to implement the purchase flow:
+5. Implement the purchase flow
 
 ```tsx
-import { useEffect } from "react";
-import { useSonarEntity } from "./hooks/useSonarEntity";
-import { useAccount } from "wagmi";
-
-export function Example() {
-    const { address, isConnected } = useAccount();
-    // Would normally need to handle loading and error states like above
-    const { entity } = useSonarEntity({
-        saleUUID: "<your-sale-uuid>",
-        wallet: { address, isConnected },
-    });
-    const client = useSonarClient();
-
-    useEffect(() => {
-        if (!entity) {
-            return;
-        }
+function Example({
+  entityUUID,
+  walletAddress,
+}: {
+  entityUUID: string;
+  walletAddress: string;
+}) {
+  const sonarPurchaser = useSonarPurchase({
+    saleUUID: sonarConfig.saleUUID,
+    entityUUID,
+    entityType,
+    walletAddress,
+  });
+
+  if (sonarPurchaser.loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (sonarPurchaser.error) {
+    return <p>Error: {error.message}</p>;
+  }
+
+  return (
+    <div>
+      {sonarPurchaser.readyToPurchase && (
+        <PurchaseButton
+          generatePurchasePermit={sonarPurchaser.generatePurchasePermit}
+        />
+      )}
+
+      {!sonarPurchaser.readyToPurchase &&
+        sonarPurchaser.failureReason ===
+          PrePurchaseFailureReason.REQUIRES_LIVENESS && (
+          <button
+            onClick={() => {
+              window.open(prePurchaseCheckResult.LivenessCheckURL, "_blank");
+            }}
+          >
+            Complete liveness check to purchase
+          </button>
+        )}
+    </div>
+  );
+}
 
-        (async () => {
-            const pre = await client.prePurchaseCheck({
-                saleUUID: "<your-sale-uuid>",
-                entityUUID: entity.EntityUUID,
-                walletAddress: "0x1234...abcd" as `0x${string}`,
-            });
-
-            if (pre.ReadyToPurchase) {
-                const permit = await client.generatePurchasePermit({
-                    saleUUID: "<your-sale-uuid>",
-                    entityUUID: entity.EntityUUID,
-                    walletAddress: "0x1234...abcd" as `0x${string}`,
-                });
-                console.log(permit.Signature, permit.Permit);
-            }
-
-            const alloc = await client.fetchAllocation({
-                saleUUID: "<your-sale-uuid>",
-                walletAddress,
-            });
-            console.log(alloc);
-        })();
-    }, [entity]);
+function PurchaseButton({
+  generatePurchasePermit,
+}: {
+  generatePurchasePermit: () => Promise<GeneratePurchasePermitResponse>;
+}) {
+  const purchase = async () => {
+    const response = await generatePurchasePermit();
+    const r = response as unknown as {
+      Signature: string;
+      PermitJSON: AllocationPermit;
+    };
+    if (r.Signature && r.PermitJSON) {
+      console.log(permit.Signature, permit.Permit);
+      return;
+    }
+  };
 
-    return null;
+  return (
+    <button onClick={purchase}>
+      Purchase
+    </button>
+  );
 }
 ```
 

package/dist/index.cjs

@@ -23,7 +23,8 @@ __export(index_exports, {
   SonarProvider: () => SonarProvider,
   useSonarAuth: () => useSonarAuth,
   useSonarClient: () => useSonarClient,
-  useSonarEntity: () => useSonarEntity
+  useSonarEntity: () => useSonarEntity,
+  useSonarPurchase: () => useSonarPurchase
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -147,6 +148,7 @@ function useSonarEntity(args) {
       setState({
         loading: false,
         entity: resp.Entity,
+        walletAddress,
         error: void 0,
         hasFetched: true
       });
@@ -155,13 +157,14 @@ function useSonarEntity(args) {
         setState({
           loading: false,
           entity: void 0,
+          walletAddress: void 0,
           error: void 0,
           hasFetched: true
         });
         return;
       }
       const error = err instanceof Error ? err : new Error(String(err));
-      setState({ loading: false, entity: void 0, error, hasFetched: true });
+      setState({ loading: false, entity: void 0, walletAddress: void 0, error, hasFetched: true });
     }
   }, [client, saleUUID, walletAddress, fullyConnected]);
   const reset = (0, import_react2.useCallback)(() => {
@@ -169,16 +172,15 @@ function useSonarEntity(args) {
       loading: false,
       hasFetched: false,
       entity: void 0,
+      walletAddress: void 0,
       error: void 0
     });
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (fullyConnected) {
-      if (!state.hasFetched && !state.loading) {
-        refetch();
-      }
+    if (fullyConnected && state.walletAddress !== walletAddress) {
+      refetch();
     }
-  }, [fullyConnected, state.hasFetched, state.loading, refetch]);
+  }, [fullyConnected, state.walletAddress, walletAddress, refetch]);
   (0, import_react2.useEffect)(() => {
     if (ready && (!authenticated || !walletAddress)) {
       reset();
@@ -191,10 +193,70 @@ function useSonarEntity(args) {
     error: state.error
   };
 }
+function useSonarPurchase(args) {
+  const saleUUID = args.saleUUID;
+  const entityUUID = args.entityUUID;
+  const walletAddress = args.walletAddress;
+  const client = useSonarClient();
+  const [state, setState] = (0, import_react2.useState)({
+    loading: true,
+    readyToPurchase: false,
+    error: void 0
+  });
+  const generatePurchasePermit = (0, import_react2.useCallback)(() => {
+    return client.generatePurchasePermit({
+      saleUUID,
+      entityUUID,
+      walletAddress
+    });
+  }, [client, saleUUID, entityUUID, walletAddress]);
+  (0, import_react2.useEffect)(() => {
+    const fetchPurchaseData = async () => {
+      setState({
+        loading: true,
+        readyToPurchase: false,
+        error: void 0
+      });
+      try {
+        const response = await client.prePurchaseCheck({
+          saleUUID,
+          entityUUID,
+          walletAddress
+        });
+        if (response.ReadyToPurchase) {
+          setState({
+            loading: false,
+            readyToPurchase: true,
+            generatePurchasePermit,
+            error: void 0
+          });
+        } else {
+          setState({
+            loading: false,
+            readyToPurchase: false,
+            failureReason: response.FailureReason,
+            livenessCheckURL: response.LivenessCheckURL,
+            error: void 0
+          });
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({
+          loading: false,
+          readyToPurchase: false,
+          error
+        });
+      }
+    };
+    fetchPurchaseData();
+  }, [saleUUID, entityUUID, walletAddress, client, generatePurchasePermit]);
+  return state;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SonarProvider,
   useSonarAuth,
   useSonarClient,
-  useSonarEntity
+  useSonarEntity,
+  useSonarPurchase
 });

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { SonarClient, EntityDetails } from '@echoxyz/sonar-core';
+import { SonarClient, EntityDetails, GeneratePurchasePermitResponse, PrePurchaseFailureReason } from '@echoxyz/sonar-core';
 
 type SonarProviderProps = {
     children: React.ReactNode;
@@ -39,5 +39,34 @@ declare function useSonarEntity(args: {
     saleUUID: string;
     walletAddress?: string;
 }): UseSonarEntityResult;
+type UseSonarPurchaseResultReadyToPurchase = {
+    loading: false;
+    readyToPurchase: true;
+    error: undefined;
+    generatePurchasePermit: () => Promise<GeneratePurchasePermitResponse>;
+};
+type UseSonarPurchaseResultNotReadyToPurchase = {
+    loading: false;
+    readyToPurchase: false;
+    error: undefined;
+    failureReason: PrePurchaseFailureReason;
+    livenessCheckURL: string;
+};
+type UseSonarPurchaseResultError = {
+    loading: false;
+    readyToPurchase: false;
+    error: Error;
+};
+type UseSonarPurchaseResultLoading = {
+    loading: true;
+    readyToPurchase: false;
+    error: undefined;
+};
+type UseSonarPurchaseResult = UseSonarPurchaseResultLoading | UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase | UseSonarPurchaseResultError;
+declare function useSonarPurchase(args: {
+    saleUUID: string;
+    entityUUID: string;
+    walletAddress: string;
+}): UseSonarPurchaseResult;
 
-export { SonarProvider, type SonarProviderConfig, type UseSonarEntityResult, useSonarAuth, useSonarClient, useSonarEntity };
+export { SonarProvider, type SonarProviderConfig, type UseSonarEntityResult, type UseSonarPurchaseResult, type UseSonarPurchaseResultError, type UseSonarPurchaseResultLoading, type UseSonarPurchaseResultNotReadyToPurchase, type UseSonarPurchaseResultReadyToPurchase, useSonarAuth, useSonarClient, useSonarEntity, useSonarPurchase };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { SonarClient, EntityDetails } from '@echoxyz/sonar-core';
+import { SonarClient, EntityDetails, GeneratePurchasePermitResponse, PrePurchaseFailureReason } from '@echoxyz/sonar-core';
 
 type SonarProviderProps = {
     children: React.ReactNode;
@@ -39,5 +39,34 @@ declare function useSonarEntity(args: {
     saleUUID: string;
     walletAddress?: string;
 }): UseSonarEntityResult;
+type UseSonarPurchaseResultReadyToPurchase = {
+    loading: false;
+    readyToPurchase: true;
+    error: undefined;
+    generatePurchasePermit: () => Promise<GeneratePurchasePermitResponse>;
+};
+type UseSonarPurchaseResultNotReadyToPurchase = {
+    loading: false;
+    readyToPurchase: false;
+    error: undefined;
+    failureReason: PrePurchaseFailureReason;
+    livenessCheckURL: string;
+};
+type UseSonarPurchaseResultError = {
+    loading: false;
+    readyToPurchase: false;
+    error: Error;
+};
+type UseSonarPurchaseResultLoading = {
+    loading: true;
+    readyToPurchase: false;
+    error: undefined;
+};
+type UseSonarPurchaseResult = UseSonarPurchaseResultLoading | UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase | UseSonarPurchaseResultError;
+declare function useSonarPurchase(args: {
+    saleUUID: string;
+    entityUUID: string;
+    walletAddress: string;
+}): UseSonarPurchaseResult;
 
-export { SonarProvider, type SonarProviderConfig, type UseSonarEntityResult, useSonarAuth, useSonarClient, useSonarEntity };
+export { SonarProvider, type SonarProviderConfig, type UseSonarEntityResult, type UseSonarPurchaseResult, type UseSonarPurchaseResultError, type UseSonarPurchaseResultLoading, type UseSonarPurchaseResultNotReadyToPurchase, type UseSonarPurchaseResultReadyToPurchase, useSonarAuth, useSonarClient, useSonarEntity, useSonarPurchase };

package/dist/index.js

@@ -76,17 +76,19 @@ function SonarProvider({ children, config }) {
 }
 
 // src/hooks.ts
-import { APIError } from "@echoxyz/sonar-core";
-import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useState as useState2 } from "react";
+import {
+  APIError
+} from "@echoxyz/sonar-core";
+import { useCallback as useCallback2, useContext, useEffect as useEffect2, useState as useState2 } from "react";
 function useSonarAuth() {
-  const ctx = useContext2(AuthContext);
+  const ctx = useContext(AuthContext);
   if (!ctx) {
     throw new Error("useSonarAuth must be used within a SonarProvider");
   }
   return ctx;
 }
 function useSonarClient() {
-  const ctx = useContext2(ClientContext);
+  const ctx = useContext(ClientContext);
   if (!ctx) {
     throw new Error("useSonarClient must be used within a SonarProvider");
   }
@@ -118,6 +120,7 @@ function useSonarEntity(args) {
       setState({
         loading: false,
         entity: resp.Entity,
+        walletAddress,
         error: void 0,
         hasFetched: true
       });
@@ -126,13 +129,14 @@ function useSonarEntity(args) {
         setState({
           loading: false,
           entity: void 0,
+          walletAddress: void 0,
           error: void 0,
           hasFetched: true
         });
         return;
       }
       const error = err instanceof Error ? err : new Error(String(err));
-      setState({ loading: false, entity: void 0, error, hasFetched: true });
+      setState({ loading: false, entity: void 0, walletAddress: void 0, error, hasFetched: true });
     }
   }, [client, saleUUID, walletAddress, fullyConnected]);
   const reset = useCallback2(() => {
@@ -140,16 +144,15 @@ function useSonarEntity(args) {
       loading: false,
       hasFetched: false,
       entity: void 0,
+      walletAddress: void 0,
       error: void 0
     });
   }, []);
   useEffect2(() => {
-    if (fullyConnected) {
-      if (!state.hasFetched && !state.loading) {
-        refetch();
-      }
+    if (fullyConnected && state.walletAddress !== walletAddress) {
+      refetch();
     }
-  }, [fullyConnected, state.hasFetched, state.loading, refetch]);
+  }, [fullyConnected, state.walletAddress, walletAddress, refetch]);
   useEffect2(() => {
     if (ready && (!authenticated || !walletAddress)) {
       reset();
@@ -162,9 +165,69 @@ function useSonarEntity(args) {
     error: state.error
   };
 }
+function useSonarPurchase(args) {
+  const saleUUID = args.saleUUID;
+  const entityUUID = args.entityUUID;
+  const walletAddress = args.walletAddress;
+  const client = useSonarClient();
+  const [state, setState] = useState2({
+    loading: true,
+    readyToPurchase: false,
+    error: void 0
+  });
+  const generatePurchasePermit = useCallback2(() => {
+    return client.generatePurchasePermit({
+      saleUUID,
+      entityUUID,
+      walletAddress
+    });
+  }, [client, saleUUID, entityUUID, walletAddress]);
+  useEffect2(() => {
+    const fetchPurchaseData = async () => {
+      setState({
+        loading: true,
+        readyToPurchase: false,
+        error: void 0
+      });
+      try {
+        const response = await client.prePurchaseCheck({
+          saleUUID,
+          entityUUID,
+          walletAddress
+        });
+        if (response.ReadyToPurchase) {
+          setState({
+            loading: false,
+            readyToPurchase: true,
+            generatePurchasePermit,
+            error: void 0
+          });
+        } else {
+          setState({
+            loading: false,
+            readyToPurchase: false,
+            failureReason: response.FailureReason,
+            livenessCheckURL: response.LivenessCheckURL,
+            error: void 0
+          });
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({
+          loading: false,
+          readyToPurchase: false,
+          error
+        });
+      }
+    };
+    fetchPurchaseData();
+  }, [saleUUID, entityUUID, walletAddress, client, generatePurchasePermit]);
+  return state;
+}
 export {
   SonarProvider,
   useSonarAuth,
   useSonarClient,
-  useSonarEntity
+  useSonarEntity,
+  useSonarPurchase
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@echoxyz/sonar-react",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",