Merge branch 'develop'

src/app/build/layout.tsx

@@ -1,3 +1,4 @@
+import Tutorials from "@/sections/tutorials";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -13,6 +14,7 @@ export default function Layout({
     return (
         <div className="bg-[url('../assets/images/img_bg_mask_mb.png')] lg:bg-[url('../assets/images/img_bg_universe.png')] lg:bg-cover bg-no-repeat">
             {children}
+            <Tutorials />
         </div>
 
     );

src/app/get-aura/deposit.tsx

@@ -30,7 +30,7 @@ interface TableItemProps {
 }
 
 function Deposit() {
-  const [tutType, setTutType] = useState<string>("");
+  const [tutType, setTutType] = useState<string>("gateio");
   const {
     sendTransaction,
     data: hash,
@@ -60,20 +60,11 @@ function Deposit() {
 
   const addMaxAmount = () => {
     if (_amount && Number(_amount) && Number(_amount) > 0) {
-      setValue("amount", Math.round(Number(_amount)));
+      setValue("amount", Math.floor(Number(_amount)));
     }
   };
   const notify = () =>
-    toast.success("Transaction confirmed.", {
-      position: "top-right",
-      autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-      theme: "dark",
-    });
+    toast.success("Transaction confirmed.");
   const onSubmit = async (data: any) => {
     return sendTransaction({
       to: "0xdc38aea1ed6a9c224e622e27986645d3cc4f609d",
@@ -149,7 +140,7 @@ function Deposit() {
     <div className="main-container sub-container flex flex-col">
       <div className="flex flex-col">
         <div className="introduce-title">
-          Let’s deposit some AURA to your desired CEX below::
+          Let’s deposit some AURA to your desired CEX below:
         </div>
         <div className="flex gap-8 items-center justify-center mt-6 partner">
           <div
@@ -315,18 +306,6 @@ function Deposit() {
                       {(error as BaseError).shortMessage || error.message}
                     </div>
                   )}
-                  <ToastContainer
-                    position="top-right"
-                    autoClose={5000}
-                    hideProgressBar={false}
-                    newestOnTop={false}
-                    closeOnClick
-                    rtl={false}
-                    pauseOnFocusLoss
-                    draggable
-                    pauseOnHover
-                    theme="dark"
-                  ></ToastContainer>
                 </div>
               </form>
               <div className="text-tutorial">

src/app/get-aura/layout.tsx

@@ -4,6 +4,8 @@ import { RainbowKitProvider, getDefaultConfig } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import WalletConnectEVM from "./wallet-connect";
+import { useEffect } from "react";
+import { ToastContainer } from "react-toastify";
 
 // export const metadata: Metadata = {
 //   title: "Get Aura with Aura Network",
@@ -20,10 +22,17 @@ export default function Layout({
     appName: "Aura Network",
     projectId: "86b13026f2930979d852f7dac07666b1",
     chains: [aura],
-    ssr: true, // If your dApp uses server side rendering (SSR)
+    ssr: false, // If your dApp uses server side rendering (SSR)
   });
+  useEffect(() => {
+    const tutorialElement: any = document.querySelector(".tutorial");
+    if (tutorialElement) {
+      tutorialElement.style.display = "none";
+    }
+  }, []);
+
   return (
-    <div className="bg-[#000]">
+    <div className="bg-[#000] pb-24">
       <WagmiProvider config={configWallet}>
         <QueryClientProvider client={queryClient}>
           <RainbowKitProvider>
@@ -32,6 +41,18 @@ export default function Layout({
           </RainbowKitProvider>
         </QueryClientProvider>
       </WagmiProvider>
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      ></ToastContainer>
     </div>
   );
 }

src/app/get-aura/mobile-table.tsx

@@ -6,6 +6,7 @@ import "./table-mobile.css";
 import carretUp from "@/assets/icons/ic_carret_up.svg";
 import clock from "@/assets/icons/ic_clock.svg";
 import Image from "next/image";
+import { formatNumber } from "../utils/numbers";
 
 interface MobileTableItemProps {
   txTime: string;
@@ -32,7 +33,7 @@ const MobileTableItem: React.FC<props> = ({ tableItem }) => {
             </div>
             <div className="time-and-message">
               <div className="time">
-              <Image src={clock} alt="" height={14} />
+                <Image src={clock} alt="" height={14} />
                 <div className="cell-text2">{dayjs(tableItem.txTime).format("HH:mm:ss DD/MM/YYYY")}</div>
               </div>
             </div>
@@ -46,15 +47,15 @@ const MobileTableItem: React.FC<props> = ({ tableItem }) => {
               setExpand(!expand);
             }}
           >
-            <Image src={carretUp} className={expand ? 'expanded': ''} alt="" height={16} />
+            <Image src={carretUp} className={expand ? "expanded" : ""} alt="" height={16} />
           </div>
         </div>
         {expand && (
           <div className="flex flex-col w-full gap-2">
             <div className="line-18"></div>
             <div className="frame-29708">
               <div className="amount">Amount</div>
-              <div className="_200-aura">{formatUnits(BigInt(tableItem.amount), 18)} AURA</div>
+              <div className="_200-aura">{formatNumber(formatUnits(BigInt(tableItem?.amount), 18))} AURA</div>
             </div>
             <div className="frame-29707">
               <div className="cosmos-tx-hash">Cosmos TX hash</div>

src/app/get-aura/page.tsx

@@ -9,7 +9,7 @@ import depositIcon from "@/assets/images/deposit.svg";
 import copyLogo from "@/assets/images/img_copy_logo.svg";
 import arrowRight from "@/assets/images/img_arrow_right.svg";
 import arrowRight_orange from "@/assets/images/arrowRight_orange.svg";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { PAGE_ROUTE } from "@/common";
 
@@ -23,13 +23,22 @@ const configWallet = getDefaultConfig({
 
 function GetAura() {
   const _account = useAccount();
+  useEffect(() => {
+    window.scroll(0, 0);
+  }, [_account]);
   return (
     <div className="flex flex-col items-center gap-16">
       {!_account?.address ? (
         <div className="get-more-aura-box">
-          <div className="text-white self-stretch text-center lg:text-center font-ppmori-semibold description">More ways to get AURA</div>
+          <div className="text-white self-stretch text-center lg:text-center font-ppmori-semibold description">
+            More ways to get AURA
+          </div>
 
-          <a href="https://insight.aura.network/full-tutorial-how-to-buy-aura/" target="_blank" className="button-border-gradient bg-brand-gradient">
+          <a
+            href="https://insight.aura.network/full-tutorial-how-to-buy-aura/"
+            target="_blank"
+            className="button-border-gradient bg-brand-gradient"
+          >
             <div className="button-border-gradient-inside">
               Read article
               <Image src={arrowRight} alt="gate.io" height={20} />
@@ -44,9 +53,15 @@ function GetAura() {
               <Link href={PAGE_ROUTE.WITHDRAW_AURA}>
                 <div className="card-tab-wrapper">
                   <div className="mb-12">
-                    <Image src={withdrawIcon} alt="withdrawIcon" height={withdrawIcon?.height} />
+                    <Image
+                      src={withdrawIcon}
+                      alt="withdrawIcon"
+                      height={withdrawIcon?.height}
+                    />
+                  </div>
+                  <div className="text-white self-stretch font-ppmori-semibold description lg:text-[32px] mb-8">
+                    Withdraw AURA from exchanges
                   </div>
-                  <div className="text-white self-stretch font-ppmori-semibold description lg:text-[32px] mb-8">Withdraw AURA from CEXes</div>
                   <div className="flex items-center gap-2 cursor-pointer">
                     <span className="orange">Go</span>
                     <Image src={arrowRight_orange} alt="gate.io" height={20} />
@@ -56,9 +71,15 @@ function GetAura() {
               <Link href={PAGE_ROUTE.DEPOSIT_AURA}>
                 <div className="card-tab-wrapper">
                   <div className="mb-12">
-                    <Image src={depositIcon} alt="depositIcon" height={depositIcon?.height} />
+                    <Image
+                      src={depositIcon}
+                      alt="depositIcon"
+                      height={depositIcon?.height}
+                    />
+                  </div>
+                  <div className="text-white self-stretch font-ppmori-semibold description lg:text-[32px] mb-8">
+                    Deposit AURA from exchanges
                   </div>
-                  <div className="text-white self-stretch font-ppmori-semibold description lg:text-[32px] mb-8">Deposit AURA to CEXes</div>
                   <div className="flex items-center gap-2 cursor-pointer">
                     <span className="orange">Go</span>
                     <Image src={arrowRight_orange} alt="gate.io" height={20} />
@@ -67,9 +88,15 @@ function GetAura() {
               </Link>
             </div>
             <div className="get-more-aura-box">
-              <div className="text-white self-stretch text-center lg:text-center font-ppmori-semibold description">More ways to get AURA</div>
+              <div className="text-white self-stretch text-center lg:text-center font-ppmori-semibold description">
+                More ways to get AURA
+              </div>
 
-              <a href="https://insight.aura.network/full-tutorial-how-to-buy-aura/" target="_blank" className="button-border-gradient bg-brand-gradient">
+              <a
+                href="https://insight.aura.network/full-tutorial-how-to-buy-aura/"
+                target="_blank"
+                className="button-border-gradient bg-brand-gradient"
+              >
                 <div className="button-border-gradient-inside">
                   Read article
                   <Image src={arrowRight} alt="gate.io" height={20} />

src/app/get-aura/table-item.tsx

@@ -2,6 +2,7 @@ import Address from "@/components/address";
 import dayjs from "dayjs";
 import React from "react";
 import { formatUnits } from "viem";
+import { formatNumber } from "../utils/numbers";
 
 interface TableItemProps {
   txTime: string;
@@ -33,7 +34,7 @@ const TableItem: React.FC<props> = ({ tableItem }) => {
           <Address address={tableItem?.depAddress} link={true} ellipsis={true} />
         </div>
         <div className="frame-561">
-          <div className="_20-aura">{formatUnits(BigInt(tableItem?.amount), 18)} AURA</div>
+          <div className="_20-aura">{formatNumber(formatUnits(BigInt(tableItem?.amount), 18))} AURA</div>
         </div>
         <div className="frame-572">
           <div className={tableItem?.status?.toLowerCase()}>{tableItem?.status}</div>

src/app/get-aura/wallet-connect.tsx

@@ -1,25 +1,42 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { useAccount, useDisconnect } from "wagmi";
+import { useAccount, useAccountEffect, useDisconnect } from "wagmi";
 import copyLogo from "@/assets/images/img_copy_logo.svg";
 import Image from "next/image";
 import { Tooltip } from "react-tooltip";
 import "./style.css";
+import { toast } from "react-toastify";
 function WalletConnectEVM() {
   const _account = useAccount();
   const { disconnect } = useDisconnect();
+  const toastConnected = () => toast.success("Connected.");
+  const toastDisconnect = () => toast.error("Disconnected.");
+  useAccountEffect({
+    onConnect(data) {
+      toastConnected();
+    },
+    onDisconnect() {
+      toastDisconnect();
+    },
+  });
   return (
     <div className="mb-[80px]">
       <div className="main-container">
         <div className="flex flex-col items-center gap-6 lg:gap-16 mt-[14px]">
           <div className="xl:max-w-[867px] flex flex-col gap-10 px-2 items-center">
             {!_account?.address ? (
               <div className="flex flex-col">
-                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[48px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">Your Journey Start Here</h1>
-                <div className="text-medium-gray text-center text-xl lg:text-[20px] font-normal leading-8 max-w-[717px]">But first, let’s get you some AURA</div>
+                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[48px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">
+                  Your Journey Start Here
+                </h1>
+                <div className="text-medium-gray text-center text-xl lg:text-[20px] font-normal leading-8 max-w-[717px]">
+                  But first, let’s get you some AURA
+                </div>
               </div>
             ) : (
               <div className="flex flex-col">
-                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[80px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">Welcome</h1>
+                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[80px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">
+                  Welcome
+                </h1>
                 <div className="flex gap-8 items-center justify-center">
                   <div className="address">{_account?.address}</div>
                   <Image
@@ -41,15 +58,17 @@ function WalletConnectEVM() {
               {({ account, openConnectModal }) => {
                 if (!account) {
                   return (
-                    <button onClick={openConnectModal} className={`w-fit rounded-full bg-brand-gradient hover:text-[#FD9552] hover:bg-dark-charcoal hover:bg-none hover:border hover:border-[#262320] py-4 px-8 font-semibold text-black text-lg leading-normal h-[54px] flex items-center`}>
+                    <button
+                      onClick={openConnectModal}
+                      className={`w-fit rounded-full bg-brand-gradient hover:text-[#FD9552] hover:bg-dark-charcoal hover:bg-none hover:border hover:border-[#262320] py-4 px-8 font-semibold text-black text-lg leading-normal h-[54px] flex items-center`}
+                    >
                       Connect wallet
                     </button>
                   );
                 }
               }}
             </ConnectButton.Custom>
           </div>
-
         </div>
       </div>
     </div>

src/app/get-aura/withdraw.tsx

@@ -16,7 +16,7 @@ import { Tooltip } from "react-tooltip";
 //@ts-ignore
 import { stripHexPrefix } from "crypto-addr-codec";
 function Withdraw() {
-  const [tutType, setTutType] = useState<string>("");
+  const [tutType, setTutType] = useState<string>("gateio");
   const [cosmosAcc, setCosmosAcc] = useState<string>();
   const [copyAuraAddress, setCopyAuraAddress] = useState<boolean>(false);
   const cutText = (value: string) => {

src/app/introduction/layout.tsx

@@ -1,3 +1,4 @@
+import Tutorials from "@/sections/tutorials";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -13,6 +14,7 @@ export default function Layout({
     return (
         <div className="bg-[#000]">
             {children}
+            <Tutorials />
         </div>
     );
 }

src/app/layout.tsx

@@ -6,14 +6,18 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import Tutorials from "../sections/tutorials";
 import "./globals.css";
-import '@rainbow-me/rainbowkit/styles.css';
+import "@rainbow-me/rainbowkit/styles.css";
 
-const ppmori = localFont({ src: "./../assets/fonts/PPMori-SemiBold.otf", variable: "--font-ppmori-semibold" });
+const ppmori = localFont({
+  src: "./../assets/fonts/PPMori-SemiBold.otf",
+  variable: "--font-ppmori-semibold",
+});
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Aura Network - The Layer 1 for emerging countries",
-  description: "Aura Network is the Layer 1 for emerging countries, providing public infrastructure through modular tech stacks. Build and drive Blockchain mass adoption.",
+  description:
+    "Aura Network is the Layer 1 for emerging countries, providing public infrastructure through modular tech stacks. Build and drive Blockchain mass adoption.",
   openGraph: {
     images: "https://aura.network/img_thumb.png",
   },
@@ -42,7 +46,6 @@ export default function RootLayout({
           <input className="nav-input hidden" type="checkbox" id="nav-input" />
           <Header />
           {children}
-          <Tutorials />
           <Footer />
           <label htmlFor="nav-input" className="nav-overlay">
             {" "}

src/app/page.tsx

@@ -4,6 +4,7 @@ import Ecosystem from "../sections/ecosystem";
 import Parters from "../sections/partners";
 import Statistics from "../sections/statistics";
 import dynamic from "next/dynamic";
+import Tutorials from "@/sections/tutorials";
 const Blogs = dynamic(() => import("../sections/blogs"));
 
 export default function Home() {
@@ -21,6 +22,7 @@ export default function Home() {
           </div>
         </div>
       </div>
+      <Tutorials />
     </div>
   );
 }