Merge branch 'develop' into olu/ppom-sepolia

segun · web-flow · commit 600f417682d3 · 2024-03-04T19:34:58.000+03:00
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/app/alerts/alerts.js b/ui/components/app/alerts/alerts.js
@@ -18,7 +18,7 @@ const Alerts = ({ history }) => {
   if (_invalidCustomNetworkAlertIsOpen) {
     return <InvalidCustomNetworkAlert history={history} />;
   }
-  if (_unconnectedAccountAlertIsOpen) {
+  if (_unconnectedAccountAlertIsOpen && !process.env.MULTICHAIN) {
     return <UnconnectedAccountAlert />;
   }
 
diff --git a/ui/components/component-library/button-base/button-base.types.ts b/ui/components/component-library/button-base/button-base.types.ts
@@ -52,7 +52,7 @@ export interface ButtonBaseStyleUtilityProps
   /**
    * iconProps accepts all the props from Icon
    */
-  startIconProps?: IconProps<'span'>;
+  startIconProps?: Partial<IconProps<'span'>>;
   /**
    * Add icon to end (right side) of button text passing icon name
    * The name of the icon to display. Should be one of IconName
@@ -61,11 +61,11 @@ export interface ButtonBaseStyleUtilityProps
   /**
    * iconProps accepts all the props from Icon
    */
-  endIconProps?: IconProps<'span'>;
+  endIconProps?: Partial<IconProps<'span'>>;
   /**
    * iconLoadingProps accepts all the props from Icon
    */
-  iconLoadingProps?: IconProps<'span'>;
+  iconLoadingProps?: Partial<IconProps<'span'>>;
   /**
    * Boolean to show loading spinner in button
    */
diff --git a/ui/components/component-library/button-link/button-link.scss b/ui/components/component-library/button-link/button-link.scss
@@ -43,6 +43,10 @@
     font-size: inherit;
     line-height: inherit;
     letter-spacing: inherit;
+
+    &__icon {
+      top: 0;
+    }
   }
 
   &--size-inherit:hover:not(&--disabled) {
diff --git a/ui/components/component-library/button-link/button-link.tsx b/ui/components/component-library/button-link/button-link.tsx
@@ -19,6 +19,8 @@ export const ButtonLink: ButtonLinkComponent = React.forwardRef(
       disabled = false,
       loading = false,
       size = ButtonLinkSize.Auto,
+      endIconProps,
+      startIconProps,
       ...props
     }: ButtonLinkProps<C>,
     ref?: PolymorphicRef<C>,
@@ -41,10 +43,24 @@ export const ButtonLink: ButtonLinkComponent = React.forwardRef(
         startIconProps={{
           size:
             size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
+          ...startIconProps,
+          className:
+            size === ButtonLinkSize.Inherit
+              ? `mm-button-link--size-inherit__icon ${
+                  startIconProps?.className || ''
+                }`
+              : '',
         }}
         endIconProps={{
           size:
             size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
+          ...endIconProps,
+          className:
+            size === ButtonLinkSize.Inherit
+              ? `mm-button-link--size-inherit__icon ${
+                  endIconProps?.className || ''
+                }`
+              : '',
         }}
         iconLoadingProps={{
           size:
diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js
@@ -25,3 +25,4 @@ export { AvatarGroup } from './avatar-group';
 export { AssetPickerAmount } from './asset-picker-amount';
 export { AddressListItem } from './address-list-item';
 export { ConnectedStatus } from './connected-status';
+export { Toast, ToastContainer } from './toast';
diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss
@@ -27,3 +27,4 @@
 @import 'asset-picker-amount';
 @import 'asset-picker-amount/asset-picker';
 @import 'asset-picker-amount/asset-picker-modal';
+@import 'toast';
diff --git a/ui/components/multichain/toast/__snapshots__/toast.test.tsx.snap b/ui/components/multichain/toast/__snapshots__/toast.test.tsx.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast should render Toast component 1`] = `
+<div>
+  <div
+    class="mm-box mm-banner-base mm-box--padding-3 mm-box--display-flex mm-box--gap-2 mm-box--background-color-background-default mm-box--rounded-sm"
+    data-theme="light"
+  >
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-4"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <div
+            class="mm-avatar-account__jazzicon"
+          >
+            <div
+              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(24, 165, 242);"
+            >
+              <svg
+                height="32"
+                width="32"
+                x="0"
+                y="0"
+              >
+                <rect
+                  fill="#018E8C"
+                  height="32"
+                  transform="translate(6.427263444332595 -1.7203295797723996) rotate(470.8 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#F93301"
+                  height="32"
+                  transform="translate(1.1564119766476293 16.128853746500315) rotate(198.5 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#FA6800"
+                  height="32"
+                  transform="translate(22.348080171264016 5.115369684577057) rotate(148.9 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box"
+        >
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+          >
+            This is the Toast text
+          </p>
+          <button
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          >
+            Take some action
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      aria-label="[close]"
+      class="mm-box mm-button-icon mm-button-icon--size-sm mm-banner-base__close-button mm-box--margin-left-auto mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+    >
+      <span
+        class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+        style="mask-image: url('./images/icons/close.svg');"
+      />
+    </button>
+  </div>
+</div>
+`;
diff --git a/ui/components/multichain/toast/index.scss b/ui/components/multichain/toast/index.scss
@@ -0,0 +1,7 @@
+.toasts-container {
+  position: sticky;
+  bottom: 10px;
+  margin-inline-start: 10px;
+  margin-inline-end: 10px;
+  z-index: 200;
+}
diff --git a/ui/components/multichain/toast/index.ts b/ui/components/multichain/toast/index.ts
@@ -0,0 +1 @@
+export { ToastContainer, Toast } from './toast';
diff --git a/ui/components/multichain/toast/toast.stories.tsx b/ui/components/multichain/toast/toast.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import testData from '../../../../.storybook/test-data';
+import { AvatarAccount, AvatarAccountSize } from '../../component-library';
+import { BorderColor } from '../../../helpers/constants/design-system';
+import { Toast } from '.';
+
+const [chaosAddress] = Object.keys(testData.metamask.identities);
+
+const CHAOS_IDENTITY = {
+  ...testData.metamask.identities[chaosAddress],
+  balance: '0x152387ad22c3f0',
+  keyring: {
+    type: 'HD Key Tree',
+  },
+};
+
+export default {
+  title: 'Components/Multichain/Toast',
+  argTypes: {
+    startAdornment: {
+      control: 'text',
+    },
+    text: {
+      control: 'text',
+    },
+    actionText: {
+      control: 'text',
+    },
+    onActionClick: {
+      action: 'onClick',
+    },
+    onClose: {
+      action: 'onClick',
+    },
+  },
+  args: {
+    startAdornment: (<AvatarAccount
+    address={CHAOS_IDENTITY.address}
+    size={AvatarAccountSize.Md}
+    borderColor={BorderColor.transparent}
+  />),
+    text: 'This is the Toast text',
+    actionText: 'Take some action',
+    onActionClick: () => undefined,
+    onClose: () => undefined,
+  },
+};
+
+export const DefaultStory = (args) => <Toast {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/multichain/toast/toast.test.tsx b/ui/components/multichain/toast/toast.test.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable jest/require-top-level-describe */
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import testData from '../../../../.storybook/test-data';
+import { AvatarAccount, AvatarAccountSize } from '../../component-library';
+import { BorderColor } from '../../../helpers/constants/design-system';
+import { Toast } from '.';
+
+const CHAOS_IDENTITY: any = {
+  ...testData.metamask.identities['0x64a845a5b02460acf8a3d84503b0d68d028b4bb4'],
+  balance: '0x152387ad22c3f0',
+  keyring: {
+    type: 'HD Key Tree',
+  },
+};
+
+const onActionClick = jest.fn();
+const onClose = jest.fn();
+
+const ToastArgs = {
+  startAdornment: (
+    <AvatarAccount
+      address={CHAOS_IDENTITY.address}
+      size={AvatarAccountSize.Md}
+      borderColor={BorderColor.transparent}
+    />
+  ),
+  text: 'This is the Toast text',
+  actionText: 'Take some action',
+  onActionClick,
+  onClose,
+};
+
+describe('Toast', () => {
+  it('should render Toast component', () => {
+    const { container } = render(<Toast {...ToastArgs} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('executes onActionClick properly', () => {
+    const { getByText } = render(<Toast {...ToastArgs} />);
+    fireEvent.click(getByText(ToastArgs.actionText));
+    expect(onActionClick).toHaveBeenCalled();
+  });
+
+  it('executes onClose properly', () => {
+    render(<Toast {...ToastArgs} />);
+    const closeButton = document.querySelector('.mm-banner-base__close-button');
+    if (closeButton) {
+      fireEvent.click(closeButton);
+    }
+    expect(closeButton).toBeDefined();
+    expect(onActionClick).toHaveBeenCalled();
+  });
+});
diff --git a/ui/components/multichain/toast/toast.tsx b/ui/components/multichain/toast/toast.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ThemeType } from '../../../../shared/constants/preferences';
+import { BannerBase, Box, ButtonLink, Text } from '../../component-library';
+import { Display } from '../../../helpers/constants/design-system';
+
+export const ToastContainer = ({
+  children,
+}: {
+  children: React.ReactNode | string;
+}) => <Box className="toasts-container">{children}</Box>;
+
+export const Toast = ({
+  startAdornment,
+  text,
+  actionText,
+  onActionClick,
+  onClose,
+}: {
+  startAdornment: React.ReactNode | React.ReactNode[];
+  text: string;
+  actionText: string;
+  onActionClick: () => void;
+  onClose: () => void;
+}) => {
+  const { theme } = document.documentElement.dataset;
+
+  return (
+    <BannerBase
+      data-theme={theme === ThemeType.light ? ThemeType.dark : ThemeType.light}
+      onClose={onClose}
+    >
+      <Box display={Display.Flex} gap={4}>
+        {startAdornment}
+        <Box>
+          <Text>{text}</Text>
+          {actionText && onActionClick ? (
+            <ButtonLink onClick={onActionClick}>{actionText}</ButtonLink>
+          ) : null}
+        </Box>
+      </Box>
+    </BannerBase>
+  );
+};
diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js
diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const Alerts = ({ history }) => {`
`18`	`18`	`if (_invalidCustomNetworkAlertIsOpen) {`
`19`	`19`	`return <InvalidCustomNetworkAlert history={history} />;`
`20`	`20`	`}`
`21`		`- if (_unconnectedAccountAlertIsOpen) {`
	`21`	`+ if (_unconnectedAccountAlertIsOpen && !process.env.MULTICHAIN) {`
`22`	`22`	`return <UnconnectedAccountAlert />;`
`23`	`23`	`}`
`24`	`24`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { ToastContainer, Toast } from './toast';`