Skip to content

fix: handle null receive addresses in TopUpBalanceModal and AddressLi… #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f7f376a1fcd0d0e11a10ed1b6577c9 merged 1 commit into from
May 16, 2025
Merged

fix: handle null receive addresses in TopUpBalanceModal and AddressLi… #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 16 additions & 142 deletions src/components/relay-dashboard/Balance/components/AddressList/AddressList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
// )}
// />
// );
// };
67 changes: 11 additions & 56 deletions src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -45,14 +46,16 @@ 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) => {
if (error.response && error.response.status === 401) {
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);
});
Expand All @@ -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>
// );
// };
Loading