Merge branch 'develop' into snaps-permission

MetaMask · Sep 22, 2023 · 53c4df8 · 53c4df8
2 parents d852bc3 + 492a949
commit 53c4df8
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 31 deletions.
diff --git a/ui/components/component-library/modal-content/README.mdx b/ui/components/component-library/modal-content/README.mdx
@@ -61,11 +61,9 @@ If you do require a larger modal size you can use the `modalDialogProps` to add
 </Canvas>
 
 ```jsx
-import { DISPLAY } from '../../../helpers/constants/design-system';
+import { Display } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box';
-
-import { Modal, ModalContent, Text, Button, ButtonVariant } from '../../component-library';
+import { Box, Modal, ModalContent, Text, Button, ButtonVariant } from '../../component-library';
 
 enum ModalContentSizeStoryOption {
   Sm = 'sm',
@@ -80,7 +78,7 @@ const handleOnClick = (size: ModalContentSizeStoryOption) => {
   setShow({ ...show, [size]: !show[size] });
 };
 
-<Box display={DISPLAY.FLEX} gap={4}>
+<Box display={Display.Flex} gap={4}>
   <Button
     variant={ButtonVariant.Secondary}
     onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)}

diff --git a/ui/components/component-library/modal-content/modal-content.stories.tsx b/ui/components/component-library/modal-content/modal-content.stories.tsx
@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
-import Box from '../../ui/box';
+import { Display } from '../../../helpers/constants/design-system';
 
-import { DISPLAY } from '../../../helpers/constants/design-system';
-
-import { ButtonVariant, Button, Text, Modal, ModalHeader } from '..';
+import { Box, ButtonVariant, Button, Text, Modal, ModalHeader } from '..';
 
 import { ModalContent } from './modal-content';
 import { ModalContentSize } from './modal-content.types';
@@ -26,7 +24,7 @@ export default {
       options: Object.values(ModalContentSize),
     },
   },
-} as ComponentMeta<typeof ModalContent>;
+} as Meta<typeof ModalContent>;
 
 const LoremIpsum = () => (
   <Text marginBottom={4}>
@@ -41,7 +39,7 @@ const LoremIpsum = () => (
   </Text>
 );
 
-export const DefaultStory: ComponentStory<typeof ModalContent> = (args) => {
+export const DefaultStory: StoryFn<typeof ModalContent> = (args) => {
   const [show, setShow] = useState(false);
   const handleOnClick = () => {
     setShow(!show);
@@ -66,7 +64,7 @@ export const DefaultStory: ComponentStory<typeof ModalContent> = (args) => {
 
 DefaultStory.storyName = 'Default';
 
-export const Children: ComponentStory<typeof ModalContent> = (args) => {
+export const Children: StoryFn<typeof ModalContent> = (args) => {
   const [show, setShow] = useState(false);
   const handleOnClick = () => {
     setShow(!show);
@@ -105,7 +103,7 @@ enum ModalContentSizeStoryOption {
   ClassName = 'className',
 }
 
-export const Size: ComponentStory<typeof ModalContent> = (args) => {
+export const Size: StoryFn<typeof ModalContent> = (args) => {
   const [show, setShow] = useState({
     sm: false,
     className: false,
@@ -116,7 +114,7 @@ export const Size: ComponentStory<typeof ModalContent> = (args) => {
 
   return (
     <>
-      <Box display={DISPLAY.FLEX} gap={4}>
+      <Box display={Display.Flex} gap={4}>
         <Button
           variant={ButtonVariant.Secondary}
           onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)}

diff --git a/ui/components/component-library/modal-content/modal-content.tsx b/ui/components/component-library/modal-content/modal-content.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
 
 import {
@@ -12,18 +12,24 @@ import {
 
 import { Box, ModalFocus, useModalContext } from '..';
 
-import { ModalContentProps, ModalContentSize } from './modal-content.types';
+import { BoxProps } from '../box';
+import type { PolymorphicRef } from '../box';
+import {
+  ModalContentProps,
+  ModalContentSize,
+  ModalContentComponent,
+} from './modal-content.types';
 
-export const ModalContent = forwardRef(
-  (
+export const ModalContent: ModalContentComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
     {
       className = '',
       children,
       size = ModalContentSize.Sm,
       modalDialogProps,
       ...props
-    }: ModalContentProps,
-    ref: React.Ref<HTMLElement>,
+    }: ModalContentProps<C>,
+    ref?: PolymorphicRef<C>,
   ) => {
     const {
       onClose,
@@ -90,7 +96,7 @@ export const ModalContent = forwardRef(
           paddingLeft={4}
           paddingTop={[4, 8, 12]}
           paddingBottom={[4, 8, 12]}
-          {...props}
+          {...(props as BoxProps<C>)}
         >
           <Box
             as="section"

diff --git a/ui/components/component-library/modal-content/modal-content.types.ts b/ui/components/component-library/modal-content/modal-content.types.ts
@@ -1,5 +1,8 @@
 import React from 'react';
-import type { StyleUtilityProps } from '../box';
+import type {
+  PolymorphicComponentPropWithRef,
+  StyleUtilityProps,
+} from '../box';
 
 /*
  * ModalContent sizes
@@ -11,7 +14,7 @@ export enum ModalContentSize {
   Sm = 'sm',
 }
 
-export interface ModalContentProps extends StyleUtilityProps {
+export interface ModalContentStyleUtilityProps extends StyleUtilityProps {
   /**
    * The additional className of the ModalContent component
    */
@@ -31,3 +34,10 @@ export interface ModalContentProps extends StyleUtilityProps {
    */
   modalDialogProps?: any;
 }
+
+export type ModalContentProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, ModalContentStyleUtilityProps>;
+
+export type ModalContentComponent = <C extends React.ElementType = 'div'>(
+  props: ModalContentProps<C>,
+) => React.ReactElement | null;
diff --git a/ui/helpers/utils/institutional/find-by-custodian-name.ts b/ui/helpers/utils/institutional/find-by-custodian-name.ts
@@ -24,9 +24,12 @@ export function findCustodianByDisplayName(
   }
 
   for (const custodian of custodians) {
-    const custodianName = custodian.envName.toLowerCase();
+    const custodianName = custodian.name.toLowerCase();
 
-    if (formatedDisplayName.includes(custodianName)) {
+    if (
+      custodianName.length !== 0 &&
+      formatedDisplayName.includes(custodianName)
+    ) {
       return custodian;
     }
   }

diff --git a/ui/pages/institutional/custody/custody.js b/ui/pages/institutional/custody/custody.js
@@ -95,9 +95,11 @@ const CustodyPage = () => {
   const custodianButtons = useMemo(() => {
     const custodianItems = [];
 
-    const sortedCustodians = [...custodians].sort((a, b) =>
-      a.envName.toLowerCase().localeCompare(b.envName.toLowerCase()),
-    );
+    const sortedCustodians = [...custodians]
+      .filter((item) => item.type !== 'Jupiter')
+      .sort((a, b) =>
+        a.envName.toLowerCase().localeCompare(b.envName.toLowerCase()),
+      );
 
     function shouldShowInProduction(custodian) {
       return (

diff --git a/ui/pages/institutional/custody/custody.test.js b/ui/pages/institutional/custody/custody.test.js
@@ -43,7 +43,8 @@ describe('CustodyPage', function () {
         custodians: [
           {
             type: 'GK8',
-            envName: 'gk8',
+            envName: 'gk8-prod',
+            name: 'GK8',
             apiUrl: 'https://saturn-custody.dev.metamask-institutional.io',
             iconUrl:
               'https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg',
@@ -56,7 +57,8 @@ describe('CustodyPage', function () {
           },
           {
             type: 'Saturn B',
-            envName: 'Saturn Custody B',
+            envName: 'saturn-prod',
+            name: 'Saturn Custody B',
             apiUrl: 'https://saturn-custody.dev.metamask-institutional.io',
             iconUrl:
               'https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg',