Update sFUEL mining logic - fix error with hubs

src/components/SFuelWarning.tsx

@@ -21,7 +21,7 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import debug from 'debug'
 
 import { useAccount } from 'wagmi'
@@ -64,11 +64,16 @@ export default function SFuelWarning(props: {}) {
   const hubChainStation = useSFuelStore((state) => state.hubChainStation)
   const setHubChainStation = useSFuelStore((state) => state.setHubChainStation)
 
-  const sFuelStatus = useSFuelStore((state) => state.sFuelStatus)
-  const setSFuelStatus = useSFuelStore((state) => state.setSFuelStatus)
+  const fromChainData = useSFuelStore((state) => state.fromChainData)
+  const setFromChainData = useSFuelStore((state) => state.setFromChainData)
 
-  const sFuelOk = useSFuelStore((state) => state.sFuelOk)
-  const setSFuelOk = useSFuelStore((state) => state.setSFuelOk)
+  const toChainData = useSFuelStore((state) => state.toChainData)
+  const setToChainData = useSFuelStore((state) => state.setToChainData)
+
+  const hubChainData = useSFuelStore((state) => state.hubChainData)
+  const setHubChainData = useSFuelStore((state) => state.setHubChainData)
+
+  const [refilledFlag, setRefilledFlag] = useState<boolean>(false)
 
   const { address } = useAccount()
 
@@ -84,7 +89,6 @@ export default function SFuelWarning(props: {}) {
     setFromChainStation(null)
     setToChainStation(null)
     setHubChainStation(null)
-    setSFuelOk(false)
     log('Initializing SFuelWarning', chainName1, chainName2, hubChain, address)
     createStations()
   }, [chainName1, chainName2, hubChain, address])
@@ -106,34 +110,19 @@ export default function SFuelWarning(props: {}) {
   }
 
   async function updateStationsData() {
-    let fromData
-    let toData
-    let hubData
     if (fromChainStation) {
-      fromData = await fromChainStation.getData(address)
+      setFromChainData(await fromChainStation.getData(address))
     }
     if (toChainStation) {
-      toData = await toChainStation.getData(address)
+      setToChainData(await toChainStation.getData(address))
+      setLoading(false)
     }
     if (hubChainStation) {
-      hubData = await hubChainStation.getData(address)
+      setHubChainData(await hubChainStation.getData(address))
     }
-    if ((fromData && !fromData.ok) || (hubData && !hubData.ok)) {
-      setSFuelStatus('error')
-      setSFuelOk(false)
-    } else {
-      if (toData && !toData.ok) {
-        setSFuelStatus('warning')
-        setSFuelOk(false)
-      } else {
-        if (fromData && fromData.ok && toData && toData.ok) {
-          setSFuelStatus('action')
-          setSFuelOk(true)
-        }
-      }
-    }
-    if (fromData && toData) {
-      setLoading(false)
+    if (refilledFlag) {
+      setMining(false)
+      setRefilledFlag(false)
     }
   }
 
@@ -173,24 +162,12 @@ export default function SFuelWarning(props: {}) {
       if (fromPowRes) log(chainName1, fromPowRes.message)
       if (toPowRes) log(chainName2, toPowRes.message)
       if (hubPowRes) log(hubChain, hubPowRes.message)
-    } else {
-      await updateStationsData()
-      setSFuelStatus('action')
-      setSFuelOk(true)
     }
-    setMining(false)
+    setRefilledFlag(true)
   }
 
-  const mainnetTransfer = chainName1 === MAINNET_CHAIN_NAME || chainName2 === MAINNET_CHAIN_NAME
-  const noSFuelDest = sFuelStatus === 'warning' && chainName1 === MAINNET_CHAIN_NAME
-  const noSFuelSource = sFuelStatus === 'error' && chainName2 === MAINNET_CHAIN_NAME
-  const sFuelBtn = noSFuelDest || noSFuelSource || !mainnetTransfer
-
   function getSFuelText() {
-    if (sFuelBtn) {
-      return SFUEL_TEXT['sfuel'][sFuelStatus]
-    }
-    return SFUEL_TEXT['gas'][sFuelStatus]
+    return SFUEL_TEXT[noEth ? 'gas' : 'sfuel']['error']
   }
 
   if (loading && chainName2)
@@ -200,20 +177,28 @@ export default function SFuelWarning(props: {}) {
       </div>
     )
 
