feat: developer settings and clean ui

XRPL-Labs · Nov 27, 2024 · e5567e9 · e5567e9
1 parent 77e3829
commit e5567e9
Show file tree

Hide file tree

Showing 83 changed files with 1,167 additions and 280 deletions.
diff --git a/src/common/constants/screens.ts b/src/common/constants/screens.ts
@@ -92,6 +92,7 @@ const screens = {
             Edit: 'app.Settings.ThirdPartyApps.Edit',
         },
         SessionLog: 'app.Settings.SessionLog',
+        DeveloperSettings: 'app.Settings.DeveloperSettings',
         General: 'app.Settings.General',
         Advanced: 'app.Settings.Advanced',
         Security: 'app.Settings.Security',

diff --git a/src/common/libs/preferences.ts b/src/common/libs/preferences.ts
@@ -14,6 +14,7 @@ enum Keys {
     LATEST_VERSION_CODE = 'LATEST_VERSION_CODE',
     UPDATE_IGNORE_VERSION_CODE = 'UPDATE_IGNORE_VERSION_CODE',
     XAPP_STORE_IGNORE_MESSAGE_ID = 'XAPP_STORE_IGNORE_MESSAGE_ID',
+    EXPERIMENTAL_SIMPLICITY_UI = 'EXPERIMENTAL_SIMPLICITY_UI',
 }
 
 /* Lib ==================================================================== */

diff --git a/src/common/utils/cache.ts b/src/common/utils/cache.ts
@@ -37,6 +37,10 @@ class LRUCache<K, V> {
     delete(key: K): void {
         this.cache.delete(key);
     }
+
+    clear(): void {
+        this.cache.clear();
+    }
 }
 
 export default LRUCache;
