Feat: visually group transactions executed in bulk in the transaction history #3772

jmealy · 2024-05-30T07:33:51Z

What it solves

Resolves #3443

How this PR fixes it

Transactions with the same transaction hash are displayed in a group, similar to conflicting transactions in the queue.

How to test it

Queue multiple transactions and then execute them in bulk.
After execution these transactions should be grouped together
If the transactions are sending tokens to another safe, the receive transactions should also be grouped.

Screenshots

Checklist

I've tested the branch on mobile 📱
I've documented how it affects the analytics (if at all) 📊
I've written a unit/e2e test for it (if applicable) 🧑‍💻

github-actions · 2024-05-30T07:34:06Z

Branch preview

✅ Deploy successful!

Website:
https://feat_bulk_groups--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://feat_bulk_groups--walletweb.review.5afe.dev/storybook/

github-actions · 2024-05-30T07:35:12Z

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	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-05-30T07:39:42Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	79.41% (+0.26% 🔼)	11547/14541
🔴	Branches	58.51% (+0.2% 🔼)	2799/4784
🟡	Functions	66.7% (+0.58% 🔼)	1851/2775
🟢	Lines	80.74% (+0.27% 🔼)	10411/12894

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟡	`...` / index.tsx	58.82%	0%	0%	66.67%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟡	`...` / safeContracts.ts	78.26% (-1.74% 🔻)	50% (-50% 🔻)	60% (+1.67% 🔼)	75%
🔴	`...` / dispatch.ts	38.54% (-0.2% 🔻)	34.48%	26.09%	37.43% (-0.21% 🔻)
🟢	`...` / recovery-state.ts	95.16% (-0.08% 🔻)	86.67% (+2.46% 🔼)	85.71%	96.49% (-0.06% 🔻)
🟡	`...` / index.tsx	73.08% (-21.04% 🔻)	25% (+25% 🔼)	66.67% (-33.33% 🔻)	72.73% (-20.13% 🔻)

Test suite run success

1438 tests passing in 199 suites.

Report generated by 🧪jest coverage report action from f20be5d

github-actions · 2024-05-30T07:47:25Z

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1003.82 KB` (🟡 +78 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Eleven Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/apps`	`46.56 KB` (🟢 -3.56 KB)	1.03 MB
`/apps/custom`	`38.18 KB` (🟢 -3.56 KB)	1.02 MB
`/apps/open`	`48.69 KB` (🟢 -2.85 KB)	1.03 MB
`/home`	`56.57 KB` (🟢 -3.47 KB)	1.04 MB
`/settings/safe-apps`	`22.39 KB` (🟢 -3.56 KB)	1 MB
`/swap`	`26.35 KB` (🟢 -3.56 KB)	1.01 MB
`/transactions`	`74.63 KB` (🟡 +723 B)	1.05 MB
`/transactions/history`	`74.6 KB` (🟡 +724 B)	1.05 MB
`/transactions/messages`	`35.58 KB` (🟡 +725 B)	1.02 MB
`/transactions/queue`	`29.87 KB` (🟡 +721 B)	1.01 MB
`/transactions/tx`	`19.63 KB` (🟡 +736 B)	1023.45 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

src/components/transactions/TxList/index.tsx

github-actions · 2024-06-07T13:11:29Z

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	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

jmealy · 2024-06-07T13:39:04Z

@iamacook gave some feedback that it is confusing to have the txHash displayed in the actions column
@TanyaEfremova what do you think?

TanyaEfremova · 2024-06-07T14:27:13Z

Sure, that does make sense!
How about we show the amount of transactions batched instead, and show a button separately? A couple ideas:

cc @katspaugh could you also provide feedback here please?

katspaugh · 2024-06-07T14:42:40Z

@TanyaEfremova I like this version:

It also has a much bigger clickable are on the explorer link, so it's better overall.

Showing a single transaction hash was an important detail, because that's the confusing part about these transactions. They all have the same tx hash, so the user might be going in circles when debugging transactions. So I would keep the hash where it was but also add this View on explorer button instead of the tiny arrow icon next to the hash.

TanyaEfremova · 2024-06-07T16:16:16Z

Perfect, this exact layout can work well for grouping swap transactions (with limitations) in hitory.

github-actions · 2024-06-10T15:14:02Z

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	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

katspaugh

Nice work!

src/components/transactions/BulkTxListGroup/index.tsx

src/components/transactions/TxList/index.tsx

src/utils/tx-list.ts

github-actions · 2024-06-12T07:47:13Z

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	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

usame-algan

Looks good 👍

github-actions · 2024-06-19T14:14:44Z

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	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

TanyaEfremova · 2024-06-19T15:35:13Z

The last thing, that I just noticed, but minor. The number of transactions displayed in the 2nd column should use label-secondary color style.

