Feat(Mobile): Account Management: Edit and reorganise accounts

[clovisdasilvaneto]

What it solves

It enables safe users to edit and reorganise accounts inside the app. Please notice the accounts we have in the app are all fixed accounts because we still do not have the "Add account" functionality working.

Ps: Please notice that in the sortable we have a small re-render issue, this is happening due to the version of react-native-reanimated in 'react-native-draggable-flatlist'. Current they supports only react-native-reanimated 2 which is not being used and suported in react native new architecture (76). This might be fixed in this PR: computerjazz/react-native-draggable-flatlist#550.

I'm covering the hooks with unit tests, they will come in a separated PR though.

Video

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

[github-actions]

Branch preview

✅ Deploy successful!

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

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

[github-actions]

Coverage (56%)

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	55.56	49.81	49.65	56.04
src	0	0	0	0
react-app-env.d.ts	0	0	0	0
src/components/Alert	100	91.66	100	100
Alert.tsx	100	91.66	100	100	55
index.ts	0	0	0	0
src/components/Badge	87.5	87.5	100	87.5
Badge.tsx	85.71	87.5	100	85.71	49
index.ts	0	0	0	0
theme.ts	100	100	100	100
src/components/BlurredIdenticonBackground	0	0	0	0
BlurredIdenticonBackground.tsx	0	0	0	0	14–51
index.tsx	0	0	0	0
src/components/ChainsDisplay	100	84.61	100	100
ChainsDisplay.tsx	100	84.61	100	100	15–18
index.ts	0	0	0	0
src/components/Container	100	75	100	100
Container.tsx	100	75	100	100	32
index.ts	0	0	0	0
src/components/CopyButton	0	100	0	0
CopyButton.tsx	0	100	0	0	5–10
index.ts	0	0	0	0
src/components/DataRow	100	100	100	100
DataRow.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/Dropdown	88.46	60	70	88
Dropdown.tsx	81.25	60	57.14	81.25	55, 63, 128
index.ts	0	0	0	0
sheetComponents.tsx	100	100	100	100
src/components/EthAddress	0	0	0	0
ETHAddress.tsx	0	0	0	0	11–12
index.ts	0	0	0	0
src/components/Fiat	100	100	100	100
Fiat.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/Identicon	100	100	100	100
Identicon.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/InnerShadow	100	100	100	100
InnerShadow.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/Logo	100	100	100	100
Logo.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/SafeButton	100	100	100	100
SafeButton.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/SafeFontIcon	87.5	85.71	100	87.5
SafeFontIcon.tsx	87.5	85.71	100	87.5	28
index.ts	0	0	0	0
src/components/SafeListItem	100	66.66	100	100
SafeListItem.tsx	100	66.66	100	100	74–88
index.tsx	0	0	0	0
src/components/SafeTab	25	0	0	26.31
SafeTab.tsx	44.44	100	0	44.44	13–25
SafeTabBar.tsx	9.09	0	0	10	18–38
index.tsx	0	0	0	0
types.ts	0	0	0	0
src/components/StatusBanners/PendingTransactions	100	50	100	100
PendingTransactions.tsx	100	50	100	100	17
index.tsx	0	0	0	0
src/components/Tab	0	0	0	0
TabNameContext.tsx	0	0	0	0	3–10
src/components/Title	100	100	100	100
LargeHeaderTitle.tsx	100	100	100	100
NavBarTitle.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/TxInfo	23.8	4.54	50	23.8
TxInfo.tsx	23.8	4.54	50	23.8	45–96, 100
index.tsx	0	0	0	0
src/components/navigation	100	100	100	100
TabBarIcon.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/transactions-list/Card/AccountCard	100	75	100	100
AccountCard.tsx	100	75	100	100	52
index.ts	0	0	0	0
src/components/transactions-list/Card/AssetsCard	100	100	100	100
AssetsCard.tsx	100	100	100	100
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxBatchCard	100	100	100	100
TxBatchCard.tsx	100	100	100	100
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxConflictingCard	0	100	0	0
TxConflictingCard.tsx	0	100	0	0	13–31
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxContractInteractionCard	100	100	100	100
TxContractInteractionCard.tsx	100	100	100	100
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxCreationCard	100	100	100	100
TxCreationCard.tsx	100	100	100	100
index.ts	0	0	0	0
src/components/transactions-list/Card/TxGroupedCard	90.9	75	75	90.9
TxGroupedCard.tsx	90.9	75	75	90.9	57
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxRejectionCard	100	100	100	100
TxRejectionCard.tsx	100	100	100	100
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxSafeAppCard	100	100	100	100
TxSafeAppCard.tsx	100	100	100	100
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxSettingsCard	100	50	100	100
TxSettingsCard.tsx	100	50	100	100	17
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxSwapCard	100	100	100	100
TxSwapCard.tsx	100	100	100	100
index.tsx	0	0	0	0
src/components/transactions-list/Card/TxTokenCard	88.88	80.55	100	88.88
TxTokenCard.tsx	88.88	80.55	100	88.88	40, 70
index.tsx	0	0	0	0
src/config	44.44	83.33	0	44.44
constants.ts	100	83.33	100	100	15
ethers.ts	0	100	0	0	10–38
src/features/Assets	0	100	0	0
Assets.container.tsx	0	100	0	0	9–21
index.tsx	0	0	0	0
styles.ts	0	100	100	0	3
src/features/Assets/components/AccountItem	91.66	68.75	100	90.9
AccountItem.tsx	91.66	68.75	100	90.9	24
index.ts	0	0	0	0
src/features/Assets/components/AccountItem/hooks	50	0	25	53.84
useEditAccountItem.ts	50	0	25	53.84	15–29
src/features/Assets/components/AssetsHeader	0	0	0	0
AssetsHeader.container.tsx	0	100	0	0	6–13
AssetsHeader.tsx	0	0	0	0	15
index.tsx	0	0	0	0
styles.ts	0	100	100	0	3
src/features/Assets/components/Balance	0	0	0	0
Balance.container.tsx	0	100	0	0	14–36
Balance.tsx	0	0	0	0	25–42
ChainItems.tsx	0	0	0	0	17–28
index.tsx	0	0	0	0
src/features/Assets/components/Fallback	100	75	100	100
Fallback.tsx	100	75	100	100	12
index.ts	0	0	0	0
src/features/Assets/components/MyAccounts	88.23	100	66.66	100
MyAccounts.container.tsx	100	100	100	100
MyAccountsFooter.tsx	71.42	100	33.33	100
index.ts	0	0	0	0
src/features/Assets/components/MyAccounts/hooks	43.75	33.33	50	44.82
useMyAccountsService.ts	100	100	100	100
useMyAccountsSortable.ts	0	0	0	0	12–38
src/features/Assets/components/NFTs	100	81.81	100	100
NFTItem.tsx	100	50	100	100	8
NFTs.container.tsx	100	88.88	100	100	26
index.tsx	0	0	0	0
src/features/Assets/components/Navbar	0	0	0	0
Navbar.tsx	0	0	0	0	18–66
index.tsx	0	0	0	0
src/features/Assets/components/NoFunds	100	100	100	100
EmptyToken.tsx	100	100	100	100
NoFunds.tsx	100	100	100	100
index.ts	0	0	0	0
src/features/Assets/components/Tokens	100	100	100	100
Tokens.container.tsx	100	100	100	100
index.tsx	0	0	0	0
src/features/Notifications	0	100	0	0
Notifications.container.tsx	0	100	0	0	4–5
index.tsx	0	0	0	0
src/features/Onboarding	100	100	100	100
Onboarding.container.tsx	100	100	100	100
index.ts	0	0	0	0
src/features/Onboarding/components/OnboardingCarousel	95	100	87.5	95
CarouselFeedback.tsx	100	100	100	100
CarouselItem.tsx	100	100	100	100
OnboardingCarousel.tsx	83.33	100	80	83.33	18
index.ts	0	0	0	0
items.tsx	100	100	100	100
src/features/Onboarding/components/OnboardingHeader	100	100	100	100
OnboardingHeader.tsx	100	100	100	100
index.ts	0	0	0	0
src/features/Onboarding/components/ParticlesLogo	100	100	100	100
ParticlesLogo.tsx	100	100	100	100
index.ts	0	0	0	0
src/features/PendingTx	0	0	0	0
PendingTx.container.tsx	0	100	0	0	6–8
index.tsx	0	0	0	0
utils.tsx	0	0	0	0	21–133
src/features/PendingTx/components/PendingTxList	0	0	0	0
PendingTxList.container.tsx	0	0	0	0	33–63
index.ts	0	0	0	0
src/features/Settings	0	0	0	0
Settings.container.tsx	0	0	0	0	7–14
Settings.tsx	0	0	0	0	20–137
index.tsx	0	0	0	0
src/features/Settings/components/AppSettings	0	100	0	0
AppSettings.container.tsx	0	100	0	0	7–20
AppSettings.tsx	0	100	0	0	10–11
index.ts	0	0	0	0
src/features/Settings/components/IdenticonWithBadge	100	50	100	100
IdenticonWithBadge.tsx	100	50	100	100	21–22
index.ts	0	0	0	0
src/features/Settings/components/Navbar	0	0	0	0
Navbar.tsx	0	100	0	0	10–27
SettingsButton.tsx	0	100	0	0	6–15
SettingsMenu.tsx	0	0	0	0	17–81
index.ts	0	0	0	0
src/features/Signers	0	100	0	0
Signers.container.tsx	0	100	0	0	3–4
index.tsx	0	0	0	0
src/features/TxHistory	0	0	0	0
TxHistory.container.tsx	0	0	0	0	11–37
index.tsx	0	0	0	0
utils.tsx	0	0	0	0	18–58
src/features/TxHistory/components/TxHistoryList	0	0	0	0
TxHistoryList.tsx	0	0	0	0	18–32
index.ts	0	0	0	0
src/hooks/useCopyAndDispatchToast	100	100	100	100
index.ts	100	100	100	100
src/hooks/useInfiniteScroll	75	50	80	73.33
index.ts	0	0	0	0
useInfiniteScroll.ts	75	50	80	73.33	30–35
src/hooks/usePendingTxs	0	0	0	0
index.ts	0	0	0	0	15–40
src/hooks/useSign	80	50	100	80
index.ts	0	0	0	0
useSign.ts	80	50	100	80	34, 43, 55, 62, 67
src/hooks/useTransactionType	91.66	79.16	100	91.66
index.tsx	91.66	79.16	100	91.66	116–124
src/navigation	0	0	0	0
useScrollableHeader.tsx	0	0	0	0	22–47
src/services/exceptions	88.88	100	100	88.88
utils.ts	88.88	100	100	88.88	14
src/store	66.66	50	40.9	66.66
activeSafeSlice.ts	75	100	50	71.42	19–22
constants.ts	100	100	100	100
index.ts	91.66	50	100	91.66	44
myAccountsSlice.ts	83.33	100	50	80	13
safesSlice.ts	37.5	100	12.5	38.46	38–48, 57–58
storage.ts	25	100	0	25	8–17
txHistorySlice.ts	100	100	100	100
src/store/chains	68.42	100	40	75
index.ts	68.42	100	40	75	17, 30–33
src/store/hooks	100	100	100	100
index.ts	100	100	100	100
src/theme	100	100	100	100
navigation.ts	100	100	100	100
tamagui.config.ts	100	100	100	100
tokens.ts	100	100	100	100
src/theme/helpers	100	81.81	100	100
utils.ts	100	81.81	100	100	37, 41
src/theme/palettes	100	100	100	100
darkPalette.ts	100	100	100	100
lightPalette.ts	100	100	100	100
src/theme/provider	59.09	27.77	60	59.09
font.tsx	90	50	100	90	34
safeTheme.tsx	100	37.5	100	100	19–34
toastProvider.tsx	0	0	0	0	10–29
src/utils	75.65	47.91	72.09	75.7
date.ts	96	66.66	85.71	100	31, 35–39
formatters.ts	90	80	100	88.88	9
gateway.ts	100	100	100	100
transaction-guards.ts	79.24	60	68	80.76	50–56, 66, 98, 102, 116, 120
transactions.tsx	0	0	0	0	4–29

[Jonathansoufer]

Nicely done! Left some small comms and doubts only.