trying to DRY current prices without react context

Author: glitch003

docs/snippets/CurrentPricesTable.jsx

@@ -1,6 +1,6 @@
-import { usePrices, weiToTokens, formatPrice, LitActionPriceComponent, NodePriceMeasurement } from './PriceProvider';
+import { weiToTokens, formatPrice, LitActionPriceComponent, NodePriceMeasurement } from './PriceProvider';
 
-export const CurrentPricesTable = () => {
+export const CurrentPricesTable = ({ priceData }) => {
   // Product IDs
   const ProductId = {
     PkpSign: 0,
@@ -44,6 +44,14 @@ export const CurrentPricesTable = () => {
     [NodePriceMeasurement.perCount]: '/count',
   };
 
+  if (!priceData) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <p>Price data not available. Please wrap this component with PriceProvider.</p>
+      </div>
+    );
+  }
+
   const {
     loading,
     error,
@@ -55,7 +63,7 @@ export const CurrentPricesTable = () => {
     usagePercent,
     pkpMintCost,
     ethers,
-  } = usePrices();
+  } = priceData;
 
   if (loading) {
     return (

docs/snippets/ExampleLitActionCosts.jsx

@@ -1,13 +1,21 @@
-import { usePrices, weiToTokens, formatPrice, LitActionPriceComponent, NodePriceMeasurement } from './PriceProvider';
+import { weiToTokens, formatPrice, LitActionPriceComponent, NodePriceMeasurement } from './PriceProvider';
+
+export const ExampleLitActionCosts = ({ priceData }) => {
+  if (!priceData) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <p>Price data not available. Please wrap this component with PriceProvider.</p>
+      </div>
+    );
+  }
 
-export const ExampleLitActionCosts = () => {
   const {
     loading,
     error,
     litActionConfigs,
     litKeyPriceUSD,
     ethers,
-  } = usePrices();
+  } = priceData;
 
   // Helper to get price for a specific component
   const getComponentPrice = (componentType, measurementType) => {

docs/snippets/PriceProvider.jsx

@@ -1,7 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-
-// Create context
-const PriceContext = createContext(null);
+import { useEffect, useState, Children, cloneElement } from 'react';
 
 // Constants - defined inside component for Mintlify compatibility
 const NAGA_PROD_PRICE_FEED_ADDRESS = '0x88F5535Fa6dA5C225a3C06489fE4e3405b87608C';
@@ -283,7 +280,7 @@ export const PriceProvider = ({ children }) => {
     fetchPrices();
   }, [ethersLoaded]);
 
-  const value = {
+  const priceData = {
     loading,
     error,
     basePrices,
@@ -296,14 +293,17 @@ export const PriceProvider = ({ children }) => {
     ethers: window.ethers,
   };
 
-  return <PriceContext.Provider value={value}>{children}</PriceContext.Provider>;
-};
-
-export const usePrices = () => {
-  const context = useContext(PriceContext);
-  if (!context) {
-    throw new Error('usePrices must be used within a PriceProvider');
+  // Clone children and pass price data as props
+  // Handle both single child and multiple children
+  if (!children) {
+    return null;
   }
-  return context;
+
+  return Children.map(children, (child) => {
+    if (child && typeof child === 'object' && 'type' in child && typeof child.type !== 'string') {
+      return cloneElement(child, { priceData });
+    }
+    return child;
+  });
 };