This is a community-created and maintained starter kit, designed to help you quickly launch your project on the Celo blockchain. It comes preconfigured with TailwindCSS for styling, WalletConnect for seamless wallet integration, and Wagmi for handling on-chain transactions.
-
Create a copy of
.env.exampleand rename it to.env. -
Create a WalletConnect Cloud Project ID from WalletConnect Cloud. Provide the WalletConnect Cloud Project ID in your
.envfile to use WalletConnect in your project. As shown in the.env.examplefile.
VITE_WALLET_CONNECT_ID=YOUR_EXAMPLE_PROJECT_ID;- Install dependencies: Run the command based on your package manager
# using yarn
yarn
# using npm
npm iThis starterkit does not include connection of Hardhat/Truffle with Sveltekit. It's up to the user to integrate smart contract with Sveltekit. This gives user more flexibility over the dApp.
- To start the dApp, run the following command.
# using yarn
yarn dev
# using npm
npm run dev- Open in browser:
http://localhost:5173/
To add a component from the Shadcn library run:
npx shadcn-svelte@latest add <component-name>The component will be added to the src/libs/components/ui dir
├── src
│ ├── components (custom components)
│ │ ├── **/*.svelte
│ ├── lib
│ │ ├── components (shadcn components)
│ │ │ └── ui
│ │ │ ├── button
│ │ │ │ └── button.svelte
│ │ │ └── input
│ │ ├── utils
│ │ ├── web3 (Wagmi and web3 config files)
│ └── routes
│ ├── +page.svelte
│ └── docs
├── static (public files)
├── node_modules
├── README.md
├── package.json
├── other_config_files
└── .gitignore
This can be carried out using @wagmi/core functions.
The popular Wagmi hooks were designed for React, and are built on @wagmi/core.
Since, wagmi doesn't have a hooks specific to Svelte we use the core library.
lib/webs/client wraps some of the @wagmi/core functions to a Svelte observable stream.
When adding an environment variable, prepend
VITE_to the name of your variable so that vite runtime can easily read it and add it to your app during startup.