nit

frontend/src/app/home/Connected.tsx

@@ -4,8 +4,8 @@ import { useState, useEffect, useCallback } from "react";
 import { Pet } from "./Pet";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
 import { Mint } from "./Mint";
-import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "../../utils/env";
-import { getAptosClient } from "../../utils/aptosClient";
+import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
+import { getAptosClient } from "@/utils/aptosClient";
 
 const aptosClient = getAptosClient();
 

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

@@ -2,9 +2,9 @@
 
 import { useCallback, useState, useEffect } from "react";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import { padAddressIfNeeded } from "../../../utils/address";
-import { getAptosClient } from "../../../utils/aptosClient";
-import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "../../../utils/env";
+import { padAddressIfNeeded } from "@/utils/address";
+import { getAptosClient } from "@/utils/aptosClient";
+import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
 
 const aptosClient = getAptosClient();
 

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

@@ -2,12 +2,12 @@
 
 import { AiFillSave } from "react-icons/ai";
 import { FaCopy } from "react-icons/fa";
-import { HealthBar } from "../../../components/HealthBar";
+import { HealthBar } from "@/components/HealthBar";
 import { Pet } from ".";
 import { Dispatch, SetStateAction, useState } from "react";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "../../../utils/env";
-import { getAptosClient } from "../../../utils/aptosClient";
+import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
+import { getAptosClient } from "@/utils/aptosClient";
 
 export interface PetDetailsProps {
   pet: Pet;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useTypingEffect } from "../../../utils/useTypingEffect";
+import { useTypingEffect } from "@/utils/useTypingEffect";
 import { Pet } from ".";
 
 export interface SummaryProps {

frontend/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import { WalletProvider } from "../context/WalletProvider";
+import { WalletProvider } from "@/context/WalletProvider";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { PropsWithChildren } from "react";

frontend/src/app/page.tsx

@@ -46,7 +46,7 @@ function Header() {
 
 const WalletButtons = dynamic(
   async () => {
-    const { WalletButtons } = await import("../components/WalletButtons");
+    const { WalletButtons } = await import("@/components/WalletButtons");
     return { default: WalletButtons };
   },
   {

frontend/src/components/HealthBar/index.tsx

@@ -1,4 +1,4 @@
-import { range } from "../../utils/range";
+import { range } from "@/utils/range";
 
 export interface HealthBarProps {
   totalHealth: number;

frontend/src/components/WalletButtons/index.tsx

@@ -7,7 +7,7 @@ import {
   isRedirectable,
   WalletName,
 } from "@aptos-labs/wallet-adapter-react";
-import { cn } from "../../utils/styling";
+import { cn } from "@/utils/styling";
 
 const buttonStyles = "nes-btn is-primary";
 

frontend/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,15 +18,11 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }