Feature / Aptos Wallet Integration

Andriiseer · May 27, 2023 · 79a4b8e · 79a4b8e
1 parent 9f8aa69
commit 79a4b8e
Show file tree

Hide file tree

Showing 68 changed files with 9,660 additions and 13,364 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,12 @@
 # AptoStrike
+
+Revolutionary play and earn space adventure game with NFT planets and DeFi mechanics built on Aptos blockchain.
+
+https://aptostrike.space/
+
+https://aptostrike.space/dashboard
+
+Pages:
+- https://aptostrike.space/leaderboard
+- https://aptostrike.space/waiting-room
+- https://aptostrike.space/last-game-stats
diff --git a/aptostrike/components/BackgroundImage/BackgroundImage.jsx b/aptostrike/components/BackgroundImage/BackgroundImage.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Image from "next/legacy/image";
+import BgImg from "../../public/img/bg.jpg";
+
+const BackgroundImage = () => {
+    return (
+        <div className="bg-image-wrapper">
+            <Image
+                src={BgImg}
+                layout="fill"
+                objectFit="cover"
+                priority
+
+            />
+        </div>
+    );
+};
+
+export default BackgroundImage;
diff --git a/aptostrike/components/Button/Button.js b/aptostrike/components/Button/Button.js
@@ -0,0 +1,43 @@
+import React, { useState, useEffect, useMemo } from "react";
+
+const Button = ({ className, onClick, disabled, loading, label }) => {
+    const [ dotCount, setDotCount ] = useState(1);
+
+    useEffect(() => {
+        const updateDotCount = () => {
+            setDotCount((currentDotCount) => {
+                if (currentDotCount === 3) {
+                    return 1;
+                } else {
+                    return currentDotCount + 1;
+                }
+            });
+        };
+
+        let dotsUpdateInterval;
+
+        if (loading) {
+            dotsUpdateInterval = setInterval(updateDotCount, 500);
+        };
+
+        return () => clearInterval(dotsUpdateInterval);
+    }, [ loading ]);
+
+    const labelToDisplay = useMemo(() => {
+        if (!loading) return label;
+
+        return label + ".".repeat(dotCount);
+    }, [loading, label, dotCount]);
+
+    return (
+        <button
+            className={className}
+            onClick={onClick}
+            disabled={disabled || loading}
+        >
+            {labelToDisplay}
+        </button>
+    );
+};
+
+export default Button;
diff --git a/aptostrike/components/GoogleAnalytics/GoogleAnalytics.jsx b/aptostrike/components/GoogleAnalytics/GoogleAnalytics.jsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import Script from "next/script";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { pageview } from "@lib/gtag";
+import { GA_TRACKING_ID } from "../../constants";
+
+const GoogleAnalytics = () => {
+    const router = useRouter();
+
+    useEffect(() => {
+        const handleRouteChange = (url) => {
+            pageview(url);
+        };
+        router.events.on("routeChangeComplete", handleRouteChange);
+
+        return () => {
+            router.events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [router.events]);
+
+    return (
+        <>
+            <Head>
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `
+                            window.dataLayer = window.dataLayer || [];
+                            function gtag(){dataLayer.push(arguments);}
+                            gtag('js', new Date());
+
+                            gtag('config', '${GA_TRACKING_ID}', {
+                                page_path: window.location.pathname,
+                            });
+                        `,
+                    }}
+                />
+            </Head>
+            {/* Global site tag (gtag.js) - Google Analytics */}
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+            />
+        </>
+    );
+};
+
+export default GoogleAnalytics;
diff --git a/aptostrike/components/Header/Header.jsx b/aptostrike/components/Header/Header.jsx
@@ -1,9 +1,12 @@
+import React from 'react';
 import Link             from 'next/link';
-import Image            from 'next/image';
+import Image            from "next/legacy/image";
 import { useRouter }    from 'next/router';
-
+import useBalance from "@hooks/useBalance";
+import { WalletConnector } from "@aptos-labs/wallet-adapter-mui-design";
 
 export function Header() {
+    const { data: balance = 0 } = useBalance();
     const router = useRouter();
 
     let link = '/leaderboard';
@@ -14,48 +17,37 @@ export function Header() {
         link = "/dashboard"
         linkText = "Back";
         linkIcon = '/img/icon-back.png';
-    }
+    };
 
     return (
         <header className="header container">
             <div className="header__linkBlock">
-                <Image 
-                    className="header__icon" 
-                    src={linkIcon} 
-                    layout="fixed" 
-                    width={21} 
+                <Image
+                    className="header__icon"
+                    src={linkIcon}
+                    layout="fixed"
+                    width={21}
                     height={31}
                     alt=""
                 />
-                <Link href={link}>
-                    <a className="header__link">
-                        {linkText}
-                    </a>
+                <Link href={link} className="header__link" legacyBehavior>
+                    {linkText}
                 </Link>
             </div>
 
             <div className="header__money money">
                 <div className="money__item">
                     <p className="money__name">APT</p>
-                    <p className="money__num">165.52</p>
-                </div>
-                <div className="money__item">
-                    <div className="money__name">LP</div>
-                    <div className="money__num">0</div>
+                    <p className="money__num">
+                        {balance.toFixed(2)}
+                    </p>
                 </div>
             </div>
 
             <div className="header__linkBlock">
-                <Image 
-                    className="header__icon" 
-                    src="/img/icon-log-out.png" 
-                    layout="fixed" 
-                    width={43} 
-                    height={34}
-                    alt=""
-                />
-                <a className="header__link">Connect wallet</a>
+                <WalletConnector />
             </div>
         </header>
-    )
+    );
 }
