feat: add moonpay fiat onramp

closes #2068

Author: beguene

config/wallet-config.json

@@ -3,8 +3,9 @@
     "global": []
   },
   "activeFiatProviders": {
-    "transak": { "name": "transak", "enabled": true },
-    "okcoin": { "name": "okcoin", "enabled": true }
+    "moonpay": { "name": "moonpay", "enabled": true },
+    "okcoin": { "name": "okcoin", "enabled": true },
+    "transak": { "name": "transak", "enabled": true }
   },
   "feeEstimations": {
     "maxValues": [500000, 750000, 2000000],

config/wallet-config.schema.json

@@ -58,7 +58,8 @@
       "additionalProperties": false,
       "properties": {
         "transak": { "$ref": "#/$defs/provider" },
-        "okcoin": { "$ref": "#/$defs/provider" }
+        "okcoin": { "$ref": "#/$defs/provider" },
+        "moonpay": { "$ref": "#/$defs/provider" }
       }
     },
     "feeEstimations": {

src/app/features/fiat-onramp-providers/moonpay-helper.ts

@@ -0,0 +1,5 @@
+import { MOONPAY_API_KEY_PRODUCTION } from '@shared/constants';
+
+export function makeMoonPayUrl(address: string) {
+  return `https://buy.moonpay.com?apiKey=${MOONPAY_API_KEY_PRODUCTION}&currencyCode=stx&walletAddress=${address}`;
+}

src/app/pages/buy/components/onramp-provider-layout.tsx

@@ -19,6 +19,12 @@ const providersInfo = {
     cta: 'Buy on Okcoin',
     test_id: 'BtnOkCoin',
   },
+  moonpay: {
+    title: 'MoonPay',
+    body: 'US and Non-US residents can purchase STX with credit card, debit card, bank transfer, Apple pay or Google pay via MoonPay.',
+    cta: 'Buy on MoonPay',
+    test_id: 'BtnMoonPay',
+  },
 };
 
 export interface ProvidersUrl {

src/app/pages/buy/components/onramp-provider.tsx

@@ -1,3 +1,4 @@
+import { makeMoonPayUrl } from '@app/features/fiat-onramp-providers/moonpay-helper';
 import { makeOkcoinUrl } from '@app/features/fiat-onramp-providers/okcoin-helper';
 import { makeTransakUrl } from '@app/features/fiat-onramp-providers/transak-helper';
 import {
@@ -18,6 +19,7 @@ export const OnrampProviders = (props: OnrampProvidersProps) => {
   const providersUrl = {
     transak: makeTransakUrl(address),
     okcoin: makeOkcoinUrl(address),
+    moonpay: makeMoonPayUrl(address),
   };
 
   return (

src/app/pages/home/components/onboarding-steps-list.tsx

@@ -58,7 +58,7 @@ const onboardingSteps = [
     title: OnboardingSteps.ExploreApps,
   },
   {
-    action: 'Buy an NFT',
+    action: 'Find NFT',
     body: 'Collect and trade NFTs secured by Bitcoin',
     event: 'buy_nft',
     imageFull: BuyNftFull,

src/shared/constants.ts

@@ -65,3 +65,5 @@ export const DEFAULT_LIST_LIMIT = 50;
 
 export const TRANSAK_API_KEY_PRODUCTION = '7300ebf7-c657-46b1-9c72-c0d91bbed0a8';
 export const TRANSAK_API_KEY_STAGING = '4055d318-9d41-4b74-9253-e73e3ca13602';
+
+export const MOONPAY_API_KEY_PRODUCTION = 'pk_live_Bctok4Wp6KZHX0YfS4Ie7dFOYnNw8lqv';

tests/page-objects/buy-tokens-selectors.ts

@@ -2,4 +2,5 @@ export enum BuyTokensSelectors {
   BtnBuyTokens = 'btn-buy-tokens',
   BtnTransak = 'btn-transak',
   BtnOkCoin = 'btn-okcoin',
+  BtnMoonPay = 'btn-moonpay',
 }