@koehler8/cms-ext-crypto 1.0.0-beta.4

package/content.defaults.json

@@ -0,0 +1,171 @@
+{
+  "presale": {
+    "presaleStatus": "Presale is live",
+    "ethSpend": "ETH to spend",
+    "balance": "Your ETH Balance",
+    "youReceive": "You receive",
+    "defaultStakeAfterPurchase": true,
+    "connectHeadline": "Connect your wallet to get started",
+    "connectButtonLabel": "Buy With Crypto",
+    "needEthButtonLabel": "Need ETH?",
+    "chooseAmountTitle": "Choose your amount",
+    "confirmPurchaseTitle": "Confirm your purchase",
+    "confirmPurchaseSubtitle": "Choose your path. We'll show progress and a success receipt with links to Etherscan.",
+    "amountRaisedLabel": "Amount raised",
+    "timeRemainingLabel": "Time remaining",
+    "timeEndingLabel": "Ending now",
+    "timeEndedLabel": "Presale ended",
+    "countdownLabel": "Next price increase in",
+    "countdownPendingLabel": "Updating schedule…",
+    "countdownUnits": {
+      "day": "DAY",
+      "hour": "HRS",
+      "minute": "MINS",
+      "second": "SECS"
+    },
+    "metricWalletsLabel": "Wallets connected",
+    "sectionLabels": {
+      "summary": "Summary",
+      "status": "Status"
+    },
+    "panelTitles": {
+      "stake": "Stake & Rewards"
+    },
+    "pausedMessage": "The presale is paused right now. Check back soon for the next round.",
+    "walletStatus": {
+      "connected": "Wallet connected",
+      "wrongNetwork": "Wrong network",
+      "switching": "Switching…",
+      "switchButton": "Switch to Ethereum Mainnet"
+    },
+    "networkAlert": {
+      "title": "Network mismatch",
+      "ctaLabel": "Switch network"
+    },
+    "formCopy": {
+      "amountLabel": "Amount",
+      "fillMaxLabel": "Fill with maximum available ETH",
+      "maxButtonLabel": "MAX",
+      "conversionHint": "≈ {amount} {token} at the current presale rate.",
+      "estimateNotice": "You'll receive approximately {amount} {token}*"
+    },
+    "helperSurfaces": {
+      "howItWorks": { "enabled": false },
+      "needEth": { "enabled": false }
+    },
+    "howItWorks": {
+      "buttonLabel": "How it works",
+      "title": "How it works",
+      "stepTitles": [
+        "Connect wallet",
+        "Enter amount",
+        "Confirm purchase"
+      ],
+      "steps": [
+        "Connect your wallet to get started.",
+        "Enter the ETH you want to spend to see live token and USD estimates.",
+        "Review the totals, confirm in your wallet, and lock today's presale price."
+      ],
+      "switchNetworkPrompt": "Switch to Ethereum Mainnet, then enter how much ETH you want to spend.",
+      "pendingPrompt": "Approve the transaction in your wallet and watch for the confirmation banner.",
+      "successPrompt": "Purchase confirmed — your receipt is on Etherscan and staking is available."
+    },
+    "transactionStatus": {
+      "pendingTitle": "Transaction pending…",
+      "pendingMessages": {
+        "short": "Awaiting confirmation on Ethereum (~15 seconds).",
+        "medium": "Still pending… Ethereum is a bit busy. Hang tight.",
+        "long": "Still pending… the network is busy, but your transaction is queued."
+      },
+      "pendingOverlayTitle": "Transaction pending…",
+      "pendingLinkLabel": "View on Etherscan",
+      "pendingBuyLabel": "Purchasing…",
+      "pendingBuyAndStakeLabel": "Buying & Staking…",
+      "successTitle": "Presale purchase confirmed",
+      "successDescription": "You secured {tokens} {tokenSymbol} ({eth} ETH).",
+      "successLinkLabel": "View transaction on Etherscan",
+      "errorTitle": "We couldn't complete that",
+      "errorButtonLabel": "Try again"
+    },
+    "successCelebration": {
+      "dismissLabel": "Dismiss success message",
+      "eyebrow": "Presale success",
+      "transactionLabel": "Transaction",
+      "ethSpentLabel": "ETH Spent"
+    },
+    "accessibility": {
+      "dismissAlert": "Dismiss message",
+      "hideInstructions": "Hide instructions",
+      "closeNeedEth": "Close"
+    },
+    "statusCopy": {
+      "presaleComplete": "Presale is complete",
+      "claimLive": "Unstaked claim is live",
+      "stakedClaimLive": "Token claim is live",
+      "countdownLoading": "Countdown is loading",
+      "priceContext": "Live token price",
+      "priceLoading": "Token price is loading",
+      "emptyMetrics": "Presale metrics will appear once activity starts."
+    },
+    "onboarding": {
+      "enabled": false
+    },
+    "needEth": {
+      "title": "Need ETH for the presale?",
+      "description": "Grab ETH from a trusted on-ramp, then send it to the wallet you connect here.",
+      "links": [
+        {
+          "label": "Buy ETH on Coinbase",
+          "href": "https://www.coinbase.com/buy/ethereum"
+        },
+        {
+          "label": "MoonPay",
+          "href": "https://www.moonpay.com/buy/eth"
+        }
+      ],
+      "note": "Once your transfer lands, reconnect your wallet and finish the checkout."
+    },
+    "secondaryCtas": {
+      "emailSignup": {
+        "enabled": false,
+        "placeholder": "your@email.com",
+        "button": "Get presale updates",
+        "submittingLabel": "Submitting…",
+        "successMessage": "Thanks! Check your inbox to confirm.",
+        "errorMessage": "Please enter a valid email address.",
+        "label": "Email address"
+      }
+    },
+    "faq": {
+      "badge": "FAQ",
+      "defaultOpenIndex": -1,
+      "description": "Quick answers for the curious and the cautious.",
+      "items": [
+        {
+          "question": "Which wallets can I use?",
+          "answer": "We support MetaMask, WalletConnect, and Coinbase Wallet today. If your wallet isn't listed, connect through WalletConnect or import the account into one of these wallets."
+        },
+        {
+          "question": "What does staking do?",
+          "answer": "Staking locks purchased tokens for yield. Flip the Stake after purchase toggle for an automatic deposit or leave it off and stake later from the presale dashboard. Rewards accrue in the same wallet you used to buy."
+        },
+        {
+          "question": "When can I claim my tokens?",
+          "answer": "Claiming opens after the presale unlock. We'll notify holders through the dashboard and Telegram. Until then, your purchase receipt and staking rewards remain visible in the widget."
+        }
+      ]
+    }
+  },
+  "trustBar": {
+    "eyebrow": "Security checkpoint",
+    "etherscanLabel": "View on Etherscan",
+    "copyLabel": "Copy",
+    "copiedLabel": "Copied!",
+    "copyErrorLabel": "Copy failed. Try again.",
+    "badgesHeading": "Status summary",
+    "badges": [
+      { "text": "Verified on Etherscan", "variant": "verified" },
+      { "text": "Multi-sig custody enforced", "variant": "info" }
+    ]
+  }
+}

package/extension.config.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "../../manifest.schema.json",
+  "slug": "presale",
+  "version": "1.0.0",
+  "provider": {
+    "name": "Crypto Presale Extension Suite",
+    "url": "https://github.com/koehler8",
+    "contact": "tucsonconsulting@gmail.com"
+  },
+  "license": "MIT",
+  "components": [
+    {
+      "name": "HeaderActions",
+      "label": "Wallet Connect Button",
+      "description": "Wallet connection button injected into the site header via the HeaderActions extension slot.",
+      "module": "./components/HeaderWalletAction.vue",
+      "configKey": "headerWallet"
+    },
+    {
+      "name": "Presale",
+      "label": "Presale Deck",
+      "description": "Composes the status column and buy/stake tabs for the on-chain presale flow.",
+      "module": "./components/Presale.vue",
+      "configKey": "presale",
+      "allowedPages": ["home"]
+    },
+    {
+      "name": "PresaleFaq",
+      "label": "Presale FAQ",
+      "description": "Accordion wrapper for the presale FAQ entries defined under the presale block.",
+      "module": "./components/PresaleFaq.vue",
+      "configKey": "presale",
+      "allowedPages": ["home"],
+      "requiredContent": ["faq"]
+    },
+    {
+      "name": "MomentumCard",
+      "label": "Presale Momentum Card",
+      "description": "Standalone momentum card that mirrors the presale pulse stats and schedule copy.",
+      "module": "./components/presale/MomentumCard.vue",
+      "configKey": "presale",
+      "allowedPages": ["home"],
+      "requiredContent": ["progressFomo"]
+    },
+    {
+      "name": "HeroPresale",
+      "label": "Presale Hero",
+      "description": "Hero block that highlights the presale CTA, badge, and secondary actions.",
+      "module": "./components/HeroPresale.vue",
+      "configKey": "heroPresale"
+    },
+    {
+      "name": "ProgressFomo",
+      "label": "Progress & FOMO Card",
+      "description": "Standalone progress card featuring allocation sold, remaining supply, and next price schedule.",
+      "module": "./components/ProgressFomo.vue",
+      "configKey": "progressFomo",
+      "requiredContent": [
+        "totalAllocation",
+        "soldAmount",
+        "nextPhaseTimestamp"
+      ]
+    },
+    {
+      "name": "CuriosityTeaser",
+      "label": "Curiosity Teaser",
+      "description": "Secret-drop teaser with optional modal CTA and community links.",
+      "module": "./components/CuriosityTeaser.vue",
+      "configKey": "curiosityTeaser",
+      "allowedPages": ["home"]
+    },
+    {
+      "name": "SocialProofFeed",
+      "label": "Social Proof Feed",
+      "description": "Curated social feed with share CTA and optional live community counter.",
+      "module": "./components/SocialProofFeed.vue",
+      "configKey": "socialProof"
+    },
+    {
+      "name": "Tokenomics",
+      "label": "Tokenomics Chart",
+      "description": "Token allocation table paired with the radial chart.",
+      "module": "./components/Tokenomics.vue",
+      "configKey": "tokenomics"
+    },
+    {
+      "name": "Trust",
+      "label": "Trust Section",
+      "description": "Credentials and trust badges block rendered from the `trust` content node.",
+      "module": "./components/Trust.vue",
+      "configKey": "trust"
+    },
+    {
+      "name": "TrustBar",
+      "label": "Trust Contract Bar",
+      "description": "Sticky trust bar that surfaces audit/contract metadata and copying helpers.",
+      "module": "./components/TrustBar.vue",
+      "configKey": "trustBar"
+    },
+    {
+      "name": "CommunityStrip",
+      "label": "Community Strip",
+      "description": "Social proof rail with community links and optional email capture.",
+      "module": "./components/CommunityStrip.vue",
+      "configKey": "communityStrip"
+    },
+    {
+      "name": "PresaleAdmin",
+      "label": "Presale Admin Console",
+      "description": "Operations panel for presale managers (pricing controls, flags, treasury actions).",
+      "module": "./components/PresaleAdmin.vue",
+      "configKey": "presaleAdmin",
+      "allowedPages": ["admin"]
+    }
+  ]
+}

