UI redesign part3 #858

mvaivre · 2024-09-27T13:32:10Z

In this PR:

Fix Dashboard bugs (amount not appearing sometimes)
Migrate all modals to the new system. => Just lacking ONE... WalletConnectSessionRequestModal.
Refine the new loading / landing UI

changeset-bot · 2024-09-27T13:32:13Z

⚠️ No Changeset found

Latest commit: e0a2948

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Contact screen will be refactored later

Needs optimization to avoid visual artefacts

…with onContentSizeChange

…down children?

… lists

nop33 · 2024-10-09T21:15:17Z

Maybe it's time to break this PR in smaller chunks again? :/ It seems to be growing a lot. Maybe I can start reviewing and you can work on part 4?

Supports the same functionalities as the original one. TODO: I couldn't use animated scroll utility function anymore, and I feel like the drag gesture is less smooth. Test it.

This will make reusibility way easier (cf. next commit)

…odal

UX needs to be tested (should we close the first modal manually?)

Note: The huge diff is due to reorganizing callbacks, not actual changes

mvaivre · 2024-10-11T07:08:24Z

apps/mobile-wallet/src/components/AnimatedBackground.tsx

+  // Using sin allows to smoothen movements (espacially when phon is upside down)
+  const sinRoll = useDerivedValue(() => Math.sin(gyroscope.sensor.value.roll))
+  const sinPitch = useDerivedValue(() => Math.sin(gyroscope.sensor.value.pitch))
+


This prevents the weird movements we've seen before

mvaivre · 2024-10-11T07:10:18Z

apps/mobile-wallet/src/components/ConsolidationModal.tsx

-        </ButtonsRow>
-      </ScreenSection>
-    </ModalContent>
+    <BottomModal modalId={id}>


Comment about the whole PR: every time I've wrapped a modal in BottomModal, the whole component is marked as changed, but it's not.

What you should take a look at it how I extracted the callbacks, like handleConsolidate above. The main difference is that the modals are now responsible for closing themselves once the callbacks are executed. Before, it was the parents which were handling this.

mvaivre · 2024-10-11T07:12:24Z

apps/mobile-wallet/src/components/layout/Screen.tsx

 }

