feat: Subaccounts #4456

iamacook · 2024-10-31T15:34:29Z

What it solves

Implementation of creating (and funding) Subaccounts

How this PR fixes it

A new sidebar icon, context menu (accessible via the icon/drawer) and settings have been added that both list and open a Subaccount creation flow.

How to test it

Open a Safe and observe:

A new header icon in the sidebar that, when clicked, opens either a promo message (if no Subaccounts are owned) or a list, with an option to add more. (The presence of Subaccounts is signified by a badge number.)
If the current Safe has Subaccounts, a new item in the sidebar drawer menu (accessible via the three dots) should open the same component.
A new settings area under "Setup" has the option to add Subaccounts, and list/rename those which exist already.

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

notion-workspace · 2024-10-31T15:34:44Z

Add option to send >1 asset in UI?

github-actions · 2024-10-31T15:34:44Z

Branch preview

✅ Deploy successful!

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

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

github-actions · 2024-10-31T15:40:32Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	73.4% (-0.27% 🔻)	14438/19671
🔴	Branches	51.39% (-0.38% 🔻)	3541/6890
🔴	Functions	56.62% (-0.5% 🔻)	2091/3693
🟡	Lines	74.96% (-0.31% 🔻)	13127/17512

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	mocks/terms.md.js	75%	100%	100%	100%
🟢	`...` / usePredictSafeAddressFromTxDetails.ts	90%	82.35%	100%	90%
🔴	`...` / index.tsx	50%	0%	0%	50%
🟡	`...` / index.tsx	62.5%	0%	0%	62.5%
🔴	`...` / index.tsx	55.56%	0%	0%	55.56%
🔴	`...` / ReviewSubaccount.tsx	35.71%	0%	0%	35.71%
🔴	`...` / SetupSubaccount.tsx	38.89%	22.22%	11.11%	39.62%
🔴	`...` / index.tsx	46.15%	0%	0%	46.15%
🟢	`...` / subaccounts.ts	75%	100%	100%	100%
🟡	`...` / index.tsx	71.43%	100%	0%	71.43%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / txHistorySlice.ts	93.02% (+2.11% 🔼)	66.67% (-6.06% 🔻)	60%	94.74% (+1.88% 🔼)
🟡	`...` / formatters.ts	79.31% (-1.33% 🔻)	57.14% (-9.52% 🔻)	84.62% (-1.1% 🔻)	79.07% (-1.37% 🔻)
🔴	`...` / sdk.ts	39.42% (-0.44% 🔻)	9.76% (-0.5% 🔻)	29.41%	34.15% (-0.53% 🔻)
🟢	src/utils/date.ts	75.61% (-0.58% 🔻)	90% (+15% 🔼)	75%	80% (-0.65% 🔻)
🟢	`...` / utils.ts	89.47% (-1.19% 🔻)	80%	90.48% (+0.48% 🔼)	94.92%
🟢	`...` / Approvals.tsx	93.33% (-0.42% 🔻)	33.33%	100%	100%
🟡	`...` / index.tsx	76.92% (-1.65% 🔻)	42.86% (-17.14% 🔻)	100%	75% (-1.92% 🔻)
🔴	`...` / GlobalPushNotifications.tsx	62.2% (-0.18% 🔻)	38.57% (-1.13% 🔻)	58.73%	59.24% (-0.22% 🔻)
🟢	`...` / RecoveryProposalCard.tsx	93.33% (-0.22% 🔻)	75% (-8.33% 🔻)	80%	92.59% (-0.26% 🔻)
🟢	`...` / index.tsx	86.05%	40% (-2.42% 🔻)	42.86%	85.37%
🟢	`...` / index.tsx	66.67% (-8.33% 🔻)	0% (-100% 🔻)	0%	100%
🟡	`...` / useAllSafesGrouped.ts	53.57% (-1.6% 🔻)	0%	27.27%	63.64% (-1.58% 🔻)
🟢	`...` / index.tsx	100%	75% (-25% 🔻)	100%	100%
🟢	`...` / useTxPendingStatuses.ts	77.5% (-0.83% 🔻)	64.06% (-1.56% 🔻)	68.18%	86.41% (-0.97% 🔻)
🟡	`...` / index.tsx	59.86% (-0.27% 🔻)	42.42%	55.56%	60.58% (-0.29% 🔻)
🟡	`...` / index.tsx	59.18% (-0.82% 🔻)	0%	0%	61.7% (-0.8% 🔻)
🟡	`...` / index.tsx	56.25% (+2.59% 🔼)	9.52% (-7.14% 🔻)	11.11%	60% (+3.59% 🔼)
🔴	`...` / RecoverAccountFlowSetup.tsx	51.28% (-1.22% 🔻)	16.67%	30%	51.35% (-1.28% 🔻)

Test suite run success

1666 tests passing in 227 suites.

Report generated by 🧪jest coverage report action from cc3c894

github-actions · 2024-10-31T15:50:15Z

