{displayButton()}
{/* setShowModal(false)} /> */}
@@ -74,7 +83,7 @@ const Connect = ({ display, setDisplay }) => {
Connect.propTypes = {
display: PropTypes.bool.isRequired,
- setDisplay: PropTypes.func.isRequired
+ setDisplay: PropTypes.func.isRequired,
};
// ShowModal.propTypes = {
// show: PropTypes.bool.isRequired,
diff --git a/src/components/Content.jsx b/src/components/Content.jsx
index a819808..d31060b 100644
--- a/src/components/Content.jsx
+++ b/src/components/Content.jsx
@@ -1,108 +1,348 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; // ES6
import { Link } from 'react-router-dom';
-const Content = ({ userData }) => {
+import { doc, getDoc } from 'firebase/firestore';
+import { db as fsDatabase } from '../firebase/config';
+import { v4 as uuid4 } from 'uuid';
+import { Menu, Transition } from '@headlessui/react';
+import { DownloadIcon, TrashIcon, CheckIcon, RefreshIcon } from '@heroicons/react/outline';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css'; // optional for styling
+import 'tippy.js/themes/light-border.css';
+
+const Content = ({ userData, searchQuery }) => {
// console.log('userData', userData);
+ const [contracts, setContracts] = useState([]);
+ const [contractsLoaded, setContractsLoaded] = useState(false);
+
+ // console.log('contracts', contracts);
+ useEffect(() => {
+ const fetchContracts = async () => {
+ if (userData === null) {
+ return;
+ }
+ const contractIds = userData.smart_contracts;
+ // console.log('contractIds', contractIds);
+ const contract = contractIds.map(async (contractId) => {
+ const getSc = await getDoc(doc(fsDatabase, 'contracts', contractId));
+ let scData;
+ if (getSc.exists()) {
+ scData = getSc.data();
+ scData.id = contractId;
+ } else {
+ // doc.data() will be undefined in this case
+ scData = null;
+ }
+ return scData;
+ });
+ //waity for all promises to resolve
+ const contractsResolved = await Promise.all(contract);
+
+ setContracts(contractsResolved);
+ setContractsLoaded(true);
+ };
+ fetchContracts();
+
+ }, [userData]);
+
+ // filter contracts based on searchQuery on contract.name and contract.address
+ useEffect(() => {
+ console.log('searchQuery', searchQuery, contracts)
+ if (searchQuery === '' || !contractsLoaded) {
+ return;
+ }
+ const filteredContracts = contracts.filter((contract) => {
+ return contract.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ contract.address.toLowerCase().includes(searchQuery.toLowerCase());
+ }
+ );
+ setContracts(filteredContracts);
+ }, [searchQuery, contractsLoaded]);
+
+ // filter contracts based on searchQuery on contract.name and contract.address
+ useEffect(() => {
+ console.log('searchQuery', searchQuery, contracts)
+ if (searchQuery === '') {
+ return;
+ }
+ const filteredContracts = contracts.filter((contract) => {
+ return contract.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ contract.address.toLowerCase().includes(searchQuery.toLowerCase());
+ }
+ );
+ setContracts(filteredContracts);
+ }, [searchQuery]);
+
+
if (userData === null) {
return (
<>
//
-
-
+
);
}
+ const getEventBadges = (events) => {
+ const eventNames = Object.keys(events);
+ const firstThreeEvents = eventNames.slice(0, 3);
+ const remainingEventsCount = eventNames.length - firstThreeEvents.length;
+
+ const badgeColors = [
+ 'bg-red-50',
+ 'bg-yellow-50',
+ 'bg-green-50',
+ 'bg-blue-50',
+ 'bg-indigo-50',
+ 'bg-purple-50',
+ 'bg-pink-50',
+ ];
+
+ if (remainingEventsCount === 0) {
+ // Display a single badge with the number of events on mobile
+ return (
+ <>
+ (
+
+ {eventName}
+
+ ))}
+ placement="top"
+ theme="light-border"
+ animateFill={true}
+ arrow={false}
+ >
+
+ {eventNames.length} events
+
+
+
+
+ );
+ }
+ };
return (
+ {firstThreeEvents.map((eventName, index) => (
+
+ {eventName}
+
+ ))}
+
+
+ );
+ } else {
+ // Display the first three events and a badge for the remaining events
+ return (
+ <>
+
+
+ {eventNames.map((eventName, index) => (
+
+ {eventName}
+
+ ))}
+
+
+ )}
+ placement="top"
+ theme="light-border"
+ animateFill={true}
+ arrow={false}
+ >
+
+ {eventNames.length} events
+
+
+
+
+ {firstThreeEvents.map((eventName, index) => (
+
+ {eventName}
+
+ ))}
+
+ {(eventNames.slice(3)).map((eventName, index) => (
+
+ {eventName}
+
+ ))}
+
}
+ placement="top"
+ theme="light-border"
+ animateFill={true}
+ arrow={false}
+ >
+
+ +{remainingEventsCount} more
+
+
+
+
+
{/* {console.log('content data', userData)} */}
Smart Contracts[{userData.smart_contracts.length}]
-
-
+
+
Add new contract
-
- View all
-
+
+
- Sept 09, 2020
+ Summary
{/* +$87.01 */}
-
-
- {/*
- 
- */}
-
- Alias1
-
- 0x0000...
-
-
-
-
-
-
- Syncing
-
-
-
-
-
-
-
-
-
- Alias2
-
- 0x0000...
-
-
-
-
-
-
- Complete
-
-
-
-
-
-
-
-
-
- Alias3
-
- 0x0000...
-
+ {contracts.slice(0, 4).map((contract) => (
+
+
+
+
+
+ {/* ellipse width 60% */}
+ {/* show name and between parenthesis (0x0000...) */}
+ {contract.name} ({contract.address.slice(0, 6)}...{contract.address.slice(-4)})
+
+
+
+ {getEventBadges(contract.events)}
+
-
-
-
- Pending
-
+
+
+
+ {contract.status === 'pending' ? (
+ <>
+ Syncing
+
+ ) : (
+ 'Complete'
+ )}
+
+
+
+
-
-
+ ))}
+
{/* {console.log('content data', userData)} */} Smart Contracts[{userData.smart_contracts.length}]
-
-
+
+
Add new contract
-
- View all
-
+
+
-
Sept 09, 2020
+Summary
{/* +$87.01 */}
-
-
-
- {/*
-
- */}
-
-
-
-
- Alias1
- - 0x0000... - -
-
-
-
- Syncing
-
-
-
-
-
-
-
-
-
-
- Alias2
- - 0x0000... - -
-
-
-
- Complete
-
-
-
-
-
-
-
-
Alias3
- - 0x0000... - + {contracts.slice(0, 4).map((contract) => ( +
+
-
+
-
+
+ + {/* ellipse width 60% */} + {/* show name and between parenthesis (0x0000...) */} + {contract.name} ({contract.address.slice(0, 6)}...{contract.address.slice(-4)}) + + +
+ {getEventBadges(contract.events)} +
-
+ ))}
+
- Pending
-
+
-
+
-
+
+ {contract.status === 'pending' ? (
+ <>
+ Syncing
+
+ ) : (
+ 'Complete'
+ )}
+
+
+
+