From 9df41c411ce243d3d369cb9e39ff5d119f05cc74 Mon Sep 17 00:00:00 2001
From: Maphikza <stapisi@protonmail.com>
Date: Fri, 16 May 2025 12:08:23 +0200
Subject: [PATCH] fix: handle null receive addresses in TopUpBalanceModal and
 AddressList components

---
 .../components/AddressList/AddressList.tsx    | 158 ++----------------
 .../TopUpBalanceModal/TopUpBalanceModal.tsx   |  67 ++------
 2 files changed, 27 insertions(+), 198 deletions(-)

diff --git a/src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx b/src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx
index 38cc860..ab492d5 100644
--- a/src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx
+++ b/src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx
@@ -36,9 +36,25 @@ const AddressText = styled.span`
   }
 `;
 
+const EmptyMessage = styled.div`
+  text-align: center;
+  padding: 20px;
+  color: #aaa;
+  font-size: 16px;
+`;
+
 export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
   const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
 
+  // Handle empty addresses array
+  if (!addresses || addresses.length === 0) {
+    return (
+      <EmptyMessage>
+        No receiving addresses available at the moment.
+      </EmptyMessage>
+    );
+  }
+
   return (
     <List
       itemLayout="horizontal"
@@ -61,145 +77,3 @@ export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
     />
   );
 };
-
-// import React from 'react';
-// import { List, Button } from 'antd';
-// import { CopyToClipboard } from 'react-copy-to-clipboard';
-// import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-// import styled from 'styled-components';
-
-// interface Address {
-//   index: string;
-//   address: string;
-// }
-
-// interface AddressListProps {
-//   addresses: Address[];
-// }
-
-// const AddressContainer = styled.div`
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-//   @media (max-width: 768px) {
-//     flex-direction: column;
-//     align-items: flex-start;
-//   }
-// `;
-
-// const AddressText = styled.span`
-//   color: #aaa;
-//   margin-right: 8px;
-//   flex: 1;
-//   word-wrap: break-word; /* Ensure long addresses break properly */
-//   @media (max-width: 768px) {
-//     margin-right: 0;
-//     margin-bottom: 8px;
-//   }
-// `;
-
-// export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
-//   const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
-
-//   return (
-//     <List
-//       itemLayout="horizontal"
-//       dataSource={addresses}
-//       renderItem={(address, index) => (
-//         <List.Item>
-//           <List.Item.Meta
-//             title={`Address: ${parseInt(address.index) + 1}`}
-//             description={
-//               <AddressContainer>
-//                 <AddressText>{address.address}</AddressText>
-//                 <CopyToClipboard text={address.address} onCopy={() => setCopiedIndex(index)}>
-//                   <Button icon={copiedIndex === index ? <CheckOutlined /> : <CopyOutlined />} size="small" />
-//                 </CopyToClipboard>
-//               </AddressContainer>
-//             }
-//           />
-//         </List.Item>
-//       )}
-//     />
-//   );
-// };
-
-// import React from 'react';
-// import { List, Button } from 'antd';
-// import { CopyToClipboard } from 'react-copy-to-clipboard';
-// import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-
-// interface Address {
-//   index: string;
-//   address: string;
-// }
-
-// interface AddressListProps {
-//   addresses: Address[];
-// }
-
-// export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
-//   const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
-
-//   return (
-//     <List
-//       itemLayout="horizontal"
-//       dataSource={addresses}
-//       renderItem={(address, index) => (
-//         <List.Item>
-//           <List.Item.Meta
-//             title={`Address: ${parseInt(address.index) + 1}`}
-//             description={
-//               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-//                 <span style={{ color: '#aaa', marginRight: '8px', flex: 1 }}>{address.address}</span>
-//                 <CopyToClipboard text={address.address} onCopy={() => setCopiedIndex(index)}>
-//                   <Button icon={copiedIndex === index ? <CheckOutlined /> : <CopyOutlined />} size="small" />
-//                 </CopyToClipboard>
-//               </div>
-//             }
-//           />
-//         </List.Item>
-//       )}
-//     />
-//   );
-// };
-
-// import React from 'react';
-// import { List, Button } from 'antd';
-// import { CopyToClipboard } from 'react-copy-to-clipboard';
-// import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-
-// interface Address {
-//   index: string;
-//   address: string;
-// }
-
-// interface AddressListProps {
-//   addresses: Address[];
-// }
-
-// export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
-//   const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
-
-//   return (
-//     <List
-//       itemLayout="horizontal"
-//       dataSource={addresses}
-//       renderItem={(address, index) => (
-//         <List.Item>
-//           <List.Item.Meta
-//             title={`Address: ${parseInt(address.index) + 1}`}
-//             description={
-//               <div style={{ display: 'flex', alignItems: 'center' }}>
-//                 <span style={{ color: '#aaa', marginRight: '8px' }}>{address.address}</span>
-//                 <CopyToClipboard text={address.address} onCopy={() => setCopiedIndex(index)}>
-//                   <Button icon={copiedIndex === index ? <CheckOutlined /> : <CopyOutlined />} size="small" />
-//                 </CopyToClipboard>
-//               </div>
-//             }
-//           />
-//         </List.Item>
-//       )}
-//     />
-//   );
-// };
diff --git a/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx b/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
index f923632..ce679c5 100644
--- a/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
+++ b/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
@@ -26,6 +26,7 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
   onFinish,
 }) => {
   const [addresses, setAddresses] = useState<Address[]>([]);
+  const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const handleLogout = useHandleLogout();
 
@@ -45,7 +46,8 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
           },
         })
         .then((response) => {
-          setAddresses(response.data);
+          // Ensure we always have a valid array, even if the API returns null
+          setAddresses(response.data || []);
           setIsLoading(false);
         })
         .catch((error) => {
@@ -53,6 +55,7 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
             handleLogout(); // Log out if token is invalid or expired
           } else {
             console.error('Error fetching addresses:', error);
+            setError('Failed to load addresses. Please try again later.');
           }
           setIsLoading(false);
         });
