Massage to work w/ webpack after rebase

Rectifies some missing pieces I might have lost in the rebase
Updates webpack to use styled-jsx
Updates ui index to use popup.js

package.json

@@ -30,8 +30,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.2",
     "@mechamittens/extension": "0.0.4",
-    "@tallyho/tally-ui": "0.0.1",
     "@tallyho/tally-api": "0.0.1",
+    "@tallyho/tally-ui": "0.0.1",
     "@types/firefox-webext-browser": "^82.0.0",
     "buffer": "^6.0.3",
     "webext-options-sync": "^2.0.1",
@@ -46,6 +46,7 @@
     "npm": "^7.5.6",
     "npm-run-all": "^4.1.5",
     "size-plugin": "^1.2.0",
+    "styled-jsx": "^3.4.4",
     "terser-webpack-plugin": "^5.1.1",
     "typescript": "4.2.2",
     "webpack": "^5.24.2",

src/ui.js

@@ -1,3 +1,3 @@
-import ui from '@tallyho/tally-ui'
+import { attachToElement } from '@tallyho/tally-ui';
 
-ui.attachToElement(document.getElementById("tally-root"))
+attachToElement(document.getElementById('tally-root'));

ui/config/routes.js

@@ -1,21 +1,7 @@
-import Wallet from '../pages/Wallet';
-import Accounts from '../pages/Accounts';
-import Earn from '../pages/Earn';
-import Menu from '../pages/Menu';
-import Send from '../pages/Send';
-import Swap from '../pages/Swap';
-
 export const routes = {};
 
 export function registerRoute(name, Component) {
   routes[name] = Component;
 }
 
-registerRoute('wallet', Wallet);
-registerRoute('accounts', Accounts);
-registerRoute('earn', Earn);
-registerRoute('menu', Menu);
-registerRoute('send', Send);
-registerRoute('swap', Swap);
-
 export default routes;

ui/index.js

@@ -1,13 +1,10 @@
-import React from "react"
-import ReactDOM from "react-dom"
-//import Popup from "@tallyho/tally-ui/pages/Popup"
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Popup from '@tallyho/tally-ui/pages/Popup';
 
 /**
  * Attaches the Tally UI to the specified DOM element.
  */
 export function attachToElement(element) {
-	ReactDOM.render(React.createElement(
-		/* Popup */ () => React.createElement("p", null, "ohai")),
-		element
-	)
+  ReactDOM.render(React.createElement(Popup), element);
 }

ui/package.json

@@ -23,7 +23,7 @@
     "watch": "webpack --mode=development --watch"
   },
   "dependencies": {
-    "@tallyho/tally-wallet": "0.0.1",
+    "@tallyho/tally-api": "0.0.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-chrome-extension-router": "^1.2.0",

ui/pages/Accounts.js

@@ -24,3 +24,5 @@ export default function Accounts() {
     </>
   );
 }
+
+registerRoute('accounts', Accounts);

ui/pages/Earn.js

@@ -24,3 +24,5 @@ export default function Earn() {
     </>
   );
 }
+
+registerRoute('earn', Earn);

ui/pages/Menu.js

@@ -24,3 +24,5 @@ export default function Menu() {
     </>
   );
 }
+
+registerRoute('menu', Menu);

ui/pages/Popup.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Router } from 'react-chrome-extension-router';
+import Wallet from './Wallet';
+
+import Accounts from './Accounts';
+import Earn from './Earn';
+import Menu from './Menu';
+import Send from './Send';
+import Swap from './Swap';
+
+export default function Popup() {
+  return (
+    <Router>
+      <Wallet />
+    </Router>
+  );
+}

ui/pages/Wallet.js

@@ -38,7 +38,6 @@ export default function Wallet() {
             justify-content: space-between;
           }
           .page_content {
-            height: 100vh;
             width: 100vw;
             display: flex;
             flex-direction: column;
@@ -66,3 +65,5 @@ export default function Wallet() {
     </div>
   );
 }
+
+registerRoute('wallet', Wallet);

webpack.config.js

@@ -32,12 +32,11 @@ const baseConfig = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: [
-              '@babel/react',
-            ]
-          }
-        }
-      }
+            plugins: ['styled-jsx/babel'],
+            presets: ['@babel/react'],
+          },
+        },
+      },
     ],
   },
   output: {

yarn.lock

@@ -98,6 +98,13 @@
   dependencies:
     "@babel/types" "^7.13.12"
 
+"@babel/[email protected]":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
+  integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
+  dependencies:
+    "@babel/types" "^7.12.5"
+
 "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
@@ -282,7 +289,16 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.12.13", "@babel/types@^7.13.12", "@babel/types@^7.14.0", "@babel/types@^7.14.2", "@babel/types@^7.14.4":
+"@babel/[email protected]":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
+  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.12.13", "@babel/types@^7.12.5", "@babel/types@^7.13.12", "@babel/types@^7.14.0", "@babel/types@^7.14.2", "@babel/types@^7.14.4":
   version "7.14.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.4.tgz#bfd6980108168593b38b3eb48a24aa026b919bc0"
   integrity sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==
@@ -1446,6 +1462,11 @@ babel-plugin-polyfill-regenerator@^0.2.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
+[email protected]:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -2036,7 +2057,7 @@ continuable-cache@^0.3.1:
   resolved "https://registry.yarnpkg.com/continuable-cache/-/continuable-cache-0.3.1.tgz#bd727a7faed77e71ff3985ac93351a912733ad0f"
   integrity sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=
 
-convert-source-map@^1.7.0:
+convert-source-map@1.7.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -2660,6 +2681,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@@ -4974,6 +5000,15 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
   integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
 
+[email protected]:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -5007,7 +5042,7 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
-lodash@^4.17.14, lodash@^4.17.19, lodash@^4.2.0:
+lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.2.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6939,6 +6974,11 @@ source-map-support@~0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+[email protected], source-map@~0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -6949,11 +6989,6 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@~0.7.2:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -7007,6 +7042,11 @@ ssri@^8.0.0, ssri@^8.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
+[email protected]:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
+
 string-template@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
@@ -7125,6 +7165,31 @@ [email protected]:
   dependencies:
     is-hex-prefixed "1.0.0"
 
+styled-jsx@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.4.4.tgz#d5012cac2ed22be0b72e28932f3eece8d83b695c"
+  integrity sha512-PkZi/col7R4cpwSPY2n4JjpcTYfBgaWg/1mt0+1E/pmkXL+Pik5Kr/snYMWj90+N3kDw+BqfnJOogdRw4621GQ==
+  dependencies:
+    "@babel/helper-module-imports" "7.12.5"
+    "@babel/types" "7.8.3"
+    babel-plugin-syntax-jsx "6.18.0"
+    convert-source-map "1.7.0"
+    loader-utils "1.2.3"
+    source-map "0.7.3"
+    string-hash "1.1.3"
+    stylis "3.5.4"
+    stylis-rule-sheet "0.0.10"
+
+[email protected]:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+[email protected]:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 superagent-proxy@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/superagent-proxy/-/superagent-proxy-2.1.0.tgz#34e91f9024fbace95f0a35c50c69edf2a0d331e2"