Merge pull request #34 from xmtp/rygine/dev-deps

Upgrade dependencies, configs

.changeset/fresh-moose-move.md

@@ -0,0 +1,5 @@
+---
+"@xmtp/snap": patch
+---
+
+Upgrade dependencies

.github/workflows/build-test.yml

@@ -1,4 +1,4 @@
-name: Build, Lint, and Test
+name: Build, Lint, Typecheck, and Test
 
 on:
   push:
@@ -12,10 +12,10 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
-          cache: "yarn"
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
         env:
-          SKIP_YARN_COREPACK_CHECK: "1"
+          SKIP_YARN_COREPACK_CHECK: '1'
       - name: Enable corepack
         run: corepack enable
       - name: Install dependencies
@@ -29,27 +29,44 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
-          cache: "yarn"
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
         env:
-          SKIP_YARN_COREPACK_CHECK: "1"
+          SKIP_YARN_COREPACK_CHECK: '1'
       - name: Enable corepack
         run: corepack enable
       - name: Install dependencies
         run: yarn
       - name: Lint
         run: yarn lint
 
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+        env:
+          SKIP_YARN_COREPACK_CHECK: '1'
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: yarn
+      - name: Typecheck
+        run: yarn typecheck
+
   test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
-          cache: "yarn"
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
         env:
-          SKIP_YARN_COREPACK_CHECK: "1"
+          SKIP_YARN_COREPACK_CHECK: '1'
       - name: Enable corepack
         run: corepack enable
       - name: Install dependencies
@@ -63,10 +80,10 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
-          cache: "yarn"
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
         env:
-          SKIP_YARN_COREPACK_CHECK: "1"
+          SKIP_YARN_COREPACK_CHECK: '1'
       - name: Enable corepack
         run: corepack enable
       - name: Install dependencies

.node-version

@@ -1 +1 @@
-18.19.1
+20.15.0

.nvmrc

@@ -1 +1 @@
-18.19.1
+20.15.0

.yarnrc.yml

@@ -6,4 +6,4 @@ enableTelemetry: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

package.json

@@ -11,34 +11,35 @@
     "dev": "turbo run dev",
     "format": "turbo run format",
     "format:check": "turbo run format:check",
-    "lint": "FORCE_COLOR=1 turbo run lint --filter='./packages/snap'",
+    "lint": "FORCE_COLOR=1 turbo run lint",
     "publish": "yarn build && changeset publish",
-    "test": "FORCE_COLOR=1 turbo run test"
+    "test": "FORCE_COLOR=1 turbo run test",
+    "typecheck": "turbo run typecheck"
   },
   "dependencies": {
     "@changesets/changelog-git": "^0.2.0",
-    "@changesets/cli": "^2.27.1"
+    "@changesets/cli": "^2.27.7"
   },
   "devDependencies": {
     "@metamask/eslint-config": "^12.2.0",
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-jsdoc": "^48.2.0",
+    "eslint-plugin-jsdoc": "^48.9.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.4.11",
-    "turbo": "^1.12.4",
-    "typescript": "^5.3.3"
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-packagejson": "^2.5.1",
+    "turbo": "^2.0.9",
+    "typescript": "^5.5.4"
   },
-  "packageManager": "yarn@4.1.0",
+  "packageManager": "yarn@4.3.1",
   "engines": {
     "node": ">=18"
   }

packages/site/package.json

@@ -11,7 +11,8 @@
     "format": "yarn format:base -w .",
     "format:base": "prettier --ignore-path ../../.gitignore",
     "format:check": "yarn format:base -c .",
-    "lint": "eslint . --ignore-path ../../.gitignore"
+    "lint": "eslint . --ignore-path ../../.gitignore",
+    "typecheck": "tsc"
   },
   "browserslist": {
     "production": [
@@ -26,41 +27,41 @@
     ]
   },
   "dependencies": {
-    "@metamask/providers": "^14.0.2",
-    "@xmtp/proto": "3.34.0",
-    "@xmtp/xmtp-js": "11.3.9",
+    "@metamask/providers": "^17.1.2",
+    "@xmtp/proto": "3.62.1",
+    "@xmtp/xmtp-js": "12.1.0",
     "buffer": "^6.0.3",
-    "ethers": "^6.6.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "styled-components": "5.3.11",
+    "ethers": "^6.13.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "styled-components": "6.1.12",
     "vite-plugin-wasm": "^3.3.0"
   },
   "devDependencies": {
     "@metamask/eslint-config": "^12.2.0",
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-jsdoc": "^48.2.0",
-    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-jsdoc": "^48.9.2",
+    "eslint-plugin-n": "^17.10.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.4.11",
-    "typescript": "^5.3.3",
-    "vite": "^4.5.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-packagejson": "^2.5.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

packages/site/src/App.tsx

@@ -2,7 +2,7 @@
 import './polyfills';
 import type { FunctionComponent, ReactNode } from 'react';
 import { useContext } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Footer, Header } from './components';
 import { GlobalStyle } from './config/theme';

packages/site/src/components/Buttons.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import type { MetamaskState } from '../hooks';
 import { shouldDisplayReconnectButton } from '../utils';

packages/site/src/components/Card.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 type CardProps = {
   content: {

packages/site/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import styled, { useTheme } from 'styled-components';
+import { styled, useTheme } from 'styled-components';
 
 import { MetaMask } from './MetaMask';
 import { PoweredBy } from './PoweredBy';

packages/site/src/components/Header.tsx

@@ -1,10 +1,11 @@
 import { useContext } from 'react';
-import styled, { useTheme } from 'styled-components';
-import { MetamaskActions, MetaMaskContext } from '../hooks';
-import { connectSnap, getThemePreference, getSnap } from '../utils';
+import { styled, useTheme } from 'styled-components';
+
 import { HeaderButtons } from './Buttons';
 import { SnapLogo } from './SnapLogo';
 import { Toggle } from './Toggle';
+import { MetamaskActions, MetaMaskContext } from '../hooks';
+import { connectSnap, getThemePreference, getSnap } from '../utils';
 
 const HeaderWrapper = styled.header`
   display: flex;
@@ -54,9 +55,9 @@ export const Header = ({
         type: MetamaskActions.SetInstalled,
         payload: installedSnap,
       });
-    } catch (e) {
-      console.error(e);
-      dispatch({ type: MetamaskActions.SetError, payload: e });
+    } catch (error) {
+      console.error(error);
+      dispatch({ type: MetamaskActions.SetError, payload: error });
     }
   };
   return (

packages/site/src/components/ListConversations.tsx

@@ -31,6 +31,7 @@ export const ListConversations = ({ client }: { client: Client | null }) => {
         title: 'List conversations with connected client',
         description: 'List all conversations',
         button: (
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
           <Button onClick={handleListConversations} disabled={!client}>
             Execute
           </Button>

packages/site/src/components/ListUserPreferences.tsx

@@ -32,6 +32,7 @@ export const ListUserPreferences = ({ client }: { client: Client | null }) => {
         description: 'List user preferences',
         button: (
           <>
+            {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
             <Button onClick={handleList} disabled={!client}>
               Execute
             </Button>

packages/site/src/components/Toggle.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 type CheckedProps = {
   readonly checked: boolean;

packages/site/src/hooks/MetamaskContext.tsx

@@ -1,12 +1,7 @@
-import {
-  createContext,
-  Dispatch,
-  ReactNode,
-  Reducer,
-  useEffect,
-  useReducer,
-} from 'react';
-import { Snap } from '../types';
+import type { Dispatch, ReactNode, Reducer } from 'react';
+import { createContext, useEffect, useReducer } from 'react';
+
+import type { Snap } from '../types';
 import { isFlask, getSnap } from '../utils';
 
 export type MetamaskState = {
@@ -64,12 +59,12 @@ const reducer: Reducer<MetamaskState, MetamaskDispatch> = (state, action) => {
 
 /**
  * MetaMask context provider to handle MetaMask and snap status.
- *
  * @param props - React Props.
  * @param props.children - React component to be wrapped by the Provider.
  * @returns JSX.
  */
 export const MetaMaskProvider = ({ children }: { children: ReactNode }) => {
+  // eslint-disable-next-line no-restricted-globals
   if (typeof window === 'undefined') {
     return <>{children}</>;
   }
@@ -94,17 +89,21 @@ export const MetaMaskProvider = ({ children }: { children: ReactNode }) => {
       });
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     detectFlask();
 
     if (state.isFlask) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       detectSnapInstalled();
     }
+    // eslint-disable-next-line no-restricted-globals
   }, [state.isFlask, window.ethereum]);
 
   useEffect(() => {
     let timeoutId: number;
 
     if (state.error) {
+      // eslint-disable-next-line no-restricted-globals
       timeoutId = window.setTimeout(() => {
         dispatch({
           type: MetamaskActions.SetError,
@@ -115,6 +114,7 @@ export const MetaMaskProvider = ({ children }: { children: ReactNode }) => {
 
     return () => {
       if (timeoutId) {
+        // eslint-disable-next-line no-restricted-globals
         window.clearTimeout(timeoutId);
       }
     };