@ar.io/wayfinder-react 0.0.5-alpha.2 → 0.0.5-alpha.4

package/README.md

@@ -25,6 +25,8 @@ import {
   WayfinderProvider,
   useWayfinder,
   useWayfinderRequest,
+  useWayfinderUrl,
+  useWayfinderData,
 } from '@ar.io/wayfinder-react';
 import { NetworkGatewaysProvider } from '@ar.io/wayfinder-core';
 import { ARIO } from '@ar.io/sdk';
@@ -35,7 +37,11 @@ function App() {
     <WayfinderProvider
       // pass in the wayfinder options
       // https://github.com/ar-io/wayfinder/tree/alpha/packages/core#custom-configuration
-      gatewaysProvider={new NetworkGatewaysProvider({ ario: ARIO.mainnet() })}
+      gatewaysProvider={new NetworkGatewaysProvider({ 
+        ario: ARIO.mainnet() 
+        limit: 3,
+        sortBy: 'operatorStake',
+      })}
     >
       <YourApp />
     </WayfinderProvider>
@@ -44,24 +50,48 @@ function App() {
 
 // Use components
 function YourComponent() {
-  const { wayfinder } = useWayfinder();
-  const [txData, setTxData] = useState<string | null>(null);
+  const txId = 'your-transaction-id'; // Replace with actual txId
+  
+  // Use custom hooks for URL resolution and data fetching
+  const request = useWayfinderRequest();
+  const { resolvedUrl, isLoading: urlLoading, error: urlError } = useWayfinderUrl({ txId });
 
-  // useMemo to get a resolution URL for a given txId
-  const wayfinderUrl = useMemo(() => wayfinder.resolveUrl(`ar://${txId}`), [txId, wayfinder]);
+  // Use custom hooks for data fetching
+  const [data, setData] = useState<any>(null);
+  const [dataLoading, setDataLoading] = useState(false);
+  const [dataError, setDataError] = useState<Error | null>(null);
 
-  // request some data from arweave via wayfinder
   useEffect(() => {
     (async () => {
-      const res = await wayfinder.request(`ar://${txId}`);
-      setTxData(await res.text());
+      try {
+        setDataLoading(true);
+        setDataError(null);
+        // fetch the data for the txId using wayfinder
+        const response = await request(`ar://${txId}`, {
+          verificationSettings: {
+            enabled: true, // enable verification on the request
+            strict: true, // don't use the data if it's not verified
+          },
+        });
+        const data = await response.arrayBuffer(); // or response.json() if you want to parse the data as JSON
+        setData(data);
+      } catch (error) {
+        setDataError(error as Error);
+      } finally {
+        setDataLoading(false);
+      }
     })();
-  }, [txId, wayfinder]);
+  }, [request, txId]);
 
   return (
     <div>
-      <a href={wayfinderUrl}>View on WayFinder</a>
-      <pre>{txData}</pre>
+      {urlLoading && <p>Resolving URL...</p>}
+      {urlError && <p>Error resolving URL: {urlError.message}</p>}
+      {resolvedUrl && <a href={resolvedUrl}>View on WayFinder</a>}
+      <br />
+      {dataLoading && <p>Loading data...</p>}
+      {dataError && <p>Error loading data: {dataError.message}</p>}
+      <pre>{data}</pre>
     </div>
   );
 }

package/dist/hooks/index.d.ts

@@ -14,6 +14,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Wayfinder } from '@ar.io/wayfinder-core';
 import { type WayfinderContextValue } from '../components/wayfinder-provider.js';
+/**
+ * Hook for getting the Wayfinder instance
+ * @returns Wayfinder instance
+ */
 export declare const useWayfinder: () => WayfinderContextValue;
-export declare const useWayfinderRequest: () => typeof fetch;
+/**
+ * Hook for getting the Wayfinder request function
+ * @returns Wayfinder request function
+ */
+export declare const useWayfinderRequest: () => Wayfinder["request"];
+/**
+ * Hook for resolving a transaction ID to a WayFinder URL using the Wayfinder instance (e.g. txId -> https://<some-gateway>/txId)
+ * @param txId - The transaction ID to resolve
+ * @returns Object containing the resolved URL and loading state
+ */
+export declare const useWayfinderUrl: ({ txId }: {
+    txId: string;
+}) => {
+    resolvedUrl: string | null;
+    isLoading: boolean;
+    error: Error | null;
+    txId: string;
+};

package/dist/hooks/index.js

@@ -14,8 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { WayfinderContext, } from '../components/wayfinder-provider.js';
+/**
+ * Hook for getting the Wayfinder instance
+ * @returns Wayfinder instance
+ */
 export const useWayfinder = () => {
     const context = useContext(WayfinderContext);
     if (!context) {
@@ -23,7 +27,46 @@ export const useWayfinder = () => {
     }
     return context;
 };
+/**
+ * Hook for getting the Wayfinder request function
+ * @returns Wayfinder request function
+ */
 export const useWayfinderRequest = () => {
     const { wayfinder } = useWayfinder();
     return wayfinder.request;
 };
+/**
+ * Hook for resolving a transaction ID to a WayFinder URL using the Wayfinder instance (e.g. txId -> https://<some-gateway>/txId)
+ * @param txId - The transaction ID to resolve
+ * @returns Object containing the resolved URL and loading state
+ */
+export const useWayfinderUrl = ({ txId }) => {
+    const { wayfinder } = useWayfinder();
+    const [resolvedUrl, setResolvedUrl] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!txId) {
+            setResolvedUrl(null);
+            setError(null);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const resolved = await wayfinder.resolveUrl({
+                    originalUrl: `ar://${txId}`,
+                });
+                setResolvedUrl(resolved.toString());
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error('Failed to resolve URL'));
+            }
+            finally {
+                setIsLoading(false);
+            }
+        })();
+    }, [txId, wayfinder]);
+    return { resolvedUrl, isLoading, error, txId };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ar.io/wayfinder-react",
-  "version": "0.0.5-alpha.2",
+  "version": "0.0.5-alpha.4",
   "description": "React components for WayFinder",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,12 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "dist",
-    "package.json",
-    "README.md",
-    "LICENSE"
-  ],
+  "files": ["dist", "package.json", "README.md", "LICENSE"],
   "author": {
     "name": "Permanent Data Solutions Inc",
     "email": "info@ar.io",
@@ -35,7 +30,7 @@
     "format:check": "biome format"
   },
   "dependencies": {
-    "@ar.io/wayfinder-core": "0.0.5-alpha.1",
+    "@ar.io/wayfinder-core": "0.0.5-alpha.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },