feat: custom names for snap accounts (Flask only)

app/components/Approvals/SnapAccountCustomNameApproval/SnapAccountCustomNameApproval.constants.ts

@@ -0,0 +1,10 @@
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+export const SNAP_ACCOUNT_CUSTOM_NAME_APPROVAL =
+  'snap-account-custom-name-approval';
+export const SNAP_ACCOUNT_CUSTOM_NAME_CANCEL_BUTTON =
+  'snap-account-custom-name-approval-cancel-button';
+export const SNAP_ACCOUNT_CUSTOM_NAME_ADD_ACCOUNT_BUTTON =
+  'snap-account-custom-name-approval-add-account-button';
+export const SNAP_ACCOUNT_CUSTOM_NAME_INPUT =
+  'snap-account-custom-name-approval-input';
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/SnapAccountCustomNameApproval/SnapAccountCustomNameApproval.styles.ts

@@ -0,0 +1,45 @@
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../util/theme/models';
+import Device from '../../../util/device';
+
+/**
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+  return StyleSheet.create({
+    root: {
+      backgroundColor: colors.background.default,
+      paddingTop: 24,
+      paddingHorizontal: 16,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      minHeight: 200,
+      paddingBottom: Device.isIphoneX() ? 20 : 0,
+    },
+    actionContainer: {
+      flex: 0,
+      paddingVertical: 16,
+      justifyContent: 'center',
+    },
+    inputTitle: {
+      textAlign: 'left',
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.border.default,
+      borderRadius: 4,
+      padding: 10,
+      marginVertical: 10,
+    },
+  });
+};
+
+export default styleSheet;
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/SnapAccountCustomNameApproval/SnapAccountCustomNameApproval.tsx

@@ -0,0 +1,136 @@
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+import React, { useEffect, useState } from 'react';
+import { TextInput, View } from 'react-native';
+import ApprovalModal from '../ApprovalModal';
+import useApprovalRequest from '../../Views/confirmations/hooks/useApprovalRequest';
+import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../core/RPCMethods/RPCMethodMiddleware';
+import {
+  SNAP_ACCOUNT_CUSTOM_NAME_ADD_ACCOUNT_BUTTON,
+  SNAP_ACCOUNT_CUSTOM_NAME_APPROVAL,
+  SNAP_ACCOUNT_CUSTOM_NAME_CANCEL_BUTTON,
+  SNAP_ACCOUNT_CUSTOM_NAME_INPUT,
+} from './SnapAccountCustomNameApproval.constants';
+import styleSheet from './SnapAccountCustomNameApproval.styles';
+import { useStyles } from '../../hooks/useStyles';
+import BottomSheetFooter, {
+  ButtonsAlignment,
+} from '../../../component-library/components/BottomSheets/BottomSheetFooter';
+import SheetHeader from '../../../component-library/components/Sheet/SheetHeader';
+import { strings } from '../../../../locales/i18n';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import {
+  ButtonProps,
+  ButtonSize,
+  ButtonVariants,
+} from '../../../component-library/components/Buttons/Button/Button.types';
+import { useSelector } from 'react-redux';
+import { selectInternalAccounts } from '../../../selectors/accountsController';
+import { KeyringTypes } from '@metamask/keyring-controller';
+import Engine from '../../../core/Engine';
+
+const SnapAccountCustomNameApproval = () => {
+  const { approvalRequest, onConfirm, onReject } = useApprovalRequest();
+  const internalAccounts = useSelector(selectInternalAccounts);
+  const [accountName, setAccountName] = useState<string>('');
+  const [isNameTaken, setIsNameTaken] = useState<boolean>(false);
+
+  const { styles } = useStyles(styleSheet, {});
+
+  const onAddAccountPressed = () => {
+    if (!isNameTaken) {
+      onConfirm(undefined, { success: true, name: accountName });
+    }
+  };
+
+  const checkIfNameTaken = (name: string) =>
+    internalAccounts.some((account) => account.metadata.name === name);
+
+  useEffect(() => {
+    function generateUniqueNameWithSuffix(baseName: string): string {
+      let suffix = 1;
+      let candidateName = baseName;
+      while (
+        internalAccounts.some(
+          // eslint-disable-next-line no-loop-func
+          (account) => account.metadata.name === candidateName,
+        )
+      ) {
+        suffix += 1;
+        candidateName = `${baseName} ${suffix}`;
+      }
+      return candidateName;
+    }
+
+    const suggestedName = approvalRequest?.requestData.snapSuggestedAccountName;
+    const initialName = suggestedName
+      ? generateUniqueNameWithSuffix(suggestedName)
+      : Engine.context.AccountsController.getNextAvailableAccountName(
+          KeyringTypes.snap,
+        );
+    setAccountName(initialName);
+  }, [approvalRequest, internalAccounts]);
+
+  const cancelButtonProps: ButtonProps = {
+    variant: ButtonVariants.Secondary,
+    label: strings('accountApproval.cancel'),
+    size: ButtonSize.Lg,
+    onPress: onReject,
+    testID: SNAP_ACCOUNT_CUSTOM_NAME_CANCEL_BUTTON,
+  };
+
+  const addAccountButtonProps: ButtonProps = {
+    variant: ButtonVariants.Primary,
+    label: strings('snap_account_custom_name_approval.add_account_button'),
+    size: ButtonSize.Lg,
+    onPress: onAddAccountPressed,
+    testID: SNAP_ACCOUNT_CUSTOM_NAME_ADD_ACCOUNT_BUTTON,
+    isDisabled: isNameTaken,
+  };
+
+  const handleNameChange = (text: string) => {
+    setAccountName(text);
+    setIsNameTaken(checkIfNameTaken(text));
+  };
+
+  return (
+    <ApprovalModal
+      isVisible={
+        approvalRequest?.type ===
+        SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES.showNameSnapAccount
+      }
+      onCancel={onReject}
+    >
+      <View testID={SNAP_ACCOUNT_CUSTOM_NAME_APPROVAL} style={styles.root}>
+        <SheetHeader
+          title={strings('snap_account_custom_name_approval.title')}
+        />
+        <Text style={styles.inputTitle} variant={TextVariant.BodyMDBold}>
+          {strings('snap_account_custom_name_approval.input_title')}
+        </Text>
+        <TextInput
+          style={styles.input}
+          value={accountName}
+          onChangeText={handleNameChange}
+          testID={SNAP_ACCOUNT_CUSTOM_NAME_INPUT}
+        />
+        {isNameTaken && (
+          <Text variant={TextVariant.BodySM} color={TextColor.Error}>
+            {strings('snap_account_custom_name_approval.name_taken_message')}
+          </Text>
+        )}
+        <View style={styles.actionContainer}>
+          <BottomSheetFooter
+            buttonsAlignment={ButtonsAlignment.Horizontal}
+            buttonPropsArray={[cancelButtonProps, addAccountButtonProps]}
+          />
+        </View>
+      </View>
+    </ApprovalModal>
+  );
+};
+
+export default SnapAccountCustomNameApproval;
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/SnapAccountCustomNameApproval/index.ts

@@ -0,0 +1,3 @@
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+export { default } from './SnapAccountCustomNameApproval';
+///: END:ONLY_INCLUDE_IF