chore: fix readme

.github/CODE_OF_CONDUCT.md

@@ -10,26 +10,26 @@ We invite all those who participate in VeWorld WalletKit to help us create a saf
 
 The following behaviors are expected and requested of all community members:
 
-- Be respectful, considerate, and collaborative.
-- Refrain from demeaning, discriminatory, or harassing behavior and speech.
-- Be mindful of your surroundings and fellow participants.
-- Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
-- Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
+-   Be respectful, considerate, and collaborative.
+-   Refrain from demeaning, discriminatory, or harassing behavior and speech.
+-   Be mindful of your surroundings and fellow participants.
+-   Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
+-   Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
 
 ## 3. Unacceptable Behavior
 
 The following behaviors are considered harassment and are unacceptable within our community:
 
-- Violence, threats of violence, or violent language directed against another person.
-- Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
-- Posting or displaying sexually explicit or violent material.
-- Posting or threatening to post other people's personally identifying information ("doxing").
-- Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
-- Inappropriate photography or recording.
-- Inappropriate physical contact. You should have someone's consent before touching them.
-- Unwelcome sexual attention. This includes sexualized comments or jokes, inappropriate touching, groping, and unwelcome sexual advances.
-- Deliberate intimidation, stalking, or following (online or in-person).
-- Advocating for, or encouraging, any of the above behavior.
+-   Violence, threats of violence, or violent language directed against another person.
+-   Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
+-   Posting or displaying sexually explicit or violent material.
+-   Posting or threatening to post other people's personally identifying information ("doxing").
+-   Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
+-   Inappropriate photography or recording.
+-   Inappropriate physical contact. You should have someone's consent before touching them.
+-   Unwelcome sexual attention. This includes sexualized comments or jokes, inappropriate touching, groping, and unwelcome sexual advances.
+-   Deliberate intimidation, stalking, or following (online or in-person).
+-   Advocating for, or encouraging, any of the above behavior.
 
 ## 4. Consequences of Unacceptable Behavior
 
