feat: introduce overlay and notifications (DAP-4762) (#25)

Author: Lisofffa

…ltitable-panel/assets/stylesDropdown.tsx …titable-panel/assets/styles-dropdown.tsxapps/extension/src/contentscript/multitable-panel/assets/stylesDropdown.tsx renamed to apps/extension/src/contentscript/multitable-panel/assets/styles-dropdown.tsx apps/extension/src/contentscript/multitable-panel/assets/stylesDropdown.tsx renamed to apps/extension/src/contentscript/multitable-panel/assets/styles-dropdown.tsx

@@ -25,7 +25,7 @@ import {
   SelectedMutationInfo,
   StarSelectedMutationWrapper,
   WrapperDropdown,
-} from '../assets/stylesDropdown'
+} from '../assets/styles-dropdown'
 import {
   AvailableIcon,
   Back,

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

@@ -1,6 +1,13 @@
 import React from 'react'
 import { useMutableWeb, useMutationApp } from '@mweb/engine'
 import { MiniOverlay, AppSwitcher } from '@mweb/shared-components'
+import styled from 'styled-components'
+
+const MiniOverlayContainer = styled(MiniOverlay)`
+  div[data-mweb-context-type="mweb-overlay"] {
+    top: 80px;
+  }
+`
 
 function AppSwitcherContainer({ app }) {
   // ToDo: move to @mweb/engine
@@ -14,11 +21,11 @@ function MutableOverlayContainer() {
   // ToDo: move to @mweb/engine
   const { selectedMutation, mutationApps } = useMutableWeb()
   return (
-    <MiniOverlay baseMutation={selectedMutation} mutationApps={mutationApps}>
+    <MiniOverlayContainer baseMutation={selectedMutation} mutationApps={mutationApps}>
       {mutationApps.map((app) => (
         <AppSwitcherContainer key={app.id} app={app} />
       ))}
-    </MiniOverlay>
+    </MiniOverlayContainer>
   )
 }
 

apps/gateway/src/components/navigation/MutableOverlayContainer.js

@@ -35,3 +35,5 @@ export {
 } from './app/contexts/notification-context'
 export { NotificationType } from './app/services/notification/notification.entity'
 export { NotificationDto } from './app/services/notification/dtos/notification.dto'
+export { PullRequestPayload, PullRequestResult, PullRequestStatus } from './app/services/notification/types/pull-request'
+export { RegularPayload } from './app/services/notification/types/regular'

libs/engine/src/index.ts

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@mweb/engine": "workspace:*",
-    "ethereum-blockies-base64": "^1.0.2"
+    "ethereum-blockies-base64": "^1.0.2",
+    "antd": "^5.18.3"
   }
 }

libs/shared-components/package.json

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Arrow = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="8"
+    viewBox="0 0 14 8"
+    fill="none"
+    stroke="currentColor"
+  >
+    <path
+      d="M1.5 1.25L7 6.75L12.5 1.25"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Arrow

…s/shared-components/src/common/Image.tsx …s/shared-components/src/common/image.tsxlibs/shared-components/src/common/Image.tsx renamed to libs/shared-components/src/common/image.tsx libs/shared-components/src/common/Image.tsx renamed to libs/shared-components/src/common/image.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const BellWithCircle = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
+    <path
+      d="M9.4375 7.81817C9.4375 6.95019 9.08982 6.11776 8.47095 5.504C7.85208 4.89024 7.01271 4.54544 6.1375 4.54544C5.26229 4.54544 4.42292 4.89024 3.80405 5.504C3.18518 6.11776 2.8375 6.95019 2.8375 7.81817C2.8375 11.6364 1.1875 12.7273 1.1875 12.7273H11.0875C11.0875 12.7273 9.4375 11.6364 9.4375 7.81817Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.08855 14.9091C6.99185 15.0744 6.85306 15.2116 6.68607 15.307C6.51908 15.4024 6.32976 15.4526 6.13705 15.4526C5.94434 15.4526 5.75501 15.4024 5.58802 15.307C5.42103 15.2116 5.28224 15.0744 5.18555 14.9091"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <circle cx="11.375" cy="3.5" r="3" fill="#D9304F" stroke="white" />
+  </svg>
+)
+
+export default BellWithCircle

libs/shared-components/src/mini-overlay/assets/icons/arrow.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Bell = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path
+        d="M9.4375 3.81817C9.4375 2.95019 9.08982 2.11776 8.47095 1.504C7.85208 0.890245 7.01271 0.545441 6.1375 0.545441C5.26229 0.545441 4.42292 0.890245 3.80405 1.504C3.18518 2.11776 2.8375 2.95019 2.8375 3.81817C2.8375 7.63635 1.1875 8.72726 1.1875 8.72726H11.0875C11.0875 8.72726 9.4375 7.63635 9.4375 3.81817Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.08855 10.9091C6.99185 11.0744 6.85306 11.2116 6.68607 11.307C6.51908 11.4024 6.32976 11.4526 6.13705 11.4526C5.94434 11.4526 5.75501 11.4024 5.58802 11.307C5.42103 11.2116 5.28224 11.0744 5.18555 10.9091"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Bell

libs/shared-components/src/mini-overlay/assets/icons/bell-with-circle.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Close = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10" fill="none">
+    <path
+      d="M8 1.5L1 8.5M1 1.5L8 8.5"
+      stroke="#7A818B"
+      strokeWidth="1.16667"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Close