XRPL EVM Ecosystem Web

A modern, responsive dashboard for exploring the XRPL EVM ecosystem. This project visually organizes ecosystem sections (Validators, Providers, dApps, Bridges, Core, Auditors, Wallets, etc.) as interactive cards, each containing project logos and links.

---

Table of Contents

• Overview
• Features
• Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Running the App
  • Building for Production
• Customization
  • Adding or Editing Projects
  • Adding Sections
  • Styling
• Deployment
• Contributing
• License

---

Overview

This React app displays the XRPL EVM ecosystem as a set of visually distinct cards, each representing a section (e.g., Wallets, dApps, Validators). Each card shows project logos, which link to their respective sites. The layout is responsive and optimized for both desktop and mobile.

---

Features

• Responsive grid layout for all ecosystem sections
• Minimal, dark-themed UI
• Header with XRPL and Ecosystem branding
• Each section card displays project logos in a neat grid
• Easy to add new projects or sections
• Animated footer that hides on scroll
• All configuration and data in the repo (no backend)

---

Project Structure

my-xrplevm-ecosystem/
  public/
    assets/
      XRPLEVM_FullWhiteLogo.svg
      ECOSYSTEM.svg
      Vector-brandlinesleft.svg
      Vector-brandlinesright.svg
      sections/
        wallets/
        bridges/
        dapps/
        ...
    logos/                  # (legacy/unused, kept for reference)
    favicon-map.ico
    logo192.png
    logo512.png
    robots.txt
    manifest.json
    index.html
  src/
    components/
      BrandLines.tsx
      BrandLines.css
      Header.tsx
      Header.css
      SectionCard.tsx
      SectionCard.css
      logoLinks.ts
    App.tsx
    App.css
    index.tsx
    index.css
    ...
  package.json
  tsconfig.json
  README.md

• public/assets/sections/: Logo images for each section (e.g., /wallets/metamask.png)
• src/components/logoLinks.ts: Maps logo filenames to their URLs
• src/App.tsx: Main layout and section data
• src/components/SectionCard.tsx: Card component for each section

---

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn

Installation

git clone https://github.com/vriveraPeersyst/xrplevm-ecosystem-web.git
cd my-xrplevm-ecosystem
npm install
# or
yarn install

Running the App

npm start
# or
yarn start

• The app runs at http://localhost:3000.

Building for Production

npm run build
# or
yarn build

• Output is in the build/ directory.

---

Customization

Adding or Editing Projects

1. Add the logo image
   Place the logo in public/assets/sections/<section>/.
   Example: public/assets/sections/wallets/metamask.png

2. Add the logo link
   Edit src/components/logoLinks.ts and add:

   'metamask.png': 'https://metamask.io/',

3. Add the logo to a section
   Edit the SECTIONS array in src/App.tsx and add the filename to the relevant section’s logos array.

Adding Sections

• Add a new object to the SECTIONS array in src/App.tsx with a title and logos array.
• If needed, add a folder in public/assets/sections/ for the new section.
• If the section name is not in SECTION_IMAGE_MAP in SectionCard.tsx, add it there.

Styling

• Main styles: src/App.css
• Section card styles: src/components/SectionCard.css
• Header styles: src/components/Header.css
• Brand lines: src/components/BrandLines.css
• Font: Work Sans via Google Fonts

---

Deployment

• Build the app: npm run build
• Deploy the build/ directory to your static hosting (Vercel, Netlify, etc.)
• For custom domains, update public/manifest.json and meta tags in public/index.html as needed.

---

Contributing

Pull requests are welcome! For major changes, open an issue first to discuss.

Development workflow:

• Fork the repo
• Create a new branch
• Commit and push your changes
• Open a pull request

---

License

MIT