Fix lint issues on test site

package.json

@@ -11,7 +11,7 @@
     "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",
     "typecheck": "turbo run typecheck"

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);
       }
     };

packages/site/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { Client, SnapProvider } from '@xmtp/xmtp-js';
 import { useCallback, useContext, useState } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import {
   ConnectButton,
@@ -107,9 +107,9 @@ const Index = () => {
         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 });
     }
   };
 
@@ -153,6 +153,7 @@ const Index = () => {
                 'Get started by connecting to and installing the example snap.',
               button: (
                 <ConnectButton
+                  // eslint-disable-next-line @typescript-eslint/no-misused-promises
                   onClick={handleConnectClick}
                   disabled={!state.isFlask}
                 />
@@ -169,6 +170,7 @@ const Index = () => {
                 'While connected to a local running snap this button will always be displayed in order to update the snap if a change is made.',
               button: (
                 <ReconnectButton
+                  // eslint-disable-next-line @typescript-eslint/no-misused-promises
                   onClick={handleConnectClick}
                   disabled={!state.installedSnap}
                 />
@@ -181,7 +183,10 @@ const Index = () => {
           content={{
             title: 'Connect XMTP',
             description: 'Manage the storage of the snap',
-            button: <Button onClick={connectXmtp}>Connect to XMTP</Button>,
+            button: (
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
+              <Button onClick={connectXmtp}>Connect to XMTP</Button>
+            ),
           }}
         />
         <ListConversations client={xmtp} />

packages/site/src/utils/button.ts

@@ -1,5 +1,5 @@
-import type { Snap } from '../types';
 import { isLocalSnap } from './snap';
+import type { Snap } from '../types';
 
 export const shouldDisplayReconnectButton = (installedSnap?: Snap) =>
   installedSnap && isLocalSnap(installedSnap?.id);