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 <[email protected]>
GoodDollar · Dec 11, 2024 · 2ca245d · 2ca245d
1 parent cf87414
commit 2ca245d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 44 deletions.
diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx
@@ -53,8 +53,20 @@ const WarningExplanation = ({ type }: any) => (
     </Text>
   </Text>
 );
+const NetworkExplanation = ({ type }: any) => (
+  <Text color="goodOrange.500">
+    <Text>Switch in your wallet to the Celo network</Text>
+  </Text>
+);
 
 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}
           </Text>
 
-          {!isEmpty(explanationProps) ? <Explanation {...explanationProps} /> : null}
+          {Explanation ? <Explanation {...explanationProps} /> : null}
         </VStack>
         {content.suggestion ? (
           <VStack space={2}>
@@ -138,10 +147,12 @@ const WarningBox = ({ content, explanationProps = {} }: any) => {
                     {index + 1}. {suggestion}
                   </Text>
                 ))}
-                <Link color="goodOrange.500" href={content.href} isExternal>
-                  <Text>3. </Text>
-                  <Text textDecorationLine="underline">Purchase and use GoodDollar</Text>
-                </Link>
+                {content.href && (
+                  <Link color="goodOrange.500" href={content.href} isExternal>
+                    <Text>{content.suggestion.length + 1}. </Text>
+                    <Text textDecorationLine="underline">Purchase and use GoodDollar</Text>
+                  </Link>
+                )}
               </Text>
             </VStack>
           </VStack>
@@ -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 ? (
                     <WarningBox
                       key={key}
@@ -642,7 +651,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
                   ) : null;
                 })
             : null}
-          {isNonZeroDonation && address !== undefined ? (
+          {isNonZeroDonation && !isInvalidChain ? (
             <VStack space={2} maxW="700">
               {!currency.startsWith('G$') ? (
                 <Text variant="bold">
@@ -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.
               </Text>
             </VStack>
-          ) : isNonZeroDonation && address === undefined ? (
+          ) : address === undefined ? (
             <WarningBox content={warningProps.noWallet} />
           ) : 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
@@ -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 = () => <Box color="blue" backgroundColor="white" width={3} heigh
 
 const FrequencySelector = ({ onSelect, options = ['One-Time', 'Monthly'] }: DropdownProps) => {
   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 (
-    <HStack justifyContent={'space-between'} w={isTabletView ? '100%' : '90%'} m="auto">
+    <HStack justifyContent={'space-between'} width={'100%'} margin={'auto'}>
       <Radio.Group
         name="donationFrequency"
         value={value}
@@ -30,9 +23,7 @@ const FrequencySelector = ({ onSelect, options = ['One-Time', 'Monthly'] }: Drop
         width="100%"
         flexDir="row"
         justifyContent="space-between"
-        flexBasis={isDesktopView ? '50%' : '100%'}
-        flexShrink={1}
-        flexGrow={0}>
+        flexBasis={{ lg: '100%', md: '70%', sm: '100%', base: '100%' }}>
         {options.map((option) => (
           <Radio
             key={option}

diff --git a/packages/app/src/utils/index.tsx b/packages/app/src/utils/index.tsx
@@ -19,12 +19,12 @@ const BUTTON_STATE = {
     textColor: Colors.gray[300],
   },
   invalidChain: {
-    copy: 'Unsupported network',
+    copy: 'Confirm',
     bgColor: Colors.gray[1000],
     textColor: Colors.gray[300],
   },
   insufficientLiquidity: {
-    copy: 'Insufficient liquidity for this trade',
+    copy: 'Confirm',
     bgColor: Colors.gray[1000],
     textColor: Colors.gray[300],
   },
@@ -34,12 +34,12 @@ const BUTTON_STATE = {
     textColor: Colors.black,
   },
   insufficientBalance: {
-    copy: 'Insufficient balance',
+    copy: 'Confirm',
     bgColor: Colors.gray[1000],
     textColor: Colors.gray[300],
   },
   approvalNotReady: {
-    copy: 'Swap Not Ready',
+    copy: 'Confirm',
     bgColor: Colors.gray[1000],
     textColor: Colors.gray[300],
   },