finish didyouknow and scamDetails sections

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

@@ -1,12 +1,34 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React from 'react'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
 
 export default function DidYouKnow () {
+  const [tip, setTip] = useState<string>('')
+  useEffect(() => {
+    const abortController = new AbortController()
+    const signal = abortController.signal
+    async function showRemixTips() {
+      const response = await axios.get('https://raw.githubusercontent.com/remix-project-org/remix-dynamics/main/ide/tips.json', { signal })
+      if (signal.aborted) return
+      const tips = response.data
+      const index = Math.floor(Math.random() * (tips.length - 1))
+      setTip(tips[index])
+    }
+    try {
+      showRemixTips()
+    } catch (e) {
+      console.log(e)
+    }
+    return () => {
+      abortController.abort()
+    }
+  }, [])
   return (
     <CustomTooltip tooltipText={'Did you know'}>
       <div className="remixui_statusbar_didyouknow text-white small d-flex align-items-center">
-        <span className="pr-2 far fa-exclamation-triangle text-white fa-regular fa-lightbulb"></span>
-        <div>Did you know?</div>
+        <span className="pr-2 text-warning fa-solid fa-lightbulb"></span>
+        <div className="mr-2">Did you know?</div>
+        { tip && tip.length > 0 ? <div>{tip}</div> : null }
       </div>
     </CustomTooltip>
   )

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

@@ -19,12 +19,12 @@ export default function ScamDetails ({ refs, floatStyle, scamAlerts }: ScamDetai
     <div
       ref={refs.setFloating}
       style={ floatStyle }
-      className="px-1 ml-1 mb-1 d-flex w-25 alert alert-danger border border-danger"
+      className="px-1 ml-1 mb-1 d-flex w-25 alert alert-warning border border-warning"
     >
       <span className="align-self-center pl-4 mt-1">
-        <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 far text-danger fa-exclamation-triangle"></i>
+        <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 far text-warning fa-exclamation-triangle"></i>
       </span>
-      <div className="d-flex flex-column text-danger">
+      <div className="d-flex flex-column text-warning">
         {scamAlerts && scamAlerts.map((alert, index) => (
           <span className="pl-4 mt-1" key={`${alert.url}${index}`}>
             {alert.url.length < 1 ? <FormattedMessage id={`home.scamAlertText${index + 1}`} defaultMessage={alert.message} />

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

@@ -20,7 +20,7 @@ export type ScamAlert = {
 }
 
 export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
-  const [showScamDetails, setShowScamDetails] = useState(false)
+  const [showScamDetails, setShowScamDetails] = useState(true)
   const [scamAlerts, setScamAlerts] = useState<ScamAlert[]>([])
   const [gitBranchName, setGitBranchName] = useState('')
   const [isAiActive, setIsAiActive] = useState(false)