@@ -62,62 +65,14 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
   return (
     <BaseModal centered={true} width={500} open={isOpen} onCancel={onOpenChange} footer={null} destroyOnClose>
       <BaseSpin spinning={isLoading}>
-        <AddressList addresses={addresses} />
+        {error ? (
+          <div style={{ textAlign: 'center', padding: '20px', color: '#ff4d4f' }}>
+            {error}
+          </div>
+        ) : (
+          <AddressList addresses={addresses} />
+        )}
       </BaseSpin>
     </BaseModal>
   );
 };
-
-
-// import React, { useEffect, useState } from 'react';
-// import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
-// import { TopUpDataProps } from '../../interfaces/interfaces';
-// import { BaseSpin } from '@app/components/common/BaseSpin/BaseSpin';
-// import { AddressList } from '../AddressList/AddressList';
-// import axios from 'axios';
-// import config from '@app/config/config';
-
-// interface TopUpBalanceModalProps extends TopUpDataProps {
-//   isOpen: boolean;
-//   onOpenChange: () => void;
-// }
-
-// interface Address {
-//   index: string;
-//   address: string;
-// }
-
-// export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
-//   cards,
-//   loading,
-//   isOpen,
-//   onOpenChange,
-//   onFinish,
-// }) => {
-//   const [addresses, setAddresses] = useState<Address[]>([]);
-//   const [isLoading, setIsLoading] = useState(true);
-
-//   useEffect(() => {
-//     if (isOpen) {
-//       setIsLoading(true);
-//       axios
-//         .get(`${config.baseURL}/api/addresses`)
-//         .then((response) => {
-//           setAddresses(response.data);
-//           setIsLoading(false);
-//         })
-//         .catch((error) => {
-//           console.error('Error fetching addresses:', error);
-//           setIsLoading(false);
-//         });
-//     }
-//   }, [isOpen]);
-
-//   return (
-//     <BaseModal centered={true} width={500} open={isOpen} onCancel={onOpenChange} footer={null} destroyOnClose>
-//       <BaseSpin spinning={isLoading}>
-//         <AddressList addresses={addresses} />
-//       </BaseSpin>
-//     </BaseModal>
-//   );
-// };