Skip to content

Commit

Permalink
Restructure display conditions
Browse files Browse the repository at this point in the history
  • Loading branch information
dmytrotkk committed Oct 26, 2023
1 parent 479e9e7 commit 81e52f2
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 74 deletions.
90 changes: 16 additions & 74 deletions src/components/WidgetBody.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
Expand All @@ -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()
Expand All @@ -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>
Expand All @@ -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' : ''}
Expand Down Expand Up @@ -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)}>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/core/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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%)'
146 changes: 146 additions & 0 deletions src/store/DisplayFunctions.ts
Original file line number Diff line number Diff line change
@@ -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'

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
}
}

0 comments on commit 81e52f2

Please sign in to comment.