Claimables fixes (#6158)

* number formatting * fix border radius for claim dapp icon * poll gas by chain id * haptics * adjust button enabled logic + shadows
rainbow-me · Oct 2, 2024 · 346afbe · 346afbe
1 parent a83b75c
commit 346afbe
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/src/components/asset-list/RecyclerAssetList2/Claimable.tsx b/src/components/asset-list/RecyclerAssetList2/Claimable.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Box, Inline, Stack, Text } from '@/design-system';
 import { useAccountSettings } from '@/hooks';
 import { useClaimables } from '@/resources/addys/claimables/query';
@@ -25,10 +25,7 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
 
   const [claimable] = data;
 
-  const nativeDisplay = useMemo(
-    () => convertAmountToNativeDisplayWorklet(claimable.value.nativeAsset.amount, nativeCurrency, true),
-    [claimable.value.nativeAsset.amount, nativeCurrency]
-  );
+  const nativeDisplay = convertAmountToNativeDisplayWorklet(claimable.value.nativeAsset.amount, nativeCurrency, true);
 
   if (!claimable) return null;
 
@@ -43,9 +40,13 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
       flexDirection="row"
     >
       <Inline alignVertical="center" space="12px">
-        <FasterImageView
+        <Box
+          as={FasterImageView}
           source={{ url: claimable.iconUrl }}
