unable to run "Getting started" code

Describe the bug Cannot run React example from docs. If the app is using TypeScript it even crashes.

SDK Version

• Version 2.0.0-alpha.7

To Reproduce Steps to reproduce the behavior: Just followed “Getting Started” here:

1. npm install @web3modal/react @web3modal/ethereum ethers
2. set this code

import { ConnectButton, Web3Modal } from '@web3modal/react'

const config = {
  projectId: '<YOUR_PROJECT_ID>', // Here I added the projectId I got on cloud.walletconnect.com
  theme: 'dark',
  accentColor: 'default',
  ethereum: {
    appName: 'myApp' // Here added the project name I created on cloud.walletconnect.com
  }
}

export default function App() {
  return (
    <>
      <ConnectButton />
      <Web3Modal config={config} />
    </>
  )
}

Question 1: I am running it locally, I could not add “localhost” on my cloud.walletconnect.com project allowed domains. Is it relevant? Question 2: should the appName in the config match the project name on cloud.walletconnect.com project? Question 3: Am I missing something?

Expected behavior Simply connect, I expect as a developer that it is easy to connect and the documentation is understandable or that I get some clear error message.

Screenshots Also I got this message from MetaMask: Connection Declined.

Desktop (please complete the following information):

• OS: iOS
• Browser Chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: iPhone13 mini
• OS: [e.g. iOS8.1]
• Browser Safari
• Version [e.g. 22]

Additional context On a React app using only JS, I was not able to connect Metamask. I tried on mobile also with TrustWallet, got no result. Tried also on React app based on TS.

By the way I am getting also this warning

WARNING in ./node_modules/json-rpc-engine/dist/mergeMiddleware.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/io/Code/my-app/node_modules/json-rpc-engine/src/mergeMiddleware.ts' file: Error: ENOENT: no such file or directory, open '/Users/io/Code/my-app/node_modules/json-rpc-engine/src/mergeMiddleware.ts'

[0xAsimetriq]

100%

basic connect snippet (needs to handle the ConnectButton to return null once account.isConnected) otherwise many other devs will get frustrated at first try.

This will be handled in next release (i.e. introduction of automatic Disconnect button), so should help others who don’t use custom buttons

HTTPS is mandatory if you run it on iPhone.

Gonna add this in as well 👍

[qeternity]

yes, fresh repo