Refactored side panel components

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Refactored side panel components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/271)
 - [Fixed trimmed address not showing in address-table](https://github.com/multiversx/mx-sdk-dapp-ui/pull/273)
 - [Added minimize/maximize action for toasts](https://github.com/multiversx/mx-sdk-dapp-ui/pull/272)
 - [Eslint and prettierrc fixes](https://github.com/multiversx/mx-sdk-dapp-ui/pull/270)

src/common/ProviderIdleScreen/ProviderIdleScreen.tsx

@@ -4,6 +4,7 @@ import type { IProviderBase } from 'types/provider.types';
 import { ProviderTypeEnum } from 'types/provider.types';
 
 import { getProviderIntroText } from './helpers/getProviderIntroText';
+import { SidePanelHeader } from 'components/visual/SidePanel/components/SidePanelHeader/SidePanelHeader';
 
 const styles = {
   container: 'mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden',
@@ -50,7 +51,7 @@ export function ProviderIdleScreen({
   if (provider.type === ProviderTypeEnum.ledger) {
     return (
       <Fragment>
-        <mvx-side-panel-header hasLeftButton={false} panelTitle={provider.name} onRightButtonClick={onClose} />
+        <SidePanelHeader hasLeftButton={false} panelTitle={provider.name} onRightButtonClick={onClose} />
 
         <mvx-ledger-intro onConnect={onAccess} />
       </Fragment>
@@ -59,7 +60,7 @@ export function ProviderIdleScreen({
 
   return (
     <div class={styles.container}>
-      <mvx-side-panel-header hasLeftButton={false} panelTitle={provider.name} onRightButtonClick={onClose} />
+      <SidePanelHeader hasLeftButton={false} panelTitle={provider.name} onRightButtonClick={onClose} />
 
       <div class={styles.intro} style={{ color: 'var(--mvx-text-color-primary)' }}>
         <div class={styles.icon}>{providerIntroIcon}</div>

src/components/functional/ledger-connect/ledger-connect.tsx

@@ -6,6 +6,7 @@ import { EventBus, type IEventBus } from 'utils/EventBus';
 import { getLedgerAddressByIndex } from './helpers/getLedgerAddressByIndex';
 import type { ILedgerConnectPanelData } from './ledger-connect.types';
 import { LedgerConnectEventsEnum } from './ledger-connect.types';
+import { SidePanelHeader } from 'components/visual/SidePanel/components/SidePanelHeader/SidePanelHeader';
 
 // prettier-ignore
 const styles = {
@@ -89,7 +90,7 @@ export class LedgerConnect {
     if (this.ledgerDataState.accountScreenData) {
       return (
         <Host class={styles.ledgerConnectHost}>
-          <mvx-side-panel-header
+          <SidePanelHeader
             panelTitle={providerLabels.ledger}
             hasLeftButton={false}
             onRightButtonClick={this.handleClose.bind(this)}
@@ -111,7 +112,7 @@ export class LedgerConnect {
     if (this.ledgerDataState.confirmScreenData) {
       return (
         <Host class={styles.ledgerConnectHost}>
-          <mvx-side-panel-header
+          <SidePanelHeader
             panelTitle={providerLabels.ledger}
             hasLeftButton={false}
             onRightButtonClick={this.handleClose.bind(this)}
@@ -124,7 +125,7 @@ export class LedgerConnect {
 
     return (
       <Host class={styles.ledgerConnectHost}>
-        <mvx-side-panel-header
+        <SidePanelHeader
           panelTitle={providerLabels.ledger}
           hasLeftButton={false}
           onRightButtonClick={this.handleClose.bind(this)}

src/components/functional/notifications-feed/notifications-feed.scss

@@ -95,7 +95,7 @@
   }
 
   // Ensure children don't cause horizontal scroll
-  > * {
+  >* {
     @apply mvx:w-full mvx:max-w-full mvx:box-border;
   }
-}
+}

src/components/functional/notifications-feed/notifications-feed.tsx

@@ -1,12 +1,14 @@
 import { Component, h, Method, State } from '@stencil/core';
 import { Icon } from 'common/Icon';
+import { SidePanel } from 'components/visual/SidePanel/SidePanel';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
 import type { IEventBus } from 'utils/EventBus';
 import { EventBus } from 'utils/EventBus';
 
 import type { ITransactionListItem } from '../../visual/transaction-list-item/transaction-list-item.types';
 import type { ITransactionToast } from '../toasts-list/components/transaction-toast/transaction-toast.type';
 import { NotificationsFeedEventsEnum } from './notifications-feed.types';
+import { ANIMATION_DELAY_PROMISE } from 'components/visual/SidePanel/sidePanel.constants';
 
 @Component({
   tag: 'mvx-notifications-feed',
@@ -26,7 +28,7 @@ export class NotificationsFeed {
 
   @Method() async closeWithAnimation() {
     this.isOpen = false;
-    const animationDelay = await new Promise(resolve => setTimeout(resolve, 300));
+    const animationDelay = await ANIMATION_DELAY_PROMISE;
     return animationDelay;
   }
 
@@ -91,7 +93,7 @@ export class NotificationsFeed {
     const hasPending = this.pendingTransactions?.length > 0;
 
     return (
-      <mvx-side-panel
+      <SidePanel
         isOpen={this.isOpen}
         panelTitle="Notifications Feed"
         onClose={this.handleClose}
@@ -131,7 +133,7 @@ export class NotificationsFeed {
             </div>
           </div>
         </div>
-      </mvx-side-panel>
+      </SidePanel>
     );
   }
 }

src/components/functional/pending-transactions-panel/pending-transactions-panel.scss

@@ -28,4 +28,4 @@
   align-items: center;
   flex: 1;
   padding: 16px;
-}
+}

src/components/functional/pending-transactions-panel/pending-transactions-panel.tsx

@@ -1,6 +1,7 @@
 import { Component, h, Method, State } from '@stencil/core';
 import { ProviderIdleScreen } from 'common/ProviderIdleScreen/ProviderIdleScreen';
-import { ANIMATION_DELAY_PROMISE } from 'components/visual/side-panel/side-panel.constants';
+import { ANIMATION_DELAY_PROMISE } from 'components/visual/SidePanel/sidePanel.constants';
+import { SidePanel } from 'components/visual/SidePanel/SidePanel';
 import type { IProviderBase } from 'types/provider.types';
 import { ProviderTypeEnum } from 'types/provider.types';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
@@ -76,7 +77,11 @@ export class PendingTransactionsPanel {
 
   render() {
     return (
-      <mvx-side-panel isOpen={this.isOpen} panelTitle={this?.provider?.name} showHeader={false}>
+      <SidePanel
+        isOpen={this.isOpen}
+        panelTitle={this?.provider?.name}
+        showHeader={false}
+      >
         <ProviderIdleScreen
           provider={this.provider}
           onClose={this.handleClose}
@@ -85,7 +90,7 @@ export class PendingTransactionsPanel {
         >
           <button onClick={this.handleClose}>Close</button>
         </ProviderIdleScreen>
-      </mvx-side-panel>
+      </SidePanel>
     );
   }
 }

src/components/functional/pending-transactions-panel/tests/pending-transactions-panel.e2e.ts

@@ -21,12 +21,13 @@ describe('pending-transactions-panel', () => {
     });
 
     page.rootInstance.provider = { name: title };
+    page.rootInstance.isOpen = true;
     await page.waitForChanges();
 
-    const panel = page.root.shadowRoot.querySelector('mvx-side-panel');
+    const panel = page.root.shadowRoot.querySelector('#side-panel');
     expect(panel).toBeTruthy();
 
-    const panelTitle = panel.getAttribute('panelTitle');
-    expect(panelTitle).toBe(title);
+    expect(page.rootInstance.provider?.name).toBe(title);
+    expect(page.rootInstance.isOpen).toBe(true);
   });
 });

src/components/functional/sign-transactions-panel/sign-transactions-panel.scss

@@ -33,4 +33,4 @@
 
 .trim-right {
   @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip;
-}
+}

src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx

@@ -1,6 +1,7 @@
 import { Component, h, Method, State } from '@stencil/core';
 import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction';
-import { ANIMATION_DELAY_PROMISE } from 'components/visual/side-panel/side-panel.constants';
+import { ANIMATION_DELAY_PROMISE } from 'components/visual/SidePanel/sidePanel.constants';
+import { SidePanel } from 'components/visual/SidePanel/SidePanel';
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
 import type { IEventBus } from 'utils/EventBus';
@@ -148,7 +149,7 @@ export class SignTransactionsPanel {
     const { currentIndex, transactionsCount, origin } = commonData;
 
     return (
-      <mvx-side-panel
+      <SidePanel
         isOpen={this.isOpen}
         onClose={this.handleClose}
         panelTitle="Confirm Transaction"
@@ -201,7 +202,7 @@ export class SignTransactionsPanel {
             handleCopyButtonClick={this.handleCopyButtonClick}
           />
         </div>
-      </mvx-side-panel>
+      </SidePanel>
     );
   }
 }

src/components/functional/unlock-panel/unlock-panel.scss

@@ -1 +1 @@
-// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes.
+// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes.

src/components/functional/unlock-panel/unlock-panel.tsx

@@ -1,6 +1,7 @@
 import { Component, Element, h, Method, State } from '@stencil/core';
 import { ProviderIdleScreen } from 'common/ProviderIdleScreen/ProviderIdleScreen';
-import { ANIMATION_DELAY_PROMISE } from 'components/visual/side-panel/side-panel.constants';
+import { ANIMATION_DELAY_PROMISE } from 'components/visual/SidePanel/sidePanel.constants';
+import { SidePanel } from 'components/visual/SidePanel/SidePanel';
 import type { IProviderBase } from 'types/provider.types';
 import { ProviderTypeEnum } from 'types/provider.types';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
@@ -159,7 +160,7 @@ export class UnlockPanel {
     const isCustomProviderActive = this.selectedMethod && this.isCustomProvider(this.selectedMethod.type);
 
     return (
-      <mvx-side-panel
+      <SidePanel
         isOpen={this.isOpen}
         panelTitle={panelTitle}
         onClose={this.handleClose}
@@ -210,7 +211,7 @@ export class UnlockPanel {
             <UnlockPanelFooter walletAddress={this.walletAddress} />
           </div>
         )}
-      </mvx-side-panel>
+      </SidePanel>
     );
   }
 }

src/components/functional/wallet-connect/wallet-connect.tsx

@@ -1,13 +1,13 @@
 import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { Icon } from 'common/Icon';
 import type { IEventBus, IWalletConnectPanelData } from 'components';
-import { SidePanelHeaderSlotEnum } from 'components/visual/side-panel/components/side-panel-header/side-panel-header';
 import { providerLabels } from 'constants/providerFactory.constants';
 import QRCode from 'qrcode';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
 import { EventBus } from 'utils/EventBus';
 
 import { WalletConnectEventsEnum } from './wallet-connect.types';
+import { SidePanelHeader } from 'components/visual/SidePanel/components/SidePanelHeader/SidePanelHeader';
 
 // prettier-ignore
 const styles = {
@@ -86,16 +86,15 @@ export class WalletConnect {
   render() {
     return (
       <Host class={styles.walletConnectHost}>
-        <mvx-side-panel-header
+        <SidePanelHeader
           hasRightButton={true}
           hasLeftButton={!this.showScanPage}
           panelTitle={providerLabels.walletConnect}
           onLeftButtonClick={this.handlePageToggle.bind(this)}
           onRightButtonClick={() => this.eventBus.publish(WalletConnectEventsEnum.CLOSE)}
-        >
-          {!this.showScanPage && <Icon name="back-arrow" slot={SidePanelHeaderSlotEnum.leftIcon} />}
-          <Icon name="close" slot={SidePanelHeaderSlotEnum.rightIcon} />
-        </mvx-side-panel-header>
+          leftIcon={!this.showScanPage ? <Icon name="back-arrow" /> : undefined}
+          rightIcon={<Icon name="close" />}
+        />
 
         <div class={styles.walletConnect}>
           {this.showScanPage ? (

src/components/visual/SidePanel/SidePanel.tsx

@@ -0,0 +1,87 @@
+import { h } from '@stencil/core';
+import classNames from 'classnames';
+import { SidePanelHeader } from './components/SidePanelHeader/SidePanelHeader';
+import { SidePanelSwiper } from './components/SidePanelSwiper/SidePanelSwiper';
+import { handleSidePanelOpenChange } from './helpers/handleSidePanelOpenChange';
+import { state } from './sidePanelStore';
+
+import styles from './sidePanel.styles';
+
+interface SidePanelPropsType {
+  isOpen?: boolean;
+  panelClassName?: string;
+  panelTitle: string;
+  hasBackButton?: boolean;
+  showHeader?: boolean;
+  onClose?: () => void;
+  onBack?: () => void;
+}
+
+export function SidePanel({
+  isOpen = false,
+  panelClassName,
+  panelTitle,
+  hasBackButton,
+  showHeader = true,
+  onClose,
+  onBack
+}: SidePanelPropsType, children: JSX.Element) {
+  if (isOpen !== undefined) {
+    handleSidePanelOpenChange(isOpen, (shouldAnimate) => {
+      state.shouldAnimate = shouldAnimate;
+    });
+  }
+
+  const sidePanelIdentifier = 'side-panel';
+  const shouldAnimate = state.shouldAnimate;
+
+  const handleOverlayClick = (event: MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      onClose?.();
+    }
+  };
+
+  const handleCloseClick = (event: MouseEvent) => {
+    event.preventDefault();
+    onClose?.();
+  };
+
+  const handleBackClick = (event: MouseEvent) => {
+    event.preventDefault();
+    onBack?.();
+  };
+
+  return (
+    <div
+      onClick={handleOverlayClick}
+      class={classNames([styles.sidePanelWrapper], { [styles.sidePanelWrapperVisible]: shouldAnimate })}
+    >
+      <SidePanelSwiper
+        open={shouldAnimate}
+        onSheetDismiss={onClose}
+      >
+        <div
+          id={sidePanelIdentifier}
+          class={classNames([styles.sidePanel], { [styles.sidePanelVisible]: shouldAnimate }, panelClassName)}
+        >
+          {showHeader && (
+            <SidePanelHeader
+              panelTitle={panelTitle}
+              panelClassName={panelClassName}
+              hasLeftButton={hasBackButton}
+              onRightButtonClick={handleCloseClick}
+              onLeftButtonClick={handleBackClick}
+            />
+          )}
+
+          <div
+            class={styles.sidePanelContent}
+          >
+            {children}
+          </div>
+        </div>
+      </SidePanelSwiper>
+    </div>
+  );
+}
+