fix(mobile): couldn’t properly scroll in sheet

[compojoom]

What it solves

When the list of safes was big one was not able to scroll inside of it.

Resolves #
fixes #4972

How this PR fixes it

🪄
There were a couple of gotchas. The Sheet doesn't automatically account for safe areas. So we had to apply an inset on the top, because previously we were behind the notch. We tried to go around this by using the snap point and setting the laste one at 90%, but this doesn't work with dynamic resizing. There is a bug in bottom-sheet in combination with react-native-animated. Bottom sheet is ignoring the max snap point. So, by setting the correct inset we can expand the sheet to 100% and the content will still be visible. Then we had to take the inset bottom in account. By relying on some random padding we were making the layout unpredictable. According to the docs of bottom shett it should auto account for the height of the footer, but it didn't seem to be the case. I had to calculate the height of the footer content and apply a marginbottom on the scrollview inside of it. This way the safes were visible.

How to test it

Add a lot of safes and try to scroll in the list and select the ones that were previously behind the bottom footer.

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]

Branch preview

✅ Deploy successful!

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

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

[github-actions]

Coverage (35%)

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	35.38	32.56	30.18	35.62
src	0	0	0	0
react-app-env.d.ts	0	0	0	0
src/app	0	0	0	0
+html.tsx	0	100	0	0	9–31
+not-found.tsx	0	100	0	0	8–21
_layout.tsx	0	0	0	0	22–117
accounts-sheet.tsx	0	100	0	0	3–4
app-settings.tsx	0	100	0	0	5
get-started.tsx	0	100	0	0	5
index.tsx	0	100	0	0	14
networks-sheet.tsx	0	100	0	0	3–4
notifications-opt-in.tsx	0	0	0	0	8–34
notifications.tsx	0	100	0	0	5
onboarding.tsx	0	100	0	0	5
pending-transactions.tsx	0	100	0	0	7
src/app/(import-accounts)	0	100	0	0
_layout.tsx	0	100	0	0	5–7
form.tsx	0	100	0	0	5
index.tsx	0	100	0	0	5
signers.tsx	0	100	0	0	5
src/app/(tabs)	0	100	0	0
_layout.tsx	0	100	0	0	7–36
index.tsx	0	100	0	0	4–5
settings.tsx	0	100	0	0	4
src/app/(tabs)/transactions	0	0	0	0
_layout.tsx	0	0	0	0	7–26
src/app/(tabs)/transactions/(tabs)	0	100	0	0
_layout.tsx	0	100	0	0	12–24
index.tsx	0	100	0	0	5
messages.tsx	0	100	0	0	10–34
src/app/import-signers	0	100	0	0
_layout.tsx	0	100	0	0	6–14
index.tsx	0	100	0	0	14–57
loading.tsx	0	100	0	0	5
private-key-error.tsx	0	100	0	0	7–19
private-key-success.tsx	0	100	0	0	7–19
private-key.tsx	0	100	0	0	5
src/app/signers	0	100	0	0
_layout.tsx	0	100	0	0	5–7
index.tsx	0	100	0	0	6
src/app/signers/[address]	0	100	0	0
index.tsx	0	100	0	0	5
src/components/Alert	100	85.71	100	100
Alert.tsx	100	85.71	100	100	57, 72
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/Camera	0	0	0	0
QrCamera.tsx	0	0	0	0	7–141
index.ts	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	33
index.ts	0	0	0	0
src/components/CopyButton	25	100	0	25
CopyButton.tsx	25	100	0	25	6–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	0	0	0	0
DropdownLabel.tsx	0	0	0	0	14–20
index.ts	0	0	0	0
sheetComponents.tsx	0	100	0	0	8–42
src/components/EthAddress	100	25	100	100
ETHAddress.tsx	100	25	100	100	17
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/FloatingContainer	0	0	0	0
FloatingContainer.tsx	0	0	0	0	16–49
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/NetworkBadge	33.33	100	0	33.33
NetworkBadge.tsx	0	100	0	0	9–10
index.ts	0	0	0	0
theme.ts	100	100	100	100
src/components/OptIn	0	0	0	0
OptIn.tsx	0	0	0	0	25–80
index.ts	0	0	0	0
src/components/SafeBottomSheet	0	0	0	0
SafeBottomSheet.tsx	0	0	0	0	41–170
index.ts	0	0	0	0
src/components/SafeButton	40	0	33.33	40
SafeButton.tsx	40	0	33.33	40	67–68, 88
index.ts	0	0	0	0
src/components/SafeCard	100	100	100	100
SafeCard.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/SafeInput	100	100	100	100
SafeInput.tsx	100	100	100	100
index.ts	0	0	0	0
styled.ts	100	100	100	100
theme.ts	100	100	100	100
utils.ts	100	100	100	100
src/components/SafeListItem	100	70.58	100	100
SafeListItem.tsx	100	70.58	100	100	74–88
index.tsx	0	0	0	0
src/components/SafeTab	28.57	0	0	30
SafeTab.tsx	44.44	100	0	44.44	14–27
SafeTabBar.tsx	9.09	0	0	10	18–45
index.tsx	0	0	0	0
theme.ts	100	100	100	100
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
SectionTitle.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/SignersCard	100	80	100	100
SignersCard.tsx	100	80	100	100	27
index.ts	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	78.94	100	88.88
TxTokenCard.tsx	88.88	78.94	100	88.88	40, 70
index.tsx	0	0	0	0
src/config	47.36	83.33	0	47.36
constants.ts	100	83.33	100	100	15
ethers.ts	0	100	0	0	10–38
src/context	0	0	0	0
NotificationsContext.tsx	0	0	0	0	12–32
src/features/AccountsSheet	0	0	0	0
AccountsSheet.container.tsx	0	0	0	0	10–23
index.tsx	0	0	0	0
src/features/AccountsSheet/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/AccountsSheet/AccountItem/hooks	50	0	25	53.84
useEditAccountItem.ts	50	0	25	53.84	15–29
src/features/AccountsSheet/MyAccounts	93.33	100	80	100
MyAccounts.container.tsx	100	100	100	100
MyAccountsFooter.tsx	80	100	50	100
index.ts	0	0	0	0
src/features/AccountsSheet/MyAccounts/hooks	35.71	33.33	40	38.46
useMyAccounts.ts	100	100	100	100
useMyAccountsSortable.ts	0	0	0	0	12–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/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	0	0	0	15–34
Balance.tsx	0	0	0	0	21–32
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/NFTs	100	81.81	100	100
NFTItem.tsx	100	50	100	100	8
NFTs.container.tsx	100	88.88	100	100	25
index.tsx	0	0	0	0
src/features/Assets/components/Navbar	8.33	0	0	8.33
Navbar.tsx	0	0	0	0	14–46
index.tsx	0	0	0	0
theme.ts	100	100	100	100
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	85.71	100	100
Tokens.container.tsx	100	85.71	100	100	20
index.tsx	0	0	0	0
src/features/GetStarted	0	100	0	0
GetStarted.tsx	0	100	0	0	9–18
index.tsx	0	0	0	0
src/features/ImportPrivateKey	100	100	100	100
ImportPrivateKey.container.tsx	100	100	100	100
index.ts	0	0	0	0
src/features/ImportPrivateKey/components/ImportError	0	100	0	0
ImportError.tsx	0	100	0	0	12–14
index.ts	0	0	0	0
src/features/ImportPrivateKey/components/ImportSuccess	0	100	0	0
ImportSuccess.tsx	0	100	0	0	14–58
index.ts	0	0	0	0
src/features/ImportPrivateKey/components/LoadingImport	0	0	0	0
LoadingImport.container.tsx	0	0	0	0	11–76
LoadingImport.tsx	0	100	0	0	6
index.ts	0	0	0	0
src/features/ImportPrivateKey/hooks	68	50	75	68
useImportPrivateKey.ts	68	50	75	68	19–20, 31–40, 45–46
src/features/ImportReadOnly	0	0	0	0
AddSignersForm.container.tsx	0	0	0	0	16–63
ImportAccountForm.container.tsx	0	0	0	0	11–58
NetworkBadge.container.tsx	0	0	0	0	9–15
ScanQrAccount.container.tsx	0	0	0	0	10–68
index.tsx	0	0	0	0
src/features/ImportReadOnly/components	0	0	0	0
AddSignersFormView.tsx	0	100	0	0	15–23
AvailableNetworks.tsx	0	100	0	0	6–11
ImportAccountFormView.tsx	0	0	0	0	29–51
ScanQrAccountView.tsx	0	0	0	0	16–17
VerificationStatus.tsx	0	0	0	0	12–26
src/features/ImportReadOnly/helpers	100	100	100	100
safes.tsx	100	100	100	100
src/features/NetworksSheet	0	100	0	0
NetworksSheet.container.tsx	0	100	0	0	14–45
index.tsx	0	0	0	0
src/features/Notifications	100	100	100	100
Notifications.container.tsx	100	100	100	100
index.tsx	0	0	0	0
src/features/Notifications/components	100	100	100	100
NotificationView.tsx	100	100	100	100
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	96	88.88	88.88	96
CarouselFeedback.tsx	100	100	100	100
CarouselItem.tsx	100	80	100	100	30
OnboardingCarousel.tsx	90.9	100	83.33	90.9	30
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	6–13
Settings.tsx	0	0	0	0	20–140
index.tsx	0	0	0	0
src/features/Settings/components/AppSettings	0	0	0	0
AppSettings.container.tsx	0	0	0	0	7–23
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	8–12
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	0	0	0
Signers.container.tsx	0	0	0	0	11–27
constants.ts	0	100	100	0	3
index.tsx	0	0	0	0
src/features/Signers/components/SignersList	0	0	0	0
SignersList.tsx	0	0	0	0	20–66
SignersListHeader.tsx	0	0	0	0	12
SignersListItem.tsx	0	0	0	0	19–39
index.ts	0	0	0	0
src/features/Signers/components/SignersList/hooks	0	100	0	0
useSignersActions.ts	0	100	0	0	5–32
src/features/Signers/hooks	0	0	0	0
useSignersGroupService.ts	0	0	0	0	10–32
src/features/TxHistory	0	0	0	0
TxHistory.container.tsx	0	0	0	0	10–36
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–33
index.ts	0	0	0	0
src/hooks	0	0	0	0
useNotifications.ts	0	0	0	0	23–61
src/hooks/services	100	100	100	100
useSafeOverviewService.ts	100	100	100	100
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/useMakeSafesWithChainId	0	100	0	0
useMakeSafesWithChainId.ts	0	100	0	0	7–12
src/hooks/usePendingTxs	0	0	0	0
index.ts	0	0	0	0	14–39
src/hooks/useSign	79.31	50	100	78.57
index.ts	0	0	0	0
useSign.ts	79.31	50	100	78.57	44–45, 57, 69, 76, 81
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
NavigationGuardHOC.tsx	0	0	0	0	10–69
useScrollableHeader.tsx	0	0	0	0	22–47
src/navigation/hooks	0	100	0	0
utils.tsx	0	100	0	0	5–11
src/services/exceptions	88.88	100	100	88.88
utils.ts	88.88	100	100	88.88	14
src/services/notifications	0	0	0	0
FCMService.ts	0	0	0	0	12–62
NotificationService.ts	0	0	0	0	28–280
src/store	47.72	3.57	22.22	50
activeSafeSlice.ts	60	0	50	55.55	15–24
constants.ts	64.28	0	0	64.28	321–334
index.ts	91.66	50	100	91.66	50
myAccountsSlice.ts	83.33	100	50	80	13
notificationsSlice.ts	39.13	0	0	52.94	18–36
safesSlice.ts	31.57	100	11.11	31.25	20–38, 47–48
settingsSlice.ts	71.42	100	33.33	83.33	21
signersSlice.ts	57.14	100	0	66.66	13–15
storage.ts	7.14	0	0	7.14	12–67
txHistorySlice.ts	100	100	100	100
src/store/chains	52.38	25	20	61.11
index.ts	52.38	25	20	61.11	10, 17, 25–26, 33–36
src/store/hooks	85.71	50	100	85.71
activeSafe.ts	80	50	100	80	8
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/hooks	0	100	0	0
useSafeAreaPaddingBottom.tsx	0	100	0	0	4–6
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	55.76	31.5	58.49	55.1
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
logger.ts	0	0	0	0	10–85
transaction-guards.ts	79.24	60	68	80.76	51–57, 67, 99, 103, 117, 121
transactions.tsx	0	0	0	0	4–29
src/utils/notifications	0	100	0	0
index.ts	0	100	0	0	14–37