chore: migrated institutional ui components to ts

lavamoat/browserify/mmi/policy.json

@@ -803,7 +803,7 @@
         "@ethereumjs/tx>@ethereumjs/util": true,
         "@metamask-institutional/custody-keyring>@metamask-institutional/configuration-client": true,
         "@metamask-institutional/sdk": true,
-        "@metamask-institutional/sdk>@metamask-institutional/types": true,
+        "@metamask-institutional/types": true,
         "@metamask/obs-store": true,
         "browserify>crypto-browserify": true,
         "gulp-sass>lodash.clonedeep": true,
@@ -823,7 +823,7 @@
       "packages": {
         "@metamask-institutional/custody-controller": true,
         "@metamask-institutional/sdk": true,
-        "@metamask-institutional/sdk>@metamask-institutional/types": true,
+        "@metamask-institutional/types": true,
         "gulp-sass>lodash.clonedeep": true
       }
     },

package.json

@@ -286,6 +286,7 @@
     "@metamask-institutional/rpc-allowlist": "^1.0.3",
     "@metamask-institutional/sdk": "^0.1.30",
     "@metamask-institutional/transaction-update": "^0.2.5",
+    "@metamask-institutional/types": "^1.1.0",
     "@metamask/abi-utils": "^2.0.2",
     "@metamask/accounts-controller": "^17.2.0",
     "@metamask/address-book-controller": "^4.0.1",

ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.stories.js → ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import ConfirmRemoveJWT from '.';
 
 export default {
@@ -24,8 +25,11 @@ export default {
       { address: '0xaD6D458402F60fD3Bd25163575031ACDce07538D', balance: '0x0' },
     ],
   },
-};
+} as Meta<typeof ConfirmRemoveJWT>;
 
-export const DefaultStory = (args) => <ConfirmRemoveJWT {...args} />;
+const Template: StoryFn<typeof ConfirmRemoveJWT> = (args) => (
+  <ConfirmRemoveJWT {...args} />
+);
 
+export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'ConfirmRemoveJWT';

ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js → ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.tsx

