Feature - Integrate MoonPay SDK for buy/sell functionality in web app

[Corey-Code]

This pull request introduces a major refactor to how MoonPay buy/sell functionality is integrated, providing a more streamlined user experience by differentiating between the web app and browser extension builds. For the web app, a new MoonPay SDK widget is used for direct in-app crypto purchases and sales, while the extension retains the iframe-based approach due to Manifest V3 restrictions. Both the Deposit and Withdraw pages are updated to use this new architecture, with simplified flows for the web app and more detailed, network-selectable flows for the extension.

MoonPay Integration Refactor:

• Added @moonpay/moonpay-react as a new dependency to enable the official MoonPay SDK for the web app build.
• Created a new MoonPaySDKWidget component that uses the MoonPay React SDK to provide an overlay modal for buying and selling crypto in the web app.
• Refactored the existing MoonPayWidget to act as a universal wrapper: it lazy-loads the SDK widget for the web app and uses the iframe approach for the extension. Maintenance mode is shown if the API key is missing.

Deposit Page Improvements:

• Updated the Deposit page to route between a simplified MoonPay SDK widget (web app) and the full network selection/iframe flow (extension). The web app version now presents a single buy interface with MoonPay, while the extension retains network selection and address display. [1] [2]
• Refactored supporting logic for network selection, address fetching, and UI states to accommodate the new split flows. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Withdraw Page Improvements:

• Updated the Withdraw page in the same way as Deposit: web app builds use the new MoonPay SDK widget for a simplified sell interface, while the extension keeps the network selection and iframe flow. [1] [2]
• Adjusted supporting logic for network selection, address fetching, and fallback URLs to match the new architecture. [1] [2] [3]

These changes ensure a modern, seamless MoonPay experience in the web app, while maintaining compatibility and compliance in the extension.

[Copilot]

Pull request overview

Refactors MoonPay buy/sell integration to use the official MoonPay React SDK in the web app build while keeping a separate (extension-oriented) flow gated by a build-time flag.

Changes:

• Introduces __IS_WEB_BUILD__ as a Vite-defined build-time constant (and adds TypeScript typing for it).
• Adds a new MoonPaySDKWidget (MoonPay React SDK overlay) and refactors MoonPayWidget into a build-aware wrapper.
• Updates Deposit/Withdraw pages to render different UI/flows depending on web vs extension build.

Reviewed changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
vite.config.web.ts	Defines __IS_WEB_BUILD__ = true for web builds.
vite.config.js	Defines __IS_WEB_BUILD__ = false for extension builds.
src/vite-env.d.ts	Declares the __IS_WEB_BUILD__ global for TS.
src/popup/pages/Deposit.tsx	Splits Deposit into DepositWeb vs DepositExtension flows and wires MoonPay.
src/popup/pages/Withdraw.tsx	Splits Withdraw into WithdrawWeb vs WithdrawExtension flows and wires MoonPay.
src/popup/components/MoonPayWidget.tsx	Refactors MoonPay widget into SDK (web) vs iframe (extension) implementation with maintenance fallback.
src/popup/components/MoonPaySDKWidget.tsx	Adds MoonPay SDK overlay widget component for the web app build.
package.json	Adds @moonpay/moonpay-react dependency.
package-lock.json	Locks @moonpay/moonpay-react and captures engine metadata.

Comments suppressed due to low confidence (2)

src/popup/pages/Deposit.tsx:225

• Extension flow builds and opens a MoonPay URL even when VITE_MOONPAY_API_KEY is empty, which will produce an invalid MoonPay link. If an empty key is intended to disable MoonPay, the UI should reflect that (disable the CTA and/or show a maintenance/unavailable message) before calling browser.tabs.create.

  const buildMoonPayUrl = () => {
    const baseUrl = 'https://buy.moonpay.com';
    const params = new URLSearchParams({
      apiKey: MOONPAY_API_KEY,
      currencyCode: cryptoCode,
      walletAddress: walletAddress,
      colorCode: '14B8A6',
      theme: 'dark',
      language: 'en',
    });
    return `${baseUrl}?${params.toString()}`;
  };

  const handleCopyAddress = () => {
    if (walletAddress) {
      navigator.clipboard.writeText(walletAddress);
      toast({
        title: 'Address copied',
        status: 'success',
        duration: 2000,
      });
    }
  };

  const handleOpenMoonPay = () => {
    browser.tabs.create({ url: buildMoonPayUrl() });
  };

src/popup/pages/Withdraw.tsx:196

• Extension flow builds and opens a MoonPay URL even when VITE_MOONPAY_API_KEY is empty, which will produce an invalid MoonPay link. If an empty key is intended to disable MoonPay, the UI should reflect that (disable the CTA and/or show a maintenance/unavailable message) before calling browser.tabs.create.

  const buildMoonPaySellUrl = () => {
    const baseUrl = 'https://sell.moonpay.com';
    const params = new URLSearchParams({
      apiKey: MOONPAY_API_KEY,
      baseCurrencyCode: cryptoCode,
      refundWalletAddress: walletAddress,
      colorCode: 'F97316',
      theme: 'dark',
      language: 'en',
    });
    return `${baseUrl}?${params.toString()}`;
  };

  const handleCopyAddress = () => {
    if (walletAddress) {
      navigator.clipboard.writeText(walletAddress);
      toast({
        title: 'Address copied',
        status: 'success',
        duration: 2000,
      });
    }
  };

  const handleOpenMoonPay = () => {
    browser.tabs.create({ url: buildMoonPaySellUrl() });
  };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

PR description says the extension build "retains the iframe-based approach", but this page explicitly describes (and implements) opening MoonPay in a new tab. Please reconcile: either update the PR description or adjust the extension implementation to actually use the iframe-based widget approach.

[Corey-Code]

@copilot Update doc. Current implementation is correct.

[cloudflare-workers-and-pages]

Deploying vidulum-app with    Cloudflare Pages

Latest commit:	34c5bd4
Status:	✅  Deploy successful!
Preview URL:	https://6129062e.vidulum-app.pages.dev
Branch Preview URL:	https://feature-moonpay-widget-web-a.vidulum-app.pages.dev

View logs

[Copilot]

@Corey-Code I've opened a new pull request, #48, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

@Corey-Code I've opened a new pull request, #49, to work on those changes. Once the pull request is ready, I'll request review from you.