Merge pull request #4960 from ethereum/statusbar-updates

Status bar updates

libs/remix-ui/statusbar/src/contexts/statusbarcontext.tsx

@@ -0,0 +1,17 @@
+import React, { createContext } from 'react'
+import { defaultStatusBarContext, StatusBarContextType, StatusBarInterface } from '../lib/types'
+
+export const StatusBarContext = createContext<StatusBarContextType>(defaultStatusBarContext)
+
+export function StatusBarContextProvider ({ children }) {
+  const statusBarProviderValues = {
+    test: true
+  }
+  return (
+    <>
+      <StatusBarContext.Provider value={statusBarProviderValues}>
+        {children}
+      </StatusBarContext.Provider>
+    </>
+  )
+}

libs/remix-ui/statusbar/src/css/statusbar.css

@@ -14,6 +14,11 @@
   cursor: pointer;
 }
 
+.remixui_statusbar_aistatusdisabled {
+  text-decoration: line-through;
+  text-decoration-thickness: 3px;
+}
+
 /**
  * approximately same height with vscode statusbar
  **/
@@ -27,3 +32,11 @@
 .remixui_statusbar_activelink:active {
   color: var(--danger);
 }
+
+.remixui_statusbar_didyouknow {
+
+}
+
+.remixui_statusbar_custom_padding {
+  padding: 0.421em;
+}

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

@@ -33,11 +33,12 @@ export default function AIStatus(props: AIStatusProps) {
   }, [props.plugin.isAiActive])
   return (
     <CustomTooltip
-      tooltipText={copilotActive ? "Remix Copilot activated" : "Remix Copilot disabled."}
+      tooltipText={copilotActive ? "Remix Copilot activated" : "Remix Copilot disabled. To activate copilot, open a .sol file and toggle the ai switch at the top of the Ide"}
     >
-      <div className="d-flex flex-row pr-2 text-white justify-content-center align-items-center remixui_statusbar_aistatus">
-        <span className={copilotActive === false ? "fa-regular fa-microchip-ai ml-1 text-white" : "fa-regular fa-microchip-ai ml-1"}></span>
-        <span className={copilotActive === false ? "small mx-1 text-white semi-bold" : "small mx-1 semi-bold" }>Remix Copilot</span>
+      <div className="d-flex flex-row pr-2 text-white justify-content-center align-items-center">
+        <span className={copilotActive === false ? "small mx-1 text-white semi-bold" : "small mx-1 text-white semi-bold" }>
+          {copilotActive === false ? 'Remix Copilot (disabled)' : 'Remix Copilot (enabled)'}
+        </span>
       </div>
     </CustomTooltip>
   )

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

@@ -0,0 +1,35 @@
+import { CustomTooltip } from '@remix-ui/helper'
+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 text-success 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/gitStatus.tsx

@@ -52,10 +52,11 @@ export default function GitStatus({ plugin, gitBranchName, setGitBranchName }: G
   }
 
   const initializeNewGitRepo = async () => {
-    await plugin.call('dgitApi', 'init')
-    const isActive = await plugin.call('manager', 'isActive', 'dgit')
     if (isLocalHost === false) {
+      const isActive = await plugin.call('manager', 'isActive', 'dgit')
       if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+      await plugin.call('dgitApi', 'init')
+      ;(window as any)._paq.push('trackEvent', 'statusbar', 'initNewRepo')
     }
   }
 

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

@@ -15,7 +15,7 @@ export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertS
       <CustomTooltip
         tooltipText={"Scam Alerts"}
       >
-        <div className="mr-2 d-flex align-items-center justify-content-center remixui_statusbar_scamAlert" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
+        <div className="mr-1 d-flex align-items-center justify-content-center remixui_statusbar_scamAlert" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
           <span className="pr-2 far fa-exclamation-triangle text-white"></span>
           <span className="text-white font-semibold small">
             <FormattedMessage id="home.scamAlert" />

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