@@ -1,5 +1,4 @@
 import React, { memo, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import CustodyAccountList from '../../../pages/institutional/connect-custody/account-list';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -14,8 +13,8 @@ import {
   ModalBody,
   ModalOverlay,
   Button,
-  BUTTON_VARIANT,
-  BUTTON_SIZES,
+  ButtonVariant,
+  ButtonSize,
 } from '../../component-library';
 import {
   BorderRadius,
@@ -25,7 +24,40 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 
-const ConfirmRemoveJWT = ({
+type AuthDetails = {
+  token?: string;
+  jwt?: string;
+  refreshToken?: string;
+};
+
+type CustodyAccountDetail = {
+  address: string;
+  name: string;
+  labels: string[];
+  authDetails: AuthDetails;
+};
+
+type Account = {
+  address: string;
+  balance: string;
+};
+
+type TokenAccount = {
+  address: string;
+  name: string;
+  labels: string[];
+  balance?: string;
+  token?: string;
+};
+
+type ConfirmRemoveJWTProps = {
+  hideModal: () => void;
+  token: string | { address: string };
+  custodyAccountDetails: CustodyAccountDetail[];
+  accounts: Account[];
+};
+
+const ConfirmRemoveJWT: React.FC<ConfirmRemoveJWTProps> = ({
   custodyAccountDetails,
   accounts,
   token: propsToken,
@@ -34,8 +66,8 @@ const ConfirmRemoveJWT = ({
   const t = useI18nContext();
   const dispatch = useDispatch();
   const [showMore, setShowMore] = useState(false);
-  const [tokenAccounts, setTokenAccounts] = useState([]);
-  let token = null;
+  const [tokenAccounts, setTokenAccounts] = useState<TokenAccount[]>([]);
+  let token: string | null = null;
 
   if (propsToken) {
     if (typeof propsToken === 'object') {
@@ -46,7 +78,7 @@ const ConfirmRemoveJWT = ({
   }
 
   useEffect(() => {
-    const lowercasedTokenAddress = token.toLowerCase();
+    const lowercasedTokenAddress = token?.toLowerCase() || '';
 
     const filteredAccounts = custodyAccountDetails.filter((item) => {
       const addressLower = item.address.toLowerCase();
@@ -102,12 +134,12 @@ const ConfirmRemoveJWT = ({
             className="confirm-action-jwt__jwt"
           >
             <Text ellipsis>
-              {showMore && token ? token : `...${token.slice(-9)}`}
+              {showMore && token ? token : `...${token?.slice(-9)}`}
             </Text>
           </Box>
           {!showMore && (
             <Text
-              color={TextColor.sepolia}
+              color={TextColor.primaryDefault}
               marginLeft={2}
               className="confirm-action-jwt__show-more"
             >
@@ -131,8 +163,8 @@ const ConfirmRemoveJWT = ({
         <Box display={Display.Flex} padding={4}>
           <Button
             block
-            variant={BUTTON_VARIANT.PRIMARY}
-            size={BUTTON_SIZES.LG}
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Lg}
             onClick={handleRemove}
             data-testid="remove-jwt-confirm-btn"
           >
@@ -144,11 +176,4 @@ const ConfirmRemoveJWT = ({
   );
 };
 
-ConfirmRemoveJWT.propTypes = {
-  hideModal: PropTypes.func.isRequired,
-  token: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  custodyAccountDetails: PropTypes.array.isRequired,
-  accounts: PropTypes.array.isRequired,
-};
-
 export default withModalProps(memo(ConfirmRemoveJWT));

ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.stories.js → ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.stories.tsx

@@ -60,13 +60,19 @@ const customData = {
 
 const store = configureStore(customData);
 
+type CustodyConfirmLinkArgs = {
+  hideModal: () => void;
+};
+
 export default {
   title: 'Components/Institutional/CustodyConfirmLink',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
   component: CustodyConfirmLink,
   args: {},
 };
 
-export const DefaultStory = (args) => <CustodyConfirmLink {...args} />;
+export const DefaultStory = (args: CustodyConfirmLinkArgs) => (
+  <CustodyConfirmLink {...args} />
+);
 
 DefaultStory.storyName = 'CustodyConfirmLink';

ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.js → ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
+import { KeyringTypes } from '@metamask/keyring-controller';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import testData from '../../../../.storybook/test-data';
 import { hideModal } from '../../../store/actions';
@@ -24,8 +25,9 @@ const mockedCustodianName = 'saturn-dev';
 
 describe('Custody Confirm Link', () => {
   const mockInternalAccount = createMockInternalAccount({
-    keyringType: 'Custody Test',
+    keyringType: KeyringTypes.hd,
     address: '0xAddress',
+    name: 'testCustody - Saturn',
   });
   const mockStore = {
     ...testData,
@@ -90,7 +92,7 @@ describe('Custody Confirm Link', () => {
   let store = configureStore()(mockStore);
 
   it('tries to open new tab with deeplink URL', () => {
-    global.platform = { openTab: jest.fn() };
+    global.platform = { openTab: jest.fn(), closeCurrentWindow: jest.fn() };
     const { getByTestId } = renderWithProvider(<CustodyConfirmLink />, store);
     fireEvent.click(getByTestId('custody-confirm-link__btn'));
     expect(global.platform.openTab).toHaveBeenCalledWith({

ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js → ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
+import { ICustodianType } from '@metamask-institutional/types';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   MetaMetricsEventName,
@@ -28,16 +28,43 @@ import {
 } from '../../../helpers/constants/design-system';
 import {
   Button,
-  BUTTON_VARIANT,
   Modal,
+  ModalContent,
+  ModalHeader,
   ModalOverlay,
   Text,
   Box,
+  ButtonVariant,
 } from '../../component-library';
-import { ModalContent } from '../../component-library/modal-content/deprecated';
-import { ModalHeader } from '../../component-library/modal-header/deprecated';
 
-const CustodyConfirmLink = ({ hideModal }) => {
+type CustodyConfirmLinkProps = {
+  hideModal: () => void;
+};
+
+type ModalStateProps = {
+  url?: string;
+  ethereum?: {
+    accounts: string[];
+  };
+  text?: string;
+  action?: string;
+};
+
+type State = {
+  appState: {
+    modal: {
+      modalState: {
+        props: {
+          link: ModalStateProps;
+        };
+      };
+    };
+  };
+};
+
+const CustodyConfirmLink: React.FC<CustodyConfirmLinkProps> = ({
+  hideModal,
+}) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const mmiActions = mmiActionsFactory();
@@ -49,9 +76,10 @@ const CustodyConfirmLink = ({ hideModal }) => {
   const { custodianName } =
     custodyAccountDetails[toChecksumHexAddress(address)] || {};
   const { displayName, iconUrl } =
-    custodians.find((item) => item.envName === custodianName) || {};
+    custodians.find((item: ICustodianType) => item.envName === custodianName) ||
+    {};
   const { url, ethereum, text, action } = useSelector(
-    (state) => state.appState.modal.modalState.props.link || {},
+    (state: State) => state.appState.modal.modalState.props.link || {},
   );
 
   const onClick = () => {
@@ -61,10 +89,12 @@ const CustodyConfirmLink = ({ hideModal }) => {
 
     if (ethereum) {
       const ethAccount = Object.values(mmiAccounts)
-        .map((internalAccount) => internalAccount.address)
-        .find((account) => ethereum.accounts.includes(account.toLowerCase()));
+        .map((internalAccount: { address: string }) => internalAccount.address)
+        .find((account: string) =>
+          ethereum.accounts.includes(account.toLowerCase()),
+        );
 
-      ethAccount && dispatch(setSelectedInternalAccount(ethAccount.id));
+      ethAccount && dispatch(setSelectedInternalAccount(ethAccount));
     }
 
     trackEvent({
@@ -125,7 +155,7 @@ const CustodyConfirmLink = ({ hideModal }) => {
           </Text>
           <Button
             data-testid="custody-confirm-link__btn"
-            variant={BUTTON_VARIANT.PRIMARY}
+            variant={ButtonVariant.Primary}
             className="custody-confirm-link__btn"
             onClick={onClick}
           >
@@ -138,8 +168,4 @@ const CustodyConfirmLink = ({ hideModal }) => {
   );
 };
 
-CustodyConfirmLink.propTypes = {
-  hideModal: PropTypes.func.isRequired,
-};
-
 export default withModalProps(CustodyConfirmLink);

ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap → ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CustodyLabels Component should render correctly 1`] = `
 <div>
   <label
-    class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center mm-box--color-text-default"
+    class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
     for="address-index"
   >
     <p

ui/components/institutional/custody-labels/custody-labels.stories.js → ui/components/institutional/custody-labels/custody-labels.stories.tsx

@@ -11,6 +11,20 @@ export default {
   },
 };
 
-export const DefaultStory = (args) => <CustodyLabels {...args} />;
+type LabelItem = {
+  key: string;
+  value: string;
+};
+
+type CustodyLabelsArgs = {
+  labels: LabelItem[];
+  index?: string;
+  background?: string;
+  hideNetwork?: boolean;
+};
+
+export const DefaultStory = (args: CustodyLabelsArgs) => (
+  <CustodyLabels {...args} />
+);
 
 DefaultStory.storyName = 'CustodyLabels';

ui/components/institutional/custody-labels/custody-labels.test.js → ui/components/institutional/custody-labels/custody-labels.test.tsx

@@ -7,7 +7,7 @@ describe('CustodyLabels Component', () => {
     const props = {
       labels: [{ key: 'testKey', value: 'value' }],
       index: 'index',
-      hideNetwork: 'true',
+      hideNetwork: true,
     };
 
     const { container } = render(<CustodyLabels {...props} />);