-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(swap): Initial Swap screen redesign (#5409)
### Description First part of [RET-1065](https://linear.app/valora/issue/RET-1065/[wallet]-swap-screen-redesign). Updates the design of swap screen to match the [designs in Figma](https://www.figma.com/design/fjpfHZdVSLazv330kT2sQz/Cross-chain-swaps?node-id=606-1653&t=Bq4e7bCLkjpGu4D0-4). The rest of the behavior outlined in the ticket will come in followup PRs. ### Test plan Unit and manual tested. See video below: https://github.com/valora-inc/wallet/assets/569401/c078eb34-4cd2-4fe9-a9a2-f5eba85c0c47 ### Related issues - Part of [RET-1065](https://linear.app/valora/issue/RET-1065/[wallet]-swap-screen-redesign). ### Backwards compatibility Yes. ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
- Loading branch information
Showing
9 changed files
with
260 additions
and
180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,48 @@ | ||
import * as React from 'react' | ||
import { TouchableWithoutFeedbackProps, View } from 'react-native' | ||
import { TouchableWithoutFeedbackProps, View, ViewStyle } from 'react-native' | ||
import PlatformTouchable from 'react-native-platform-touchable' | ||
|
||
type BorderRadiusStyle = Pick< | ||
ViewStyle, | ||
| 'borderTopLeftRadius' | ||
| 'borderTopRightRadius' | ||
| 'borderBottomLeftRadius' | ||
| 'borderBottomRightRadius' | ||
> | ||
|
||
export interface Props extends TouchableWithoutFeedbackProps { | ||
borderless?: boolean | ||
children: React.ReactNode // must only have one direct child. see https://github.com/react-native-community/react-native-platform-touchable#touchable | ||
borderRadius?: number | ||
borderRadius?: number | BorderRadiusStyle | ||
shouldRenderRippleAbove?: boolean | ||
} | ||
|
||
/** | ||
* @param borderless - If true, the touchable has a borderless ripple effect. | ||
* @param borderRadius - should be added if the touchable component has rounded corners, to prevent the ripple effect from going outside the component on tap (Android) | ||
* @param borderRadius - should be added if the touchable component has rounded corners, to prevent the ripple effect from going outside the component on tap (Android). Can either be a number | ||
* representing a single border radius, or an object individually specifying each corner's radius. | ||
* @param shouldRenderRippleAbove - If present, ensures that the ripple effect will render above the touchable component. See https://github.com/facebook/react-native/issues/17200 | ||
* @returns A touchable component | ||
*/ | ||
export default function Touchable({ borderless, borderRadius = 0, ...passThroughProps }: Props) { | ||
export default function Touchable({ | ||
shouldRenderRippleAbove, | ||
borderless, | ||
borderRadius = 0, | ||
...passThroughProps | ||
}: Props) { | ||
const background = borderless | ||
? PlatformTouchable.SelectableBackgroundBorderless() | ||
: PlatformTouchable.SelectableBackground() | ||
const borderStyle = typeof borderRadius === 'number' ? { borderRadius } : borderRadius | ||
return borderRadius === 0 ? ( | ||
<PlatformTouchable {...passThroughProps} background={background} /> | ||
) : ( | ||
<View style={[{ borderRadius }, !borderless && { overflow: 'hidden' }]}> | ||
<PlatformTouchable {...passThroughProps} background={background} /> | ||
<View style={[borderStyle, !borderless && { overflow: 'hidden' }]}> | ||
<PlatformTouchable | ||
{...passThroughProps} | ||
background={shouldRenderRippleAbove ? undefined : background} | ||
foreground={shouldRenderRippleAbove ? background : undefined} | ||
/> | ||
</View> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.