Merge pull request #532 from BibliothecaDAO/feat/improved-onboarding

Create a new onboarding screen replacing current arcade intro

ui/src/app/components/animations/ArcadeLoader.tsx

@@ -45,18 +45,18 @@ export default function ArcadeLoader({
     <>
       {showLoader && (
         <div className="fixed flex flex-col items-center sm:flex-row inset-0 bg-black z-50 sm:m-2 w-full h-full">
-          <div className="flex items-center justify-center w-full sm:w-1/2 h-3/4 sm:h-full">
+          <div className="flex items-center justify-center w-full sm:w-1/2 h-3/4 sm:h-full ml-16 sm:m-0">
             <PixelatedImage
               src={"/scenes/intro/arcade-account.png"}
               pixelSize={5}
               pulsate={true}
             />
           </div>
           <div className="flex flex-col gap-10 h-full sm:w-1/2">
-            <p className="text-lg sm:text-3xl flex items-start sm:items-center justify-center sm:justify-start w-full h-1/4 uppercase">
+            <p className="text-3xl flex items-start sm:items-center justify-center sm:justify-start w-full h-1/4 uppercase">
               Don&apos;t refresh!
             </p>
-            <p className="text-lg sm:text-3xl loading-ellipsis flex items-start sm:items-center justify-center sm:justify-start w-full h-1/4">
+            <p className="text-3xl loading-ellipsis flex items-start sm:items-center justify-center sm:justify-start w-full h-1/4">
               {loadingMessage}
             </p>
             {fullDeployment && (

ui/src/app/components/icons/Icons.tsx

@@ -54,6 +54,7 @@ import Discord from "public/icons/discord.svg";
 import Refresh from "public/icons/refresh.svg";
 import Settings from "public/icons/settings.svg";
 import Drop from "public/icons/drop.svg";
+import Complete from "public/icons/complete.svg";
 
 const ClothIcon = Cloth;
 const HideIcon = Hide;
@@ -112,6 +113,8 @@ const ArcadeIcon = Arcade;
 const QuestionMarkIcon = QuestionMark;
 const SettingsIcon = Settings;
 
+const CompleteIcon = Complete;
+
 export {
   ClothIcon,
   HideIcon,
@@ -168,4 +171,5 @@ export {
   DiscordIcon,
   ArcadeIcon,
   QuestionMarkIcon,
+  CompleteIcon,
 };

ui/src/app/components/interlude/Hints.tsx

@@ -21,22 +21,22 @@ export default function Hints() {
     if (currentIndex < tutorials.length - 1) {
       const timer = setTimeout(() => {
         setCurrentIndex((prev) => prev + 1);
-      }, 10000);
+      }, 20000);
       return () => {
         clearTimeout(timer);
       };
     } else if (currentIndex === tutorials.length - 1) {
       const timer = setTimeout(() => {
         setCurrentIndex(0);
-      }, 10000);
+      }, 20000);
       return () => clearTimeout(timer);
     }
   }, [currentIndex]);
 
   return (
     <div className="flex flex-col sm:w-1/2 items-center justify-center h-full">
       <p className="text-4xl h-1/6 flex justify-center items-center">Hints</p>
-      <div className="flex flex-col border border-terminal-green bg-black px-2 py-5 sm:p-6 2xl:px-12 2xl:py-6 h-5/6 w-full sm:w-3/4 gap-5">
+      <div className="flex flex-col border border-terminal-green bg-terminal-black px-2 py-5 sm:p-6 2xl:px-12 2xl:py-6 h-5/6 w-full sm:w-3/4 gap-5">
         <div className="w-full h-1/8 2xl:h-1/6">
           <RowLoader />
         </div>

ui/src/app/components/intro/ArcadeIntro.tsx

@@ -2,11 +2,7 @@ import { useEffect, useState } from "react";
 import { MdClose } from "react-icons/md";
 import { Contract } from "starknet";
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
-import {
-  ETH_PREFUND_AMOUNT,
-  LORDS_PREFUND_AMOUNT,
-  useBurner,
-} from "@/app/lib/burner";
+import { ETH_PREFUND_AMOUNT, useBurner } from "@/app/lib/burner";
 import { Button } from "@/app/components/buttons/Button";
 import useUIStore from "@/app/hooks/useUIStore";
 import { getWalletConnectors } from "@/app/lib/connectors";
@@ -66,7 +62,7 @@ export const ArcadeIntro = ({
   const eth = Number(ethBalance);
 
   const checkNotEnoughPrefundEth = eth < parseInt(ETH_PREFUND_AMOUNT);
-  const checkNotEnoughPrefundLords = lords < parseInt(LORDS_PREFUND_AMOUNT);
+  const checkNotEnoughPrefundLords = lords < parseInt("1000000000000");
 
   useEffect(() => {
     if (

ui/src/app/components/intro/WalletSelect.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import Image from "next/image";
 import { Button } from "@/app/components/buttons/Button";
 import { useConnect } from "@starknet-react/core";
-import useUIStore from "@/app/hooks/useUIStore";
 import { WalletTutorial } from "@/app/components/intro/WalletTutorial";
 import Storage from "@/app/lib/storage";
 import { BurnerStorage } from "@/app/types";
@@ -12,7 +11,6 @@ interface WalletSelectProps {}
 
 const WalletSelect = ({}: WalletSelectProps) => {
   const { connectors, connect } = useConnect();
-  const setDisconnected = useUIStore((state) => state.setDisconnected);
   const [screen, setScreen] = useState("wallet");
 
   if (!connectors) return <div></div>;
@@ -101,9 +99,6 @@ const WalletSelect = ({}: WalletSelectProps) => {
               <Button size={"sm"} onClick={() => setScreen("wallet")}>
                 Back
               </Button>
-              <Button size={"sm"} onClick={() => setDisconnected(false)}>
-                Continue Anyway
-              </Button>
             </div>
           </div>
         )}

ui/src/app/components/intro/WalletTutorial.tsx

@@ -8,8 +8,6 @@ export const WalletTutorial = () => {
 
   return (
     <div className="flex flex-col h-[550px] sm:h-full items-center text-center p-10 overflow-y-auto">
-      <h2 className="mt-0">Welcome to Loot Survivor!</h2>
-
       {/* <p className="text-sm sm:text-lg">
         To get started and immerse yourself in this on-chain gaming adventure,
         you will need to create a Starknet wallet first. Don&apos;t worry, it is

ui/src/app/components/navigation/Header.tsx

@@ -31,10 +31,11 @@ export interface HeaderProps {
     loadingMessage: string[],
     notification: string[]
   ) => Promise<void>;
-  mintLords: () => Promise<void>;
+  mintLords: (lordsAmount: number) => Promise<void>;
   lordsBalance: bigint;
   arcadeConnectors: Connector[];
   gameContract: Contract;
+  costToPlay: bigint;
 }
 
 export default function Header({
@@ -43,6 +44,7 @@ export default function Header({
   lordsBalance,
   arcadeConnectors,
   gameContract,
+  costToPlay,
 }: HeaderProps) {
   const { account, address } = useAccount();
   const { disconnect } = useDisconnect();
@@ -84,6 +86,8 @@ export default function Header({
     (connector) => connector.name == address
   );
 
+  const lordsGameCost = Number(costToPlay);
+
   const handleApibaraStatus = async () => {
     const data = await getApibaraStatus();
     setApibaraStatus(data.status.indicator);
@@ -141,7 +145,7 @@ export default function Header({
               )}&amount=0.001`;
               window.open(avnuLords, "_blank");
             } else {
-              await mintLords();
+              await mintLords(lordsGameCost * 25);
             }
           }}
           onMouseEnter={() => setShowLordsBuy(true)}

ui/src/app/components/start/CreateAdventurer.tsx

@@ -13,7 +13,8 @@ export interface CreateAdventurerProps {
   goldenTokenData: any;
   gameContract: Contract;
   getBalances: () => Promise<void>;
-  mintLords: () => Promise<void>;
+  mintLords: (lordsAmount: number) => Promise<void>;
+  costToPlay: bigint;
 }
 
 export const CreateAdventurer = ({
@@ -25,6 +26,7 @@ export const CreateAdventurer = ({
   gameContract,
   getBalances,
   mintLords,
+  costToPlay,
 }: CreateAdventurerProps) => {
   const [formData, setFormData] = useState<FormData>({
     startingWeapon: "",
@@ -120,6 +122,7 @@ export const CreateAdventurer = ({
               gameContract={gameContract}
               getBalances={getBalances}
               mintLords={mintLords}
+              costToPlay={costToPlay}
             />
           </div>
           <div className="sm:hidden">
@@ -144,6 +147,7 @@ export const CreateAdventurer = ({
             gameContract={gameContract}
             getBalances={getBalances}
             mintLords={mintLords}
+            costToPlay={costToPlay}
           />
         </div>
       )}

ui/src/app/components/start/Spawn.tsx

@@ -17,6 +17,7 @@ import {
   indexAddress,
   formatTimeSeconds,
   fetchAverageBlockTime,
+  formatCurrency,
 } from "@/app/lib/utils";
 
 export interface SpawnProps {
@@ -31,7 +32,8 @@ export interface SpawnProps {
   goldenTokenData: any;
   gameContract: Contract;
   getBalances: () => Promise<void>;
-  mintLords: () => Promise<void>;
+  mintLords: (lordsAmount: number) => Promise<void>;
+  costToPlay: bigint;
 }
 
 export const Spawn = ({
@@ -43,11 +45,11 @@ export const Spawn = ({
   gameContract,
   getBalances,
   mintLords,
+  costToPlay,
 }: SpawnProps) => {
   const [showWalletTutorial, setShowWalletTutorial] = useState(false);
   const [formFilled, setFormFilled] = useState(false);
   const [usableToken, setUsableToken] = useState<string>("0");
-  const [costToPlay, setCostToPlay] = useState<number | undefined>();
   const isWrongNetwork = useUIStore((state) => state.isWrongNetwork);
   const loading = useLoadingStore((state) => state.loading);
   const estimatingFee = useUIStore((state) => state.estimatingFee);
@@ -73,15 +75,17 @@ export const Spawn = ({
     setShowWalletTutorial(true);
   };
 
+  const lordsGameCost = Number(costToPlay);
+
   const handleSubmitLords = async () => {
     resetNotification();
-    await spawn(formData, "0", costToPlay!);
+    await spawn(formData, "0", lordsGameCost);
     await getBalances();
   };
 
   const handleSubmitGoldenToken = async () => {
     resetNotification();
-    await spawn(formData, usableToken, costToPlay);
+    await spawn(formData, usableToken, lordsGameCost);
     await getBalances();
   };
 
@@ -126,20 +130,14 @@ export const Spawn = ({
     setFetchedAverageBlockTime(true);
   };
 
-  const getCostToPlay = async () => {
-    const cost = await gameContract.call("get_cost_to_play", []);
-    setCostToPlay(parseInt(cost.toString()));
-  };
-
   useEffect(() => {
     if (onMainnet && !fetchedAverageBlockTime && currentBlockNumber > 0) {
       fetchData();
     }
   }, [currentBlockNumber]);
 
   useEffect(() => {
-    getUsableGoldenToken(goldenTokens);
-    getCostToPlay();
+    getUsableGoldenToken(goldenTokens ?? []);
   }, []);
 
   return (
@@ -255,6 +253,7 @@ export const Spawn = ({
                           : "Fill details"
                         : "Not enough Lords"}
                     </p>
+                    {formatCurrency(lordsGameCost)}
                     <Lords className="absolute self-center sm:w-5 sm:h-5  h-3 w-3 fill-current right-5" />
                   </div>
                 </Button>
@@ -315,7 +314,7 @@ export const Spawn = ({
                       )}&amount=0.001`;
                       window.open(avnuLords, "_blank");
                     } else {
-                      await mintLords();
+                      await mintLords(lordsGameCost);
                     }
                   }}
                 >

ui/src/app/containers/AdventurerScreen.tsx

@@ -15,7 +15,8 @@ interface AdventurerScreenProps {
   gameContract: Contract;
   goldenTokenData: any;
   getBalances: () => Promise<void>;
-  mintLords: () => Promise<void>;
+  mintLords: (lordsAmount: number) => Promise<void>;
+  costToPlay: bigint;
 }
 
 /**
@@ -30,6 +31,7 @@ export default function AdventurerScreen({
   goldenTokenData,
   getBalances,
   mintLords,
+  costToPlay,
 }: AdventurerScreenProps) {
   const [activeMenu, setActiveMenu] = useState(0);
   const setAdventurer = useAdventurerStore((state) => state.setAdventurer);
@@ -93,6 +95,7 @@ export default function AdventurerScreen({
             gameContract={gameContract}
             getBalances={getBalances}
             mintLords={mintLords}
+            costToPlay={costToPlay}
           />
         </div>
       )}