Epic: new mobile app (move to monorepo) #4698

compojoom · 2024-12-19T20:12:15Z

What it solves

This PR adds the code for the mobile application previously residing in a private repo.

The commits were alrady reviewed in the other repo. The last commit just fixes a problem introduced from improper path resolution with typescript.

apps/mobile - RN app uses React 18
apps/web - nextjs app uses React 19

yarn was correctly resolving the packages and adding apps/web/node_modules/react19, but tsc was erroring out and loading at one point the react18 version from the main /node_modules.

Storybook is broken both in web and mobile. (will fix in a separate PR)

How to test it

@safe-global/web package should continue to work as usual. New is the @safe-mobile/mobile package located in apps/mobile.
You can follow it's readme to start the React-Native app.

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

add readme

github-actions · 2024-12-19T20:12:30Z

Branch preview

✅ Deploy successful!

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

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

apps/mobile/resources/icons/safe-icons/demo-files/demo.js

github-actions · 2024-12-19T20:15:38Z

Coverage (49%)

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	49.58	43.72	44.44	49.71
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	75	100	87.5
Badge.tsx	85.71	75	100	85.71	47
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/Container	100	100	100	100
Container.tsx	100	100	100	100
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	94.73	87.5	85.71	94.44
Dropdown.tsx	88.88	87.5	75	88.88	34
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	71.42	100	87.5
SafeFontIcon.tsx	87.5	71.42	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	71–85
index.tsx	0	0	0	0
src/components/SafeTab	0	0	0	0
SafeTab.tsx	0	100	0	0	13–37
SafeTabBar.tsx	0	0	0	0	12–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/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/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	100	83.33	100	100
constants.ts	100	83.33	100	100	13
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	100	0	0	10–34
Balance.tsx	0	0	0	0	21–41
ChainItems.tsx	0	0	0	0	17–28
index.tsx	0	0	0	0
src/features/Assets/components/Fallback	0	0	0	0
Fallback.tsx	0	0	0	0	8–9
index.ts	0	0	0	0
src/features/Assets/components/NFTs	0	0	0	0
NFTItem.tsx	0	0	0	0	6
NFTs.container.tsx	0	0	0	0	18–59
index.tsx	0	0	0	0
src/features/Assets/components/Navbar	0	100	0	0
Navbar.tsx	0	100	0	0	13–39
index.tsx	0	0	0	0
src/features/Assets/components/NoFunds	0	100	0	0
EmptyToken.tsx	0	100	0	0	5
NoFunds.tsx	0	100	0	0	6
index.ts	0	0	0	0
src/features/Assets/components/Tokens	0	0	0	0
Tokens.container.tsx	0	0	0	0	17–56
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	8–21
AppSettings.tsx	0	100	0	0	10–11
index.ts	0	0	0	0
src/features/Settings/components/IdenticonWithBadge	0	0	0	0
IdenticonWithBadge.tsx	0	0	0	0	14–37
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	15–78
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/usePendingTxs	0	0	0	0
index.ts	0	0	0	0	8–44
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	73.17	50	50	72.97
activeChainSlice.ts	87.5	100	66.66	83.33	12
activeSafeSlice.ts	57.14	100	0	66.66	20–23
index.ts	91.66	50	100	91.66	42
storage.ts	25	100	0	25	8–17
txHistorySlice.ts	100	100	100	100
src/store/chains	100	100	100	100
index.ts	100	100	100	100
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.22	47.91	71.42	75.47
date.ts	96	66.66	85.71	100	31, 35–39
formatters.ts	87.5	80	100	87.5	7
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

Initial commits

* refactor: use jest for tests I couldn’t find a way to fix our tests and make them work with tamagui. Vitest is ignoring the native.ts files that tamagui has and tests were failing, because of that I reconfigured the project to use jest. * fix: button test * feat: add container tests * feat: add DataRow tests

