[Fix] Update package dependencies and improve import paths (thirdweb-…

…dev#3554)

This pull request updates package.json dependencies to specific versions across multiple packages, moving from using caret (^) to specific version numbers for consistency and to prevent unwanted updates. Additionally, it includes changes to various TypeScript files, primarily adding the ESLint directive `@typescript-eslint/no-unused-vars` to suppress warnings for unused variables.

---

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates dependencies, adds styled components, and disables eslint for unused vars in various React components.

### Detailed summary
- Updated dependencies in multiple package.json files
- Added styled components for DialogContent, Overlay, DropContainer, QRPlaceholder, and more
- Disabled eslint for unused vars in React components
- Updated next.config.mjs in playground-web
- Updated pnpm-workspace.yaml
- Added eslint and styled components in wallets package.json
- Updated dependencies in wallet-ui package.json

> The following files were skipped due to too many changes: `apps/playground-web/src/components/blockchain-api/write-contract-extension.tsx`, `legacy_packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx`, `apps/playground-web/package.json`, `legacy_packages/react/package.json`, `apps/playground-web/src/components/blockchain-api/write-contract-raw.tsx`, `package.json`, `apps/dashboard/package.json`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

.changeset/strange-lemons-work.md

@@ -0,0 +1,7 @@
+---
+"eslint-config-thirdweb": patch
+"@thirdweb-dev/service-utils": patch
+"thirdweb": patch
+---
+
+update dependencies

apps/dashboard/package.json

@@ -25,7 +25,7 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@coinbase/onchainkit": "^0.14.2",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@hookform/resolvers": "^3.6.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
@@ -38,7 +38,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tooltip": "1.1.2",
     "@react-icons/all-files": "^4.1.0",
     "@sentry/nextjs": "^8.8.0",
     "@stripe/react-stripe-js": "^2.7.2",
@@ -65,7 +65,7 @@
     "ethers": "^5.7.2",
     "flat": "^6.0.1",
     "framer-motion": "^11.2.12",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "7.0.0",
     "idb-keyval": "^6.2.1",
     "lottie-react": "^2.4.0",
     "lucide-react": "^0.399.0",
@@ -107,15 +107,15 @@
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.1",
     "zksync-ethers": "5.9.0",
-    "zod": "^3.23.8"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
     "@playwright/test": "^1.44.1",
     "@types/color": "^3.0.6",
-    "@types/node": "^20.14.9",
+    "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
@@ -124,19 +124,19 @@
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
     "@types/swagger-ui-react": "^4.18.3",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.19",
     "checkly": "^4.7.0",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
+    "eslint": "8.57.0",
     "eslint-config-biome": "^1.7.3",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-inclusive-language": "^2.2.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.2",
     "knip": "^5.23.1",
@@ -170,4 +170,4 @@
     "unreleased versions",
     "not UCAndroid > 0"
   ]
-}
+}

apps/playground-web/next.config.mjs

@@ -4,7 +4,9 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
-  serverExternalPackages: ["@shikijs/twoslash", "prettier", "shiki"],
+  experimental: {
+    serverExternalPackages: ["@shikijs/twoslash", "prettier", "shiki"],
+  },
 };
 
 export default nextConfig;

apps/playground-web/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
@@ -31,16 +31,16 @@
     "thirdweb": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.14.9",
+    "@types/node": "20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
-    "eslint": "^8",
+    "eslint": "8.57.0",
     "eslint-config-next": "14.2.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "postcss": "^8",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.5.2"
   }
-}
+}

apps/playground-web/src/components/blockchain-api/write-contract-extension.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { THIRDWEB_CLIENT } from "@/lib/client";
+import Image from "next/image";
 import { useState } from "react";
 import { getContract } from "thirdweb";
 import { sepolia } from "thirdweb/chains";
@@ -24,11 +25,9 @@ export function WriteContractExtensionPreview() {
   const [error, setError] = useState<string>("");
   return (
     <div className="flex flex-col">
-      <img
+      <Image
         src="/twcoin.svg"
-        width={"120px"}
-        height={"120px"}
-        className="mx-auto rounded-2xl animate-bounce"
+        className="mx-auto rounded-2xl animate-bounce size-32"
         alt=""
       />
       <div className="my-3 text-center">Claim free testnet tokens</div>

apps/playground-web/src/components/blockchain-api/write-contract-raw.tsx

@@ -1,8 +1,15 @@
 "use client";
 
 import { THIRDWEB_CLIENT } from "@/lib/client";
+import Image from "next/image";
 import { useState } from "react";
-import { getContract, prepareContractCall, toTokens, toUnits } from "thirdweb";
+import {
+  type Hex,
+  getContract,
+  prepareContractCall,
+  toTokens,
+  toUnits,
+} from "thirdweb";
 import { sepolia } from "thirdweb/chains";
 import { balanceOf } from "thirdweb/extensions/erc20";
 import {
@@ -11,7 +18,6 @@ import {
   useActiveAccount,
   useReadContract,
 } from "thirdweb/react";
-import type { Hex } from "../../../../../packages/thirdweb/dist/types/utils/encoding/hex";
 import { shortenAddress } from "./shortenAddress";
 
 const twCoinContract = getContract({
@@ -39,11 +45,9 @@ export function WriteContractRawPreview() {
           <div className="rounded-2xl border py-2 px-3 mb-3 backdrop-blur">
             <div className="text-2xl">Your balance</div>
             <div className="flex flex-row justify-start gap-3">
-              <img
+              <Image
                 src="/twcoin.svg"
-                width={"20px"}
-                height={"20px"}
-                className="rounded-2xl"
+                className="mx-auto rounded-2xl animate-bounce size-5"
                 alt=""
               />
               <div>

apps/wallet-ui/package.json

@@ -11,18 +11,18 @@
   },
   "dependencies": {
     "next": "14.2.4",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "thirdweb": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/node": "20.14.9",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
-    "eslint": "^8",
+    "eslint": "8.57.0",
     "eslint-config-next": "14.2.4",
     "postcss": "^8",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5"
+    "typescript": "5.5.2"
   }
-}
+}

legacy_packages/auth/package.json

@@ -101,7 +101,7 @@
     "ethers": "^5.7.2",
     "express": "^4.19.2",
     "fastify": "^4.28.0",
-    "next": "^14.2.4",
+    "next": "14.2.4",
     "next-auth": "^4.24.7",
     "typescript": "5.5.2"
   },
@@ -144,4 +144,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

legacy_packages/chains/package.json

@@ -36,4 +36,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

legacy_packages/cli/package.json

@@ -21,7 +21,7 @@
     "@types/update-notifier": "^6.0.8",
     "@types/validate-npm-package-name": "^4.0.2",
     "chalk": "^5.3.0",
-    "cross-spawn": "^7.0.3",
+    "cross-spawn": "7.0.3",
     "dotenv-mono": "^1.3.14",
     "eslint": "8.57.0",
     "eslint-config-thirdweb": "workspace:*",
@@ -81,4 +81,4 @@
     "sourcemap": true,
     "clean": true
   }
-}
+}

legacy_packages/crypto/package.json

@@ -27,7 +27,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@noble/hashes": "^1.4.0",
+    "@noble/hashes": "1.4.0",
     "js-sha3": "^0.9.3"
   },
   "devDependencies": {
@@ -60,4 +60,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

legacy_packages/eslint-config-thirdweb/package.json

@@ -15,4 +15,4 @@
     "access": "public"
   },
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/eslint-config-thirdweb"
-}
+}

legacy_packages/merkletree/package.json

@@ -52,4 +52,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

legacy_packages/pay/package.json

@@ -50,4 +50,4 @@
     "build": "tsc && preconstruct build",
     "push": "yalc push"
   }
-}
+}

legacy_packages/payments/package.json

@@ -56,4 +56,4 @@
     "preconstruct:fix": "preconstruct fix",
     "push": "yalc push"
   }
-}
+}

legacy_packages/react-core/package.json

@@ -98,4 +98,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

legacy_packages/react/package.json

@@ -101,17 +101,17 @@
   },
   "dependencies": {
     "@emotion/css": "11.11.2",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@google/model-viewer": "^2.1.1",
+    "@google/model-viewer": "2.1.1",
     "@headlessui/react": "1.7.18",
     "@radix-ui/colors": "^0.1.9",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-focus-scope": "^1.0.4",
-    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-focus-scope": "1.0.4",
+    "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tooltip": "1.1.2",
     "@tanstack/react-query": "^4.36.1",
     "@thirdweb-dev/chains": "workspace:*",
     "@thirdweb-dev/payments": "workspace:*",
@@ -121,7 +121,7 @@
     "buffer": "^6.0.3",
     "copy-to-clipboard": "^3.3.3",
     "detect-browser": "^5.3.0",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "7.0.0",
     "input-otp": "^1.2.4",
     "qrcode": "^1.5.3",
     "tiny-invariant": "^1.3.3"
@@ -135,4 +135,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

legacy_packages/react/src/components/DragNDrop.tsx

@@ -142,6 +142,7 @@ const UploadIconSecondary = /* @__PURE__ */ styled(UploadIcon)(() => {
   };
 });
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const DropContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {

legacy_packages/react/src/components/Drawer.tsx

@@ -41,6 +41,7 @@ export const Drawer = /* @__PURE__ */ forwardRef<HTMLDivElement, DrawerProps>(
   },
 );
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const DrawerContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
@@ -69,6 +70,7 @@ export const drawerOpenAnimation = keyframes`
   }
 `;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const DrawerOverlay = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {

legacy_packages/react/src/components/Modal.tsx

@@ -156,6 +156,7 @@ const modalAnimationMobile = keyframes`
   }
 `;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
 

legacy_packages/react/src/components/OTPInput.tsx

@@ -63,6 +63,7 @@ const caretBlink = keyframes`
   }
   `;
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const FakeCaret = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
@@ -83,6 +84,7 @@ const FakeCaret = /* @__PURE__ */ StyledDiv((_) => {
   };
 });
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const OTPInputBox = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {

legacy_packages/react/src/components/Overlay.tsx

@@ -11,6 +11,7 @@ const overlayEnter = keyframes`
   }
 `;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Overlay = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {