@blockfact/react-facti 1.0.0

package/README.md

@@ -0,0 +1,185 @@
+# @blockfact/react-facti
+
+React component for displaying and verifying .facti files with blockchain verification.
+
+## Installation
+
+```bash
+npm install @blockfact/react-facti
+# or
+yarn add @blockfact/react-facti
+```
+
+## Usage
+
+### Basic Display
+
+```jsx
+import FactiImage from '@blockfact/react-facti';
+
+function App() {
+  return (
+    <FactiImage 
+      factiUrl="https://gateway.pinata.cloud/ipfs/QmXXX"
+      alt="Verified Content"
+    />
+  );
+}
+```
+
+### With Metadata
+
+```jsx
+<FactiImage 
+  factiUrl="https://gateway.pinata.cloud/ipfs/QmXXX"
+  showMetadata={true}
+  onMetadataLoad={(metadata) => {
+    console.log('Transaction:', metadata.tx_hash);
+  }}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<FactiImage 
+  factiUrl="https://gateway.pinata.cloud/ipfs/QmXXX"
+  className="my-image"
+  style={{ maxWidth: '500px', margin: '20px auto' }}
+/>
+```
+
+### Parse Manually
+
+```jsx
+import { parseFacTi } from '@blockfact/react-facti';
+
+function CustomComponent() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    parseFacTi('https://gateway.pinata.cloud/ipfs/QmXXX')
+      .then(setData);
+  }, []);
+
+  if (!data) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <img src={data.imageUrl} alt="Content" />
+      <p>Owner: {data.metadata.wallet}</p>
+      <p>Location: {data.metadata.latitude}, {data.metadata.longitude}</p>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `factiUrl` | string | required | URL to .facti file |
+| `alt` | string | `'BlockFact Content'` | Image alt text |
+| `className` | string | `''` | CSS class name |
+| `style` | object | `{}` | Inline styles |
+| `showMetadata` | boolean | `false` | Show metadata below image |
+| `onMetadataLoad` | function | `null` | Callback when metadata loads |
+| `onError` | function | `null` | Callback on error |
+
+## API
+
+### `parseFacTi(factiUrl)`
+
+Parse a .facti file and extract image + metadata.
+
+**Returns:**
+```javascript
+{
+  imageUrl: "blob:...",  // Blob URL for image
+  metadata: {
+    tx_hash: "0x...",
+    wallet: "0x...",
+    timestamp: "2026-02-26T13:20:00Z",
+    latitude: 40.7128,
+    longitude: -74.0060,
+    // ... other fields
+  }
+}
+```
+
+## TypeScript
+
+Full TypeScript support included:
+
+```tsx
+import FactiImage, { FactiMetadata, parseFacTi } from '@blockfact/react-facti';
+
+function App() {
+  const handleLoad = (metadata: FactiMetadata) => {
+    console.log(metadata.tx_hash);
+  };
+
+  return <FactiImage factiUrl="..." onMetadataLoad={handleLoad} />;
+}
+```
+
+## Features
+
+- ✅ Zero dependencies (only React peer dependency)
+- ✅ TypeScript support
+- ✅ Automatic image extraction from .facti files
+- ✅ Blockchain verification links
+- ✅ GPS coordinates with Google Maps links
+- ✅ Loading and error states
+- ✅ Memory cleanup (revokes blob URLs)
+
+## Examples
+
+### Gallery
+
+```jsx
+const images = [
+  'https://gateway.pinata.cloud/ipfs/QmAAA',
+  'https://gateway.pinata.cloud/ipfs/QmBBB',
+  'https://gateway.pinata.cloud/ipfs/QmCCC',
+];
+
+function Gallery() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
+      {images.map(url => (
+        <FactiImage key={url} factiUrl={url} showMetadata={true} />
+      ))}
+    </div>
+  );
+}
+```
+
+### With Error Handling
+
+```jsx
+function SafeFactiImage({ factiUrl }) {
+  const [error, setError] = useState(null);
+
+  if (error) {
+    return <div>Failed to load: {error.message}</div>;
+  }
+
+  return (
+    <FactiImage 
+      factiUrl={factiUrl}
+      onError={setError}
+    />
+  );
+}
+```
+
+## License
+
+MIT
+
+## Links
+
+- [npm](https://www.npmjs.com/package/@blockfact/react-facti)
+- [GitHub](https://github.com/blockfact/react-facti)
+- [BlockFact](https://blockfact.io)

package/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface FactiMetadata {
+  tx_hash: string;
+  wallet: string;
+  timestamp: string;
+  latitude: number;
+  longitude: number;
+  session_id: string;
+  poseidon_hash: string;
+  owner_address: string;
+  created_at: string;
+  finalized_at: string;
+  mime: string;
+  version: string;
+}
+
+export interface ParsedFacti {
+  imageUrl: string;
+  metadata: FactiMetadata;
+}
+
+export interface FactiImageProps {
+  factiUrl: string;
+  alt?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  showMetadata?: boolean;
+  onMetadataLoad?: (metadata: FactiMetadata) => void;
+  onError?: (error: Error) => void;
+}
+
+export function parseFacTi(factiUrl: string): Promise<ParsedFacti>;
+
+export default function FactiImage(props: FactiImageProps): JSX.Element;

package/index.js

@@ -0,0 +1,138 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Parse .facti file from URL
+ * @param {string} factiUrl - URL to .facti file
+ * @returns {Promise<{imageUrl: string, metadata: object}>}
+ */
+export async function parseFacTi(factiUrl) {
+  const response = await fetch(factiUrl);
+  const arrayBuffer = await response.arrayBuffer();
+  const data = new Uint8Array(arrayBuffer);
+  
+  if (data[0] !== 0xFA || data[1] !== 0x49 || data[2] !== 0x01 || data[3] !== 0x00) {
+    throw new Error('Invalid .facti file format');
+  }
+  
+  const metadataLength = new DataView(arrayBuffer, 36, 4).getUint32(0);
+  const metadataBytes = data.slice(40, 40 + metadataLength);
+  const metadata = JSON.parse(new TextDecoder().decode(metadataBytes));
+  
+  const imageData = data.slice(40 + metadataLength);
+  const blob = new Blob([imageData], { type: metadata.mime || 'image/png' });
+  const imageUrl = URL.createObjectURL(blob);
+  
+  return { imageUrl, metadata };
+}
+
+/**
+ * FactiImage Component
+ * Displays .facti file with blockchain verification
+ */
+export default function FactiImage({ 
+  factiUrl, 
+  alt = 'BlockFact Content',
+  className = '',
+  style = {},
+  showMetadata = false,
+  onMetadataLoad,
+  onError
+}) {
+  const [imageUrl, setImageUrl] = useState(null);
+  const [metadata, setMetadata] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function load() {
+      try {
+        setLoading(true);
+        const { imageUrl, metadata } = await parseFacTi(factiUrl);
+        
+        if (mounted) {
+          setImageUrl(imageUrl);
+          setMetadata(metadata);
+          if (onMetadataLoad) onMetadataLoad(metadata);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err.message);
+          if (onError) onError(err);
+        }
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+
+    load();
+
+    return () => {
+      mounted = false;
+      if (imageUrl) URL.revokeObjectURL(imageUrl);
+    };
+  }, [factiUrl]);
+
+  if (loading) {
+    return <div className={className} style={style}>Loading...</div>;
+  }
+
+  if (error) {
+    return <div className={className} style={{ ...style, color: '#f44336' }}>Error: {error}</div>;
+  }
+
+  return (
+    <div className={className} style={style}>
+      <img 
+        src={imageUrl} 
+        alt={alt}
+        style={{ 
+          maxWidth: '100%', 
+          border: '2px solid #4CAF50', 
+          borderRadius: '4px' 
+        }}
+      />
+      
+      {showMetadata && metadata && (
+        <div style={{ 
+          background: '#f5f5f5', 
+          padding: '15px', 
+          borderRadius: '5px', 
+          marginTop: '10px',
+          fontSize: '13px'
+        }}>
+          <div style={{ fontWeight: 'bold', marginBottom: '10px' }}>📋 Metadata</div>
+          <div style={{ margin: '5px 0' }}>
+            <strong>Transaction:</strong>{' '}
+            <a 
+              href={`https://sepolia.voyager.online/tx/${metadata.tx_hash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: '#4CAF50' }}
+            >
+              {metadata.tx_hash?.slice(0, 20)}...
+            </a>
+          </div>
+          <div style={{ margin: '5px 0' }}>
+            <strong>Owner:</strong> {metadata.wallet?.slice(0, 20)}...
+          </div>
+          <div style={{ margin: '5px 0' }}>
+            <strong>Timestamp:</strong> {metadata.timestamp}
+          </div>
+          <div style={{ margin: '5px 0' }}>
+            <strong>Location:</strong>{' '}
+            <a 
+              href={`https://www.google.com/maps?q=${metadata.latitude},${metadata.longitude}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: '#4CAF50' }}
+            >
+              {metadata.latitude}, {metadata.longitude}
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@blockfact/react-facti",
+  "version": "1.0.0",
+  "description": "React component for displaying and verifying .facti files",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"No tests yet\""
+  },
+  "keywords": [
+    "blockfact",
+    "facti",
+    "blockchain",
+    "verification",
+    "react",
+    "image"
+  ],
+  "author": "BlockFact",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blockfact/react-facti.git"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md"
+  ]
+}