📦 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`	`1.2 MB` (🟡 +220 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!

Twenty-three 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`	`25.72 KB` (🟢 -13.8 KB)	1.22 MB
`/apps/custom`	`23.77 KB` (🟢 -13.8 KB)	1.22 MB
`/apps/open`	`8.24 KB` (🟢 -45.48 KB)	1.21 MB
`/balances`	`37.48 KB` (🟢 -95 B)	1.23 MB
`/balances/nfts`	`16.88 KB` (🟢 -667 B)	1.21 MB
`/bridge`	`1.79 KB` (🟢 -796 B)	1.2 MB
`/home`	`38.87 KB` (🟢 -19.78 KB)	1.24 MB
`/new-safe/advanced-create`	`20.99 KB` (🟢 -15.78 KB)	1.22 MB
`/new-safe/create`	`20.08 KB` (🟢 -15.78 KB)	1.22 MB
`/new-safe/load`	`5.23 KB` (🟢 -11.09 KB)	1.2 MB
`/settings/environment-variables`	`8.51 KB` (🟢 -282 B)	1.21 MB
`/settings/notifications`	`26.65 KB` (🟢 -179 B)	1.22 MB
`/settings/safe-apps`	`10.26 KB` (🟢 -12.91 KB)	1.21 MB
`/settings/setup`	`38.02 KB` (🟢 -8.24 KB)	1.23 MB
`/share/safe-app`	`8.57 KB` (🟢 -601 B)	1.21 MB
`/stake`	`588 B` (🟢 -22 B)	1.2 MB
`/swap`	`730 B` (🟢 -22 B)	1.2 MB
`/transactions`	`56.02 KB` (🟢 -54 KB)	1.25 MB
`/transactions/history`	`55.98 KB` (🟢 -54 KB)	1.25 MB
`/transactions/messages`	`17.6 KB` (🟢 -46.31 KB)	1.21 MB
`/transactions/msg`	`8.33 KB` (🟢 -46.4 KB)	1.21 MB
`/transactions/queue`	`7.42 KB` (🟢 -45.56 KB)	1.2 MB
`/transactions/tx`	`1000 B` (🟢 -45.91 KB)	1.2 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.

schmanu

Looking and working great 🔥
I added some comments regarding multichain compatibility

Feature wise:
I think we could already add a new page on e.g. route /subaccounts which fetches and lists all SubAccounts / owned Safes of the currently opened Safe and simply offers links to open those.
We could also include the Create button there.

src/components/tx-flow/flows/CreateSubaccount/SetupSubaccount.tsx

src/components/tx-flow/flows/CreateSubaccount/ReviewSubaccount.tsx

iamacook · 2024-11-29T07:01:16Z

src/components/settings/SubaccountsList/index.tsx

+                // TODO: Add link
+                href="#"


Marking this so we don't forget.

notion-workspace · 2024-11-29T07:13:08Z

Create and fund Subaccounts

schmanu · 2024-12-02T10:50:40Z

src/components/tx-flow/flows/CreateSubaccount/ReviewSubaccount.tsx

+      },
+      chain,
+    )
+    const saltNonce = subaccounts.safes.length.toString()


This could cause issues if someone replaces the parent Safe in the subaccount as the nonce would then be used up already.

We could either use the getAvailableSaltNonce function or maybe just use Date.now as these accounts are deployed immediately and not counterfactual.

As the Safes aren't counterfactual, I changed it to Date.now in 322f47d.

Add transaction flow for creating (and funding) Subaccounts

9060d1f

iamacook self-assigned this Oct 31, 2024

Fix lint

b60f19f

iamacook added 3 commits October 31, 2024 17:30

Don't allow multiple selection of assets

c735475

Fix lint

2f06915

Simplify code

1f75787

schmanu reviewed Nov 1, 2024

View reviewed changes

Add popover, settings section and success screen

c8e8e68

iamacook changed the title ~~PoC: Create (and fund) Subaccounts~~ feat: Subaccounts Nov 28, 2024

iamacook added 12 commits November 28, 2024 09:05

Merge branch 'dev' into subaccount-demo

71ff216

Fix saltNonce collision and remove status screen changes

be43e72

Fix merge issues

d1451c0

Add badge

4385779

Tweak styles and events

9c6e251

Remove debug

f9e5761

Add status screen

e5c50ac

Convert Subaccount list to correct elements

dc5bb92

Invalidate subaccount cache after deployment

12d7051

Fix CI and add tests

4f58bea

Fix types

97aeed8

Fix test

f2fc1d4

iamacook commented Nov 29, 2024

View reviewed changes

iamacook requested a review from tmjssz November 29, 2024 07:12

iamacook added 2 commits November 29, 2024 08:28

Update icon in flow

93a9283

Address design review

55cceba

iamacook added 4 commits November 29, 2024 11:39

Merge branch 'dev' into subaccount-demo

5b246ad

Set pointer on show all

2315785

Make Subaccount a link

00fe4ab

Close modal when navigating to Subaccount and fix colour in dark mode

6ef1bca

schmanu reviewed Dec 2, 2024

View reviewed changes

iamacook added 2 commits December 2, 2024 12:16

Use Date.now for saltNonce

322f47d

Add fallback name

cc3c894

iamacook marked this pull request as draft December 6, 2024 06:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Subaccounts #4456

feat: Subaccounts #4456

iamacook commented Oct 31, 2024 •

edited

Loading

notion-workspace bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

schmanu left a comment

iamacook Nov 29, 2024

notion-workspace bot commented Nov 29, 2024

schmanu Dec 2, 2024

schmanu Dec 2, 2024

iamacook Dec 2, 2024

feat: Subaccounts #4456

Are you sure you want to change the base?

feat: Subaccounts #4456

Conversation

iamacook commented Oct 31, 2024 • edited Loading

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

notion-workspace bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 • edited Loading

Branch preview

github-actions bot commented Oct 31, 2024 • edited Loading

Coverage report

Test suite run success

github-actions bot commented Oct 31, 2024 • edited Loading

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

⚠️ Global Bundle Size Increased

Twenty-three Pages Changed Size

schmanu left a comment

Choose a reason for hiding this comment

iamacook Nov 29, 2024

Choose a reason for hiding this comment

notion-workspace bot commented Nov 29, 2024

schmanu Dec 2, 2024

Choose a reason for hiding this comment

schmanu Dec 2, 2024

Choose a reason for hiding this comment

iamacook Dec 2, 2024

Choose a reason for hiding this comment

iamacook commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading