Improve Transaction Feed & Transaction Detail (Card View) with contract name (address)

[decentralauren]

Transactions with Safes and similarly named contracts are hard to distinguish and identify, so we want to add a truncated wallet address to the tx feed.

• [x] Consistently truncate addresses within the feed (4 first and 4 last characters) - see here
• [x] Truncate Contract name if over 16 characters with "..." so that the truncated address can display in line.
• [x] On Card View, hyperlink the truncated wallet address to the explorer for that address. - see here (WIP!)

[L03TJ3]

@decentralauren should this be done on all named contracts (including ours, bridge/claim), or just the ones from third parties?

[decentralauren]

@patpedrosa check Lewis' comment above. Do we have other examples of where / how we should apply this?

[decentralauren]

@L03TJ3 this is updated, but the transaction detail card page still being worked on UI. Sana still working on this and will update the Figma @sanajamm

[L03TJ3]

@decentralauren ok! I added the need design, so @SanaJamm whenever you are ready just ping me and/or remove label then I now I can continue on it :)

[SanaJamm]

This is the Figma for both the transaction card and the detailed card view

https://www.figma.com/file/ihw1PxBvLxacTHnN2aj4lC?node-id=10878:56509&mode=design#653885541

please notice the truncation note above the transaction card. *Truncate name after 15 characters

[L03TJ3]

@patpedrosa @vldkhh I am moving this to next sprint, or if priority is needed on it we can push it later as hotfix

[vldkhh]

verified on prod