-[](https://TODO.aossie/)
+[](https://TODO.stability.nexus/)
@@ -25,19 +25,19 @@
-
-
+
+
-
-
+
+
-
+
@@ -48,615 +48,120 @@
---
-
SocialShareButton
+TODO: Project Name
-Lightweight social sharing component for web applications. Zero dependencies, framework-agnostic.
-
-
-[](https://www.npmjs.com/package/social-share-button-aossie)
-[](LICENSE)
-
----
-## Features
-
-- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email
-- 🎯 Zero dependencies - pure vanilla JavaScript
-- ⚛️ Framework support: React, Next.js, Vue, Angular, or plain HTML
-- 🔄 Auto-detects current URL and page title
-- 📱 Fully responsive and mobile-ready
-- 🎨 Customizable themes (dark/light)
-- ⚡ Lightweight (< 10KB gzipped)
+[TODO](https://TODO.stability.nexus/) is a ... TODO: Project Description.
---
-## Installation
-
-### Via CDN (Recommended)
-
-```html
-
-
-```
+## Project Maturity
+
+TODO: In the checklist below, mark the items that have been completed and delete items that are not applicable to the current project:
+
+* [ ] The project has a logo.
+* [ ] The project has a favicon.
+* [ ] The protocol:
+ - [ ] has been described and formally specified in a paper.
+ - [ ] has had its main properties mathematically proven.
+ - [ ] has been formally verified.
+* [ ] The smart contracts:
+ - [ ] were thoroughly reviewed by at least two knights of The Stable Order.
+ - [ ] were deployed to:
+ - [ ] Ergo
+ - [ ] Cardano
+ - [ ] EVM Chains:
+ - [ ] Ethereum Classic
+ - [ ] Ethereum
+ - [ ] Polygon
+ - [ ] BSC
+ - [ ] Base
+* [ ] The mobile app:
+ - [ ] has an _About_ page containing the Stability Nexus's logo and pointing to the social media accounts of the Stability Nexus.
+ - [ ] is available for download as a release in this repo.
+ - [ ] is available in the relevant app stores.
+* [ ] The web frontend:
+ - [ ] has proper title and metadata.
+ - [ ] has proper open graph metadata, to ensure that it is shown well when shared in social media (Discord, Telegram, Twitter, LinkedIn).
+ - [ ] has a footer, containing the Stability Nexus's logo and pointing to the social media accounts of the Stability Nexus.
+ - [ ] is fully static and client-side.
+ - [ ] is deployed to Github Pages via a Github Workflow.
+ - [ ] is accessible through the https://TODO:PROJECT-NAME.stability.nexus domain.
+* [ ] the project is listed in [https://stability.nexus/protocols](https://stability.nexus/protocols).
---
-## Quick Start Guide
-
-> 🚫 **IMPORTANT:** Do NOT create new files like `ShareButton.jsx` or `ShareButton.tsx`!
-> ✅ Add code directly to your **existing** component (Header, Navbar, etc.)
-
-
-📦 Create React App
-
-### Step 1: Add CDN to `public/index.html`
-
-```html
-
-
-
-
-
-
-
-```
-
-### Step 2: In your **existing** React component (e.g., `MainLayout.jsx`, `Header.jsx`, or wherever you want the button):
-
-```jsx
-import { useEffect, useRef } from 'react';
-
-function YourComponent() { // Use your actual component name (Header, Navbar, etc.)
- const shareButtonRef = useRef(null);
- const initRef = useRef(false);
-
- useEffect(() => {
- if (initRef.current || !window.SocialShareButton) return;
-
- shareButtonRef.current = new window.SocialShareButton({
- container: '#share-button'
- });
- initRef.current = true;
-
- return () => {
- if (shareButtonRef.current?.destroy) {
- shareButtonRef.current.destroy();
- }
- initRef.current = false;
- };
- }, []);
-
- return (
-
- );
-}
-```
-
-
-
-
-▲ Next.js (App Router)
-
-### Step 1: Add CDN to `app/layout.tsx`
-
-```tsx
-import Script from 'next/script';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
-
-
-
- {children}
-
-
-
- );
-}
-```
-
-### Step 2: In your **existing** React component (e.g., `MainLayout.jsx`, `Header.jsx`, or wherever you want the button):
-
-```tsx
-'use client';
-
-import { useEffect, useRef } from 'react';
-
-export default function YourComponent() { // Use your actual component name
- const shareButtonRef = useRef(null);
- const containerRef = useRef(null);
- const initRef = useRef(false);
-
- useEffect(() => {
- const initButton = () => {
- if (initRef.current || !window.SocialShareButton || !containerRef.current) return;
-
- shareButtonRef.current = new window.SocialShareButton({
- container: '#share-button'
- });
- initRef.current = true;
- };
-
- if (window.SocialShareButton) {
- initButton();
- } else {
- const checkInterval = setInterval(() => {
- if (window.SocialShareButton) {
- clearInterval(checkInterval);
- initButton();
- }
- }, 100);
-
- return () => {
- clearInterval(checkInterval);
- if (shareButtonRef.current?.destroy) {
- shareButtonRef.current.destroy();
- }
- initRef.current = false;
- };
- }
-
- return () => {
- if (shareButtonRef.current?.destroy) {
- shareButtonRef.current.destroy();
- }
- initRef.current = false;
- };
- }, []);
-
- return (
-
- );
-}
-
-declare global {
- interface Window {
- SocialShareButton: any;
- }
-}
-```
-
-
-
-
-📄 Next.js (Pages Router)
-
-### Step 1: Add CDN to `pages/_document.tsx`
-
-```tsx
-import { Html, Head, Main, NextScript } from 'next/document';
-
-export default function Document() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
-```
+## Tech Stack
-### Step 2: In your **existing** component (e.g., `components/Header.tsx`, or wherever you want the button):
-
-```tsx
-import { useEffect, useRef } from 'react';
-
-export default function YourComponent() { // Use your actual component name
- const shareButtonRef = useRef(null);
- const containerRef = useRef(null);
- const initRef = useRef(false);
-
- useEffect(() => {
- const initButton = () => {
- if (initRef.current || !window.SocialShareButton || !containerRef.current) return;
-
- shareButtonRef.current = new window.SocialShareButton({
- container: '#share-button'
- });
- initRef.current = true;
- };
-
- if (window.SocialShareButton) {
- initButton();
- } else {
- const checkInterval = setInterval(() => {
- if (window.SocialShareButton) {
- clearInterval(checkInterval);
- initButton();
- }
- }, 100);
-
- return () => {
- clearInterval(checkInterval);
- if (shareButtonRef.current?.destroy) {
- shareButtonRef.current.destroy();
- }
- initRef.current = false;
- };
- }
-
- return () => {
- if (shareButtonRef.current?.destroy) {
- shareButtonRef.current.destroy();
- }
- initRef.current = false;
- };
- }, []);
-
- return (
-
- );
-}
-
-declare global {
- interface Window {
- SocialShareButton: any;
- }
-}
-```
+TODO:
-
+### Frontend
-
-⚡ Vite / Vue / Angular
+TODO:
-### Step 1: Add CDN to `index.html`
+- Next.js 14+ (React)
+- TypeScript
+- TailwindCSS
+- shadcn/ui
-```html
-
-
-
-
-
-
-
-```
+### Blockchain
-### Step 2: Initialize in component
+TODO:
-```javascript
-new window.SocialShareButton({
- container: '#share-button'
-});
-```
-
-
+- Wagmi
+- Solidity Smart Contracts
+- Ethers.js
---
-## Configuration
-
-### Basic Options
-
-```jsx
-new SocialShareButton({
- container: '#share-button', // Required: CSS selector or DOM element
- url: 'https://example.com', // Optional: defaults to window.location.href
- title: 'Custom Title', // Optional: defaults to document.title
- buttonText: 'Share', // Optional: button label text
- buttonStyle: 'primary', // default | primary | compact | icon-only
- theme: 'dark', // dark | light
- platforms: ['twitter', 'linkedin'] // Optional: defaults to all platforms
-});
-```
-
-### All Available Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `container` | string/Element | - | **Required.** CSS selector or DOM element |
-| `url` | string | `window.location.href` | URL to share |
-| `title` | string | `document.title` | Share title/headline |
-| `description` | string | `''` | Additional description text |
-| `hashtags` | array | `[]` | Hashtags for posts (e.g., `['js', 'webdev']`) |
-| `via` | string | `''` | Twitter handle (without @) |
-| `platforms` | array | All platforms | Platforms to show (see below) |
-| `buttonText` | string | `'Share'` | Button label text |
-| `buttonStyle` | string | `'default'` | `default`, `primary`, `compact`, `icon-only` |
-| `buttonColor` | string | `''` | Custom button background color |
-| `buttonHoverColor` | string | `''` | Custom button hover color |
-| `customClass` | string | `''` | Additional CSS class for button |
-| `theme` | string | `'dark'` | `dark` or `light` |
-| `modalPosition` | string | `'center'` | Modal position on screen |
-| `showButton` | boolean | `true` | Show/hide the share button |
-| `onShare` | function | `null` | Callback when user shares: `(platform, url) => {}` |
-| `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` |
-
-**Available Platforms:**
-`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`
-
-### Customize Share Message/Post Text
-
-Control the text that appears when users share to social platforms:
-
-```jsx
-new SocialShareButton({
- container: '#share-button',
- url: 'https://myproject.com',
- title: 'Check out my awesome project!', // Main title/headline
- description: 'An amazing tool for developers', // Additional description
- hashtags: ['javascript', 'webdev', 'opensource'], // Hashtags included in posts
- via: 'MyProjectHandle' // Your Twitter handle
-});
-```
+## Getting Started
-**How messages are customized per platform:**
-- **WhatsApp:** `title` + `description` + `hashtags` + link
-- **Facebook:** `title` + `description` + `hashtags` + link
-- **Twitter/X:** `title` + `description` + `hashtags` + `via` handle + link
-- **Telegram:** `title` + `description` + `hashtags` + link
-- **LinkedIn:** `title` + `description` + link
-- **Reddit:** `title` - `description` (used as title)
-- **Email:** Subject = `title`, Body = `description` + link
+### Prerequisites
-### Customize Button Color & Appearance
+TODO
-**Option 1: Use Pre-built Styles** (Easiest)
+- Node.js 18+
+- npm/yarn/pnpm
+- MetaMask or any other web3 wallet browser extension
-```jsx
-new SocialShareButton({
- container: '#share-button',
- buttonStyle: 'primary' // or 'default', 'compact', 'icon-only'
-});
-```
+### Installation
-**Option 2: Programmatic Color Customization** (Recommended)
+TODO
-Pass `buttonColor` and `buttonHoverColor` to match your project's color scheme:
+#### 1. Clone the Repository
-```jsx
-new SocialShareButton({
- container: '#share-button',
- buttonColor: '#ff6b6b', // Button background color
- buttonHoverColor: '#ff5252' // Hover state color
-});
+```bash
+git clone https://github.com/StabilityNexus/TODO.git
+cd TODO
```
-**Option 3: CSS Class Customization** (Advanced)
+#### 2. Install Dependencies
-For more complex styling, use a custom CSS class:
+Using your preferred package manager:
-```jsx
-new SocialShareButton({
- container: '#share-button',
- buttonStyle: 'primary',
- customClass: 'my-custom-button'
-});
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
```
-Then in your CSS file:
+#### 3. Run the Development Server
-```css
-/* Override the button background color */
-.my-custom-button.social-share-btn {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
-}
+Start the app locally:
-/* Customize hover state */
-.my-custom-button.social-share-btn:hover {
- background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
-}
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
```
-**Color Examples:**
-
-```jsx
-// Material Design Red
-new SocialShareButton({
- container: '#share-button',
- buttonColor: '#f44336',
- buttonHoverColor: '#da190b'
-});
-
-// Tailwind Blue
-new SocialShareButton({
- container: '#share-button',
- buttonColor: '#3b82f6',
- buttonHoverColor: '#2563eb'
-});
-
-// Custom Brand Color
-new SocialShareButton({
- container: '#share-button',
- buttonColor: '#your-brand-color',
- buttonHoverColor: '#your-brand-color-dark'
-});
-```
+#### 4. Open your Browser
-### Button Styles
-
-| Style | Description |
-|-------|-------------|
-| `default` | Standard button with icon and text |
-| `primary` | Gradient button (recommended) |
-| `compact` | Smaller size for tight spaces |
-| `icon-only` | Icon without text |
-
-### Callbacks
-
-```jsx
-new SocialShareButton({
- container: '#share-button',
- onShare: (platform, url) => {
- console.log(`Shared on ${platform}: ${url}`);
- },
- onCopy: (url) => {
- console.log('Link copied:', url);
- }
-});
-```
-
----
-
-## Advanced Usage
-
-### Using npm Package
-
-```javascript
-import SocialShareButton from 'social-share-button-aossie';
-import 'social-share-button-aossie/src/social-share-button.css';
-
-new SocialShareButton({
- container: '#share-button'
-});
-```
-
-### React Wrapper Component (Optional)
-
-If you want a reusable React component, copy `src/social-share-button-react.jsx` to your project:
-
-```jsx
-import { SocialShareButton } from './components/SocialShareButton';
-
-function App() {
- return
;
-}
-```
-
-### Update URL Dynamically (SPA)
-
-```jsx
-const shareButton = useRef(null);
-
-useEffect(() => {
- shareButton.current = new window.SocialShareButton({
- container: '#share-button'
- });
-}, []);
-
-useEffect(() => {
- if (shareButton.current) {
- shareButton.current.updateOptions({
- url: window.location.href
- });
- }
-}, [pathname]); // Update on route change
-```
-
----
-
-## Troubleshooting
-
-
-Multiple buttons appearing
-
-**Cause:** Component re-renders creating duplicate instances
-
-**Solution:** Use `useRef` to track initialization (already in examples above)
-
-
-
-
-Button not appearing
-
-**Cause:** Script loads after component renders
-
-**Solution:** Add null check:
-```jsx
-if (window.SocialShareButton) {
- new window.SocialShareButton({ container: '#share-button' });
-}
-```
-
-
-
-
-Modal not opening
-
-**Cause:** CSS not loaded or ID mismatch
-
-**Solution:**
-- Verify CSS CDN link in ``
-- Match container ID: `container: '#share-button'` = ` 
-
+ 
+ 