feat: Mass payouts #5042

tmjssz · 2025-02-19T17:34:16Z

What it solves

Enhances the token transfer functionality by introducing support for multiple recipients.

How this PR fixes it

Users can now add up to 5 recipients per transaction, each with different tokens and amounts.
This functionality is currently limited to standard transactions - spending limits remain restricted to a single recipient.

Targeted rollout

The feature is behind the TARGETED_MASS_PAYOUTS feature flag and will only be available for specific Safe addresses (outreachId = 4).

UI & validation improvements

Enhanced validation logic to support multi-recipient transfers and improved UI feedback for validation errors.
Updated recipient management with an “+ Add Recipient” button and a dynamic counter.
New alerts for user guidance:
- Info alert with a link to the CSV Airdrop app when multiple recipients are added (if active on the network).
- Warning alert when the max limit 5 five recipients is reached.
- Error alert when the total token amount exceeds the available balance.

Code changes

Transaction flow updates (CreateTokenTransfer.tsx)
- Implemented multi-recipient support with updated validation and UI.
- Added CSV airdrop modal when recipient limit is reached.
Token input validation (TokenAmountInput/index.tsx)
- Improved validation logic for multi-recipient support.
- Updated UI to handle and display validation errors correctly.
Minor fixes
- Updated useRemoteSafeApps usage to include a tag parameter in BuyCryptoButton/index.tsx.

How to test it

Ensure your Safe is targeted for the feature (see Notion page). The feature must be enabled and Safe address targeted for outreachId = 4.
Open the “Send Tokens” flow.
Verify that the “+ Add Recipient” button appears and increments the counter correctly.
If CSV Airdrop is enabled for the network: Check that the info alert with a link to the app appears when adding at least one additional recipient.
Verify that adding the limit of five recipients triggers a warning alert.
Ensure that when the total transfer amount exceeds the balance of a token, an error alert and field validation errors appear.

Screenshots

mass-payouts.mp4

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) 🧑‍💻

…ve to a tag

… transfer flows

…ient details in token transfer

…ent token transfers

Only allow multiple recipients if Safe is targeted and `TARGETED_MASS_PAYOUTS` feature is active

…ed network

…edAmount

github-actions · 2025-02-19T17:34:39Z

Branch preview

✅ Deploy successful!

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

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

github-actions · 2025-02-19T17:42:00Z

📦 Next.js Bundle Analysis for @safe-global/web

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

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1.07 MB` (🟡 +84.15 KB)

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!

Thirty-five Pages Changed Size

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

Page	Size (compressed)	First Load
`/`	`509 B` (🟢 -1 B)	1.07 MB
`/address-book`	`23.22 KB` (🟡 +155 B)	1.09 MB
`/apps`	`35.75 KB` (🟡 +2.03 KB)	1.11 MB
`/apps/custom`	`33.82 KB` (🟡 +2.03 KB)	1.1 MB
`/apps/open`	`55.36 KB` (🟡 +1.75 KB)	1.13 MB
`/balances`	`29.73 KB` (🟡 +25 B)	1.1 MB
`/balances/nfts`	`9.32 KB` (🟢 -231 B)	1.08 MB
`/bridge`	`2.55 KB` (🟢 -3 B)	1.07 MB
`/cookie`	`8.77 KB` (🟡 +1 B)	1.08 MB
`/home`	`61.35 KB` (🟡 +2.09 KB)	1.13 MB
`/licenses`	`2.46 KB` (🟢 -1 B)	1.07 MB
`/new-safe/advanced-create`	`26.38 KB` (🟢 -77 B)	1.1 MB
`/new-safe/create`	`25.52 KB` (🟢 -70 B)	1.1 MB
`/privacy`	`14.57 KB` (🟡 +2 B)	1.09 MB
`/settings/appearance`	`2.25 KB` (🟡 +1 B)	1.07 MB
`/settings/cookies`	`1.87 KB` (🟡 +1 B)	1.07 MB
`/settings/data`	`1.79 KB` (🟢 -1 B)	1.07 MB
`/settings/environment-variables`	`3.28 KB` (🟡 +1 B)	1.07 MB
`/settings/modules`	`2.88 KB` (🟢 -1.18 KB)	1.07 MB
`/settings/notifications`	`7.49 KB` (🟢 -13.82 KB)	1.08 MB
`/settings/safe-apps`	`20.15 KB` (🟡 +1.87 KB)	1.09 MB
`/settings/security`	`2.34 KB` (🟡 +2 B)	1.07 MB
`/settings/setup`	`30.98 KB` (🟡 +256 B)	1.1 MB
`/share/safe-app`	`7.55 KB` (🟢 -9 B)	1.08 MB
`/stake`	`617 B` (🟢 -2 B)	1.07 MB
`/swap`	`763 B` (🟡 +3 B)	1.07 MB
`/terms`	`12.93 KB` (🟡 +1 B)	1.08 MB
`/transactions`	`99.46 KB` (🟡 +2.88 KB)	1.17 MB
`/transactions/history`	`99.42 KB` (🟡 +2.88 KB)	1.17 MB
`/transactions/messages`	`60.25 KB` (🟡 +1.95 KB)	1.13 MB
`/transactions/msg`	`56.5 KB` (🟡 +1.95 KB)	1.13 MB
`/transactions/queue`	`49.36 KB` (🟡 +1.96 KB)	1.12 MB
`/transactions/tx`	`48.72 KB` (🟡 +1.96 KB)	1.12 MB
`/welcome`	`6.93 KB` (🟢 -2 B)	1.08 MB
`/welcome/accounts`	`408 B` (🟡 +1 B)	1.07 MB

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.

github-actions · 2025-02-19T17:42:36Z

Coverage report for `apps/web`

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	77.26% (-0.06% 🔻)	14312/18524
🔴	Branches	55.98% (-0.16% 🔻)	3581/6397
🟡	Functions	62.07% (-0.21% 🔻)	2134/3438
🟡	Lines	78.74% (-0.05% 🔻)	12929/16420

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / index.tsx	92%	57.14%	80%	95.65%
🟢	`...` / index.tsx	80%	0%	0%	88.89%
🟡	`...` / ReviewRecipientRow.tsx	56.25%	0%	0%	64.29%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / useRemoteSafeApps.ts	86.84% (-4.07% 🔻)	57.14% (-9.52% 🔻)	83.33% (-7.58% 🔻)	90.63% (-2.23% 🔻)
🟡	`...` / index.tsx	75%	33.33% (-16.67% 🔻)	20% (-5% 🔻)	75% (-1.47% 🔻)
🟢	`...` / CreateTokenTransfer.tsx	80% (-17.62% 🔻)	50% (-26.19% 🔻)	50% (-50% 🔻)	80.65% (-19.35% 🔻)
🟡	`...` / index.tsx	62.22% (-13.78% 🔻)	40.91% (-12.42% 🔻)	42.86% (+2.86% 🔼)	64.29% (-13.98% 🔻)
🔴	`...` / ReviewTokenTransfer.tsx	42.31% (-1.69% 🔻)	0%	0%	47.83% (-2.17% 🔻)

Test suite run success

1839 tests passing in 251 suites.

Report generated by 🧪jest coverage report action from 4c28a60

apps/web/src/components/common/TokenAmountInput/index.tsx

apps/web/src/components/tx-flow/flows/TokenTransfer/RecipientRow/index.tsx

iamacook · 2025-02-20T08:32:44Z

apps/web/src/components/common/TokenAmountInput/index.tsx


 export enum TokenAmountFields {
  tokenAddress = 'tokenAddress',
  amount = 'amount',
 }

+export const InsufficientFundsValidationError = 'Insufficient funds'


Nit: whilst this works, RHF errors have a type that seems more suitable for referencing. What do you think?

Not sure I understand how you would change it. Do you mean the FieldError type? How would you use it?
This string is basically just used as a return value for the validateLimitedAmount function and then to check whether any such error exists in the form to conditionally render the error alert below it. Happy to refactor but just not sure how :)

We can keep the constant as it's used in all places but, yes, FieldError['type'] is more explicit. I'm not sure on the feasibility so I'll leave it up to your discretion.

apps/web/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx

apps/web/src/components/tx-flow/flows/TokenTransfer/RecipientRow/index.tsx

apps/web/src/components/tx-flow/flows/TokenTransfer/ReviewRecipientRow.tsx

apps/web/src/components/tx-flow/flows/TokenTransfer/ReviewTokenTransfer.tsx

apps/web/src/components/common/TokenAmountInput/index.tsx

…s function call

Also add various other small improvements

…array structure

iamacook · 2025-02-21T15:52:11Z

apps/web/src/components/common/TokenAmountInput/index.tsx

+      }
+
+      // Validate the total amount of the selected token in the multi transfer
+      const recipients = getValues(MultiTokenTransferFields.recipients) as MultiTokenTransferParams['recipients']


Nit: if you pass the form type as a generic to useFormContext, I think you might get the inferred types.

Done. I had to add a separate useFormContext<MultiTokenTransferParams>() hook call with the passed generic type because the TokenAmountInput component is also used in CreateSpendingLimit where the form type is different (no field array). To keep the component working for both usages, the form type can not be specified for the other RFH functions.

…ormContext to preserve type of recipients values

katspaugh · 2025-02-24T16:01:51Z

apps/web/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx

+                    startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
+                    size="large"
+                  >
+                    Add Recipient


Suggested change

Add Recipient

Add recipient

Here and everywhere else: please don't use Cap Case in the UI.

@IvaLukan please update the designs accordingly. Thanks!

tmjssz added 8 commits February 18, 2025 16:23

refactor: update useRemoteSafeApps to accept an app name as alternati…

d69d1a1

…ve to a tag

feat(TokenTransfer): refactor to support multiple recipients in token…

281584a

… transfer flows

feat(TokenTransfer): implement ReviewRecipientRow component for recip…

de7bbf6

…ient details in token transfer

feat(TokenTransfer): enhance validation and handling for multi-recipi…

734002f

…ent token transfers

fix: linter issues

278c452

feat: targeted rollout for mass payouts

3272cab

Only allow multiple recipients if Safe is targeted and `TARGETED_MASS_PAYOUTS` feature is active

fix: show link to CSV Airdrop app only if it is active for the select…

4a0830b

…ed network

test(validation): add test for custom error messages in validateLimit…

089f160

…edAmount

tmjssz requested review from katspaugh and iamacook February 19, 2025 17:40

iamacook reviewed Feb 20, 2025

View reviewed changes

tmjssz added 7 commits February 20, 2025 14:46

fix(TokenAmountInput): safely call onChangeAmount with optional chaining

40f1f09

fix(CreateTokenTransfer): improve error message for insufficient balance

eeec1c0

fix(TokenTransfer): replace direct address comparison with sameAddres…

cdb5f40

…s function call

fix(TokenAmountInput): reset field with default value from form state

ce65d72

refactor: change groupName prop to fieldArray

30a801e

Also add various other small improvements

fix(ReviewRecipientRow): use sameAddress function for address comparison

6ebc2d9

fix(CreateTransactionPage): update recipient input selectors for new …

63e46ea

…array structure

iamacook approved these changes Feb 21, 2025

View reviewed changes

fix(TokenAmountInput): destructure getValues from separate typed useF…

4e04c2b

…ormContext to preserve type of recipients values

katspaugh reviewed Feb 24, 2025

View reviewed changes

fix: update button text to use lowercase for consistency

4c28a60

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Mass payouts #5042

feat: Mass payouts #5042

tmjssz commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

iamacook Feb 20, 2025

tmjssz Feb 21, 2025 •

edited

Loading

iamacook Feb 21, 2025

iamacook Feb 21, 2025

tmjssz Feb 24, 2025

katspaugh Feb 24, 2025

tmjssz Feb 24, 2025

feat: Mass payouts #5042

Are you sure you want to change the base?

feat: Mass payouts #5042

Conversation

tmjssz commented Feb 19, 2025 • edited Loading

What it solves

How this PR fixes it

Targeted rollout

UI & validation improvements

Code changes

How to test it

Screenshots

Checklist

github-actions bot commented Feb 19, 2025 • edited Loading

Branch preview

github-actions bot commented Feb 19, 2025 • edited Loading

📦 Next.js Bundle Analysis for @safe-global/web

⚠️ Global Bundle Size Increased

Thirty-five Pages Changed Size

github-actions bot commented Feb 19, 2025 • edited Loading

Coverage report for apps/web

Test suite run success

iamacook Feb 20, 2025

Choose a reason for hiding this comment

tmjssz Feb 21, 2025 • edited Loading

Choose a reason for hiding this comment

iamacook Feb 21, 2025

Choose a reason for hiding this comment

iamacook Feb 21, 2025

Choose a reason for hiding this comment

tmjssz Feb 24, 2025

Choose a reason for hiding this comment

katspaugh Feb 24, 2025

Choose a reason for hiding this comment

tmjssz Feb 24, 2025

Choose a reason for hiding this comment

tmjssz commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

Coverage report for `apps/web`

tmjssz Feb 21, 2025 •

edited

Loading