ramp test

configs/app/features/index.ts

@@ -10,6 +10,7 @@ export { default as googleAnalytics } from './googleAnalytics';
 export { default as graphqlApiDocs } from './graphqlApiDocs';
 export { default as marketplace } from './marketplace';
 export { default as mixpanel } from './mixpanel';
+export { default as ramp } from './ramp';
 export { default as restApiDocs } from './restApiDocs';
 export { default as optimisticRollup } from './optimisticRollup';
 export { default as safe } from './safe';

configs/app/features/ramp.ts

@@ -0,0 +1,25 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const hostApiKey = getEnvValue('NEXT_PUBLIC_RAMP_HOST_API_KEY');
+
+const title = 'Ramp Integration';
+
+const config: Feature<{ hostApiKey: string; defaultAsset?: string }> = (() => {
+  if (hostApiKey) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      hostApiKey,
+      defaultAsset: getEnvValue('NEXT_PUBLIC_RAMP_DEFAULT_ASSET'),
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

docs/ENVS.md

@@ -557,3 +557,10 @@ For obtaining the variables values please refer to [reCAPTCHA documentation](htt
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key | - | - | `<your-secret>` |
+
+### Ramp Integration
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_RAMP_HOST_API_KEY | `string` | Host api key for Ramp integration | - | - | `<your-secret>` |
+| NEXT_PUBLIC_RAMP_DEFAULT_ASSET | `string` | SwapAsset symbol of the asset to be shown to the user when they open Ramp (see https://docs.ramp.network/assets) | - | - | `ETH_ETH` |

package.json

@@ -45,6 +45,7 @@
     "@opentelemetry/sdk-node": "^0.45.0",
     "@opentelemetry/sdk-trace-node": "^1.18.0",
     "@opentelemetry/semantic-conventions": "^1.18.0",
+    "@ramp-network/ramp-instant-sdk": "^4.0.4",
     "@sentry/cli": "^2.21.2",
     "@sentry/react": "7.24.0",
     "@sentry/tracing": "7.24.0",

ui/pages/Home.tsx

@@ -8,12 +8,14 @@ import LatestZkEvmL2Batches from 'ui/home/LatestZkEvmL2Batches';
 import Stats from 'ui/home/Stats';
 import Transactions from 'ui/home/Transactions';
 import AdBanner from 'ui/shared/ad/AdBanner';
+import RampButton from 'ui/snippets/header/RampButton';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 
 const Home = () => {
   return (
     <Box as="main">
+      <RampButton/>
       <Box
         w="100%"
         background={ config.UI.homepage.plate.background }

ui/snippets/header/RampButton.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@chakra-ui/react';
+import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk';
+import React from 'react';
+
+import config from 'configs/app';
+
+const feature = config.features.ramp;
+
+const RampButton = () => {
+  const openRamp = React.useCallback(() => {
+    if (!feature.isEnabled) {
+      return;
+    }
+
+    new RampInstantSDK({
+      hostAppName: 'Blockscout',
+      hostLogoUrl: config.UI.sidebar.icon.default ? config.app.baseUrl + config.UI.sidebar.icon.default : '',
+      hostApiKey: feature.hostApiKey,
+      defaultAsset: feature.defaultAsset,
+      // remove after demo
+      url: 'https://app.demo.ramp.network',
+    }).show();
+  }, []);
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return <Button onClick={ openRamp }>Ramp</Button>;
+};
+
+export default RampButton;

yarn.lock

@@ -4250,6 +4250,13 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@ramp-network/ramp-instant-sdk@^4.0.4":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/@ramp-network/ramp-instant-sdk/-/ramp-instant-sdk-4.0.4.tgz#25e1327ff2aead8bbab3c1cb5257da9041867442"
+  integrity sha512-Kkn+xwc4EbD2YqXOOQChZCqRT8/DM8sh9Qnz1nI2+/ACdo3INc42FMubgw5aZlyBzuF32XL/xdZyWBGPF4vECg==
+  dependencies:
+    body-scroll-lock "^3.1.5"
+
 "@reach/[email protected]":
   version "0.17.0"
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.17.0.tgz#60cce65eb7a0d6de605820727f00dfe2b03b5f17"
@@ -7383,6 +7390,11 @@ bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
+body-scroll-lock@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"