[MMI] adds wrong network notification (#19168)

* adds component and test

* adds correct icon and story file

* lint

* typo fix

.storybook/main.js

@@ -55,6 +55,7 @@ module.exports = {
       path: false,
       stream: require.resolve('stream-browserify'),
       _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
+      zlib: false,
     };
     config.module.strictExportPresence = true;
     config.module.rules.push({

app/_locales/en/messages.json

@@ -989,6 +989,9 @@
   "custodySessionExpired": {
     "message": "Custodian session expired."
   },
+  "custodyWrongChain": {
+    "message": "This account is not set up for use with $1"
+  },
   "custom": {
     "message": "Advanced"
   },

app/build-types/mmi/images/icons/red-triangle-exclaim.svg

@@ -1,4 +0,0 @@
-
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0L0 16H16L8 0ZM8 3.36842L13.4764 14.3158H2.52364L8 3.36842ZM7.27273 6.73684V10.1053H8.72727V6.73684H7.27273ZM7.27273 11.7895V13.4737H8.72727V11.7895" fill="#D73A49"/>
-</svg>

ui/components/institutional/wrong-network-notification/index.js

@@ -0,0 +1 @@
+export { default } from './wrong-network-notification';

ui/components/institutional/wrong-network-notification/index.scss

@@ -0,0 +1,13 @@
+.wrong-network-notification {
+  @media screen and (min-width: $break-large) {
+    width: 85vw;
+  }
+
+  @media screen and (min-width: 768px) {
+    width: 80vw;
+  }
+
+  @media screen and (min-width: 1280px) {
+    width: 62vw;
+  }
+}

ui/components/institutional/wrong-network-notification/wrong-network-notification.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  DISPLAY,
+  AlignItems,
+  JustifyContent,
+  BackgroundColor,
+  BLOCK_SIZES,
+  IconColor,
+} from '../../../helpers/constants/design-system';
+import { getSelectedAccountCachedBalance } from '../../../selectors';
+import { getIsCustodianSupportedChain } from '../../../selectors/institutional/selectors';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { Text, Icon, IconName, IconSize } from '../../component-library';
+import Box from '../../ui/box';
+
+const WrongNetworkNotification = () => {
+  const t = useI18nContext();
+  const providerConfig = useSelector(getProviderConfig);
+  const balance = useSelector(getSelectedAccountCachedBalance);
+
+  const isCustodianSupportedChain = useSelector(getIsCustodianSupportedChain);
+
+  const network = providerConfig.nickname || providerConfig.type;
+
+  return !isCustodianSupportedChain && balance ? (
+    <Box
+      className="wrong-network-notification"
+      data-testid="wrong-network-notification"
+      display={DISPLAY.FLEX}
+      justifyContent={JustifyContent.center}
+      alignItems={AlignItems.center}
+      padding={[1, 6]}
+      backgroundColor={BackgroundColor.errorMuted}
+      width={BLOCK_SIZES.FULL}
+    >
+      <Icon
+        name={IconName.Danger}
+        size={IconSize.Sm}
+        color={IconColor.errorDefault}
+      />
+      <Text marginLeft={2}>
+        {t('custodyWrongChain', [
+          network ? network.charAt(0).toUpperCase() + network.slice(1) : '',
+        ])}
+      </Text>
+    </Box>
+  ) : null;
+};
+
+export default WrongNetworkNotification;

ui/components/institutional/wrong-network-notification/wrong-network-notification.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store/store';
+import testData from '../../../../.storybook/test-data';
+import WrongNetworkNotification from '.';
+
+const customData = {
+  ...testData,
+  metamask: {
+    ...testData.metamask,
+    providerConfig: {
+      type: 'test',
+      chainId: '3',
+    },
+    cachedBalances: {
+      3: {
+        '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': '0x0',
+      },
+    },
+    selectedAddress: '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275',
+    custodianSupportedChains: {
+      '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': {
+        supportedChains: ['1', '2'],
+        custodianName: 'saturn',
+      },
+    },
+    identities: {
+      '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': {
+        name: 'Custody Account A',
+        address: '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275',
+      },
+    },
+    keyrings: [
+      {
+        type: 'Custody',
+        accounts: ['0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275'],
+      },
+    ],
+  },
+};
+
+const store = configureStore(customData);
+
+export default {
+  title: 'Components/Institutional/WrongNetworkNotification',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  component: WrongNetworkNotification,
+};
+
+export const DefaultStory = () => {
+  return <WrongNetworkNotification />;
+};
+
+DefaultStory.storyName = 'WrongNetworkNotification';

ui/components/institutional/wrong-network-notification/wrong-network-notification.test.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import testData from '../../../../.storybook/test-data';
+import WrongNetworkNotification from '.';
+
+jest.mock('../../../../shared/modules/hash.utils');
+
+describe('Wrong Network Notification', function () {
+  const mockStore = {
+    ...testData,
+    metamask: {
+      ...testData.metamask,
+      providerConfig: {
+        type: 'test',
+        chainId: '3',
+      },
+      selectedAddress: '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275',
+      cachedBalances: {
+        '0x1': {
+          '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': '0x0',
+        },
+      },
+      custodianSupportedChains: {
+        '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': {
+          supportedChains: ['1', '2'],
+          custodianName: 'saturn',
+        },
+      },
+      identities: {
+        '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': {
+          name: 'Custody Account A',
+          address: '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275',
+        },
+      },
+      keyrings: [
+        {
+          type: 'Custody',
+          accounts: ['0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275'],
+        },
+      ],
+    },
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should not render if balance is empty', () => {
+    const store = configureMockStore()(mockStore);
+
+    const { container } = renderWithProvider(
+      <WrongNetworkNotification />,
+      store,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should not render if has a balance and custodian is in correct network', () => {
+    const customData = {
+      ...mockStore,
+      metamask: {
+        ...mockStore.metamask,
+        providerConfig: {
+          type: 'test',
+          chainId: '3',
+        },
+        cachedBalances: {
+          '0x1': {
+            '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': '0x0',
+          },
+        },
+      },
+    };
+    const store = configureMockStore()(customData);
+
+    const { container } = renderWithProvider(
+      <WrongNetworkNotification />,
+      store,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render if has a balance but custodian is in wrong network', () => {
+    const customData = {
+      ...mockStore,
+      metamask: {
+        ...mockStore.metamask,
+        providerConfig: {
+          type: 'test',
+          chainId: '3',
+        },
+        cachedBalances: {
+          3: {
+            '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275': '0x0',
+          },
+        },
+      },
+    };
+    const store = configureMockStore()(customData);
+
+    const { getByTestId } = renderWithProvider(
+      <WrongNetworkNotification />,
+      store,
+    );
+
+    expect(getByTestId('wrong-network-notification')).toBeInTheDocument();
+  });
+});