Restructure display conditions

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 (
     <div>
@@ -144,7 +86,7 @@ export function WidgetBody(props) {
       ) : null}
       <SkPaper background={sourceBg} className={cmn.nop}>
         <SkPaper background="transparent" className={cmn.nop}>
-          <Collapse in={showFrom}>
+          <Collapse in={showFrom()}>
             <div className={cls(cmn.ptop20, cmn.mleft20, cmn.mri20, cmn.flex)}>
               <p className={cls(cmn.nom, cmn.p, cmn.p4, cmn.pSec, cmn.flex, cmn.flexg)}>
                 From {appName1 ? 'app' : ''}
@@ -174,18 +116,18 @@ export function WidgetBody(props) {
             />
           </Collapse>
         </SkPaper>
-        <Collapse in={showInput}>
+        <Collapse in={showInput()}>
           <SkPaper gray className={cls()}>
             <AmountInput />
           </SkPaper>
         </Collapse>
       </SkPaper>
 
-      <Collapse in={showSwitch}>
+      <Collapse in={showSwitch()}>
         <SwitchDirection />
       </Collapse>
 
-      <Collapse in={showTo}>
+      <Collapse in={showTo()}>
         <SkPaper background={destBg} className={cmn.nop}>
           <div className={cls(cmn.ptop20, cmn.mleft20, cmn.mri20, cmn.flex)}>
             <p className={cls(cmn.nom, cmn.p, cmn.p4, cmn.pSec, cmn.flex, cmn.flexg)}>
@@ -209,19 +151,19 @@ export function WidgetBody(props) {
       </Collapse>
       <AmountErrorMessage />
 
-      <Collapse in={showCP}>
+      <Collapse in={showCP()}>
         <SkPaper gray className={cmn.nop}>
           <CommunityPool />
         </SkPaper>
       </Collapse>
 
-      <Collapse in={showWT}>
+      <Collapse in={showWT(address)}>
         <SkPaper gray className={cmn.nop}>
           <WrappedTokens />
         </SkPaper>
       </Collapse>
 
-      <Collapse in={showTH}>
+      <Collapse in={showTH(address)}>
         <SkPaper className={cmn.nop}>
           <TransactionsHistory />
         </SkPaper>
@@ -230,7 +172,7 @@ export function WidgetBody(props) {
       <Collapse in={!!address}>
         <SFuelWarning />
       </Collapse>
-      <Collapse in={showStepper}>
+      <Collapse in={showStepper(address)}>
         <SkPaper background="transparent">
           <SkStepper skaleNetwork={props.config.skaleNetwork} />
         </SkPaper>

src/core/constants.ts

@@ -112,3 +112,5 @@ export const BALANCE_UPDATE_INTERVAL_MS = _BALANCE_UPDATE_INTERVAL_SECONDS * 100
 export const SFUEL_RESERVE_AMOUNT = 0.02
 
 export const SUCCESS_EMOJIS = ['🎉', '👌', '✅', '🙌', '🎊']
+
+export const GRAY_BG = 'rgb(136 135 135 / 15%)'

src/index.ts

@@ -5,6 +5,7 @@ export { useMetaportStore } from './store/MetaportStore'
 export { type MetaportState } from './store/MetaportState'
 export { useUIStore, useCollapseStore, type UIState, type CollapseState } from './store/Store'
 export { useSFuelStore, type SFuelState } from './store/SFuelStore'
+export { useDisplayFunctions, type DisplayFunctions } from './store/DisplayFunctions'
 
 import Metaport from './components/Metaport'
 import MetaportProvider from './components/MetaportProvider'
@@ -37,7 +38,7 @@ import { CHAINS_META, getChainAlias } from './core/metadata'
 import { cls, styles, cmn } from './core/css'
 import MetaportCore from './core/metaport'
 import { chainBg } from './core/metadata'
-import { BASE_EXPLORER_URLS } from './core/constants'
+import { BASE_EXPLORER_URLS, GRAY_BG } from './core/constants'
 import { toWei, fromWei } from './core/convertation'
 
 import { getWidgetTheme as getMetaportTheme } from './core/themes'
@@ -84,6 +85,7 @@ export {
   PROXY_ENDPOINTS,
   BASE_EXPLORER_URLS,
   CHAINS_META,
+  GRAY_BG,
   chainBg,
   getChainAlias,
   RainbowConnectButton

src/store/DisplayFunctions.ts

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * SKALE Metaport
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file DisplayStore.ts
+ * @copyright SKALE Labs 2023-Present
+ */
+
+import { useCollapseStore } from '../store/Store'
+import { useMetaportStore } from '../store/MetaportStore'
+import { useSFuelStore } from '../store/SFuelStore'
+
+import { MAINNET_CHAIN_NAME } from '../core/constants'
+import { AddressType } from '../core/interfaces'
+
+export type DisplayFunctions = {
+  showFrom: () => boolean
+  showTo: () => boolean
+  showSwitch: () => boolean
+  showInput: () => boolean
+  showStepper: (address: AddressType) => boolean
+  showCP: () => boolean
+  showWT: (address: AddressType) => boolean
+  showTH: (address: AddressType) => boolean
+}
+
+export const useDisplayFunctions = (): DisplayFunctions => {
+  const expandedFrom = useCollapseStore((state) => state.expandedFrom)
+  const expandedTo = useCollapseStore((state) => state.expandedTo)
+  const expandedTokens = useCollapseStore((state) => state.expandedTokens)
+  const expandedCP = useCollapseStore((state) => state.expandedCP)
+  const expandedTH = useCollapseStore((state) => state.expandedTH)
+  const expandedWT = useCollapseStore((state) => state.expandedWT)
+
+  const chainName2 = useMetaportStore((state) => state.chainName2)
+  const token = useMetaportStore((state) => state.token)
+  const errorMessage = useMetaportStore((state) => state.errorMessage)
+
+  const sFuelOk = useSFuelStore((state) => state.sFuelOk)
+
+  const showFrom = (): boolean => {
+    return !expandedTo && !expandedTokens && !errorMessage && !expandedCP && !expandedTH
+  }
+
+  const showTo = (): boolean => {
+    return (
+      !expandedFrom && !expandedTokens && !errorMessage && !expandedCP && !expandedWT && !expandedTH
+    )
+  }
+
+  const showInput = (): boolean => {
+    return (
+      !expandedFrom && !expandedTo && !errorMessage && !expandedCP && !expandedWT && !expandedTH
+    )
+  }
+
+  const showSwitch = (): boolean => {
+    return (
+      !expandedFrom &&
+      !expandedTo &&
+      !expandedTokens &&
+      !errorMessage &&
+      !expandedCP &&
+      !expandedWT &&
+      !expandedTH
+    )
+  }
+
+  const showStepper = (address: AddressType): boolean => {
+    return (
+      !expandedFrom &&
+      !expandedTo &&
+      !expandedTokens &&
+      !errorMessage &&
+      !expandedCP &&
+      sFuelOk &&
+      !expandedWT &&
+      !expandedTH &&
+      !!address
+    )
+  }
+
+  const showCP = (): boolean => {
+    return (
+      !expandedFrom &&
+      !expandedTo &&
+      !expandedTokens &&
+      !expandedTH &&
+      chainName2 === MAINNET_CHAIN_NAME &&
+      !expandedWT &&
+      !!token
+    )
+  }
+
+  const showWT = (address: AddressType): boolean => {
+    return (
+      !expandedFrom &&
+      !expandedTo &&
+      !expandedTokens &&
+      !errorMessage &&
+      !expandedCP &&
+      !expandedTH &&
+      sFuelOk &&
+      !!address &&
+      !!token
+    )
+  }
+
+  const showTH = (address: AddressType): boolean => {
+    return (
+      !expandedFrom &&
+      !expandedTo &&
+      !expandedTokens &&
+      !errorMessage &&
+      !expandedCP &&
+      !expandedWT &&
+      !!address
+    )
+  }
+
+  return {
+    showFrom,
+    showTo,
+    showInput,
+    showSwitch,
+    showStepper,
+    showCP,
+    showWT,
+    showTH
+  }
+}