FutureStarter React Embed

This project contains a comprehensive collection of reusable and customizable React components designed specifically for integrating with FutureStarter. These components and apps are being used by the WordPress plugin available at https://github.com/fantomstarterio/fs-react-embed-wordpress-plugin.

Features

• Modular React components for displaying project information, sale details, and more
• Support for both testnet and mainnet environments
• Integration with various blockchain networks including Fantom, Ethereum, Polygon, and others
• Customizable styling options for easy integration into existing designs
• Real-time data fetching and display
• Standalone app for Real World Asset (RWA) project card

Components

The main components included in this library are:

• ProjectCard: Displays key project information and investment options
• SaleInfoCard: Shows detailed sale information
• DescriptionCard: Presents the project description
• CampaignCard: Displays campaign-related information
• HeroImageCard: Renders the project's hero image
• RwaProjectCard: A specialized card for Real World Asset (RWA) projects

Apps

The project includes a standalone app in the apps directory:

• rwa-project-card: A separate application that builds the RWA Project Card component into a deployable app.

Installation

To install the package, run:

npm install futurestarter-react-embed

Usage

Here's a basic example of how to use the ProjectCard component:

import { ProjectCard } from 'futurestarter-react-embed';

function App() {
  return (
    <ProjectCard
      id="your-project-id"
      isTestnet={false}
      width="360px"
      backgroundColor="#000"
      color="#fff"
      fontFamily="Inter"
      borderRadius="20px"
      padding="20px"
      gap="20px"
    />
  );
}

Configuration

The components accept various props for customization. Refer to the individual component documentation for detailed information on available props and their usage.

Development

To set up the development environment:

1. Clone the repository
2. Install dependencies with npm install
3. Run the Storybook development server with npm run storybook

Developing the RWA Project Card App

To work on the RWA Project Card app:

1. Navigate to the app directory: cd apps/rwa-project-card
2. Install dependencies: npm install
3. Start the development server: npm run dev

Building

To build the main package for production:

npm run build

To build the RWA Project Card app:

1. Navigate to the app directory: cd apps/rwa-project-card
2. Run the build command: npm run build

Testing

To run the Storybook test runner:

npm run test-storybook

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the ISC License.