Function App

front-end/src/App.tsx:46–530

()

}

function App() {

  // --- For header ---
  const [value, setValue] = useState<number>(0);
  const [numDaysAlive, setNumDaysAlive] = useState<number>(0);
  const [percentChange, setPercentChange] = useState<number>(0);

  // --- For middle section ---
  const [rockyStatusData, setRockyStatusData] = useState<RockyGraphData[]>([]);
  const [actionListData, setActionListData] = useState<ActionContributionListData[]>([]);
  const [contributionListData, setContributionListData] = useState<ActionContributionListData[]>([]);

  // --- For wallet/donation stuff ---
  const [donateValue, setDonateValue] = useState<number>(0.001);
  const [donateType, setDonateType] = useState<DonationToken>("WETH");
  const [walletAddr, setWalletAddr] = useState<string>("");

  // --- Modal state variables ---
  const [modalIsOpen, setModalIsOpen] = useState<boolean>(false);
  const [modalText, setModalText] = useState<string>("");
  const [modalDismissVisible, setModalDismissVisible] = useState<boolean>(true);

  // --- Firebase storage ---
  const firebaseDbRef = useRef<Firestore | null>(null);

  useEffect(useCallback(() => {
    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);
    firebaseDbRef.current = db;
    loadDonationData();
    loadActionData();
    loadNetWorth();
  }, []), []);

  // --- Data loading ---
  const compareDonations = (d1: RockyDonationsDocument, d2: RockyDonationsDocument): number => {
    // --- First convert to "native" units ---
    const d1HumanAmt = convertToHumanUnits(parseFloat(d1.amount), d1.token);
    const d2HumanAmt = convertToHumanUnits(parseFloat(d2.amount), d2.token);
    // --- Convert into equivalent USDC amounts ---
    const d1USDCAmt = d1.token === "USDC" ? d1HumanAmt : d1HumanAmt * WETH_USDC_CONVERSION_RATE;
    const d2USDCAmt = d2.token === "USDC" ? d2HumanAmt : d2HumanAmt * WETH_USDC_CONVERSION_RATE;
    return d1USDCAmt > d2USDCAmt ? -1 : 1;
  }

  const loadDonationData = () => {
    if (firebaseDbRef.current != null) {
      getDocs(collection(firebaseDbRef.current, "rocky_donations"))
        .then((result) => {

          // --- Sort by raw data first ---
          const rockyDonationsList: RockyDonationsDocument[] = result.docs.map((doc) => {
            return (doc.data() as RockyDonationsDocument);
          });
          rockyDonationsList.sort(compareDonations);

          // --- To print out a UNIQUE list of all of the people who have donated ---
          const contentList = rockyDonationsList.map((rawDonationEntry) => {