Skeleton Single Page Application #18

taggartbg · 2019-07-30T13:52:57Z

This is a very basic SPA skeleton to get started. It mimics the Random Beacon dApps (staker dashboard + emitter/requester) in packages and structure.

Includes:

Very basic component tree and Routing
Some basic styles to get started
Entry points for reducers and sagas
Basic context wrappers and HOCs for web3 and an example of a contract

TODO:

Create sagas to interact with contracts
Create reducers to store results from contracts
~~Add localstorage support?~~ See Add localstorage support to Redux store #26

Closes #5

Implementer: @taggartbg
Feature buddy: @liamzebedee

liamzebedee · 2019-07-30T15:04:01Z

To recap: from the tBTC planning today, we summarised the desired qualities as something like:

ease of use for a newcomer (think hackathon)
speed of setup (think create-react-dapp)
robust engineering (React, state mgmt)
modern defaults (CSS, ES6)

With an obvious tradeoff between 1/2 and 3/4. 😆 let the games begin! 🔥

liamzebedee · 2019-07-30T15:20:40Z

component routing is much better. I didn't go with it because I couldn't get it setup with Next.js and server-side rendering. But I think it's the way to go.
LESS CSS is nice, I think it's useful primarily for naming colours as variables. Inheritance, not so much.
- styled-components might be too sugarery for some still, although I love it (says a diabetic) - no syntax highlighting for the template strings, and putting CSS in files is nice and familiar and we don't want to break away from that
- that being said, we definitely need some form of scoped CSS. It's a mess to code without it.
no hot module reload yet - this is pretty essential for iterative development, found it extremely useful with Next.js.
checking for whether we have unlocked Metamask - definitely missing in Setup dApp skeleton #7
web manifest - missing in Setup dApp skeleton #7, is it useful?

Some questions for @taggartbg :

the global contract context, given to each contract. I like the idea, could you elaborate? My hunch is that async flow should be done in sagas 80% of the time, but it is very useful for tracking transaction status without overhead.
I see you've got withWeb3, withAccount and some other HOC's. Could you give an example? They look super useful

Early reviews :)

taggartbg · 2019-07-30T15:48:38Z

Quick answers (running to an appointment, will update further + review #7 afterwards)

CSS scoping: Yeah, definitely the major downfall of a stylesheet vs inline, but I think component-level class names is usually enough to tackle the majority of naming collisions

Hot reloading: Very good call. I haven't done hot reloading in 2019, but it looks like the tooling has gotten stronger (react-app-rewired and react-hot-loader seem like good tools)

Web Manifest: Create-react-app makes it and I guess its good to have for browsers that want to use it (usually mobile)

Global contract context: Absolutely true, now that I'm thinking about it, it is probably useless, as we'll definitely want sagas controlling that flow. In theory we could connect the action literals to the contract context wrapper and pass them down that way, but I don't see that being stronger than using module imports + connecting where needed.

Web3 Context: I threw an example in App.js grabbing the balance from Context. I imagine it'd be useful for accessing the connected web3 instance, getting the balance to do client-side checks of funds, reacting to changes in account / network, grabbing a list of ERC20 tokens in MetaMask, etc.

pdyraga · 2019-07-31T05:52:35Z

Let's undraft this PR and work on merging it today. All the items from TODO list should be implemented in subsequent PRs.

@taggartbg Before we do anything else, you need to set up commit signing and rebase this branch to sign all the commits.

pdyraga · 2019-07-31T06:03:29Z

Assigned @liamzebedee as feature buddy.

Shadowfiend · 2019-07-31T09:01:05Z

Commits are signed, just attributed to an email that needs to be added to @taggartbg’s GitHub profile.

- Add initial packages for building styles and running React

taggartbg · 2019-07-31T21:23:37Z

I used the saga + reducer workflow from PR #7 and adapted for it to here as @liamzebedee had already completed that work. This should be ready to be merged + built on.

liamzebedee

Doesn't seem to work on Metamask when on Ropsten testnet?

Homepage layout is wrong

package.json

liamzebedee · 2019-08-01T12:46:30Z

src/index.js

+        <Web3Wrapper>
+          <Route path="/" exact component={Home} />
+          <App>
+            <Route path="/start" component={Start} />


I like the names - pay, confirm, prove -- really simple to get

liamzebedee · 2019-08-01T12:58:26Z

src/actions/index.js

+
+export function submitProof({ history }) {
+    return {
+        history,


Let's not pass around the history object in actions. I'm sure there's a redux helper pkg here somewhere? (since React Router is ubiquitous)

🙏

Yeah, I definitely hear you.

A couple immediate thoughts:

pass the history to a custom middleware that injects it into sagas when initializing (also pass to <Router>)

Create a singleton module and import both when creating routes and whenever a saga is called

I'll also google around, let me know if either of those sound better or worse to you!

Middleware is an interesting idea! I think it's probably best to stick away from the Not Invented Here -style solutions, because routing+redux is such a common combo, it's bound to have been solved.

How does https://github.com/supasate/connected-react-router look to you?

liamzebedee · 2019-08-01T13:00:14Z

src/wrappers/web3.js

+class Web3Wrapper extends Component {
+    state = {}
+
+    componentDidMount() {


Nice pattern, TIL!

public/index.html

liamzebedee · 2019-08-01T13:05:13Z

package.json

+  "subPackages": [
+      "client",
+      "lib/tbtc-helpers"
+  ],


trailing ,

Unresolving because it wasn't removed and it's the reason why npm install is failing on my machine:

➜ tbtc-dapp git:(skeleton) ✗ npm install npm ERR! file /Users/piotr/go/src/github.com/keep-network/tbtc-dapp/package.json npm ERR! code EJSONPARSE npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected token } in JSON at position 1365 while parsing near '.../tbtc-helpers" npm ERR! JSON.parse ], npm ERR! JSON.parse } npm ERR! JSON.parse ' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in: npm ERR! /Users/piotr/.npm/_logs/2019-08-02T08_46_19_368Z-debug.log

@taggartbg did you resolve this perhaps?

(it's possible this was an accidental button mash from me, due to my stupid Mac keyboard)

taggartbg · 2019-08-01T14:41:22Z

RE: Ropsten - I meant to subscribe to network changes, oops! Will add now

pdyraga · 2019-08-02T08:30:54Z

src/wrappers/web3.js

    }

    getAccountInfo = async () => {
+        console.log("CHANGE!")


Was it intentionally committed?

pdyraga · 2019-08-02T08:52:01Z

Does not seem to be working:

^ I was already logged in to metamask when opening the page. If I log out, open the app and log in again I am running into the same problem.

Also, does not seem to work when I switch the network:

Not sure if this is related but the web3 version returned by browsers is 0.2x.x while the package.json says I should be at ^1.2.0

web3.version
{api: "0.20.7", getNode: ƒ, getNetwork: ƒ, …}

pdyraga · 2019-08-02T08:46:35Z

package.json

+  "subPackages": [
+      "client",
+      "lib/tbtc-helpers"
+  ],


Unresolving because it wasn't removed and it's the reason why npm install is failing on my machine:

➜ tbtc-dapp git:(skeleton) ✗ npm install npm ERR! file /Users/piotr/go/src/github.com/keep-network/tbtc-dapp/package.json npm ERR! code EJSONPARSE npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected token } in JSON at position 1365 while parsing near '.../tbtc-helpers" npm ERR! JSON.parse ], npm ERR! JSON.parse } npm ERR! JSON.parse ' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in: npm ERR! /Users/piotr/.npm/_logs/2019-08-02T08_46_19_368Z-debug.log

Shadowfiend · 2019-08-02T13:10:40Z

Add localstorage support?

Probably a good idea to move this to a separate/future issue, as it won't be necessary for the demo, right?

mhluongo · 2019-08-02T13:16:44Z

Created an issue for localStorage.

liamzebedee · 2019-08-02T15:10:48Z

@pdyraga seems to be working for me when loading when already logged in, tested on Ropsten/Kovan. Ran web3.version in console and got:

web3.version
{api: "0.20.7", getNode: ƒ, getNetwork: ƒ, …}

However when Metamask is not logged in, and then I log in, it does not respond to the change.

- Remove trailing comma - Add sleep to avoid race condition between CRA and less compiler

taggartbg · 2019-08-02T15:27:47Z

Removed trailing comma from package.json (rebase snafoo)
Added a sleep to npm's start-js task, I was running into a race condition between CRA and the less compiler: Development page blank on first load facebook/create-react-app#5809
Tried switching networks and logging in - its working fine for me. Make sure you have the latest MetaMask @pdyraga , if you run window.ethereum you should get an object back

pdyraga · 2019-08-02T16:25:20Z

I have 6.7.3 Metamask version.

I was logged in when opened the application and saw the screen below. Then tried to log out and log in again and I had the same problem. Switching network does not help.

liamzebedee

Code seems fine, history works. But the page still doesn't refresh automatically after you unlock Metamask.

From what I can gather from MakerDAO's dapp, the only way you can detect the change is to poll the window.xyz. Also found an answer here which should prove useful https://ethereum.stackexchange.com/questions/43572/how-to-auto-reload-dapp-when-metamask-is-unlocked-or-locked-by-user

pdyraga

I do not want to block merging. If it works for you both we can go ahead and debug the problem later. Just need to make sure at least one other person checks it later.

pdyraga · 2019-08-02T17:33:07Z

But the page still doesn't refresh automatically after you unlock Metamask.

If it is some more time-consuming work, we may want to do it in a separate PR fwiw.

Shadowfiend · 2019-08-02T18:51:51Z

src/index.js

+          <Route path="/" exact component={Home} />
+          <App>
+            <Route path="/start" component={Start} />
+            <Route path="/pay" exact component={Pay} />


This feels like it could be “deposit”?

taggartbg · 2019-08-02T19:05:55Z

@liamzebedee If you have the window.ethereum object, you SHOULD be able to subscribe to account / network change events. On v6.7.3 it works for me, not sure why its not working for you two.

We could make a new Issue, but it seems like two issue:

one that its not detecting @pdyraga 's web3 provider at all
Its not responding to change events or MM isn't firing them

Seems worth fixing ASAP

Shadowfiend · 2019-08-02T19:08:37Z

I think it probably makes sense to circle back to the Metamask issues next week. Basic reasoning: if we can't get Metamask working, we can mock out the calls to it and have a good demo. If, on the other hand, we fall short on the app flow/design, having Metamask working doesn't get us much from the demo's perspective.

pdyraga · 2019-08-02T19:29:40Z

I think it probably makes sense to circle back to the Metamask issues next week. Basic reasoning: if we can't get Metamask working, we can mock out the calls to it and have a good demo. If, on the other hand, we fall short on the app flow/design, having Metamask working doesn't get us much from the demo's perspective.

Yeah, I was thinking about contingency plan today and absolutely agree. We can also show the process from UI with mocks and then "hey, see how it works under the hood" and show (even a video) of how we do it with 4 consoles and clients using demo scripts we already have working. Worth discussing elsewhere but there is an alternative so we are safe.

taggartbg requested review from liamzebedee and pdyraga July 30, 2019 13:55

Shadowfiend mentioned this pull request Jul 30, 2019

DApp Skeleton #5

Closed

This was referenced Jul 31, 2019

Setup dApp skeleton #7

Closed

Web3 integration #11

Closed

pdyraga assigned liamzebedee Jul 31, 2019

taggartbg force-pushed the skeleton branch from 6fcd2c1 to 69a13e7 Compare July 31, 2019 12:50

taggartbg added 8 commits July 31, 2019 17:18

Add initial packages

85139cd

- Add initial packages for building styles and running React

Redux boilerplate

e42f271

Add gititgnore

ebead50

Routes in place

50b65f4

Add web3 wrapper

30176e1

Basic example of a contract wrapper

e60c9f2

Add some basic styles

7c22d97

Introduce saga/reducer workflow

eaf1552

taggartbg force-pushed the skeleton branch from c9a73e9 to eaf1552 Compare July 31, 2019 21:18

taggartbg marked this pull request as ready for review July 31, 2019 21:20

Merge branch 'master' into skeleton

62f9638

liamzebedee suggested changes Aug 1, 2019

View reviewed changes

Taggart Bowen-Gaddy added 3 commits August 2, 2019 01:49

Move 'history' to its own module

3939a0e

Template and config name updates

f04ab75

Fetch MM Account info on network or account change

0816958

pdyraga reviewed Aug 2, 2019

View reviewed changes

src/wrappers/web3.js Outdated

}

getAccountInfo = async () => {

console.log("CHANGE!")

Copy link

Member

pdyraga Aug 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was it intentionally committed?

pdyraga suggested changes Aug 2, 2019

View reviewed changes

This was referenced Aug 2, 2019

Make a deposit (contract code) #24

Merged

Fetch deposit BTC address (contract code) #25

Merged

mhluongo mentioned this pull request Aug 2, 2019

Add localstorage support to Redux store #26

Open

Update package.json

8b44b63

- Remove trailing comma - Add sleep to avoid race condition between CRA and less compiler

Remove console.log

94f61d4

liamzebedee suggested changes Aug 2, 2019

View reviewed changes

pdyraga reviewed Aug 2, 2019

View reviewed changes

pdyraga approved these changes Aug 2, 2019

View reviewed changes

liamzebedee approved these changes Aug 2, 2019

View reviewed changes

Shadowfiend reviewed Aug 2, 2019

View reviewed changes

pdyraga merged commit d55f59b into master Aug 2, 2019

pdyraga deleted the skeleton branch August 2, 2019 19:05

pdyraga assigned taggartbg Aug 4, 2019

liamzebedee restored the skeleton branch August 5, 2019 09:18

taggartbg deleted the skeleton branch November 13, 2019 20:42

sthompson22 unassigned taggartbg Dec 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Skeleton Single Page Application #18

Skeleton Single Page Application #18

taggartbg commented Jul 30, 2019 •

edited by mhluongo

Loading

liamzebedee commented Jul 30, 2019 •

edited

Loading

liamzebedee commented Jul 30, 2019

taggartbg commented Jul 30, 2019 •

edited

Loading

pdyraga commented Jul 31, 2019

pdyraga commented Jul 31, 2019

Shadowfiend commented Jul 31, 2019

taggartbg commented Jul 31, 2019

liamzebedee left a comment

liamzebedee Aug 1, 2019

liamzebedee Aug 1, 2019

taggartbg Aug 1, 2019 •

edited

Loading

liamzebedee Aug 1, 2019

liamzebedee Aug 1, 2019

liamzebedee Aug 1, 2019

pdyraga Aug 2, 2019

liamzebedee Aug 2, 2019

taggartbg commented Aug 1, 2019

pdyraga Aug 2, 2019

pdyraga commented Aug 2, 2019 •

edited

Loading

pdyraga Aug 2, 2019

Shadowfiend commented Aug 2, 2019

mhluongo commented Aug 2, 2019

liamzebedee commented Aug 2, 2019

taggartbg commented Aug 2, 2019

pdyraga commented Aug 2, 2019 •

edited

Loading

liamzebedee left a comment

pdyraga left a comment

pdyraga commented Aug 2, 2019

Shadowfiend Aug 2, 2019

taggartbg commented Aug 2, 2019

Shadowfiend commented Aug 2, 2019

pdyraga commented Aug 2, 2019

Skeleton Single Page Application #18

Skeleton Single Page Application #18

Conversation

taggartbg commented Jul 30, 2019 • edited by mhluongo Loading

liamzebedee commented Jul 30, 2019 • edited Loading

liamzebedee commented Jul 30, 2019

taggartbg commented Jul 30, 2019 • edited Loading

pdyraga commented Jul 31, 2019

pdyraga commented Jul 31, 2019

Shadowfiend commented Jul 31, 2019

taggartbg commented Jul 31, 2019

liamzebedee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taggartbg Aug 1, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taggartbg commented Aug 1, 2019

Choose a reason for hiding this comment

pdyraga commented Aug 2, 2019 • edited Loading

Choose a reason for hiding this comment

Shadowfiend commented Aug 2, 2019

mhluongo commented Aug 2, 2019

liamzebedee commented Aug 2, 2019

taggartbg commented Aug 2, 2019

pdyraga commented Aug 2, 2019 • edited Loading

liamzebedee left a comment

Choose a reason for hiding this comment

pdyraga left a comment

Choose a reason for hiding this comment

pdyraga commented Aug 2, 2019

Choose a reason for hiding this comment

taggartbg commented Aug 2, 2019

Shadowfiend commented Aug 2, 2019

pdyraga commented Aug 2, 2019

taggartbg commented Jul 30, 2019 •

edited by mhluongo

Loading

liamzebedee commented Jul 30, 2019 •

edited

Loading

taggartbg commented Jul 30, 2019 •

edited

Loading

taggartbg Aug 1, 2019 •

edited

Loading

pdyraga commented Aug 2, 2019 •

edited

Loading

pdyraga commented Aug 2, 2019 •

edited

Loading