diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index f4b9ec1d82..6df40729ad 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -15,10 +15,10 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Checkout node action - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: '.nvmrc' cache-dependency-path: 'yarn.lock' @@ -38,10 +38,10 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Checkout node action - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: '.nvmrc' cache-dependency-path: '**/yarn.lock' @@ -50,7 +50,7 @@ jobs: run: yarn install --immutable - name: Runs compile asset script - run: node ./compile-assets.js + run: node ./compile-assets.cjs - name: Check Types run: yarn typecheck @@ -64,14 +64,14 @@ jobs: strategy: matrix: - node-version: [16.x, 18.x, 20.x] + node-version: [20.x, 22.x] steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache-dependency-path: '**/yarn.lock' @@ -80,7 +80,30 @@ jobs: run: yarn install --immutable - name: Runs compile asset script - run: node ./compile-assets.js + run: node ./compile-assets.cjs - 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 diff --git a/.github/workflows/versioning.yml b/.github/workflows/versioning.yml index b85546e75a..1a0ed710fb 100644 --- a/.github/workflows/versioning.yml +++ b/.github/workflows/versioning.yml @@ -45,8 +45,8 @@ jobs: - name: Install NPM dependencies run: yarn install --immutable - - - name: Update version.ts file + + - name: Update sdk-info.ts file run: yarn prebuild - name: Commit and branch updated version diff --git a/examples/testapp/.eslintrc.js b/examples/testapp/.eslintrc.js new file mode 100644 index 0000000000..3bd3c1898f --- /dev/null +++ b/examples/testapp/.eslintrc.js @@ -0,0 +1,87 @@ +module.exports = { + 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', + 'jest/no-deprecated-functions': '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/config/headers.js b/examples/testapp/config/headers.js new file mode 100644 index 0000000000..bcf4667189 --- /dev/null +++ b/examples/testapp/config/headers.js @@ -0,0 +1,17 @@ +function getCrossOriginOpenerPolicyHeaders() { + return { + source: "/", + headers: [ + { + key: "Cross-Origin-Opener-Policy", + value: "same-origin", + }, + ] + } +} + +// To test these headers in your local environment, +// create a next.config and add the following rules to the next.config.js headers property. +module.exports = { + getCrossOriginOpenerPolicyHeaders +} diff --git a/examples/testapp/package.json b/examples/testapp/package.json index 45db0030e7..9402be999c 100644 --- a/examples/testapp/package.json +++ b/examples/testapp/package.json @@ -15,7 +15,7 @@ "@coinbase/wallet-sdk": "workspace:*", "@coinbase/wallet-sdk-3.7.2": "npm:@coinbase/wallet-sdk@3.7.2", "@coinbase/wallet-sdk-3.9.3": "npm:@coinbase/wallet-sdk@3.9.3", - "@coinbase/wallet-sdk-4.0.4": "npm:@coinbase/wallet-sdk@latest", + "@coinbase/wallet-sdk-latest": "npm:@coinbase/wallet-sdk@latest", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@metamask/eth-sig-util": "^7.0.0", diff --git a/examples/testapp/src/components/Layout.tsx b/examples/testapp/src/components/Layout.tsx index 7fbae65c73..5ff0f98189 100644 --- a/examples/testapp/src/components/Layout.tsx +++ b/examples/testapp/src/components/Layout.tsx @@ -17,6 +17,7 @@ import { useBreakpointValue, useDisclosure, } from '@chakra-ui/react'; +import latestPkgJson from '@coinbase/wallet-sdk/package.json'; import { useMemo } from 'react'; import { options, scwUrls, sdkVersions, useCBWSDK } from '../context/CBWSDKReactContextProvider'; @@ -65,7 +66,7 @@ export function Layout({ children }: LayoutProps) { ))} - {(sdkVersion === 'HEAD' || sdkVersion === '4.0.4') && ( + {(sdkVersion === 'HEAD' || sdkVersion === latestPkgJson.version) && ( <> }> diff --git a/examples/testapp/src/components/MethodsSection/MethodsSection.tsx b/examples/testapp/src/components/MethodsSection/MethodsSection.tsx new file mode 100644 index 0000000000..9085d00c86 --- /dev/null +++ b/examples/testapp/src/components/MethodsSection/MethodsSection.tsx @@ -0,0 +1,42 @@ +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'; + +export function MethodsSection({ + title, + methods, + shortcutsMap, +}: { + title: string; + methods: RpcRequestInput[]; + shortcutsMap?: Record; +}) { + return ( + + {title} + + {methods.map((rpc) => ( + + + + ))} + + + ); +} diff --git a/examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx b/examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx index cbb3d00398..f670c76bb1 100644 --- a/examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx +++ b/examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx @@ -13,9 +13,9 @@ import { FormErrorMessage, Heading, HStack, - Input, InputGroup, InputLeftAddon, + Textarea, VStack, } from '@chakra-ui/react'; import React, { useCallback } from 'react'; @@ -62,7 +62,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) { return; } }, - [provider] + [method, provider] ); const submit = useCallback( @@ -85,23 +85,18 @@ export function RpcMethodCard({ format, method, params, shortcuts }) { values = format(data); } try { - // connection required - if (!provider?.connected) { - await provider.enable(); - } - const response = await provider.request({ method, params: values, }); setResponse(response); - verify(response, data); + await verify(response, data); } catch (err) { const { code, message, data } = err; setError({ code, message, data }); } }, - [provider] + [format, method, provider, verify] ); return ( @@ -116,57 +111,84 @@ export function RpcMethodCard({ format, method, params, shortcuts }) { {params?.length > 0 && ( - <> - + + + + + Params + + + + + + {params.map((param) => { + const err = errors[param.key]; + return ( + + + + {param.key} + +