⚡[FEAT] Implement more atoms and better state mgmt

[whoabuddy]

Is your feature request related to a problem? Please describe.

Atoms can preserve state across components, and some information is fetched more often than it needs to be, e.g. getUserId is used twice here:

https://github.com/citycoins/citycoin-ui/blob/main/src/components/activation/RegisterUser.js#L69
https://github.com/citycoins/citycoin-ui/blob/main/src/components/stacking/ClaimStackingRewards.js#L39

Describe the solution you'd like

For lookups that happen across components, they should use the same atom so the data persists across pages.

We should limit the fetches based on the current block height using logic similar to this as well:

• if atom is uninitialized, then fetch new data
• if current block height is greater, then fetch new data
• if current block height is the same as last seen, use current data

One possible approach is making atoms into objects with a consistent structure, one idea:

atom({
  loaded: false, // for initial data load
  lastUpdate: 0, // for last block height updated
  data: '', 0, [], {} // whatever data the atom holds
})

Describe alternatives you've considered

The way things are now there are a lot of queries going on when each page loads which doesn't scale well, open to other ideas as well. LocalStorage? Gaia?

Additional context

One thing to note - city data is a bit trickier because the city pages pass down the props to each component for a city so the components can be generic. This makes it harder to know where to load city-specific data that's fetched, and the solution should be scalable to 100, 200, and so on.

[whoabuddy]

Fixed in #130