feat: restructure content script

packages/browserExtension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snickerdoodlelabs/browserextension",
-  "version": "0.1",
+  "version": "0.0.1",
   "description": "Snickerdoodle's data wallet",
   "license": "MIT",
   "scripts": {
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@hot-loader/react-dom": "^17.0.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/styles": "^4.11.5",
     "@metamask/detect-provider": "^1.2.0",
     "@webcomponents/custom-elements": "^1.5.0",

packages/browserExtension/src/manifest.json

@@ -11,18 +11,37 @@
     "default_icon": "icon-34.png"
   },
 
-  "permissions": ["notifications", "storage", "activeTab", "scripting", "identity", "identity.email"],
+  "permissions": [
+    "notifications",
+    "storage",
+    "activeTab",
+    "scripting",
+    "identity",
+    "identity.email"
+  ],
   "icons": {
     "128": "icon-128.png"
   },
-  "content_scripts": [{
-    "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-    "js": ["contentScript.bundle.js"],
-    "css": ["content.styles.css"]
-  }],
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "js": ["contentScript.bundle.js"],
+      "css": ["content.styles.css"],
+      "run_at": "document_end"
+    }
+  ],
   "devtools_page": "devtools.html",
-  "web_accessible_resources": [{
-    "resources": ["content.styles.css", "icon-128.png", "icon-34.png", "shadowScript.js"],
-    "matches": ["<all_urls>"]
-  }]
-}
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "content.styles.css",
+        "icon-128.png",
+        "icon-34.png",
+        "shadowScript.js",
+        "injectables/*",
+        "assets/*"
+      ],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}

packages/browserExtension/src/pages/Background/index.js

@@ -1,6 +1,12 @@
 console.log('This is the background page.');
 console.log('Put the background scripts here.');
 
+let userInfo;
+
+chrome.identity.getProfileUserInfo((info) => {
+  userInfo = info
+});
+
 
 chrome.runtime.onMessage.addListener(
   function(request, sender, sendResponse) {
@@ -9,6 +15,9 @@ chrome.runtime.onMessage.addListener(
                 "from the extension");
     if (request.greeting === "hello")
       sendResponse({farewell: "goodbye"});
+    if ( request.type === "SD_REQUEST_IDENTITY" ) {
+      sendResponse(userInfo)
+    }
   }
 );
 

packages/browserExtension/src/pages/Content/components/App/App.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from "react";
+import RewardCard from "../RewardCard";
+
+enum EAvailableHost {
+  SHRAPNEL = "www.shrapnel.com",
+  CRABADA = "market.crabada.com",
+}
+
+export enum APP_STATE {
+  INIT = 0,
+  DISMISSED = 1,
+  CONNECT_METAMASK = 2,
+  CONNECT_METAMASK_PENDING = 3,
+  CONNECT_METAMASK_SUCCESS = 4,
+  FREE_NFT_CLAIMED = 5,
+}
+export interface RewardItem {
+  host: EAvailableHost;
+  title: string;
+  description: string;
+  image: string;
+  primaryButtonText: string;
+  secondaryButtonText: string;
+  rewardName: string;
+}
+
+export const REWARD_DATA: Array<RewardItem> = [
+  {
+    host: EAvailableHost.CRABADA,
+    title: "Claim your free NFT!",
+    description:
+      "Connect your Metamask wallet with our data wallet to gain free probs and NFT’s.",
+    image: chrome.runtime.getURL("assets/img/crabada-item.png"),
+    primaryButtonText: "Claim Reward",
+    secondaryButtonText: "Back to Game",
+    rewardName: "Crabada 761",
+  },
+  {
+    host: EAvailableHost.SHRAPNEL,
+    title: "Claim your free NFT!",
+    description:
+      "Connect your Metamask wallet with our data wallet to gain free probs and NFT’s.",
+    image: chrome.runtime.getURL("assets/img/sharapnel-item.png"),
+    primaryButtonText: "Claim Reward",
+    secondaryButtonText: "Back to Game",
+    rewardName: "ATG-36 Helmet",
+  },
+];
+
+// const renderCurrentState() {
+// }
+const App = () => {
+  //const [dismiss, setDissmiss] = useState<boolean>(false);
+  const [appState, setAppState] = useState<APP_STATE>(APP_STATE.INIT);
+
+  document.addEventListener(
+    "SD_WALLET_CONNECTION_COMPLETED",
+    async function (e) {
+      // @ts-ignore
+      const { accounts, signature } = e.detail;
+      console.log("accounts received: ", accounts);
+      chrome.storage.sync.set({ accountAddress: accounts }, function () {
+        console.log("Value is set to" + accounts);
+      });
+    },
+  );
+
+  const [rewardToDisplay, setRewardToDisplay] = useState<
+    RewardItem | undefined
+  >();
+  const hostname = window.location.hostname;
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    console.log("hostname: ", hostname);
+    const reward = REWARD_DATA.find((i) => i.host === hostname);
+    if (reward) {
+      timeout = setTimeout(() => {
+        setRewardToDisplay(reward);
+      }, 1500);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, []);
+  if (!rewardToDisplay) {
+    return null;
+  }
+  return (() => {
+    switch (appState) {
+      case APP_STATE.INIT:
+        return (
+          <RewardCard rewardItem={rewardToDisplay} setAppState={setAppState} />
+        );
+      case APP_STATE.DISMISSED:
+        return <></>;
+    }
+  })();
+};
+
+export default App;

