feat: base account details

ui/components/multichain-accounts/account-details-row/account-details-row.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Text } from '../../component-library';
+import { BackgroundColor, Display, JustifyContent, AlignItems, TextColor } from '../../../helpers/constants/design-system';
+
+type AccountDetailsRowProps = {
+  label: string;
+  value: string;
+  endAccessory: React.ReactNode;
+  style?: React.CSSProperties;
+};
+
+export const AccountDetailsRow = ({
+  label,
+  value,
+  endAccessory,
+  style,
+}: AccountDetailsRowProps) => {
+  return (
+    <Box
+      backgroundColor={BackgroundColor.backgroundAlternative}
+      display={Display.Flex}
+      justifyContent={JustifyContent.spaceBetween}
+      style={{ ...style, height: '48px' }}
+      paddingLeft={4}
+      paddingRight={4}
+      alignItems={AlignItems.center}
+    >
+      <Text color={TextColor.textDefault}>{label}</Text>
+      <Box display={Display.Flex} alignItems={AlignItems.center}>
+        <Text color={TextColor.textAlternative}>{value}</Text>
+        {endAccessory}
+      </Box>
+    </Box>
+  );
+};

ui/components/multichain-accounts/account-details-row/index.ts

@@ -0,0 +1 @@
+export { AccountDetailsRow } from './account-details-row';

ui/components/multichain-accounts/base-account-details/base-account-details.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppSliceState } from '../../../ducks/app/app';
+import { getInternalAccountByAddress, getUseBlockie } from '../../../selectors';
+import {
+  AvatarAccount,
+  AvatarAccountSize,
+  AvatarAccountVariant,
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+} from '../../component-library';
+import { Content, Header, Page } from '../../multichain/pages/page';
+import {
+  BackgroundColor,
+  IconColor,
+} from '../../../helpers/constants/design-system';
+import { ACCOUNT_DETAILS_QR_CODE_ROUTE, DEFAULT_ROUTE } from '../../../helpers/constants/routes';
+import { IconName } from '../../component-library/icon';
+import { useHistory } from 'react-router-dom';
+import { isEvmAccountType } from '@metamask/keyring-api';
+import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+import { shortenAddress } from '../../../helpers/utils/util';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { AccountDetailsRow } from '../account-details-row';
+import { EditAccountNameModal } from '../edit-account-name-modal';
+
+type BaseAccountDetailsProps = {
+  children: React.ReactNode | React.ReactNode[];
+};
+
+export const BaseAccountDetails = ({ children }: BaseAccountDetailsProps) => {
+  const address = useSelector(
+    (state: AppSliceState) => state.appState.accountDetailsAddress,
+  );
+  const useBlockie = useSelector(getUseBlockie);
+  const history = useHistory();
+  const t = useI18nContext();
+  const account = useSelector((state) =>
+    getInternalAccountByAddress(state, address),
+  );
+  const {
+    metadata: { name },
+    type,
+  } = account;
+  const formattedAddress = isEvmAccountType(type)
+    ? toChecksumHexAddress(address)?.toLowerCase()
+    : address;
+  const shortenedAddress = shortenAddress(formattedAddress);
+
+  const [isEditingAccountName, setIsEditingAccountName] = useState(false);
+
+  const handleShowAddress = () => {
+    history.push(`${ACCOUNT_DETAILS_QR_CODE_ROUTE}`);
+  }
+
+  return (
+    <Page backgroundColor={BackgroundColor.backgroundDefault}>
+      <Header
+        backgroundColor={BackgroundColor.backgroundDefault}
+        startAccessory={
+          <ButtonIcon
+            ariaLabel="Back"
+            iconName={IconName.ArrowLeft}
+            size={ButtonIconSize.Sm}
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          />
+        }
+      >
+        {name}
+      </Header>
+      <Content>
+        <AvatarAccount
+          address={address}
+          variant={
+            useBlockie
+              ? AvatarAccountVariant.Blockies
+              : AvatarAccountVariant.Jazzicon
+          }
+          size={AvatarAccountSize.Lg}
+          style={{ margin: '0 auto' }}
+        />
+        <Box className="multichain-account-details__section">
+          <AccountDetailsRow
+            label={t('accountName')}
+            value={name}
+            endAccessory={
+              <ButtonIcon
+                iconName={IconName.Edit}
+                color={IconColor.iconAlternative}
+                size={ButtonIconSize.Md}
+                ariaLabel={t('edit')}
+                onClick={handleShowAddress}
+                marginLeft={2}
+              />
+            }
+            style={{
+              marginBottom: '1px',
+              borderTopLeftRadius: '8px',
+              borderTopRightRadius: '8px',
+            }}
+          />
+          <AccountDetailsRow
+            label={t('address')}
+            value={shortenedAddress}
+            endAccessory={
+              <ButtonIcon
+                iconName={IconName.ArrowRight}
+                color={IconColor.iconAlternative}
+                size={ButtonIconSize.Md}
+                ariaLabel={t('next')}
+                onClick={handleShowAddress}
+                marginLeft={2}
+              />
+            }
+            style={{
+              borderBottomLeftRadius: '8px',
+              borderBottomRightRadius: '8px',
+            }}
+          />
+        </Box>
+        {children}
+        {isEditingAccountName && (
+          <EditAccountNameModal
+            isOpen={isEditingAccountName}
+            onClose={() => setIsEditingAccountName(false)}
+            currentAccountName={name}
+            address={address}
+          />
+        )}
+      </Content>
+    </Page>
+  );
+};

