Webpack + React Prototype

.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": [
+    "es2015",
+    "stage-0",
+    "react"
+  ],
+  "plugins": [
+        ["babel-plugin-idx", {
+          "importName": "./idx"
+        }],
+        "transform-regenerator",
+        "transform-class-properties",
+        "transform-object-rest-spread", 
+        "add-module-exports",
+        "dynamic-import-webpack"
+        ],
+  "env": {
+    "production": {
+      "presets": ["react-optimize"]
+    },
+    "development": {
+      "plugins": [
+        "react-hot-loader/babel"
+      ]
+    }
+  }
+}

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
-
-
+node_modules/
+web-ext-artifacts/
+yarn.lock

README.md

@@ -1,65 +1,102 @@
-<img src='https://d3vv6lp55qjaqc.cloudfront.net/items/263e3q1M2Y2r3L1X3c2y/helmet.png'/>
-
-# Gitcoin
+<img src='https://d3vv6lp55qjaqc.cloudfront.net/items/263e3q1M2Y2r3L1X3c2y/helmet.png' width="150px" />
+# Staging - Chrome Extension
+The staging branch is an experimental branch. Intended to offer a working prototype for designers and developers to experiment with larger codebase changes.
 
-Gitcoin pushes Open Source Forward.  Learn more at [https://gitcoin.co](https://gitcoin.co)
+## Proposed Prototype Ideas
+- [x] Webpack   
+- [x] React   
+- [ ] uPort*
+- [ ] RxJS/RxDB
+- [ ] Offline Storage + Minimal Server Requests
 
-[Star](https://github.com/gitcoinco/chrome_ext/stargazers) and [watch](https://github.com/gitcoinco/chrome_ext/watchers) this github repository to stay up to date, we're pushing new code several times per week!
+Uport has been partially implemented, but can't be considered a prototype. It doesn't do anything meaningful.
 
-# Chrome Extension
+### Webpack
+The Webpack Bundle process composes the ```entry``` and ```src``` files into the ```build``` folder.
 
-## Get It Today
+- entry: Non-Javascript Application files.
+- src: Javascript Application files.
 
-The Chrome extension is live on the Google Chrome Store.  [Get it here](https://gitcoin.co/extension).
+The configuration for the build process is ```configuration/webpack.config.extension.js```
+The configuration for development is ```configuration/webpack.config.extension.dev.js```
 
-## What it Do
+```
+npm install || yarn
+npm run build || yarn build <---- Bundles Chrome Extension
+npm run start || yarn start <---- React Hot Loading for Popup Development (localhost: 3000)
+```
 
-### Browse Work Directly on Github
+**Notice:** Webpack implements ~~black magic~~ dependency bundling, so the normal ```chrome.extension``` method doesn't work, because Webpack doesn't know ```chrome``` will be available in the global ```window``` object and therefore will fail during the bundle/compiling process - assuming you made the mistake. Therefore, the ```chrome``` object must be explicitliy declared in ```window.chrome``` to interact with Chrome Extension specific methods/functions. **This could be changed with a Webpack plugin.**
 
-<img src='readme/browse_on_github.png'>
+## React
+The React family has been added (Redux, Router, Sagas) to help scale the interface.
 
-### Filter Available Work from Github
+As mentioned in a recent Tweet (https://twitter.com/GetGitcoin/status/947533717689450497) the future is bright for the Gitcoin ecosystem. As Gitcoin features become interconnected, hopefully predictable interface state management can help designers and developers more quickly and easily code new features.
 
-<img src='readme/filter_available_work.png'>
+Common async management (generators, await and promises) are implemented within the application bundle. Helping designers and developers more easily reason about Javascript's *notorious* single threaded callback style.
 
-### Fund Work Directly on Github
+Basically, a top-level Redux store exists to monitor inbound/outbound requests using the Saga methodology.
 
-<img src='readme/fund.png'>
+>  From now on, nothing goes down unless I'm involved. No ethlotto, no asyncronous requests, no nothing. An API gets requested in the Interwebs, I want in. - Kings of New York.
 
-### Tip Users Direclty on Github
+If meaningful things happen in the application they should be tracked and available for any component or feature to respond to.
 
-<img src='readme/tip.png'>
+A good example is in ```src/core/assimilation/symbiosis/uport/sagas.js```
 
+A user wants to request credentials. Perfect. We dispatch a request from our application. The Sagas will catch the request. Manage the outbond data request (to the blockchain) and respond accordingly: requested, success or failure.
 
-## Get It Today
+Now from anywhere in the application the request can be observed and individual components/features can respond accordingly. Maybe we want to display an Avatar and Name in the header. Perhaps, a smart contract is automatically communnicated with via uPort login. Whatever the case will be, predictable state management requests (perhaps especially with the blockchain) will make life joyous.
 
-The Chrome extension is live on the Google Chrome Store.  [Get it here](https://gitcoin.co/extension).
+```
+/*---*--- Get Credentials ---*---*/
+function* getCredentials({payload, metadata}) {
+  try {
+    yield put(notificationOpen({payload:{title: 'Requesting: Identity'}}))
+    const requestedCredentials = payload
+    const credentials = yield uPortConnection.requestCredentials(requestedCredentials)
+    yield put(uPortGetCredentialsSuccess({
+      payload: credentials, 
+      metadata
+    }))
+    yield put(notificationOpen({payload:{
+      title: 'Returned: Identity Request',
+      message: `Welcome ${credentials.name} to Eidenai`
+    }}))
+  } catch(e) {
+    yield put(uPortGetCredentialsFailure({payload: e, metadata}))
+    yield put(notificationOpen({payload:{
+      title: 'Failure: Identity Request ',
+      message: e,
+    }}))
+  }
+}
+```
 
-<a href="https://gitcoin.co/extension">
-<img src="https://d3vv6lp55qjaqc.cloudfront.net/items/062d2k3t43040c2u2e2H/Image%202017-09-25%20at%204.12.56%20AM.png"/>
-</a>
 
-# Legal
+#### Basic Tenets
+> State machine — a set of defined states, where transition between states is initiated by triggering an action.
 
-```
-    Copyright (C) 2017 Gitcoin Core 
+> Workflow — a sequence of activities, where transition between them occurs when the previous activity is completed. Workflows can include branching to other activities. A workflow can be built on top of a state machine. A process manager is a workflow pattern.
 
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+> Saga — multiple workflows, each providing compensating actions for every step of the workflow where it can fail. Sagas are not necessarily implemented using workflows.
 
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
+##### File Structure
+Probably the biggest misdirection in the React infrastructure is the ```core``` folder. Ultimately it's a judgement call by each developer whether the feature is specific to the Chrome Extension or can be abstracted away, but if the code could potentially be copy/pasted into a Browser, Electron or other Javascript based application, it should probably live within the core folder.
 
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+Everything else should be contained within their respective folders or core Javascript file.
 
 ```
+src/
+- core <--- resources abstracted away from Chrome Extension specific codebase.
+- popup/index.js
+- background.js
+- options.js
+```
+
+# Gitcoin
 
+Gitcoin pushes Open Source Forward.  Learn more at [https://gitcoin.co](https://gitcoin.co)
 
-<!-- Google Analytics -->
-<img src='https://ga-beacon.appspot.com/UA-102304388-1/gitcoinco/chrome_ext' style='width:1px; height:1px;' >
+[Star](https://github.com/gitcoinco/chrome_ext/stargazers) and [watch](https://github.com/gitcoinco/chrome_ext/watchers) this github repository to stay up to date, we're pushing new code several times per week!
 
+<img src='https://d3vv6lp55qjaqc.cloudfront.net/items/263e3q1M2Y2r3L1X3c2y/helmet.png'/>

build/asset-manifest.json

@@ -0,0 +1,10 @@
+{
+  "background.js": "background.bundle.js",
+  "options.js": "options.bundle.js",
+  "popup.css": "static/css/popup.00725281.css",
+  "popup.css.map": "static/css/popup.00725281.css.map",
+  "popup.js": "popup.bundle.js",
+  "static/js/0.592300e4.chunk.js": "static/js/0.592300e4.chunk.js",
+  "static/media/MacbookPro.png": "static/media/MacbookPro.bf02f453.png",
+  "static/media/Smartphone.png": "static/media/Smartphone.d2d5eae8.png"
+}

build/background.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+<link href="/static/css/popup.00725281.css" rel="stylesheet"></head>
+<body>
+<script type="text/javascript" src="/popup.bundle.js"></script><script type="text/javascript" src="/options.bundle.js"></script><script type="text/javascript" src="/background.bundle.js"></script></body>
+</html>

build/css/core.css

@@ -0,0 +1,91 @@
+body {
+        font-style: normal;
+        font-variant: normal;
+        font-weight: 400;
+        line-height: 20px;
+        font-family: Futura, "Trebuchet MS", Arial, sans-serif;
+        font-size: 100%;
+        width: 620px;
+        height: 500px;
+        padding: 30px 10px;
+      }
+      #messages{
+        width: 100%;
+        padding: 0px;
+        margin: 0px;
+      }
+      #messages li:first-child{
+            margin-top: -20px;
+      }
+      #messages li:last-child{
+            margin-bottom: 20px;
+      }
+
+      #messages li{
+        width: 100%;
+        margin-top: 5px;
+        list-style: none;
+        border-radius: 3px;
+        padding: 3px 5px;
+        font-weight: 300;
+      }
+      #messages li.warning{
+        background-color: #ffce08;
+      }
+      #messages li.error{
+        background-color: #f9006c;
+      }
+      #messages li.success{
+        background-color: #0fce7c;
+      }
+      #bot{
+        float:left;
+        padding: 10px;
+      }
+      #bot img{
+        height: 150; 
+        height: 150px;
+      }
+      #input{
+        width: 100%;
+        word-wrap: break-word;
+      }
+      #input h1{
+        margin-top: 10px;
+      }
+      #history{
+        float:right;
+        width: 75%;
+      }
+      h1{
+        font-size: 18px;
+      }
+      .btn-primary {
+        background-color: #15003e;
+      }
+      a {
+        color: #15003e;
+      }
+
+      .bot_desc{
+        margin-top: -10px;
+      }
+      .gitcoin_button{
+        background-color: #15003e; color: #25e899; background-image: linear-gradient(-180deg, #15003e 0%, #190032 90%);
+      }
+
+      body{
+        background: url(https://gitcoin.co/static/v2/images/light-bg.png);
+        background-position: cover;
+      }
+
+      #search_bar {
+        border-radius: 16px;
+        height: 32px;
+        border: 1px solid #eee;
+        outline: none;
+        padding-left: 10px;
+        font-weight: 300;
+        border: 1px solid black !important;
+        width: 80%;
+      }

build/css/options.css

@@ -0,0 +1,100 @@
+* {
+  transition-property: all;
+  transition-duration: 0.2s;
+  transition-timing-function: linear;
+  /*transition-delay: 1s;*/
+  outline: none;
+}
+body {
+  background-color: #15003e;
+  background-image: linear-gradient(220deg, #1e0351, #15003e);
+  color: #eff4ee;
+  padding: 0;
+}
+
+select {
+  font-size: 140%;
+  height: 50px;
+  width: 100%;
+}
+
+.bg-stripes {
+  background-image: url(/images/header-bg.png)
+}
+
+.absolute-fill {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+}
+
+
+.color--primary {
+  color: #0d0764;
+}
+.color--secondary {
+  color: #f6136d;
+}
+
+.fw--300 {
+  font-weight: 300;
+}
+
+.height-100 {
+  height: 100%;
+}
+
+.mb--10 {
+  margin-bottom: 10px;
+}
+.mb--15 {
+  margin-bottom: 15px;
+}
+.mb--20 {
+  margin-bottom: 20px;
+}
+
+.flex {
+  display: flex;
+}
+.flex-center {
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.options--container {
+  background-color: #FFF;
+  color: #3e3e3e;
+  border-radius: 15px;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  max-width: 420px;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  padding-left: 35px;
+  padding-right: 35px;
+  width: 100%;
+}
+.options--container:hover {
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+
+#save {
+  background-color: #20aa81;
+  background-image: linear-gradient(170deg, #3ed5bf, #20aa81);
+  border: none;
+  border-radius: 15px;
+  color: #FFF;
+  display: block;
+  font-size: 150%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 220px;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  width: 100%;
+}