* feat: create tx-history list components * feat: use the new cards components in the TxHistory list * fix: remove todo * feat: add missing variants to tx history page * feat: add missing multiSendCall information in the txList * feat: create static transactions messages layout * fix: android crash * feat: add detox test for transactions * fix: add the right name in the bulk transactions section * fix: scroll margin in the txHistory component * fix: story book of the TxCards components * fix: unit tests * fix: detox tests * fix: remove unnecessary comment * fix: remove swap order comment * fix: tx history in light mode * fix: use snapshot tests instead of inline object comparison * fix: remove TODO comments * chore: rename tx cards --------- Co-authored-by: Daniel Dimitrov <[email protected]>

* chore: use Alert component for the status banners * chore: use GestureHandler on the application entry point * fix: remove 'isStorybookEnv' log * fix: rename tests cases

* chore: adjust api gateway folder structure * feat: create chains slice * feat: create activeChain slice * chore: remove TODO comment * chore: remove unused code * feat: use activeChain information instead of hard coded data * fix: remove performance optmization in pro of readability

* feat: create pending tx screen * feat: add pending transactions static layout in the home screen * feat: add pending transactions slice in the api gateway * feat: add new variant in the Alert component * feat: create CircularBadge component to use it as the circular icon with text * feat: put groupTx to respect SOLID definition * feat: add lodash as project dependency * feat: add missing parameters in the TxCards components * feat: adjust reusable components layout * feat: create pending transactions screen * feat: generated snapshots

* feat: use react-navigation header in screens * Update app/(tabs)/transactions/_layout.tsx Co-authored-by: Clóvis Neto <[email protected]> * Update src/features/PendingTx/PendingTxList.tsx Co-authored-by: Clóvis Neto <[email protected]> --------- Co-authored-by: Clóvis Neto <[email protected]>

matt-oakes/redux-devtools-expo-dev-plugin#15

* feature: RTK auto-generated endpoints * chore: run prettier on the codebase * chore: run prettier on the codebase * refactor: tx pending & history tx types * fix: remove usage of safe-gateway-typscript-sdk * fix: clean up console.log * refactor: pending & history tx cleanup

* fix: refactoring broke test initialisation * fix: update snapshot tests I think that the latest tamagui updates added some props that were previously not there

* Feat: active safe slice * Use shortenAddress

We should display first the confirmation submitted and then the confirmation required. 1/2 one submitted / two required

running npm run storybok:web will launch storybook in the browser.

fix: wrong types fix: typescript compile errors feat: run lint on new PRs type node .

#37)

* feat: create safe tab component * feat: create dropdown component * feat: create assets features layout * feat: adjust styles of shared components * feat: allow user to show a transparent transaction list card * feat: adjust SafeTab component to control the active tab in the main component * feat: add dropdown component into the assets header * feat: integrate user balance with CGW * feat: adjust transactions-list components colors * feat: change default active wallet * feat: create Logo component to use it for any token or contract logo * feat: adjust SafeListItem colors * feat: integrate tokens and nfts list with CGW data * feat: create NoFunds component to show the empty assets icon when no funds were found * fix: do not show pending transactions component when there isn't any pending tx * feat: add component to render the select chain dropdown sheet template * fix: change CGW hooks imports * fix: re-use the fallback markup in the assets list * feat: separate bottom sheet components * feat: change SafeOverview type import * feat: optmize functions with useCallback * feat: move assets render item function to a separated component * fix: tslint

* chore: add contributing.md file in the project * chore: generated snapshots� * chore: change folder structures * chore: adjust contributing.md

* fix: unit tests * fix: remove early null return

* chore: adjust features folder structure * chore: change features folder definition * fix: broken ts import

The endpoint was returning more results, but we were not going after the next page. Instead we were agian polling the first page and this ended up in 429.

