Add statistics page

src/components/Affiliate/index.tsx

@@ -1,10 +1,10 @@
 import { useContext, useState, useEffect } from "react";
-import bonusAndDiscountContractAbi from "../../constants/bonusAndDiscountContractAbi.json";
 import {
   bonusAndDiscountContractsByNetworkId,
   cashbackTokenAddresses,
 } from "../../constants";
 import { Web3ConnecStateContext } from "../WithWeb3Connect";
+import bonusAndDiscountContractAbi from "../../constants/bonusAndDiscountContractAbi.json";
 
 import "./index.css";
 

src/components/Footer/index.css

@@ -3,6 +3,36 @@ footer {
   padding: 2rem 0 1rem;
 }
 
+.footerItems {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+}
+.footerItem {
+  position: relative;
+  padding: 0 10px;
+}
+.footerLink {
+  text-decoration: none;
+  color: var(--link-color);
+}
+.footerLink:hover {
+  color: var(--color-notice);
+}
+.footerItem::after{
+  content: "";
+  position: absolute;
+  right: 0px;
+  bottom: 0;
+  height: 20px;
+  width: 2px;
+  background-color: #fff;
+}
+.footerItem:last-child::after{
+  content: none;
+}
+
 .footerRiskNotice {
   max-width: 44rem;
   margin: 0 auto;

src/components/Footer/index.tsx

@@ -1,14 +1,16 @@
-import GA from 'react-ga';
+import GA from "react-ga";
 import { MdEmail, MdChat } from "react-icons/md";
 import { SiTelegram, SiDiscord } from "react-icons/si";
+import { Link } from "react-router-dom";
 import useUser from "../../hooks/useUser";
-import Referal from '../Referal';
+import Referal from "../Referal";
 
 import "./index.css";
 
 const Footer = () => {
-
-  const { state: { signed, subscribed } } = useUser();
+  const {
+    state: { signed, subscribed },
+  } = useUser();
 
   const links = [
     {
@@ -41,24 +43,50 @@ const Footer = () => {
   return (
     <footer>
       {signed && subscribed && (
-      <div>
-        <Referal/>
-        <p className="footerRiskNotice">
-          Risk notification: Our code is based on top audited sources, but our
-          changes are unaudited from 3rd party auditors. We improve security but a
-          lot of things are out of our control, for example, 3rd party software
-          like WordPress, your server's software, your hosting provider. We have
-          delivered dapps for hundreds of clients which handle tens of thousands
-          of users. For the past 3 years, we have received about 10 incident
-          reports kind of "a user lost funds". Unfortunately, not all of them have
-          been resolved. Ask yourself who other than you can access your server?
-          When was your last time installing security updates? The most secure
-          choice would be our cloud solution (with a "revenue-share" payment
-          model) contact support for more information. For WP standalone versions
-          please use as less plugins as you can and the "Simply Static plugin" and
-          "Wodefence" for security.
-        </p>
-      </div>
+        <div>
+          <Referal />
+          <ul className="footerItems">
+            <li className="footerItem">
+              <Link to="/statistics" className="footerLink">
+                stats
+              </Link>
+            </li>
+            <li className="footerItem">
+              <a
+                href="https://tools.onout.org/sponsor.md"
+                target="_blanck"
+                className="footerLink"
+              >
+                become a sponsor
+              </a>
+            </li>
+            <li className="footerItem">
+              <a
+                href="https://t.me/onoutsupportbot"
+                target="_blanck"
+                className="footerLink"
+              >
+                contact support
+              </a>
+            </li>
+          </ul>
+          <p className="footerRiskNotice">
+            Risk notification: Our code is based on top audited sources, but our
+            changes are unaudited from 3rd party auditors. We improve security
+            but a lot of things are out of our control, for example, 3rd party
+            software like WordPress, your server's software, your hosting
+            provider. We have delivered dapps for hundreds of clients which
+            handle tens of thousands of users. For the past 3 years, we have
+            received about 10 incident reports kind of "a user lost funds".
+            Unfortunately, not all of them have been resolved. Ask yourself who
+            other than you can access your server? When was your last time
+            installing security updates? The most secure choice would be our
+            cloud solution (with a "revenue-share" payment model) contact
+            support for more information. For WP standalone versions please use
+            as less plugins as you can and the "Simply Static plugin" and
+            "Wodefence" for security.
+          </p>
+        </div>
       )}
 
       <ul className="linksList">
@@ -71,7 +99,7 @@ const Footer = () => {
               title={title}
               onClick={() => {
                 GA.event({
-                  category: 'Social links',
+                  category: "Social links",
                   action: gaAction,
                 });
               }}

src/components/Product/index.tsx

@@ -77,32 +77,34 @@ const Product = ({ id }: ProductProps) => {
     });
   };
 
-  const sendFeedback = useCallback(({
-    amount,
-    prefix,
-    status,
-    extra,
-  }: {
-    amount?: number;
-    prefix: string;
-    status: STATUS;
-    extra?: string;
-  }) => {
-    sendMessage({
-      msg: `
+  const sendFeedback = useCallback(
+    ({
+      amount,
+      prefix,
+      status,
+      extra,
+    }: {
+      amount?: number;
+      prefix: string;
+      status: STATUS;
+      extra?: string;
+    }) => {
+      sendMessage({
+        msg: `
         ${prefix} from: ${address};
         usd_value: ${addressUSDValue || "don't have usd_value"}
         Network: ${networkId || "unsupported"};
         Product id: ${id};
         USD cost: ${USDPrice};
         Crypto cost: ${amount || "don't have amount"};
         Date: ${new Date().toISOString()};
-        ${extra ||  ""}
+        ${extra || ""}
       `,
-      status,
-    });
-  }, [address, networkId, addressUSDValue]);
-
+        status,
+      });
+    },
+    [address, networkId, addressUSDValue]
+  );
   const getPaymentParameters = useCallback(async () => {
     if (!PAYMENT_ADDRESS || !USDPrice || !networkId) return;
 
@@ -133,7 +135,7 @@ const Product = ({ id }: ProductProps) => {
     const amount = new BigNumber(finalProductPriceInUSD)
       .div(assetUSDPrice)
       .toNumber();
-
+      
     return {
       provider,
       networkId,
@@ -242,14 +244,17 @@ const Product = ({ id }: ProductProps) => {
     );
   }, [paymentPending, paidFor, signed, isWeb3Loading, account, USDPrice]);
 
-  const promoFormHandle = useCallback((e: any) => {
-    e.preventDefault();
-    payForProduct();
-    GA.event({
-      category: id,
-      action: 'Press on the "Buy" button',
-    });
-  }, [payForProduct]);
+  const promoFormHandle = useCallback(
+    (e: any) => {
+      e.preventDefault();
+      payForProduct();
+      GA.event({
+        category: id,
+        action: 'Press on the "Buy" button',
+      });
+    },
+    [payForProduct]
+  );
 
   return (
     <div className="product">

src/components/Sections/index.tsx

@@ -9,13 +9,14 @@ import Tabs from "../Tabs";
 import Affiliate from "../Affiliate";
 
 import "./index.css";
+import Statistics from "../Statistics";
 
 const Sections = () => {
   const location = useLocation();
 
   const { account } = useContext(Web3ConnecStateContext);
   const { state } = useUser();
-  const { signed, subscribed, view} = state;
+  const { signed, subscribed, view } = state;
 
   if (!signed || !subscribed || account.wrongNetwork) return null;
 
@@ -39,6 +40,7 @@ const Sections = () => {
           element={<Product id={newView} />}
         />
         <Route path={`/affiliate`} element={<Affiliate />} />
+        <Route path={`/statistics`} element={<Statistics />} />
       </Routes>
     </div>
   );

src/components/Statistics/index.css

@@ -0,0 +1,14 @@
+.statistics {
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: 1.4rem;
+  border-radius: 1.2rem;
+  background-color: var(--card-color);
+}
+
+.graphUp {
+  color: greenyellow;
+}
+.graphDown {
+  color: red;
+}