package/index.js

@@ -0,0 +1,8 @@
+import manifest from './extension.config.json' with { type: 'json' };
+import contentDefaults from './content.defaults.json' with { type: 'json' };
+import { setup } from './setup.js';
+
+const components = import.meta.glob('./components/**/*.{vue,js}');
+
+export default { manifest, components, contentDefaults, setup };
+export { manifest, contentDefaults, setup };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@koehler8/cms-ext-crypto",
+  "version": "1.0.0-beta.4",
+  "description": "Crypto extension for Vertex CMS — token presale, staking, tokenomics, wallet connection, and analytics",
+  "license": "MIT",
+  "keywords": ["cms", "extension", "koehler8", "crypto", "presale", "staking", "web3", "wallet"],
+  "bugs": {
+    "url": "https://github.com/koehler8/cms-ext-crypto/issues"
+  },
+  "type": "module",
+  "author": "Chris Koehler",
+  "homepage": "https://github.com/koehler8/cms-ext-crypto",
+  "exports": {
+    ".": "./index.js",
+    "./config": "./extension.config.json"
+  },
+  "files": [
+    "index.js",
+    "setup.js",
+    "extension.config.json",
+    "content.defaults.json",
+    "components",
+    "stores",
+    "utils",
+    "plugins",
+    "composables",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@reown/appkit": "^1.8.12",
+    "@reown/appkit-adapter-ethers": "^1.8.12",
+    "chart.js": "^4.5.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "ethers": "^6.13.5",
+    "vue-chartjs": "^5.3.2"
+  },
+  "peerDependencies": {
+    "@koehler8/cms": "^1.0.0-beta.1",
+    "pinia": "^3.0.0",
+    "vue": "^3.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/koehler8/cms-ext-crypto.git"
+  }
+}

package/plugins/appKit.js

