diff --git a/src/components/WidgetBody.tsx b/src/components/WidgetBody.tsx index 8f844d6..c1288f0 100644 --- a/src/components/WidgetBody.tsx +++ b/src/components/WidgetBody.tsx @@ -1,10 +1,11 @@ import { useEffect } from 'react' import { useAccount } from 'wagmi' +import { Collapse } from '@mui/material' import { useCollapseStore } from '../store/Store' import { useMetaportStore } from '../store/MetaportStore' -import { useSFuelStore } from '../store/SFuelStore' import { useUIStore } from '../store/Store' +import { useDisplayFunctions } from '../store/DisplayFunctions' import ChainsList from './ChainsList' import AmountInput from './AmountInput' @@ -22,24 +23,19 @@ import TransactionsHistory from './HistorySection' import HistoryButton from './HistoryButton' import { cls, cmn } from '../core/css' -import { Collapse } from '@mui/material' -import { MAINNET_CHAIN_NAME } from '../core/constants' import { chainBg } from '../core/metadata' +import { GRAY_BG } from '../core/constants' export function WidgetBody(props) { + const { showFrom, showTo, showInput, showSwitch, showStepper, showCP, showWT, showTH } = + useDisplayFunctions() + const expandedFrom = useCollapseStore((state) => state.expandedFrom) const setExpandedFrom = useCollapseStore((state) => state.setExpandedFrom) - const expandedTo = useCollapseStore((state) => state.expandedTo) const setExpandedTo = useCollapseStore((state) => state.setExpandedTo) - const expandedCP = useCollapseStore((state) => state.expandedCP) - const expandedWT = useCollapseStore((state) => state.expandedWT) - const expandedTokens = useCollapseStore((state) => state.expandedTokens) - const expandedTH = useCollapseStore((state) => state.expandedTH) - const destChains = useMetaportStore((state) => state.destChains) - const token = useMetaportStore((state) => state.token) const chainName1 = useMetaportStore((state) => state.chainName1) @@ -57,12 +53,8 @@ export function WidgetBody(props) { const setToken = useMetaportStore((state) => state.setToken) const tokenBalances = useMetaportStore((state) => state.tokenBalances) - const errorMessage = useMetaportStore((state) => state.errorMessage) - const transferInProgress = useMetaportStore((state) => state.transferInProgress) - const sFuelOk = useSFuelStore((state) => state.sFuelOk) - const theme = useUIStore((state) => state.theme) const { address } = useAccount() @@ -78,58 +70,8 @@ export function WidgetBody(props) { } }, [tokens]) - const showFrom = !expandedTo && !expandedTokens && !errorMessage && !expandedCP && !expandedTH - const showTo = - !expandedFrom && !expandedTokens && !errorMessage && !expandedCP && !expandedWT && !expandedTH - const showInput = - !expandedFrom && !expandedTo && !errorMessage && !expandedCP && !expandedWT && !expandedTH - const showSwitch = - !expandedFrom && - !expandedTo && - !expandedTokens && - !errorMessage && - !expandedCP && - !expandedWT && - !expandedTH - const showStepper = - !expandedFrom && - !expandedTo && - !expandedTokens && - !errorMessage && - !expandedCP && - sFuelOk && - !expandedWT && - !expandedTH && - !!address - const showCP = - !expandedFrom && - !expandedTo && - !expandedTokens && - !expandedTH && - chainName2 === MAINNET_CHAIN_NAME && - !expandedWT - const showWT = - !expandedFrom && - !expandedTo && - !expandedTokens && - !errorMessage && - !expandedCP && - !expandedTH && - sFuelOk && - !!address && - !!token - const showTH = - !expandedFrom && - !expandedTo && - !expandedTokens && - !errorMessage && - !expandedCP && - !expandedWT && - !!address - - const grayBg = 'rgb(136 135 135 / 15%)' - const sourceBg = theme.vibrant ? chainBg(mpc.config.skaleNetwork, chainName1, appName1) : grayBg - const destBg = theme.vibrant ? chainBg(mpc.config.skaleNetwork, chainName2, appName2) : grayBg + const sourceBg = theme.vibrant ? chainBg(mpc.config.skaleNetwork, chainName1, appName1) : GRAY_BG + const destBg = theme.vibrant ? chainBg(mpc.config.skaleNetwork, chainName2, appName2) : GRAY_BG return (
From {appName1 ? 'app' : ''}
@@ -174,18 +116,18 @@ export function WidgetBody(props) {
/>
-
@@ -209,19 +151,19 @@ export function WidgetBody(props) {