Skip to content

Commit 1fb3461

Browse files
f7f376a1fcd0d0e11a10ed1b6577c9f7f376a1fcd0d0e11a10ed1b6577c9
authored
Merge pull request #44 from HORNET-Storage/feature/generic-settings
fix: handle null receive addresses in TopUpBalanceModal and AddressLi…
2 parents 14d4f0b + 9df41c4 commit 1fb3461

File tree

2 files changed

+27
-198
lines changed

2 files changed

+27
-198
lines changed

‎src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx‎

Lines changed: 16 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,25 @@ const AddressText = styled.span`
3636
}
3737
`;
3838

39+
const EmptyMessage = styled.div`
40+
text-align: center;
41+
padding: 20px;
42+
color: #aaa;
43+
font-size: 16px;
44+
`;
45+
3946
export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
4047
const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
4148

49+
// Handle empty addresses array
50+
if (!addresses || addresses.length === 0) {
51+
return (
52+
<EmptyMessage>
53+
No receiving addresses available at the moment.
54+
</EmptyMessage>
55+
);
56+
}
57+
4258
return (
4359
<List
4460
itemLayout="horizontal"
@@ -61,145 +77,3 @@ export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
6177
/>
6278
);
6379
};
64-
65-
// import React from 'react';
66-
// import { List, Button } from 'antd';
67-
// import { CopyToClipboard } from 'react-copy-to-clipboard';
68-
// import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
69-
// import styled from 'styled-components';
70-
71-
// interface Address {
72-
// index: string;
73-
// address: string;
74-
// }
75-
76-
// interface AddressListProps {
77-
// addresses: Address[];
78-
// }
79-
80-
// const AddressContainer = styled.div`
81-
// display: flex;
82-
// justify-content: space-between;
83-
// align-items: center;
84-
// @media (max-width: 768px) {
85-
// flex-direction: column;
86-
// align-items: flex-start;
87-
// }
88-
// `;
89-
90-
// const AddressText = styled.span`
91-
// color: #aaa;
92-
// margin-right: 8px;
93-
// flex: 1;
94-
// word-wrap: break-word; /* Ensure long addresses break properly */
95-
// @media (max-width: 768px) {
96-
// margin-right: 0;
97-
// margin-bottom: 8px;
98-
// }
99-
// `;
100-
101-
// export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
102-
// const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
103-
104-
// return (
105-
// <List
106-
// itemLayout="horizontal"
107-
// dataSource={addresses}
108-
// renderItem={(address, index) => (
109-
// <List.Item>
110-
// <List.Item.Meta
111-
// title={`Address: ${parseInt(address.index) + 1}`}
112-
// description={
113-
// <AddressContainer>
114-
// <AddressText>{address.address}</AddressText>
115-
// <CopyToClipboard text={address.address} onCopy={() => setCopiedIndex(index)}>
116-
// <Button icon={copiedIndex === index ? <CheckOutlined /> : <CopyOutlined />} size="small" />
117-
// </CopyToClipboard>
118-
// </AddressContainer>
119-
// }
120-
// />
121-
// </List.Item>
122-
// )}
123-
// />
124-
// );
125-
// };
126-
127-
// import React from 'react';
128-
// import { List, Button } from 'antd';
129-
// import { CopyToClipboard } from 'react-copy-to-clipboard';
130-
// import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
131-
132-
// interface Address {
133-
// index: string;
134-
// address: string;
135-
// }
136-
137-
// interface AddressListProps {
138-
// addresses: Address[];
139-
// }
140-
141-
// export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
142-
// const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
143-
144-
// return (
145-
// <List
146-
// itemLayout="horizontal"
147-
// dataSource={addresses}
148-
// renderItem={(address, index) => (
149-
// <List.Item>
150-
// <List.Item.Meta
151-
// title={`Address: ${parseInt(address.index) + 1}`}
152-
// description={
153-
// <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
154-
// <span style={{ color: '#aaa', marginRight: '8px', flex: 1 }}>{address.address}</span>
155-
// <CopyToClipboard text={address.address} onCopy={() => setCopiedIndex(index)}>
156-
// <Button icon={copiedIndex === index ? <CheckOutlined /> : <CopyOutlined />} size="small" />
157-
// </CopyToClipboard>
158-
// </div>
159-
// }
160-
// />
161-
// </List.Item>
162-
// )}
163-
// />
164-
// );
165-
// };
166-
167-
// import React from 'react';
168-
// import { List, Button } from 'antd';
169-
// import { CopyToClipboard } from 'react-copy-to-clipboard';
170-
// import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
171-
172-
// interface Address {
173-
// index: string;
174-
// address: string;
175-
// }
176-
177-
// interface AddressListProps {
178-
// addresses: Address[];
179-
// }
180-
181-
// export const AddressList: React.FC<AddressListProps> = ({ addresses }) => {
182-
// const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);
183-
184-
// return (
185-
// <List
186-
// itemLayout="horizontal"
187-
// dataSource={addresses}
188-
// renderItem={(address, index) => (
189-
// <List.Item>
190-
// <List.Item.Meta
191-
// title={`Address: ${parseInt(address.index) + 1}`}
192-
// description={
193-
// <div style={{ display: 'flex', alignItems: 'center' }}>
194-
// <span style={{ color: '#aaa', marginRight: '8px' }}>{address.address}</span>
195-
// <CopyToClipboard text={address.address} onCopy={() => setCopiedIndex(index)}>
196-
// <Button icon={copiedIndex === index ? <CheckOutlined /> : <CopyOutlined />} size="small" />
197-
// </CopyToClipboard>
198-
// </div>
199-
// }
200-
// />
201-
// </List.Item>
202-
// )}
203-
// />
204-
// );
205-
// };

