@echoxyz/sonar-react 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @echoxyz/sonar-react
 
+## 0.6.0
+
+### Minor Changes
+
+- 1ccce38: Remove redundant saleUUID from constructor/Provider
+
+### Patch Changes
+
+- Updated dependencies [1ccce38]
+    - @echoxyz/sonar-core@0.4.0
+
+## 0.5.0
+
+### Minor Changes
+
+- 2e6e793: Introduce useSonarPurchase hook
+
 ## 0.4.2
 
 ### Patch Changes

package/README.md

@@ -4,7 +4,7 @@ React provider and hooks for Echo’s Sonar APIs, built on `@echoxyz/sonar-core`
 
 - Framework/router agnostic (works with React Router, Next.js, etc.).
 - Handles PKCE OAuth redirect flow and token storage for the browser.
-- Exposes a ready-to-use API client bound to a single `saleUUID`.
+- Exposes a ready-to-use API client bound to a single Sonar oauth client.
 
 ## Install
 
@@ -25,7 +25,6 @@ export function AppRoot({ children }: { children: React.ReactNode }) {
     return (
         <SonarProvider
             config={{
-                saleUUID: "<your-sale-uuid>",
                 clientUUID: "<your-oauth-client-id>",
                 redirectURI: window.location.origin + "/oauth/callback",
                 // Optional:
@@ -118,52 +117,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();
+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>
+  );
+}
 
-    useEffect(() => {
-        if (!entity) {
-            return;
-        }
+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;
+    }
+  };
 
-        (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]);
-
-    return null;
+  return (
+    <button onClick={purchase}>
+      Purchase
+    </button>
+  );
 }
 ```
 
@@ -171,7 +194,6 @@ export function Example() {
 
 - `SonarProvider`
     - Props `config`:
-        - `saleUUID: string` (required) – Sale to scope API calls against.
         - `clientUUID: string` (required) – Echo OAuth Client ID.
         - `redirectURI: string` (required) – Your OAuth callback URI.
         - `apiURL?: string` (default: `https://api.echo.xyz`) – API base URL.

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);
 
@@ -37,14 +38,13 @@ function SonarProvider({ children, config }) {
   const [authState, setAuthState] = (0, import_react.useState)({ token: void 0, ready: false });
   const client = (0, import_react.useMemo)(() => {
     return (0, import_sonar_core.createClient)({
-      saleUUID: config.saleUUID,
       apiURL: config.apiURL,
       tokenKey: config.tokenStorageKey,
       onTokenChange: (nextToken) => {
         setAuthState({ token: nextToken ?? void 0, ready: true });
       }
     });
-  }, [config.apiURL, config.saleUUID, config.tokenStorageKey]);
+  }, [config.apiURL, config.tokenStorageKey]);
   (0, import_react.useEffect)(() => {
     setAuthState({ token: client.getToken() ?? void 0, ready: true });
   }, [client]);
@@ -56,7 +56,6 @@ function SonarProvider({ children, config }) {
     window.sessionStorage.setItem("sonar:oauth:state", state);
     window.sessionStorage.setItem("sonar:oauth:verifier", codeVerifier);
     const url = (0, import_sonar_core.buildAuthorizationUrl)({
-      saleUUID: config.saleUUID,
       clientUUID: config.clientUUID,
       redirectURI: config.redirectURI,
       state,
@@ -64,7 +63,7 @@ function SonarProvider({ children, config }) {
       frontendURL: config.frontendURL
     });
     window.location.href = url.toString();
-  }, [config.saleUUID, config.clientUUID, config.redirectURI, config.frontendURL]);
+  }, [config.clientUUID, config.redirectURI, config.frontendURL]);
   const completeOAuth = (0, import_react.useCallback)(
     async ({ code, state }) => {
       if (typeof window === "undefined") {
@@ -192,10 +191,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,13 +1,12 @@
 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;
     config: SonarProviderConfig;
 };
 type SonarProviderConfig = {
-    saleUUID: string;
     clientUUID: string;
     redirectURI: string;
     apiURL?: string;
@@ -39,5 +38,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,13 +1,12 @@
 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;
     config: SonarProviderConfig;
 };
 type SonarProviderConfig = {
-    saleUUID: string;
     clientUUID: string;
     redirectURI: string;
     apiURL?: string;
@@ -39,5 +38,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

@@ -8,14 +8,13 @@ function SonarProvider({ children, config }) {
   const [authState, setAuthState] = useState({ token: void 0, ready: false });
   const client = useMemo(() => {
     return createClient({
-      saleUUID: config.saleUUID,
       apiURL: config.apiURL,
       tokenKey: config.tokenStorageKey,
       onTokenChange: (nextToken) => {
         setAuthState({ token: nextToken ?? void 0, ready: true });
       }
     });
-  }, [config.apiURL, config.saleUUID, config.tokenStorageKey]);
+  }, [config.apiURL, config.tokenStorageKey]);
   useEffect(() => {
     setAuthState({ token: client.getToken() ?? void 0, ready: true });
   }, [client]);
@@ -27,7 +26,6 @@ function SonarProvider({ children, config }) {
     window.sessionStorage.setItem("sonar:oauth:state", state);
     window.sessionStorage.setItem("sonar:oauth:verifier", codeVerifier);
     const url = buildAuthorizationUrl({
-      saleUUID: config.saleUUID,
       clientUUID: config.clientUUID,
       redirectURI: config.redirectURI,
       state,
@@ -35,7 +33,7 @@ function SonarProvider({ children, config }) {
       frontendURL: config.frontendURL
     });
     window.location.href = url.toString();
-  }, [config.saleUUID, config.clientUUID, config.redirectURI, config.frontendURL]);
+  }, [config.clientUUID, config.redirectURI, config.frontendURL]);
   const completeOAuth = useCallback(
     async ({ code, state }) => {
       if (typeof window === "undefined") {
@@ -76,17 +74,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");
   }
@@ -163,9 +163,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.2",
+  "version": "0.6.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -16,7 +16,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@echoxyz/sonar-core": "0.3.0"
+    "@echoxyz/sonar-core": "0.4.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",