Merge pull request #48 from xai-foundation/develop

Develop
xai-foundation · Mar 1, 2024 · b8d0f1d · b8d0f1d
2 parents e92d8bb + fb08883
commit b8d0f1d
Show file tree

Hide file tree

Showing 34 changed files with 1,220 additions and 135 deletions.
diff --git a/apps/web-staking/next.config.mjs b/apps/web-staking/next.config.mjs
@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export",
   images: { unoptimized: true },
 };
 

diff --git a/apps/web-staking/src/app/components/buttons/ButtonsComponent.tsx b/apps/web-staking/src/app/components/buttons/ButtonsComponent.tsx
@@ -63,7 +63,7 @@ export const ConnectButton = ({
       className={
         variant === "overview"
           ? "bg-[#F30919] lg:w-[165px] sm:w-[308px] h-[50px] text-[#EEEEEE] px-[20px] py-[18px] rounded-[8px] hover:bg-[#da1b28] ease-in duration-200"
-          : `bg-[#F30919] w-[165px] text-[#EEEEEE] px-[17px] py-[10px] rounded-[8px] hover:bg-[#da1b28] ease-in duration-200 ${
+          : `bg-[#F30919] w-[115px] md:w-[165px] text-[#EEEEEE] px-[17px] py-[10px] rounded-[8px] hover:bg-[#da1b28] ease-in duration-200 ${
               isFullWidth ? "w-full" : ""
             }`
       }

diff --git a/apps/web-staking/src/app/components/icons/IconsComponent.tsx b/apps/web-staking/src/app/components/icons/IconsComponent.tsx
@@ -177,4 +177,160 @@ export function InfoMark({
       />
     </svg>
   );
-}
+}
+
+export function BronzeTriangle({
+  width = 16,
+  height = 13.5,
+}: {
+  width?: number;
+  height?: number;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 16 13.518"
+    >
+      <path
+        id="Path_3505"
+        data-name="Path 3505"
+        d="M192.719,5.162l3.657,6.18h-7.314l3.657-6.18m0-4.742-8,13.518h16l-8-13.518h0Z"
+        transform="translate(-184.72 -0.42)"
+        fill="#c36522"
+      />
+    </svg>
+  );
+}
+
+export function SilverTriangle({
+  width = 16,
+  height = 13.5,
+}: {
+  width?: number;
+  height?: number;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 16 13.518"
+    >
+      <path
+        id="Path_3508"
+        data-name="Path 3508"
+        d="M192.719,5.162l3.657,6.18h-7.314l3.657-6.18m0-4.742-8,13.518h16l-8-13.518h0Z"
+        transform="translate(-184.72 -0.42)"
+        fill="#bbb"
+      />
+    </svg>
+  );
+}
+
+export function GoldTriangle({
+  width = 16,
+  height = 13.5,
+}: {
+  width?: number;
+  height?: number;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 16 13.518"
+    >
+      <path
+        id="Path_3509"
+        data-name="Path 3509"
+        d="M192.719,5.162l3.657,6.18h-7.314l3.657-6.18m0-4.742-8,13.518h16l-8-13.518h0Z"
+        transform="translate(-184.72 -0.42)"
+        fill="#ffba18"
+      />
+    </svg>
+  );
+}
+
+export function PlatinumTriangle({
+  width = 16,
+  height = 13.5,
+}: {
+  width?: number;
+  height?: number;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width={width}
+      height={height}
+      viewBox="0 0 16 13.518"
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient1"
+          x1="0.5"
+          y1="1.127"
+          x2="0.5"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stopColor="#5d6874" />
+          <stop offset="1" stopColor="#e3e3e3" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Path_3510"
+        data-name="Path 3510"
+        d="M192.719,5.162l3.657,6.18h-7.314l3.657-6.18m0-4.742-8,13.518h16l-8-13.518h0Z"
+        transform="translate(-184.72 -0.42)"
+        fill="url(#linear-gradient1)"
+      />
+    </svg>
+  );
+}
+
+export function DiamondTriangle({
+  width = 16,
+  height = 13.5,
+}: {
+  width?: number;
+  height?: number;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width={width}
+      height={height}
+      viewBox="0 0 16 13.518"
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient2"
+          x1="0.5"
+          y1="1.127"
+          x2="0.5"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stopColor="#99aaf8" />
+          <stop offset="1" stopColor="#8dfdf9" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Path_3511"
+        data-name="Path 3511"
+        d="M192.719,5.162l3.657,6.18h-7.314l3.657-6.18m0-4.742-8,13.518h16l-8-13.518h0Z"
+        transform="translate(-184.72 -0.42)"
+        fill="url(#linear-gradient2)"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web-staking/src/app/components/input/InputComponent.tsx b/apps/web-staking/src/app/components/input/InputComponent.tsx
@@ -24,20 +24,20 @@ export const CustomInput = ({
   errorMessage,
 }: CustomInputProps) => {
 
-  const isNumber = type === 'number';
-  const onKeyDown = useCallback((event: KeyboardEvent) => {
-      const ignoredKeys = [8, 40, 38, 39, 37]
-      if ((ignoredKeys.includes(event.keyCode) || event.shiftKey || event.ctrlKey)) return;
-      if (isNumber && isNaN(Number(event.key))) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    }, [isNumber]);
+  // const isNumber = type === 'number';
+  // const onKeyDown = useCallback((event: KeyboardEvent) => {
+  //     const ignoredKeys = [8, 40, 38, 39, 37]
+  //     if ((ignoredKeys.includes(event.keyCode) || event.shiftKey || event.ctrlKey)) return;
+  //     if (isNumber && isNaN(Number(event.key))) {
+  //       event.preventDefault();
+  //       event.stopPropagation();
+  //     }
+  //   }, [isNumber]);
 
   return (
     <Input
-      onKeyDown={onKeyDown}
-      type={isNumber ? 'text' : type}
+      // onKeyDown={onKeyDown}
+      type={type}
       value={value}
       classNames={{
         inputWrapper: `relative mb-1 bg-white border data-[hover=true]:bg-white group-data-[focus=true]:bg-white pb-6 h-[120px]`,
@@ -87,7 +87,7 @@ export const StakingInput = ({
       type="number"
       value={value}
       classNames={{
-        inputWrapper: `relative mb-1 bg-white border lg:px-5 sm:pl-3 sm:pr-1 pt-0 pb-8 data-[hover=true]:bg-white group-data-[focus=true]:bg-white h-[140px] max-w-xl`,
+        inputWrapper: `relative mb-1 bg-white border lg:px-5 sm:pl-2 sm:pr-2 pt-0 pb-8 data-[hover=true]:bg-white group-data-[focus=true]:bg-white h-[140px] max-w-xl`,
         label: `text-grey text-lg mb-1`,
         input: `text-[40px] ${isInvalid ? "!text-[#ED5F00]" : " "}`,
         mainWrapper: `w-xl`,

diff --git a/apps/web-staking/src/app/components/navbar/NavbarComponent.tsx b/apps/web-staking/src/app/components/navbar/NavbarComponent.tsx
@@ -2,21 +2,23 @@
 
 import { Navbar, NavbarContent, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link } from "@nextui-org/react";
 import { useWeb3Modal } from "@web3modal/wagmi/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 import { ConnectButton } from "../buttons/ButtonsComponent";
 import { LinkLogoComponent } from "../links/LinkComponent";
 import { Discord, ErrorCircle, GitBook, Telegram, X, Xai } from "../icons/IconsComponent";
-import { getNetwork } from "@/services/web3.service";
-
-
+import { TESTNET_ID } from "@/services/web3.service";
 
 export default function NavbarComponent() {
 	const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 	const { open } = useWeb3Modal();
 	const { address, chainId } = useAccount();
-	const isTestnet = getNetwork(chainId||42161) == "arbitrumSepolia";
-
+	const [isTestnet, setIsTestnet] = useState(false);
+
+	useEffect(() => {
+		setIsTestnet(chainId == TESTNET_ID);
+	}, [chainId])
+
 	return (
 		<Navbar isBordered maxWidth="full"
 			className={`flex border-b-1 border-silverMist bg-lightWhiteDarkBlack mb-5`}
@@ -30,12 +32,12 @@ export default function NavbarComponent() {
 					<Link href="/"><div className='text-lg text-lightBlackDarkWhite font-bold py-2 pl-2'>Xai</div></Link>
 				</div>
 			</NavbarContent>
-			<NavbarContent justify="start">
+			<NavbarContent justify="start" className="hidden lg:block">
 			</NavbarContent>
 			<NavbarContent className="" justify="end">
-				{isTestnet && <><ErrorCircle/><span className="text-[#ED5F00]">TESTNET</span></>}<ConnectButton onOpen={open} address={address} />
+				{isTestnet && <><span className="text-[#ED5F00] text-sm md:text-lg ml-0 flex items-center gap-1"><ErrorCircle />TESTNET</span></>}<ConnectButton onOpen={open} address={address} />
 			</NavbarContent>
-			<NavbarMenu className="flex flex-col justify-between bg-lightWhiteDarkBlack">
+			<NavbarMenu className="flex flex-col justify-between bg-lightWhiteDarkBlack h-full">
 				<NavbarMenuItem>
 					<div className="">
 						<div className='flex flex-col'>
@@ -46,7 +48,7 @@ export default function NavbarComponent() {
 					</div>
 				</NavbarMenuItem>
 				<NavbarMenuItem>
-					<div className='mb-5'>
+					<div className='mb-20'>
 						<LinkLogoComponent link="https://xai-foundation.gitbook.io/xai-network/xai-blockchain/welcome-to-xai" content='GitBook' Icon={GitBook} />
 						<LinkLogoComponent link="https://discord.com/invite/xaigames" content='Discord' Icon={Discord} />
 						<LinkLogoComponent link="https://twitter.com/xai_games" content='X' Icon={X} />

diff --git a/apps/web-staking/src/app/components/navbar/SidebarComponent.tsx b/apps/web-staking/src/app/components/navbar/SidebarComponent.tsx
@@ -23,7 +23,7 @@ export default function SidebarComponent() {
 				</div>
 			</div>
 			<div>
-				<div className='mx-5 mb-5'>
+				<div className='mx-5 mb-12'>
 					<LinkLogoComponent link="https://xai-foundation.gitbook.io/xai-network/xai-blockchain/welcome-to-xai" content='GitBook' Icon={GitBook} />
 					<LinkLogoComponent link="https://discord.com/invite/xaigames" content='Discord' Icon={Discord} />
 					<LinkLogoComponent link="https://twitter.com/xai_games" content='X' Icon={X} />

diff --git a/apps/web-staking/src/app/components/navbar/WrapperComponent.tsx b/apps/web-staking/src/app/components/navbar/WrapperComponent.tsx
@@ -7,7 +7,7 @@ import { useEffect } from "react";
 
 export default function WrapperComponent({ children }: { children: React.ReactNode }) {
 
-	const { theme, setTheme } = useTheme()
+	const { setTheme } = useTheme()
 
 	useEffect(() => {
 	  setTheme("light")

diff --git a/apps/web-staking/src/app/components/notifications/NotificationsComponent.tsx b/apps/web-staking/src/app/components/notifications/NotificationsComponent.tsx
@@ -1,5 +1,8 @@
+"use client";
+
 import { Id, toast } from "react-toastify";
 import { CheckMark } from "../icons/IconsComponent";
+import { getNetwork, getWeb3Instance } from "@/services/web3.service";
 
 type ToastPositionType =
   | "top-left"
@@ -10,11 +13,11 @@ type ToastPositionType =
   | "bottom-center";
 
 const toastPosition: ToastPositionType = "bottom-right";
-const toastMarkUp = (message: string, receipt?: string) => (
+const toastMarkUp = (message: string, receipt: string, explorer: string) => (
   <>
     <span className="mr-2 font-normal text-base">{message}</span>
     <a
-      href={`https://sepolia.arbiscan.io/tx/${receipt}`}
+      href={`${explorer}tx/${receipt}`}
       target="_blank"
       className="text-red font-medium"
     >
@@ -66,7 +69,8 @@ export function updateNotification(
   message: string,
   loadingToast: Id,
   isError: boolean,
-  receipt?: string
+  receipt?: string,
+  chainId?: number,
 ) {
   if (isError) {
     toast.update(loadingToast, {
@@ -77,7 +81,7 @@ export function updateNotification(
     });
   } else {
     toast.update(loadingToast, {
-      render: toastMarkUp(message, receipt),
+      render: toastMarkUp(message, receipt || "", getWeb3Instance(getNetwork(chainId)).explorer),
       type: "success",
       style: {
         boxShadow: "0px 3px 6px #00000026",

diff --git a/apps/web-staking/src/app/components/overview/CardComponent.tsx b/apps/web-staking/src/app/components/overview/CardComponent.tsx
@@ -1,4 +1,5 @@
 import {
+  ACTIVE_NETWORK_IDS,
   OrderedRedemptions,
   RedemptionRequest,
   getNetwork,
@@ -17,6 +18,7 @@ import {
 } from "../notifications/NotificationsComponent";
 import { Id } from "react-toastify";
 import { useRouter } from "next/navigation";
+import { useSwitchChain } from "wagmi";
 
 interface OverviewCardProps {
   title: string;
@@ -28,17 +30,25 @@ export const CardComponent = ({ title, redemptions }: OverviewCardProps) => {
   const [transactionLoading, setTransactionLoading] = useState(false);
   const router = useRouter();
   const { writeContractAsync } = useWriteContract();
+  const { switchChain } = useSwitchChain();
 
   const completeEsXaiRedemption = async (index: number) => {
     return writeContractAsync({
-      address: getWeb3Instance(getNetwork(chainId || 42161)).esXaiAddress as `0x${string}`,
+      address: getWeb3Instance(getNetwork(chainId)).esXaiAddress as `0x${string}`,
       abi: esXaiAbi,
       functionName: "completeRedemption",
       args: [BigInt(index)],
     });
   };
 
   const onClaim = async (redemption: RedemptionRequest) => {
+    if (!chainId) {
+      return;
+    }
+    if (!ACTIVE_NETWORK_IDS.includes(chainId)) {
+      switchChain({ chainId: ACTIVE_NETWORK_IDS[0] });
+      return;
+    }
     let receipt;
     setTransactionLoading(true);
     const loading = loadingNotification("Transaction is pending...");
@@ -53,7 +63,7 @@ export const CardComponent = ({ title, redemptions }: OverviewCardProps) => {
   };
 
   const onSuccess = async (receipt: string, loadingToast: Id) => {
-    updateNotification(`Claim successful`, loadingToast, false, receipt);
+    updateNotification(`Claim successful`, loadingToast, false, receipt, chainId);
     setTimeout(() => {
       setTransactionLoading(false);
       router.refresh();