Add MoonPay onramp option (#4027)

* feat: ➕ Add MoonPay react and nodejs libraries * feat: 🍱 Add MoonPay branding * feat: Add MoonPay url signing endpoint * feat: 💄 Add MoonPay buy widget * docs: 🔧 Add MoonPay env placeholders * chore: 🌐 Add missing translation for MoonPay subtitle * fix: 🌐 Fix wrong localization key in moonpay onramp * chore: update lockfile * feat: update copy to "Buy crypto" * feat: update moonpay widget border * feat: improve modals layout with hideDefaultBackButton * feat: add more margin between header and list * feat: add onRequestBack handler * feat: add custom header * feat: add system-based moonpay theme * feat: add payment methods assets * feat: update Moonpay selection UI * feat: localize moonpay country support * refactor: use useMedia instead of window.matchMedia --------- Co-authored-by: Enrico Barbieri <[email protected]> Co-authored-by: fabryscript <[email protected]>
osmosis-labs · Jan 24, 2025 · 4d91181 · 4d91181
1 parent 348b889
commit 4d91181
Show file tree

Hide file tree

Showing 35 changed files with 366 additions and 68 deletions.
diff --git a/packages/web/.env b/packages/web/.env
@@ -52,3 +52,8 @@ NEXT_PUBLIC_SPEND_LIMIT_CONTRACT_ADDRESS=osmo10xqv8rlpkflywm92k5wdmplzy7khtasl9c
 
 # Disable TRPC logs in development
 # NEXT_PUBLIC_TRPC_LOGS=off
+
+
+# Moonpay public and private keys
+# MOONPAY_PRIVATE_KEY=
+# NEXT_PUBLIC_MOONPAY_PUBLIC_KEY=
diff --git a/packages/web/hooks/bridge.tsx b/packages/web/hooks/bridge.tsx
@@ -404,6 +404,10 @@ export const ImmersiveBridge = () => {
           onRequestClose={() => {
             setFiatRampParams(null);
           }}
+          onRequestBack={() => {
+            setFiatRampParams(null);
+            toggleFiatOnRampSelection(true);
+          }}
           assetKey={fiatRampParams.assetKey}
           fiatRampKey={fiatRampParams.fiatRampKey}
         />

diff --git a/packages/web/integrations/fiat-ramps.ts b/packages/web/integrations/fiat-ramps.ts
@@ -2,6 +2,7 @@ import { SpriteIconId } from "~/config";
 
 // Fiat on/off ramps
 export type FiatRampKey =
+  | "moonpay"
   | "kado"
   | "transak"
   | "layerswapcoinbase"
@@ -15,6 +16,12 @@ export const FiatRampDisplayInfos: Record<
     logoId?: SpriteIconId;
   }
 > = {
+  moonpay: {
+    rampKey: "moonpay",
+    iconUrl: "/logos/moonpay.svg",
+    displayName: "MoonPay",
+    logoId: "moonpay-logo",
+  },
   kado: {
     rampKey: "kado",
     iconUrl: "/logos/kado.svg",

diff --git a/packages/web/integrations/moonpay/index.tsx b/packages/web/integrations/moonpay/index.tsx
@@ -0,0 +1,53 @@
+import { apiClient } from "@osmosis-labs/utils";
+import { observer } from "mobx-react-lite";
+import dynamic from "next/dynamic";
+import { FunctionComponent } from "react";
+import { useMedia } from "react-use";
+
+import { MoonpaySignUrlResponse } from "~/integrations/moonpay/types";
+import { ModalBaseProps } from "~/modals";
+import { useStore } from "~/stores";
+
+const MoonPayBuyWidget = dynamic(
+  () => import("@moonpay/moonpay-react").then((mod) => mod.MoonPayBuyWidget),
+  { ssr: false }
+);
+
+async function generateMoonpayUrlSignature(url: string): Promise<string> {
+  return (
+    await apiClient<MoonpaySignUrlResponse>(
+      "/api/integrations/moonpay/sign-url",
+      {
+        method: "POST",
+        data: {
+          url,
+        },
+      }
+    )
+  ).signature;
+}
+
+export const Moonpay: FunctionComponent<
+  { assetKey: string } & Pick<ModalBaseProps, "isOpen" | "onRequestClose">
+> = observer(({ assetKey, isOpen }) => {
+  const { chainStore, accountStore } = useStore();
+
+  const prefersDark = useMedia("(prefers-color-scheme: dark)");
+
+  const account = accountStore.getWallet(chainStore.osmosis.chainId);
+
+  let walletAddress = account?.address;
+
+  return (
+    <MoonPayBuyWidget
+      className="!m-0 !border-[0px]"
+      variant="embedded"
+      baseCurrencyCode={assetKey}
+      defaultCurrencyCode="OSMO"
+      visible={isOpen}
+      walletAddress={walletAddress}
+      onUrlSignatureRequested={generateMoonpayUrlSignature}
+      theme={prefersDark ? "dark" : "light"}
+    />
+  );
+});
diff --git a/packages/web/integrations/moonpay/types.ts b/packages/web/integrations/moonpay/types.ts
@@ -0,0 +1,3 @@
+export interface MoonpaySignUrlResponse {
+  readonly signature: string;
+}
diff --git a/packages/web/localizations/de.json b/packages/web/localizations/de.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Unzureichende Mittel"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Wählen Sie Fiat Onramp",
+      "chooseOnramp": "Krypto kaufen",
       "kadoSubtitle": "Unterstützt OSMO, USDC",
+      "moonpaySubtitle": "Unterstützt OSMO, USDC",
       "transakSubtitle": "Unterstützt OSMO",
-      "onrampMoneySubtitle": "Unterstützt OSMO, USDC"
+      "onrampMoneySubtitle": "Unterstützt OSMO, USDC",
+      "moonpayCountrySupport": "165+ Länder"
     },
     "incentive": {
       "title": "Anreizarten"

diff --git a/packages/web/localizations/en.json b/packages/web/localizations/en.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Insufficient funds"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Choose Fiat Onramp",
+      "chooseOnramp": "Buy crypto",
       "kadoSubtitle": "Supports OSMO, USDC",
+      "moonpaySubtitle": "Supports OSMO, USDC",
       "transakSubtitle": "Supports OSMO",
-      "onrampMoneySubtitle": "Supports OSMO, USDC"
+      "onrampMoneySubtitle": "Supports OSMO, USDC",
+      "moonpayCountrySupport": "165+ countries"
     },
     "incentive": {
       "title": "Incentive types"

diff --git a/packages/web/localizations/es.json b/packages/web/localizations/es.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Fondos insuficientes"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Seleccionar acceso de Fiat",
+      "chooseOnramp": "Comprar criptomonedas",
       "kadoSubtitle": "Soporta OSMO, USDC",
+      "moonpaySubtitle": "Compatible con OSMO y USDC",
       "transakSubtitle": "Soporta OSMO",
-      "onrampMoneySubtitle": "Soporta OSMO, USDC"
+      "onrampMoneySubtitle": "Soporta OSMO, USDC",
+      "moonpayCountrySupport": "Más de 165 países"
     },
     "incentive": {
       "title": "Tipos de incentivos"

diff --git a/packages/web/localizations/fa.json b/packages/web/localizations/fa.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "بودجه ناکافی"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "انتخاب حساب بانکی Onramp",
+      "chooseOnramp": "کریپتو بخر",
       "kadoSubtitle": "پشتیبانی OSMO, USDC",
+      "moonpaySubtitle": "پشتیبانی از OSMO، USDC",
       "transakSubtitle": "پشتیبانی OSMO",
-      "onrampMoneySubtitle": "پشتیبانی از OSMO، USDC"
+      "onrampMoneySubtitle": "پشتیبانی از OSMO، USDC",
+      "moonpayCountrySupport": "165+ کشور"
     },
     "incentive": {
       "title": "انواع مشوق"

diff --git a/packages/web/localizations/fr.json b/packages/web/localizations/fr.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Fonds insuffisants"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Choisir une rampe de paiement en Fiat",
+      "chooseOnramp": "Acheter des crypto-monnaies",
       "kadoSubtitle": "Prend en charge OSMO, USDC",
+      "moonpaySubtitle": "Prend en charge OSMO, USDC",
       "transakSubtitle": "Prend en charge OSMO",
-      "onrampMoneySubtitle": "Prend en charge OSMO, USDC"
+      "onrampMoneySubtitle": "Prend en charge OSMO, USDC",
+      "moonpayCountrySupport": "Plus de 165 pays"
     },
     "incentive": {
       "title": "Types d'incitations"

diff --git a/packages/web/localizations/gu.json b/packages/web/localizations/gu.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "અપૂરતું ભંડોળ"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "ફિયાટ ઓનરેમ્પ પસંદ કરો",
+      "chooseOnramp": "ક્રિપ્ટો ખરીદો",
       "kadoSubtitle": "OSMO, USDC ને સપોર્ટ કરે છે",
+      "moonpaySubtitle": "OSMO, USDC ને સપોર્ટ કરે છે",
       "transakSubtitle": "OSMO ને સપોર્ટ કરે છે",
-      "onrampMoneySubtitle": "OSMO, USDC ને સપોર્ટ કરે છે"
+      "onrampMoneySubtitle": "OSMO, USDC ને સપોર્ટ કરે છે",
+      "moonpayCountrySupport": "165+ દેશો"
     },
     "incentive": {
       "title": "પ્રોત્સાહન પ્રકારો"

diff --git a/packages/web/localizations/hi.json b/packages/web/localizations/hi.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "अपर्याप्त कोष"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "फिएट ऑनरैंप चुनें",
+      "chooseOnramp": "क्रिप्टो खरीदें",
       "kadoSubtitle": "OSMO, यूएसडीसी का समर्थन करता है",
+      "moonpaySubtitle": "OSMO, USDC का समर्थन करता है",
       "transakSubtitle": "OSMO का समर्थन करता है",
-      "onrampMoneySubtitle": "OSMO, यूएसडीसी का समर्थन करता है"
+      "onrampMoneySubtitle": "OSMO, यूएसडीसी का समर्थन करता है",
+      "moonpayCountrySupport": "165+ देश"
     },
     "incentive": {
       "title": "प्रोत्साहन के प्रकार"

diff --git a/packages/web/localizations/ja.json b/packages/web/localizations/ja.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "残高不足"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "フィアット オンランプを選択してください",
+      "chooseOnramp": "暗号通貨を購入する",
       "kadoSubtitle": "OSMO、USDCをサポート",
+      "moonpaySubtitle": "OSMO、USDCをサポート",
       "transakSubtitle": "OSMOをサポート",
-      "onrampMoneySubtitle": "OSMO、USDCをサポート"
+      "onrampMoneySubtitle": "OSMO、USDCをサポート",
+      "moonpayCountrySupport": "165か国以上"
     },
     "incentive": {
       "title": "インセンティブの種類"

diff --git a/packages/web/localizations/ko.json b/packages/web/localizations/ko.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "자금 부족"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "피아트 온램프 선택",
+      "chooseOnramp": "암호화폐를 구매하세요",
       "kadoSubtitle": "OSMO, USDC를 지원합니다",
+      "moonpaySubtitle": "OSMO, USDC 지원",
       "transakSubtitle": "OSMO를 지원합니다",
-      "onrampMoneySubtitle": "OSMO, USDC 지원"
+      "onrampMoneySubtitle": "OSMO, USDC 지원",
+      "moonpayCountrySupport": "165+ 국가"
     },
     "incentive": {
       "title": "인센티브 유형"

diff --git a/packages/web/localizations/pl.json b/packages/web/localizations/pl.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Niewystarczające środki"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Wybierz rampę Fiat",
+      "chooseOnramp": "Kup kryptowalutę",
       "kadoSubtitle": "Obsługuje OSMO, USDC",
+      "moonpaySubtitle": "Obsługuje OSMO, USDC",
       "transakSubtitle": "Obsługuje OSMO",
-      "onrampMoneySubtitle": "Obsługuje OSMO, USDC"
+      "onrampMoneySubtitle": "Obsługuje OSMO, USDC",
+      "moonpayCountrySupport": "165+ krajów"
     },
     "incentive": {
       "title": "Rodzaje zachęt"

diff --git a/packages/web/localizations/pt-br.json b/packages/web/localizations/pt-br.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Fundos insuficientes"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Escolher rampa Fiat",
+      "chooseOnramp": "Comprar cripto",
       "kadoSubtitle": "Suporta OSMO, USDC",
+      "moonpaySubtitle": "Suporta OSMO, USDC",
       "transakSubtitle": "Suporta OSMO",
-      "onrampMoneySubtitle": "Suporta OSMO, USDC"
+      "onrampMoneySubtitle": "Suporta OSMO, USDC",
+      "moonpayCountrySupport": "Mais de 165 países"
     },
     "incentive": {
       "title": "Tipos de incentivo"

diff --git a/packages/web/localizations/ro.json b/packages/web/localizations/ro.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Fonduri insuficiente"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Alegeți rampa fiat",
+      "chooseOnramp": "Cumpărați cripto",
       "kadoSubtitle": "Acceptă OSMO, USDC",
+      "moonpaySubtitle": "Suporta OSMO, USDC",
       "transakSubtitle": "Acceptă OSMO",
-      "onrampMoneySubtitle": "Suporta OSMO, USDC"
+      "onrampMoneySubtitle": "Suporta OSMO, USDC",
+      "moonpayCountrySupport": "Peste 165 de țări"
     },
     "incentive": {
       "title": "Tipuri de stimulente"

diff --git a/packages/web/localizations/ru.json b/packages/web/localizations/ru.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Недостаточно средств"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Выбирайте Фиат Онрамп",
+      "chooseOnramp": "Купить криптовалюту",
       "kadoSubtitle": "Поддерживает OSMO, USDC",
+      "moonpaySubtitle": "Поддерживает OSMO, USDC",
       "transakSubtitle": "Поддерживает ОСМО",
-      "onrampMoneySubtitle": "Поддерживает OSMO, USDC"
+      "onrampMoneySubtitle": "Поддерживает OSMO, USDC",
+      "moonpayCountrySupport": "165+ стран"
     },
     "incentive": {
       "title": "Типы стимулов"

diff --git a/packages/web/localizations/tr.json b/packages/web/localizations/tr.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "Yetersiz bakiye"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "Fiat Onramp Seçin",
+      "chooseOnramp": "Kripto satın al",
       "kadoSubtitle": "OSMO, USDC'yi destekler",
+      "moonpaySubtitle": "OSMO ve USDC'yi destekler",
       "transakSubtitle": "OSMO'yu destekler",
-      "onrampMoneySubtitle": "OSMO, USDC'yi destekler"
+      "onrampMoneySubtitle": "OSMO, USDC'yi destekler",
+      "moonpayCountrySupport": "165+ ülke"
     },
     "incentive": {
       "title": "Teşvik türleri"

diff --git a/packages/web/localizations/zh-cn.json b/packages/web/localizations/zh-cn.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "不充足的资金"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "选择法币入口",
+      "chooseOnramp": "购买加密货币",
       "kadoSubtitle": "支持OSMO, USDC",
+      "moonpaySubtitle": "支持OSMO、USDC",
       "transakSubtitle": "支持OSMO",
-      "onrampMoneySubtitle": "支持OSMO、USDC"
+      "onrampMoneySubtitle": "支持OSMO、USDC",
+      "moonpayCountrySupport": "165+ 个国家"
     },
     "incentive": {
       "title": "激励类型"

diff --git a/packages/web/localizations/zh-hk.json b/packages/web/localizations/zh-hk.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "不充足的資金"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "選擇法幣入口",
+      "chooseOnramp": "購買加密貨幣",
       "kadoSubtitle": "支援OSMO, USDC",
+      "moonpaySubtitle": "支援OSMO、USDC",
       "transakSubtitle": "支援OSMO",
-      "onrampMoneySubtitle": "支援OSMO、USDC"
+      "onrampMoneySubtitle": "支援OSMO、USDC",
+      "moonpayCountrySupport": "超過 165 個國家"
     },
     "incentive": {
       "title": "激勵類型"

diff --git a/packages/web/localizations/zh-tw.json b/packages/web/localizations/zh-tw.json
@@ -245,10 +245,12 @@
       "insufficientFunds": "不充足的資金"
     },
     "fiatOnrampSelection": {
-      "chooseOnramp": "選擇法幣入口",
+      "chooseOnramp": "購買加密貨幣",
       "kadoSubtitle": "支援OSMO, USDC",
+      "moonpaySubtitle": "支援OSMO、USDC",
       "transakSubtitle": "支援OSMO",
-      "onrampMoneySubtitle": "支援OSMO、USDC"
+      "onrampMoneySubtitle": "支援OSMO、USDC",
+      "moonpayCountrySupport": "超過 165 個國家"
     },
     "incentive": {
       "title": "激勵類型"