chore: Merge main into into chore/provider-middleware-filters-2

.gitignore

@@ -128,3 +128,6 @@ docs/assets/termsOfUse.html
 
 # build metadata
 android/app/src/main/assets/modules.json
+
+# Google firebase base64 derived configs
+**/GoogleService-Info.plist

app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx

@@ -11,7 +11,6 @@ import {
   ACCOUNT_BASE_TEST_ID,
 } from './AccountBase.constants';
 import styles from './AccountBase.styles';
-import { strings } from '../../../../../locales/i18n';
 import { AccountBaseProps } from './AccountBase.types';
 
 const AccountBase = ({
@@ -56,7 +55,7 @@ const AccountBase = ({
               variant={TextVariant.BodyMDBold}
               style={styles.accountNameLabelText}
             >
-              {strings(accountTypeLabel)}
+              {accountTypeLabel}
             </Text>
         </View>
         )}

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.stories.tsx

@@ -30,8 +30,20 @@ const CellSelectWithMenuMeta = {
       control: { type: 'boolean' },
       defaultValue: SAMPLE_CELLSELECT_WITH_BUTTON_PROPS.isDisabled,
     },
+    withAvatar: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    showSecondaryTextIcon: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    onTextClick: {
+      action: 'clicked',
+    },
   },
 };
+
 export default CellSelectWithMenuMeta;
 
 export const CellMultiSelectWithMenu = {

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.styles.ts

@@ -55,6 +55,9 @@ const styleSheet = (params: {
     tagLabel: {
       marginTop: 4,
     },
+    selectedTag: {
+      backgroundColor: colors.primary.muted,
+    },
     containerRow: {
       flexDirection: 'row',
       alignItems: 'flex-start',

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.tsx

@@ -6,6 +6,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../hooks';
+import Tag from '../../../component-library/components/Tags/Tag';
 
 // Internal dependencies.
 import styleSheet from './CellSelectWithMenu.styles';
@@ -34,6 +35,7 @@ const CellSelectWithMenu = ({
   isSelected = false,
   children,
   withAvatar = true,
+  showSecondaryTextIcon = true,
   ...props
 }: CellSelectWithMenuProps) => {
   const { styles } = useStyles(styleSheet, { style });
@@ -77,14 +79,27 @@ const CellSelectWithMenu = ({
                 >
                   {secondaryText}
                 </Text>
-                <Icon
-                  name={IconName.ArrowDown}
-                  size={IconSize.Xss}
-                  style={styles.arrowStyle}
-                />
+                {showSecondaryTextIcon && (
+                  <Icon
+                    name={IconName.ArrowDown}
+                    size={IconSize.Xss}
+                    style={styles.arrowStyle}
+                  />
+                )}
               </TouchableOpacity>
             </TouchableWithoutFeedback>
           )}
+          {!!tagLabel && (
+            <Tag
+              testID={CellModalSelectorsIDs.TAG_LABEL}
+              label={tagLabel}
+              style={
+                isSelected
+                  ? [styles.tagLabel, styles.selectedTag]
+                  : styles.tagLabel
+              }
+            />
+          )}
         </View>
         {children && <View style={styles.optionalAccessory}>{children}</View>}
       </View>

app/component-library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap

@@ -280,6 +280,37 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
                 width={10}
               />
             </TouchableOpacity>
+            <View
+              style={
+                {
+                  "backgroundColor": "#ffffff",
+                  "borderColor": "#bbc0c5",
+                  "borderRadius": 10,
+                  "borderWidth": 1,
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginTop": 4,
+                  "paddingHorizontal": 4,
+                }
+              }
+              testID="celltag-label"
+            >
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#141618",
+                    "fontFamily": "EuclidCircularB-Regular",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  }
+                }
+              >
+                Imported
+              </Text>
+            </View>
           </View>
         </View>
       </View>
@@ -288,7 +319,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
   <View
     style={
       {
-        "paddingHorizontal": 20,
+        "paddingRight": 20,
       }
     }
   >

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.stories.tsx

@@ -14,7 +14,11 @@ import Text, {
 
 // Internal dependencies.
 import { default as ListItemSelectWithButtonComponent } from './ListItemMultiSelectButton';
-import { SAMPLE_LISTITEMMULTISELECT_PROPS } from './ListItemMultiSelectButton.constants';
+import {
+  BUTTON_TEST_ID,
+  DEFAULT_LISTITEMMULTISELECT_GAP,
+  SAMPLE_LISTITEMMULTISELECT_PROPS,
+} from './ListItemMultiSelectButton.constants';
 import { ListItemMultiSelectButtonProps } from './ListItemMultiSelectButton.types';
 
 const ListItemSelectWithButtonMeta = {
@@ -29,6 +33,27 @@ const ListItemSelectWithButtonMeta = {
       control: { type: 'boolean' },
       defaultValue: SAMPLE_LISTITEMMULTISELECT_PROPS.isDisabled,
     },
+    showButtonIcon: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    buttonIcon: {
+      control: { type: 'select' },
+      options: Object.values(IconName),
+      defaultValue: IconName.MoreVertical,
+    },
+    gap: {
+      control: { type: 'number' },
+      defaultValue: DEFAULT_LISTITEMMULTISELECT_GAP,
+    },
+    buttonProps: {
+      control: 'object',
+      defaultValue: {
+        textButton: '',
+        onButtonClick: () => null,
+        buttonTestId: BUTTON_TEST_ID,
+      },
+    },
   },
 };
 export default ListItemSelectWithButtonMeta;

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.styles.ts

@@ -85,7 +85,7 @@ const styleSheet = (params: {
       paddingTop: 32,
     },
     buttonIcon: {
-      paddingHorizontal: 20,
+      paddingRight: 20,
     },
   });
 };

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.tsx

@@ -68,7 +68,7 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
           <ButtonIcon
             iconName={buttonIcon}
             iconColor={IconColor.Default}
-            testID={BUTTON_TEST_ID}
+            testID={buttonProps?.buttonTestId || BUTTON_TEST_ID}
             onPress={buttonProps?.onButtonClick}
             accessibilityRole="button"
           />

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.types.ts

@@ -41,6 +41,9 @@ export interface ListItemMultiSelectButtonProps
    */
   showButtonIcon?: boolean;
 
+  /**
+   * Optional button props
+   */
   buttonProps?: {
     /**
      * Optional button onClick function
@@ -50,6 +53,16 @@ export interface ListItemMultiSelectButtonProps
      * Optional property to show text button
      */
     textButton?: string | null;
+
+    /**
+     * Optional property to show button icon
+     */
+    showButtonIcon?: boolean;
+
+    /**
+     * Optional property for button test ID
+     */
+    buttonTestId?: string;
   };
 }
 

