feat: teaser page for connected accounts (DAP-4807)

apps/extension/playwright.config.ts

@@ -18,6 +18,7 @@ export default {
       use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
+  timeout: 60000,
   // webServer: [
   //   {
   //     command: 'npm run modules',

apps/extension/src/contentscript/index.tsx

@@ -1,13 +1,13 @@
-import { NetworkId, setupWalletSelector } from '@near-wallet-selector/core'
-import { EventEmitter as NEventEmitter } from 'events'
-import { customElements, MutableWebProvider, ShadowDomWrapper } from '@mweb/engine'
 import { EngineConfig } from '@mweb/backend'
+import { customElements, MutableWebProvider, ShadowDomWrapper } from '@mweb/engine'
+import { setupWalletSelector } from '@near-wallet-selector/core'
+import { EventEmitter as NEventEmitter } from 'events'
 import { useInitNear } from 'near-social-vm'
 import React, { FC, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import browser from 'webextension-polyfill'
-import { NearNetworkId, networkConfigs } from '../common/networks'
 import Background from '../common/background'
+import { NearNetworkId, networkConfigs } from '../common/networks'
 import { ExtensionStorage } from './extension-storage'
 import { MultitablePanel } from './multitable-panel/multitable-panel'
 import { setupWallet } from './wallet'

apps/extension/src/contentscript/multitable-panel/components/dropdown.tsx

@@ -1,3 +1,6 @@
+import { EyeFilled, EyeInvisibleFilled } from '@ant-design/icons'
+import { EntitySourceType } from '@mweb/backend'
+import { useMutableWeb } from '@mweb/engine'
 import React, { DetailedHTMLProps, FC, HTMLAttributes, useMemo, useState } from 'react'
 import {
   OpenList,
@@ -6,15 +9,12 @@ import {
   SelectedMutationDescription,
   SelectedMutationId,
   SelectedMutationInfo,
+  SpanStyled,
   StarSelectedMutationWrapper,
   WrapperDropdown,
-  SpanStyled,
 } from '../assets/styles-dropdown'
 import { IconDropdown, StarSelectMutation, StarSelectMutationDefault } from '../assets/vectors'
-import { useMutableWeb } from '@mweb/engine'
-import { EntitySourceType } from '@mweb/backend'
 import { Badge } from './badge'
-import { EyeFilled, EyeInvisibleFilled } from '@ant-design/icons'
 import { MutationVersionDropdown } from './mutation-version-dropdown'
 
 export type DropdownProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {

apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx

@@ -1,15 +1,15 @@
-import { EventEmitter as NEventEmitter } from 'events'
+import { EntitySourceType } from '@mweb/backend'
 import { useMutableWeb } from '@mweb/engine'
+import { EventEmitter as NEventEmitter } from 'events'
 import React, { FC, useEffect, useRef, useState } from 'react'
 import Draggable from 'react-draggable'
 import styled from 'styled-components'
+import { NearNetworkId } from '../../common/networks'
 import { getIsPanelUnpinned, removePanelUnpinnedFlag, setPanelUnpinnedFlag } from '../storage'
 import { PinOutlineIcon, PinSolidIcon } from './assets/vectors'
 import { Dropdown } from './components/dropdown'
 import { MutationEditorModal } from './components/mutation-editor-modal'
 import MutableOverlayContainer from './mutable-overlay-container'
-import { NearNetworkId } from '../../common/networks'
-import { EntitySourceType } from '@mweb/backend'
 
 const WrapperPanel = styled.div<{ $isAnimated?: boolean }>`
   // Global Styles
@@ -116,7 +116,7 @@ interface MultitablePanelProps {
 
 export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
   const { mutations, allApps, selectedMutation, config } = useMutableWeb()
-  const [isDropdownVisible, setIsDropdownVisible] = useState(false)
+  const [isOverlayOpened, setIsOverlayOpened] = useState(false)
   const [isPin, setPin] = useState(!getIsPanelUnpinned())
   const [isDragging, setIsDragging] = useState(false)
   const [isNotchDisplayed, setIsNotchDisplayed] = useState(true)
@@ -160,7 +160,7 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
 
   const handleMutateButtonClick = () => {
     setIsModalOpen(true)
-    setIsDropdownVisible(false)
+    setIsOverlayOpened(false)
   }
 
   const handleModalClose = () => {
@@ -176,8 +176,8 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
         notchRef={notchRef}
         networkId={config.networkId as NearNetworkId}
         eventEmitter={eventEmitter}
-        setOpen={setIsDropdownVisible}
-        open={isDropdownVisible}
+        setOpen={setIsOverlayOpened}
+        open={isOverlayOpened}
         handleMutateButtonClick={handleMutateButtonClick}
       />
       <WrapperPanel $isAnimated={!isDragging} data-testid="mutation-panel">
@@ -206,12 +206,12 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
               className={
                 isPin
                   ? 'visible-pin'
-                  : isNotchDisplayed || isDropdownVisible || isDragging
+                  : isNotchDisplayed || isOverlayOpened || isDragging
                   ? 'visible-default'
                   : 'visible-notch'
               }
               $isAnimated={!isDragging}
-              $isOpen={isDropdownVisible}
+              $isOpen={isOverlayOpened}
               ref={notchRef}
             >
               <NotchButtonWrapper className="dragWrapper">
@@ -220,8 +220,8 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
                 </IconWrapper>
               </NotchButtonWrapper>
               <Dropdown
-                isVisible={isDropdownVisible}
-                onVisibilityChange={setIsDropdownVisible}
+                isVisible={isOverlayOpened}
+                onVisibilityChange={setIsOverlayOpened}
                 onMutateButtonClick={handleMutateButtonClick}
               />
               <NotchButtonWrapper onClick={handlePin}>

apps/extension/src/contentscript/multitable-panel/mutable-overlay-container.tsx

@@ -1,8 +1,8 @@
-import { EventEmitter as NEventEmitter } from 'events'
-import { useMutableWeb, useMutationApp } from '@mweb/engine'
 import { AppInstanceWithSettings } from '@mweb/backend'
+import { useMutableWeb, useMutationApp } from '@mweb/engine'
 import { AppSwitcher, MiniOverlay } from '@mweb/shared-components'
-import React, { useState } from 'react'
+import { EventEmitter as NEventEmitter } from 'events'
+import React from 'react'
 import Background from '../../common/background'
 import { NearNetworkId } from '../../common/networks'
 

apps/extension/tests/scenarios/open-profile.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '../fixtures/browser'
+
+// ToDo: qase mw-1
+test('open Profile page through the button in Mini Overlay', async ({ page }) => {
+  const url = 'https://github.com/dapplets/dapplet-extension/pull/217'
+
+  await page.goto(url)
+
+  // ToDo: move to POM
+  await expect(page.getByTestId('mweb-overlay')).toBeVisible({ timeout: 60_000 })
+
+  // actions
+  await page.getByTestId('profile-action-button').click()
+
+  // results
+  await expect(page.getByTestId('side-panel')).toBeVisible()
+  await expect(page.getByTestId('profile-page')).toBeVisible()
+})

apps/extension/tests/scenarios/switch-mutation.spec.ts

@@ -11,7 +11,7 @@ test('switch mutation', async ({ page }) => {
   await page.goto(url)
 
   // ToDo: move to POM
-  await expect(page.getByTestId('mweb-overlay')).toBeVisible({ timeout: 30_000 })
+  await expect(page.getByTestId('mweb-overlay')).toBeVisible({ timeout: 60_000 })
   await page.getByTestId('mutation-button').click()
   await expect(page.getByTestId('side-panel')).toBeVisible()
   await expect(page.getByTestId('side-panel').getByTestId('recently-used-mutations')).toContainText(

libs/engine/package.json

@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.21.0",
+    "@mweb/backend": "workspace:*",
     "@mweb/core": "workspace:*",
     "@mweb/react": "workspace:*",
-    "@mweb/backend": "workspace:*",
     "antd": "^5.18.3",
     "big.js": "^6.2.1",
     "caching-decorator": "^1.0.3",

libs/shared-components/package.json

@@ -27,17 +27,18 @@
     "styled-components": "^5.3.6"
   },
   "dependencies": {
+    "@ant-design/icons": "5.5.1",
     "@codemirror/state": "^6.4.1",
-    "@mweb/engine": "workspace:*",
     "@mweb/backend": "workspace:*",
+    "@mweb/engine": "workspace:*",
     "@uiw/codemirror-extensions-langs": "^4.23.3",
     "@uiw/react-codemirror": "^4.23.3",
     "antd": "^5.18.3",
-    "@ant-design/icons": "5.5.1",
     "codemirror": "^6.0.1",
     "ethereum-blockies-base64": "^1.0.2",
     "json-stringify-deterministic": "^1.0.12",
     "react-codemirror-merge": "^4.23.3",
-    "react-diff-viewer": "^3.1.1"
+    "react-diff-viewer": "^3.1.1",
+    "react-router": "^7.0.2"
   }
 }

libs/shared-components/src/mini-overlay/assets/icons/index.ts

@@ -12,6 +12,7 @@ import Disconnect from './disconnect'
 import OpenOverlay from './open-overlay'
 import OpenOverlayWithCircle from './open-overlay-with-circle'
 import Logo from './logo'
+import PersonAddAlt from './person-add-alt'
 
 export {
   MutationFallbackIcon,
@@ -28,4 +29,5 @@ export {
   OpenOverlay,
   OpenOverlayWithCircle,
   Logo,
+  PersonAddAlt,
 }

libs/shared-components/src/mini-overlay/assets/icons/person-add-alt.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const PersonAddAlt = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.8252 12.1333C11.4252 11.4166 9.60855 10.8333 7.50022 10.8333C5.39188 10.8333 3.57522 11.4166 2.17522 12.1333C1.7686 12.3427 1.42797 12.6607 1.19113 13.052C0.954299 13.4433 0.830525 13.8925 0.83355 14.3499V16.6666H14.1669V14.3499C14.1669 13.4166 13.6586 12.5583 12.8252 12.1333ZM7.50022 9.99992C9.34188 9.99992 10.8335 8.50825 10.8335 6.66659C10.8335 4.82492 9.34188 3.33325 7.50022 3.33325C5.65855 3.33325 4.16688 4.82492 4.16688 6.66659C4.16688 8.50825 5.65855 9.99992 7.50022 9.99992ZM16.6669 7.49992V5.83325C16.6669 5.37492 16.2919 4.99992 15.8335 4.99992C15.3752 4.99992 15.0002 5.37492 15.0002 5.83325V7.49992H13.3335C12.8752 7.49992 12.5002 7.87492 12.5002 8.33325C12.5002 8.79158 12.8752 9.16658 13.3335 9.16658H15.0002V10.8333C15.0002 11.2916 15.3752 11.6666 15.8335 11.6666C16.2919 11.6666 16.6669 11.2916 16.6669 10.8333V9.16658H18.3335C18.7919 9.16658 19.1669 8.79158 19.1669 8.33325C19.1669 7.87492 18.7919 7.49992 18.3335 7.49992H16.6669Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default PersonAddAlt

libs/shared-components/src/mini-overlay/profile.tsx → libs/shared-components/src/mini-overlay/header.tsx

@@ -9,14 +9,16 @@ import {
 } from './assets/icons'
 import { IWalletConnect } from './types'
 
-const ProfileWrapper = styled.div`
+const HeaderWrapper = styled.div`
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
   align-items: center;
-  width: calc(100% - 2px);
+  width: calc(100% - 20px);
   height: 56px;
   border-radius: 10px;
+  margin: 10px;
+  margin-bottom: 0;
   padding: 4px 10px;
   background: #fff;
   font-family: sans-serif;
@@ -240,14 +242,14 @@ const ButtonDisconnect = styled.button`
   }
 `
 
-export interface IProfileProps extends IWalletConnect {
+export interface IHeaderProps extends IWalletConnect {
   accountId: string | null
   closeProfile: () => void
   trackingRefs: Set<React.RefObject<HTMLDivElement>>
   openCloseWalletPopupRef: React.RefObject<HTMLButtonElement>
 }
 
-const Profile: FC<IProfileProps> = ({
+const Header: FC<IHeaderProps> = ({
   accountId,
   closeProfile,
   connectWallet,
@@ -280,7 +282,7 @@ const Profile: FC<IProfileProps> = ({
   }
 
   return (
-    <ProfileWrapper ref={wrapperRef}>
+    <HeaderWrapper ref={wrapperRef}>
       {accountId ? (
         <>
           <ProfileIcon>
@@ -314,8 +316,8 @@ const Profile: FC<IProfileProps> = ({
           </ButtonConnectWrapper>
         </>
       )}
-    </ProfileWrapper>
+    </HeaderWrapper>
   )
 }
 
-export default Profile
+export default Header

libs/shared-components/src/mini-overlay/index.tsx

@@ -11,6 +11,14 @@ import OverlayWrapper from './overlay-wrapper'
 import { MutationFallbackIcon, StopTopIcon, PlayCenterIcon, StopCenterIcon } from './assets/icons'
 import { NotificationProvider } from '@mweb/engine'
 import SidePanel from './side-panel'
+import {
+  MemoryRouter,
+  Navigate,
+  NavigateFunction,
+  useLocation,
+  useNavigate,
+  Location,
+} from 'react-router'
 
 const WrapperDriver = styled.div<{ $isOpen: boolean }>`
   display: block;
@@ -143,6 +151,17 @@ const LabelAppTop = styled.div`
   cursor: pointer;
 `
 
+const routes = [
+  {
+    id: 'main',
+    title: 'Home',
+  },
+  {
+    id: 'profile',
+    title: 'Profile',
+  },
+]
+
 interface IMutationAppsControl {
   enableApp: () => Promise<void>
   disableApp: () => Promise<void>
@@ -205,7 +224,11 @@ export const AppSwitcher: FC<IAppSwitcherProps> = ({ app, enableApp, disableApp,
   )
 }
 
-export const MiniOverlay: FC<IMiniOverlayProps> = ({
+const _MiniOverlay: FC<
+  IMiniOverlayProps & { navigate: NavigateFunction; location: Location<any> }
+> = ({
+  navigate,
+  location,
   baseMutation,
   mutationApps,
   connectWallet,
@@ -249,6 +272,8 @@ export const MiniOverlay: FC<IMiniOverlayProps> = ({
           }}
         >
           <SidePanel
+            navigate={navigate}
+            location={location}
             baseMutation={baseMutation}
             mutationApps={mutationApps}
             connectWallet={connectWallet}
@@ -257,19 +282,20 @@ export const MiniOverlay: FC<IMiniOverlayProps> = ({
             overlayRef={overlayRef}
             loggedInAccountId={loggedInAccountId}
             trackingRefs={trackingRefs}
-            isNotificationPageOpen={open}
-            openCloseNotificationPage={setOpen}
+            isOverlayOpened={open}
+            openOverlay={setOpen}
           >
             {children}
           </SidePanel>
         </Drawer>
 
         <OverlayWrapper
+          navigate={navigate}
+          location={location}
           apps={mutationApps.length > 0}
           onClose={() => setOpen(false)}
           open={open}
           connectWallet={connectWallet!}
-          openCloseNotificationPage={setOpen}
           loggedInAccountId={loggedInAccountId}
           modalContainerRef={overlayRef}
           disconnectWallet={disconnectWallet!}
@@ -281,3 +307,28 @@ export const MiniOverlay: FC<IMiniOverlayProps> = ({
     </WrapperDriver>
   )
 }
+
+const withRouter = (
+  Component: FC<IMiniOverlayProps & { navigate: NavigateFunction; location: Location<any> }>
+) => {
+  const Wrapper = (props: IMiniOverlayProps) => {
+    const navigate = useNavigate()
+    const location = useLocation()
+
+    if (location.pathname === '/') {
+      return <Navigate to={'/system/main'} replace />
+    }
+
+    return <Component navigate={navigate} location={location} {...props} />
+  }
+
+  return Wrapper
+}
+
+const __MiniOverlay = withRouter(_MiniOverlay)
+
+export const MiniOverlay = (props: IMiniOverlayProps) => (
+  <MemoryRouter>
+    <__MiniOverlay {...props} />
+  </MemoryRouter>
+)