this project is now depreciated in favour of Elliott-Green/skelekit-wagmiconnect

Sveltekit X Skeleton X Ethers

A more opinionated, but barebones front end web3 template using some of my favorite technologies.


View Demo · Report Bug · Request Feature

Table of Contents

1. About
2. Setup
   • Dependencies & Setup
   • Lint & Format
   • Docker Commands
3. What is this repository showing me?
4. How do I use this as a template then?
5. License
6. Contact

About

This project draws inspiration from 0xjimmy/svelte-kit-ethers-template. I wanted to create a more opinionated hello world template with contract reading/writing out of the box.

• SvelteKit: Actually makes frontend development relatively fun, and it's blitz quick too. Learn more
• Tailwind: A class based CSS framework, eliminating the need for spaghetti-style CSS files. Learn more
• Skeleton: A UI library wrapping around SK and TW, providing building blocks to create visually appealing components effortlessly. You can feel free to uninstall this out and change to a styling of your choice. Learn more
• Ethers: A well documented and maintained library that encapsulates Ethereum function calls. Learn more
• Ethers-svelte: A utility for managing Ethers state in Svelte stores. Learn more
• @metamask/etherscan-link: A tool for getting a block explorer URL for a given chain id. Ethers doesn't have this by default does WAGMI does. Go figure.

I recommend reading the documentation for all of the technologies before using this repo. Please do not raise issues that could have resolved by looking at the parent depencencies documentation.

Setup

Dependencies & Setup

 npm i                   # Install dependencies
 npm run dev             # run local server

Lint & Format

npm run lint             # Checks for linting issues
npm run format           # Runs linter over ./

Docker Commands

This project includes a set of scripts to manage the application in a containerised environment if you so choose.

To build a Docker image for the application, run the following commands.

npm run docker:build    # will build a Docker image with the tag sk-skeleton-ethers-template-image
npm run docker:run      # will run a new Docker container named container from the image in detached mode (-d), mapping the container's port 5173 to the host's port 5173
npm run docker:stop     # will stop the running sk-skeleton-ethers-template-container
npm run docker:remove   # will remove the sk-skeleton-ethers-template-container. The container needs to be stopped before it can be removed.
npm run docker:clean    # will force remove the Docker image.

What is this repository showing me?

This repository contains an opinionated hello world using the Greeter / Hello World Contract. It serves as a guide to various functionalities in a blockchain web application. The highlighted features are:

1. User Metamask Connectivity: Establishing a link to the user's Metamask wallet.

2. Chain Identification: Detecting the blockchain network currently selected in Metamask.

3. ENS Resolving: Converting Ethereum Name Service (ENS) domains into corresponding Ethereum addresses.

4. Balance Formatting: Presenting Ethereum balances in a readable format.

5. Balance Query: Fetching the balance of Ethereum addresses.

6. Block Listener Webhook: Setting up webhooks to listen for new blocks on the blockchain.

7. Contract State Reading: Fetching the state of a smart contract.

8. Contract State Writing: Writing to the state of a smart contract.

9. Transaction Status Handling: Managing successful and failed transactions.

10. Jazzicons Usage: Implementing Jazzicons for unique, deterministic icons.

How do I use this as a template then?

You will need the ABI of the contracts you want to interact with.

I recommend using this template to setup a hardhat environment to test, deploy and interact with your contract.

You also might want to get funds from the Sepolia PoW faucet to use the application.

1. Once you have your ABI then you can replace/add it into src/lib/abi.

2. In +layout.svelte we call attachContract(name, address, abi) to bind the contract into the svelte-ethers stores.

You should now have access to await $contracts.name.getFoo(); to fetch the getFoo state from the name contract we provided before.

You should also have access to await $contracts.name.setFoo(foobar); to set the state from the chain. Remember to await the success from the transaction.

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Elliott Green - @cryptonines

Project Link: https://github.com/Elliott-Green/SveltekitXSkeletonXEthers

(back to top)