feat: fiat on ramp integration

apps/web/.env

@@ -1,2 +1,8 @@
 NEXT_PUBLIC_MM_API_URL=https://linked-pool.pancakeswap.com/quote-service
-NEXT_PUBLIC_QUOTING_API=https://swap-quoting.pancakeswap.com/quoting-service
+NEXT_PUBLIC_QUOTING_API=https://swap-quoting.pancakeswap.com/quoting-service
+MOONPAY_URL=https://buy-sandbox.moonpay.com?apiKey=pk_test_1Ibe44lMglFVL8COOYO7SEKnIBrzrp54
+MOONPAY_TEST_SECRET_KEY=sk_test_7zfPNfcZdStyiktn3lOJxOltGttayhC
+MOONPAY_TEST_API_KEY=sk_test_7zfPNfcZdStyiktn3lOJxOltGttayhC
+REACT_APP_MOONPAY_API="https://api.moonpay.com"
+REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_test_1Ibe44lMglFVL8COOYO7SEKnIBrzrp54"
+

apps/web/next.config.mjs

@@ -196,6 +196,7 @@ const config = {
         __SENTRY_TRACING__: false,
       }),
     )
+    webpackConfig.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"] });
     if (!isServer && webpackConfig.optimization.splitChunks) {
       // webpack doesn't understand worker deps on quote worker, so we need to manually add them
       // https://github.com/webpack/webpack/issues/16895

apps/web/package.json

@@ -51,9 +51,9 @@
     "@pancakeswap/v3-sdk": "workspace:*",
     "@pancakeswap/wagmi": "workspace:*",
     "@reduxjs/toolkit": "^1.9.1",
-    "@tanstack/react-query": "^4.28.0",
     "@sentry/nextjs": "^7.52.1",
     "@snapshot-labs/snapshot.js": "^0.4.40",
+    "@tanstack/react-query": "^4.28.0",
     "@vanilla-extract/next-plugin": "^2.1.1",
     "ajv": "^6.12.3",
     "bignumber.js": "^9.0.0",
@@ -67,6 +67,7 @@
     "easymde": "^2.16.1",
     "ethers": "^5.7.0",
     "fast-json-stable-stringify": "^2.1.0",
+    "geoip-lite": "^1.4.7",
     "graphql": "^16.6.0",
     "graphql-request": "^5.0.0",
     "jotai": "^2.1.0",
@@ -79,6 +80,7 @@
     "next-axiom": "^0.13.0",
     "next-seo": "^5.15.0",
     "next-themes": "^0.2.0",
+    "polished": "^4.2.2",
     "qs": "^6.0.0",
     "react": "^18.2.0",
     "react-countup": "^6.4.0",
@@ -98,16 +100,17 @@
     "styled-system": "^5.1.5",
     "swiper": "^8.4.2",
     "swr": "^2.1.5",
-    "typescript": "^5.0.4",
-    "wagmi": "1.0.9",
-    "zod": "^3.21.4",
-    "polished": "^4.2.2",
     "tiny-invariant": "^1.1.0",
+    "typescript": "^5.0.4",
     "uuid": "^8.0.0",
-    "viem": "^0.3.39"
+    "viem": "^0.3.39",
+    "wagmi": "1.0.9",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "13.4.2",
+    "@pancakeswap/next-config": "workspace:*",
+    "@pancakeswap/tsconfig": "workspace:*",
     "@stylelint/postcss-css-in-js": "^0.37.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.3.0",
@@ -148,8 +151,6 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "tilg": "^0.1.1",
-    "@pancakeswap/tsconfig": "workspace:*",
-    "@pancakeswap/next-config": "workspace:*",
     "typechain": "^6.1.0",
     "vite-tsconfig-paths": "^4.0.3",
     "vitest": "^0.30.1"

apps/web/src/components/Card/index.tsx

@@ -28,6 +28,17 @@ export const LightGreyCard = styled(Card)`
   background-color: ${({ theme }) => theme.colors.background};
 `
 
+export const CryptoCard = styled(Card)`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme }) => theme.colors.dropdown};
+  transition: height 0.4s ease-in-out, background-color 0.1s ease-in-out;
+  overflow: hidden;
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.input};
+    cursor: pointer;
+  }
+`
+
 export const GreyCard = styled(Card)`
   background-color: ${({ theme }) => theme.colors.dropdown};
 `

apps/web/src/components/CurrencyInputPanel/index.tsx

@@ -12,6 +12,7 @@ import {
   Swap as SwapUI,
   ArrowDropDownIcon,
 } from '@pancakeswap/uikit'
+import { useRouter } from 'next/router'
 import styled, { css } from 'styled-components'
 import { isAddress } from 'utils'
 import { useTranslation } from '@pancakeswap/localization'
@@ -76,7 +77,7 @@ interface CurrencyInputPanelProps {
   zapStyle?: ZapStyle
   beforeButton?: React.ReactNode
   disabled?: boolean
-  error?: boolean
+  error?: boolean | string
   showUSDPrice?: boolean
   tokensToShow?: Token[]
   currencyLoading?: boolean
@@ -115,6 +116,8 @@ const CurrencyInputPanel = memo(function CurrencyInputPanel({
   const { address: account } = useAccount()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const { t } = useTranslation()
+  const { pathname } = useRouter()
+  const mode = id
 
   const token = pair ? pair.liquidityToken : currency?.isToken ? currency : null
   const tokenAddress = token ? isAddress(token.address) : null
@@ -137,6 +140,7 @@ const CurrencyInputPanel = memo(function CurrencyInputPanel({
       commonBasesType={commonBasesType}
       showSearchInput={showSearchInput}
       tokensToShow={tokensToShow}
+      mode={mode}
     />,
   )
 
@@ -168,19 +172,23 @@ const CurrencyInputPanel = memo(function CurrencyInputPanel({
   const isAtPercentMax = (maxAmount && value === maxAmount.toExact()) || (lpPercent && lpPercent === '100')
 
   const balance = !hideBalance && !!currency && formatAmount(selectedCurrencyBalance, 6)
-
   return (
     <SwapUI.CurrencyInputPanel
       id={id}
       disabled={disabled}
-      error={error}
+      error={error as any}
       zapStyle={zapStyle}
       value={value}
       onInputBlur={onInputBlur}
       onUserInput={handleUserInput}
       loading={inputLoading}
       top={
         <>
+          {pathname === '/buy-crypto' ? (
+            <Text px="4px" bold fontSize="12px" textTransform="uppercase" color="secondary">
+              {t('I want to spend')}
+            </Text>
+          ) : null}
           <Flex alignItems="center">
             {beforeButton}
             <CurrencySelectButton
@@ -235,7 +243,7 @@ const CurrencyInputPanel = memo(function CurrencyInputPanel({
               </Flex>
             ) : null}
           </Flex>
-          {account && (
+          {account && pathname !== '/buy-crypto' && (
             <Text
               onClick={!disabled && onMax}
               color="textSubtle"

apps/web/src/components/FiatOnRampModal/FiatOnRampModal.tsx

@@ -0,0 +1,159 @@
+import { Trans, useTranslation } from '@pancakeswap/localization'
+import { Button, Flex, InjectedModalProps, Modal, Spinner, useModal } from '@pancakeswap/uikit'
+import { LoadingDot } from '@pancakeswap/uikit/src/widgets/Liquidity'
+import { useFiatOnrampAvailability } from 'hooks/useCheckAvailability'
+import { memo, useCallback, useEffect, useState } from 'react'
+import styled, { useTheme } from 'styled-components'
+import { ErrorText } from 'views/Swap/components/styleds'
+import { useAccount } from 'wagmi'
+
+const StyledIframe = styled.iframe<{ isDark: boolean }>`
+  // #1c1c1e is the background color for the darkmode moonpay iframe as of 2/16/2023
+  // background-color: #1c1c1e;
+  border-bottom-left-radius: 24px;
+  border-bottom-right-radius: 24px;
+
+  height: calc(100% - 75px);
+  position: absolute;
+  // right: 0;
+  width: 100%;
+`
+
+const MOONPAY_SUPPORTED_CURRENCY_CODES = [
+  'eth',
+  'eth_arbitrum',
+  'eth_optimism',
+  'eth_polygon',
+  'weth',
+  'wbtc',
+  'matic_polygon',
+  'polygon',
+  'usdc_arbitrum',
+  'usdc_optimism',
+  'usdc_polygon',
+]
+
+export const FiatOnRampModalButton = () => {
+  const { t } = useTranslation()
+  const [shouldCheck, setShouldCheck] = useState<boolean>(false)
+  const [onPresentConfirmModal] = useModal(<FiatOnRampModal />)
+
+  const { fiatOnarampAvailability, availabilityChecked, loading, error } = useFiatOnrampAvailability(
+    shouldCheck,
+    onPresentConfirmModal,
+  )
+
+  const handleBuyCryptoClick = useCallback(() => {
+    if (!availabilityChecked) {
+      setShouldCheck(true)
+    } else if (fiatOnarampAvailability) {
+      onPresentConfirmModal()
+      setShouldCheck(false)
+    }
+  }, [fiatOnarampAvailability, availabilityChecked, onPresentConfirmModal])
+
+  const disableBuyCryptoButton = Boolean(error || (!fiatOnarampAvailability && availabilityChecked) || loading)
+
+  return (
+    <>
+      {!disableBuyCryptoButton ? (
+        <Button height="35px" onClick={handleBuyCryptoClick} disabled={false} isLoading={false} variant="secondary">
+          {t('Buy Crypto')}
+        </Button>
+      ) : null}
+    </>
+  )
+}
+
+export const FiatOnRampModal = memo<InjectedModalProps>(function ConfirmSwapModalComp({ onDismiss }) {
+  const [error, setError] = useState<boolean | string | null>(false)
+  const [signedIframeUrl, setSignedIframeUrl] = useState<string | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+
+  const theme = useTheme()
+  const account = useAccount()
+  const { t } = useTranslation()
+
+  const handleDismiss = useCallback(() => {
+    onDismiss?.()
+  }, [onDismiss])
+
+  const fetchSignedIframeUrl = useCallback(async () => {
+    if (!account.address) {
+      setError(t('Please connect an account before making a purchase.'))
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch(`/api/onramp-url-sign/sign-moonpay-url`, {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify({
+          type: 'MOONPAY',
+          defaultCurrencyCode: 'eth',
+          redirectUrl: 'https://pancakeswap.finance',
+          theme: theme.isDark ? 'dark' : 'light',
+          walletAddresses: JSON.stringify(
+            MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
+              (acc, currencyCode) => ({
+                ...acc,
+                [currencyCode]: account.address,
+              }),
+              {},
+            ),
+          ),
+        }),
+      })
+      const result = await res.json()
+      setSignedIframeUrl(result.urlWithSignature)
+    } catch (e) {
+      setError(e.toString())
+    } finally {
+      setLoading(false)
+    }
+  }, [account.address, theme.isDark, t])
+
+  useEffect(() => {
+    fetchSignedIframeUrl()
+  }, [fetchSignedIframeUrl])
+
+  return (
+    <>
+      <Modal
+        title="Buy Crypto In One Click"
+        onDismiss={handleDismiss}
+        bodyPadding="0px"
+        headerBackground="gradientCardHeader"
+        height="650px" // height has to be overidden
+        width="350px" // width has to be overidden
+      >
+        {error ? (
+          <Flex justifyContent="center" alignItems="center" alignContent="center">
+            <ErrorText>
+              <Trans>something went wrong!</Trans>
+            </ErrorText>
+          </Flex>
+        ) : loading ? (
+          <Flex flexDirection="column" justifyContent="center" alignItems="center" alignContent="center">
+            <Spinner />
+            <LoadingDot />
+          </Flex>
+        ) : (
+          <StyledIframe
+            id="moonpayIframe"
+            src={signedIframeUrl ?? ''}
+            frameBorder="0"
+            title="fiat-onramp-iframe"
+            isDark={theme.isDark}
+          />
+        )}
+      </Modal>
+    </>
+  )
+})
+
+export default FiatOnRampModal

apps/web/src/components/FiatOnRampModal/MercuryoOnrampModal.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { Button, InjectedModalProps, Modal, useModal } from '@pancakeswap/uikit'
+import { memo, useCallback, useEffect } from 'react'
+
+export const FiatOnRampModalButtonMercury = () => {
+  const { t } = useTranslation()
+  const [onPresentConfirmModal] = useModal(<FiatOnRampModalMecuryo />)
+
+  return (
+    <Button height="35px" onClick={onPresentConfirmModal} disabled={false} isLoading={false} variant="secondary">
+      {t('Buy Crypto')}
+    </Button>
+  )
+}
+
+export const FiatOnRampModalMecuryo = memo<InjectedModalProps>(function ConfirmSwapModalComp({ onDismiss }) {
+  const handleDismiss = useCallback(() => {
+    onDismiss?.()
+  }, [onDismiss])
+
+  useEffect(() => {
+    // @ts-ignore
+    const MC_WIDGET = mercuryoWidget
+    MC_WIDGET.run({
+      widgetId: '64d1f9f9-85ee-4558-8168-1dc0e7057ce6',
+      host: document.getElementById('mercuryo-widget'),
+    })
+  }, [])
+
+  return (
+    <Modal
+      title="Buy Crypto In One Click"
+      onDismiss={handleDismiss}
+      bodyPadding="0px"
+      headerBackground="gradientCardHeader"
+      height="600px" // height has to be overidden
+      width="370px" // width has to be overidden
+    >
+      <div id="mercuryo-widget" />
+    </Modal>
+  )
+})
+
+export default FiatOnRampModalMecuryo