From 2ca245db5ddac6827512e4086a3bdba165e00754 Mon Sep 17 00:00:00 2001 From: sirpy Date: Wed, 11 Dec 2024 19:49:30 +0200 Subject: [PATCH] Warning modal crash (#264) * fix: warning box crash. consolidate warnings * fix: frequency radio buttons should have space betwen them across screen sizes * add: improve network warning * fix: isDonating loading state * add: make nowallet/invalid chain show first --------- Co-authored-by: LewisB --- .../app/src/components/DonateComponent.tsx | 61 ++++++++++--------- .../app/src/components/DonateFrequency.tsx | 15 +---- packages/app/src/utils/index.tsx | 8 +-- 3 files changed, 40 insertions(+), 44 deletions(-) diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx index bc4ae60..3866971 100644 --- a/packages/app/src/components/DonateComponent.tsx +++ b/packages/app/src/components/DonateComponent.tsx @@ -53,8 +53,20 @@ const WarningExplanation = ({ type }: any) => ( ); +const NetworkExplanation = ({ type }: any) => ( + + Switch in your wallet to the Celo network + +); const warningProps = { + noWallet: { + title: 'Please connect a wallet to proceed', + }, + invalidChain: { + title: 'Unsupported network', + Explanation: NetworkExplanation, + }, priceImpact: { title: 'Price impact warning!', Explanation: PriceImpact, @@ -76,9 +88,6 @@ const warningProps = { noAmount: { title: 'Enter an amount above', }, - noWallet: { - title: 'Please connect a wallet to proceed', - }, }; const shouldWarning = ( @@ -124,7 +133,7 @@ const WarningBox = ({ content, explanationProps = {} }: any) => { {content.title} - {!isEmpty(explanationProps) ? : null} + {Explanation ? : null} {content.suggestion ? ( @@ -138,10 +147,12 @@ const WarningBox = ({ content, explanationProps = {} }: any) => { {index + 1}. {suggestion} ))} - - 3. - Purchase and use GoodDollar - + {content.href && ( + + {content.suggestion.length + 1}. + Purchase and use GoodDollar + + )} @@ -221,7 +232,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { base: { flexDirection: 'column', }, - xl: { + lg: { flexDirection: 'row', flexWrap: 'wrap', }, @@ -270,8 +281,6 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { swapPath ); - const [confirmNoAmount, setConfirmNoAmount] = useState(false); - const token = useToken(currency); // const currencyDecimals = token.decimals; const donorCurrencyBalance = useGetTokenBalance(token.address, address, chain?.id, true); @@ -299,11 +308,6 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { }, [currency, startStreamingVisible, supportFlow, supportFlowWithSwap]); const handleDonate = useCallback(async () => { - if (!isNonZeroDonation) { - setConfirmNoAmount(true); - return; - } - let isApproveSuccess = isRequireApprove === false || currency.startsWith('G$'); setIsDonating(true); try { @@ -357,12 +361,18 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { // supportFlowWithSwap, supportSingleTransferAndCall, supportSingleWithSwap, - isNonZeroDonation, ]); - const isWarning = isInsufficientBalance || isInsufficientLiquidity || isUnacceptablePriceImpact || confirmNoAmount; + const isInvalidChain = !(chain?.id && chain.id in SupportedNetwork); + const isWarning = + isInsufficientBalance || + isInsufficientLiquidity || + isUnacceptablePriceImpact || + !isNonZeroDonation || + isInvalidChain || + address === undefined; const isOnlyPriceImpactWarning = - isUnacceptablePriceImpact && !isInsufficientBalance && !isInsufficientLiquidity && !confirmNoAmount; + isUnacceptablePriceImpact && !isInsufficientBalance && !isInsufficientLiquidity && isNonZeroDonation; const donateStyles = useMemo(() => { return getDonateStyles({ @@ -425,7 +435,6 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { (v: string) => { setInputAmount(v); - if (![''].includes(v)) setConfirmNoAmount(false); if (v.endsWith('.') || ['0', ''].includes(v)) { setEstimatedDuration({ duration: 0, endDate: '' }); return; @@ -628,9 +637,9 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { { priceImpact: isUnacceptablePriceImpact, balance: isInsufficientBalance, - noAmount: !isNonZeroDonation && confirmNoAmount, + noAmount: !isNonZeroDonation, + invalidChain: isInvalidChain, }[key] ?? isInsufficientLiquidity; - return whichWarning ? ( { ) : null; }) : null} - {isNonZeroDonation && address !== undefined ? ( + {isNonZeroDonation && !isInvalidChain ? ( {!currency.startsWith('G$') ? ( @@ -655,7 +664,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { You will need to confirm using your connected wallet. You may be asked to sign multiple transactions. - ) : isNonZeroDonation && address === undefined ? ( + ) : address === undefined ? ( ) : null} @@ -669,11 +678,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => { isLoading={swapRouteStatus === SwapRouteState.LOADING || isDonating} disabled={ (currency.startsWith('G$') === false && swapRouteStatus !== SwapRouteState.READY) || - address === undefined || - chain?.id === undefined || - !(chain.id in SupportedNetwork) || approvalNotReady || - isInsufficientBalance || (isWarning && !isOnlyPriceImpactWarning) } /> diff --git a/packages/app/src/components/DonateFrequency.tsx b/packages/app/src/components/DonateFrequency.tsx index b5bcec3..96ef919 100644 --- a/packages/app/src/components/DonateFrequency.tsx +++ b/packages/app/src/components/DonateFrequency.tsx @@ -1,7 +1,5 @@ import { useState } from 'react'; -import { Box, HStack, Radio, useBreakpointValue } from 'native-base'; - -import { useScreenSize } from '../theme/hooks'; +import { Box, HStack, Radio } from 'native-base'; interface DropdownProps { onSelect: (value: string) => void; @@ -12,13 +10,8 @@ const WhiteDot = () => { const [value, setValue] = useState('One-Time'); - const { isTabletView } = useScreenSize(); - - // temp: adding this to useScreenSize breaks UI in multiple other screens. - const isDesktopView = useBreakpointValue({ base: false, lg: true, xl: false }); - return ( - + + flexBasis={{ lg: '100%', md: '70%', sm: '100%', base: '100%' }}> {options.map((option) => (