@@ -7,6 +7,8 @@ import { FloatingFocusManager, autoUpdate, flip, offset, shift, size, useClick,
 import axios from 'axios'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
+import { StatusBarContextProvider } from '../contexts/statusbarcontext'
+import DidYouKnow from './components/didYouKnow'
 
 export interface RemixUIStatusBarProps {
   statusBarPlugin: StatusBar
@@ -18,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)
@@ -66,21 +68,31 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
 
   return (
     <>
-      {showScamDetails && (
-        <FloatingFocusManager context={context} modal={false}>
-          <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: 'auto', alignContent: 'center', paddingRight: '0.5rem' }} getFloatingProps={getFloatingProps} scamAlerts={scamAlerts} />
-        </FloatingFocusManager>
-      )}
-      <div className="d-flex remixui_statusbar_height flex-row bg-info justify-content-between align-items-center">
-        <div className="remixui_statusbar remixui_statusbar_gitstatus">
-          <GitStatus plugin={statusBarPlugin} gitBranchName={gitBranchName} setGitBranchName={setGitBranchName} />
+      <StatusBarContextProvider>
+        {showScamDetails && (
+          <FloatingFocusManager context={context} modal={false}>
+            <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: 'auto', alignContent: 'center', paddingRight: '0.5rem' }} getFloatingProps={getFloatingProps} scamAlerts={scamAlerts} />
+          </FloatingFocusManager>
+        )}
+        <div className="d-flex remixui_statusbar_height flex-row bg-info justify-content-between align-items-center">
+          <div className="remixui_statusbar remixui_statusbar_gitstatus">
+            <GitStatus plugin={statusBarPlugin} gitBranchName={gitBranchName} setGitBranchName={setGitBranchName} />
+          </div>
+          <div className="remixui_statusbar"></div>
+          <div className="remixui_statusbar">
+            <DidYouKnow />
+          </div>
+          <div className="remixui_statusbar"></div>
+          <div className="remixui_statusbar d-flex align-items-center p-0">
+            <div className="remixui_statusbar">
+              <AIStatus plugin={statusBarPlugin} aiActive={lightAiUp} isAiActive={isAiActive} setIsAiActive={setIsAiActive} />
+            </div>
+            <div className="remixui_statusbar bg-warning remixui_statusbar_custom_padding d-flex justify-center align-items-center">
+              <ScamAlertStatus refs={refs} getReferenceProps={getReferenceProps} />
+            </div>
+          </div>
         </div>
-        <div className="remixui_statusbar"></div>
-        <div className="remixui_statusbar d-flex flex-row">
-          <ScamAlertStatus refs={refs} getReferenceProps={getReferenceProps} />
-          <AIStatus plugin={statusBarPlugin} aiActive={lightAiUp} isAiActive={isAiActive} setIsAiActive={setIsAiActive} />
-        </div>
-      </div>
+      </StatusBarContextProvider>
     </>
   )
 }

libs/remix-ui/statusbar/src/lib/types/index.ts

@@ -3,6 +3,7 @@ import { Plugin } from '@remixproject/engine'
 import { FilePanelType } from '@remix-ui/workspace'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { VerticalIcons } from 'apps/remix-ide/src/app/components/vertical-icons'
+import { CustomRemixApi } from '@remix-api'
 export interface PluginProfile {
   name: string
   displayName: string
@@ -15,7 +16,7 @@ export interface PluginProfile {
   version?: string
 }
 
-export interface StatusBarInterface extends Plugin {
+export interface StatusBarInterface extends Plugin<any, CustomRemixApi> {
   htmlElement: HTMLDivElement
   events: EventEmitter
   dispatch: React.Dispatch<any>
@@ -25,3 +26,12 @@ export interface StatusBarInterface extends Plugin {
   getGitBranchName: () => Promise<any>
   currentWorkspaceName: string
 }
+
+export const defaultStatusBarContext: StatusBarContextType = {
+  test: false
+}
+
+export type StatusBarContextType = {
+  test: boolean
+}
+