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

* test: recover Switch Mutation test

* fix: change Switch Mutation test for overlay flow

* feat: add routing to the Overlay; add Profile page

* refactor: imports optimization

---------

Co-authored-by: Nikita Teremovskiy <ni-2@mail.ru>

Author: alsakhaev

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,
 }