fix remaining issues from squashing

Author: AnthonyMarin

src/components/nft-dashboard/activityStory/ActivityStory.tsx

@@ -6,6 +6,8 @@ import * as S from './TransactionItem.styles';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
 import { useBitcoinRates } from '@app/hooks/useBitcoinRates';
+import { getCurrencyPrice } from '@app/utils/utils';
+import { CurrencyTypeEnum } from '@app/interfaces/interfaces';
 
 function makeHexId(length: number): string {
   const characters = 'abcdef0123456789';
@@ -16,63 +18,91 @@ function makeHexId(length: number): string {
   return result;
 }
 
-function convertBtcToUsd(btcValue: string, btcPriceInUsd: number): string {
-  const btcAmount = parseFloat(btcValue);
-  if (btcAmount < 1) {
-    const satoshis = Math.round(btcAmount * 100000000);
-    const usdValue = (satoshis / 100000000) * btcPriceInUsd;
-    return usdValue.toFixed(2);
-  } else {
-    const wholeBtc = Math.floor(btcAmount);
-    const satoshis = Math.round((btcAmount - wholeBtc) * 100000000);
-    const usdValue = (wholeBtc * btcPriceInUsd) + (satoshis / 100000000 * btcPriceInUsd);
-    return usdValue.toFixed(2);
-  }
-}
-
-export const TransactionItem: React.FC<WalletTransaction> = ({ witness_tx_id, date, output, value }) => {
+export const TransactionItem: React.FC<WalletTransaction> = ({
+  witness_tx_id,
+  date,
+  output,
+  value,
+}) => {
   const { t } = useTranslation();
   const [transactionId, setTransactionId] = useState<string | null>(null);
-  const [usdValue, setUsdValue] = useState<string>('');
+
   const { rates, isLoading, error } = useBitcoinRates();
 
+  // Effect to initialize the transaction ID when the component mounts
   useEffect(() => {
     if (!witness_tx_id) {
       setTransactionId(makeHexId(64));
     }
   }, [witness_tx_id]);
 
+  // Parse 'value' as BTC amount
+  const btcAmount = parseFloat(value) / 100000000;
+
+  const [usdValue, setUsdValue] = useState<number | null>(null);
+
   useEffect(() => {
-    if (!isLoading && !error && rates.length > 0) {
-      const btcPrice = rates[rates.length - 1].usd_value; // Get the most recent BTC price
-      const usdValueCalculated = convertBtcToUsd(value, btcPrice);
-      setUsdValue(usdValueCalculated);
+    if (!isLoading && rates.length > 0 && btcAmount) {
+      // Convert the transaction date to a timestamp
+      const transactionDate = new Date(date).getTime();
+
+      // Find the rate closest to the transaction date
+      let closestRate = rates[0];
+      let minDiff = Math.abs(rates[0].date - transactionDate);
+
+      for (let i = 1; i < rates.length; i++) {
+        const diff = Math.abs(rates[i].date - transactionDate);
+        if (diff < minDiff) {
+          minDiff = diff;
+          closestRate = rates[i];
+        }
+      }
+
+      const rate = closestRate.usd_value;
+
+      // Compute the USD value
+      const usdAmount = btcAmount * rate;
+      setUsdValue(usdAmount);
     }
-  }, [value, rates, isLoading, error]);
+  }, [isLoading, rates, btcAmount, date]);
+
+  // Handle potential errors and loading states
+  if (error) {
+    return <div>Error loading exchange rates: {error}</div>;
+  }
 
-  // Skip rendering if the value is zero
-  if (parseFloat(value) === 0) {
-    return null;
+  if (isLoading || usdValue === null) {
+    return <div>Loading...</div>;
   }
 
   return (
     <S.TransactionCard>
       <BaseRow gutter={[20, 20]} wrap={true} align="middle">
         <BaseCol span={24}>
-          <S.Label>{t('Transaction ID')}:</S.Label>
-          <S.Address style={{ color: 'var(--text-main)' }}> {witness_tx_id ? witness_tx_id : transactionId}</S.Address>
+          <S.Label>{'Transaction ID'}:</S.Label>
+          <S.Address style={{ color: 'var(--text-main)' }}>
+            {witness_tx_id ? witness_tx_id : transactionId}
+          </S.Address>
         </BaseCol>
         <BaseCol span={24}>
-          <S.Label>{t('Address')}:</S.Label>
+          <S.Label>{'Address'}:</S.Label>
           <S.Output>{output}</S.Output>
         </BaseCol>
         <BaseCol span={12}>
-          <S.Label>{t('Date')}:</S.Label>
+          <S.Label>{'Date'}:</S.Label>
           <S.DateText>{Dates.getDate(date).format('L LTS')}</S.DateText>
         </BaseCol>
         <BaseCol span={12} style={{ textAlign: 'right' }}>
-          <S.Label>{t('Value')}:</S.Label>
-          {usdValue && <S.Value>${usdValue}</S.Value>}
+          <S.Label>{'Value'}:</S.Label>
+          <S.Value>
+            {getCurrencyPrice(
+              usdValue.toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              }),
+              CurrencyTypeEnum.USD
+            )}
+          </S.Value>
         </BaseCol>
       </BaseRow>
     </S.TransactionCard>