feat(mobile): Add read-only safe #4844
Conversation
The current implementation of the dropdown component had one drawback: it could only be closed from the screen on which the dropdown was rendered. Imagine the following situation. “home screen” -> user opens “sheet modal” -> open “scan safe” screen -> open “import overview” screen -> open “signers screen” -> open “import screen” -> import The last step in the import flow is to save the “safe wallet” in the safes store slice. Once this is done the expected behavior would be to send the user back to the home screen with the newly saved safe as active. To do this on the last step in the import flow we can do: router.dismissTo(“/“) -> this will navigate the user to the “scan safe” screen (the first screen in the stack). Now to close it and return to the previous stack we do router.back() unfortunately the user is presented with the “sheet modal” instead of the “home” screen. Unfortunately form the “import” screen we cannot control the state of the “sheet modal”. To go around this problem, I’ve refactored the code. Now the “sheet modal” is a separate “accounts sheet” screens. This way it is part of the navigation and we can dismiss it through the router. In the above case, since we do: router.dismissTO(“/“) -> this brings us to the “scan safe” screen router.back() -> brings us to the “accounts sheet” screen router.back() -> brings us to the “home” screen
The SafeButton component now contains all possible Buttons that we see across our designs.
Branch preview✅ Deploy successful! Storybook: |
📦 Next.js Bundle Analysis for @safe-global/webThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.06 MB (🟡 +68.89 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-two 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.06 MB |
/address-book |
23.21 KB (🟡 +143 B) |
1.08 MB |
/apps |
35.97 KB (🟡 +2.25 KB) |
1.09 MB |
/apps/custom |
34.03 KB (🟡 +2.25 KB) |
1.09 MB |
/apps/open |
55.56 KB (🟡 +1.95 KB) |
1.11 MB |
/balances |
30.03 KB (🟡 +333 B) |
1.09 MB |
/balances/nfts |
9.52 KB (🟢 -23 B) |
1.07 MB |
/bridge |
2.55 KB (🟢 -5 B) |
1.06 MB |
/cookie |
8.77 KB (🟡 +1 B) |
1.06 MB |
/home |
61.54 KB (🟡 +2.28 KB) |
1.12 MB |
/licenses |
2.46 KB (🟢 -1 B) |
1.06 MB |
/new-safe/advanced-create |
26.38 KB (🟢 -75 B) |
1.08 MB |
/new-safe/create |
25.52 KB (🟢 -67 B) |
1.08 MB |
/privacy |
14.57 KB (🟡 +2 B) |
1.07 MB |
/settings/appearance |
2.25 KB (🟡 +1 B) |
1.06 MB |
/settings/cookies |
1.87 KB (🟡 +1 B) |
1.06 MB |
/settings/modules |
4.06 KB (🟡 +3 B) |
1.06 MB |
/settings/notifications |
6.34 KB (🟢 -14.98 KB) |
1.06 MB |
/settings/safe-apps |
20.35 KB (🟡 +2.08 KB) |
1.08 MB |
/settings/security |
2.34 KB (🟡 +2 B) |
1.06 MB |
/settings/setup |
30.97 KB (🟡 +246 B) |
1.09 MB |
/share/safe-app |
7.55 KB (🟢 -8 B) |
1.06 MB |
/stake |
617 B (🟢 -2 B) |
1.06 MB |
/swap |
763 B (🟡 +3 B) |
1.06 MB |
/terms |
12.93 KB (🟡 +1 B) |
1.07 MB |
/transactions |
99.45 KB (🟡 +2.88 KB) |
1.15 MB |
/transactions/history |
99.41 KB (🟡 +2.88 KB) |
1.15 MB |
/transactions/messages |
60.25 KB (🟡 +1.95 KB) |
1.11 MB |
/transactions/msg |
56.5 KB (🟡 +1.95 KB) |
1.11 MB |
/transactions/queue |
49.36 KB (🟡 +1.96 KB) |
1.1 MB |
/transactions/tx |
48.71 KB (🟡 +1.95 KB) |
1.1 MB |
/welcome/accounts |
408 B (🟡 +1 B) |
1.06 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.
Coverage report for
|
St.❔ |
Category | Percentage | Covered / Total |
|---|---|---|---|
| 🟡 | Statements | 77.47% (+0.01% 🔼) |
13867/17899 |
| 🔴 | Branches | 56.81% (+0.02% 🔼) |
3492/6147 |
| 🟡 | Functions | 62.81% | 2086/3321 |
| 🟡 | Lines | 78.9% (+0.01% 🔼) |
12511/15857 |
Test suite run success
1783 tests passing in 240 suites.
Report generated by 🧪jest coverage report action from f0e5668
What it solves
This PR got a bit out of hand. 😊
- updated to RN .77
(I'm building on top of the RN update branch) I had to do this becuase we were running into a bug and I was unsure what the cause for it was. At the end we could narrow it down to expo-blur, react-native-reanimated and expo-router. I've opened a issue report with expo, but no response so far: expo/expo#34367
Despite that I built on top of RN .77, because we should strive to be up to date anyway.
- storybook fixes
Since we moved to the monorepo setup storybook was not compiling and I needed it to see some of our components
The previous config for the automatically generated RTK Query code was missing the option to generate lazy queries. I needed those: https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#uselazyquerysubscription
- Button component
We did have a single SafeButton component, but it was outputing just the primary button design. In the designs I had multiple buttons that we didn't implement yet.
- Light theme was not following the design
It turned out that our light theme was not following the figma designs (for some reason we went with a white background, where in reality it is grey and we have white containers on top of it). Had to adapt the designs a bit:
** - Refactor the bottom sheet component **
The import read-only safe flow starts from the bottom sheet component. It turned out that the way we implemented it was problematic as we couldn't control the state of the sheet from the outside. There are often situation where you want to navigate to a screen and the sheet should be closed. This made it necessary to move the sheet to a separate screen. This way we can control it through the navigation
- Import read-only safe
The functionality is there. You can scan a safe and add it to the list of active safes.
UI wise we are going to merge some other PRs first and I'll rebase this branch and use the UI from the other PRs to finish the flow.
Resolves #
How this PR fixes it
How to test it
Screenshots
Checklist