-  const sourceFaucetAvailable =
-    chainName1 === MAINNET_CHAIN_NAME || isFaucetAvailable(chainName1, mpc.config.skaleNetwork)
-  const destFaucetAvailable =
-    chainName2 === MAINNET_CHAIN_NAME || isFaucetAvailable(chainName2, mpc.config.skaleNetwork)
-  const hubFaucetAvailable = !hubChain || isFaucetAvailable(hubChain, mpc.config.skaleNetwork)
-  const faucetsAvailable = sourceFaucetAvailable && destFaucetAvailable && hubFaucetAvailable
+  const fromMainnet = chainName1 === MAINNET_CHAIN_NAME
+  const toMainnet = chainName2 === MAINNET_CHAIN_NAME
+
+  const fromFaucet = isFaucetAvailable(chainName1, mpc.config.skaleNetwork)
+  const destFaucet = isFaucetAvailable(chainName2, mpc.config.skaleNetwork)
+  const hubFaucet = isFaucetAvailable(hubChain, mpc.config.skaleNetwork) || !hubChain
+
+  const fromOk = fromChainData && fromChainData.ok
+  const toOk = toChainData && toChainData.ok
+  const hubOk = (hubChainData && hubChainData.ok) || !hubChainData
+
+  const isOk = fromOk && toOk && hubOk
+  const sFuelBtn = (fromFaucet || fromMainnet) && (destFaucet || toMainnet) && hubFaucet
+  const noEth = (fromMainnet && !fromOk) || (toMainnet && !toOk)
 
   return (
-    <Collapse in={!loading && sFuelStatus !== 'action' && !sFuelOk}>
+    <Collapse in={!loading && !isOk}>
       <div className={cls(cmn.mtop20, cmn.mbott5)}>
         <p className={cls(cmn.flex, cmn.p3, cmn.p, cmn.pPrim, cmn.flexGrow, cmn.mleft10)}>
           ⛽ {getSFuelText()}
         </p>
-        {!faucetsAvailable ? (
+        {!sFuelBtn || noEth ? (
           <p
             className={cls(
               cmn.flex,
@@ -225,11 +210,9 @@ export default function SFuelWarning(props: {}) {
               cmn.mtop10
             )}
           >
-            ❗️ Faucet is not available for one of the selected chains, contact with chain owner to
-            get sFUEL
+            ❗️ Faucet is not available for one of the selected chains
           </p>
-        ) : null}
-        {sFuelBtn && faucetsAvailable ? (
+        ) : (
           <div>
             {mining ? (
               <LoadingButton
@@ -254,7 +237,7 @@ export default function SFuelWarning(props: {}) {
               </Button>
             )}
           </div>
-        ) : null}
+        )}
       </div>
     </Collapse>
   )

src/store/DisplayFunctions.ts

@@ -51,7 +51,15 @@ export const useDisplayFunctions = (): DisplayFunctions => {
   const token = useMetaportStore((state) => state.token)
   const errorMessage = useMetaportStore((state) => state.errorMessage)
 
-  const sFuelOk = useSFuelStore((state) => state.sFuelOk)
+  const fromChainData = useSFuelStore((state) => state.fromChainData)
+  const toChainData = useSFuelStore((state) => state.toChainData)
+  const hubChainData = useSFuelStore((state) => state.hubChainData)
+
+  const fromOk = fromChainData && fromChainData.ok
+  const toOk = toChainData && toChainData.ok
+  const hubOk = (hubChainData && hubChainData.ok) || !hubChainData
+
+  const sFuelOk = fromOk && toOk && hubOk
 
   const showFrom = (): boolean => {
     return !expandedTo && !expandedTokens && !errorMessage && !expandedCP && !expandedTH

src/store/SFuelStore.ts

@@ -22,7 +22,7 @@
  */
 
 import { create } from 'zustand'
-import { Station } from '../core/sfuel'
+import { Station, StationData } from '../core/sfuel'
 
 export interface SFuelState {
   loading: boolean
@@ -39,11 +39,14 @@ export interface SFuelState {
   hubChainStation: Station
   setHubChainStation: (station: Station) => void
 
-  sFuelStatus: 'action' | 'warning' | 'error'
-  setSFuelStatus: (status: 'action' | 'warning' | 'error') => void
+  fromChainData: StationData | undefined
+  setFromChainData: (data: StationData | undefined) => void
 
-  sFuelOk: boolean
-  setSFuelOk: (loading: boolean) => void
+  toChainData: StationData | undefined
+  setToChainData: (data: StationData | undefined) => void
+
+  hubChainData: StationData | undefined
+  setHubChainData: (data: StationData | undefined) => void
 }
 
 export const useSFuelStore = create<SFuelState>()((set, get) => ({
@@ -61,9 +64,12 @@ export const useSFuelStore = create<SFuelState>()((set, get) => ({
   hubChainStation: undefined,
   setHubChainStation: (station: Station) => set({ hubChainStation: station }),
 
-  sFuelStatus: 'action',
-  setSFuelStatus: (status: 'action' | 'warning' | 'error') => set({ sFuelStatus: status }),
+  fromChainData: undefined,
+  setFromChainData: (data: StationData | undefined) => set({ fromChainData: data }),
+
+  toChainData: undefined,
+  setToChainData: (data: StationData | undefined) => set({ toChainData: data }),
 
-  sFuelOk: false,
-  setSFuelOk: (sFuelOk: boolean) => set(() => ({ sFuelOk: sFuelOk }))
+  hubChainData: undefined,
+  setHubChainData: (data: StationData | undefined) => set({ hubChainData: data })
 }))