Add a single user state for status across all components

I need a single state that can be updated from children or the parent in order to display certain media or dialogue text.

States

App.js user.loggedIn == null
App.js user.loggedIn == true && coincollectioncheck == false
App.js user.loggedIn == true && coincollectioncheck == true
App.js user.loggedIn ==true && balance < 1
CoinStore.js purchase(); txStatus = 1, need user to approve
CoinStore.js purchase(); txStatus = 4, user has new coin
CoinCollection.js play(); txStatus = 1, need user to approve
CoinCollection.js play(); txStatus = 4, coin has been tossed into the air
CoinCollection.js item.blockEventData.id && item.blockEventData.kind == null, coin has landed into the waters
CoinCollection.js item.blockEventData.coinresult != null, coin has a result

Abstracted Header from App.js. The states of balance and user and checkcollection are shared between both.

Abstracted LiveResults from CoinCollection.
Still need to be able to read the states from App.js though.

1,2,3,4 already exist in App.js

5,6 for CoinStore completed.
7,8 for CoinCollection completed.

Added txType.
txType for Flipping = 1
txType for Buying = 2

Added navigation between waterfall, store and results

Navigation Menu