add scam alert to status bar.

6 months ago · ac584c1823
parent a0bea70dd2
commit ac584c1823
6 changed files with 156 additions and 12 deletions
--- 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) => {
            <LanguageOptions plugin={plugin}/>
            <HomeTabFeatured></HomeTabFeatured>
            <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
-            <HomeTabScamAlert></HomeTabScamAlert>
+            {/* <HomeTabScamAlert></HomeTabScamAlert> */}
          </div>
        </div>
      </ThemeContext.Provider>
--- a/libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx
+++ 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<ReferenceType>
+  getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>
+}
+
+export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertStatusProps) {
+
+  return (
+    <>
+      <div className="bg-danger p-1" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
+        <label className="text-white small">
+          <FormattedMessage id="home.scamAlert" />
+        </label>
+      </div>
+    </>
+  )
+}
--- a/libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx
+++ 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<ReferenceType>
+  floatStyle: CSSProperties
+  getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>
+}
+
+export default function ScamDetails ({ refs, floatStyle }: ScamDetailsProps) {
+  return (
+    <div
+      ref={refs.setFloating}
+      style={floatStyle}
+      className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex w-25 bg-danger border border-danger align-items-end"
+    >
+      <span className="align-self-center pl-4 mt-1">
+        <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 text-warning far fa-exclamation-triangle"></i>
+      </span>
+      <div className="d-flex flex-column">
+        <span className="pl-4 mt-1">
+          <FormattedMessage id="home.scamAlertText" />
+        </span>
+        <span className="pl-4 mt-1">
+          <FormattedMessage id="home.scamAlertText2" />:
+          <a
+            className="pl-2 remixui_home_text"
+            onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}
+            target="__blank"
+            href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d"
+          >
+            <FormattedMessage id="home.learnMore" />
+          </a>
+        </span>
+        <span className="pl-4 mt-1">
+          <FormattedMessage id="home.scamAlertText3" />: &nbsp;
+          <a
+            className="remixui_home_text"
+            onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])}
+            target="__blank"
+            href="https://remix-ide.readthedocs.io/en/latest/security.html"
+          >
+            <FormattedMessage id="home.here" />
+          </a>
+        </span>
+      </div>
+    </div>
+  )
+}
--- a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
+++ b/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
@ -1,20 +1,46 @@
-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 && (
+        <FloatingFocusManager context={context} modal={false}>
+          <ScamDetails refs={refs} floatStyle={floatingStyles} getFloatingProps={getFloatingProps} />
+        </FloatingFocusManager>)}
      <div className="d-flex flex-row bg-primary justify-content-between align-items-center">
        <div className="remixui_statusbar">
          <GitStatus />
@ -22,9 +48,11 @@ export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) {
        <div className="remixui_statusbar">

        </div>
-      <div className="remixui_statusbar">
+        <div className="remixui_statusbar d-flex flex-row">
+          <ScamAlertStatus refs={refs} getReferenceProps={getReferenceProps} />
          <AIStatus />
        </div>
      </div>
+    </>
  )
 }
--- 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",
--- 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"