app/component-library/components-temp/ListItemMultiSelectButton/__snapshots__/ListItemMultiSelectButton.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`ListItemMultiSelectButton should render correctly with default props 1`
   <View
     style={
       {
-        "paddingHorizontal": 20,
+        "paddingRight": 20,
       }
     }
   >

app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.types.ts

@@ -37,6 +37,11 @@ export interface CellBaseProps {
    * Optional prop to control the style of the CellBase.
    */
   style?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * Optional prop to control the visibility of the secondary text icon.
+   */
+  showSecondaryTextIcon?: boolean;
 }
 
 /**

app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts

@@ -3,7 +3,6 @@ import { StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
 import { Theme } from '../../../../util/theme/models';
-import { fontStyles } from '../../../../styles/common';
 
 // Internal dependencies.
 import { PickerAccountStyleSheetVars } from './PickerAccount.types';
@@ -24,34 +23,39 @@ const styleSheet = (params: {
   const { colors } = theme;
   const { style, cellAccountContainerStyle } = vars;
   return StyleSheet.create({
-    base: Object.assign({} as ViewStyle, style) as ViewStyle,
+    base: {
+      ...(style as ViewStyle),
+      flexDirection: 'row',
+      padding: 0,
+      borderWidth: 0,
+    },
     accountAvatar: {
-      marginRight: 16,
+      marginRight: 8,
     },
     accountAddressLabel: {
       color: colors.text.alternative,
+      textAlign: 'center',
     },
     cellAccount: {
-      flex: 1,
       flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
       ...cellAccountContainerStyle,
     },
     accountNameLabel: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    accountNameAvatar: {
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'flex-start',
     },
-    accountNameLabelText: {
-      marginTop: 4,
-      marginHorizontal: 5,
-      paddingHorizontal: 5,
-      ...fontStyles.bold,
-      color: colors.text.alternative,
-      borderWidth: 1,
-      borderRadius: 10,
-      borderColor: colors.border.default,
+    pickerAccountContainer: {
       justifyContent: 'center',
-      textAlign: 'center',
+      alignItems: 'center',
+    },
+    dropDownIcon: {
+      marginLeft: 8,
     },
   });
 };