add basic linting to playground

coinbase · Oct 10, 2024 · 1b2bfa1 · 1b2bfa1
1 parent 1bd8d67
commit 1b2bfa1
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 182 deletions.
diff --git a/examples/testapp/.eslintrc.js b/examples/testapp/.eslintrc.js
@@ -0,0 +1,87 @@
+module.exports = {
+  root: true,
+  extends: [
+    'preact',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  settings: {
+    react: {
+      pragma: 'h',
+    },
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    commonjs: true,
+  },
+  plugins: ['@typescript-eslint', 'simple-import-sort', 'unused-imports', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'off',
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [['^\\u0000'], ['^@?\\w'], ['^src(/.*|$)']],
+      },
+    ],
+    'simple-import-sort/exports': 'error',
+    'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'error', 'info'],
+      },
+    ],
+    'prettier/prettier': [
+      'error',
+      {
+        arrowParens: 'always',
+        bracketSpacing: true,
+        endOfLine: 'lf',
+        htmlWhitespaceSensitivity: 'css',
+        printWidth: 100,
+        quoteProps: 'as-needed',
+        semi: true,
+        singleQuote: true,
+        tabWidth: 2,
+        trailingComma: 'es5',
+        useTabs: false,
+      },
+    ],
+    // TODO: change this back to error
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'no-useless-constructor': 'off',
+    'no-restricted-globals': [
+      'error',
+      {
+        name: 'parseInt',
+        message: 'Use Number.parseInt instead of parseInt.',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/*.test.*'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};
diff --git a/examples/testapp/src/components/Layout.tsx b/examples/testapp/src/components/Layout.tsx
@@ -22,7 +22,6 @@ import { useMemo } from 'react';
 
 import { options, scwUrls, sdkVersions, useCBWSDK } from '../context/CBWSDKReactContextProvider';
 
-
 type LayoutProps = {
   children: React.ReactNode;
 };

diff --git a/examples/testapp/src/components/MethodsSection/MethodsSection.tsx b/examples/testapp/src/components/MethodsSection/MethodsSection.tsx
@@ -1,9 +1,9 @@
-import { Box, Grid, GridItem, Heading } from "@chakra-ui/react";
-import React from "react";
+import { Box, Grid, GridItem, Heading } from '@chakra-ui/react';
+import React from 'react';
 
-import { RpcRequestInput } from "../RpcMethods/method/RpcRequestInput";
-import { RpcMethodCard } from "../RpcMethods/RpcMethodCard";
-import { ShortcutType } from "../RpcMethods/shortcut/ShortcutType";
+import { RpcRequestInput } from '../RpcMethods/method/RpcRequestInput';
+import { RpcMethodCard } from '../RpcMethods/RpcMethodCard';
+import { ShortcutType } from '../RpcMethods/shortcut/ShortcutType';
 
 export function MethodsSection({
   title,
@@ -20,9 +20,9 @@ export function MethodsSection({
       <Grid
         mt={2}
         templateColumns={{
-          base: "100%",
-          md: "repeat(2, 50%)",
-          xl: "repeat(3, 33%)",
+          base: '100%',
+          md: 'repeat(2, 50%)',
+          xl: 'repeat(3, 33%)',
         }}
         gap={2}
       >

diff --git a/examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx b/examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx
@@ -62,7 +62,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
         return;
       }
     },
-    [provider]
+    [method, provider]
   );
 
   const submit = useCallback(
@@ -101,7 +101,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
         setError({ code, message, data });
       }
     },
-    [provider]
+    [format, method, provider, verify]
   );
 
   return (
@@ -116,57 +116,55 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
           </Button>
         </Flex>
         {params?.length > 0 && (
-          <>
-            <Accordion allowMultiple mt={4} defaultIndex={shortcuts ? [1] : [0]}>
+          <Accordion allowMultiple mt={4} defaultIndex={shortcuts ? [1] : [0]}>
+            <AccordionItem>
+              <AccordionButton>
+                <Heading as="h3" size="sm" marginY={2} flex="1" textAlign="left">
+                  Params
+                </Heading>
+                <AccordionIcon />
+              </AccordionButton>
+              <AccordionPanel pb={4}>
+                <VStack spacing={2} mt={2}>
+                  {params.map((param) => {
+                    const err = errors[param.key];
+                    return (
+                      <FormControl key={param.key} isInvalid={!!err} isRequired={param.required}>
+                        <InputGroup size="sm">
+                          <InputLeftAddon>{param.key}</InputLeftAddon>
+                          <Input
+                            {...register(param.key, {
+                              required: param.required ? `${param.key} required` : false,
+                            })}
+                          />
+                        </InputGroup>
+                        <FormErrorMessage>{err?.message as string}</FormErrorMessage>
+                      </FormControl>
+                    );
+                  })}
+                </VStack>
+              </AccordionPanel>
+            </AccordionItem>
+            {shortcuts?.length > 0 && (
               <AccordionItem>
                 <AccordionButton>
                   <Heading as="h3" size="sm" marginY={2} flex="1" textAlign="left">
-                    Params
+                    Shortcuts
                   </Heading>
                   <AccordionIcon />
                 </AccordionButton>
                 <AccordionPanel pb={4}>
-                  <VStack spacing={2} mt={2}>
-                    {params.map((param) => {
-                      const err = errors[param.key];
-                      return (
-                        <FormControl key={param.key} isInvalid={!!err} isRequired={param.required}>
-                          <InputGroup size="sm">
-                            <InputLeftAddon>{param.key}</InputLeftAddon>
-                            <Input
-                              {...register(param.key, {
-                                required: param.required ? `${param.key} required` : false,
-                              })}
-                            />
-                          </InputGroup>
-                          <FormErrorMessage>{err?.message as string}</FormErrorMessage>
-                        </FormControl>
-                      );
-                    })}
-                  </VStack>
+                  <HStack spacing={2}>
+                    {shortcuts.map((shortcut) => (
+                      <Button key={shortcut.key} onClick={() => submit(shortcut.data)}>
+                        {shortcut.key}
+                      </Button>
+                    ))}
+                  </HStack>
                 </AccordionPanel>
               </AccordionItem>
-              {shortcuts?.length > 0 && (
-                <AccordionItem>
-                  <AccordionButton>
-                    <Heading as="h3" size="sm" marginY={2} flex="1" textAlign="left">
-                      Shortcuts
-                    </Heading>
-                    <AccordionIcon />
-                  </AccordionButton>
-                  <AccordionPanel pb={4}>
-                    <HStack spacing={2}>
-                      {shortcuts.map((shortcut) => (
-                        <Button key={shortcut.key} onClick={() => submit(shortcut.data)}>
-                          {shortcut.key}
-                        </Button>
-                      ))}
-                    </HStack>
-                  </AccordionPanel>
-                </AccordionItem>
-              )}
-            </Accordion>
-          </>
+            )}
+          </Accordion>
         )}
         {response && (
           <VStack mt={4}>

diff --git a/examples/testapp/src/components/RpcMethods/method/signMessageMethods.ts b/examples/testapp/src/components/RpcMethods/method/signMessageMethods.ts
@@ -89,9 +89,8 @@ export const verifySignMsg = async ({
       });
       if (valid) {
         return `SigUtil Successfully verified signer as ${from}`;
-      } else {
-        return `SigUtil Failed to verify signer`;
       }
+      return 'SigUtil Failed to verify signer';
     }
     case 'eth_signTypedData_v1':
     case 'eth_signTypedData_v3':
@@ -104,16 +103,17 @@ export const verifySignMsg = async ({
       const valid = await client.verifyTypedData({
         address: from as `0x${string}`,
         domain: message['domain'] as TypedDataDomain,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         types: message['types'] as any,
         primaryType: message['primaryType'] as string,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         message: message['message'] as any,
         signature: sign as `0x${string}`,
       });
       if (valid) {
         return `SigUtil Successfully verified signer as ${from}`;
-      } else {
-        return `SigUtil Failed to verify signer`;
       }
+      return 'SigUtil Failed to verify signer';
     }
     default:
       return null;

diff --git a/examples/testapp/src/components/SDKConfig/SDKConfig.tsx b/examples/testapp/src/components/SDKConfig/SDKConfig.tsx
@@ -7,17 +7,14 @@ import {
   FormControl,
   Heading,
   Input,
-  Text,
   Switch,
-} from "@chakra-ui/react";
-import React, { useCallback, useMemo, useState } from "react";
-import { useCBWSDK } from "../../context/CBWSDKReactContextProvider";
-import { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface";
-import { keccak256, slice, toHex } from "viem";
+  Text,
+} from '@chakra-ui/react';
+import { Preference } from '@coinbase/wallet-sdk/dist/core/provider/interface';
+import React, { useCallback, useMemo, useState } from 'react';
+import { keccak256, slice, toHex } from 'viem';
 
-function is0xString(value: string): value is `0x${string}` {
-  return value.startsWith("0x");
-}
+import { useCBWSDK } from '../../context/CBWSDKReactContextProvider';
 
 function computeDataSuffix(value: string): string {
   return slice(keccak256(toHex(value)), 0, 16);
@@ -37,7 +34,7 @@ export function SDKConfig() {
       };
       setConfig(config_);
     },
-    [config]
+    [config, setConfig]
   );
 
   const handleSetDataSuffix = useCallback(
@@ -51,7 +48,7 @@ export function SDKConfig() {
         },
       }));
     },
-    []
+    [setConfig]
   );
 
   const sixteenByteHex = useMemo(
@@ -60,7 +57,7 @@ export function SDKConfig() {
   );
 
   const attributionAuto = useMemo(() => {
-    return "auto" in config.attribution && config.attribution?.auto;
+    return 'auto' in config.attribution && config.attribution?.auto;
   }, [config.attribution]);
 
   return (
@@ -76,24 +73,21 @@ export function SDKConfig() {
           </Flex>
           <Box>
             <FormControl mt={2}>
-              <Switch
-                defaultChecked={attributionAuto}
-                onChange={handleSetAttributionAuto}
-              />
+              <Switch defaultChecked={attributionAuto} onChange={handleSetAttributionAuto} />
             </FormControl>
           </Box>
         </Flex>
         {!attributionAuto && (
           <Flex
             justify="space-between"
             align={{
-              base: "flex-start",
-              md: "center",
+              base: 'flex-start',
+              md: 'center',
             }}
             my={2}
             flexDirection={{
-              base: "column",
-              md: "row",
+              base: 'column',
+              md: 'row',
             }}
           >
             <Box flexBasis="50%">
@@ -102,9 +96,8 @@ export function SDKConfig() {
                 <Code ml={2}>attribution.dataSuffix</Code>
               </Flex>
               <Text mt={2} fontSize="sm">
-                First 16 bytes of a unique string to identify your onchain
-                activity. Update the text box below to have your data suffix
-                applied
+                First 16 bytes of a unique string to identify your onchain activity. Update the text
+                box below to have your data suffix applied
               </Text>
               <FormControl mt={2}>
                 <Input