Skip to content

Commit

Permalink
fix(mobile): Design review fixes
Browse files Browse the repository at this point in the history
voloshinskii committed Apr 12, 2024
1 parent ced0c5d commit 335f6ce
Showing 14 changed files with 88 additions and 79 deletions.
3 changes: 2 additions & 1 deletion packages/mobile/src/core/Colectibles/Collectibles.tsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ export const Collectibles = memo(() => {
const dimensions = useWindowDimensions();

const size = useMemo(() => {
const width = (dimensions.width - 32) / numColumn - 4;
const width = (dimensions.width - 48) / numColumn;
const height = width * heightRatio;

return { width, height };
@@ -47,6 +47,7 @@ export const Collectibles = memo(() => {
const styles = Steezy.create({
collectiblesContainer: {
marginHorizontal: 16,
gap: 8,
},
nftElements: {
flexDirection: 'row',
1 change: 0 additions & 1 deletion packages/mobile/src/core/Colectibles/NFTCardItem.tsx
Original file line number Diff line number Diff line change
@@ -100,7 +100,6 @@ const styles = Steezy.create(({ colors, corners }) => ({
container: {
position: 'relative',
flex: 1,
marginBottom: 8,
backgroundColor: colors.backgroundContent,
borderRadius: corners.medium,
overflow: 'hidden',
2 changes: 1 addition & 1 deletion packages/mobile/src/core/HideableAmount/ShowBalance.tsx
Original file line number Diff line number Diff line change
@@ -57,6 +57,6 @@ const styles = Steezy.create(({ colors }) => ({
borderRadius: 100,
},
stars: {
paddingTop: 5.5,
paddingTop: 8,
},
}));
44 changes: 20 additions & 24 deletions packages/mobile/src/core/InscriptionScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useTonInscription } from '@tonkeeper/shared/query/hooks/useTonInscription';
import { useParams } from '@tonkeeper/router/src/imperative';
import {
ActionButtons,
DEFAULT_TOKEN_LOGO,
IconButton,
IconButtonList,
@@ -62,21 +63,24 @@ export const InscriptionScreen = memo(() => {
</View>
<Picture uri={DEFAULT_TOKEN_LOGO} style={styles.tokenPicture} />
</View>
<View style={styles.buttons}>
<IconButtonList>
{!wallet.isWatchOnly ? (
<IconButton
onPress={handleSend}
iconName="ic-arrow-up-28"
title={t('wallet.send_btn')}
/>
) : null}
<IconButton
onPress={handleReceive}
iconName="ic-arrow-down-28"
title={t('wallet.receive_btn')}
/>
</IconButtonList>
<View>
<ActionButtons
buttons={[
{
id: 'send',
icon: 'ic-arrow-up-outline-28',
title: t('wallet.send_btn'),
onPress: handleSend,
disabled: wallet.isWatchOnly,
},
{
id: 'receive',
icon: 'ic-arrow-down-outline-28',
title: t('wallet.receive_btn'),
onPress: handleReceive,
},
]}
/>
</View>
</Screen.ScrollView>
</Screen>
@@ -86,7 +90,7 @@ export const InscriptionScreen = memo(() => {
const styles = Steezy.create(({ colors }) => ({
tokenContainer: {
paddingTop: 16,
paddingBottom: 28,
paddingBottom: 24,
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 28,
@@ -96,14 +100,6 @@ const styles = Steezy.create(({ colors }) => ({
height: 64,
borderRadius: 64 / 2,
},
buttons: {
borderTopWidth: 1,
borderBottomWidth: 1,
borderTopColor: colors.backgroundContent,
borderBottomColor: colors.backgroundContent,
paddingTop: 16,
paddingBottom: 12,
},
tokenText: {
paddingTop: 2,
},
2 changes: 1 addition & 1 deletion packages/mobile/src/core/Jetton/Jetton.tsx
Original file line number Diff line number Diff line change
@@ -218,7 +218,7 @@ export const Jetton: React.FC<JettonProps> = ({ route }) => {
</TouchableOpacity>
)
}
title={jetton.metadata?.name || Address.toShort(jetton.jettonAddress)}
title={jetton.metadata?.symbol || Address.toShort(jetton.jettonAddress)}
rightContent={
<PopupMenu
items={[
5 changes: 1 addition & 4 deletions packages/mobile/src/core/Notifications/Notification.tsx
Original file line number Diff line number Diff line change
@@ -192,7 +192,7 @@ export const Notification: React.FC<NotificationProps> = (props) => {
}, [props.closeOtherSwipeable]);

return (
<View style={styles.containerStyle}>
<View>
<Swipeable
waitFor={listItemRef}
overshootFriction={6}
@@ -225,9 +225,6 @@ const styles = Steezy.create(({ colors }) => ({
listStyle: {
marginBottom: 0,
},
containerStyle: {
marginBottom: 8,
},
leftContentStyle: {
alignItems: 'flex-start',
alignSelf: 'flex-start',
11 changes: 6 additions & 5 deletions packages/mobile/src/core/Notifications/NotificationsActivity.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { Button, Icon, Screen, Spacer, Text, View } from '$uikit';
import { Button, Icon, Spacer, Text, View } from '$uikit';
import { Notification } from '$core/Notifications/Notification';
import { Steezy } from '$styles';
import { openNotifications } from '$navigation';
@@ -8,8 +8,7 @@ import { INotification, useDAppsNotifications } from '$store';
import { FlashList } from '@shopify/flash-list';
import { LayoutAnimation } from 'react-native';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { safeAreaInsets } from '$utils';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Screen } from '@tonkeeper/uikit';

export enum ActivityListItem {
Notification = 'Notification',
@@ -53,7 +52,6 @@ export const NotificationsActivity: React.FC = () => {
const list = useRef<FlashList<Element | null> | null>(null);
const closeOtherSwipeable = useRef<null | (() => void)>(null);
const lastSwipeableId = useRef<null | number>(null);
const tabBarHeight = useBottomTabBarHeight();

const handleOpenNotificationSettings = useCallback(() => {
openNotifications();
@@ -139,10 +137,10 @@ export const NotificationsActivity: React.FC = () => {
) : (
<Screen.FlashList
ref={list}
contentContainerStyle={styles.gap8.static}
estimatedItemSize={87}
keyExtractor={(item) => item.id}
renderItem={renderNotificationsItem}
contentContainerStyle={{ paddingBottom: tabBarHeight + 8 }}
data={flashListData}
ListEmptyComponent={ListEmpty}
/>
@@ -156,6 +154,9 @@ const styles = Steezy.create({
marginVertical: 14,
marginHorizontal: 16,
},
gap8: {
gap: 8,
},
emptyContainer: {
paddingHorizontal: 32,
flex: 1,
2 changes: 1 addition & 1 deletion packages/mobile/src/core/Settings/Settings.tsx
Original file line number Diff line number Diff line change
@@ -270,7 +270,7 @@ export const Settings: FC = () => {
<Screen.ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{
paddingBottom,
paddingBottom: paddingBottom + 16,
paddingTop: 16,
}}
scrollEventThrottle={16}
59 changes: 33 additions & 26 deletions packages/mobile/src/tabs/Activity/ActivityScreen.tsx
Original file line number Diff line number Diff line change
@@ -111,33 +111,37 @@ export const ActivityScreen = memo(() => {
const renderNotificationsHeader = notifications.length ? (
<View>
<Spacer y={12} />
{notifications.slice(0, Math.min(newNotificationsCount, 2)).map((notification) => (
<Notification
onRemove={onRemoveNotification}
notification={notification}
key={notification.received_at}
/>
))}
<List style={styles.listStyle.static}>
<List.Item
leftContent={
<View style={styles.iconContainer}>
<Icon name={'ic-bell-28'} color={'iconSecondary'} />
</View>
}
rightContent={
newNotificationsCount - 2 > 0 ? (
<View style={styles.notificationsCount}>
<Text type="label2">{newNotificationsCount - 2}</Text>
<View style={styles.gap8}>
{notifications
.slice(0, Math.min(newNotificationsCount, 2))
.map((notification) => (
<Notification
onRemove={onRemoveNotification}
notification={notification}
key={notification.received_at}
/>
))}
<List style={styles.listStyle.static}>
<List.Item
leftContent={
<View style={styles.iconContainer}>
<Icon name={'ic-bell-28'} color={'iconSecondary'} />
</View>
) : null
}
onPress={handleOpenNotificationsScreen}
title={t('notifications.notifications')}
subtitle={t('notifications.from_connected')}
chevron
/>
</List>
}
rightContent={
newNotificationsCount - 2 > 0 ? (
<View style={styles.notificationsCount}>
<Text type="label2">{newNotificationsCount - 2}</Text>
</View>
) : null
}
onPress={handleOpenNotificationsScreen}
title={t('notifications.notifications')}
subtitle={t('notifications.from_connected')}
chevron
/>
</List>
</View>
</View>
) : undefined;

@@ -196,4 +200,7 @@ const styles = Steezy.create(({ colors }) => ({
listStyle: {
marginBottom: 8,
},
gap8: {
gap: 8,
},
}));
2 changes: 1 addition & 1 deletion packages/mobile/src/tabs/Wallet/WalletScreen.tsx
Original file line number Diff line number Diff line change
@@ -99,7 +99,7 @@ export const WalletScreen = memo(({ navigation }) => {
<View style={styles.balanceWithBattery}>
<ShowBalance amount={balance} />
<Spacer x={8} />
<BatteryIcon />
{!isWatchOnly && <BatteryIcon />}
</View>
<View style={styles.addressContainer}>
{wallet && isConnected !== false ? (
14 changes: 9 additions & 5 deletions packages/mobile/src/tabs/Wallet/components/WalletContentList.tsx
Original file line number Diff line number Diff line change
@@ -106,16 +106,20 @@ interface WalletContentListProps {
ListFooterComponent?: React.ReactElement | null;
}

function ItemSeparatorComponent() {
return (
<View style={styles.separatorContainer}>
<ListSeparator />
</View>
);
}

export const WalletContentList = memo<WalletContentListProps>((props) => {
const theme = useTheme();

return (
<Screen.FlashList
ItemSeparatorComponent={() => (
<View style={styles.separatorContainer}>
<ListSeparator />
</View>
)}
ItemSeparatorComponent={ItemSeparatorComponent}
ListHeaderComponent={props.ListHeaderComponent}
ListFooterComponent={props.ListFooterComponent}
renderItem={RenderItem}
Original file line number Diff line number Diff line change
@@ -42,7 +42,6 @@ export const RechargeByPromoModal = memo(() => {
/>
<Spacer y={32} />
<Button onPress={applyPromo} title={t('battery.promocode.apply')} />
<Spacer y={16} />
</View>
<Modal.Footer />
</Modal.Content>
4 changes: 3 additions & 1 deletion packages/shared/modals/SwitchWalletModal.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { tk } from '@tonkeeper/mobile/src/wallet';
import { t } from '../i18n';
import { formatter } from '../formatter';
import { WalletListItem } from '../components';
import { useHideableFormatter } from '@tonkeeper/mobile/src/core/HideableAmount/useHideableFormatter';

interface Props {
selected?: string;
@@ -22,6 +23,7 @@ export const SwitchWalletModal: FC<Props> = memo((props) => {
[allWallets, props.onSelect],
);
const currency = useWalletCurrency();
const { format } = useHideableFormatter();

const handlePress = useCallback(
(identifier: string) => () => {
@@ -47,7 +49,7 @@ export const SwitchWalletModal: FC<Props> = memo((props) => {
key={wallet.identifier}
wallet={wallet}
onPress={handlePress(wallet.identifier)}
subtitle={formatter.format(wallet.totalFiat, { currency })}
subtitle={format(wallet.totalFiat, { currency })}
rightContent={
selectedIdentifier === wallet.identifier && (
<View style={styles.checkmark}>
17 changes: 10 additions & 7 deletions packages/uikit/src/containers/Screen/ScreenFlashList.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { FlashList, ContentStyle, FlashListProps } from '@shopify/flash-list';
import { Fragment, forwardRef, memo, useEffect, useMemo } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { ScreenBottomSeparator } from './ScreenBottomSeparator';
@@ -46,18 +45,22 @@ export const ScreenScrollList = memo<ScreenScrollListProps>(

// useScrollHandler(undefined, true); // TODO: remove this, when old separator will be removed

const contentStyle: ContentStyle = useMemo(
() => ({
paddingBottom: safeArea ? safeAreaInsets.bottom : tabBarHeight,
...contentContainerStyle,
}),
const contentStyle = useMemo(
() => [
{
paddingBottom: safeArea ? safeAreaInsets.bottom : tabBarHeight + 16,
},
contentContainerStyle,
],
[contentContainerStyle, tabBarHeight, safeArea, safeAreaInsets.bottom],
);

const HeaderComponent = (
<Fragment>
<Animated.View style={headerOffsetStyle} />
{typeof ListHeaderComponent === 'function' ? ListHeaderComponent() : ListHeaderComponent as any}
{typeof ListHeaderComponent === 'function'
? ListHeaderComponent()
: (ListHeaderComponent as any)}
</Fragment>
);

0 comments on commit 335f6ce

Please sign in to comment.