Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const ActionListItem: React.FC<ActionListItemProps> = ({
descriptionTextProps,
iconProps,
isDisabled = false,
hasBackground = true,
...pressableProps
}) => {
const tw = useTailwind();
Expand Down Expand Up @@ -98,11 +99,12 @@ const ActionListItem: React.FC<ActionListItemProps> = ({
const getStyle = useCallback(
({ pressed }: { pressed: boolean }) =>
tw.style(
'bg-default px-4 py-3',
pressed && !isDisabled && 'bg-default-pressed',
'px-4 py-3',
hasBackground && 'bg-default',
hasBackground && pressed && !isDisabled && 'bg-default-pressed',
isDisabled && 'opacity-50',
),
[tw, isDisabled],
[tw, hasBackground, isDisabled],
);

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,9 @@ export interface ActionListItemProps extends Omit<PressableProps, 'disabled'> {
* When true, applies 50% opacity and disables interactions.
*/
isDisabled?: boolean;
/**
* Whether to render the default row background and pressed background.
* When false, the row renders transparently.
*/
hasBackground?: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Platform, StyleSheet, ViewStyle } from 'react-native';

// External dependencies.
import { Theme } from '../../../../../../util/theme/models';
import { AppThemeKey, Theme } from '../../../../../../util/theme/models';

// Internal dependencies.
import { BottomSheetDialogStyleSheetVars } from './BottomSheetDialog.types';
Expand All @@ -21,7 +21,7 @@ const styleSheet = (params: {
vars: BottomSheetDialogStyleSheetVars;
}) => {
const { vars, theme } = params;
const { colors, shadows } = theme;
const { colors, shadows, themeAppearance } = theme;
const { isFullscreen, maxSheetHeight, screenBottomPadding, style } = vars;

return StyleSheet.create({
Expand All @@ -33,7 +33,10 @@ const styleSheet = (params: {
} as ViewStyle) as ViewStyle,
sheet: Object.assign(
{
backgroundColor: colors.background.default,
backgroundColor:
themeAppearance === AppThemeKey.dark
? colors.background.section
: colors.background.default,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
maxHeight: maxSheetHeight,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { StyleSheet } from 'react-native';
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to this PR can be merged before this #28609


// External dependencies.
import { Theme } from '../../../../util/theme/models';
import { AppThemeKey, Theme } from '../../../../util/theme/models';

/**
* Style sheet function for SheetHeader component.
Expand All @@ -14,14 +14,17 @@ import { Theme } from '../../../../util/theme/models';
*/
const styleSheet = (params: { theme: Theme }) => {
const { theme } = params;
const { colors } = theme;
const { colors, themeAppearance } = theme;
return StyleSheet.create({
base: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
margin: 16,
backgroundColor: colors.background.default,
backgroundColor:
themeAppearance === AppThemeKey.dark
? colors.background.section
: colors.background.default,
height: 32,
},
leftAccessory: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
useColorScheme,
} from 'react-native';
import Video from 'react-native-video';
import LinearGradient from 'react-native-linear-gradient';
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, import-x/no-commonjs
const MarketInsightsBackgroundVideoLight = require('../../animations/market-insights-background-light.mp4');
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, import-x/no-commonjs
Expand Down Expand Up @@ -583,7 +584,7 @@ const MarketInsightsView: React.FC = () => {
showsVerticalScrollIndicator={false}
testID={MarketInsightsSelectorsIDs.VIEW_SCROLL}
>
<Box twClassName="w-full" style={{ aspectRatio: 786 / 340 }}>
<Box twClassName="w-full" style={{ aspectRatio: 786 / 240 }}>
{showLastFrame && (
<Image
source={lastFrameImage}
Expand All @@ -606,6 +607,13 @@ const MarketInsightsView: React.FC = () => {
testID={MarketInsightsSelectorsIDs.BACKGROUND_ANIMATION}
/>
)}
<LinearGradient
colors={[
`${theme.colors.background.default}00`,
theme.colors.background.default,
]}
style={tw.style('absolute bottom-0 left-0 right-0 h-16')}
/>
</Box>
<AnimatedSection delay={SECTION_ANIMATION_DELAYS_MS.topArticle}>
<Box twClassName="px-4 pt-4 pb-3">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const MarketInsightsViewSkeleton: React.FC<MarketInsightsViewSkeletonProps> = ({
>
<Skeleton
width="100%"
style={tw.style('w-full', { aspectRatio: 786 / 340 })}
style={tw.style('w-full', { aspectRatio: 786 / 240 })}
/>

<Box twClassName="px-4 pt-4 pb-3" gap={2}>
Expand Down
Binary file modified app/components/UI/MarketInsights/animations/market-insights-background-dark.mp4
100644 → 100755
Binary file not shown.
Binary file modified app/components/UI/MarketInsights/animations/market-insights-background-light.mp4
100644 → 100755
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -270,13 +270,14 @@ function TradeWalletActions() {
>
<Box
style={tw.style(
'bg-default p-4 rounded-2xl mx-4',
'bg-alternative p-4 rounded-2xl mx-4',
`pb-[${bottomMaskHeight - 12}px]`,
`px-0`,
)}
>
{AppConstants.SWAPS.ACTIVE && (
<ActionListItem
hasBackground={false}
label={strings('asset_overview.swap')}
description={strings('asset_overview.swap_description')}
iconName={IconName.SwapVertical}
Expand All @@ -287,6 +288,7 @@ function TradeWalletActions() {
)}
{isPerpsEnabled && (
<ActionListItem
hasBackground={false}
label={strings('asset_overview.perps_button')}
description={strings('asset_overview.perps_description')}
iconName={IconName.Candlestick}
Expand All @@ -297,6 +299,7 @@ function TradeWalletActions() {
)}
{isPredictEnabled && (
<ActionListItem
hasBackground={false}
label={strings('asset_overview.predict_button')}
description={strings('asset_overview.predict_description')}
iconName={IconName.Speedometer}
Expand All @@ -307,6 +310,7 @@ function TradeWalletActions() {
)}
{isEarnWalletActionEnabled && isEarnEligible && (
<ActionListItem
hasBackground={false}
label={strings('asset_overview.earn_button')}
description={strings('asset_overview.earn_description')}
iconName={IconName.Stake}
Expand Down
17 changes: 13 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,11 @@
"@metamask/keyring-api@npm:^21.5.0": "21.6.0",
"@metamask/keyring-api@npm:^21.6.0": "23.0.1",
"@metamask/keyring-api@npm:^22.0.0": "23.0.1",
"@metamask/keyring-api@npm:^23.0.1": "23.0.1"
"@metamask/keyring-api@npm:^23.0.1": "23.0.1",
"@metamask/design-system-react-native": "patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch",
"@metamask/design-system-shared": "npm:@metamask-previews/design-system-shared@0.15.0-preview.f515a62",
"@metamask/design-system-twrnc-preset": "npm:@metamask-previews/design-system-twrnc-preset@0.4.2-preview.f515a62",
"@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.f515a62"
},
"dependencies": {
"@braze/react-native-sdk": "patch:@braze/react-native-sdk@npm%3A19.1.0#~/.yarn/patches/@braze-react-native-sdk-npm-19.1.0-076-reactmoduleinfo.patch",
Expand All @@ -226,6 +230,10 @@
"@lavamoat/react-native-lockdown": "^0.0.2",
"@ledgerhq/hw-app-eth": "^6.42.0",
"@ledgerhq/react-native-hw-transport-ble": "^6.37.0",
"@metamask-previews/design-system-react-native": "patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch",
"@metamask-previews/design-system-shared": "0.15.0-preview.f515a62",
"@metamask-previews/design-system-twrnc-preset": "0.4.2-preview.f515a62",
"@metamask-previews/design-tokens": "8.3.0-preview.f515a62",
"@metamask/abi-utils": "^3.0.0",
"@metamask/account-api": "^1.0.0",
"@metamask/account-tree-controller": "^7.1.0",
Expand All @@ -250,9 +258,10 @@
"@metamask/core-backend": "^6.2.0",
"@metamask/delegation-controller": "^2.0.2",
"@metamask/delegation-deployments": "^1.0.0",
"@metamask/design-system-react-native": "^0.22.0",
"@metamask/design-system-twrnc-preset": "^0.4.2",
"@metamask/design-tokens": "^8.3.0",
"@metamask/design-system-react-native": "patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch",
"@metamask/design-system-shared": "npm:@metamask-previews/design-system-shared@0.15.0-preview.f515a62",
"@metamask/design-system-twrnc-preset": "npm:@metamask-previews/design-system-twrnc-preset@0.4.2-preview.f515a62",
"@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.f515a62",
"@metamask/earn-controller": "^12.0.0",
"@metamask/eip-5792-middleware": "^2.0.0",
"@metamask/eip1193-permission-middleware": "^1.0.2",
Expand Down
144 changes: 105 additions & 39 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7714,6 +7714,78 @@ __metadata:
languageName: node
linkType: hard

"@metamask-previews/design-system-react-native@npm:0.22.0-preview.f515a62":
version: 0.22.0-preview.f515a62
resolution: "@metamask-previews/design-system-react-native@npm:0.22.0-preview.f515a62"
dependencies:
"@metamask-previews/design-system-shared": "npm:0.15.0-preview.f515a62"
fast-text-encoding: "npm:^1.0.6"
react-native-jazzicon: "npm:^0.1.2"
peerDependencies:
"@metamask/design-system-twrnc-preset": ^0.4.0
"@metamask/design-tokens": ^8.2.0
"@metamask/utils": ^11.11.0
lodash: ^4.17.23
react: ">=18.2.0"
react-native: ">=0.76.0"
react-native-gesture-handler: ">=2.25.0"
react-native-reanimated: ">=3.17.0"
react-native-safe-area-context: ">=5.0.0"
checksum: 10/1f105fd83f1d6409bc38636cefeb2f122a5a6642947d84ac111e2ed3f3bec751cf115e51097b5fd6f8164a0b46ebe185acf44f51493316b61e6dede55cd45d62
languageName: node
linkType: hard

"@metamask-previews/design-system-react-native@patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch":
version: 0.22.0-preview.f515a62
resolution: "@metamask-previews/design-system-react-native@patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch::version=0.22.0-preview.f515a62&hash=f7f201"
dependencies:
"@metamask-previews/design-system-shared": "npm:0.15.0-preview.f515a62"
fast-text-encoding: "npm:^1.0.6"
react-native-jazzicon: "npm:^0.1.2"
peerDependencies:
"@metamask/design-system-twrnc-preset": ^0.4.0
"@metamask/design-tokens": ^8.2.0
"@metamask/utils": ^11.11.0
lodash: ^4.17.23
react: ">=18.2.0"
react-native: ">=0.76.0"
react-native-gesture-handler: ">=2.25.0"
react-native-reanimated: ">=3.17.0"
react-native-safe-area-context: ">=5.0.0"
checksum: 10/981e301d56802ce78307943965229136443abe07d19aea3f05c6419343c2ae66e1bde5808a3c59b668be47d7bc9a1272ea4dcfee15a1405cbeabb56602f7ac97
languageName: node
linkType: hard

"@metamask-previews/design-system-shared@npm:0.15.0-preview.f515a62, @metamask/design-system-shared@npm:@metamask-previews/design-system-shared@0.15.0-preview.f515a62":
version: 0.15.0-preview.f515a62
resolution: "@metamask-previews/design-system-shared@npm:0.15.0-preview.f515a62"
dependencies:
"@metamask/utils": "npm:^11.11.0"
peerDependencies:
react: ^17.0.0 || ^18.0.0 || ^19.0.0
checksum: 10/dc55748bf704e4b9baa48a3ba83920c44bf4b3fabb154cc8274dd036e3a1a7ab8ba2716db6bb813bcc58076ff993421b58c085227049c26260a06700892022d9
languageName: node
linkType: hard

"@metamask-previews/design-system-twrnc-preset@npm:0.4.2-preview.f515a62, @metamask/design-system-twrnc-preset@npm:@metamask-previews/design-system-twrnc-preset@0.4.2-preview.f515a62":
version: 0.4.2-preview.f515a62
resolution: "@metamask-previews/design-system-twrnc-preset@npm:0.4.2-preview.f515a62"
dependencies:
twrnc: "npm:^4.5.1"
peerDependencies:
"@metamask/design-tokens": ^8.0.0
react: ">=18.2.0"
checksum: 10/21e508150dafd241e845d50e5c1b573856eca223b13e35f7674c6f2467df1d35dece31d52760a656a693d5145edc1442b49ba4427aed6e81ae309bff5c06cac9
languageName: node
linkType: hard

"@metamask-previews/design-tokens@npm:8.3.0-preview.f515a62, @metamask/design-tokens@npm:@metamask-previews/design-tokens@8.3.0-preview.f515a62":
version: 8.3.0-preview.f515a62
resolution: "@metamask-previews/design-tokens@npm:8.3.0-preview.f515a62"
checksum: 10/40e588045441775d51720f748f4ba9d417990534e66b1f82d54dab7007d257ea48e8c5e5c1fe699e9729c0ae92548c884157baffaba7b59a136effc6efb3fac7
languageName: node
linkType: hard

"@metamask/7715-permission-types@npm:^0.5.0":
version: 0.5.0
resolution: "@metamask/7715-permission-types@npm:0.5.0"
Expand Down Expand Up @@ -8394,11 +8466,11 @@ __metadata:
languageName: node
linkType: hard

"@metamask/design-system-react-native@npm:^0.22.0":
version: 0.22.0
resolution: "@metamask/design-system-react-native@npm:0.22.0"
"@metamask/design-system-react-native@patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch":
version: 0.22.0-preview.f515a62
resolution: "@metamask/design-system-react-native@patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch::version=0.22.0-preview.f515a62&hash=f7f201"
dependencies:
"@metamask/design-system-shared": "npm:^0.15.0"
"@metamask-previews/design-system-shared": "npm:0.15.0-preview.f515a62"
fast-text-encoding: "npm:^1.0.6"
react-native-jazzicon: "npm:^0.1.2"
peerDependencies:
Expand All @@ -8411,37 +8483,7 @@ __metadata:
react-native-gesture-handler: ">=2.25.0"
react-native-reanimated: ">=3.17.0"
react-native-safe-area-context: ">=5.0.0"
checksum: 10/5deef0fbdb6871ae80e6ff85f40a402aba2b3ca8e224cb4cbe530d2bff436b6b1251323a9fd8422490bc24f3ec04377635bd39653d18f690068364d408bb9ea7
languageName: node
linkType: hard

"@metamask/design-system-shared@npm:^0.15.0":
version: 0.15.0
resolution: "@metamask/design-system-shared@npm:0.15.0"
dependencies:
"@metamask/utils": "npm:^11.11.0"
peerDependencies:
react: ^17.0.0 || ^18.0.0 || ^19.0.0
checksum: 10/a900d9cf73eb2fb6d84cd8f29387530ea4dde4fca1d22f7d85b2f05a47b71ed92bc4e2893d7a9589f2804afa22bc34566fb3e88ed9bf40a4211507efb2028b4c
languageName: node
linkType: hard

"@metamask/design-system-twrnc-preset@npm:^0.4.2":
version: 0.4.2
resolution: "@metamask/design-system-twrnc-preset@npm:0.4.2"
dependencies:
twrnc: "npm:^4.5.1"
peerDependencies:
"@metamask/design-tokens": ^8.0.0
react: ">=18.2.0"
checksum: 10/03bb582760e69ee898f07c1a06def43c4bfbbfe52212136c6b8ddc8c592df40d577bfa4b9098ce5ecad850510bc2cefdab930818dbdcf02b9e357750836bff70
languageName: node
linkType: hard

"@metamask/design-tokens@npm:^8.3.0":
version: 8.3.0
resolution: "@metamask/design-tokens@npm:8.3.0"
checksum: 10/b8fc870792f1d66986dce1e2c0d71f291f64a2da3e6c9d74de69b0f814b6479b922420c80bf59d03d9f22072b004c413029517619569ec5c21345a5aedd4c882
checksum: 10/f893c78216846a083b436d827208c70ab344cb24be502370637019b6e36cf0665a914a1092c1baf22e2f48695046f73a57a91093818f9a981c3af1f76832aca1
languageName: node
linkType: hard

Expand Down Expand Up @@ -10445,7 +10487,26 @@ __metadata:
languageName: node
linkType: hard

"@metamask/utils@npm:^11.0.0, @metamask/utils@npm:^11.0.1, @metamask/utils@npm:^11.1.0, @metamask/utils@npm:^11.10.0, @metamask/utils@npm:^11.11.0, @metamask/utils@npm:^11.4.0, @metamask/utils@npm:^11.4.2, @metamask/utils@npm:^11.5.0, @metamask/utils@npm:^11.8.1, @metamask/utils@npm:^11.9.0":
"@metamask/utils@npm:^11.0.0, @metamask/utils@npm:^11.0.1, @metamask/utils@npm:^11.1.0, @metamask/utils@npm:^11.10.0, @metamask/utils@npm:^11.4.0, @metamask/utils@npm:^11.4.2, @metamask/utils@npm:^11.5.0, @metamask/utils@npm:^11.8.1, @metamask/utils@npm:^11.9.0":
version: 11.10.0
resolution: "@metamask/utils@npm:11.10.0"
dependencies:
"@ethereumjs/tx": "npm:^4.2.0"
"@metamask/superstruct": "npm:^3.1.0"
"@noble/hashes": "npm:^1.3.1"
"@scure/base": "npm:^1.1.3"
"@types/debug": "npm:^4.1.7"
"@types/lodash": "npm:^4.17.20"
debug: "npm:^4.3.4"
lodash: "npm:^4.17.21"
pony-cause: "npm:^2.1.10"
semver: "npm:^7.5.4"
uuid: "npm:^9.0.1"
checksum: 10/691a268af66593b60e9807a069127993cea3cdc941f99d5d7ca4664868754f08945821f1787b2f3e99e4497df63ceb0af37a2419ad494da29a1fddffe94f5797
languageName: node
linkType: hard

"@metamask/utils@npm:^11.11.0":
version: 11.11.0
resolution: "@metamask/utils@npm:11.11.0"
dependencies:
Expand Down Expand Up @@ -35691,6 +35752,10 @@ __metadata:
"@lavamoat/react-native-lockdown": "npm:^0.0.2"
"@ledgerhq/hw-app-eth": "npm:^6.42.0"
"@ledgerhq/react-native-hw-transport-ble": "npm:^6.37.0"
"@metamask-previews/design-system-react-native": "patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch"
"@metamask-previews/design-system-shared": "npm:0.15.0-preview.f515a62"
"@metamask-previews/design-system-twrnc-preset": "npm:0.4.2-preview.f515a62"
"@metamask-previews/design-tokens": "npm:8.3.0-preview.f515a62"
"@metamask/abi-utils": "npm:^3.0.0"
"@metamask/account-api": "npm:^1.0.0"
"@metamask/account-tree-controller": "npm:^7.1.0"
Expand Down Expand Up @@ -35719,9 +35784,10 @@ __metadata:
"@metamask/core-backend": "npm:^6.2.0"
"@metamask/delegation-controller": "npm:^2.0.2"
"@metamask/delegation-deployments": "npm:^1.0.0"
"@metamask/design-system-react-native": "npm:^0.22.0"
"@metamask/design-system-twrnc-preset": "npm:^0.4.2"
"@metamask/design-tokens": "npm:^8.3.0"
"@metamask/design-system-react-native": "patch:@metamask-previews/design-system-react-native@npm%3A0.22.0-preview.f515a62#~/.yarn/patches/@metamask-previews-design-system-react-native-npm-0.22.0-preview.f515a62-f7f201.patch"
"@metamask/design-system-shared": "npm:@metamask-previews/design-system-shared@0.15.0-preview.f515a62"
"@metamask/design-system-twrnc-preset": "npm:@metamask-previews/design-system-twrnc-preset@0.4.2-preview.f515a62"
"@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.f515a62"
"@metamask/earn-controller": "npm:^12.0.0"
"@metamask/eip-5792-middleware": "npm:^2.0.0"
"@metamask/eip1193-permission-middleware": "npm:^1.0.2"
Expand Down
Loading