UI <=> Background - Pass unflattened state from background to UI

Nobody has claimed this yet.

**Epic: Allow the UI to read state from the storage system**
https://github.com/MetaMask/metamask-extension/issues/18054

Currently UI receives flattened background state under `metamask` key, which is causing confusion of where is the state coming from. The first step is to **temporarily** keep the flattened state on the `metamask` key, while also sending the unflattened state next to it so that we can incrementally adopt this and not have to do the entire application in one change.

**Tasks:**

1. Pass unflattened state inside `metamask` key `metamaskState`, which comes from `getFlatState` inside `app/scripts/lib/ComposableObservableStore.js`

2. Adopt gradually in UI to use such unflattened state, for example, to get `unapprovedDecryptMsgCount` from `DecryptMessageManager`

```
// Before:
const unapprovedMsgCountSelector = (state) => state.metamask.unapprovedMsgCount;
// After:
const unapprovedMsgCountSelector = (state) => state.metamask.DecryptMessageManager.unapprovedDecryptMsgCount
```

3. Finally, remove flattened state
4. You can also check fixtures in e2e test and validate the refactor

Start with app/scripts/lib/ComposableObservableStore.js and the getFlatState path described in the issue. Then inspect the DecryptMessageManager state usage in the UI and the e2e fixtures mentioned. Done means the UI can adopt the unflattened state incrementally, validation covers the refactor, and the flattened state can eventually be removed.

Written by the indexing model from the issue text.