From 3772d81de44940f78f341350b30ddc4eff1dcca1 Mon Sep 17 00:00:00 2001 From: CloudCludfore Date: Fri, 21 Jun 2024 00:45:57 +0700 Subject: [PATCH 1/4] commit fix --- src/app/build/layout.tsx | 2 ++ src/app/get-aura/layout.tsx | 12 +++++++-- src/app/get-aura/page.tsx | 45 +++++++++++++++++++++++++------- src/app/introduction/layout.tsx | 2 ++ src/app/layout.tsx | 11 +++++--- src/app/page.tsx | 2 ++ src/app/tech-stack/layout.tsx | 2 ++ src/sections/tutorials/index.tsx | 2 +- 8 files changed, 62 insertions(+), 16 deletions(-) diff --git a/src/app/build/layout.tsx b/src/app/build/layout.tsx index 8f14a2a..a276c89 100644 --- a/src/app/build/layout.tsx +++ b/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 (
{children} +
); diff --git a/src/app/get-aura/layout.tsx b/src/app/get-aura/layout.tsx index b529d76..5a9b263 100644 --- a/src/app/get-aura/layout.tsx +++ b/src/app/get-aura/layout.tsx @@ -4,6 +4,7 @@ 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"; // export const metadata: Metadata = { // title: "Get Aura with Aura Network", @@ -20,10 +21,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 ( -
+
diff --git a/src/app/get-aura/page.tsx b/src/app/get-aura/page.tsx index ac04271..5bf6d03 100644 --- a/src/app/get-aura/page.tsx +++ b/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 (
{!_account?.address ? (
-
More ways to get AURA
+
+ More ways to get AURA +
- +
Read article gate.io @@ -44,9 +53,15 @@ function GetAura() {
- withdrawIcon + withdrawIcon +
+
+ Withdraw AURA from CEXes
-
Withdraw AURA from CEXes
Go gate.io @@ -56,9 +71,15 @@ function GetAura() {
- depositIcon + depositIcon +
+
+ Deposit AURA to CEXes
-
Deposit AURA to CEXes
Go gate.io @@ -67,9 +88,15 @@ function GetAura() {
-
More ways to get AURA
+
+ More ways to get AURA +
- +
Read article gate.io diff --git a/src/app/introduction/layout.tsx b/src/app/introduction/layout.tsx index 038e2b3..5cfcc90 100644 --- a/src/app/introduction/layout.tsx +++ b/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 (
{children} +
); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8041aa1..ae3d830 100644 --- a/src/app/layout.tsx +++ b/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({
{children} -
+
); } diff --git a/src/app/tech-stack/layout.tsx b/src/app/tech-stack/layout.tsx index 05cac77..3629926 100644 --- a/src/app/tech-stack/layout.tsx +++ b/src/app/tech-stack/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 (
{children} +
); diff --git a/src/sections/tutorials/index.tsx b/src/sections/tutorials/index.tsx index 5ea4d4f..651aa33 100644 --- a/src/sections/tutorials/index.tsx +++ b/src/sections/tutorials/index.tsx @@ -6,7 +6,7 @@ import BgImage from "../../components/Image/BgImage"; function Tutorials() { return ( -
+
img_gradientLogo From b99302b49f4d0785b2ea894711e17e12a0633331 Mon Sep 17 00:00:00 2001 From: "DESKTOP-APEQLA2\\NOSEL" Date: Fri, 21 Jun 2024 09:54:04 +0700 Subject: [PATCH 2/4] update --- src/app/get-aura/deposit.tsx | 29 ++++----------------------- src/app/get-aura/layout.tsx | 13 ++++++++++++ src/app/get-aura/page.tsx | 4 ++-- src/app/get-aura/wallet-connect.tsx | 31 +++++++++++++++++++++++------ src/app/get-aura/withdraw.tsx | 2 +- 5 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/app/get-aura/deposit.tsx b/src/app/get-aura/deposit.tsx index b3187cb..29c4398 100644 --- a/src/app/get-aura/deposit.tsx +++ b/src/app/get-aura/deposit.tsx @@ -30,7 +30,7 @@ interface TableItemProps { } function Deposit() { - const [tutType, setTutType] = useState(""); + const [tutType, setTutType] = useState("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: "0xaf41083482dc220518f95993b48e8b012e782d01", @@ -149,7 +140,7 @@ function Deposit() {
- Let’s deposit some AURA to your desired CEX below:: + Let’s deposit some AURA to your desired CEX below:
)} -
diff --git a/src/app/get-aura/layout.tsx b/src/app/get-aura/layout.tsx index 5a9b263..faaff9f 100644 --- a/src/app/get-aura/layout.tsx +++ b/src/app/get-aura/layout.tsx @@ -5,6 +5,7 @@ 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", @@ -40,6 +41,18 @@ export default function Layout({ +
); } diff --git a/src/app/get-aura/page.tsx b/src/app/get-aura/page.tsx index 5bf6d03..7d5569b 100644 --- a/src/app/get-aura/page.tsx +++ b/src/app/get-aura/page.tsx @@ -60,7 +60,7 @@ function GetAura() { />
- Withdraw AURA from CEXes + Withdraw AURA from exchanges
Go @@ -78,7 +78,7 @@ function GetAura() { />
- Deposit AURA to CEXes + Deposit AURA from exchanges
Go diff --git a/src/app/get-aura/wallet-connect.tsx b/src/app/get-aura/wallet-connect.tsx index 74fb00c..0808ab4 100644 --- a/src/app/get-aura/wallet-connect.tsx +++ b/src/app/get-aura/wallet-connect.tsx @@ -1,12 +1,23 @@ 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.success("Disconnected."); + useAccountEffect({ + onConnect(data) { + toastConnected(); + }, + onDisconnect() { + toastDisconnect(); + }, + }); return (
@@ -14,12 +25,18 @@ function WalletConnectEVM() {
{!_account?.address ? (
-

Your Journey Start Here

-
But first, let’s get you some AURA
+

+ Your Journey Start Here +

+
+ But first, let’s get you some AURA +
) : (
-

Welcome

+

+ Welcome +

{_account?.address}
{ if (!account) { return ( - ); @@ -49,7 +69,6 @@ function WalletConnectEVM() { }}
-
diff --git a/src/app/get-aura/withdraw.tsx b/src/app/get-aura/withdraw.tsx index 7d8d09b..5826494 100644 --- a/src/app/get-aura/withdraw.tsx +++ b/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(""); + const [tutType, setTutType] = useState("gateio"); const [cosmosAcc, setCosmosAcc] = useState(); const [copyAuraAddress, setCopyAuraAddress] = useState(false); const cutText = (value: string) => { From 2d3c008c76075100a294c9d4a15bdaae3e506b70 Mon Sep 17 00:00:00 2001 From: "DESKTOP-APEQLA2\\NOSEL" Date: Fri, 21 Jun 2024 09:55:01 +0700 Subject: [PATCH 3/4] ud --- src/app/get-aura/wallet-connect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/get-aura/wallet-connect.tsx b/src/app/get-aura/wallet-connect.tsx index 0808ab4..b29d8f7 100644 --- a/src/app/get-aura/wallet-connect.tsx +++ b/src/app/get-aura/wallet-connect.tsx @@ -9,7 +9,7 @@ function WalletConnectEVM() { const _account = useAccount(); const { disconnect } = useDisconnect(); const toastConnected = () => toast.success("Connected."); - const toastDisconnect = () => toast.success("Disconnected."); + const toastDisconnect = () => toast.error("Disconnected."); useAccountEffect({ onConnect(data) { toastConnected(); From fdb2db17fb47cb2f07e5f499a279a607d4b0be9f Mon Sep 17 00:00:00 2001 From: CloudCludfore Date: Fri, 21 Jun 2024 09:55:48 +0700 Subject: [PATCH 4/4] commit thousand separator --- src/app/get-aura/mobile-table.tsx | 7 ++++--- src/app/get-aura/table-item.tsx | 3 ++- src/app/utils/numbers.ts | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/app/utils/numbers.ts diff --git a/src/app/get-aura/mobile-table.tsx b/src/app/get-aura/mobile-table.tsx index d5f10f1..2ca9a46 100644 --- a/src/app/get-aura/mobile-table.tsx +++ b/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 = ({ tableItem }) => {
- +
{dayjs(tableItem.txTime).format("HH:mm:ss DD/MM/YYYY")}
@@ -46,7 +47,7 @@ const MobileTableItem: React.FC = ({ tableItem }) => { setExpand(!expand); }} > - +
{expand && ( @@ -54,7 +55,7 @@ const MobileTableItem: React.FC = ({ tableItem }) => {
Amount
-
{formatUnits(BigInt(tableItem.amount), 18)} AURA
+
{formatNumber(formatUnits(BigInt(tableItem?.amount), 18))} AURA
Cosmos TX hash
diff --git a/src/app/get-aura/table-item.tsx b/src/app/get-aura/table-item.tsx index 07761e5..ae6bbe1 100644 --- a/src/app/get-aura/table-item.tsx +++ b/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 = ({ tableItem }) => {
-
{formatUnits(BigInt(tableItem?.amount), 18)} AURA
+
{formatNumber(formatUnits(BigInt(tableItem?.amount), 18))} AURA
{tableItem?.status}
diff --git a/src/app/utils/numbers.ts b/src/app/utils/numbers.ts new file mode 100644 index 0000000..5521ce2 --- /dev/null +++ b/src/app/utils/numbers.ts @@ -0,0 +1,15 @@ +function formatNumber(amount: number | null | undefined | string, maximumFractionDigits: number = 2, compact?: boolean) { + const { format } = new Intl.NumberFormat("en-US", { + maximumFractionDigits: maximumFractionDigits, + notation: compact ? "compact" : "standard", + }); + if (amount === null || amount === undefined || amount === 0 || amount === "0") { + return "-"; + } + if (Number(amount) >= 1000000000) { + return "1B"; + } + return format(+amount); +} + +export { formatNumber }