Feat(Bridge UI): a better layout to show claimable claimed cross-chain transactions

[dantaik]

Describe the feature request

The current bridge UI, as many other third-party bridge UIs, are high inspired by Uniswap.

However, there is a big difference between the UX of Uniswap and our Bridge. Each Uniswap user action is atomic -- a swap will either succeed or fail. Users don't need to see previous swap history on Uniswap as there is no actionable interactions for failed or succeeded swaps.

Bridge UX is different, it has two parts, the send-over part (on the source chain) and the claiming part (on the dest chain). For failed claims, users can try (multiple times) claiming if it keeps failing. Therefore being able to see unclaimed/claimable messages is very essential part of the UI, we should not hide these claimable messages in the drop down, we should make it more explicit. My idea is to have two tables/lists: one for the claimable items, one for recent claimed items, as show below:

In the claimed items, we should at least include the URL to the actual claiming transaction. Users will really care about how their funds are received on the destination chain.

Describe alternatives you've considered

Description of the alternatives you've considered here.

Additional context

Additional context here.

[1xDeFi]

What do you think about this UI?

[dantaik]

Looks nice:)Not sure if it is mobile-friendly enough.

[1xDeFi]

For mobile can be something like this:

[shadab-taiko]

Taken care of in #411 with the form and transactions in separate tabs.