@@ -0,0 +1,261 @@
+import { createAppKit } from '@reown/appkit/vue';
+import { EthersAdapter } from '@reown/appkit-adapter-ethers';
+import { mainnet } from '@reown/appkit/networks';
+
+let appKitInstance;
+const FEATURED_WALLET_IDS = Object.freeze([
+  'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
+  'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Base (Coinbase Wallet)
+  '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust Wallet
+]);
+
+function buildMetadata(siteData) {
+  const hasWindow = typeof window !== 'undefined';
+  const fallbackUrl = hasWindow ? window.location.origin : '';
+  const site = siteData?.site ?? {};
+
+  let configuredUrl = typeof site.url === 'string' ? site.url.trim() : '';
+  if (!configuredUrl) {
+    configuredUrl = fallbackUrl;
+  }
+
+  if (hasWindow && configuredUrl) {
+    try {
+      const configuredOrigin = new URL(configuredUrl).origin;
+      const currentOrigin = new URL(fallbackUrl || configuredUrl).origin;
+      if (configuredOrigin !== currentOrigin) {
+        configuredUrl = currentOrigin;
+      }
+    } catch {
+      configuredUrl = fallbackUrl || configuredUrl;
+    }
+  }
+
+  return {
+    name: site.title ?? 'Product Site',
+    description: site.description ?? '',
+    url: configuredUrl,
+    icons: Array.isArray(site.icons) ? site.icons : [],
+  };
+}
+
+export function ensureAppKit({ siteData, projectId: overrideProjectId } = {}) {
+  if (appKitInstance) return appKitInstance;
+
+  const projectId = overrideProjectId || import.meta.env.VITE_REOWN_PROJECT_ID;
+  if (!projectId) {
+    console.warn('ensureAppKit: VITE_REOWN_PROJECT_ID is missing; wallet UI not initialised.');
+    return undefined;
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    const issuedWarnings =
+      globalThis.litIssuedWarnings instanceof Set
+        ? globalThis.litIssuedWarnings
+        : (globalThis.litIssuedWarnings = new Set());
+    issuedWarnings.add('dev-mode');
+    issuedWarnings.add('change-in-update');
+
+    if (!globalThis.__appkitPatchedSvgAttributes) {
+      const svgProto = typeof SVGElement !== 'undefined' ? SVGElement.prototype : null;
+      if (svgProto) {
+        const originalSetAttribute = svgProto.setAttribute;
+        const originalSetAttributeNS = svgProto.setAttributeNS;
+        const originalRemoveAttribute = svgProto.removeAttribute;
+        const originalRemoveAttributeNS = svgProto.removeAttributeNS;
+
+        const shouldNullify = (name, value) =>
+          (name === 'height' || name === 'width') &&
+          (value === '' || value === null || value === undefined);
+
+        svgProto.setAttribute = function patchedSetAttribute(name, value) {
+          if (shouldNullify(name, value)) {
+            if (originalRemoveAttribute) {
+              originalRemoveAttribute.call(this, name);
+              return;
+            }
+            return;
+          }
+          return originalSetAttribute.call(this, name, value);
+        };
+
+        svgProto.setAttributeNS = function patchedSetAttributeNS(ns, name, value) {
+          if (shouldNullify(name, value)) {
+            if (originalRemoveAttributeNS) {
+              originalRemoveAttributeNS.call(this, ns, name);
+              return;
+            }
+            return;
+          }
+          return originalSetAttributeNS.call(this, ns, name, value);
+        };
+
+        globalThis.__appkitPatchedSvgAttributes = true;
+      }
+    }
+  }
+
+  const metadata = buildMetadata(siteData);
+
+  const neutralizeFontPreload = () => {
+    if (typeof document === 'undefined') return;
+
+    const BLOCKED_PREFIX = 'https://fonts.reown.com/';
+
+    const isBlockedLink = (node) => {
+      if (!node || node.nodeType !== Node.ELEMENT_NODE) return false;
+      const tag = node.tagName?.toLowerCase();
+      if (tag !== 'link') return false;
+      const rel = (node.rel || node.getAttribute('rel') || '').toLowerCase();
+      if (rel !== 'preload') return false;
+      const href = node.href || node.getAttribute('href') || '';
+      return href.startsWith(BLOCKED_PREFIX);
+    };
+
+    const pruneNode = (node) => {
+      if (!node) return false;
+      if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        let removed = false;
+        Array.from(node.childNodes).forEach((child) => {
+          if (isBlockedLink(child)) {
+            node.removeChild(child);
+            removed = true;
+          }
+        });
+        return removed;
+      }
+
+      if (isBlockedLink(node)) {
+        node.remove();
+        return true;
+      }
+      return false;
+    };
+
+    const patchHeadInsertion = () => {
+      const head = document.head;
+      if (!head || head.__reownPreloadBlocked) return;
+      Object.defineProperty(head, '__reownPreloadBlocked', {
+        value: true,
+        configurable: false,
+        enumerable: false,
+        writable: false,
+      });
+
+      const wrapMethod = (proto, method) => {
+        const original = proto?.[method];
+        if (!original) return;
+        proto[method] = function wrappedMethod(...args) {
+          if (this !== head) {
+            return original.apply(this, args);
+          }
+
+          if (!args.length) {
+            return original.apply(this, args);
+          }
+
+          if (method === 'append' || method === 'prepend') {
+            const filteredArgs = [];
+            let mutated = false;
+            for (const arg of args) {
+              if (arg instanceof Node) {
+                const wasPruned = pruneNode(arg);
+                if (arg.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !arg.childNodes.length) {
+                  mutated = true;
+                  continue;
+                }
+                if (isBlockedLink(arg)) {
+                  mutated = true;
+                  continue;
+                }
+                mutated = mutated || wasPruned;
+              }
+              filteredArgs.push(arg);
+            }
+
+            if (!filteredArgs.length && mutated) {
+              return undefined;
+            }
+            return original.apply(this, filteredArgs);
+          }
+
+          const targetNode = args[0];
+          if (targetNode instanceof Node && pruneNode(targetNode)) {
+            if (method === 'replaceChild') {
+              return args[1];
+            }
+            return targetNode;
+          }
+
+          return original.apply(this, args);
+        };
+      };
+
+      wrapMethod(Element.prototype, 'append');
+      wrapMethod(Element.prototype, 'prepend');
+      wrapMethod(Node.prototype, 'appendChild');
+      wrapMethod(Node.prototype, 'insertBefore');
+      wrapMethod(Node.prototype, 'replaceChild');
+    };
+
+    const transformLinks = () => {
+      let removed = false;
+      document
+        .querySelectorAll('link[rel="preload"][href^="https://fonts.reown.com/"]')
+        .forEach((link) => {
+          if (pruneNode(link)) {
+            removed = true;
+          }
+        });
+      return removed;
+    };
+
+    patchHeadInsertion();
+    transformLinks();
+
+    if (typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      transformLinks();
+    });
+
+    observer.observe(document.head || document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
+  };
+
+  appKitInstance = createAppKit({
+    adapters: [new EthersAdapter()],
+    networks: [mainnet],
+    metadata,
+    projectId,
+    featuredWalletIds: FEATURED_WALLET_IDS,
+    features: {
+      analytics: true,
+      connectMethodsOrder: ['wallet'],
+      connectorTypeOrder: [
+        'injected',
+        'walletConnect',
+        'recent',
+        'featured',
+        'custom',
+        'external',
+        'recommended',
+      ],
+      onramp: {
+        providers: ['meld'],
+        requireEmail: false,
+      },
+      swap: {
+        providers: ['1inch'],
+      },
+    },
+  });
+
+  neutralizeFontPreload();
+
+  return appKitInstance;
+}

package/setup.js

@@ -0,0 +1,29 @@
+import { h, toRef } from 'vue';
+import { usePresaleStore } from './stores/presale.js';
+import { ensureAppKit } from './plugins/appKit.js';
+
+/**
+ * Extension setup hook — called by the CMS during app initialisation.
+ *
+ * Initializes AppKit wallet connection, registers the appkit-button web
+ * component proxy, and provides presale state to the component tree.
+ */
+export async function setup({ app, pinia, siteData, isClient }) {
+  if (!isClient) return;
+
+  // Initialize AppKit so wallet modals work
+  ensureAppKit({ siteData });
+
+  // Register the appkit-button web component proxy so Vue doesn't warn
+  app.component('appkit-button', {
+    name: 'AppKitButtonProxy',
+    render() {
+      return h('appkit-button');
+    },
+  });
+
+  // Provide presale state to the component tree via provide/inject
+  const store = usePresaleStore(pinia);
+  app.provide('presalePulse', toRef(store, 'presalePulse'));
+  app.provide('personalPresaleSummary', toRef(store, 'personalPresaleSummary'));
+}