From ade08b505f9b792e30de97dbc3f461699a877637 Mon Sep 17 00:00:00 2001 From: Enes Dolgun <58950702+dlgn2@users.noreply.github.com> Date: Tue, 7 Jun 2022 20:58:47 +0300 Subject: [PATCH] Popup and OAuth implementation --- .../src/assets/img/sdHorizontalLogo.svg | 29 ++ packages/browserExtension/src/manifest.json | 62 ++-- .../src/pages/Background/index.js | 81 +++-- .../src/pages/Popup/Popup.jsx | 306 +++++++++++------- .../src/pages/Popup/components/Data.jsx | 53 +++ .../src/pages/Popup/index.css | 10 +- .../src/pages/Popup/index.html | 22 +- 7 files changed, 384 insertions(+), 179 deletions(-) create mode 100644 packages/browserExtension/src/assets/img/sdHorizontalLogo.svg create mode 100644 packages/browserExtension/src/pages/Popup/components/Data.jsx diff --git a/packages/browserExtension/src/assets/img/sdHorizontalLogo.svg b/packages/browserExtension/src/assets/img/sdHorizontalLogo.svg new file mode 100644 index 0000000000..e5e764d7c7 --- /dev/null +++ b/packages/browserExtension/src/assets/img/sdHorizontalLogo.svg @@ -0,0 +1,29 @@ + + + + + + + + + diff --git a/packages/browserExtension/src/manifest.json b/packages/browserExtension/src/manifest.json index 45cf368e47..dad59b0244 100755 --- a/packages/browserExtension/src/manifest.json +++ b/packages/browserExtension/src/manifest.json @@ -10,6 +10,28 @@ "default_popup": "popup.html", "default_icon": "icon-34.png" }, + "oauth2": { + "client_id": "1055144164647-mfcem81s96av4o1gi6mrmcrqfmbrj5i4.apps.googleusercontent.com", + "scopes": [ + "profile email", + "https://www.googleapis.com/auth/contacts", + "https://www.googleapis.com/auth/contacts.readonly", + "https://www.googleapis.com/auth/directory.readonly", + "https://www.googleapis.com/auth/profile.agerange.read", + "https://www.googleapis.com/auth/profile.emails.read", + "https://www.googleapis.com/auth/profile.language.read", + "https://www.googleapis.com/auth/user.addresses.read", + "https://www.googleapis.com/auth/user.birthday.read", + "https://www.googleapis.com/auth/user.emails.read", + "https://www.googleapis.com/auth/user.gender.read", + "https://www.googleapis.com/auth/user.organization.read", + "https://www.googleapis.com/auth/user.phonenumbers.read", + "https://www.googleapis.com/auth/userinfo.email", + "https://www.googleapis.com/auth/userinfo.profile" + + + ] + }, "permissions": [ "notifications", @@ -22,26 +44,22 @@ "icons": { "128": "icon-128.png" }, - "content_scripts": [ - { - "matches": ["http://*/*", "https://*/*", ""], - "js": ["contentScript.bundle.js"], - "css": ["content.styles.css"], - "run_at": "document_end" - } - ], + "content_scripts": [{ + "matches": ["http://*/*", "https://*/*", ""], + "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", - "injectables/*", - "assets/*" - ], - "matches": [""] - } - ] -} + "web_accessible_resources": [{ + "resources": [ + "content.styles.css", + "icon-128.png", + "icon-34.png", + "shadowScript.js", + "injectables/*", + "assets/*" + ], + "matches": [""] + }] +} \ No newline at end of file diff --git a/packages/browserExtension/src/pages/Background/index.js b/packages/browserExtension/src/pages/Background/index.js index 4dea7c4619..68f0545262 100644 --- a/packages/browserExtension/src/pages/Background/index.js +++ b/packages/browserExtension/src/pages/Background/index.js @@ -1,35 +1,68 @@ -console.log('This is the background page.'); -console.log('Put the background scripts here.'); +console.log("This is the background page."); +console.log("Put the background scripts here."); let userInfo; chrome.identity.getProfileUserInfo((info) => { - userInfo = info + userInfo = info; }); - -chrome.runtime.onMessage.addListener( - function(request, sender, sendResponse) { - console.log(sender.tab ? - "from a content script:" + sender.tab.url : - "from the extension"); - if (request.greeting === "hello") - sendResponse({farewell: "goodbye"}); - if ( request.type === "SD_REQUEST_IDENTITY" ) { - sendResponse(userInfo) - } +chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { + console.log( + sender.tab + ? "from a content script:" + sender.tab.url + : "from the extension", + ); + if (request.greeting === "hello") sendResponse({ farewell: "goodbye" }); + if (request.type === "SD_REQUEST_IDENTITY") { + sendResponse(userInfo); } -); +}); function showStayHydratedNotification() { chrome.notifications.create({ - type: 'basic', - iconUrl: 'stay_hydrated.png', - title: 'Time to Hydrate', - message: 'Everyday I\'m Guzzlin\'!', - buttons: [ - { title: 'Keep it Flowing.' } - ], - priority: 0 + type: "basic", + iconUrl: "stay_hydrated.png", + title: "Time to Hydrate", + message: "Everyday I'm Guzzlin'!", + buttons: [{ title: "Keep it Flowing." }], + priority: 0, }); -} \ No newline at end of file +} + +// Google OAuth2 +const API_KEY = "AIzaSyB4-1qbu_jTBJ6WzB-mQukjJOu-4trvpLQ"; +let user_signed_in = false; + +chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { + if (request.message === "dataRequest" && request.obj === null) { + let current_userID = "me"; + chrome.identity.getProfileUserInfo( + { accountStatus: "ANY" }, + function (userInfo) { + console.log(userInfo); + current_userID = userInfo.id; + }, + ); + chrome.identity.getAuthToken({ interactive: true }, function (auth_token) { + console.log(auth_token); + console.log(current_userID); + let fetch_url = `https://people.googleapis.com/v1/people:batchGet?resourceNames=people/${current_userID}&personFields=phoneNumbers,addresses,ageRanges,locations,names,locations,genders,birthdays,emailAddresses,biographies,clientData,locales,metadata,photos,userDefined`; + let fetch_options = { + headers: { + Authorization: `Bearer ${auth_token}`, + }, + }; + fetch(fetch_url, fetch_options) + .then((res) => res.json()) + .then((res) => { + console.log("DATA", res.responses[0].person); + chrome.runtime.sendMessage({ + message: "cardData", + userData: res.responses[0].person, + }); + }); + }); + sendResponse(true); + } +}); diff --git a/packages/browserExtension/src/pages/Popup/Popup.jsx b/packages/browserExtension/src/pages/Popup/Popup.jsx index cacbbb41a4..48edc5e9f2 100644 --- a/packages/browserExtension/src/pages/Popup/Popup.jsx +++ b/packages/browserExtension/src/pages/Popup/Popup.jsx @@ -5,133 +5,201 @@ import createMetaMaskProvider from "metamask-extension-provider"; import { ethers } from "ethers"; import connect from "../Background"; import { abi_RequestForData } from "../../contract/abi"; +import { Button, Grid } from "@material-ui/core"; +import horizontalLogo from "../../assets/img/sdHorizontalLogo.svg"; +import Data from "./components/Data"; -// https://github.com/MetaMask/extension-provider -// import { initializeProvider } from '@metamask/providers'; -// https://github.com/MetaMask/metamask-extension/issues/8990 -// https://blog.shahednasser.com/how-to-send-notifications-in-chrome-extensions/ const Popup = () => { - const [accounts, setAccounts] = useState([]); - const [connected, setConnected] = useState(false); - const [provider, setProvider] = useState(false); - const [messages, setMessages] = useState([]); - const [signer, setSigner] = useState(undefined); + const [obj, setObj] = useState(null); + const [loadCard, setLoadCard] = useState(true); - async function connectMetamask() { - console.log("connectMetamask"); + chrome.runtime.sendMessage({ message: "dataRequest", obj: obj }); - const provider = createMetaMaskProvider(); - console.log("p", provider); - - if (provider) { - console.log("provider detected", provider); - setProvider(provider); - - const accounts = await provider.request({ - method: "eth_requestAccounts", - }); - - setAccounts(accounts); - setConnected(true); - const connectedProvider = new ethers.providers.Web3Provider(provider); - console.log(" Connected Provider ", connectedProvider); - setSigner(connectedProvider.getSigner()); - console.log(" Signer Provider ", connectedProvider.getSigner()); - - console.log("accounts ", accounts); - listenToEvents(provider); - // Start Listening.. - //verify(provider, accounts[0]); - //listenToEvents(provider); + chrome.runtime.onMessage.addListener(function ( + request, + sender, + sendResponse, + ) { + if (request.message === "cardData") { + if (request.userData) { + console.log("req", request.userData); + setObj(request.userData); + } } - } - - chrome.identity.getProfileUserInfo(function (userInfo) { - console.log(userInfo); }); - async function listenToEvents(provider) { - const contractAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"; - console.log(" provider 1", provider); - const ethProvider = new ethers.providers.Web3Provider(provider); - const contract = new ethers.Contract( - contractAddress, - abi_RequestForData, - ethProvider, - ); - - contract.on("RequestForData", (e, cid) => { - console.log("Received Evemt", " Address ", e, " CID ", cid); - setMessages((prev) => [...prev, cid]); - }); - } - - function messageToVerify() { - return JSON.stringify({ - domain: { - // Defining the chain aka Rinkeby testnet or Ethereum Main Net - chainId: 1, - // Give a user friendly name to the specific contract you are signing for. - name: "SnickerDoodle Consent Contract", - // If name isn't enough add verifying contract to make sure you are establishing contracts with the proper entity - verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC", - // Just let's you know the latest version. Definitely make sure the field name is correct. - version: "1", - }, - - // Defining the message signing data content. - message: { - contents: "You are signing Snickerdoodle's Consent Contract", - from: { - name: "SnickerDoodle", - }, - to: [ - { - wallets: [accounts[0]], - }, - ], - }, - // Refers to the keys of the *types* object below. - }); - } - - async function verify() { - const signature = await signer.signMessage(messageToVerify()); - console.log(" signature ", signature); - } - return ( -
-
- Hello Snickerdoodle! - {connected ? ( - <> - {" "} - -
    - {accounts.map((account) => ( -
  • {account}
    • - ))} -
- - ) : ( - - )} -

