From d34b7cb7d3b28d5628eec74034f288f15a189415 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 22 Sep 2023 21:54:57 -0500 Subject: [PATCH] UX: Multichain: Ensure all components have proptype docs --- .../account-details-authenticate.js | 12 ++++++++ .../account-details-display.js | 12 ++++++++ .../account-details/account-details-key.js | 9 ++++++ .../account-details/account-details.js | 3 ++ .../account-list-item-menu.js | 3 -- .../activity-list-item/activity-list-item.js | 30 +++++++++++++++++++ .../create-account/create-account.js | 3 ++ .../import-account/bottom-buttons.js | 21 +++++++++---- .../import-account/import-account.js | 3 ++ .../multichain/import-account/json.js | 16 ++++++---- .../multichain/import-account/private-key.js | 16 ++++++---- .../import-nfts-modal/import-nfts-modal.js | 3 ++ .../import-tokens-modal-confirm.js | 6 ++++ .../menu-items/account-details-menu-item.js | 12 ++++++++ .../menu-items/view-explorer-menu-item.js | 14 ++++++++- ui/components/multichain/nft-item/nft-item.js | 27 +++++++++++++++++ 16 files changed, 170 insertions(+), 20 deletions(-) diff --git a/ui/components/multichain/account-details/account-details-authenticate.js b/ui/components/multichain/account-details/account-details-authenticate.js index 2701293c3ffa..ffd85f445091 100644 --- a/ui/components/multichain/account-details/account-details-authenticate.js +++ b/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, }; diff --git a/ui/components/multichain/account-details/account-details-display.js b/ui/components/multichain/account-details/account-details-display.js index 4105150892b6..4255d3fa7a57 100644 --- a/ui/components/multichain/account-details/account-details-display.js +++ b/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, }; diff --git a/ui/components/multichain/account-details/account-details-key.js b/ui/components/multichain/account-details/account-details-key.js index 59ce4632bae6..197e6aad81d0 100644 --- a/ui/components/multichain/account-details/account-details-key.js +++ b/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, }; diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js index 8322b2f16883..b000051d6243 100644 --- a/ui/components/multichain/account-details/account-details.js +++ b/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, }; diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js index 90f070c45e80..036ae0a848ea 100644 --- a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js +++ b/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 */ diff --git a/ui/components/multichain/activity-list-item/activity-list-item.js b/ui/components/multichain/activity-list-item/activity-list-item.js index e2a2f3100047..8fd66714574a 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/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, }; diff --git a/ui/components/multichain/create-account/create-account.js b/ui/components/multichain/create-account/create-account.js index 3cdfe65f18e0..9cab2737df5e 100644 --- a/ui/components/multichain/create-account/create-account.js +++ b/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, }; diff --git a/ui/components/multichain/import-account/bottom-buttons.js b/ui/components/multichain/import-account/bottom-buttons.js index 426f535889fb..5fd77bd2138e 100644 --- a/ui/components/multichain/import-account/bottom-buttons.js +++ b/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({ ); } + +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, +}; diff --git a/ui/components/multichain/import-account/import-account.js b/ui/components/multichain/import-account/import-account.js index 6b266425b0af..2f7255db89d3 100644 --- a/ui/components/multichain/import-account/import-account.js +++ b/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, }; diff --git a/ui/components/multichain/import-account/json.js b/ui/components/multichain/import-account/json.js index 8ba5538323e4..14f85f9a0737 100644 --- a/ui/components/multichain/import-account/json.js +++ b/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, +}; diff --git a/ui/components/multichain/import-account/private-key.js b/ui/components/multichain/import-account/private-key.js index ba0640d2e5f6..74da4d29e2c8 100644 --- a/ui/components/multichain/import-account/private-key.js +++ b/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, +}; diff --git a/ui/components/multichain/import-nfts-modal/import-nfts-modal.js b/ui/components/multichain/import-nfts-modal/import-nfts-modal.js index e6f2d16655d2..51c7eb89ff03 100644 --- a/ui/components/multichain/import-nfts-modal/import-nfts-modal.js +++ b/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, }; diff --git a/ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js b/ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js index 43d4808f8c4d..251d97d33c18 100644 --- a/ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js +++ b/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, }; diff --git a/ui/components/multichain/menu-items/account-details-menu-item.js b/ui/components/multichain/menu-items/account-details-menu-item.js index a5526e9cbd7d..3a2af09d1536 100644 --- a/ui/components/multichain/menu-items/account-details-menu-item.js +++ b/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, }; diff --git a/ui/components/multichain/menu-items/view-explorer-menu-item.js b/ui/components/multichain/menu-items/view-explorer-menu-item.js index 60baab1a6beb..b4953cc0e5bc 100644 --- a/ui/components/multichain/menu-items/view-explorer-menu-item.js +++ b/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, }; diff --git a/ui/components/multichain/nft-item/nft-item.js b/ui/components/multichain/nft-item/nft-item.js index cbf6251bf2ec..15d955acc66d 100644 --- a/ui/components/multichain/nft-item/nft-item.js +++ b/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, };