nexth,wslyvh

Upgrade to Wagmi v1.0 and Viem

wagmi just released their v1.0 which replaces ethers for Viem
https://next.wagmi.sh/react/migration-guide#1xx-breaking-changes

Would be great to upgrade and bring Nexth up to date with all the latest versions

Error about loader after npm install

Hi, I got following errors after run npm install and npm dev run, I am an entry-level player, could you please check?

error - ./node_modules/react-native/index.js
Module parse failed: Unexpected token (14:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // Components

import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';

Installing Shadcn bricks the Interface

First of all, great starter – really nice looking

One issue I am noticing is that when I install the shadcn ui library, the UI fails over, and then when I boot up the development server, it just bricks and shows the /not-found page when the page loads.

I was using bun, but same issue pops up using yarn – driving me up the wall 🙃

Is there any possibility to fix disconnection issue after switch networks in metamask?

It is known issue in MetaMask. For example, when switch to custom networks and/or test networks (Polygon, Mumbai, Arbitrum, BSC etc) from Ethereum, Metamask fire disconnect event, it cause Metamask disconnection issue.

Current version of nexth also have this issue, I confirmed it. (Just try Switch network from Ethereum to Polygon through dapp or metamask itself)

Is there any plan to fix this problem in the nexth?
I will appreciate it if can share alternative solution to fix until MetaMask fix officially.

Open a Discussion Group

Hi @wslyvh, thanks for your repo,

Would you mind to create a discussion group that let's everyone discuss the feature they want?

Here is the reference on how to open GitHub discussion ¹ . It is free. 😄

https://docs.github.com/en/discussions/quickstart ↩

Found incompatible module

I ran into the below error while trying to install the dependencies:

[email protected]: The engine "node" is incompatible with this module. Expected version ">=16.15.0". Got "16.13.2"

I was able to resolve it with this command: "yarn install --ignore-engines" and thought I should open an issue in case anyone else is having the same problem.

upgrade major packages to their latest versions?

example below

for example: tanstack/react-query


'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState, type ReactNode } from 'react'
import { WagmiProvider } from 'wagmi'

import { config } from '@/wagmi'

export function Providers(props: { children: ReactNode }) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Migrate wagmi V1 -> V2

Wevm recently released their new versions of Wagmi and Viem and now incl. tanstack as a peer dependency.

We should migrate from V1 to V2, following their guide at
https://wagmi.sh/react/guides/migrate-from-v1-to-v2

when I run the project , there is an error, how to fix it?

PS D:\projects\js_projects\nexth> npm run dev

[email protected] dev
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./src/pages/_app.tsx:3:0
Module not found: Can't resolve 'components/layout/Layout'
1 | import type { AppProps } from 'next/app'
2 | // import { Layout } from 'components/layout'

3 | import { Layout } from 'components/layout/Layout'
4 | import { Web3Provider } from 'providers/Web3'
5 | import { ChakraProvider } from 'providers/Chakra'
6 | import { useIsMounted } from 'hooks/useIsMounted'

https://nextjs.org/docs/messages/module-not-found
wait - compiling...
error - ./src/pages/_app.tsx:2:0
Module not found: Can't resolve 'components/layout'
1 | import type { AppProps } from 'next/app'

2 | import { Layout } from 'components/layout'
3 | // import { Layout } from 'components/layout/Layout'
4 | import { Web3Provider } from 'providers/Web3'
5 | import { ChakraProvider } from 'providers/Chakra'

https://nextjs.org/docs/messages/module-not-found

[docs] Create tutorials, videos or blog posts about Nexth

There's a request from Developer DAO to cover Nexth in a blog post for their knowledge base.
But I'd also love to see other content, tutorials or writings about projects that are built using Nexth.

A potential starting guide could be (thanks to @wolovim)

whats a starter kit?
what is Nexth?
what has been built with it already?
what prerequisites do i need to use it?
- intro to each of the major building blocks/concepts/tools within
how can i use this to great effect in a hackathon?
what can i build with it?
- inspo/ideas for what you can build

Happy to collaborate with someone on this!

getting this error when running yarn after following install instructions.

node 18

error:
`yarn run v1.22.21
$ yarn workspaces -pt run dev

nexth
$ next dev
▲ Next.js 13.5.4

Local: http://localhost:3000
Environments: .env.local

✓ Ready in 2.5s
○ Compiling /page ...
⚠ ../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/Users/alex/Documents/nexth/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'

Import trace for requested module:
../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
../../node_modules/@walletconnect/core/dist/index.cjs.js
../../node_modules/@walletconnect/sign-client/dist/index.cjs.js
../../node_modules/@walletconnect/universal-provider/dist/index.es.js
../../node_modules/@walletconnect/ethereum-provider/dist/index.es.js
../../node_modules/@wagmi/connectors/dist/walletConnect.js
../../node_modules/@wagmi/core/dist/connectors/walletConnect.js
../../node_modules/wagmi/dist/connectors/walletConnect.js
../../node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
../../node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./src/context/Web3.tsx

../../node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/alex/Documents/nexth/node_modules/node-fetch/lib'

Import trace for requested module:
../../node_modules/node-fetch/lib/index.js
../../node_modules/cross-fetch/dist/node-ponyfill.js
../../node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
../../node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
../../node_modules/@walletconnect/universal-provider/dist/index.es.js
../../node_modules/@walletconnect/ethereum-provider/dist/index.es.js
../../node_modules/@wagmi/connectors/dist/walletConnect.js
../../node_modules/@wagmi/core/dist/connectors/walletConnect.js
../../node_modules/wagmi/dist/connectors/walletConnect.js
../../node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
../../node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./src/context/Web3.tsx

../../node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/Users/alex/Documents/nexth/node_modules/pino/lib'

Import trace for requested module:
../../node_modules/pino/lib/tools.js
../../node_modules/pino/pino.js
../../node_modules/@walletconnect/logger/dist/cjs/index.js
../../node_modules/@walletconnect/universal-provider/dist/index.es.js
../../node_modules/@walletconnect/ethereum-provider/dist/index.es.js
../../node_modules/@wagmi/connectors/dist/walletConnect.js
../../node_modules/@wagmi/core/dist/connectors/walletConnect.js
../../node_modules/wagmi/dist/connectors/walletConnect.js
../../node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
../../node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./src/context/Web3.tsx
Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.
Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.
⚠ ../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/Users/alex/Documents/nexth/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'

Import trace for requested module:
../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
../../node_modules/@walletconnect/core/dist/index.cjs.js
../../node_modules/@walletconnect/sign-client/dist/index.cjs.js
../../node_modules/@walletconnect/universal-provider/dist/index.es.js
../../node_modules/@walletconnect/ethereum-provider/dist/index.es.js
../../node_modules/@wagmi/connectors/dist/walletConnect.js
../../node_modules/@wagmi/core/dist/connectors/walletConnect.js
../../node_modules/wagmi/dist/connectors/walletConnect.js
../../node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
../../node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./src/context/Web3.tsx

../../node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/alex/Documents/nexth/node_modules/node-fetch/lib'

Import trace for requested module:
../../node_modules/node-fetch/lib/index.js
../../node_modules/cross-fetch/dist/node-ponyfill.js
../../node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
../../node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
../../node_modules/@walletconnect/universal-provider/dist/index.es.js
../../node_modules/@walletconnect/ethereum-provider/dist/index.es.js
../../node_modules/@wagmi/connectors/dist/walletConnect.js
../../node_modules/@wagmi/core/dist/connectors/walletConnect.js
../../node_modules/wagmi/dist/connectors/walletConnect.js
../../node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
../../node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./src/context/Web3.tsx

../../node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/Users/alex/Documents/nexth/node_modules/pino/lib'

Import trace for requested module:
../../node_modules/pino/lib/tools.js
../../node_modules/pino/pino.js
../../node_modules/@walletconnect/logger/dist/cjs/index.js
../../node_modules/@walletconnect/universal-provider/dist/index.es.js
../../node_modules/@walletconnect/ethereum-provider/dist/index.es.js
../../node_modules/@wagmi/connectors/dist/walletConnect.js
../../node_modules/@wagmi/core/dist/connectors/walletConnect.js
../../node_modules/wagmi/dist/connectors/walletConnect.js
../../node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
../../node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./src/context/Web3.tsx
⚠ ../../node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/Users/alex/Documents/nexth/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'