walrus-info-floating-button

Floating Information Button for Walrus Sites

This package provides a floating information button designed specifically for Walrus and Walrus Sites. It allows seamless integration into any React app related to Walrus, helping to showcase the capabilities of Walrus and Walrus Sites to the community.

🚀 Features

• Displays an information popup about Walrus and Walrus Sites.

🛠 Integration

1️⃣ Install the package

To install the package in your React project, run:

npm install walrus-info-floating-button

2️⃣ Import the Component

Inside your React app, import the FloatingButton component:

import { FloatingButton } from "walrus-info-floating-button";
import "walrus-info-floating-button/src/styles.css"; // Import required CSS

function App() {
  return (
    <FloatingButton
      darkMode={yourVariableHandlingThemes} //This prop is optional, if not provided, the light view will be set as default
    />
  );
}

export default App;

3️⃣ Props for Customization

You can pass your own Walrus site details to the first card of the info popup using these props:

Prop	Type	Description
darkMode	boolean	The variable handling your site theme.

Example:

<FloatingButton
  darkMode={yourVariableHandlingThemes} //This prop is optional, if not provided, the light view will be set as default
/>

📌 Important

Ensure that you import the CSS file for proper styling:

import "walrus-info-floating-button/src/styles.css";

🎯 Why Use This Component?

• Promotes Walrus and Walrus Sites to the community.
• Provides an easy way for users to learn more about Walrus.

Now, you can effortlessly integrate the Floating Information Button into any Walrus-related React app! 🚀
For any questions or contributions, feel free to reach out.

📌 License: MIT
📌 Author: Dio Lougaris 📌 Org: Mysten Labs