Merge pull request #61 from aptos-labs/darren/refactoring

[frontend] refactor Aptogotchi

frontend/package.json

@@ -26,6 +26,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3"
   },

frontend/src/app/globals.css

@@ -4,7 +4,6 @@
 
 *, ::before, ::after {
   box-sizing: border-box;
-  word-spacing: -0.25rem;
 }
 
 body {

frontend/src/app/home/Connected.tsx

@@ -1,45 +1,55 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import { Pet } from "./Pet";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
 import { Mint } from "./Mint";
 import { getAptosClient } from "@/utils/aptosClient";
 import { Modal } from "@/components/Modal";
 import { ABI } from "@/utils/abi";
+import { usePet } from "@/context/PetContext";
 
 const TESTNET_ID = "2";
 
 const aptosClient = getAptosClient();
 
 export function Connected() {
-  const [pet, setPet] = useState<Pet>();
+  const { pet, setPet } = usePet();
   const { account, network } = useWallet();
 
   const fetchPet = useCallback(async () => {
     if (!account?.address) return;
 
-    const [hasPet] = await aptosClient.view({
+    const hasPet = await aptosClient.view({
       payload: {
         function: `${ABI.address}::main::has_aptogotchi`,
         functionArguments: [account.address],
       },
     });
-    if (hasPet as boolean) {
-      const response = await aptosClient.view({
-        payload: {
-          function: `${ABI.address}::main::get_aptogotchi`,
-          functionArguments: [account.address],
-        },
-      });
-      const [name, birthday, energyPoints, parts] = response;
-      const typedParts = parts as { body: number; ear: number; face: number };
-      setPet({
-        name: name as string,
-        birthday: birthday as number,
-        energy_points: energyPoints as number,
-        parts: typedParts,
-      });
+
+    if (hasPet) {
+      let response;
+
+      try {
+        response = await aptosClient.view({
+          payload: {
+            function: `${ABI.address}::main::get_aptogotchi`,
+            functionArguments: [account.address],
+          },
+        });
+
+        const [name, birthday, energyPoints, parts] = response;
+        const typedParts = parts as { body: number; ear: number; face: number };
+
+        setPet({
+          name: name as string,
+          birthday: birthday as number,
+          energy_points: energyPoints as number,
+          parts: typedParts,
+        });
+      } catch (error) {
+        console.error(error);
+      }
     }
   }, [account?.address]);
 
@@ -52,7 +62,7 @@ export function Connected() {
   return (
     <div className="flex flex-col gap-3 p-3">
       {network?.chainId !== TESTNET_ID && <Modal />}
-      {pet ? <Pet pet={pet} setPet={setPet} /> : <Mint fetchPet={fetchPet} />}
+      {pet ? <Pet /> : <Mint fetchPet={fetchPet} />}
     </div>
   );
 }

frontend/src/app/home/NotConnected.tsx

@@ -16,7 +16,7 @@ export function NotConnected() {
   return (
     <div className="flex flex-col gap-6 p-6">
       <ShufflePetImage petParts={petParts} setPetParts={setPetParts} />
-      <div className="nes-container is-dark with-title">
+      <div className="nes-container is-dark with-title text-sm sm:text-base">
         <p className="title">Welcome</p>
         <p>{text}</p>
       </div>

frontend/src/app/home/Pet/Actions.tsx

@@ -1,33 +1,29 @@
 "use client";
 
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import { Pet } from ".";
 import { getAptosClient } from "@/utils/aptosClient";
 import {
   NEXT_PUBLIC_ENERGY_CAP,
   NEXT_PUBLIC_ENERGY_DECREASE,
   NEXT_PUBLIC_ENERGY_INCREASE,
 } from "@/utils/env";
 import { ABI } from "@/utils/abi";
+import { toast } from "sonner";
+import { usePet } from "@/context/PetContext";
 
 const aptosClient = getAptosClient();
 
 export type PetAction = "feed" | "play";
 
 export interface ActionsProps {
-  pet: Pet;
   selectedAction: PetAction;
   setSelectedAction: (action: PetAction) => void;
-  setPet: Dispatch<SetStateAction<Pet | undefined>>;
 }
 
-export function Actions({
-  selectedAction,
-  setSelectedAction,
-  setPet,
-  pet,
-}: ActionsProps) {
+export function Actions({ selectedAction, setSelectedAction }: ActionsProps) {
+  const { pet, setPet } = usePet();
+
   const [transactionInProgress, setTransactionInProgress] =
     useState<boolean>(false);
   const { account, network, signAndSubmitTransaction } = useWallet();
@@ -75,8 +71,10 @@ export function Actions({
       });
     } catch (error: any) {
       console.error(error);
+      toast.error("Failed to feed your pet. Please try again.");
     } finally {
       setTransactionInProgress(false);
+      toast.success(`Thanks for feeding your pet, ${pet?.name}!`);
     }
   };
 
@@ -111,16 +109,18 @@ export function Actions({
       });
     } catch (error: any) {
       console.error(error);
+      toast.error("Failed to play with your pet. Please try again.");
     } finally {
       setTransactionInProgress(false);
+      toast.success(`Thanks for playing with your pet, ${pet?.name}!`);
     }
   };
 
   const feedDisabled =
     selectedAction === "feed" &&
-    pet.energy_points === Number(NEXT_PUBLIC_ENERGY_CAP);
+    pet?.energy_points === Number(NEXT_PUBLIC_ENERGY_CAP);
   const playDisabled =
-    selectedAction === "play" && pet.energy_points === Number(0);
+    selectedAction === "play" && pet?.energy_points === Number(0);
 
   return (
     <div className="nes-container with-title flex-1 bg-white h-[320px]">

frontend/src/app/home/Pet/Details.tsx

@@ -1,29 +1,27 @@
 "use client";
 
 import { AiFillSave } from "react-icons/ai";
-import { FaCopy } from "react-icons/fa";
+import { FaCopy, FaExternalLinkAlt } from "react-icons/fa";
 import { HealthBar } from "@/components/HealthBar";
-import { Pet } from ".";
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
 import { getAptosClient } from "@/utils/aptosClient";
 import { ABI } from "@/utils/abi";
-
-export interface PetDetailsProps {
-  pet: Pet;
-  setPet: Dispatch<SetStateAction<Pet | undefined>>;
-}
+import { toast } from "sonner";
+import { usePet } from "@/context/PetContext";
 
 const aptosClient = getAptosClient();
 
-export function PetDetails({ pet, setPet }: PetDetailsProps) {
-  const [newName, setNewName] = useState(pet.name);
+export function PetDetails() {
+  const { pet, setPet } = usePet();
+
+  const [newName, setNewName] = useState<string>(pet?.name || "");
   const { account, network, signAndSubmitTransaction } = useWallet();
   const owner = account?.ansName
     ? `${account?.ansName}.apt`
     : account?.address || "";
 
-  const canSave = newName !== pet.name;
+  const canSave = newName !== pet?.name;
 
   const handleNameChange = async () => {
     if (!account || !network) return;
@@ -45,11 +43,17 @@ export function PetDetails({ pet, setPet }: PetDetailsProps) {
       });
     } catch (error: any) {
       console.error(error);
+      toast.error("Failed to update name. Please try again.");
+    } finally {
+      toast.success(
+        `Name was successfully updated from ${pet?.name} to ${newName}!`
+      );
     }
   };
 
   const handleCopyOwnerAddrOrName = () => {
     navigator.clipboard.writeText(owner);
+    toast.success("Owner address copied to clipboard.");
   };
 
   const nameFieldComponent = (
@@ -76,7 +80,16 @@ export function PetDetails({ pet, setPet }: PetDetailsProps) {
 
   const ownerFieldComponent = (
     <div className="nes-field">
-      <label htmlFor="owner_field">Owner</label>
+      <a
+        className="flex items-center gap-2"
+        href={`https://explorer.aptoslabs.com/account/${owner}?network=testnet`}
+        target="_blank"
+      >
+        <label htmlFor="owner_field" className="mb-0">
+          Owner
+        </label>
+        <FaExternalLinkAlt className="h-4 w-4 drop-shadow-sm" />
+      </a>
       <div className="relative">
         <input
           type="text"
@@ -101,7 +114,7 @@ export function PetDetails({ pet, setPet }: PetDetailsProps) {
         <label>Energy Points</label>
         <HealthBar
           totalHealth={10}
-          currentHealth={pet.energy_points}
+          currentHealth={pet?.energy_points || 0}
           icon="star"
         />
       </div>

frontend/src/app/home/Pet/Image.tsx

@@ -6,12 +6,15 @@ import { PetAction } from "@/app/home/Pet/Actions";
 
 export interface PetImageProps {
   selectedAction?: PetAction;
-  petParts: PetParts;
+  petParts: PetParts | undefined;
   avatarStyle?: boolean;
 }
 
 export function PetImage(props: PetImageProps) {
   const { avatarStyle, petParts, selectedAction } = props;
+
+  if (!petParts) return <div className="h-80 w-80 bg-gray-200"></div>;
+
   const head = BASE_PATH + "head.png";
   const body = BASE_PATH + bodies[petParts.body];
   const ear = BASE_PATH + ears[petParts.ear];

frontend/src/app/home/Pet/ShufflePetImage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Pet, PetParts } from ".";
+import { PetParts } from ".";
 import { PetImage } from "./Image";
 import { ShuffleButton } from "@/components/ShuffleButton";
 import {

frontend/src/app/home/Pet/Summary.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useTypingEffect } from "@/utils/useTypingEffect";
-import { Pet } from ".";
+import { usePet } from "@/context/PetContext";
 
-export interface SummaryProps {
-  pet: Pet;
-}
+export function Summary() {
+  const { pet } = usePet();
+
+  if (!pet) return null;
 
-export function Summary({ pet }: SummaryProps) {
   let text = `${pet.name} is doing great! 😄`;
 
   if (pet.energy_points >= 8) {