jmealy added 8 commits May 28, 2024 11:26

Group transactions in the history by transaction hash

48862a4

remove commented code

124a62f

create component for bulk transaction groups

0339918

layout for bulk group

4bacafa

fix: misalignment of txs on smaller screens

564a8f6

align grouped columns with non grouped columns

8bc4440

fix: column widths on mobile

641b82c

Add unit test, wrap grouping functions

aa7f713

fix: lint errors

5734f47

jmealy added 2 commits May 30, 2024 09:38

fix: untrusted txs warning placement

2ee7961

Merge branch 'dev' into feat/bulk-groups

e92ff7f

jmealy marked this pull request as ready for review May 30, 2024 09:55

jmealy requested review from usame-algan and katspaugh May 30, 2024 09:55

usame-algan requested changes May 31, 2024

View reviewed changes

src/components/transactions/TxList/index.tsx Outdated Show resolved Hide resolved

iamacook mentioned this pull request Jun 5, 2024

Add transaction hash to Transaction entity safe-global/safe-client-gateway#1614

Merged

jmealy mentioned this pull request Jun 6, 2024

Feat: add txHash to Transaction type safe-global/safe-gateway-typescript-sdk#168

Merged

jmealy added 3 commits June 7, 2024 13:57

Use tx hash returned from backend

e25e488

Merge branch 'dev' into feat/bulk-groups

30529b2

lint errors

edce3a3

remove unused function

46c3d5d

Change layout and change explorer link

d997b45

katspaugh reviewed Jun 10, 2024

View reviewed changes

src/components/transactions/BulkTxListGroup/index.tsx Outdated Show resolved Hide resolved

src/components/transactions/TxList/index.tsx Outdated Show resolved Hide resolved

src/utils/tx-list.ts Show resolved Hide resolved

jmealy added 4 commits June 10, 2024 16:49

add unit test for grouping function

109158b

lodash import

3947dea

fix typo

528032e

Merge branch 'dev' into feat/bulk-groups

9bac02b

katspaugh approved these changes Jun 17, 2024

View reviewed changes

katspaugh requested a review from usame-algan June 17, 2024 13:19

usame-algan approved these changes Jun 17, 2024

View reviewed changes

jmealy mentioned this pull request Jun 17, 2024

Feat: display fiat balances for ERC20 tokens in counterfactual safes #3838

Closed

3 tasks

remove orange border from tx group

d371937

jmealy added 2 commits June 19, 2024 16:44

fix: transaction count color

e26aca0

change bulk group title

f20be5d

jmealy merged commit 2ecbdb8 into dev Jun 20, 2024
14 checks passed

jmealy deleted the feat/bulk-groups branch June 20, 2024 13:07

github-actions bot locked and limited conversation to collaborators Jun 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: visually group transactions executed in bulk in the transaction history #3772

Feat: visually group transactions executed in bulk in the transaction history #3772

jmealy commented May 30, 2024

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented Jun 7, 2024 •

edited

Loading

jmealy commented Jun 7, 2024 •

edited

Loading

TanyaEfremova commented Jun 7, 2024

katspaugh commented Jun 7, 2024

TanyaEfremova commented Jun 7, 2024

github-actions bot commented Jun 10, 2024 •

edited

Loading

katspaugh left a comment

github-actions bot commented Jun 12, 2024

usame-algan left a comment

github-actions bot commented Jun 19, 2024 •

edited

Loading

TanyaEfremova commented Jun 19, 2024

Feat: visually group transactions executed in bulk in the transaction history #3772

Feat: visually group transactions executed in bulk in the transaction history #3772

Conversation

jmealy commented May 30, 2024

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

github-actions bot commented May 30, 2024 • edited Loading

Branch preview

github-actions bot commented May 30, 2024 • edited Loading

ESLint Summary View Full Report

github-actions bot commented May 30, 2024 • edited Loading

Coverage report

Test suite run success

github-actions bot commented May 30, 2024 • edited Loading

📦 Next.js Bundle Analysis for safe-wallet-web

⚠️ Global Bundle Size Increased

Eleven Pages Changed Size

github-actions bot commented Jun 7, 2024 • edited Loading

ESLint Summary View Full Report

jmealy commented Jun 7, 2024 • edited Loading

TanyaEfremova commented Jun 7, 2024

katspaugh commented Jun 7, 2024

TanyaEfremova commented Jun 7, 2024

github-actions bot commented Jun 10, 2024 • edited Loading

ESLint Summary View Full Report

katspaugh left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 12, 2024

ESLint Summary View Full Report

usame-algan left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 19, 2024 • edited Loading

ESLint Summary View Full Report

TanyaEfremova commented Jun 19, 2024

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

github-actions bot commented Jun 7, 2024 •

edited

Loading

jmealy commented Jun 7, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 19, 2024 •

edited

Loading