UI redesign part 4 #883

mvaivre · 2024-10-11T09:17:50Z

No description provided.

changeset-bot · 2024-10-11T09:17:53Z

⚠️ No Changeset found

Latest commit: ac36054

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

To be well tested.

I use transparentModal as a presentation mode..!

However, scroll down to close modal is not working on Android

nop33

Just a quick pass over the diff!

I did not do any functional testing since it's still in draft mode.

nop33 · 2024-10-31T15:24:23Z

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

+
+export default RoundedCard
+
+const RoundedCardContainer = styled.View`


The pattern we've used so far is RoundedCardStyled for this sort of components

nop33 · 2024-10-31T15:26:18Z

apps/mobile-wallet/src/components/footers/FooterMenu.tsx

@@ -30,13 +30,14 @@ interface FooterMenuProps extends BottomTabBarProps {
  style?: StyleProp<ViewStyle>
 }

+const isIos = Platform.OS === 'ios'


nit: we have this in other places too. Let's extract it to a util somewhere or just use Platform.OS === 'ios' which is short enough imo

nop33 · 2024-10-31T15:28:55Z

apps/mobile-wallet/src/components/inputs/Input.tsx

+  useEffect(() => {
+    const fetchCopiedText = async () => {
+      const text = await getStringAsync()
+      setCopiedText(text)
+    }
+
+    fetchCopiedText()
+  })


The dependency array is missing.

Also, I started preferring this pattern, WDYT?

Suggested change

useEffect(() => {

const fetchCopiedText = async () => {

const text = await getStringAsync()

setCopiedText(text)

}

fetchCopiedText()

})

useEffect(() => {

getStringAsync().then(setCopiedText)

}, [])

I also like it better I think.

Changed to the pattern you proposed

nop33 · 2024-10-31T15:29:11Z

apps/mobile-wallet/src/components/inputs/Input.tsx

@@ -97,6 +115,10 @@ const Input = <T extends InputValue>({
    onBlur && onBlur(e)
  }


Missing dependency array

Code has been removed

nop33 · 2024-10-31T15:32:19Z

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

@@ -55,7 +61,8 @@ import { SessionRequestData } from '~/types/walletConnect'
 import { showExceptionToast } from '~/utils/layout'
 import { getTransactionAssetAmounts } from '~/utils/transactions'

-interface WalletConnectSessionRequestModalProps<T extends SessionRequestData> extends ModalContentProps {
+interface WalletConnectSessionRequestModalProps<T extends SessionRequestData> {
+  walletConnectClient: SignClient


Isn't this accessible via useWalletConnectContext?

nop33 · 2024-10-31T15:33:12Z

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

what a diff...

Have you tested all possible WC methods by using the example dapp?

It's just code blocks moving around. No code changes.

nop33 · 2024-10-31T15:37:24Z

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

+import { DEFAULT_MARGIN } from '~/style/globalStyle'
+
+interface BottomModalHeaderProps {
+  handleClose: () => void


we tend to call these props on... not handle...

Goal: reduce visual load to a minimum

Compute bottom buttons height automatically, adjust gradient and list paddingBottom accordingly. Tweak pointerEvents.

…ring

Migrate WalletConnectSessionRequestModal

4ab610b

To be well tested.

mvaivre force-pushed the UI-redesign-part4 branch from a332b16 to 4ab610b Compare October 11, 2024 12:36

mvaivre added 9 commits October 11, 2024 16:49

Add handy paste button to Input component

b02a778

Replace header canvas gradient by expo linear gradient

12d5e7f

Replace footer gradient with expo linear gradient

ce751ae

Android Navigation: workaround to avoid glitch

7462668

I use transparentModal as a presentation mode..!

Fix RoundedCard look

ba58ce9

Improve header / footer margins on Android

ec52509

Add padding bottom to BottomModal on Android

96528b5

Fix ActivityScreen's scroll end behaviour

fff2d49

Fix bottom modal scroll (Android) + avoid clash on iOS

d0f26b0

However, scroll down to close modal is not working on Android

mvaivre force-pushed the UI-redesign-part4 branch from d6f286e to d0f26b0 Compare October 16, 2024 14:12

mvaivre added 5 commits October 16, 2024 16:50

DRY things up with BottomModalBase

690aa7b

Dynamically mount modal's children according to their "scrollability"

7fdfa69

Extract BottomModalHeader

55eb0f5

Fix BottomModal types

d355c71

Improve Transaction modal

b790895

mvaivre force-pushed the UI-redesign-part4 branch from 2699872 to b790895 Compare October 16, 2024 15:58

mvaivre added 6 commits October 16, 2024 18:01

Fixes in new contact modal / screen

c1d81bb

Remove callbacks renames

d3c078e

Wrap Screens with KeyboardAvoidingView by default

edc2b33

Use flashListRenderer in BottomModalFlashList

e79ea23

Update modals titles

33c142e

flashListRenderer -> flashListRender

7ee0f08

nop33 reviewed Oct 31, 2024

View reviewed changes

mvaivre added 4 commits November 1, 2024 14:52

Redesign / simplify rows

86333c9

Layout tweaks

dc67ec7

BoxSurface -> Surface

0b44911

Redesign NftModal attribute list, simplify Row and Input components

2d6d313

mvaivre force-pushed the UI-redesign-part4 branch from 6e867be to 2d6d313 Compare November 2, 2024 10:04

mvaivre added 2 commits November 2, 2024 11:31

Fix BottomModalBase inner container

0598baa

Stop using progress header in Send flow, add gradient to BottomButtons

ed21fc6

Goal: reduce visual load to a minimum

mvaivre force-pushed the UI-redesign-part4 branch from 3f80a98 to ed21fc6 Compare November 2, 2024 11:24

mvaivre added 12 commits November 2, 2024 12:26

Input tweaks

9b049fd

Nit fixes

dfa571b

Fix Input copy text useEffect

1604e49

Use walletConnectClient from context in WalletConnectSessionRequestModal

85ed15c

Lint

5013d84

Send navigation header tweaks

842f5fa

Use FlashList for address selection screen

4c6d4d5

Add bottomButtonsRender props to ScrollScreen and FlashListScreen

da2baa6

Compute bottom buttons height automatically, adjust gradient and list paddingBottom accordingly. Tweak pointerEvents.

Add bottom button to verify screen

f3b4bcb

Use proper way to set custom header, but needs refinements

d6ebad8

Fix modal scrollable content flex

3fe8b5f

Use new layout in receive flow + allow address FlashList item rerende…

ac36054

…ring

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI redesign part 4 #883

UI redesign part 4 #883

mvaivre commented Oct 11, 2024

changeset-bot bot commented Oct 11, 2024 •

edited

Loading

nop33 left a comment

nop33 Oct 31, 2024

mvaivre Nov 5, 2024

nop33 Oct 31, 2024

mvaivre Nov 5, 2024

nop33 Oct 31, 2024

mvaivre Nov 1, 2024

mvaivre Nov 5, 2024

nop33 Oct 31, 2024

mvaivre Nov 5, 2024

nop33 Oct 31, 2024

nop33 Oct 31, 2024

mvaivre Nov 1, 2024

nop33 Oct 31, 2024


		export default RoundedCard

		const RoundedCardContainer = styled.View`

		@@ -97,6 +115,10 @@ const Input = <T extends InputValue>({
		onBlur && onBlur(e)
		}

UI redesign part 4 #883

Are you sure you want to change the base?

UI redesign part 4 #883

Conversation

mvaivre commented Oct 11, 2024

changeset-bot bot commented Oct 11, 2024 • edited Loading

⚠️ No Changeset found

nop33 left a 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

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

changeset-bot bot commented Oct 11, 2024 •

edited

Loading