‎src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx‎

Lines changed: 11 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
2626
onFinish,
2727
}) => {
2828
const [addresses, setAddresses] = useState<Address[]>([]);
29+
const [error, setError] = useState<string | null>(null);
2930
const [isLoading, setIsLoading] = useState(true);
3031
const handleLogout = useHandleLogout();
3132

@@ -45,14 +46,16 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
4546
},
4647
})
4748
.then((response) => {
48-
setAddresses(response.data);
49+
// Ensure we always have a valid array, even if the API returns null
50+
setAddresses(response.data || []);
4951
setIsLoading(false);
5052
})
5153
.catch((error) => {
5254
if (error.response && error.response.status === 401) {
5355
handleLogout(); // Log out if token is invalid or expired
5456
} else {
5557
console.error('Error fetching addresses:', error);
58+
setError('Failed to load addresses. Please try again later.');
5659
}
5760
setIsLoading(false);
5861
});
@@ -62,62 +65,14 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
6265
return (
6366
<BaseModal centered={true} width={500} open={isOpen} onCancel={onOpenChange} footer={null} destroyOnClose>
6467
<BaseSpin spinning={isLoading}>
65-
<AddressList addresses={addresses} />
68+
{error ? (
69+
<div style={{ textAlign: 'center', padding: '20px', color: '#ff4d4f' }}>
70+
{error}
71+
</div>
72+
) : (
73+
<AddressList addresses={addresses} />
74+
)}
6675
</BaseSpin>
6776
</BaseModal>
6877
);
6978
};
70-
71-
72-
// import React, { useEffect, useState } from 'react';
73-
// import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
74-
// import { TopUpDataProps } from '../../interfaces/interfaces';
75-
// import { BaseSpin } from '@app/components/common/BaseSpin/BaseSpin';
76-
// import { AddressList } from '../AddressList/AddressList';
77-
// import axios from 'axios';
78-
// import config from '@app/config/config';
79-
80-
// interface TopUpBalanceModalProps extends TopUpDataProps {
81-
// isOpen: boolean;
82-
// onOpenChange: () => void;
83-
// }
84-
85-
// interface Address {
86-
// index: string;
87-
// address: string;
88-
// }
89-
90-
// export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
91-
// cards,
92-
// loading,
93-
// isOpen,
94-
// onOpenChange,
95-
// onFinish,
96-
// }) => {
97-
// const [addresses, setAddresses] = useState<Address[]>([]);
98-
// const [isLoading, setIsLoading] = useState(true);
99-
100-
// useEffect(() => {
101-
// if (isOpen) {
102-
// setIsLoading(true);
103-
// axios
104-
// .get(`${config.baseURL}/api/addresses`)
105-
// .then((response) => {
106-
// setAddresses(response.data);
107-
// setIsLoading(false);
108-
// })
109-
// .catch((error) => {
110-
// console.error('Error fetching addresses:', error);
111-
// setIsLoading(false);
112-
// });
113-
// }
114-
// }, [isOpen]);
115-
116-
// return (
117-
// <BaseModal centered={true} width={500} open={isOpen} onCancel={onOpenChange} footer={null} destroyOnClose>
118-
// <BaseSpin spinning={isLoading}>
119-
// <AddressList addresses={addresses} />
120-
// </BaseSpin>
121-
// </BaseModal>
122-
// );
123-
// };

0 commit comments

Comments
 (0)