Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

trivial - add linting to playground #1426

Merged
merged 2 commits into from
Oct 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,26 @@ jobs:

- name: Run Unit Tests
run: yarn test

lint-testapp:
name: Lint Testapp
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./examples/testapp

steps:
- name: Checkout
uses: actions/checkout@v4

- name: Checkout node action
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
cache-dependency-path: 'yarn.lock'

- name: Install NPM dependencies
run: yarn install --immutable

- name: eslint
run: yarn lint
87 changes: 87 additions & 0 deletions examples/testapp/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -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',
},
},
],
};
1 change: 0 additions & 1 deletion examples/testapp/src/components/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { useMemo } from 'react';

import { options, scwUrls, sdkVersions, useCBWSDK } from '../context/CBWSDKReactContextProvider';


type LayoutProps = {
children: React.ReactNode;
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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}
>
Expand Down
86 changes: 42 additions & 44 deletions examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
return;
}
},
[provider]
[method, provider]
);

const submit = useCallback(
Expand Down Expand Up @@ -101,7 +101,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
setError({ code, message, data });
}
},
[provider]
[format, method, provider, verify]
);

return (
Expand All @@ -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}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand All @@ -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;
Expand Down
39 changes: 16 additions & 23 deletions examples/testapp/src/components/SDKConfig/SDKConfig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -37,7 +34,7 @@ export function SDKConfig() {
};
setConfig(config_);
},
[config]
[config, setConfig]
);

const handleSetDataSuffix = useCallback(
Expand All @@ -51,7 +48,7 @@ export function SDKConfig() {
},
}));
},
[]
[setConfig]
);

const sixteenByteHex = useMemo(
Expand All @@ -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 (
Expand All @@ -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%">
Expand All @@ -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
Expand Down
Loading
Loading