[CLAIM] Pending claim UI

[W3stside]

Summary

Part 1: pending UI for claiming. Users whom submit a claim and while pending should receive feedback in the claiming window of any ongoing claims. Only really applicable should a user hit "back" while claiming and/or refresh

Screenshots

Pending view for users whom make it back to the /claim page while claim on-going:

Where to get addresses to use to show claim flow and where to find claim indices to use in mock fn:

Example of how to trigger mock transactions in console:

To Test

1. click vCow and head to claim page
2. Click "change account" and paste: 0x00059034c8759f5C89af6792Eb3cFa2CCd12f6f3 (found here: https://github.com/gnosis/cow-merkle-drop/blob/main/rinkeby/chunks/0x00059034c8759f5C89af6792Eb3cFa2CCd12f6f3.json)
   2a. ☝️ can also be any account with claims, just paste the account into cowswap AND also remember one or several of the claiming index(ices) for later
3. Click "Check claimable vCOW"
4. open console
5. use addMockClaimTransactions([<INDEX/INDICES_FROM_STEP_2a>]) to add claiming txs to activity log
   5a. e.g: addMockClaimTransactions([0, 1, 2, 3, 4, 5]) // assuming the chunks addressed is pulled from has those indices
6. UI on the "vCOW claim breakdown" screen should highlight in purple the currently claiming rows and show a spinner
7. Activity log should show a transaction of claiming
8. To reset activity state, clear applications > localstorage

TODO

• Open activity orders panel on claim row click
• Subpoint to above: globalise orders panel open state? (need context to pass down to nested components)
• Style review (just free styled here)

[github-actions]

• 🔭 GP Swap: Gnosis Protocol v2 Swap UI

[alfetopito]

Minor comments

[nenadV91]

Assuming every claim has data, we could write this like

export function useAllClaimingTransactionIndices() {
  const claimingTransactions = useAllClaimingTransactions()
  return useMemo(() => new Set(claimingTransactions.flatMap(({ data }) => data)), [claimingTransactions])
}

[nenadV91]

LGTMI, only thing is as we discussed we should also include pending claims into unclaimed amount calculation at some point.