feat: introduce Prediction Markets app page (DAP-4917, DAP-4924) (#63)

* fix: package.json script; crawler-backend env.ts

* feat: add icon to the App page header

* feat: adding Prediction Markets app page (DAP-4924)

* Update extension-artifact-upload.yml

* Update extension-release.yml

Author: Ni-2

.github/workflows/extension-artifact-upload.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.9.0
+          version: 10.7.0
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf

.github/workflows/extension-release.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.9.0
+          version: 10.7.0
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf

libs/engine/package.json

@@ -29,8 +29,6 @@
     "styled-components": "^5.3.6"
   },
   "peerDependencies": {
-    "near-api-js": "2.1.3",
-    "near-social-vm": "github:dapplets/near-social-vm",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",

libs/shared-components/package.json

@@ -21,6 +21,7 @@
     "styled-components": "^5.3.6"
   },
   "peerDependencies": {
+    "ethers": "^5.7.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
@@ -30,13 +31,14 @@
     "@ant-design/icons": "5.5.1",
     "@codemirror/state": "^6.4.1",
     "@mweb/backend": "workspace:*",
-    "@mweb/engine": "workspace:*",
     "@mweb/core": "workspace:*",
-    "@mweb/react-engine": "workspace:*",
+    "@mweb/engine": "workspace:*",
     "@mweb/react": "workspace:*",
+    "@mweb/react-engine": "workspace:*",
     "@uiw/codemirror-extensions-langs": "^4.23.3",
     "@uiw/react-codemirror": "^4.23.3",
     "antd": "^5.18.3",
+    "bs58": "^6.0.0",
     "classnames": "^2.5.1",
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",

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

@@ -18,6 +18,7 @@ import Home from './home'
 import Info from './info'
 import LoaderSettings from './loader-settings'
 import Bell from './bell'
+import LinkOut from './link-out'
 
 export {
   MutationFallbackIcon,
@@ -34,6 +35,7 @@ export {
   OpenOverlay,
   OpenOverlayWithCircle,
   Logo,
+  LinkOut,
   PersonAddAlt,
   Person,
   Home,

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const LinkOut = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.875 6.125L12.25 1.75M12.25 1.75H9.33333M12.25 1.75V4.66667M12.25 8.16667V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V2.91667C1.75 2.60725 1.87292 2.3105 2.09171 2.09171C2.3105 1.87292 2.60725 1.75 2.91667 1.75H5.83333"
+      stroke="currentColor"
+      strokeWidth="1.16667"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default LinkOut

libs/shared-components/src/mini-overlay/components/page-layout.tsx

@@ -118,6 +118,14 @@ const Header = styled.div`
   align-items: center;
   gap: 10px;
   margin: 6px 10px 0 !important;
+
+  img {
+    box-sizing: border-box;
+    object-fit: cover;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
 `
 
 const HomeIcon = styled.div`
@@ -174,12 +182,13 @@ const H1 = styled.h1`
 
 interface PageLayoutProps {
   title: string
+  icon?: React.ReactNode
   children: React.ReactNode | null
   backPath?: string | -1
 }
 
 const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
-  ({ title, children, backPath }, ref) => {
+  ({ title, icon, children, backPath }, ref) => {
     const navigate = useNavigate()
     return (
       <Container ref={ref} data-testid={`${title.toLowerCase()}-page`}>
@@ -193,6 +202,7 @@ const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
               <ArrowIcon />
             </BackButton>
           )}
+          {icon ? icon : null}
           <H1>{title}</H1>
         </Header>
         {children}