From 81e52f2c6b29c0c47f7bcb499c252a3689f04063 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Thu, 26 Oct 2023 17:25:06 +0100 Subject: [PATCH 1/2] Restructure display conditions --- src/components/WidgetBody.tsx | 90 ++++----------------- src/core/constants.ts | 2 + src/store/DisplayFunctions.ts | 146 ++++++++++++++++++++++++++++++++++ 3 files changed, 164 insertions(+), 74 deletions(-) create mode 100644 src/store/DisplayFunctions.ts 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 (
@@ -144,7 +86,7 @@ export function WidgetBody(props) { ) : null} - +

From {appName1 ? 'app' : ''} @@ -174,18 +116,18 @@ export function WidgetBody(props) { /> - + - + - +

@@ -209,19 +151,19 @@ export function WidgetBody(props) { - + - + - + @@ -230,7 +172,7 @@ export function WidgetBody(props) { - + diff --git a/src/core/constants.ts b/src/core/constants.ts index 3481e2e..6966000 100644 --- a/src/core/constants.ts +++ b/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%)' diff --git a/src/store/DisplayFunctions.ts b/src/store/DisplayFunctions.ts new file mode 100644 index 0000000..7678d8e --- /dev/null +++ b/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 . + */ + +/** + * @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 + } +} From 371ae1093c2fb6f1c8489b156863233219267519 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Thu, 26 Oct 2023 17:27:40 +0100 Subject: [PATCH 2/2] metaport#199 Export display functions --- src/index.ts | 4 +++- src/store/DisplayFunctions.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 0433dad..0719241 100644 --- a/src/index.ts +++ b/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 diff --git a/src/store/DisplayFunctions.ts b/src/store/DisplayFunctions.ts index 7678d8e..dd43814 100644 --- a/src/store/DisplayFunctions.ts +++ b/src/store/DisplayFunctions.ts @@ -28,7 +28,7 @@ import { useSFuelStore } from '../store/SFuelStore' import { MAINNET_CHAIN_NAME } from '../core/constants' import { AddressType } from '../core/interfaces' -type DisplayFunctions = { +export type DisplayFunctions = { showFrom: () => boolean showTo: () => boolean showSwitch: () => boolean