update next and eslint version

package.json

@@ -18,9 +18,9 @@
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^1.9.1",
     "@dynamic-labs/sdk-react": "^0.15.16",
     "@dynamic-labs/wagmi-connector": "^0.15.16",
-    "@amplitude/analytics-browser": "^1.9.1",
     "@ethersproject/hash": "^5.7.0",
     "@headlessui/react": "^1.7.10",
     "@heroicons/react": "^2.0.14",
@@ -36,7 +36,6 @@
     "@types/react-dom": "18.0.9",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
-    "eslint-config-next": "13.0.7",
     "ethers": "^5.7.2",
     "graphql": "^16.6.0",
     "graphql-request": "^5.2.0",
@@ -45,11 +44,11 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "merkletreejs": "^0.3.9",
-    "next": "^13.1.6",
+    "next": "^13.4.1",
     "qrcode.react": "^3.1.0",
-    "react": "18.2.0",
+    "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.1",
     "react-query": "^3.39.3",
     "react-use": "^17.4.0",
@@ -83,6 +82,7 @@
     "@typescript-eslint/parser": "^5.51.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.33.0",
+    "eslint-config-next": "^13.4.1",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.0",
     "jsonwebtoken": "^9.0.0",

pages/index.tsx

@@ -75,7 +75,14 @@ function Page() {
             Group wallet for on-chain operations — raise funds and manage spend.
           </p>
           <div className="mx-auto block h-auto max-w-[80%] lg:hidden">
-            <Image src={LandingImage} alt="Landing image" />
+            <Image
+              src={LandingImage}
+              alt="Landing image"
+              style={{
+                maxWidth: "100%",
+                height: "auto",
+              }}
+            />
           </div>
 
           <div className="mt-8 mb-10 space-y-2 text-center lg:mb-10 lg:flex lg:flex-row lg:space-y-0 lg:px-0">
@@ -108,7 +115,14 @@ function Page() {
           </div>
         </main>
         <div className="bottom absolute right-52 hidden h-[730px] w-[503px] lg:top-36 lg:block">
-          <Image src={LandingImage} alt="Landing image" />
+          <Image
+            src={LandingImage}
+            alt="Landing image"
+            style={{
+              maxWidth: "100%",
+              height: "auto",
+            }}
+          />
         </div>
         <footer className="absolute bottom-10 left-14 hidden flex-row lg:block">
           <ul className="flex flex-row space-x-12 text-sm">

src/components/assets/CurrentAssetsTab.tsx

@@ -58,8 +58,11 @@ export const CurrentAssetsTab = ({ terminal }: { terminal: Terminal }) => {
                         <Image
                           src={response?.symbolLogos?.[0].URI}
                           alt={"Logo for token"}
-                          fill={true}
                           className="block rounded-full object-contain"
+                          style={{
+                            maxWidth: "100%",
+                            height: "auto",
+                          }}
                         />
                       ) : (
                         <span className="block h-6 w-6 rounded-full bg-gray-80"></span>
@@ -88,8 +91,11 @@ export const CurrentAssetsTab = ({ terminal }: { terminal: Terminal }) => {
                         response?.nft?.media?.URI
                       }
                       alt={response?.nft?.description}
-                      fill={true}
                       className="rounded border border-gray-80 object-contain"
+                      style={{
+                        maxWidth: "100%",
+                        height: "auto",
+                      }}
                     />
                   </div>
                   <h3 className="mt-2">{response?.nft?.title}</h3>

src/components/core/AccountNavBar/index.tsx

@@ -15,6 +15,10 @@ export const AccountNavBar = () => {
             alt=""
             height={40}
             width={40}
+            style={{
+              maxWidth: "100%",
+              height: "auto",
+            }}
           />
         </Link>
       </div>

src/components/emptyStates/NuxEmptyState.tsx

@@ -14,7 +14,14 @@ export const NuxEmptyState = ({
 }) => {
   return (
     <EmptyState title={title} subtitle={subtitle}>
-      <Image src={RequestImage} alt={"Request"} />
+      <Image
+        src={RequestImage}
+        alt={"Request"}
+        style={{
+          maxWidth: "100%",
+          height: "auto",
+        }}
+      />
       <div className="mx-auto mt-7">
         <Button onClick={() => onClick()}>Create</Button>
       </div>

src/components/profile/DesktopProfileLayout.tsx

@@ -37,6 +37,10 @@ const DesktopProfileLayout = ({
                 height={40}
                 width={40}
                 className="cursor-pointer transition-all hover:rotate-[15deg]"
+                style={{
+                  maxWidth: "100%",
+                  height: "auto",
+                }}
               />
             </Link>
           </section>

src/components/terminal/DesktopTerminalLayout.tsx

@@ -110,6 +110,10 @@ const DesktopTerminalLayout = ({
                 height={40}
                 width={40}
                 className="cursor-pointer transition-all hover:rotate-[15deg]"
+                style={{
+                  maxWidth: "100%",
+                  height: "auto",
+                }}
               />
             </Link>
           </section>

src/components/ui/Avatar.tsx

@@ -30,8 +30,11 @@ export const Avatar = ({ size = "base", address, className }: AvatarProps) => {
         <Image
           src={ensAvatar}
           alt="Account profile picture."
-          fill={true}
           className={`rounded-full border border-gray-90 object-cover ${className}`}
+          style={{
+            maxWidth: "100%",
+            height: "auto",
+          }}
         />
       ) : (
         <Image
@@ -40,8 +43,11 @@ export const Avatar = ({ size = "base", address, className }: AvatarProps) => {
             PFP_MAP[(parseInt(Number(address)?.toString(), 10) % 4) as number]
           }
           alt="Account profile picture. If no profile picture is set, there is a picture of a Terminal."
-          fill={true}
           className={`rounded-full border border-gray-90 object-cover ${className}`}
+          style={{
+            maxWidth: "100%",
+            height: "auto",
+          }}
         />
       )}
     </div>

src/components/ui/Select.tsx

@@ -86,7 +86,16 @@ const SelectItem = React.forwardRef<
     >
       <span className="absolute left-2 h-3.5 w-3.5 items-center justify-center">
         {props?.url && (
-          <Image height={24} width={24} src={props?.url} alt={""} />
+          <Image
+            height={24}
+            width={24}
+            src={props?.url}
+            alt={""}
+            style={{
+              maxWidth: "100%",
+              height: "auto",
+            }}
+          />
         )}
       </span>