-          style={{ height: 40, width: 40, borderRadius: 11, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0.03)' }}
+          style={{ height: 40, width: 40 }}
+          borderRadius={11}
+          borderWidth={1}
+          borderColor={{ custom: 'rgba(0, 0, 0, 0.03)' }}
         />
         <Stack space={{ custom: 11 }}>
           <Text

diff --git a/src/screens/claimables/ClaimingClaimableSharedUI.tsx b/src/screens/claimables/ClaimingClaimableSharedUI.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { AccentColorProvider, Bleed, Box, Inline, Text, TextShadow, globalColors, useColorMode } from '@/design-system';
 import * as i18n from '@/languages';
 import { ListHeader, Panel, TapToDismiss, controlPanelStyles } from '@/components/SmoothPager/ListPanel';
-import { deviceUtils, safeAreaInsetValues, watchingAlert } from '@/utils';
+import { deviceUtils, haptics, safeAreaInsetValues, watchingAlert } from '@/utils';
 import { View } from 'react-native';
 import { IS_IOS } from '@/env';
 import { ButtonPressAnimation, ShimmerAnimation } from '@/components/animations';
@@ -65,25 +65,17 @@ export const ClaimingClaimableSharedUI = ({
 
   const isButtonDisabled =
     claimStatus === 'claiming' ||
-    (claimStatus !== 'success' && claimStatus !== 'pending' && claimable.type === 'transaction' && !isTransactionReady);
+    ((claimStatus === 'idle' || claimStatus === 'error') && claimable.type === 'transaction' && !isTransactionReady);
 
   const shouldShowClaimText = claimStatus === 'idle' && (claimable.type !== 'transaction' || hasSufficientFunds);
 
-  const claimAmountDisplay = useMemo(
-    () => `${handleSignificantDecimalsWithThreshold(claimable.value.claimAsset.amount, 4, '0.001')} ${claimable.asset.symbol}`,
-    [claimable.asset.symbol, claimable.value.claimAsset.amount]
-  );
-
-  const claimAmountNativeDisplay = useMemo(
-    () => convertAmountToNativeDisplayWorklet(claimable.value.nativeAsset.amount, nativeCurrency, true),
-    [claimable.value.nativeAsset.amount, nativeCurrency]
-  );
+  const claimAmountNativeDisplay = convertAmountToNativeDisplayWorklet(claimable.value.nativeAsset.amount, nativeCurrency, true);
 
   const buttonLabel = useMemo(() => {
     switch (claimStatus) {
       case 'idle':
         if (shouldShowClaimText) {
-          return i18n.t(i18n.l.claimables.panel.claim_amount, { amount: claimAmountDisplay });
+          return i18n.t(i18n.l.claimables.panel.claim_amount, { amount: claimable.value.claimAsset.display });
         } else {
           return i18n.t(i18n.l.claimables.panel.insufficient_funds);
         }
@@ -96,7 +88,7 @@ export const ClaimingClaimableSharedUI = ({
       default:
         return i18n.t(i18n.l.points.points.try_again);
     }
-  }, [claimAmountDisplay, claimStatus, shouldShowClaimText]);
+  }, [claimable.value.claimAsset.display, claimStatus, shouldShowClaimText]);
 
   const panelTitle = useMemo(() => {
     switch (claimStatus) {
@@ -167,7 +159,10 @@ export const ClaimingClaimableSharedUI = ({
                 <Box
                   as={FasterImageView}
                   source={{ url: claimable.iconUrl }}
-                  style={{ height: 20, width: 20, borderRadius: 6, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0.03)' }}
+                  style={{ height: 20, width: 20 }}
+                  borderRadius={6}
+                  borderWidth={1}
+                  borderColor={{ custom: 'rgba(0, 0, 0, 0.03)' }}
                 />
                 <TextShadow shadowOpacity={0.3}>
                   <Text align="center" color={panelTitleColor} size="20pt" weight="heavy">
@@ -220,6 +215,7 @@ export const ClaimingClaimableSharedUI = ({
                   }
                 }}
                 onLongPress={() => {
+                  haptics.impactHeavy();
                   if (!isReadOnlyWallet || enableActionsOnReadOnlyWallet) {
                     if (claimStatus === 'idle' || claimStatus === 'error') {
                       setClaimStatus('claiming');
@@ -230,9 +226,7 @@ export const ClaimingClaimableSharedUI = ({
                   }
                 }}
               >
-                <AccentColorProvider
-                  color={`rgba(41, 90, 247, ${(claimable.type === 'transaction' && !isTransactionReady) || claimStatus === 'claiming' ? 0.2 : 1})`}
-                >
+                <AccentColorProvider color={`rgba(41, 90, 247, ${isButtonDisabled ? 0.2 : 1})`}>
                   <Box
                     background="accent"
                     shadow="30px accent"
@@ -245,13 +239,13 @@ export const ClaimingClaimableSharedUI = ({
                     <ShimmerAnimation color="#FFFFFF" enabled={!isButtonDisabled || claimStatus === 'claiming'} width={BUTTON_WIDTH} />
                     <Inline alignVertical="center" space="6px">
                       {shouldShowClaimText && (
-                        <TextShadow shadowOpacity={0.3}>
+                        <TextShadow shadowOpacity={isButtonDisabled ? 0 : 0.3}>
                           <Text align="center" color="label" size="icon 20px" weight="heavy">
                             􀎽
                           </Text>
                         </TextShadow>
                       )}
-                      <TextShadow shadowOpacity={0.3}>
+                      <TextShadow shadowOpacity={isButtonDisabled ? 0 : 0.3}>
                         <Text align="center" color="label" size="20pt" weight="heavy">
                           {buttonLabel}
                         </Text>

diff --git a/src/screens/claimables/ClaimingSponsoredClaimable.tsx b/src/screens/claimables/ClaimingSponsoredClaimable.tsx
@@ -8,6 +8,7 @@ import { loadWallet } from '@/model/wallet';
 import { useMutation } from '@tanstack/react-query';
 import { getProvider } from '@/handlers/web3';
 import { useAccountSettings } from '@/hooks';
+import { haptics } from '@/utils';
 
 export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: SponsoredClaimable }) => {
   const { accountAddress, nativeCurrency } = useAccountSettings();
@@ -25,6 +26,7 @@ export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: Sponsored
 
       if (!wallet) {
         // Biometrics auth failure (retry possible)
+        haptics.notificationError();
         setClaimStatus('error');
         return;
       }
@@ -36,6 +38,7 @@ export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: Sponsored
         try {
           response = await addysHttp.get(path);
         } catch (e) {
+          haptics.notificationError();
           setClaimStatus('error');
           logger.error(new RainbowError('[ClaimSponsoredClaimable]: failed to execute sponsored claim api call'));
           return;
@@ -44,37 +47,43 @@ export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: Sponsored
         try {
           response = await addysHttp.post(path);
         } catch (e) {
+          haptics.notificationError();
           setClaimStatus('error');
           logger.error(new RainbowError('[ClaimSponsoredClaimable]: failed to execute sponsored claim api call'));
           return;
         }
       }
 
       if (!response.data.payload.success) {
+        haptics.notificationError();
         setClaimStatus('error');
-        logger.warn('[ClaimSponsoredClaimable]: sponsored claim api call returned unsuccessful response');
+        logger.error(new RainbowError('[ClaimSponsoredClaimable]: sponsored claim api call returned unsuccessful response'));
       } else {
         if (response.data.payload.claim_transaction_status?.transaction_hash) {
+          haptics.notificationSuccess();
           setClaimStatus('success');
         } else {
+          haptics.notificationSuccess();
           setClaimStatus('pending');
         }
         // Clear and refresh claimables data
         queryClient.invalidateQueries(claimablesQueryKey({ address: accountAddress, currency: nativeCurrency }));
       }
     },
     onError: e => {
+      haptics.notificationError();
       setClaimStatus('error');
       logger.error(new RainbowError('[ClaimingSponsoredClaimable]: Failed to claim claimable due to unhandled error'), {
         message: (e as Error)?.message,
       });
     },
     onSuccess: () => {
       if (claimStatus === 'claiming') {
+        haptics.notificationError();
+        setClaimStatus('error');
         logger.error(
           new RainbowError('[ClaimingSponsoredClaimable]: claim function completed but never resolved status to success or error state')
         );
-        setClaimStatus('error');
       }
     },
   });

diff --git a/src/screens/claimables/ClaimingTransactionClaimable.tsx b/src/screens/claimables/ClaimingTransactionClaimable.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAccountSettings, useGas } from '@/hooks';
-import { ethereumUtils } from '@/utils';
+import { ethereumUtils, haptics } from '@/utils';
 import { TransactionClaimable } from '@/resources/addys/claimables/types';
 import { estimateGasWithPadding, getProvider } from '@/handlers/web3';
 import { parseGasParamsForTransaction } from '@/parsers';
@@ -72,11 +72,11 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
   }, [buildTxPayload]);
 
   useEffect(() => {
-    startPollingGasFees();
+    startPollingGasFees(claimable.chainId);
     return () => {
       stopPollingGasFees();
     };
-  }, [startPollingGasFees, stopPollingGasFees]);
+  }, [claimable.chainId, startPollingGasFees, stopPollingGasFees]);
 
   const estimateGas = useCallback(async () => {
     if (!baseTxPayload) {
@@ -142,6 +142,7 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
   const { mutate: claimClaimable } = useMutation({
     mutationFn: async () => {
       if (!txPayload) {
+        haptics.notificationError();
         setClaimStatus('error');
         logger.error(new RainbowError('[ClaimingTransactionClaimable]: Failed to claim claimable due to missing tx payload'));
         return;
@@ -155,6 +156,7 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
 
       if (!wallet) {
         // Biometrics auth failure (retry possible)
+        haptics.notificationError();
         setClaimStatus('error');
         return;
       }
@@ -165,28 +167,32 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
       });
 
       if (errorMessage) {
+        haptics.notificationError();
         setClaimStatus('error');
         logger.error(new RainbowError('[ClaimingTransactionClaimable]: Failed to claim claimable due to rap error'), {
           message: errorMessage,
         });
       } else {
+        haptics.notificationSuccess();
         setClaimStatus('success');
         // Clear and refresh claimables data
         queryClient.invalidateQueries(claimablesQueryKey({ address: accountAddress, currency: nativeCurrency }));
       }
     },
     onError: e => {
+      haptics.notificationError();
       setClaimStatus('error');
       logger.error(new RainbowError('[ClaimingTransactionClaimable]: Failed to claim claimable due to unhandled error'), {
         message: (e as Error)?.message,
       });
     },
     onSuccess: () => {
       if (claimStatus === 'claiming') {
+        haptics.notificationError();
+        setClaimStatus('error');
         logger.error(
           new RainbowError('[ClaimingTransactionClaimable]: claim function completed but never resolved status to success or error state')
         );
-        setClaimStatus('error');
       }
     },
   });