UX: Multichain: Ensure all components have proptype docs (#21018)

## **Description**
Provides documentation for all components in the `multichain` directory

## **Manual testing steps**

This PR has no functional change.

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained:
  - [ ] What problem this PR is solving.
  - [ ] How this problem was solved.
  - [ ] How reviewers can test my changes.
- [ ] I’ve indicated what issue this PR is linked to: Fixes #???
- [ ] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/multichain/account-details/account-details-authenticate.js

@@ -88,8 +88,20 @@ export const AccountDetailsAuthenticate = ({
 };
 
 AccountDetailsAuthenticate.propTypes = {
+  /**
+   * The account address
+   */
   address: PropTypes.string.isRequired,
+  /**
+   * Executes upon Cancel button click
+   */
   onCancel: PropTypes.func.isRequired,
+  /**
+   * Private key setter
+   */
   setPrivateKey: PropTypes.func.isRequired,
+  /**
+   * showHoldToReveal setter
+   */
   setShowHoldToReveal: PropTypes.func.isRequired,
 };

ui/components/multichain/account-details/account-details-display.js

@@ -96,8 +96,20 @@ export const AccountDetailsDisplay = ({
 };
 
 AccountDetailsDisplay.propTypes = {
+  /**
+   * Array of user accounts
+   */
   accounts: PropTypes.array.isRequired,
+  /**
+   * Name of the current account
+   */
   accountName: PropTypes.string.isRequired,
+  /**
+   * Current address
+   */
   address: PropTypes.string.isRequired,
+  /**
+   * Executes upon Export button click
+   */
   onExportClick: PropTypes.func.isRequired,
 };

ui/components/multichain/account-details/account-details-key.js

@@ -68,7 +68,16 @@ export const AccountDetailsKey = ({ accountName, onClose, privateKey }) => {
 };
 
 AccountDetailsKey.propTypes = {
+  /**
+   * Name of the account
+   */
   accountName: PropTypes.string.isRequired,
+  /**
+   * Executes upon Close button click
+   */
   onClose: PropTypes.func.isRequired,
+  /**
+   * The private key
+   */
   privateKey: PropTypes.string.isRequired,
 };

ui/components/multichain/account-details/account-details.js

@@ -155,5 +155,8 @@ export const AccountDetails = ({ address }) => {
 };
 
 AccountDetails.propTypes = {
+  /**
+   * The address to show account details for
+   */
   address: PropTypes.string,
 };

ui/components/multichain/account-list-item-menu/account-list-item-menu.js

@@ -232,9 +232,6 @@ AccountListItemMenu.propTypes = {
    * Represents if the account should be removable
    */
   isRemovable: PropTypes.bool.isRequired,
-  /**
-   * Identity of the account
-   */
   /**
    * Identity of the account
    */

ui/components/multichain/activity-list-item/activity-list-item.js

@@ -129,14 +129,44 @@ export const ActivityListItem = ({
 };
 
 ActivityListItem.propTypes = {
+  /**
+   * Top content for the activity
+   */
   topContent: PropTypes.node,
+  /**
+   * Icon which represents the activity
+   */
   icon: PropTypes.node,
+  /**
+   * Title text
+   */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Additional text detail
+   */
   subtitle: PropTypes.node,
+  /**
+   * Middle content
+   */
   midContent: PropTypes.node,
+  /**
+   * Additional variable contents
+   */
   children: PropTypes.node,
+  /**
+   * Right-most content
+   */
   rightContent: PropTypes.node,
+  /**
+   * Executes upon click of the activity
+   */
   onClick: PropTypes.func,
+  /**
+   * Additional classname for this component
+   */
   className: PropTypes.string,
+  /**
+   * Test ID for this component
+   */
   'data-testid': PropTypes.string,
 };

ui/components/multichain/create-account/create-account.js

@@ -110,5 +110,8 @@ export const CreateAccount = ({ onActionComplete }) => {
 };
 
 CreateAccount.propTypes = {
+  /**
+   * Executes when the Create button is clicked
+   */
   onActionComplete: PropTypes.func.isRequired,
 };

ui/components/multichain/import-account/bottom-buttons.js

@@ -11,12 +11,6 @@ import { Display } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import * as actions from '../../../store/actions';
 
-BottomButtons.propTypes = {
-  importAccountFunc: PropTypes.func.isRequired,
-  isPrimaryDisabled: PropTypes.bool.isRequired,
-  onActionComplete: PropTypes.func.isRequired,
-};
-
 export default function BottomButtons({
   importAccountFunc,
   isPrimaryDisabled,
@@ -58,3 +52,18 @@ export default function BottomButtons({
     </Box>
   );
 }
+
+BottomButtons.propTypes = {
+  /**
+   * Function to import the account
+   */
+  importAccountFunc: PropTypes.func.isRequired,
+  /**
+   * Represents if the action button is disabled
+   */
+  isPrimaryDisabled: PropTypes.bool.isRequired,
+  /**
+   * Executes when the primary action is complete
+   */
+  onActionComplete: PropTypes.func.isRequired,
+};

ui/components/multichain/import-account/import-account.js

@@ -161,5 +161,8 @@ export const ImportAccount = ({ onActionComplete }) => {
 };
 
 ImportAccount.propTypes = {
+  /**
+   * Executes when the key is imported
+   */
   onActionComplete: PropTypes.func.isRequired,
 };

ui/components/multichain/import-account/json.js

@@ -19,11 +19,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { displayWarning } from '../../../store/actions';
 import BottomButtons from './bottom-buttons';
 
-JsonImportSubview.propTypes = {
-  importAccountFunc: PropTypes.func.isRequired,
-  onActionComplete: PropTypes.func.isRequired,
-};
-
 export default function JsonImportSubview({
   importAccountFunc,
   onActionComplete,
@@ -104,3 +99,14 @@ export default function JsonImportSubview({
     </>
   );
 }
+
+JsonImportSubview.propTypes = {
+  /**
+   * Function to import the account
+   */
+  importAccountFunc: PropTypes.func.isRequired,
+  /**
+   * Executes when the key is imported
+   */
+  onActionComplete: PropTypes.func.isRequired,
+};

ui/components/multichain/import-account/private-key.js

@@ -9,11 +9,6 @@ import {
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import BottomButtons from './bottom-buttons';
 
-PrivateKeyImportView.propTypes = {
-  importAccountFunc: PropTypes.func.isRequired,
-  onActionComplete: PropTypes.func.isRequired,
-};
-
 export default function PrivateKeyImportView({
   importAccountFunc,
   onActionComplete,
@@ -60,3 +55,14 @@ export default function PrivateKeyImportView({
     </>
   );
 }
+
+PrivateKeyImportView.propTypes = {
+  /**
+   * Function to import the account
+   */
+  importAccountFunc: PropTypes.func.isRequired,
+  /**
+   * Executes when the key is imported
+   */
+  onActionComplete: PropTypes.func.isRequired,
+};

ui/components/multichain/import-nfts-modal/import-nfts-modal.js

@@ -278,5 +278,8 @@ export const ImportNftsModal = ({ onClose }) => {
 };
 
 ImportNftsModal.propTypes = {
+  /**
+   * Executes when the modal closes
+   */
   onClose: PropTypes.func.isRequired,
 };

ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js

@@ -103,6 +103,12 @@ export const ImportTokensModalConfirm = ({ onBackClick, onImportClick }) => {
 };
 
 ImportTokensModalConfirm.propTypes = {
+  /**
+   * Executes when the Back button is clicked
+   */
   onBackClick: PropTypes.func.isRequired,
+  /**
+   * Executes when the Import button is clicked
+   */
   onImportClick: PropTypes.func.isRequired,
 };

ui/components/multichain/menu-items/account-details-menu-item.js

@@ -47,8 +47,20 @@ export const AccountDetailsMenuItem = ({
 };
 
 AccountDetailsMenuItem.propTypes = {
+  /**
+   * Represents the "location" property of the metrics event
+   */
   metricsLocation: PropTypes.string.isRequired,
+  /**
+   * Closes the menu
+   */
   closeMenu: PropTypes.func,
+  /**
+   * Address to show account details for
+   */
   address: PropTypes.string.isRequired,
+  /**
+   * Custom properties for the menu item text
+   */
   textProps: PropTypes.object,
 };

ui/components/multichain/menu-items/view-explorer-menu-item.js

@@ -95,8 +95,20 @@ export const ViewExplorerMenuItem = ({
 };
 
 ViewExplorerMenuItem.propTypes = {
+  /**
+   * Represents the "location" property of the metrics event
+   */
   metricsLocation: PropTypes.string.isRequired,
+  /**
+   * Closes the menu
+   */
   closeMenu: PropTypes.func,
-  textProps: PropTypes.object,
+  /**
+   * Address to show account details for
+   */
   address: PropTypes.string.isRequired,
+  /**
+   * Custom properties for the menu item text
+   */
+  textProps: PropTypes.object,
 };

ui/components/multichain/nft-item/nft-item.js

@@ -106,13 +106,40 @@ export const NftItem = ({
 };
 
 NftItem.propTypes = {
+  /**
+   * NFT media source
+   */
   src: PropTypes.string,
+  /**
+   * Alt text for the NFT
+   */
   alt: PropTypes.string.isRequired,
+  /**
+   * The NFT's name
+   */
   name: PropTypes.string.isRequired,
+  /**
+   * Name of the network the NFT lives on
+   */
   networkName: PropTypes.string.isRequired,
+  /**
+   * Image that represents the network
+   */
   networkSrc: PropTypes.string.isRequired,
+  /**
+   * Token ID of the NFT
+   */
   tokenId: PropTypes.string.isRequired,
+  /**
+   * Executes when the NFT is clicked
+   */
   onClick: PropTypes.func,
+  /**
+   * Represents if the NFT is clickable for larger image
+   */
   clickable: PropTypes.bool,
+  /**
+   * The NFT image URL
+   */
   nftImageURL: PropTypes.string,
 };