diff --git a/alem.config.json b/alem.config.json
index d18095ca..ad117dc9 100644
--- a/alem.config.json
+++ b/alem.config.json
@@ -23,6 +23,9 @@
}
},
"options": {
- "keepRoute": false
+ "keepRoute": false,
+ "createLoaderWidget": true,
+ "loadingComponentFile": "src/components/SuspenseLoading.tsx",
+ "loadingComponentName": "SuspenseLoading"
}
}
diff --git a/package.json b/package.json
index 4dc79149..96cedf4f 100644
--- a/package.json
+++ b/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",
diff --git a/src/Main.tsx b/src/Main.tsx
index a5c0b53e..cb2c62f1 100644
--- a/src/Main.tsx
+++ b/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 (
-
+ //
+ <>
-
+ >
+ //
);
};
diff --git a/src/components/SuspenseLoading.tsx b/src/components/SuspenseLoading.tsx
new file mode 100644
index 00000000..8afdbcf6
--- /dev/null
+++ b/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 (
+
+
+
+
+ POTLOCK
+
+
+ );
+};
+export default SuspenseLoading;
diff --git a/src/pages/Projects/components/DonationStats/DonationStats.tsx b/src/pages/Projects/components/DonationStats/DonationStats.tsx
index 0e4d4d54..bb9ad538 100644
--- a/src/pages/Projects/components/DonationStats/DonationStats.tsx
+++ b/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(null);
+ const [donations, setDonations] = useState(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 (