[pull] master from coinbase:master

.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

.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

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',
+      },
+    },
+  ],
+};

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
+}

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",

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) {
             ))}
           </MenuList>
         </Menu>
-        {(sdkVersion === 'HEAD' || sdkVersion === '4.0.4') && (
+        {(sdkVersion === 'HEAD' || sdkVersion === latestPkgJson.version) && (
           <>
             <Menu>
               <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>

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<string, ShortcutType[]>;
+}) {
+  return (
+    <Box mt={4}>
+      <Heading size="md">{title}</Heading>
+      <Grid
+        mt={2}
+        templateColumns={{
+          base: '100%',
+          md: 'repeat(2, 50%)',
+          xl: 'repeat(3, 33%)',
+        }}
+        gap={2}
+      >
+        {methods.map((rpc) => (
+          <GridItem w="100%" key={rpc.method}>
+            <RpcMethodCard
+              method={rpc.method}
+              params={rpc.params}
+              format={rpc.format}
+              shortcuts={shortcutsMap?.[rpc.method]}
+            />
+          </GridItem>
+        ))}
+      </Grid>
+    </Box>
+  );
+}