Merge branch 'main' of github.com:blockscout/frontend into tom2drum/issue-963

.github/workflows/checks.yml

@@ -94,7 +94,7 @@ jobs:
     needs: [ code_quality ]
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.32.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-focal
 
     strategy:
       fail-fast: false

lib/csp/policies/walletConnect.ts

@@ -11,6 +11,7 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
     'connect-src': [
       '*.walletconnect.com',
       'wss://relay.walletconnect.com',
+      'wss://www.walletlink.org',
     ],
     'img-src': [
       '*.walletconnect.com',

package.json

@@ -27,14 +27,14 @@
     "format-svg": "./node_modules/.bin/svgo -r ./icons",
     "test:pw": "./playwright/make-envs-script.sh && NODE_OPTIONS=\"--max-old-space-size=4096\" ./node_modules/.bin/dotenv -e ./configs/envs/.env.pw -- playwright test -c playwright-ct.config.ts",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && rm -rf ./playwright/.cache && yarn test:pw",
-    "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.32.0-focal ./playwright/run-tests.sh",
+    "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.35.1-focal ./playwright/run-tests.sh",
     "test:pw:ci": "yarn test:pw --project=$PW_PROJECT",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch"
   },
   "dependencies": {
-    "@chakra-ui/react": "2.5.1",
-    "@chakra-ui/theme-tools": "^2.0.14",
+    "@chakra-ui/react": "2.7.1",
+    "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@metamask/providers": "^10.2.1",
@@ -47,8 +47,8 @@
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/ethereum": "^2.4.1",
-    "@web3modal/react": "^2.4.1",
+    "@web3modal/ethereum": "^2.6.2",
+    "@web3modal/react": "^2.6.2",
     "bignumber.js": "^9.1.0",
     "chakra-react-select": "^4.4.3",
     "crypto-js": "^4.1.1",
@@ -63,7 +63,7 @@
     "lodash": "^4.0.0",
     "mixpanel-browser": "^2.47.0",
     "monaco-editor": "^0.34.1",
-    "next": "13.3.0",
+    "next": "13.4.7",
     "nextjs-routes": "^1.0.8",
     "node-fetch": "^3.2.9",
     "papaparse": "^5.3.2",
@@ -80,16 +80,17 @@
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",
     "react-scroll": "^1.8.7",
-    "swagger-ui-react": "^4.15.5",
+    "swagger-ui-react": "^5.1.0",
     "use-font-face-observer": "^1.2.1",
-    "viem": "^0.3.39",
-    "wagmi": "^1.0.9"
+    "viem": "^1.1.8",
+    "wagmi": "^1.3.3"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.32.3",
+    "@playwright/experimental-ct-react": "1.35.1",
+    "@playwright/test": "^1.35.1",
     "@svgr/webpack": "^6.5.1",
     "@testing-library/react": "^14.0.0",
-    "@total-typescript/ts-reset": "^0.3.7",
+    "@total-typescript/ts-reset": "^0.4.0",
     "@types/crypto-js": "^4.1.1",
     "@types/csp-dev": "^1.0.0",
     "@types/d3": "^7.4.0",
@@ -105,7 +106,7 @@
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/swagger-ui-react": "^4.11.0",
     "@types/ws": "^8.5.3",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@vitejs/plugin-react": "^4.0.0",
     "css-loader": "^6.7.3",
     "dotenv-cli": "^6.0.0",
@@ -124,12 +125,11 @@
     "lint-staged": ">=10",
     "mockdate": "^3.0.5",
     "next-transpile-modules": "^10.0.0",
-    "playwright": "1.32.3",
     "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "4.9.5",
+    "typescript": "^5.1.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2",
     "ws": "^8.11.0"

ui/address/contract/ContractMethodCallable.tsx

@@ -20,7 +20,7 @@ interface ResultComponentProps<T extends SmartContractMethod> {
 interface Props<T extends SmartContractMethod> {
   data: T;
   onSubmit: (data: T, args: Array<string | Array<unknown>>) => Promise<ContractMethodCallResult<T>>;
-  ResultComponent: (props: ResultComponentProps<T>) => JSX.Element | null;
+  resultComponent: (props: ResultComponentProps<T>) => JSX.Element | null;
   isWrite?: boolean;
 }
 
@@ -61,7 +61,7 @@ const parseArrayValue = (value: string) => {
   }
 };
 
-const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, ResultComponent, isWrite }: Props<T>) => {
+const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, resultComponent: ResultComponent, isWrite }: Props<T>) => {
 
   const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
   const [ isLoading, setLoading ] = React.useState(false);

ui/address/contract/ContractRead.tsx

@@ -74,7 +74,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
         key={ id + '_' + index }
         data={ item }
         onSubmit={ handleMethodFormSubmit }
-        ResultComponent={ ContractReadResult }
+        resultComponent={ ContractReadResult }
       />
     );
   }, [ handleMethodFormSubmit ]);

ui/address/contract/ContractWrite.tsx

@@ -88,7 +88,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
         key={ id + '_' + index }
         data={ item }
         onSubmit={ handleMethodFormSubmit }
-        ResultComponent={ ContractWriteResult }
+        resultComponent={ ContractWriteResult }
         isWrite
       />
     );

ui/address/details/AddressFavoriteButton.tsx

@@ -63,6 +63,7 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
           size="sm"
           pl="6px"
           pr="6px"
+          flexShrink={ 0 }
           onClick={ handleClick }
           icon={ <Icon as={ watchListId ? starFilledIcon : starOutlineIcon } boxSize={ 5 }/> }
           onFocusCapture={ usePreventFocusAfterModalClosing() }

ui/shared/Web3ModalProvider.tsx

@@ -45,7 +45,7 @@ const getConfig = () => {
     ]);
     const wagmiConfig = createConfig({
       autoConnect: true,
-      connectors: w3mConnectors({ projectId: appConfig.walletConnect.projectId, chains, version: 2 }),
+      connectors: w3mConnectors({ projectId: appConfig.walletConnect.projectId, chains }),
       publicClient,
     });
     const ethereumClient = new EthereumClient(wagmiConfig, chains);

ui/txs/TxsContent.tsx

@@ -96,7 +96,6 @@ const TxsContent = ({
         <AddressCsvExportLink
           address={ currentAddress }
           params={{ type: 'transactions', filterType: 'address', filterValue }}
-          ml={ 2 }
           isLoading={ query.pagination.isLoading }
         />
       ) : null