create-microact-app 1.0.1

package/templates/web3/src/main.js

@@ -0,0 +1,54 @@
+import './style/main.css';
+import { eventBus } from '@monygroupcorp/microact';
+import { WalletService } from '@monygroupcorp/micro-web3';
+import App from './components/App.js';
+
+const createIconDataUri = (label, background, textColor = '#ffffff') => {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+      <rect width="64" height="64" rx="12" fill="${background}" />
+      <text x="50%" y="55%" font-size="20" font-family="Inter, system-ui" text-anchor="middle" fill="${textColor}">
+        ${label}
+      </text>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+};
+
+const INLINE_WALLET_ICONS = {
+  rabby: createIconDataUri('RB', '#7c5dff'),
+  rainbow: createIconDataUri('RB', '#ff8f70'),
+  phantom: createIconDataUri('PH', '#6a5acd'),
+  metamask: createIconDataUri('MM', '#f6851b'),
+};
+
+async function main() {
+  // 1. Initialize services
+  const walletService = new WalletService(eventBus);
+  
+  try {
+    await walletService.initialize();
+    walletService.walletIcons = INLINE_WALLET_ICONS;
+  } catch (error) {
+    console.error('Failed to initialize WalletService:', error);
+    // Optionally render an error message to the user
+  }
+
+  // 2. Instantiate and mount the main App component
+  const appRoot = document.getElementById('app');
+  if (appRoot) {
+    // Pass services to the App component via props
+    const app = new App({ walletService });
+    app.mount(appRoot);
+  } else {
+    console.error('Root element #app not found');
+  }
+  
+  // 3. (Optional) Global error handling for wallet events
+  eventBus.on('wallet:error', (error) => {
+    console.error('A wallet error occurred:', error);
+    // Here you could show a global error message to the user
+  });
+}
+
+main().catch(console.error);

package/templates/web3/src/style/main.css

@@ -0,0 +1,345 @@
+:root {
+  --bg: #f8f9fa;
+  --card: #ffffff;
+  --accent: #0d6efd;
+  --accent-soft: rgba(13, 110, 253, 0.12);
+  --text: #212529;
+  --muted: #6c757d;
+  --border: rgba(0, 0, 0, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+code {
+  font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+  color: var(--accent);
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero {
+  padding: 4rem 2rem;
+  text-align: center;
+  border-bottom: 1px solid #dee2e6;
+  background: #fff;
+}
+
+.hero .eyebrow {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  letter-spacing: 0.2em;
+  color: var(--muted);
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  margin: 0.5rem 0;
+}
+
+.instructions {
+  list-style: decimal;
+  text-align: left;
+  max-width: 720px;
+  margin: 2rem auto 0;
+  padding-left: 1.5rem;
+  color: var(--muted);
+}
+
+.instructions li {
+  margin-bottom: 0.75rem;
+}
+
+.main {
+  flex: 1;
+  padding: 3rem 1.5rem 4rem;
+  display: flex;
+  justify-content: center;
+  background: var(--bg);
+}
+
+#counter-card {
+  width: min(480px, 100%);
+}
+
+.counter {
+  background: var(--card);
+  border: 1px solid #dee2e6;
+  border-radius: 1rem;
+  padding: 2.5rem;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+}
+
+.counter header {
+  margin-bottom: 2rem;
+}
+
+.counter__meta {
+  color: var(--muted);
+  font-size: 0.85rem;
+  word-break: break-all;
+}
+
+.counter__value {
+  font-size: clamp(3rem, 10vw, 5rem);
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.counter__value .muted {
+  color: var(--muted);
+  font-size: 1.5rem;
+}
+
+.counter__actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.counter__actions button {
+  flex: 1;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  padding: 0.85rem 1rem;
+  border-radius: 999px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.2s;
+}
+
+.counter__actions button:hover:not(:disabled) {
+  background: #0b5ed7;
+  transform: translateY(-1px);
+}
+
+.counter__actions button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.counter__status {
+  color: var(--accent);
+  text-align: center;
+}
+
+.counter__error {
+  color: #f87171;
+  text-align: center;
+}
+
+.counter__helper {
+  background: var(--accent-soft);
+  border-radius: 0.75rem;
+  padding: 0.9rem 1rem;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.footer {
+  border-top: 1px solid #dee2e6;
+  padding: 2rem;
+  text-align: center;
+  color: var(--muted);
+  background: #fff;
+}
+
+#fab-container {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 10;
+}
+
+.floating-wallet-button {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+body .floating-wallet-button .wallet-btn {
+  background: #ffffff !important;
+  border: 1px solid #dee2e6 !important;
+  border-radius: 999px !important;
+  color: #212529 !important;
+  font-weight: 600 !important;
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.65rem;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
+  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
+}
+
+body .floating-wallet-button .wallet-btn:hover {
+  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2) !important;
+  transform: translateY(-2px);
+}
+
+body .floating-wallet-button.connected .wallet-btn {
+  border-color: var(--accent) !important;
+  color: var(--accent) !important;
+}
+
+.wallet-mark {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--muted);
+  display: inline-block;
+}
+
+.wallet-mark--connected {
+  background: #12b886;
+  box-shadow: 0 0 0 4px rgba(18, 184, 134, 0.18);
+}
+
+.wallet-disconnect {
+  font-size: 0.95rem;
+  color: var(--muted);
+  margin-left: 0.5rem;
+  line-height: 1;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.wallet-disconnect:hover {
+  color: var(--accent);
+}
+
+body .wallet-dropdown-menu {
+  border: 1px solid #dee2e6 !important;
+  background: #fff !important;
+  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15) !important;
+  color: var(--text) !important;
+}
+
+.wallet-info-panel {
+  margin-top: 0.75rem;
+  width: 280px;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-radius: 1rem;
+  padding: 1.25rem;
+  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);
+  display: none;
+}
+
+.floating-wallet-button.menu-open .wallet-info-panel {
+  display: block;
+}
+
+.wallet-info-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+  color: #212529;
+}
+
+.wallet-info-label {
+  color: var(--muted);
+}
+
+.wallet-info-value {
+  font-weight: 600;
+}
+
+.wallet-panel-disconnect {
+  display: none;
+}
+
+/* Wallet modal overrides for light theme */
+.wallet-modal-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(33, 37, 41, 0.55);
+  z-index: 999;
+}
+
+.wallet-modal {
+  width: min(380px, 92vw);
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 1rem;
+  padding: 1.75rem;
+  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18);
+}
+
+.wallet-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+}
+
+.wallet-modal-header h3 {
+  margin: 0;
+  font-size: 1.15rem;
+  color: #111;
+}
+
+.wallet-modal-close {
+  border: none;
+  background: transparent;
+  color: #495057;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.wallet-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.wallet-option {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  width: 100%;
+  padding: 0.85rem 1rem;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.85rem;
+  color: #212529;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: border 0.2s, background 0.2s;
+}
+
+.wallet-option:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.wallet-option img {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+}

package/templates/web3/vite.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ command }) => ({
+  base: command === 'build' ? '/<repo-name>/' : '/',
+  optimizeDeps: {
+    include: [
+      'ethers',
+      '@ethersproject/providers',
+      '@ethersproject/abi',
+      '@ethersproject/bignumber',
+      'bn.js',
+      'js-sha3'
+    ],
+  },
+  build: {
+    commonjsOptions: {
+      include: [/node_modules/],
+    },
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash][extname]',
+      },
+    },
+  },
+  define: {
+    global: {},
+  },
+}));