diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx index 2027fb1b37..3d715d300b 100644 --- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx +++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx @@ -70,7 +70,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => { - + {/* */} diff --git a/libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx b/libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx new file mode 100644 index 0000000000..a2bfc440db --- /dev/null +++ b/libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx @@ -0,0 +1,22 @@ +import React, { useState } from 'react' +import { CustomTooltip } from '@remix-ui/helper' +import { FormattedMessage } from 'react-intl' +import { ExtendedRefs, ReferenceType } from '@floating-ui/react' + +export interface ScamAlertStatusProps { + refs: ExtendedRefs + getReferenceProps: (userProps?: React.HTMLProps | undefined) => Record +} + +export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertStatusProps) { + + return ( + <> +
+ +
+ + ) +} diff --git a/libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx b/libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx new file mode 100644 index 0000000000..e48f0eee2c --- /dev/null +++ b/libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx @@ -0,0 +1,52 @@ +import { ExtendedRefs, ReferenceType } from '@floating-ui/react' +import React, { CSSProperties } from 'react' +import { FormattedMessage } from 'react-intl' + +const _paq = (window._paq = window._paq || []) // eslint-disable-line + +export interface ScamDetailsProps { + refs: ExtendedRefs + floatStyle: CSSProperties + getFloatingProps: (userProps?: React.HTMLProps | undefined) => Record +} + +export default function ScamDetails ({ refs, floatStyle }: ScamDetailsProps) { + return ( + + ) +} diff --git a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx b/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx index a013f57330..f3ee497ccd 100644 --- a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx +++ b/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx @@ -1,30 +1,58 @@ -import React from 'react' +import React, { useState } from 'react' import { StatusBarInterface } from './types' import GitStatus from './components/gitStatus' import AIStatus from './components/aiStatus' +import ScamAlertStatus from './components/scamAlertStatus' +import ScamDetails from './components/scamDetails' +import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react' export interface RemixUIStatusBarProps { statusBarPlugin: StatusBarInterface } export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) { - + const [showScamDetails, setShowScamDetails] = useState(false) + const { refs, context, floatingStyles } = useFloating({ + open: showScamDetails, + onOpenChange: setShowScamDetails, + middleware: [ + offset(10), + flip({ fallbackAxisSideDirection: "end" }), + shift() + ], + whileElementsMounted: autoUpdate + }) + const click = useClick(context) + const dismiss = useDismiss(context) + const role = useRole(context) + const { getReferenceProps, getFloatingProps } = useInteractions([ + click, + dismiss, + role + ]) const getGitBranchName = async () => { return new Promise((resolve, recject) => { return 0 }) } return ( -
-
- -
-
+ <> + {showScamDetails && ( + + + )} +
+
+ +
+
+
+
+ + +
-
- -
-
+ ) } diff --git a/package.json b/package.json index 75166c9aca..4de5d00c80 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@ethereumjs/util": "9.0.3", "@ethereumjs/vm": "8.0.0", "@ethersphere/bee-js": "^3.2.0", + "@floating-ui/react": "^0.26.15", "@gradio/client": "^0.10.1", "@isomorphic-git/lightning-fs": "^4.4.1", "@microlink/react-json-view": "^1.23.0", diff --git a/yarn.lock b/yarn.lock index 34d352ac8e..0a9d3258c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2846,6 +2846,42 @@ resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8" integrity sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ== +"@floating-ui/core@^1.0.0": + version "1.6.2" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.2.tgz#d37f3e0ac1f1c756c7de45db13303a266226851a" + integrity sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg== + dependencies: + "@floating-ui/utils" "^0.2.0" + +"@floating-ui/dom@^1.0.0": + version "1.6.5" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9" + integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw== + dependencies: + "@floating-ui/core" "^1.0.0" + "@floating-ui/utils" "^0.2.0" + +"@floating-ui/react-dom@^2.0.0": + version "2.0.9" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.9.tgz#264ba8b061000baa132b5910f0427a6acf7ad7ce" + integrity sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ== + dependencies: + "@floating-ui/dom" "^1.0.0" + +"@floating-ui/react@^0.26.15": + version "0.26.15" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.15.tgz#d3103a2c77923749458edb304598b37ea852ef56" + integrity sha512-WKmfLkxTwCm09Dxq4LpjL3EPbZVSp5wvnap1jmculsfnzg2Ag/pCkP+OPyjE5dFMXqX97hsLIqJehboZ5XAHXw== + dependencies: + "@floating-ui/react-dom" "^2.0.0" + "@floating-ui/utils" "^0.2.0" + tabbable "^6.0.0" + +"@floating-ui/utils@^0.2.0": + version "0.2.2" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5" + integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw== + "@formatjs/ecma402-abstract@1.11.7": version "1.11.7" resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.7.tgz#47f1a854f679f813d9baa1ee55adae94880ec706" @@ -27506,6 +27542,11 @@ system-architecture@^0.1.0: resolved "https://registry.yarnpkg.com/system-architecture/-/system-architecture-0.1.0.tgz#71012b3ac141427d97c67c56bc7921af6bff122d" integrity sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA== +tabbable@^6.0.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + tap-out@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/tap-out/-/tap-out-2.1.0.tgz#c093079a915036de8b835bfa3297f14458b15358"