- Make sure that your Metamask is pointing at right Ethernet Network! - HardHat local host or Avalanche. -

-
{messages.length > 0 ? "Messages Received" : ""}
-
    - {" "} - {messages.map((message, index) => ( -
  • {message}
    • - ))} -
-
-
+ + + + + + + {loadCard ? ( + + + +

+ Personal Info +

+ + + + + + + + +

+ Contact Info +

+ + + + + + + +

+ On-chain Info +

+ + + + + + + ) : ( + + + + )} + ); }; diff --git a/packages/browserExtension/src/pages/Popup/components/Data.jsx b/packages/browserExtension/src/pages/Popup/components/Data.jsx new file mode 100644 index 0000000000..616941df38 --- /dev/null +++ b/packages/browserExtension/src/pages/Popup/components/Data.jsx @@ -0,0 +1,53 @@ +import { Grid } from "@material-ui/core"; +import React from "react"; + +export default function TextData(props) { + return ( + + +

+ {props?.title} +

+ + + {props?.dataType === "Text" ? ( + +

+ {props?.data} +

+ + ) : ( + + + + )} + + ); +} diff --git a/packages/browserExtension/src/pages/Popup/index.css b/packages/browserExtension/src/pages/Popup/index.css index 800a9cb829..067f10f0df 100644 --- a/packages/browserExtension/src/pages/Popup/index.css +++ b/packages/browserExtension/src/pages/Popup/index.css @@ -1,10 +1,8 @@ body { - width: 300px; - height: 260px; + width: 450px; + height: 600px; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -14,4 +12,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} +} \ No newline at end of file diff --git a/packages/browserExtension/src/pages/Popup/index.html b/packages/browserExtension/src/pages/Popup/index.html index b7e52f80b4..141cec97c2 100644 --- a/packages/browserExtension/src/pages/Popup/index.html +++ b/packages/browserExtension/src/pages/Popup/index.html @@ -1,11 +1,17 @@ - - - - - -
- - + + + + + + + + + +
+ + + \ No newline at end of file