* fix: blurred background on android not working * fix: identicon not being circular on android * fix: visual topbar issues on android * fix: android menu icons * fix: app home screen warnings * fix: remove empty space * fix: typo * fix: remove unused style * fix: remove background prop * fix: use StatusBar component instead of mutate in useEffect * fix: remove unnecessary package * fix: Toast message in android devices * fix: add withDrawableAssets config to add drawable folder in the pre-build command * feat: add withDrawableAssets config --------- Co-authored-by: Clóvis Neto <[email protected]>

…xt error (#51)

* feat: add maestro e2e tests * refactor: remove detox and native files Removed detox as we are going to use maestro. Reasons for the decision - detox is not compatible with the latest RN version - detox apparently is no longer recommended for e2e tests on expo EAS. Sicne we don’t use detox, we don’t need to keep the native files in the repo. They are auto-generated on the fly by expo. * fix: update snapshot test for PendingTransactions * fix: update package.lock The package.lock went out of sync due to the last git merge conflicts resolution. * refactor: remove withDrawableAssets from root dir The code is in the expo-plugins folder now * refactor: update readme

* feature: build with eas We are now able to build on eas. For android: Since the app didn’t go through the app store approval versions we submit need to be in draft state.

We rely on Expo’s Continuous Native Generation (https://docs.expo.dev/workflow/continuous-native-generation/). For some reason those files were still left, despite the fact that we’ve ignored the ios and android folders.

* refactor: repository now follows a Monorepo structure Main project folders are now: - apps - packages Apps such as expo, nextjs live inside of the apps folder. Packages shared between the apps live in packages. I migrated to yarn v4 (from npm) as the general opinion is that yarn has better workspaces support. Also the web app uses it. * fix: enable corepack in CI And also switch to a newer node version in general * fix: collect coverage from right files * fix: make EAS happy * fix: typo

* fix: remove duplicated folder * feat: add splash scren configuration

* refactor: make prettier config global * feature: extract store gateway to separate package I’ve moved the autogenerated gateway API code to a separate package. This will allow us to reuse it in the web application. In the process I created 2 more configuration packages: - config/tsconfig - config/jest-presets The goal of those is to offer base tsconfig and jest presets for reuse across packages. * fix: improve yarn installation instructions * fix: tsx & linting issues

* feat: create onboarding structure * feat: create onboarding carousel components * feat: create onboarding header component * feat: create onboarding container * feat: crate re-usable SafeButton component * feat: cover onboarding components with unit tests * feat: add storybook for carousel component * feat: fix unit tests * feat: remove hardcoded colors and test warnings * fix: remove unused testID * fix: remove magic numbers * feat: use tamagui variables

…bile-monorepo-correct

Changes the name of the workflows so that it is now clear which workflow is running and to which app it relates

compojoom added 3 commits December 19, 2024 20:26

refactor: move nextjs files to apps/web

31656b0

chore: setup monorepo

a363a78

add readme

fix: github actions on monorepo

7825b1c

github-advanced-security bot found potential problems Dec 19, 2024

View reviewed changes

apps/mobile/resources/icons/safe-icons/demo-files/demo.js Dismissed Show dismissed Hide dismissed

clovisdasilvaneto and others added 24 commits December 20, 2024 14:10

squashed history up to 7220c76

8a244b9

Initial commits

chore: Use Alert component in the status banners components (#17)

947272f

* chore: use Alert component for the status banners * chore: use GestureHandler on the application entry point * fix: remove 'isStorybookEnv' log * fix: rename tests cases

chore: update to expo-52 and rn 0.76

ac072c6

chore: update detox

c986a14

refactor: safeThemeProvider

104d687

chore: update dependencies

3cf0ba2

fix: app crashed due to syntax error (#23)

52c3c7e

chore: update expo to v52.0.7 (#24)

85b624d

fix: redux-devtools not working on expo52 (#25)

33f001d

matt-oakes/redux-devtools-expo-dev-plugin#15

Fix failing tests (#26)

9dc0821

* fix: refactoring broke test initialisation * fix: update snapshot tests I think that the latest tamagui updates added some props that were previously not there

Feat: active safe slice (#28)

e3c668f

* Feat: active safe slice * Use shortenAddress

feat: automatically run unit tests on new PRs (#27)

c84b5aa

fix: wrong confirmationrequired/confirmation submitted (#30)

cfeb792

We should display first the confirmation submitted and then the confirmation required. 1/2 one submitted / two required

feat: add storybook for web (#32)

300a4af

running npm run storybok:web will launch storybook in the browser.

feat: automatically run unit tests on new PRs (#27) (#29)

049ac4f

fix: wrong types fix: typescript compile errors feat: run lint on new PRs type node .

refactor: update the openAPI spec for RTK code generation (#33)

8bd4ae8

fix: autogenerated response definition for getSafeOverview was missing (

8d4f7da

#37)

clovisdasilvaneto and others added 19 commits December 20, 2024 14:11

chore: adjust components folder structure (#40)

8790c51

* chore: add contributing.md file in the project * chore: generated snapshots� * chore: change folder structures * chore: adjust contributing.md

fix: unit tests of Identicon component (#41)

4ab9f18

* fix: unit tests * fix: remove early null return

fix: wrong color for settings (#39)

b5ff1a8

Chore: Refactor features folder to follow code guidelines (#43)

1fdbeb9

* chore: adjust features folder structure * chore: change features folder definition * fix: broken ts import

feat: blurred identicon header (#42)

dc22e65

fix: crash in production (#44)

3e1a251

The endpoint was returning more results, but we were not going after the next page. Instead we were agian polling the first page and this ended up in 429.

fix: wrong background (#45)

6ea5053

chore: manual ios deployment (#46)

d955405

fix: avoid using complex values to not have the UnhandledLinkingConte…

d24abe2

…xt error (#51)

Eas (#49)

d9a3934

* feature: build with eas We are now able to build on eas. For android: Since the app didn’t go through the app store approval versions we submit need to be in draft state.

chore: clean up (#52)

903f114

We rely on Expo’s Continuous Native Generation (https://docs.expo.dev/workflow/continuous-native-generation/). For some reason those files were still left, despite the fact that we’ve ignored the ios and android folders.

feat: Loading screen (#56)

3a12ca0

* fix: remove duplicated folder * feat: add splash scren configuration

Merge remote-tracking branch 'mobile-app/reorganised-history' into mo…

0107aa7

…bile-monorepo-correct

fix: tsc failing in web package

5e835f6

compojoom force-pushed the mobile-monorepo branch from 98d320e to 5e835f6 Compare December 20, 2024 14:44

compojoom marked this pull request as ready for review December 20, 2024 14:46

compojoom requested a review from katspaugh December 20, 2024 14:48

compojoom mentioned this pull request Dec 20, 2024

Chore: monorepo setup #4690

Merged

3 tasks

compojoom requested a review from usame-algan December 20, 2024 15:13

katspaugh approved these changes Dec 20, 2024

View reviewed changes

katspaugh changed the title ~~Mobile monorepo~~ Epic: new mobile app (move to monorepo) Dec 20, 2024

fix: workflow names were not easily distinguishable

3b198da

Changes the name of the workflows so that it is now clear which workflow is running and to which app it relates

compojoom merged commit 3b198da into dev Dec 20, 2024
5 of 6 checks passed

compojoom deleted the mobile-monorepo branch December 20, 2024 16:03

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Epic: new mobile app (move to monorepo) #4698

Epic: new mobile app (move to monorepo) #4698

compojoom commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading

Epic: new mobile app (move to monorepo) #4698

Epic: new mobile app (move to monorepo) #4698

Conversation

compojoom commented Dec 19, 2024 • edited Loading

What it solves

How to test it

Screenshots

Checklist

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

Branch preview

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

compojoom commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading