fetch scamAlerts from remote store

libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx

@@ -1,6 +1,7 @@
 import { ExtendedRefs, ReferenceType } from '@floating-ui/react'
 import React, { CSSProperties } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { ScamAlert } from '../remixui-statusbar-panel'
 
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 
@@ -8,9 +9,10 @@ export interface ScamDetailsProps {
   refs: ExtendedRefs<ReferenceType>
   floatStyle: CSSProperties
   getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>
+  scamAlerts: ScamAlert[]
 }
 
-export default function ScamDetails ({ refs, floatStyle }: ScamDetailsProps) {
+export default function ScamDetails ({ refs, floatStyle, scamAlerts }: ScamDetailsProps) {
 
   return (
     <div
@@ -22,31 +24,23 @@ export default function ScamDetails ({ refs, floatStyle }: ScamDetailsProps) {
         <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter', color: 'orange' }} className="pr-2 far fa-exclamation-triangle"></i>
       </span>
       <div className="d-flex flex-column text-white">
+        {scamAlerts && scamAlerts.map((alert, index) => (
           <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 text-white"
-            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;
+            {alert.url.length < 1 ? <FormattedMessage id={`home.scamAlertText${index + 1}`} defaultMessage={alert.message} />
+              : (<><FormattedMessage id={`home.scamAlertText${index + 1}`} defaultMessage={alert.message} /> : &nbsp;
                 <a
-            className="remixui_home_text text-white"
-            onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])}
+                  className={`remixui_home_text text-white ${index === 1 ? 'pl-2' : ''}`}
+                  onClick={() => {
+                    index === 1 && _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])
+                    index === 2 && _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])
+                  }}
                   target="__blank"
-            href="https://remix-ide.readthedocs.io/en/latest/security.html"
+                  href={scamAlerts[index].url}
                 >
-            <FormattedMessage id="home.here" />
-          </a>
+                  <FormattedMessage id="home.here" defaultMessage={scamAlerts[index].message} />
+                </a></>)}
           </span>
+        ))}
       </div>
     </div>
   )

libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { StatusBarInterface } from './types'
 import GitStatus from './components/gitStatus'
 import AIStatus from './components/aiStatus'
@@ -11,8 +11,14 @@ export interface RemixUIStatusBarProps {
   statusBarPlugin: StatusBarInterface
 }
 
+export type ScamAlert = {
+  message: string
+  url: string
+}
+
 export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) {
   const [showScamDetails, setShowScamDetails] = useState(false)
+  const [scamAlerts, setScamAlerts] = useState<ScamAlert[]>([])
   const { refs, context, floatingStyles } = useFloating({
     open: showScamDetails,
     onOpenChange: setShowScamDetails,
@@ -32,15 +38,25 @@ export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) {
     role
   ])
 
+  useEffect(() => {
     const abortController = new AbortController()
     const signal = abortController.signal
     async function getScamAlerts() {
       const response = await axios.get('https://raw.githubusercontent.com/remix-project-org/remix-dynamics/main/ide/scam-alerts.json', { signal })
       if (signal.aborted) return
-    const tips = response.data
-    const index = Math.floor(Math.random() * (tips.length - 1))
-    // setTip(tips[index])
+      console.log('getScamAlerts', response)
+      setScamAlerts(response.data.alerts)
+      console.log('getScamAlerts', scamAlerts)
     }
+    getScamAlerts()
+    return () => {
+      abortController.abort()
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('scamAlerts', scamAlerts)
+  }, [scamAlerts])
 
   const getGitBranchName = async () => {
     return new Promise((resolve, reject) => {
@@ -51,7 +67,7 @@ export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) {
     <>
       {showScamDetails && (
         <FloatingFocusManager context={context} modal={false}>
-          <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: '300px', alignContent: 'center', paddingRight: '5px' }} getFloatingProps={getFloatingProps} />
+          <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: '300px', alignContent: 'center', paddingRight: '5px' }} getFloatingProps={getFloatingProps} scamAlerts={scamAlerts} />
         </FloatingFocusManager>)}
       <div className="d-flex flex-row bg-primary justify-content-between align-items-center">
         <div className="remixui_statusbar">