feat: add create wallet drawer #316
Conversation
edgarkhanzadian
requested review from
kyranjamie,
pete-watters,
fbwoolf and
alter-eggo
WalkthroughThe changes introduced in the mobile application enhance the wallet management functionality, particularly through the addition of a new modal for wallet creation. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DeveloperConsoleScreen
participant AddWalletModal
User->>DeveloperConsoleScreen: Press "Add Wallet" Button
DeveloperConsoleScreen->>AddWalletModal: Open Modal
AddWalletModal-->>User: Display Wallet Options
User->>AddWalletModal: Select "Create New Wallet"
AddWalletModal->>DeveloperConsoleScreen: Create Wallet Process
DeveloperConsoleScreen-->>User: Wallet Created Successfully
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (1)
apps/mobile/src/components/bottom-sheet-modal.tsx (1)
Line range hint
109-112:
Reminder: Add tests for the new animated position functionality.Ensure that tests are added to cover the new animated position functionality.
Do you want me to generate the unit testing code or open a GitHub issue to track this task?
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (10)
apps/mobile/ios/Podfile.lockis excluded by!**/*.lockapps/mobile/src/assets/arrow-rotate-clockwise.svgis excluded by!**/*.svgapps/mobile/src/assets/color-swatch.svgis excluded by!**/*.svgapps/mobile/src/assets/create-wallet-image.pngis excluded by!**/*.pngapps/mobile/src/assets/dot-grid-horizontal.svgis excluded by!**/*.svgapps/mobile/src/assets/envelope.svgis excluded by!**/*.svgapps/mobile/src/assets/eye.svgis excluded by!**/*.svgapps/mobile/src/assets/nfc.svgis excluded by!**/*.svgapps/mobile/src/assets/plus-icon.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (3)
- apps/mobile/src/app/wallet/developer-console.tsx (4 hunks)
- apps/mobile/src/components/add-wallet/add-wallet-modal.tsx (1 hunks)
- apps/mobile/src/components/bottom-sheet-modal.tsx (3 hunks)
Additional comments not posted (9)
apps/mobile/src/app/wallet/developer-console.tsx (3)
1-10: LGTM! Import statements are appropriate.The new imports are necessary for the modal functionality.
20-21: LGTM! New modal reference is correctly implemented.The
useRefhook is used appropriately to create a reference for the modal.
39-42: LGTM! Modal trigger is correctly implemented.The
PressableListItemcorrectly triggers the modal when pressed.apps/mobile/src/components/bottom-sheet-modal.tsx (3)
5-9: LGTM! Import statements are appropriate.The new imports are necessary for the animated position functionality.
74-74: LGTM! Constant declaration is appropriate.The
CLOSED_ANIMATED_POSITIONconstant is correctly defined and used.
76-102: LGTM! Component update is correctly implemented.The
Modalcomponent is correctly updated to accept and use theanimatedPositionprop.apps/mobile/src/components/add-wallet/add-wallet-modal.tsx (3)
1-23: LGTM! Import statements are appropriate.The new imports are necessary for the modal functionality.
25-65: LGTM! Component implementation is correct.The
AddWalletListItemcomponent is well-structured and correctly handles optional props.
92-166: LGTM! Component implementation is correct.The
AddWalletModalcomponent is well-structured and correctly uses theModalcomponent. The state and animated styles are appropriately managed.
| @@ -59,6 +66,7 @@ export default function DeveloperConsoleScreen() { | |||
| setGetAddressesMessage(null); | |||
| }} | |||
| /> | |||
| <AddWalletModal addWalletModalRef={addWalletModalRef} /> | |||
There was a problem hiding this comment.
Reminder: Add tests for the new modal functionality.
Ensure that tests are added to cover the new modal functionality.
Do you want me to generate the unit testing code or open a GitHub issue to track this task?
There was a problem hiding this comment.
Looks great @edgarkhanzadian
Only improvement I'd suggestion would be to compose this UI of two component: one to handle business logic and content, another to encapsulate all the animation logic (of which there is lots).
|
@kyranjamie good point! I'll separate it when adding feature logic here, animations get out of hand pretty quickly |
createWallet.mov
Summary by CodeRabbit
New Features
AddWalletModalcomponent for a visually appealing wallet management interface, featuring options to create, restore, and view wallet functionalities.Improvements
Modalcomponent with support for animated positioning and improved styling for a cohesive design.Bug Fixes