wevm / create-wagmi Goto Github PK
View Code? Open in Web Editor NEWCreate wagmi apps with one command
Home Page: https://wagmi.sh
License: MIT License
Create wagmi apps with one command
Home Page: https://wagmi.sh
License: MIT License
Run this template: npm init wagmi -- --template vite-react-rainbowkit
Replace wagmi.ts by this:
import { connectorsForWallets, getDefaultWallets } from '@rainbow-me/rainbowkit'
import { configureChains, createClient } from 'wagmi'
import { goerli, mainnet } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
import {
argentWallet,
trustWallet,
ledgerWallet,
} from '@rainbow-me/rainbowkit/wallets';
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, ...(import.meta.env?.MODE === 'development' ? [goerli] : [])],
[
publicProvider(),
],
)
const { wallets } = getDefaultWallets({
appName: 'My wagmi + RainbowKit App',
chains,
})
const connectors = connectorsForWallets([
...wallets,
{
groupName: 'Other',
wallets: [
argentWallet({ chains }),
trustWallet({ chains }),
ledgerWallet({ chains }),
],
},
]);
export const client = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
})
export { chains }
Now try ledger live You will have an issue
Metamask is not ready on first load (it's hidden due to the filter in template) and I did reload the second time then it's visible, and from that second load it works just fine.
Is there any work around on this issue? it's just inconvenient to reload the page to make metamask working.
After initializing a project with npm init wagmi
and selecting the create-react-app
option, the instructions suggest cd
ing into the directory and running npm run dev
, but the project doesn't have a dev
script (it has a start
one).
Following the instructions, I get the following:
$ npm init wagmi
Welcome to create-wagmi – the quickest way to get started with wagmi!
✔ What is your project named? … my-app-connectkit
✔ What template would you like to use? › Next.js + ConnectKit
Creating a new wagmi app in /Users/alex/src/playground/my-app-connectkit.
Using npm.
✖ Failed to install packages.
Command failed with exit code 1: npm install --quiet
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/wagmi
npm ERR! wagmi@"^0.7.15" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer wagmi@"^0.6.0" from [email protected]
npm ERR! node_modules/connectkit
npm ERR! connectkit@"^0.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/alex/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alex/.npm/_logs/2022-11-16T21_50_03_903Z-debug-0.log
Bare NextJS project and the one with rainbowkit template get created correctly.
The CLI tool creates a NextJS project /w connectkit
npm init wagmi --template next-with-connectkit
No response
No response
When running yarn create wagmi
, create-wagmi
does not detect yarn
and instead uses npm
to install dependencies. create-wagmi
works as expected when using npm
and pnpm
.
❯ yarn --version
1.22.15
❯ yarn create wagmi
yarn create v1.22.15
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "[email protected]" with binaries:
- create-wagmi
[#############################################################################################################] 117/117
Welcome to create-wagmi – the quickest way to get started with wagmi!
✔ What is your project named? … my-app
✔ What framework would you like to use? › Vite (React)
✔ What template would you like to use? › Default
✔ What providers would you like to use? › Public RPC
Creating a new wagmi app in /Users/tom/Desktop/my-app.
Using Vite (React).
Using npm.
✔ Installed packages.
✔ Initialized git repository.
―――――――――――――――――――――
Success! Created my-app at /Users/tom/Desktop/my-app
To start your app, run `cd my-app` and then `npm run dev`
―――――――――――――――――――――
Important note: It is HIGHLY recommended that you add an alchemyProvider, infuraProvider, or alike to src/wagmi.ts before deploying your project to production to prevent being rate-limited.
Read more: https://wagmi.sh/docs/getting-started#configure-chains
✨ Done in 13.29s.
asciinema link: https://asciinema.org/a/xfG2Nf7LxeDCmw21WGbue6EVb
Automatically including API keys in the initial commit is quite unhelpful IMO. If a user wants to commit their API keys, they should have to modify gitignore to allow the .env file, instead of forcing them to amend the initial commit to remove its contents.
https://github.com/wagmi-dev/create-wagmi/blob/main/templates/vite-react/rainbowkit/_dot_gitignore I know this is the case with the vite-react-rainbowkit template, but it may apply to other templates.
latest
Error thrown when running pnpm build
Should work
pnpm create wagmi --template vite-react-rainbowkit --skip-git --pnpm my_app
cd my_app
pnpm i && pnpm build
pnpm create wagmi --template vite-react-rainbowkit
➜ wagmi-repro yb
[email protected] build /Users/willcory/wagmi-repro
tsc && vite build
vite v4.3.5 building for production...
✓ 134 modules transformed.
✓ built in 406ms
[vite]: Rollup failed to resolve import "@safe-globalThis/safe-apps-provider" from "/Users/willcory/wagmi-repro/node_modules/.pnpm/@Wagmi+connectors@1.0.5_@wagmi[email protected][email protected][email protected][email protected]/node_modules/@wagmi/connectors/dist/safe.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
error during build:
Error: [vite]: Rollup failed to resolve import "@safe-globalThis/safe-apps-provider" from "/Users/willcory/wagmi-repro/node_modules/.pnpm/@Wagmi+connectors@1.0.5_@wagmi[email protected][email protected][email protected][email protected]/node_modules/@wagmi/connectors/dist/safe.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
at viteWarn (file:///Users/willcory/wagmi-repro/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46561:23)
at onwarn (/Users/willcory/wagmi-repro/node_modules/.pnpm/@vitejs[email protected][email protected]/node_modules/@vitejs/plugin-react/dist/index.cjs:257:9)
at onRollupWarning (file:///Users/willcory/wagmi-repro/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46582:9)
at onwarn (file:///Users/willcory/wagmi-repro/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46332:13)
at Object.onwarn (file:///Users/willcory/wagmi-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25419:13)
at ModuleLoader.handleInvalidResolvedId (file:///Users/willcory/wagmi-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23992:26)
at file:///Users/willcory/wagmi-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23952:26
ELIFECYCLE Command failed with exit code 1.
When using
pnpm create wagmi --template next-rainbowkit
I get the following error message:
🙈 the template "next-rainbowkit" does not exist.
Choose a valid name. Available: next, vite-react, next-cli-abi, next-cli-erc, next-cli-etherscan, next-cli-foundry, vite-react-cli-abi, vite-react-cli-erc, vite-react-cli-etherscan, vite-react-cli-foundry
The templates exist in this repo, but are not available with the command.
pnpm create wagmi --template next-cli-foundry
pnpm build
next build
will be executed and fail with
Type error: Page "src/app/page.tsx" does not match the required types of a Next.js Page.
"Page" is not a valid Page export field.
All next templates except "default" seem to be affected.
page.tsx exports the Page
component both as a named export and a default export.
Export only Page as default.
I am happy to submit a PR that implements this fix.
0.10.0
Hi,
I followed https://wagmi.sh/cli/create-wagmi to initalize a new wagmi project using
$ npm init wagmi -- --template next-web3modal
in the menu I selected next.js and Web3Modal.
After installing I run the program using
$ npm run dev
and visited http://localhost:3000
the following error message appeared on the webpage:
1 of 1 unhandled error
Unhandled Runtime Error
Error: ClientCtrl has no client set
Call Stack
client
node_modules/@web3modal/ui/node_modules/@web3modal/core/dist/index.js (1:767)
he
node_modules/@web3modal/ui/dist/index.js (110:60951)
legacyCustomElement
node_modules/@lit/reactive-element/development/decorators/custom-element.js (7:0)
customElement/<
node_modules/@lit/reactive-element/development/decorators/custom-element.js (42:0)
ke
node_modules/@web3modal/ui/dist/index.js (110:60738)
<unknown>
node_modules/@web3modal/ui/dist/index.js (110:61418)
./node_modules/@web3modal/ui/dist/index.js
file:/home/degen/Git/first_wagmi_project/.next/static/chunks/node_modules_web3modal_ui_dist_index_js.js (1410:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/home/degen/Git/first_wagmi_project/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
Best,
Comedian
No response
showing the website without any error
No response
No response
Steps to reproduce:
Generate a fresh vite-cli-foundry template project using yarn create wagmi --template vite-react-cli-foundry
. Run forge test
. The following message appears:
[⠊] Compiling...
No files changed, compilation skipped
No tests found in project! Forge looks for functions that starts with `test`.
However, there is a test
subdir in the contracts
directory. Should these tests be visible to foundry via this command or no?
System: Linux - Endeavour OS
Node version: 19.3.0
Pnpm version: 7.19.0
Reproduce:
pnpm create wagmi
.cp .env.example .env
pnpm dev
Effect:
Blank page, console shows this error:
Uncaught TypeError: (intermediate value).env is undefined
<anonymous> wagmi.ts:8
[wagmi.ts:8:12](http://127.0.0.1:5173/[...]/src/wagmi.ts)
<anonymous> wagmi.ts:8
Workaround:
Altering chains array so that it doesn't use import.meta.env.NODE_ENV
variable fixes the issue.
CLI options passed to npm init
options are applied to npm exec
. To forward options to create-wagmi
, the command in the docs should include a --
.
npm init wagmi -- --template next-with-connectkit
Here's a screenshot demonstrating the issue (the --template
option is not getting passed to create-wagmi
, hence the prompt)
(pnpm create
seems to automatically forward options, not sure about yarn create
)
On:
; node --version
v18.16.0
; npm --version
9.6.7
I just create with Next.js and Default template:
; npm init wagmi
Welcome to create-wagmi – the quickest way to get started with wagmi!
✔ What is your project named? … wagmi-repro-2
✔ What framework would you like to use? › Next.js
✔ What template would you like to use? › Default
✔ What providers would you like to use? ›
✔ Optional: What is your WalletConnect Cloud Project ID?
Find it at: https://cloud.walletconnect.com/sign-in
⏎ to skip
… 2ad6364dd286987a010c2b01900d9d22
Creating a new wagmi app in /Users/llwu/git/@llllvvuu/wagmi-repro-2.
Using Next.js.
✔ Added WalletConnect Project ID.
Using npm.
✔ Installed packages.
✔ Initialized git repository.
―――――――――――――――――――――
Success! Created wagmi-repro-2 at /Users/llwu/git/@llllvvuu/wagmi-repro-2
To start your app, run `cd wagmi-repro-2` and then `npm run dev`
―――――――――――――――――――――
Important note: It is HIGHLY recommended that you add an alchemyProvider, infuraProvider, or alike to src/wagmi.ts before deploying your project to production to prevent being rate-limited.
Read more: https://wagmi.sh/docs/getting-started#configure-chains
; cd wagmi-repro-2
; npm run dev
> [email protected] dev
> next dev
- warn Port 3000 is in use, trying 3001 instead.
- ready started server on 0.0.0.0:3001, url: http://localhost:3001
- event compiled client and server successfully in 147 ms (20 modules)
- wait compiling /page (client and server)...
- error ./node_modules/@walletconnect/modal-ui/dist/index.js:1:192
Module not found: Can't resolve 'packages/modal-core'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/@walletconnect/modal/dist/index.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
./src/wagmi.ts
./src/app/providers.tsx
0.10.0
Hi,
I followed https://wagmi.sh/cli/create-wagmi to initalize a new wagmi project using
$ npm init wagmi -- --template next-connectkit
in the menu I selected next.js and next-connectkit.
After installing I run the program using
$ npm run dev
and visited http://localhost:3000/
the following error message appeared on the webpage:
1 of 1 unhandled error
Server Error
TypeError: n.replaceAll is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/connectkit/build/index.es.js (682:37119)
Array.forEach
<anonymous>
pn
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/connectkit/build/index.es.js (682:37102)
<unknown>
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/connectkit/build/index.es.js (682:37039)
Array.map
<anonymous>
ln
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/connectkit/build/index.es.js (682:37005)
wn
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/connectkit/build/index.es.js (682:42441)
renderWithHooks
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/degen/Git/first_wagmi_project_connectkit/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
Website should work without any errors
No response
No response
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.