@monygroupcorp/micro-web3 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monygroupcorp/micro-web3",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.",
   "main": "dist/micro-web3.cjs.js",
   "module": "dist/micro-web3.esm.js",

package/rollup.config.cjs

@@ -29,8 +29,8 @@ module.exports = [
     plugins: [
       nodeResolve(),
       commonjs(),
-      terser()
+      terser({ maxWorkers: 1 })
     ],
     external: ['@monygroupcorp/microact']
   }
-];
+];

package/src/components/FloatingWalletButton/FloatingWalletButton.css

@@ -0,0 +1,227 @@
+/* FloatingWalletButton - Bottom-right floating wallet connection button with power user dropdown */
+
+.floating-wallet-button {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 9999; /* Above all content */
+}
+
+.floating-wallet-button .wallet-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(101, 67, 33, 0.9));
+    border: 2px solid rgba(218, 165, 32, 0.6);
+    border-radius: 50px;
+    color: #fff;
+    font-family: 'Cinzel', serif;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+}
+
+.floating-wallet-button .wallet-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(218, 165, 32, 0.4);
+    border-color: rgba(218, 165, 32, 0.8);
+    background: linear-gradient(135deg, rgba(160, 82, 45, 0.95), rgba(120, 80, 50, 0.95));
+}
+
+.floating-wallet-button .wallet-btn:active {
+    transform: translateY(0);
+}
+
+/* Wallet icon */
+.floating-wallet-button .wallet-icon {
+    font-size: 1.2rem;
+    line-height: 1;
+}
+
+/* Wallet text/address */
+.floating-wallet-button .wallet-text,
+.floating-wallet-button .wallet-address {
+    font-size: 0.875rem;
+    white-space: nowrap;
+}
+
+/* Loading state */
+.floating-wallet-button.loading {
+    pointer-events: none;
+}
+
+.floating-wallet-button .wallet-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(218, 165, 32, 0.3);
+    border-top-color: rgba(218, 165, 32, 0.9);
+    border-radius: 50%;
+    animation: wallet-spin 0.8s linear infinite;
+}
+
+@keyframes wallet-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Dropdown menu */
+.wallet-dropdown-menu {
+    position: absolute;
+    bottom: calc(100% + 0.5rem);
+    right: 0;
+    min-width: 240px;
+    background: linear-gradient(135deg, rgba(139, 69, 19, 0.98), rgba(101, 67, 33, 0.98));
+    border: 2px solid rgba(218, 165, 32, 0.6);
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(15px);
+    overflow: hidden;
+    animation: dropdown-slide-up 0.2s ease-out;
+}
+
+@keyframes dropdown-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dropdown header */
+.wallet-dropdown-menu .dropdown-header {
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(218, 165, 32, 0.3);
+}
+
+.wallet-dropdown-menu .dropdown-address {
+    font-family: 'Cinzel', serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: rgba(218, 165, 32, 0.95);
+    margin-bottom: 0.25rem;
+}
+
+.wallet-dropdown-menu .dropdown-balance {
+    font-family: 'Lato', sans-serif;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Dropdown divider */
+.wallet-dropdown-menu .dropdown-divider {
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(218, 165, 32, 0.3) 50%,
+        transparent
+    );
+    margin: 0;
+}
+
+/* Dropdown items */
+.wallet-dropdown-menu .dropdown-items {
+    padding: 0.5rem;
+}
+
+.wallet-dropdown-menu .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: rgba(255, 255, 255, 0.9);
+    font-family: 'Lato', sans-serif;
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.wallet-dropdown-menu .dropdown-item:hover {
+    background: rgba(218, 165, 32, 0.15);
+    color: #fff;
+}
+
+.wallet-dropdown-menu .dropdown-item:active {
+    background: rgba(218, 165, 32, 0.25);
+}
+
+.wallet-dropdown-menu .dropdown-item .item-icon {
+    font-size: 1.125rem;
+    line-height: 1;
+    opacity: 0.9;
+}
+
+.wallet-dropdown-menu .dropdown-item .item-label {
+    flex: 1;
+}
+
+/* Disconnect button special styling */
+.wallet-dropdown-menu .dropdown-item.disconnect {
+    color: rgba(255, 99, 71, 0.9);
+}
+
+.wallet-dropdown-menu .dropdown-item.disconnect:hover {
+    background: rgba(255, 99, 71, 0.15);
+    color: rgba(255, 99, 71, 1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .floating-wallet-button {
+        bottom: 1rem;
+        right: 1rem;
+    }
+
+    .floating-wallet-button .wallet-btn {
+        padding: 0.625rem 1rem;
+        font-size: 0.8rem;
+    }
+
+    .wallet-dropdown-menu {
+        min-width: 200px;
+        right: 0;
+    }
+
+    .wallet-dropdown-menu .dropdown-item {
+        padding: 0.625rem 0.875rem;
+        font-size: 0.8rem;
+    }
+}
+
+/* Small screens - even more compact */
+@media (max-width: 480px) {
+    .floating-wallet-button {
+        bottom: 0.75rem;
+        right: 0.75rem;
+    }
+
+    .floating-wallet-button .wallet-btn {
+        padding: 0.5rem 0.875rem;
+        font-size: 0.75rem;
+    }
+
+    .floating-wallet-button .wallet-icon {
+        font-size: 1rem;
+    }
+
+    .wallet-dropdown-menu {
+        min-width: 180px;
+    }
+}
+
+/* Ensure menu appears above button when open */
+.floating-wallet-button.menu-open .wallet-btn {
+    border-color: rgba(218, 165, 32, 0.9);
+    background: linear-gradient(135deg, rgba(160, 82, 45, 0.95), rgba(120, 80, 50, 0.95));
+}