diff --git a/README.md b/README.md index 71d85d3..ace072d 100644 --- a/README.md +++ b/README.md @@ -350,22 +350,67 @@ import { getChainDataByChainId } from 'svelte-web3' console.log(getChainDataByChainId(5)) ``` -## Web3 Svelte component [ experimental ] +## Web3 Svelte components -We plan to export generic Svelte components both to demonstrate the use -of the svelte-web3 library and as resuable and composable best practices -components. Only a `Balance` component has been implemented for now. You -are welcome to help define and develop new components by joining our -discussions in our [Discord](https://discord.gg/7yXuwDwaHF). +`web3-svelte` includes several basic Svelte components designed to simplify +common tasks when building Ethereum-based applications. These components +demonstrate how to use the `web3-svelte` library effectively and serve as +reusable and composable best practices components. Currently, the library +includes `Balance`, `Identicon`, and `Jazzicon` components. We encourage +community members to contribute and help develop additional components by +joining our discussions in our [Discord](https://discord.gg/7yXuwDwaHF). + +You can find example usage of these components in the `components` route in the +examples/sveltekit-app-template-web3 directory. + +### Balance Component + +The `Balance` component displays the balance of a specified Ethereum address. To +use the `Balance` component, import it and pass the address as a prop: + +```html + + +

Balance:

+``` + +### Identicon Component + +The `Identicon` component generates a unique identicon (a visual representation +of an Ethereum address) using the `ethereum-blockies-base64` library. To use the +`Identicon` component, import it and pass the address as a prop: ```html - import { Balance } from 'svelte-web3/components' + -

balance =

+ +``` + +### Jazzicon Component + +The `Jazzicon` component generates a unique and colorful identicon using the +`@metamask/jazzicon` library. To use the `Jazzicon` component, import it and +pass the address and size (optional) as props: +```html + + + ``` +These components serve as a starting point for building your Ethereum-based +applications using `web3-svelte`. You can further customize them and create +additional components according to your application's requirements. By +leveraging the reactivity and simplicity of Svelte along with the powerful +features of web3.js, you can create a seamless and efficient user experience +for your decentralized applications. + ## Create contract stores (deprecated) The function `makeContractStore` allowed you to create a Svelte derived