diff --git a/src/components/SFuelWarning.tsx b/src/components/SFuelWarning.tsx index 0030475..3020ea5 100644 --- a/src/components/SFuelWarning.tsx +++ b/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(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: {}) { ) - 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 ( - +

⛽ {getSFuelText()}

- {!faucetsAvailable ? ( + {!sFuelBtn || noEth ? (

- ❗️ 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

- ) : null} - {sFuelBtn && faucetsAvailable ? ( + ) : (
{mining ? ( )}
- ) : null} + )}
) diff --git a/src/store/DisplayFunctions.ts b/src/store/DisplayFunctions.ts index dd43814..e82b43b 100644 --- a/src/store/DisplayFunctions.ts +++ b/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 diff --git a/src/store/SFuelStore.ts b/src/store/SFuelStore.ts index 3bbc3f0..06e7551 100644 --- a/src/store/SFuelStore.ts +++ b/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()((set, get) => ({ @@ -61,9 +64,12 @@ export const useSFuelStore = create()((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 }) }))