adjustments for cd - staging

alem.config.json

@@ -23,6 +23,9 @@
     }
   },
   "options": {
-    "keepRoute": false
+    "keepRoute": false,
+    "createLoaderWidget": true,
+    "loadingComponentFile": "src/components/SuspenseLoading.tsx",
+    "loadingComponentName": "SuspenseLoading"
   }
 }

package.json

@@ -11,7 +11,7 @@
     "deploy:testnet": "npm run build; alem deploy --network testnet"
   },
   "dependencies": {
-    "alem": "1.0.0-beta.27"
+    "alem": "1.0.0-beta.28"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

src/Main.tsx

@@ -1,17 +1,19 @@
 import { ModulesProvider } from "alem";
 import Nav from "./components/Nav/Nav";
 import Routes from "./routes/Routes";
-import DonationsInfoProvider from "./contexts/DonationsInfoProvider";
+// import DonationsInfoProvider from "./contexts/DonationsInfoProvider";
 
 const Main = () => {
   return (
-    <DonationsInfoProvider>
+    // <DonationsInfoProvider>
+    <>
       <ModulesProvider />
       <Nav />
       <div className="app-content">
         <Routes />
       </div>
-    </DonationsInfoProvider>
+    </>
+    // </DonationsInfoProvider>
   );
 };
 

src/components/SuspenseLoading.tsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+/**
+ * Suspense Loading to be used as a default Loading for the main Widget
+ * @returns
+ */
+const SuspenseLoading = () => {
+  const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 40%;
+    width: 100%;
+  `;
+
+  const Logo = styled.div`
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 7px;
+    align-items: baseline;
+    text-align: center;
+    color: #2e2e2e;
+    font-size: 23.95px;
+    font-weight: 700;
+    line-height: 23.95px;
+    word-wrap: break-word;
+    text-decoration: none;
+    @media screen and (max-width: 480px) {
+      font-size: 20px;
+    }
+    :hover {
+      text-decoration: none;
+    }
+    img {
+      height: 1em;
+    }
+  `;
+
+  return (
+    <Container>
+      <div className="spinner-border text-secondary" role="status" />
+      <Logo>
+        <img
+          src="https://ipfs.near.social/ipfs/bafkreiafms2jag3gjbypfceafz2uvs66o25qc7m6u6hkxfyrzfoeyvj7ru"
+          alt="logo"
+        />
+        POTLOCK
+      </Logo>
+    </Container>
+  );
+};
+export default SuspenseLoading;

src/pages/Projects/components/DonationStats/DonationStats.tsx

@@ -1,8 +1,25 @@
+import { useEffect, useState } from "alem";
+import DonateSDK from "@app/SDK/donate";
 import { Stats, StatsSubTitle, StatsTitle } from "./styles";
-import { useDonationsInfo } from "@app/hooks/useDonationsInfo";
+import yoctosToUsd from "@app/utils/yoctosToUsd";
+// import { useDonationsInfo } from "@app/hooks/useDonationsInfo";
 
 const DonationStats = () => {
-  const { donated, donations } = useDonationsInfo();
+  const [donated, setDonated] = useState<string | null>(null);
+  const [donations, setDonations] = useState<string | null>(null);
+
+  const data = DonateSDK.getConfig();
+  useEffect(() => {
+    if (!donated) {
+      const lastDonationAmount = data.net_donations_amount ? yoctosToUsd(data.net_donations_amount) : null;
+      const totalDonations = data.total_donations_count;
+
+      setDonated(lastDonationAmount);
+      setDonations(totalDonations);
+    }
+  }, [data, donated]);
+
+  // const { donated, donations } = useDonationsInfo();
 
   return (
     <Stats>