can not integrate Web3modal into saleor/storefront adding config file and context file from web3modal make the loading of checkout page fail

[Maltstar]

Summary

Link to minimal reproducible example

just
switch to the webshop branch
execute npm install
then the error is located in /src/checkout/Root.tsx

Summary

When adding the config file and the context file as per Web3Modal documentation after installing web3modal into the saleor storefront, the call to createClient from "urql"(node_modules) does not work anymore in src/checkout/Root.tsx as result the checkout page can not be loaded

Error:
Argument of type 
'import("ethGlobal/2024/04/Grouponweb3/Shop/test4/eCoupon-ScalingEth24/node_modules/undici-types/fetch").
RequestInfo' is not assignable to parameter of type 'RequestInfo'.
  Type 'URL' is not assignable to type 'RequestInfo'.
    Type 'URL' is missing the following properties 
from type 'Request': cache, credentials, destination, headers, and 17 more.ts(2345)

package.json

{
	"name": "saleor-storefront",
	"version": "0.1.0",
	"private": true,
	"type": "module",
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"predev": "pnpm run generate",
		"prebuild": "pnpm run generate",
		"lint": "next lint --dir src --fix",
		"generate": "graphql-codegen --config .graphqlrc.ts",
		"prepare": "husky install",
		"test": "playwright test"
	},
	"dependencies": {
		"@adyen/adyen-web": "5.53.2",
		"@adyen/api-library": "14.4.0",
		"@headlessui/react": "1.7.17",
		"@saleor/auth-sdk": "0.14.0",
		"@stripe/react-stripe-js": "2.3.1",
		"@stripe/stripe-js": "2.1.11",
		"@tanstack/react-query": "5.29.2",
		"@web3modal/wagmi": "4.1.10",
		"clsx": "2.0.0",
		"editorjs-html": "3.4.3",
		"encoding": "0.1.13",
		"formik": "2.4.5",
		"libphonenumber-js": "1.10.49",
		"lodash-es": "4.17.21",
		"lucide-react": "0.292.0",
		"next": "14.0.2",
		"pino-pretty": "11.0.0",
		"query-string": "8.1.0",
		"react": "18.2.0",
		"react-dom": "18.2.0",
		"react-error-boundary": "4.0.11",
		"react-spinners": "0.13.8",
		"react-test-renderer": "18.2.0",
		"react-toastify": "9.1.3",
		"ts-invariant": "0.10.3",
		"url-join": "5.0.0",
		"urql": "4.0.5",
		"viem": "2.9.23",
		"wagmi": "2.5.20",
		"xss": "1.0.14",
		"yup": "1.3.2",
		"zustand": "4.4.6"
	},
	"devDependencies": {
		"@graphql-codegen/cli": "5.0.0",
		"@graphql-codegen/client-preset": "4.1.0",
		"@graphql-typed-document-node/core": "3.2.0",
		"@next/env": "14.0.2",
		"@parcel/watcher": "2.3.0",
		"@playwright/test": "1.39.0",
		"@tailwindcss/forms": "0.5.7",
		"@tailwindcss/typography": "0.5.10",
		"@types/lodash-es": "4.17.11",
		"@types/node": "20.9.0",
		"@types/react": "18.2.37",
		"@types/react-dom": "18.2.15",
		"@types/url-join": "4.0.3",
		"@typescript-eslint/eslint-plugin": "6.10.0",
		"@typescript-eslint/parser": "6.10.0",
		"autoprefixer": "10.4.16",
		"eslint": "8.53.0",
		"eslint-config-next": "14.0.2",
		"eslint-config-prettier": "9.0.0",
		"eslint-plugin-import": "2.29.0",
		"eslint-plugin-playwright": "0.18.0",
		"graphql-tag": "2.12.6",
		"husky": "8.0.3",
		"lint-staged": "15.0.2",
		"postcss": "8.4.31",
		"prettier": "3.0.3",
		"prettier-plugin-tailwindcss": "0.5.7",
		"schema-dts": "1.1.2",
		"tailwindcss": "3.3.5",
		"typescript": "5.2.2",
		"wonka": "6.3.4"
	},
	"resolutions": {
		"graphql": "16.8.1"
	},
	"packageManager": "pnpm@8.9.0",
	"engines": {
		"pnpm": ">=8.9.0",
		"node": ">=18"
	}
}

Steps to reproduce

1.clone the repo https://github.com/Hack-Projects-n-Teams/eCoupon-ScalingEth24.git and switch to the branch webshop
2.install the package run npm install

or

1.clone the repo https://github.com/saleor/storefront.git
2. install the package run npm install
4. install web3modal npm install @web3modal/wagmi wagmi viem @tanstack/react-query
5. add the config file and the context file as per Web3Modal documentation into the folder src

then

• navigate to /src/checkout/Root.tsx on line 28:

fetch: (input , init) => saleorAuthClient.fetchWithAuth(input as NodeJS.fetch.RequestInfo, init),

you will notice an error on input if you scroll the input with the mouse

(input as NodeJS.fetch.RequestInfo)

Error:
Argument of type 
'import(saleor/storefront/node_modules/undici-types/fetch").
RequestInfo' is not assignable to parameter of type 'RequestInfo'.
  Type 'URL' is not assignable to type 'RequestInfo'.
    Type 'URL' is missing the following properties 
from type 'Request': cache, credentials, destination, headers, and 17 more.ts(2345)

as a result the checkout page is not loaded.
It seems that adding the files src/config/index.tsx and src/context/index.tsx triggers a change of type of the input parameter of the fetch function in createClient(), somehow the input is not anymore from RequestInfo type but has the URL type now.

A link to a reproduction repository

https://github.com/Hack-Projects-n-Teams/eCoupon-ScalingEth24.git

Output from envinfo

System:

• OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
• CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
• Memory: 7.51 GB / 22.82 GB
• Container: Yes
• Shell: 5.1.16 - /bin/bash

Binaries:

• Node: 20.10.0 - /usr/local/bin/node
• npm: 10.2.5 - /usr/local/bin/npm
• pnpm: 8.9.0 - /usr/local/bin/pnpm

Browsers:

• Brave Browser: 123.1.64.122