Exarcha Wallet Post Feed NAPP

A powerful React component for wallet-based post feeds with advanced features including virtual scrolling, mobile optimization, memory management, and lazy loading.

Features

• 🚀 Virtual Scrolling - Optimized performance for large post feeds
• 📱 Mobile Optimized - Enhanced performance and memory management for mobile devices
• 🔄 Infinite Scroll - Seamless loading of additional posts
• 🎨 Modern UI - Beautiful, responsive design with smooth animations
• 🧠 Memory Management - Automatic cleanup and optimization
• ⚡ Lazy Loading - Code splitting for faster initial load times
• 🎯 Error Boundaries - Robust error handling
• 🔧 Highly Configurable - Customizable parameters and behavior

Installation

npm install exarcha-wallet-post-feed-napp

Dependencies

This package requires the following peer dependencies:

npm install react react-dom

The package also uses these dependencies (automatically installed):

• prop-types - React prop validation
• react-toastify - Toast notifications
• react-infinite-scroll-component - Infinite scrolling
• @fortawesome/fontawesome-svg-core - FontAwesome icons
• @fortawesome/free-solid-svg-icons - Solid icons
• @fortawesome/react-fontawesome - React FontAwesome component
• axios - HTTP client
• bootstrap - CSS framework
• framer-motion - Animation library
• hls.js - Video streaming
• jquery - DOM manipulation
• react-bootstrap - Bootstrap React components
• sweetalert2 - Alert dialogs

Usage

Basic Usage

import { useState } from 'react'
import { Post } from 'exarcha-wallet-post-feed-napp';

function App() {
  const [params, setParams] = useState({
    pmc: "ULSr3DPV+vkFmKKiVbQLZqmyBl36ld3WB6FN56x02boccLDoevDg6oqL6ae20yoMvQyqnPj6riZMst9nOy9NkD6XcJDqjW+qATRARfo2XaJffte7NfiON1p2hU4ph7K/fi3UqWvsRo/4rhqn80kPFSWTjWK5HEbpTd1qsXB4/Qs75xVFnZGankye/voPQbCce17ODLcV25SJ81FKoTUW51YWFi1W3CpLWEoNWm3JexF5BL0C7Z2hI+hsvAOOQf2Moc3aaMZct59LaymFRRRQCx+2b0Hdc8yeRxOpYvXB+t9BnD8/ykZ4CcWhFiQkZ5AyFZLL1xQCW6/eXHytDh7GSJ26CVhGcikKLBonBQ6nhU=",
    walletLoginToken: "FC8CF595-0FE3-4E17-929F-52F2FD9BA8B3",
    entityLoginToken: "CCCFD167-65BA-433C-82A6-46341F103877",
    pageRow: 10,
    EndPointToCall: 'GetPostsForNotifications',
    GUIDToUse: '11f609aa-9e08-4060-9c01-4bc91be756ed',
  })

  return (
    <>
      <Post parameters={params} />
    </>
  )
}

export default App

### Parameters Object

The `parameters` prop is an object containing the following properties:

| Property | Type | Description | Required |
|----------|------|-------------|----------|
| `pmc` | string | Encrypted wallet credentials | ✅ |
| `walletLoginToken` | string | Wallet authentication token | ✅ |
| `entityLoginToken` | string | Entity authentication token | ✅ |
| `pageRow` | number | Number of posts per page | ✅ |
| `EndPointToCall` | string | API endpoint for fetching posts | ✅ |
| `GUIDToUse` | string | Unique identifier for the request | ✅ |

## Features Overview

### Virtual Scrolling
- Optimized rendering for large datasets
- Smooth scrolling performance
- Memory efficient post management

### Mobile Optimization
- Automatic mobile device detection
- Optimized data loading strategies
- Memory cleanup for mobile devices

### Advanced UI Components
- **UploadPostModal** - Create new posts
- **ViewPostModal** - View posts in full-screen
- **EditPostModal** - Edit existing posts
- **Loading Skeletons** - Beautiful loading states
- **Error Boundaries** - Graceful error handling

### Memory Management
- Automatic cleanup on component unmount
- Mobile-specific memory optimization
- Efficient data deduplication

## Styling

The component includes its own CSS styles. Make sure to import the required CSS:

```javascript
import 'exarcha-wallet-post-feed-napp/dist/style/post.css';

Or if using the source directly:

import 'exarcha-wallet-post-feed-napp/src/style/post.css';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Internet Explorer 11+

Performance

• Bundle Size: ~143.5 kB (compressed)
• Initial Load: Optimized with code splitting
• Memory Usage: Automatic cleanup and optimization
• Mobile Performance: Enhanced for mobile devices

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

ISC License

Support

For support, please open an issue on the GitHub repository or contact the maintainers.

Made with ❤️ by Exarcha