@monygroupcorp/micro-web3 1.3.1 → 1.3.3

package/package.json

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

package/src/assets/walletIcons.js

@@ -0,0 +1,16 @@
+/**
+ * Wallet icons as inline SVG strings
+ * Monochrome outlined style - uses currentColor for easy theming
+ */
+
+export const walletIcons = {
+  metamask: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20L7 16L4 4L10 10H14L20 4L17 16L12 20Z"/></svg>`,
+
+  rainbow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 18A8 8 0 0 1 20 18"/><path d="M7 18A5 5 0 0 1 17 18"/><path d="M10 18A2 2 0 0 1 14 18"/></svg>`,
+
+  rabby: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="15" rx="6" ry="5"/><path d="M8 10C8 10 7 3 9 3C11 3 10 8 10 10"/><path d="M16 10C16 10 17 3 15 3C13 3 14 8 14 10"/></svg>`,
+
+  phantom: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 11C6 6.58 8.69 3 12 3C15.31 3 18 6.58 18 11V19C18 19 17 18 16 19C15 20 14 19 13 19C12 19 12 20 11 19C10 19 9 20 8 19C7 18 6 19 6 19V11Z"/></svg>`
+};
+
+export default walletIcons;

package/src/components/FloatingWalletButton/FloatingWalletButton.js

@@ -2,6 +2,7 @@ import { Component, h, render, eventBus } from '@monygroupcorp/microact';
 import WalletModal from '../Wallet/WalletModal.js';
 import { SettingsModal } from '../SettingsModal/SettingsModal.js';
 import { ethers } from 'ethers';
+import { walletIcons } from '../../assets/walletIcons.js';
 
 /**
  * FloatingWalletButton component
@@ -224,7 +225,7 @@ export class FloatingWalletButton extends Component {
     }
 
     showWalletModal() {
-        // Get provider map and icons from this.walletService
+        // Get provider map
         const providerMap = {
             rabby: () => window.ethereum?.isRabby ? window.ethereum : null,
             rainbow: () => window.ethereum?.isRainbow ? window.ethereum : null,
@@ -232,13 +233,6 @@ export class FloatingWalletButton extends Component {
             metamask: () => window.ethereum || null
         };
 
-        const walletIcons = {
-            rabby: '/public/wallets/rabby.webp',
-            rainbow: '/public/wallets/rainbow.webp',
-            phantom: '/public/wallets/phantom.webp',
-            metamask: '/public/wallets/MetaMask.webp'
-        };
-
         // Create WalletModal if not exists
         if (!this.walletModal) {
             if (!this.modalRoot) {

package/src/components/Wallet/WalletModal.js

@@ -53,9 +53,9 @@ export class WalletModal extends Component {
                                 'data-wallet': walletType,
                                 onClick: () => this.handleWalletClick(walletType)
                             },
-                                h('img', {
-                                    src: this.props.walletIcons[walletType],
-                                    alt: walletType
+                                h('span', {
+                                    className: 'wallet-icon',
+                                    ref: el => { if (el) el.innerHTML = this.props.walletIcons[walletType]; }
                                 }),
                                 h('span', null, walletType.charAt(0).toUpperCase() + walletType.slice(1))
                             )

package/src/index.js

@@ -6,6 +6,9 @@ import PriceService from './services/PriceService.js';
 import * as IpfsService from './services/IpfsService.js';
 import EventIndexer from './services/EventIndexer.js';
 
+// Assets
+import { walletIcons } from './assets/walletIcons.js';
+
 // Storage adapters and settings
 import { IndexedDBAdapter, MemoryAdapter, IndexerSettings } from './storage/index.js';
 
@@ -40,6 +43,9 @@ export {
   MemoryAdapter,
   IndexerSettings,
 
+  // Assets
+  walletIcons,
+
   // UI Components
   FloatingWalletButton,
   WalletButton,