skelekit-wagmiconnect
A more opinionated, but barebones front end sveltekit web3 template using some of my favorite technologies, some might even say the best sveltekit-web3 template.
skelekit-wagmiconnect is the lovechild of the 'create-skeleton-app' command and the demo example provided by WalletConnect.
Fun fact, I asked WalletConnect to make the 'wagmiconnect' part of this example, thanks WalletConnect, WAGMI!
If you fork this repo and like it, maybe give it a star so other sveltekit devs can see it when they search 'web3 sveltekit'.
New to the skelekit-wagmiconnect stack?
First time using Sveltekit? Check the SvelteKit docs here. It's the only frontend framework which doesn't make me want to cry, maybe you'll like it too.
First time using Skeleton/Tailwind? Check the Tailwind CSS docs here and the Skeleton docs here. Hate writing CSS? Me too! Stop, learn Tailwind. There's lots of component support available online. Skeleton is a pretty nice UI framework for Sveltekit and Tailwind, they've got you covered with theme support and prebuild components.
First time using WalletConnect? Check the WalletConnect docs here. Support multiple different wallet types across multiple different networks with mobile support out of the box.
First time using Wagmi? Check out the Wagmi docs here. You get your icecream in two main flavours here, WalletConnect comes with the wagmi flavour, so we inherit using it over 'ethers' because it's easier - feel free to make a fork with this enhancement!
Contributions + to-do-list
I welcome any contributors, especially with the following areas. I'll probably add these over time.
- page.svelte layout changes utilising skeleton.dev
- page layout constistency/best practice changes where appropriate
- walletconnect modal theme change with skeleton lightswitch possible?
- hook walletconnect modal colours to skeleton themes?
- overriding walletconnects configuration to default, or skeleton theme'd like data
- docker enhancements
- improvements / bugfixes
- pwa support
- would this be even a good idea since you'd need to be on the metamask app anyways? potentially on apps that only fetch without wallets?
Commands
Developing
## clone
mkdir skelekit-wagmiconnect
cd skelekit-wagmiconnect
git clone https://github.com/Elliott-Green/skelekit-wagmiconnect.git
## install dependancies
pnpm install
## start dev server
pnpm run dev
Pre commit test build
## build for production
pnpm run preview
## run production build
pnpm run build
Pre commit lint
## run html/css/js/ts check
pnpm run check
## run prettier lint check
pnpm run lint
## run prettier lint format
pnpm run format
Docker bros
## Docker builds image
pnpm run docker:build
## Docker runs image as container
pnpm run docker:run
## Docker stops container
pnpm run docker:stop
## Docker removes the container
pnpm run docker:remove
## Docker removes the image and cache
pnpm run docker:clean
Vercel .envs
Using vercel you can specifiy if envs are inserted into the UI or through a .env.
VITE_PROJECT_ID should be set to a wallet-connect dapp ID to become available through its 'dapp explorer', else just set it to 1.
Svelte-SEO
This template comes equipped with Svelte-SEO to make your life easier.
It's available on all pages at +layout and override on +page's that you want custom OG SEO data for.
https://www.opengraph.xyz/url/https%3A%2F%2Fskelekit-wagmiconnect.vercel.app
Micro Audit
Users should be aware that using WalletConnect does actually call into their servers which records your users IP address, developers should be aware of this point.
pnpm audit
No known vulnerabilities found
Licence
Distributed under the MIT License. See LICENSE.txt for more information.
Contact
Elliott Green - @cryptonines
Project Link: https://github.com/Elliott-Green/skelekit-wagmiconnect
This repository superceeds my previous opensource Sveltekit web3 UI learning efforts archived here.