diff --git a/src/components/General/MultiPressDetector/MultiPressDetector.tsx b/src/components/General/MultiPressDetector/MultiPressDetector.tsx
@@ -0,0 +1,97 @@
+/**
+ * MultiPressDetector
+ *
+    <MultiPressDetector pressThreshold={3} />
+ *
+ */
+import React, { PureComponent, PropsWithChildren } from 'react';
+
+import { TouchableOpacity } from 'react-native';
+
+/* Types ==================================================================== */
+export interface Props extends PropsWithChildren {
+    pressThreshold?: number;
+    onMultiPress?: () => void;
+}
+
+export interface State {
+    pressCount: number;
+    lastPress: number;
+}
+
+/* Component ==================================================================== */
+class MultiPressDetector extends PureComponent<Props, State> {
+    declare readonly props: Props & Required<Pick<Props, keyof typeof MultiPressDetector.defaultProps>>;
+
+    static defaultProps: Partial<Props> = {
+        pressThreshold: 3,
+    };
+
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            pressCount: 0,
+            lastPress: 0,
+        };
+    }
+
+    handleButtonPress = () => {
+        const { pressCount, lastPress } = this.state;
+        const { pressThreshold } = this.props;
+
+        const currentTime = Date.now();
+        const timeDifference = currentTime - lastPress;
+
+        if (timeDifference < 500) {
+            this.setState(
+                {
+                    pressCount: pressCount + 1,
+                    lastPress: currentTime,
+                },
+                () => {
+                    const { pressCount: newPressCount } = this.state;
+                    if (newPressCount === pressThreshold) {
+                        this.executeCallback();
+                        this.resetPressCount();
+                    }
+                },
+            );
+        } else {
+            this.resetPressCount(currentTime);
+        }
+    };
+
+    resetPressCount = (currentTime = 0) => {
+        this.setState({
+            pressCount: 0,
+            lastPress: currentTime,
+        });
+    };
+
+    executeCallback = () => {
+        const { onMultiPress } = this.props;
+
+        // Call your callback function here
+        if (typeof onMultiPress === 'function') {
+            onMultiPress();
+        }
+    };
+
+    render() {
+        const { children } = this.props;
+
+        return (
+            <TouchableOpacity
+                hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}
+                activeOpacity={1}
+                onPress={this.handleButtonPress}
+            >
+                {children}
+            </TouchableOpacity>
+        );
+    }
+}
+
+/* Export Component ==================================================================== */
+export default MultiPressDetector;
diff --git a/src/components/General/MultiPressDetector/index.ts b/src/components/General/MultiPressDetector/index.ts
@@ -0,0 +1 @@
+export { default as MultiPressDetector, type Props as MultiPressDetectorProps } from './MultiPressDetector';
diff --git a/src/components/General/MultiPressDetector/styles.ts b/src/components/General/MultiPressDetector/styles.ts
@@ -0,0 +1,33 @@
+import StyleService from '@services/StyleService';
+
+/* Styles ==================================================================== */
+export default StyleService.create({
+    container: {
+        borderRadius: 11,
+        backgroundColor: '$tint',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    placeholder: {
+        backgroundColor: '$grey',
+    },
+    image: {
+        borderRadius: 11,
+    },
+    border: {
+        borderColor: '$lightGrey',
+        borderWidth: 1,
+    },
+    badgeContainer: {
+        position: 'absolute',
+    },
+    badgeContainerText: {
+        position: 'absolute',
+        backgroundColor: '$blue',
+        borderWidth: 2.5,
+        borderColor: '$background',
+    },
+    badge: {
+        tintColor: '$white',
+    },
+});
diff --git a/src/components/General/index.ts b/src/components/General/index.ts
@@ -33,6 +33,7 @@ export * from './NumberSteps';
 export * from './HorizontalLine';
 export * from './ProgressBar';
 export * from './CheckBox';
+export * from './MultiPressDetector';
 
 export * from './SortableFlatList';
 export * from './AmountText';

diff --git a/src/components/Modules/AssetsList/AssetsList.tsx b/src/components/Modules/AssetsList/AssetsList.tsx
@@ -19,6 +19,7 @@ interface Props {
     account: AccountModel;
     discreetMode: boolean;
     spendable: boolean;
+    experimentalUI?: boolean;
 }
 
 interface State {
@@ -67,7 +68,7 @@ class AssetsList extends Component<Props, State> {
     };
 
     render() {
-        const { style, timestamp, discreetMode, spendable, account } = this.props;
+        const { style, timestamp, discreetMode, spendable, experimentalUI, account } = this.props;
         const { category } = this.state;
 
         let AssetListComponent;
@@ -91,6 +92,7 @@ class AssetsList extends Component<Props, State> {
                 spendable={spendable}
                 onChangeCategoryPress={this.onChangeCategoryPress}
                 style={style}
+                experimentalUI={experimentalUI}
             />
         );
     }

diff --git a/src/components/Modules/AssetsList/Tokens/ListFilter/ListFilter.tsx b/src/components/Modules/AssetsList/Tokens/ListFilter/ListFilter.tsx
@@ -18,7 +18,7 @@ export interface FiltersType {
 
 interface Props {
     filters?: FiltersType;
-    reorderEnabled: boolean;
+    visible: boolean;
     onFilterChange: (filters: FiltersType | undefined) => void;
     onReorderPress: () => void;
 }
@@ -50,11 +50,11 @@ class ListFilter extends Component<Props, State> {
     }
 
     shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
-        const { reorderEnabled } = this.props;
+        const { visible } = this.props;
         const { filterText, favoritesEnabled, hideZeroEnabled } = this.state;
 
         return (
-            !isEqual(nextProps.reorderEnabled, reorderEnabled) ||
+            !isEqual(nextProps.visible, visible) ||
             !isEqual(nextState.filterText, filterText) ||
             !isEqual(nextState.favoritesEnabled, favoritesEnabled) ||
             !isEqual(nextState.hideZeroEnabled, hideZeroEnabled)
@@ -178,11 +178,11 @@ class ListFilter extends Component<Props, State> {
     };
 
     render() {
-        const { reorderEnabled } = this.props;
+        const { visible } = this.props;
         const { favoritesEnabled, hideZeroEnabled } = this.state;
 
         // hide filters when reordering is enabled
-        if (reorderEnabled) {
+        if (!visible) {
             return null;
         }
 

diff --git a/src/components/Modules/AssetsList/Tokens/ListFilter/styles.ts b/src/components/Modules/AssetsList/Tokens/ListFilter/styles.ts
@@ -57,7 +57,7 @@ export default StyleService.create({
         alignItems: 'center',
     },
     searchBarInput: {
-        fontFamily: AppFonts.base.familyMono,
+        fontFamily: AppFonts.base.family,
         fontSize: AppFonts.subtext.size,
         color: '$grey',
         paddingLeft: 30,

diff --git a/src/components/Modules/AssetsList/Tokens/TokenItem/TokenItem.tsx b/src/components/Modules/AssetsList/Tokens/TokenItem/TokenItem.tsx
@@ -19,6 +19,7 @@ interface Props {
     selfIssued: boolean;
     reorderEnabled: boolean;
     discreetMode: boolean;
+    saturate?: boolean;
     onPress: (token: TrustLineModel, index: number) => void;
     onMoveTopPress: (token: TrustLineModel, index: number) => void;
 }
@@ -129,7 +130,7 @@ class TokenItem extends PureComponent<Props, State> {
     };
 
     renderBalance = () => {
-        const { token, discreetMode } = this.props;
+        const { token, discreetMode, saturate } = this.props;
         const { balance } = this.state;
 
         return (
@@ -139,6 +140,7 @@ class TokenItem extends PureComponent<Props, State> {
                         token={token}
                         containerStyle={styles.tokenIconContainer}
                         style={discreetMode ? AppStyles.imgColorGrey : {}}
+                        saturate={saturate}
                     />
                 }
                 value={balance}
@@ -150,13 +152,19 @@ class TokenItem extends PureComponent<Props, State> {
     };
 
     render() {
-        const { token, reorderEnabled } = this.props;
+        const { token, saturate, reorderEnabled } = this.props;
 
         return (
             <View testID={`${token.currency.id}`} style={[styles.currencyItem, { height: TokenItem.Height }]}>
                 <View style={[AppStyles.flex1, AppStyles.row, AppStyles.centerAligned]}>
                     <View style={styles.tokenAvatarContainer}>
-                        <TokenAvatar token={token} border size={35} badge={this.getTokenAvatarBadge} />
+                        <TokenAvatar
+                            token={token}
+                            border
+                            size={35}
+                            badge={this.getTokenAvatarBadge}
+                            saturate={saturate}
+                        />
                     </View>
                     <View style={[AppStyles.column, AppStyles.centerContent]}>
                         <Text numberOfLines={1} style={styles.currencyLabel} ellipsizeMode="middle">

diff --git a/src/components/Modules/AssetsList/Tokens/TokensList.tsx b/src/components/Modules/AssetsList/Tokens/TokensList.tsx
@@ -29,7 +29,7 @@ interface Props {
     account: AccountModel;
     discreetMode: boolean;
     spendable: boolean;
-
+    experimentalUI?: boolean;
     onChangeCategoryPress: () => void;
 }
 
@@ -80,12 +80,13 @@ class TokensList extends Component<Props, State> {
     }
 
     shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-        const { discreetMode, spendable } = this.props;
+        const { discreetMode, spendable, experimentalUI } = this.props;
         const { dataSource, accountStateVersion, reorderEnabled, filters } = this.state;
 
         return (
             !isEqual(nextProps.spendable, spendable) ||
             !isEqual(nextProps.discreetMode, discreetMode) ||
+            !isEqual(nextProps.experimentalUI, experimentalUI) ||
             !isEqual(nextState.accountStateVersion, accountStateVersion) ||
             !isEqual(nextState.reorderEnabled, reorderEnabled) ||
             !isEqual(nextState.filters, filters) ||
@@ -307,7 +308,7 @@ class TokensList extends Component<Props, State> {
     };
 
     renderItem = ({ item, index }: { item: TrustLineModel; index: number }) => {
-        const { discreetMode } = this.props;
+        const { discreetMode, experimentalUI } = this.props;
         const { account, reorderEnabled } = this.state;
 
         return (
@@ -316,6 +317,7 @@ class TokensList extends Component<Props, State> {
                 token={item}
                 reorderEnabled={reorderEnabled}
                 discreetMode={discreetMode}
+                saturate={experimentalUI}
                 selfIssued={item.currency.issuer === account.address}
                 onPress={this.onTokenItemPress}
                 onMoveTopPress={this.onItemMoveTopPress}
@@ -339,7 +341,7 @@ class TokensList extends Component<Props, State> {
     };
 
     render() {
-        const { account, style, spendable, discreetMode } = this.props;
+        const { account, style, spendable, discreetMode, experimentalUI } = this.props;
         const { dataSource, reorderEnabled, filters } = this.state;
 
         return (
@@ -353,7 +355,7 @@ class TokensList extends Component<Props, State> {
                 />
                 <ListFilter
                     filters={filters}
-                    reorderEnabled={reorderEnabled}
+                    visible={!reorderEnabled && !experimentalUI}
                     onFilterChange={this.onFilterChange}
                     onReorderPress={this.toggleReordering}
                 />

diff --git a/src/components/Modules/TokenElement/TokenAvatar/TokenAvatar.tsx b/src/components/Modules/TokenElement/TokenAvatar/TokenAvatar.tsx
@@ -15,6 +15,7 @@ import { Avatar, AvatarProps } from '@components/General/Avatar';
 /* Types ==================================================================== */
 interface Props extends Omit<AvatarProps, 'source'> {
     token: TrustLineModel | 'Native';
+    saturate?: boolean;
 }
 
 interface State {
@@ -61,13 +62,24 @@ class TokenAvatar extends PureComponent<Props, State> {
     };
 
     render() {
-        const { size, imageScale, border, badge, badgeColor, containerStyle, backgroundColor } = this.props;
+        const { size, imageScale, border, badge, saturate, badgeColor, containerStyle, backgroundColor } = this.props;
         const { avatar } = this.state;
 
+        // add saturation to avatar before passing it
+        let avatarUrl = avatar;
+        if (avatarUrl && saturate) {
+            const BASE_CDN_URL = '/cdn-cgi/image/';
+            const SATURATION_PARAM = 'saturation=0,';
+
+            if (avatarUrl) {
+                avatarUrl = avatarUrl.replace(BASE_CDN_URL, `${BASE_CDN_URL}${SATURATION_PARAM}`);
+            }
+        }
+
         return (
             <Avatar
                 {...{ size, imageScale, border, badge, badgeColor, containerStyle, backgroundColor }}
-                source={{ uri: avatar }}
+                source={{ uri: avatarUrl }}
             />
         );
     }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as MultiPressDetector, type Props as MultiPressDetectorProps } from './MultiPressDetector';