packages/browserExtension/src/pages/Content/components/App/index.ts

@@ -0,0 +1 @@
+export { default } from "./App";

packages/browserExtension/src/pages/Content/components/Modal/Modal.style.ts

@@ -0,0 +1,85 @@
+import { makeStyles, createStyles } from "@material-ui/core/styles";
+
+export const useGenericModalStyles = makeStyles((theme) =>
+  createStyles({
+    container: {
+      [theme.breakpoints.down("xs")]: {
+        "& .MuiDialog-container": {
+          alignItems: "flex-end",
+          margin: "unset",
+          borderRadius: 0,
+        },
+        "& .MuiDialog-paper": {
+          margin: "unset",
+          padding: "unset",
+          width: "100%",
+          borderRadius: "12px 12px 0 0",
+        },
+      },
+    },
+    content: {
+      display: "flex",
+      minHeight: "50vh",
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "unset",
+    },
+    image: {
+      maxWidth: 204,
+    },
+    actionsContainer: {
+      padding: "26px 40px",
+      justifyContent: "center",
+    },
+    closeButton: {
+      //   position: "absolute",
+    },
+    titleContainer: {
+      padding: "26px 40px",
+      display: "flex",
+      alignItems: "center",
+      [theme.breakpoints.down("xs")]: {
+        padding: 24,
+      },
+    },
+    contentContainer: {
+      padding: "26px 40px",
+    },
+    title: {
+      marginBottom: 4,
+      fontFamily: "'Shrikhand' !important",
+    },
+    description: {
+      marginBottom: 24,
+    },
+    primaryButton: {
+      textTransform: "unset",
+      padding: "21px 26px 10px 12px",
+      boxShadow: "8px 8px 0px 0px rgb(0 0 0)",
+      background: "#fff",
+      color: "#000",
+      borderColor: "#000",
+      borderRadius: 0,
+      "&:hover": {
+        backgroundColor: "inherit",
+        borderColor: "inherit",
+      },
+    },
+    primaryButtonIcon: {
+      position: "absolute",
+      top: 4,
+      right: 4,
+      width: 14,
+    },
+    secondaryButton: {
+      textTransform: "unset",
+      padding: "21px 26px 10px 12px",
+      background: "unset",
+      textDecoration: "underline",
+    },
+    sdLogo: {
+      marginLeft: 12,
+      width: 124,
+    },
+  }),
+);

packages/browserExtension/src/pages/Content/components/RewardCard/RewardCard.style.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from "@material-ui/core";
+import { red } from "@material-ui/core/colors";
+
+export const useStyles = makeStyles((theme) => ({
+  button: {
+    color: red[400],
+  },
+}));