+
diff --git a/aptostrike/components/Header/Header.scss b/aptostrike/components/Header/Header.scss
@@ -1,7 +1,21 @@
 .header {
-	display: flex;
-	justify-content: space-between;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
 	align-items: center;
+
+	> :first-child {
+		justify-self: start;
+	};
+
+	> :nth-child(2) {
+		justify-self: center;
+	};
+
+	> :last-child {
+		justify-self: end;
+		justify-content: flex-end;
+	};
+
 	padding-top: 20px;
 	padding-bottom: 20px;
 
@@ -10,36 +24,26 @@
 		align-items: center;
 	}
 
+	&__address-text {
+		font-size: 1.375rem;
+	}
+
 	&--hud {
-		> :first-child, > :last-child {
-			flex-grow: 1;
-			flex-basis: 0;
-		}
 		align-items: flex-start;
 		pointer-events: none;
 		position: absolute;
 		inset: 0 0 auto;
 		z-index: 1;
-
-		.ingame-leaderboard-wrapper {
-			display: flex;
-			justify-content: flex-start;
-		};
-
-		.linkBlock-wrapper {
-			display: flex;
-			justify-content: flex-end;
-		};
 	}
 
 	&__linkBlock {
 		display: flex;
+		gap: 0.75rem;
 		pointer-events: all;
 		min-width: 200px;
 	}
 
 	&__link {
-		margin-inline-start: 12px;
 		text-decoration: underline;
 		cursor: pointer;
 	}
@@ -104,7 +108,13 @@
 
 @media (max-width: 768px) { //------------------------------------------------------------------------------------ 768
 	.header {
-		flex-wrap: wrap;
+		grid-template-columns: 1fr;
+		gap: 1rem;
+
+		> :first-child, > :nth-child(2), > :last-child {
+			justify-self: center;
+		};
+
 		padding-top: 15px;
     	padding-bottom: 15px;
 
@@ -118,4 +128,4 @@
 			margin-top: 20px;
 		}
 	}
-}
+}
diff --git a/aptostrike/components/Message/Message.jsx b/aptostrike/components/Message/Message.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+
+export function Message({ text, shouldDisplayProgress }) {
+    return (
+        <div className="message">
+            {shouldDisplayProgress && (
+                <CircularProgress size="1em" sx={{ color: "#9D7C14" }} />
+            )}
+            <span>{text}</span>
+        </div>
+    );
+}
diff --git a/aptostrike/components/Message/Message.scss b/aptostrike/components/Message/Message.scss
@@ -0,0 +1,7 @@
+.message {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.375rem;
+	font-size: clamp(1rem, 1.2vw, 1.5rem);
+};
diff --git a/aptostrike/components/PayMethod/PayMethod.jsx b/aptostrike/components/PayMethod/PayMethod.jsx
@@ -3,15 +3,13 @@ export function PayMethod() {
         <div className="payMethod">
             <div className="payMethod__tabs">
                 <div className="payMethod__tabName payMethod__tabName--active">APT</div>
-                <div className="payMethod__tabName">LP</div>
             </div>
             <div className="payMethod__content">
                 <div className="payMethod__priceRow">
-                    <div className="payMethod__price">0,10</div>
+                    <div className="payMethod__price"></div>
                     <div className="payMethod__price payMethod__price--active">1</div>
-                    <div className="payMethod__price">10</div>
+                    <div className="payMethod__price"></div>
                 </div>
-                <div className="payMethod__text">Possible winnings:  <b>100 LP</b></div>
             </div>
         </div>
     )

diff --git a/aptostrike/components/PayMethod/PayMethod.scss b/aptostrike/components/PayMethod/PayMethod.scss
@@ -19,7 +19,7 @@
 		color: #9D7C14;
 		font-size: 20px;
 		line-height: 133%;
-		cursor: pointer;
+		cursor: default;
 
 		&--active {
 			background-color: rgba(157, 124, 20, 0.85);
@@ -33,20 +33,19 @@
 		&:not(:first-child) {
 			clip-path: polygon(100% 100%, 40px 100%, 0 0, 120px 0px);
 			transform: translateX(-40px);
-			cursor: no-drop; // Temporary
 		}
 	}
 
 	&__content {
-		padding: 50px 35px 35px;
+		padding: 2.5rem;
 		background: #27254950;
 	}
 
 	&__priceRow {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		margin-bottom: 35px;
+		// margin-bottom: 35px;
 	}
 
 	&__price {