refactor: current funds

src/pages/Store/Funds.tsx

+import { DollarOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+
+const Funds = ({ funds }: { funds: number }) => (
+	<div style={{ textAlign: 'right', margin: '1rem' }}>
+		<Typography>
+			Current funds: {funds} <DollarOutlined />
+		</Typography>
+	</div>
+);
+
+export default Funds;

src/pages/Store/Store.tsx

-import { Button, Card, Col, Modal, Row, Typography } from 'antd';
+import { Button, Card, Col, Modal, Row } from 'antd';
 import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 
 import usePageTitle from '../../hooks/usePageTitle';
@@ -8,6 +8,8 @@ import { useLoggedInUser } from '../../hooks/useLoggedInUser';
 import { Loading } from '../../utils/Loading';
 import { updateUserDataInFirebase } from '../../utils/firebase';
 
+import Funds from './Funds';
+
 const Store = () => {
 	usePageTitle('Store');
 	const { userData } = useLoggedInUser();
@@ -66,11 +68,7 @@ const Store = () => {
 
 	return (
 		<>
-			<div style={{ textAlign: 'right', margin: '1rem' }}>
-				<Typography>
-					Current funds: {userData?.actualScore} <DollarOutlined />
-				</Typography>
-			</div>
+			<Funds funds={userData?.actualScore} />
 
 			<Row gutter={[10, 10]}>
 				{[...food, ...pokeballs].map((item, index) => (