ui/components/multichain-accounts/edit-account-name-modal/edit-account-name-modal.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  FormTextField,
+} from '../../component-library';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { setAccountLabel } from '../../../store/actions';
+import { useDispatch } from 'react-redux';
+
+type EditAccountNameModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  currentAccountName: string;
+  address: string;
+};
+
+export const EditAccountNameModal = ({
+  isOpen,
+  onClose,
+  currentAccountName,
+  address,
+}: EditAccountNameModalProps) => {
+  const [accountName, setAccountName] = useState('');
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+
+  const handleSaveAccountName = () => {
+    onClose();
+    dispatch(setAccountLabel(address, accountName));
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader onBack={onClose} onClose={onClose}>
+          {t('editAccountName')}
+        </ModalHeader>
+        <ModalBody>
+          <FormTextField
+            label={t('name')}
+            value={accountName}
+            onChange={(e) => setAccountName(e.target.value)}
+            placeholder={currentAccountName}
+            helpText={address}
+          />
+        </ModalBody>
+        <ModalFooter
+          onSubmit={handleSaveAccountName}
+          submitButtonProps={{ children: t('save'), disabled: !accountName }}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

ui/components/multichain-accounts/edit-account-name-modal/index.ts

@@ -0,0 +1 @@
+export { EditAccountNameModal } from './edit-account-name-modal';

ui/helpers/constants/routes.ts

@@ -102,6 +102,12 @@ PATH_NAME_MAP[CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE] =
 export const NEW_ACCOUNT_ROUTE = '/new-account';
 PATH_NAME_MAP[NEW_ACCOUNT_ROUTE] = 'New Account Page';
 
+export const ACCOUNT_DETAILS_ROUTE = '/account-details';
+PATH_NAME_MAP[ACCOUNT_DETAILS_ROUTE] = 'Account Details Page';
+
+export const ACCOUNT_DETAILS_QR_CODE_ROUTE = '/account-details/qr-code';
+PATH_NAME_MAP[ACCOUNT_DETAILS_QR_CODE_ROUTE] = 'Account Details QR Code Page';
+
 export const CONFIRM_ADD_SUGGESTED_NFT_ROUTE = '/confirm-add-suggested-nft';
 PATH_NAME_MAP[CONFIRM_ADD_SUGGESTED_NFT_ROUTE] =
   'Confirm Add Suggested NFT Page';