Package Exports

walrus-info-floating-button
walrus-info-floating-button/dist/floating-button.cjs.js
walrus-info-floating-button/dist/floating-button.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (walrus-info-floating-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.
Customizable with site-specific details.

🛠 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
      siteName="My Walrus Site"
      siteSubtitle="A decentralized repository powered by Walrus."
      siteIconSrc="/path-to-your-icon.png"
      siteDescription={[
        //Maximum 400 characters in total allowed
        "This is a test description.",
        "Another sentence about the site.",
      ]}
    />
  );
}

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
`siteName`	string	The name of the Walrus site.
`siteSubtitle`	string	A short subtitle of the Walrus site.
`siteIconSrc`	string	The URL or local path to the site's icon image.
`siteDescription`	[string]	A short description of the Walrus site.

Example:

<FloatingButton
  siteName="Snowreads"
  siteSubtitle="A decentralized paper repository on Walrus."
  siteIconSrc="/assets/snowreads-icon.png"
  siteDescription={[
    //Maximum 400 characters in total allowed
    "This is a test description.",
    "Another sentence about the site.",
  ]}
/>

📌 Important

Ensure that you import the CSS file for proper styling:

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

🎯 Why Use This Component?

Promotes Walrus and Walrus Sites to the community.
Provides an easy way for users to learn more about Walrus.
Customizable for any project built on 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