feat: add onramper widget react component

onramper · Oct 31, 2022 · 4b1fb63 · 4b1fb63
1 parent 041527e
commit 4b1fb63
Show file tree

Hide file tree

Showing 4 changed files with 1,190 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
+    "@onramper/widget": "^2.2.25",
     "advanced-css-reset": "^1.2.2",
     "emoji-log": "^1.0.2",
     "react": "^17.0.2",

diff --git a/source/Popup/Popup.tsx b/source/Popup/Popup.tsx
@@ -1,54 +1,22 @@
 import * as React from 'react';
-import {browser, Tabs} from 'webextension-polyfill-ts';
-
-import './styles.scss';
-
-function openWebPage(url: string): Promise<Tabs.Tab> {
-  return browser.tabs.create({url});
-}
+import OnramperWidget from '@onramper/widget';
 
 const Popup: React.FC = () => {
   return (
-    <section id="popup">
-      <h2>WEB-EXTENSION-STARTER</h2>
-      <button
-        id="options__button"
-        type="button"
-        onClick={(): Promise<Tabs.Tab> => {
-          return openWebPage('options.html');
-        }}
-      >
-        Options Page
-      </button>
-      <div className="links__holder">
-        <ul>
-          <li>
-            <button
-              type="button"
-              onClick={(): Promise<Tabs.Tab> => {
-                return openWebPage(
-                  'https://github.com/abhijithvijayan/web-extension-starter'
-                );
-              }}
-            >
-              GitHub
-            </button>
-          </li>
-          <li>
-            <button
-              type="button"
-              onClick={(): Promise<Tabs.Tab> => {
-                return openWebPage(
-                  'https://www.buymeacoffee.com/abhijithvijayan'
-                );
-              }}
-            >
-              Buy Me A Coffee
-            </button>
-          </li>
-        </ul>
-      </div>
-    </section>
+    <div
+      style={{
+        width: '440px',
+        height: '595px',
+        boxShadow: '0 2px 10px 0 rgba(0, 0, 0, 0.1)',
+        borderRadius: '10px',
+        margin: 'auto',
+      }}
+    >
+      <OnramperWidget
+        API_KEY="pk_test_ass3gtLSWQpI11IWUZLJdrfyQhj7bTw_3xwLvhEvH6Q0"
+        supportSell
+      />
+    </div>
   );
 };
 

diff --git a/source/manifest.json b/source/manifest.json
@@ -13,14 +13,9 @@
   "homepage_url": "https://github.com/abhijithvijayan/web-extension-starter",
   "short_name": "Sample Name",
 
-  "permissions": [
-    "activeTab",
-    "storage",
-    "http://*/*",
-    "https://*/*"
-  ],
+  "permissions": ["activeTab", "storage", "http://*/*", "https://*/*"],
 
-  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "content_security_policy": "script-src 'self' 'sha256-DhtVAr5uwMtIg/acmGl848KzTlWw6e7HEmKM8P8oqdg='; object-src 'self'",
 
   "__chrome|firefox__author": "abhijithvijayan",
   "__opera__developer": {
@@ -57,19 +52,14 @@
   },
 
   "background": {
-    "scripts": [
-      "js/background.bundle.js"
-    ],
+    "scripts": ["js/background.bundle.js"],
     "__chrome|opera__persistent": false
   },
 
-  "content_scripts": [{
-    "matches": [
-      "http://*/*",
-      "https://*/*"
-    ],
-    "js": [
-      "js/contentScript.bundle.js"
-    ]
-  }]
-}
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["js/contentScript.bundle.js"]
+    }
+  ]
+}