@@ -51,4 +51,4 @@ We expect all community participants (contributors, paid or otherwise; sponsors;
 
 ## 8. License and Attribution
 
-This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct/.
+This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct/.

package.json

@@ -1,6 +1,6 @@
 {
-    "private": true,
     "name": "vechain-dapp-kit",
+    "private": true,
     "description": "A TypeScript library that facilitates seamless interaction between vechain wallets (veworld, sync2) and dApps.",
     "workspaces": [
         "apps/*",

packages/dapp-kit-react/README.md

@@ -1,11 +1,9 @@
 # `@vechain/dapp-kit-react`
 
-## Why ?
+-   An extension of `@vechain/connex` to containing various hooks and components to simplify wallet connection and interaction
+-   Please refer to the official documentation [here](https://docs.vechain.org/developer-resources/sdks-and-providers/dapp-kit/react/installation)
 
--   Allow easy interaction with all wallets.
--   Connex is designed to play nice with one wallet at a time, this library provides a layer on top of Connex to easily
-    allow interaction with all wallets.
--   Easy setup for wallet connect
+---
 
 ## Installation
 
@@ -15,32 +13,35 @@
 yarn build
 ```
 
+---
+
 ## Usage
 
 ```bash
 yarn add @vechain/dapp-kit-react
 ```
 
--   Optional: Configure wallet connect options
+---
+
+### Optional: Wallet Connection Options
 
 ```typescript
 import type { WalletConnectOptions } from '@vechain/dapp-kit';
 
 const walletConnectOptions: WalletConnectOptions = {
-    // Create your project here: https://cloud.walletconnect.com/sign-up
-    projectId: '<PROJECT_ID>',
+    projectId: '<PROJECT_ID>', // Create your project here: https://cloud.walletconnect.com/sign-up
     metadata: {
         name: 'My dApp',
         description: 'My dApp description',
-        // Your app URL
-        url: window.location.origin,
-        // Your app Icon
-        icons: [`${window.location.origin}/images/my-dapp-icon.png`],
+        url: window.location.origin, // Your app URL
+        icons: [`${window.location.origin}/images/my-dapp-icon.png`], // Your app Icon
     },
 };
 ```
 
--   Initialise the `DAppKitProvider`
+---
+
+### Initialise the `DAppKitProvider`
 
 ```typescript jsx
 import { DAppKitProvider } from '@vechain/dapp-kit-react';
@@ -65,7 +66,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 );
 ```
 
--   Use the hooks provided by the `DAppKitProvider`
+---
+
+### Hooks
 
 ```typescript jsx
 import { useWallet, useConnex } from '@vechain/dapp-kit-react';
@@ -84,9 +87,13 @@ const { account } = await connect();
 const { vendor, thor } = useConnex();
 ```
 
-### UI Option 1: Modal + Button
+---
+
+### UI Components
+
+1. Modal + Button
 
--   Use the `ConnectWalletButton` component to display a modal with the available wallets
+    - Use the `ConnectWalletButton` component to display a modal with the available wallets
 
 ```typescript jsx
 import { ConnectButtonWithModal } from '@vechain/dapp-kit-react';
@@ -109,9 +116,9 @@ const MyComponent = (): JSX.Element => {
 };
 ```
 
-### Option 2: Modal + Custom Button
+2. Custom Button
 
--   Use the `ConnectWalletModal` component to display a modal with the available wallets
+-   Leverage `useWalletModal` to open and close the built-in wallet Modal
 
 ```typescript jsx
 import { useWallet, useWalletModal } from '@vechain/dapp-kit-react';

packages/dapp-kit-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-react",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "private": false,
     "license": "MIT",
     "sideEffects": false,
@@ -26,8 +26,8 @@
         "@lit/react": "^1.0.1",
         "@vechain/connex": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
-        "@vechain/dapp-kit": "*",
-        "@vechain/dapp-kit-ui": "*",
+        "@vechain/dapp-kit": "0.0.4",
+        "@vechain/dapp-kit-ui": "0.0.4",
         "@vechain/picasso": "^2.1.1",
         "react-icons": "^4.11.0",
         "styled-components": "^6.1.0",

packages/dapp-kit-ui/README.md

@@ -1,33 +1,45 @@
 # `@vechain/dapp-kit-ui`
 
-## Why ?
+-   An extension of `@vechain/connex` to containing UI components to simplify wallet connection and interaction
+-   Please refer to the official documentation [here](https://docs.vechain.org/developer-resources/sdks-and-providers/dapp-kit/vanilla/installation)
 
--   Creating some reusable UI components for connecting wallets
--   Allow easy interaction with all wallets.
--   Connex is designed to play nice with one wallet at a time, this library provides a layer on top of Connex to easily
-    allow interaction with all wallets.
--   Easy setup for wallet connect.
+---
 
 ## Installation
 
-### Build
+### Build Locally
 
 ```bash
 yarn build
 ```
 
+---
+
 ## Usage
 
-```bash
-yarn add @vechain/dapp-kit-ui
+### Optional: Wallet Connection Options
+
+```typescript
+import type { WalletConnectOptions } from '@vechain/dapp-kit';
+
+const walletConnectOptions: WalletConnectOptions = {
+    projectId: '<PROJECT_ID>', // Create your project here: https://cloud.walletconnect.com/sign-up
+    metadata: {
+        name: 'My dApp',
+        description: 'My dApp description',
+        url: window.location.origin, // Your app URL
+        icons: [`${window.location.origin}/images/my-dapp-icon.png`], // Your app Icon
+    },
+};
 ```
 
--   In your root `main.ts`
+---
 
 ```typescript
 import type { WalletConnectOptions, DAppKitOptions } from '@vechain/dapp-kit';
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
 
+//Optional
 const walletConnectOptions: WalletConnectOptions = {
     projectId: '<PROJECT_ID>',
     metadata: {
@@ -48,8 +60,8 @@ const options: DAppKitOptions = {
 DAppKitUI.configure(options);
 ```
 
--   In your root `index.html`. This will add a button to your page, when clicked it will open a modal with the wallet
-    connect QR code.
+-   Add the following HTML. This will add a button to your page, when clicked it will open a modal with the wallet
+    connect QR code:
 
 ```html
 <body>

packages/dapp-kit-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-ui",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "private": false,
     "description": "Vanilla js wallet kit",
     "keywords": [
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@lit/context": "^1.1.0",
-        "@vechain/dapp-kit": "*",
+        "@vechain/dapp-kit": "0.0.4",
         "@vechain/picasso": "2.1.1",
         "@wagmi/core": "^1.4.5",
         "@web3modal/ethereum": "^2.7.1",

packages/dapp-kit/README.md

@@ -1,11 +1,9 @@
 # `@vechain/dapp-kit`
 
-## Why ?
+-   An extension of `@vechain/connex` to simplify wallet management and interaction
+-   Please refer to the official documentation [here](https://docs.vechain.org/developer-resources/sdks-and-providers/dapp-kit)
 
--   Allow easy interaction with all wallets.
--   Connex is designed to play nice with one wallet at a time, this library provides a layer on top of Connex to easily
-    allow interaction with all wallets.
--   Easy setup for wallet connect.
+---
 
 ## Installation
 
@@ -15,13 +13,17 @@
 yarn build
 ```
 
+---
+
 ## Usage
 
 ```bash
 yarn add @vechain/dapp-kit
 ```
 
--   Optional: Configure wallet connect options
+---
+
+### Optional: Wallet Connection Options
 
 ```typescript
 import type { WalletConnectOptions } from '@vechain/dapp-kit';
@@ -37,6 +39,10 @@ const walletConnectOptions: WalletConnectOptions = {
 };
 ```
 
+---
+
+### Initialise the DAppKit
+
 -   Create a new instance of `DAppKit` and pass in the options
 -   `thor` will be ready to use to interact with the chain, but calling any methods requiring a wallet will throw an
     error. See the next step to finalise the setup.
@@ -51,6 +57,10 @@ const { thor, vendor, wallet } = new DAppKit({
 });
 ```
 
+---
+
+### Set the wallet source
+
 -   You can set the wallet source when the user selects a wallet, or if you want to default to a specific wallet.
 -   Connex is ready to use as normal
 
@@ -64,8 +74,13 @@ wallet.setSource('veworld');
 ```
 
 -   Connect to the wallet. This will return the user's address
--   `verified` indicates whether a certificate is signed by the user. If a sign in is required and the account is not
-    verified, you should request a subsequent certificate sign in
+-   `verified` indicates whether a certificate is signed by the user. If a sign in is required and the account is not verified, you should request a subsequent certificate sign in
+
+---
+
+### Start using Connex
+
+-   Please refer to the [connex documentation](https://docs.vechain.org/developer-resources/sdks-and-providers/connex)
 
 ```typescript
 const {account, verified} = await wallet.connect();

packages/dapp-kit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",