From 9c7b20d33029ba1a4e6dfaf8c7afaf2caf4ffe0b Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 8 Jan 2024 21:44:39 +0100
Subject: [PATCH] remix tips

---
 apps/remix-ide/src/app/components/preload.tsx | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/components/preload.tsx b/apps/remix-ide/src/app/components/preload.tsx
index ec9be4597a..fb7b69c604 100644
--- a/apps/remix-ide/src/app/components/preload.tsx
+++ b/apps/remix-ide/src/app/components/preload.tsx
@@ -1,4 +1,5 @@
 import {RemixApp} from '@remix-ui/app'
+import axios from 'axios'
 import React, {useEffect, useRef, useState} from 'react'
 import {render} from 'react-dom'
 import * as packageJson from '../../../../../package.json'
@@ -10,6 +11,7 @@ import './styles/preload.css'
 const _paq = (window._paq = window._paq || [])
 
 export const Preload = () => {
+  const [tip, setTip] = useState<string>('')
   const [supported, setSupported] = useState<boolean>(true)
   const [error, setError] = useState<boolean>(false)
   const [showDownloader, setShowDownloader] = useState<boolean>(false)
@@ -95,6 +97,24 @@ export const Preload = () => {
       !remixIndexedDB.current.loaded && (await setFileSystems())
     }
     loadStorage()
+
+    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 (
@@ -157,7 +177,13 @@ export const Preload = () => {
         ) : null}
         {supported && !error && !showDownloader ? (
           <div>
-            <i className="fas fa-spinner fa-spin fa-2x"></i>
+            <div className='text-center'>              
+              <i className="fas fa-spinner fa-spin fa-2x"></i>              
+            </div>
+            { tip && <div className='remix_tips text-center mt-3'>
+              <div><b>DID YOU KNOW</b></div>
+              <span>{tip}</span>
+            </div> }
           </div>
         ) : null}
       </div>