feat: fiat on ramp integration

apps/web/.env

@@ -1,2 +1,10 @@
 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"
+MERCURYO_SECRET_KEY='9r8egtsb27bzr101em7uw7zhcrlwdbp'
+PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nMIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAMfRrRXD0Jw4+5sOnrwdyUPirVRSw6L15ZNIMCuRA+XNo2+fUVCsbamdJhyn37uNaUswsba99oOzNztOpKcMnu/YnGMowdci5IIp8luPJjdQSTgy1WlHTCCuIenddNUQ9X3RNNlwTxxUYMnzIJe27LQUw92zjaCd0GNVsFxiGLixAgMBAAECgYEAimannSipCFvLogWJWsDC09tgtMQyr1/kKJRakQJ7kaNSbZELEHat6kpnyHdaVxzGbocGwI1o/qWWPuTk1LPALSTh2VS5ePLRxRfXXYgfEcTeJ3/50INlq+A9pRRG1dFQLfxlv5jbu8nWCSIaQCpX6QhUMzduJIrwFl9mlzWcvbUCQQDsAtX+RH/NcT2aYMz9I5fQnZbfxrwoD6k3ipQunjPkqQ63s+e9p+br0mKpDlnCuhIqKE3MVQwp99d28XPdXDKjAkEA2L4hAAqK5TTH+N/6xnpgLV8ksvOxh/DNwu6VbZ9DxjFmyggMGtf0OOhwwHqYqJBvNvpyJ/1+WyEjVL/rgxKwmwJAeMtuyYg3vWfTNtuKr5lzD3RJD1nBXeO+IU5NT5rrRoJ8pOtwlfKEz3hLxOkyaecgevFL+GQjKKvQXPFx8v9IbwJAGzs4FjM85DNPdJtffJRfhRPRHpKzmWrNz1H+gDlkYIBQc82zB6ReUNATant8tqD++B9bPF8DAxwUvk8mnd85RQJAViywe5reNeMQGmKxmovZYfzo6oVveJrTSMG4srQBpw5EmpVS3kdqbS2HhhcAtrY7Aikpj4EG/mQfNAwqvKi8wQ==\n-----END PRIVATE KEY-----
+

apps/web/package.json

@@ -51,11 +51,12 @@
     "@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",
+    "axios": "^1.4.0",
     "bignumber.js": "^9.0.0",
     "canvas-confetti": "^1.5.1",
     "clsx": "^1.2.1",
@@ -67,6 +68,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 +81,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 +101,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 +152,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,16 @@ export const LightGreyCard = styled(Card)`
   background-color: ${({ theme }) => theme.colors.background};
 `
 
+export const CryptoCard = styled(Card)<{ isClicked: boolean; isDisabled: boolean }>`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme, isClicked }) => (isClicked ? theme.colors.input : theme.colors.dropdown)};
+  transition: height 0.4s ease-in-out, background-color 0.1s ease-in-out;
+  overflow: hidden;
+  &:hover {
+    cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  }
+`
+
 export const GreyCard = styled(Card)`
   background-color: ${({ theme }) => theme.colors.dropdown};
 `