Skip to content

Commit

Permalink
style(swap): all refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@hz002
hz002 committed Nov 26, 2024
1 parent fd760c9 commit 484bc3b
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 222 deletions.
44 changes: 20 additions & 24 deletions apps/mobile/src/screens/Bridge/components/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React, { useMemo } from 'react';
import React from 'react';
import { Skeleton } from '@rneui/themed';
import { View, Text, Image, Animated, Easing, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Svg, Rect, Circle } from 'react-native-svg';
import { createGetStyles } from '@/utils/styles';
import { useGetBinaryMode, useThemeColors } from '@/hooks/theme';
import { createGetStyles2024 } from '@/utils/styles';
import { useGetBinaryMode, useTheme2024, useThemeColors } from '@/hooks/theme';

const Dots = () => {
const colors = useThemeColors();
const styles = React.useMemo(() => getStyles(colors), [colors]);
const { styles } = useTheme2024({ getStyle });

const [dot1] = React.useState(new Animated.Value(0));
const [dot2] = React.useState(new Animated.Value(0));
const [dot3] = React.useState(new Animated.Value(0));
Expand Down Expand Up @@ -115,8 +114,7 @@ const SvgComponent = ({ ...props }) => {
};
export const BestQuoteLoading = () => {
const [animation] = React.useState(new Animated.Value(0));
const colors = useThemeColors();
const styles = React.useMemo(() => getStyles(colors), [colors]);
const { styles } = useTheme2024({ getStyle });

React.useEffect(() => {
Animated.loop(
Expand Down Expand Up @@ -179,11 +177,7 @@ export const BestQuoteLoading = () => {
});

return (
<View
// style={styles.container}
style={{
alignItems: 'center',
}}>
<View style={styles.rootContainer}>
<View style={styles.svgContainer}>
{[0, 1, 2].map(index => (
<Animated.View
Expand All @@ -206,8 +200,8 @@ export const BestQuoteLoading = () => {
};

export const TokenPairLoading = () => {
const colors = useThemeColors();
const styles = React.useMemo(() => getStyles(colors), [colors]);
const { styles } = useTheme2024({ getStyle });

return (
<View style={styles.container}>
<View style={styles.tokenInfo}>
Expand All @@ -218,8 +212,10 @@ export const TokenPairLoading = () => {
</View>
);
};

const getStyles = createGetStyles(colors => ({
const getStyle = createGetStyles2024(({ colors2024 }) => ({
rootContainer: {
alignItems: 'center',
},
container: {
paddingHorizontal: 20,
paddingVertical: 14,
Expand Down Expand Up @@ -271,9 +267,10 @@ const getStyles = createGetStyles(colors => ({
height: 14,
},
footerText: {
fontSize: 13,
color: colors['neutral-foot'],
marginLeft: 6,
fontSize: 14,
color: colors2024['neutral-foot'],
fontFamily: 'SF Pro Rounded',
marginLeft: 4,
},
dotsContainer: {
flexDirection: 'row',
Expand All @@ -284,7 +281,7 @@ const getStyles = createGetStyles(colors => ({
},
dot: {
fontSize: 24,
color: colors['neutral-foot'],
color: colors2024['neutral-foot'],
},

dexLoading: {
Expand All @@ -296,7 +293,7 @@ const getStyles = createGetStyles(colors => ({
gap: 10,
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 6,
borderColor: colors['neutral-line'],
borderColor: colors2024['neutral-line'],
},
column: {
flexDirection: 'row',
Expand All @@ -321,8 +318,7 @@ const getStyles = createGetStyles(colors => ({
}));

export const QuoteLoading = ({}: {}) => {
const colors = useThemeColors();
const styles = useMemo(() => getStyles(colors), [colors]);
const { styles } = useTheme2024({ getStyle });

return (
<View style={styles.dexLoading}>
Expand Down
97 changes: 51 additions & 46 deletions apps/mobile/src/screens/Swap/components/QuoteItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable react-native/no-inline-styles */
import ImgLock from '@/assets/icons/swap/lock.svg';
import ImgVerified from '@/assets/icons/swap/verified.svg';
import { CHAINS_ENUM } from '@debank/common';
Expand All @@ -14,15 +15,14 @@ import {
useRabbyFeeVisible,
useSetQuoteVisible,
useSwapSettings,
useSwapSettingsVisible,
} from '../hooks';

import { RcIconInfoCC } from '@/assets/icons/common';
import { RcIconSwapGas, RcIconSwapGasRed } from '@/assets/icons/swap';
import { AssetAvatar, Tip } from '@/components';
import { useThemeColors } from '@/hooks/theme';
import { useTheme2024 } from '@/hooks/theme';
import { formatAmount, formatUsdValue } from '@/utils/number';
import { createGetStyles } from '@/utils/styles';
import { createGetStyles2024 } from '@/utils/styles';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

Expand Down Expand Up @@ -73,7 +73,6 @@ export const DexQuoteItem = (
chain,
// userAddress,
isBestQuote,
slippage,
// fee,
inSufficient,
preExecResult,
Expand All @@ -85,13 +84,9 @@ export const DexQuoteItem = (
onPress,
} = props;

const colors = useThemeColors();
const styles = useMemo(() => getQuoteItemStyle(colors), [colors]);

const { styles, colors2024 } = useTheme2024({ getStyle });
const { t } = useTranslation();

const { setVisible: openSwapSettings } = useSwapSettingsVisible();

const openSwapQuote = useSetQuoteVisible();

const { sortIncludeGasFee } = useSwapSettings();
Expand Down Expand Up @@ -161,8 +156,8 @@ export const DexQuoteItem = (
styles.percentText,
{
color: !isBestQuote
? colors['red-default']
: colors['green-default'],
? colors2024['red-default']
: colors2024['green-default'],
},
]}>
{isBestQuote
Expand Down Expand Up @@ -227,7 +222,7 @@ export const DexQuoteItem = (
styles.percentText,
styles.failedTipText,
isBestQuote,
colors,
colors2024,
t,
]);

Expand Down Expand Up @@ -344,11 +339,11 @@ export const DexQuoteItem = (
{
position: 'relative',
backgroundColor: !(disabled || inSufficient || gasFeeTooHight)
? colors['neutral-card-1']
? colors2024['neutral-card-1']
: 'transparent',
borderColor: !(disabled || inSufficient || gasFeeTooHight)
? 'transparent'
: colors['neutral-line'],
: colors2024['neutral-line'],
borderWidth: !(disabled || inSufficient || gasFeeTooHight)
? 0
: StyleSheet.hairlineWidth,
Expand Down Expand Up @@ -434,7 +429,7 @@ export const DexQuoteItem = (
paddingLeft: 4,
},
gasFeeTooHight && {
backgroundColor: colors['red-light'],
backgroundColor: colors2024['red-light'],
},
]}>
{!disabled && !inSufficient && (
Expand All @@ -451,7 +446,7 @@ export const DexQuoteItem = (
<Text
style={[
styles.gasUsd,
gasFeeTooHight && { color: colors['red-default'] },
gasFeeTooHight && { color: colors2024['red-default'] },
]}>
{preExecResult?.gasUsd}
</Text>
Expand All @@ -461,7 +456,12 @@ export const DexQuoteItem = (

<View style={{ flexDirection: 'row', gap: 6, alignItems: 'center' }}>
{disabled ? (
<Text>{bestQuotePercent}</Text>
<Text
style={{
fontFamily: 'SF Pro Rounded',
}}>
{bestQuotePercent}
</Text>
) : (
<>
<Text style={styles.receivedTokenUsd}>
Expand All @@ -474,9 +474,9 @@ export const DexQuoteItem = (
{isWrapToken ? (
<Tip content={t('page.swap.no-fees-for-wrap')}>
<RcIconInfoCC
width={14}
height={14}
color={colors['neutral-foot']}
width={16}
height={16}
color={colors2024['neutral-foot']}
/>
</Tip>
) : (
Expand All @@ -490,9 +490,9 @@ export const DexQuoteItem = (
});
}}>
<RcIconInfoCC
width={14}
height={14}
color={colors['neutral-foot']}
width={16}
height={16}
color={colors2024['neutral-foot']}
/>
</TouchableOpacity>
)}
Expand Down Expand Up @@ -521,15 +521,14 @@ export function CheckedIcon() {
</Tip>
);
}

export const getQuoteItemStyle = createGetStyles(colors => ({
const getStyle = createGetStyles2024(({ colors2024 }) => ({
dexContainer: {
position: 'relative',
// borderWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 16,
paddingTop: 24,
paddingBottom: 15,
// gap: 10,
paddingLeft: 25,
paddingRight: 17,
paddingTop: 36,
paddingBottom: 30,
justifyContent: 'center',
borderRadius: 6,
shadowColor: 'rgba(0, 0, 0, 0.08)',
Expand All @@ -554,41 +553,47 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
percentText: {
fontSize: 12,
lineHeight: 14,
fontFamily: 'SF Pro Rounded',
fontWeight: '500',
},
failedTipText: {
fontSize: 13,
fontSize: 14,
fontWeight: '400',
color: colors['neutral-body'],
fontFamily: 'SF Pro Rounded',
color: colors2024['neutral-body'],
lineHeight: 16,
},

nameText: {
fontSize: 16,
lineHeight: 19,
fontWeight: '500',
color: colors['neutral-title-1'],
lineHeight: 20,
fontWeight: '700',
fontFamily: 'SF Pro Rounded',
color: colors2024['neutral-title-1'],
},

gasUsd: {
color: colors['neutral-foot'],
fontSize: 13,
color: colors2024['neutral-foot'],
fontSize: 14,
fontFamily: 'SF Pro Rounded',
fontWeight: '400',
lineHeight: 16,
},
receivedTokenUsd: {
color: colors['neutral-foot'],
fontSize: 13,
color: colors2024['neutral-foot'],
fontSize: 14,
fontFamily: 'SF Pro Rounded',
fontWeight: '400',
lineHeight: 16,
},

middleDefaultText: {
width: 'auto',
fontSize: 16,
lineHeight: 19,
fontWeight: '500',
color: colors['neutral-title-1'],
lineHeight: 20,
fontWeight: '700',
fontFamily: 'SF Pro Rounded',
color: colors2024['neutral-title-1'],
},

disabledContentWrapper: {
Expand All @@ -598,7 +603,7 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
right: 0,
bottom: 0,
borderRadius: 6,
backgroundColor: colors['neutral-black'],
backgroundColor: colors2024['neutral-black'],
justifyContent: 'center',
},

Expand All @@ -609,13 +614,13 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
alignItems: 'center',
},
disabledContentText: {
color: colors['neutral-title-2'],
color: colors2024['neutral-title-2'],
fontSize: 14,
fontWeight: '500',
lineHeight: 17,
},
disabledContentBtnText: {
color: colors['blue-default'],
color: colors2024['blue-default'],
fontSize: 14,
fontWeight: '500',
textAlign: 'left',
Expand All @@ -630,9 +635,9 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
paddingVertical: 1,
borderTopLeftRadius: 4,
borderBottomRightRadius: 4,
backgroundColor: colors['red-light'],
backgroundColor: colors2024['red-light'],
},
bestQuotePercentContainerIsBest: {
backgroundColor: colors['green-light'],
backgroundColor: colors2024['green-light'],
},
}));
Loading

0 comments on commit 484bc3b

Please sign in to comment.