-const Screen = ({ children, headerOptions, ...props }: ScreenProps) => {
+const Screen = ({ children, headerOptions, safeAreaPadding, usesKeyboard, ...props }: ScreenProps) => {


Added the same functionalities as ScrollScreen. We used to use scroll screens when not actually needed. I've replaced some of them with simple non-scrollable screens.

mvaivre · 2024-10-11T07:13:19Z

apps/mobile-wallet/src/components/layout/TransactionsFlashList.tsx

+    }, [allConfirmedTransactionsLoaded, dispatch, isLoading])
+
+    return (
+      <FlashList


It was using a FlatList before.

mvaivre · 2024-10-11T07:15:58Z

apps/mobile-wallet/src/features/modals/BottomModal.tsx

+    handleClose,
+    contentScrollHandlers,
+    isScrollable
+  } = useBottomModalState({


Extracted the animation and gesture logic in a hook, allowing reusability in BottomModalFlashList.

mvaivre · 2024-10-11T07:17:23Z

apps/mobile-wallet/src/features/modals/BottomModalFlashList.tsx

+
+export default BottomModalFlashList
+
+const KeyboardAvoidingViewStyled = styled(KeyboardAvoidingView)`


Styles are the same as in BottomModal for now. But it may change in the future - I want to refactor the modals header & title. The implementation will probably not be the same in both BottomModal variants.

mvaivre · 2024-10-11T07:18:06Z

apps/mobile-wallet/src/features/modals/ModalContent.tsx

@@ -38,6 +38,8 @@ export interface ModalFlatListContentProps<T> extends ModalContentBaseProps, Fla

 const scrollDefaultProps = { bounces: false, scrollEventThrottle: 16 }

+// TODO: DELETE THIS COMPONENT ONCE BOTTOM MODAL IS REFACTORED


We will actually keep ModalContent probably, but the file can be cleaned up a lot.

mvaivre · 2024-10-11T07:20:20Z

apps/mobile-wallet/src/features/modals/useBottomModalState.tsx

+  const contentScrollHandlers: ContentScrollHandlers = {
+    onScroll: (e) => {
+      contentScrollY.value = e.nativeEvent.contentOffset.y
+
+      if (!isContentDragged.value) return
+
+      if (contentScrollY.value <= 0) {
+        // Move the modal
+        if (contentScrollY.value < previousContentScrollY.value) {
+          const newModalHeightValue = modalHeight.value - contentScrollY.value
+          modalHeightDelta.value = modalHeight.value - newModalHeightValue
+          modalHeight.value = newModalHeightValue
+        }
+      } else if (-modalHeight.value < maxHeight) {
+        handleMaximize()
+      }
+      previousContentScrollY.value = contentScrollY.value
+    },
+    onScrollBeginDrag: () => {
+      isContentDragged.value = true
+    },
+    onScrollEndDrag: () => {
+      isContentDragged.value = false
+
+      if (modalHeightDelta.value < -1) {
+        handleClose()
+      }
+    }
+  }


So, that was a pain in the 🍑
It's not perfect yet, there are some glitches when the use scrolls down the content a bit, then go back up again. But for closing modals quickly it works well.

apps/mobile-wallet/src/features/send/modals/SelectAddressModal.tsx

mvaivre · 2024-10-11T07:26:41Z

apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx

This diff highlight the main limitation with the new way to open modals. Because we need to pass callbacks in openModal, we need to take into account where openModal is called. All needed callbacks must be declared before the function is used, which can be a little tricky. Also, more useCallback hooks are now required.

nop33 · 2024-10-14T07:44:46Z

apps/mobile-wallet/src/screens/NFTs/NFTListScreen.tsx

@@ -31,13 +35,17 @@ type NFTListScreenProps = StackScreenProps<InWalletTabsParamList, 'NFTListScreen
 const NFTListScreen = ({ navigation }: NFTListScreenProps) => {
  const { t } = useTranslation()
  const { screenScrollY, screenScrollHandler } = useScreenScrollHandler()
+  const listRef = useRef<FlashList<NFT>>(null)


What is the reason this ref is needed?

apps/mobile-wallet/src/screens/LandingScreen.tsx

apps/mobile-wallet/package.json

nop33

I went through all files. The GH UI is very laggy due to the amount of them 😆

I will do some more functional tests once I get some feedback on the review 👍

apps/mobile-wallet/src/components/layout/Screen.tsx

apps/mobile-wallet/src/contexts/SendContext.tsx

apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx

apps/mobile-wallet/src/features/modals/BottomModal.tsx

apps/mobile-wallet/src/features/modals/BottomModalFlashList.tsx

apps/mobile-wallet/src/features/walletconnect/WalletConnectPairingsModal.tsx

apps/mobile-wallet/src/hooks/layout/useAutoScrollOnDragEnd.tsx

apps/mobile-wallet/src/navigation/RootStackNavigation.tsx

nop33 · 2024-10-14T10:33:28Z

apps/mobile-wallet/src/navigation/RootStackNavigation.tsx

-      <View style={{ backgroundColor: 'black', flex: 1 }}>
-        <AnimatedCirclesBackground isAnimated />
-      </View>
+    <Modal visible={!!lastUsedWalletId && biometricsRequiredForAppAccess && !isWalletUnlocked} animationType="fade">


Hm, I remember that changing it to fade creates a weird artefact but I don't remember exactly how. I need to do a functional test.

I don't see any artefact in the next PR 🤞

mvaivre force-pushed the UI-redesign-part3 branch 10 times, most recently from 74af13d to c45fe76 Compare October 2, 2024 09:10

mvaivre changed the base branch from UI-redesign-part2 to banxa-next October 3, 2024 07:43

mvaivre added 18 commits October 3, 2024 10:07

Tweak header animation for better readability

05d528b

Add scroll end behaviour to NFTListScreen

ecd449e

Use FlashList for TransactionsFlatList

6e127d5

Fix / improve most headers

993ef19

Contact screen will be refactored later

Don't mount modals if wallet is locked

3665ba6

Fix weird visual artefact when BuyModal is opening

18d5f70

Fix Dashboard blurred card glitches

5f42172

Improve landing / splash screens style and layout

c235c5a

Try wrapping modals in KeyboardAvoidingView

91f309e

Transform EditWalletNameScreen into a modal & tweak keyboard behaviour

69f9f53

Needs optimization to avoid visual artefacts

More precise selector

7164d97

Print error if a modal is already open

87f21ba

Move backup related screens in features/backup folder

c6af455

Create backupSlice, store need for backup reminder modal to be shown

7a6f4c4

Refactor BottomModal, fixing re-rendering issues

8128294

Convert more bottomModals, use ScrollView to properly compute height …

9dfe6c6

…with onContentSizeChange

Dynmic content scroll & somehow allow closing the modal by scrolling …

54bc305

…down children?

Quick experimentation with design while inspiration strikes

394307f

mvaivre added 2 commits October 9, 2024 17:01

Migrate SafePlaceWarningModal

0a8ae4d

Start to migrate SelectAddressModal but need strategy for virtualized…

a0cb542

… lists

mvaivre added 6 commits October 10, 2024 13:08

Extract BottomModal animation logic & state in a hook

e825617

Create BottomModalFlashList

9ec84be

Supports the same functionalities as the original one. TODO: I couldn't use animated scroll utility function anymore, and I feel like the drag gesture is less smooth. Test it.

Keep modal handle visible

6360765

Update BottomModalFlashList to directly accept a FlashList

bcd1708

This will make reusibility way easier (cf. next commit)

Remove ScrollScreen from NftGridModal (directly use FlashList)

77a4eee

Continue to migrate Modals, prevent maximizing if not necessary

95b5449

mvaivre force-pushed the UI-redesign-part3 branch from 8c3597f to 95b5449 Compare October 10, 2024 16:50

mvaivre added 5 commits October 10, 2024 20:28

Migrate ConsolidationModal

0d7ebd6

Move Send screens and modals to features/send, migrate SelectContactM…

3704771

…odal

Fix type infinite loop error in SelectContactModal

9435d8d

Init features/receive folder

b100963

Migrate WalletConnectErrorModal

42a630f

mvaivre force-pushed the UI-redesign-part3 branch from a1f4546 to 42a630f Compare October 10, 2024 19:25

mvaivre added 3 commits October 10, 2024 22:13

Migrate WalletConnect modals

ee8acbe

UX needs to be tested (should we close the first modal manually?)

Migrate WalletConnectSessionProposalModal

628b405

Note: The huge diff is due to reorganizing callbacks, not actual changes

Typo

c8c16ff

mvaivre commented Oct 11, 2024

View reviewed changes

mvaivre added 2 commits October 11, 2024 10:02

Remove unused NFTsGridModal in AddressesTokensList

0d45c95

Migrate GroupSelectModal

e0a2948

mvaivre requested a review from nop33 October 11, 2024 09:19

mvaivre marked this pull request as ready for review October 11, 2024 09:19

nop33 reviewed Oct 14, 2024

View reviewed changes

mvaivre mentioned this pull request Oct 31, 2024

Pass WC methods through the WC context instead of passing them as callback props #947

Open

nop33 approved these changes Oct 31, 2024

View reviewed changes

mvaivre merged commit 4d5201c into banxa-next Oct 31, 2024
4 of 5 checks passed

nop33 deleted the UI-redesign-part3 branch December 11, 2024 17:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI redesign part3 #858

UI redesign part3 #858

mvaivre commented Sep 27, 2024 •

edited

Loading

changeset-bot bot commented Sep 27, 2024 •

edited

Loading

nop33 commented Oct 9, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

mvaivre Oct 11, 2024

nop33 Oct 14, 2024

nop33 left a comment •

edited

Loading

nop33 Oct 14, 2024

mvaivre Oct 21, 2024


		export default BottomModalFlashList

		const KeyboardAvoidingViewStyled = styled(KeyboardAvoidingView)`

		@@ -38,6 +38,8 @@ export interface ModalFlatListContentProps<T> extends ModalContentBaseProps, Fla

		const scrollDefaultProps = { bounces: false, scrollEventThrottle: 16 }

		// TODO: DELETE THIS COMPONENT ONCE BOTTOM MODAL IS REFACTORED

UI redesign part3 #858

UI redesign part3 #858

Conversation

mvaivre commented Sep 27, 2024 • edited Loading

changeset-bot bot commented Sep 27, 2024 • edited Loading

⚠️ No Changeset found

nop33 commented Oct 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nop33 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mvaivre commented Sep 27, 2024 •

edited

Loading

changeset-bot bot commented Sep 27, 2024 •

edited

Loading

nop33 left a comment •

edited

Loading