Persist local statuses

[iamacook]

What it solves

Resolves #3194

How this PR fixes it

Local statuses are now persisted in the sessionStorage by means of a middleware. The Redux store is initialised by said sessionStorage key.

How to test it

1. Create a transaction that immediately executes/execute a queued transaction.
2. Refresh the page and observe that the status is still pending.

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	1	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[coveralls]

Pull Request Test Coverage Report for Build 1615773475

• 11 of 31 (35.48%) changed or added relevant lines in 7 files are covered.
• 59 unchanged lines in 6 files lost coverage.
• Overall coverage increased (+0.06%) to 32.253%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/AppLayout/Sidebar/DebugToggle/index.tsx	0	1	0.0%
src/logic/safe/hooks/useOwnerSafes.ts	0	1	0.0%
src/utils/storage/useCachedState.ts	0	1	0.0%
src/logic/safe/store/middleware/notificationsMiddleware.ts	0	3	0.0%
src/logic/safe/store/middleware/localTransactionsMiddleware.ts	8	12	66.67%
src/logic/safe/store/selectors/txStatus.ts	2	12	16.67%

Files with Coverage Reduction	New Missed Lines	%
src/components/AppLayout/Header/components/Layout.tsx	2	0%
src/routes/routes.ts	2	93.62%
src/routes/safe/container/index.tsx	5	0%
src/routes/safe/components/Transactions/TxList/hooks/useQueueTransactions.ts	8	55.26%
src/logic/safe/store/reducer/gatewayTransactions.ts	17	2.04%
src/routes/safe/components/Transactions/TxList/TxSingularDetails.tsx	25	1.79%

Totals
Change from base Build 1610904042:	0.06%
Covered Lines:	3093
Relevant Lines:	8523

---

💛 - Coveralls

[github-actions]

Deployment links

🟠 Safe Rinkeby	⚪ Safe Mainnet	🟣 Safe Polygon	🟡 Safe BSC	⚫ Safe Arbitrum	🟢 Safe xDai

[DiogoSoaress]

👌

[github-actions]

E2E Tests Passed ✅
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1615801355

[katspaugh]

Thanks!

[francovenica]

Question/Issue:

Is this pending status being persistent only something for the deep-link view? Is working fine for the deep-link view since refreshing the page keeps showing the pending status, but if you refresh the page while being in queue tab the status goes back to "Needs execution" until you open the tx details

Steps:
In a 1 ouf x safe, create a tx but do no execute it (uncheck the Execute checkbox)
See the tx in the queue tab
Now execute it, the pending status will show
Reload the page

The result is that the pending status is lost until you open the tx details:

[katspaugh]

No, it was supposed to be for the queued txns as well. I'll check.

[katspaugh]

@francovenica should be good now. ✅

[katspaugh]

Tested, works now ✅

[katspaugh]

One other small bug I noticed though: the sessionStorage (unlike localStorage) somehow isn't shared across tabs in the same browser.
Apparently, it's a known "feature". And there's a workaround: https://stackoverflow.com/a/32766809/352796
IMHO not critical but we can discuss it. cc @iamacook

Gonna go ahead and merge this for now.

[iamacook]

And there's a workaround

I think using BroadcastChannel here is much cleaner. What do you think? @katspaugh

[katspaugh]

Or we use just localStorage and clear it either on status update or on expiry (I would vote for the latter as it will open up other possibilities).

[iamacook]

Both sound like reasonable approaches. Can you make an issue to address this in the new year?

[katspaugh]

Thinking about it further, in our current solution saving the data with an expiration date won't work because we save all the status in one key. It will refresh every time a new tx is made.
I'll make a ticket.
Update: #3223