fix: rename components

.github/CODE_OF_CONDUCT.md

@@ -1,35 +1,35 @@
-VeWorld WalletKit Code of Conduct
+VeWorld DAppKit Code of Conduct
 
 ## 1. Introduction
 
-The VeWorld WalletKit community is dedicated to providing a welcoming, inclusive, and harassment-free environment for everyone, regardless of age, gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, ethnicity, nationality, religion, or technical experience. This Code of Conduct outlines our expectations for all members of the VeWorld WalletKit community, as well as the consequences for unacceptable behavior.
+The VeWorld DAppKit community is dedicated to providing a welcoming, inclusive, and harassment-free environment for everyone, regardless of age, gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, ethnicity, nationality, religion, or technical experience. This Code of Conduct outlines our expectations for all members of the VeWorld DAppKit community, as well as the consequences for unacceptable behavior.
 
-We invite all those who participate in VeWorld WalletKit to help us create a safe and positive environment for everyone.
+We invite all those who participate in VeWorld DAppKit to help us create a safe and positive environment for everyone.
 
 ## 2. Expected Behavior
 
 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/.

README.md

@@ -1,6 +1,6 @@
 # vechain-dapp-kit
 
-VeWorld WalletKit is a TypeScript library that facilitates seamless interaction between vechain wallets (veworld, sync2)
+VeWorld DAppKit is a TypeScript library that facilitates seamless interaction between vechain wallets (veworld, sync2)
 and dApps, enhancing user experience and developer convenience.
 
 ## Table of Contents

apps/sample-angular-app/src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="container">
     <h2>Angular JS</h2>
     <div class="label">kit button:</div>
-    <vwk-button></vwk-button>
+    <vdk-button></vdk-button>
     <div class="label">custom button:</div>
     <button id="custom-button" (click)="openModal()">
         Connect Custom Button

apps/sample-angular-app/src/main.ts

@@ -17,11 +17,11 @@ const walletConnectOptions = {
     },
 };
 
-const vechainWalletKitOptions = {
+const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     genesis: 'test',
     walletConnectOptions,
     usePersistence: true,
 };
 
-DAppKitUI.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainDAppKitOptions);

apps/sample-next-app/src/app/pages/homepage.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/function-component-definition */
 import { type ReactElement, useEffect, useState } from 'react';
 import {
-    VwkButton,
+    WalletButton,
     DAppKitProvider,
     useWalletModal,
     useWallet,
@@ -36,7 +36,7 @@ const Button = (): ReactElement => {
         <div className="container">
             <h2>Next JS</h2>
             <div className="label">kit button:</div>
-            <VwkButton />
+            <WalletButton />
             <div className="label">custom button:</div>
             <button onClick={open} type="button">
                 {buttonText}

apps/sample-react-app/src/App.tsx

@@ -1,4 +1,8 @@
-import { VwkButton, useWallet, useWalletModal } from '@vechain/dapp-kit-react';
+import {
+    WalletButton,
+    useWallet,
+    useWalletModal,
+} from '@vechain/dapp-kit-react';
 import { useEffect, useState } from 'react';
 
 function App() {
@@ -28,7 +32,7 @@ function App() {
         <div className="container">
             <h2>React JS</h2>
             <div className="label">kit button:</div>
-            <VwkButton />
+            <WalletButton />
             <div className="label">custom button:</div>
             <button onClick={open}>{buttonText}</button>
         </div>

apps/sample-svelte-app/src/lib/index.ts

@@ -10,14 +10,14 @@ const walletConnectOptions = {
     },
 };
 
-const vechainWalletKitOptions = {
+const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     genesis: 'test',
     walletConnectOptions,
     usePersistence: true,
 };
 
-DAppKitUI.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainDAppKitOptions);
 
 // custom button configuration
 setTimeout(() => {

apps/sample-svelte-app/src/routes/+page.svelte

@@ -5,7 +5,7 @@
 <div class="container">
     <h2>Svelte</h2>
     <div class="label">kit button:</div>
-    <vwk-button></vwk-button>
+    <vdk-button></vdk-button>
     <div class="label">custom button:</div>
     <button id="custom-button">Connect Custom Button</button>
 </div>

apps/sample-vanilla-app/index.html

@@ -36,7 +36,7 @@
         <div class="container">
             <h2>Vanilla JS</h2>
             <div class="label">kit button:</div>
-            <vwk-button></vwk-button>
+            <vdk-button></vdk-button>
             <div class="label">custom button:</div>
             <button id="custom-button">Connect Custom Button</button>
         </div>

apps/sample-vanilla-app/index.js

@@ -12,14 +12,14 @@ const walletConnectOptions = {
     },
 };
 
-const vechainWalletKitOptions = {
+const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     genesis: 'test',
     walletConnectOptions,
     usePersistence: true,
 };
 
-DAppKitUI.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainDAppKitOptions);
 
 // custom button configuration
 

apps/sample-vue-app/src/App.vue

@@ -2,7 +2,7 @@
     <div class="container">
         <h2>Vue</h2>
         <div class="label">kit button:</div>
-        <vwk-button></vwk-button>
+        <vdk-button></vdk-button>
         <div class="label">custom button:</div>
         <button id="custom-button" v-on:click="openModal">Connect Custom Button</button>
     </div>
@@ -23,14 +23,14 @@ const walletConnectOptions = {
     },
 };
 
-const vechainWalletKitOptions = {
+const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     genesis: 'test' as Genesis,
     walletConnectOptions,
     usePersistence: true,
 };
 
-DAppKitUI.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainDAppKitOptions);
 
 // custom button configuration
 

apps/sample-vue-app/vue.config.js

@@ -19,7 +19,7 @@ module.exports = defineConfig({
             .tap((options) => {
                 options.compilerOptions = {
                     ...options.compilerOptions,
-                    isCustomElement: (tag) => tag.startsWith('vwk-'),
+                    isCustomElement: (tag) => tag.startsWith('vdk-'),
                 };
                 return options;
             });

packages/dapp-kit-react/README.md

@@ -89,7 +89,7 @@ const { vendor, thor } = useConnex();
 -   Use the `ConnectWalletButton` component to display a modal with the available wallets
 
 ```typescript jsx
-import { VwkButton } from '@vechain/dapp-kit-react';
+import { WalletButton } from '@vechain/dapp-kit-react';
 import { useWallet } from '@vechain/dapp-kit-react';
 
 const MyComponent = (): JSX.Element => {
@@ -103,7 +103,7 @@ const MyComponent = (): JSX.Element => {
 
     return (
         <>
-            <VwkButton />
+            <WalletButton />
         </>
     );
 };

packages/dapp-kit-react/src/VwkButton.tsx → packages/dapp-kit-react/src/WalletButton.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Button as ButtonVanilla } from '@vechain/dapp-kit-ui';
 import { createComponent } from '@lit/react';
 
-export const VwkButton = createComponent({
-    tagName: 'vwk-button',
+export const WalletButton = createComponent({
+    tagName: 'vdk-button',
     elementClass: ButtonVanilla,
     react: React,
 });

packages/dapp-kit-react/src/index.ts

@@ -1,3 +1,3 @@
 export * from './DAppKitProvider';
 export * from './types';
-export * from './VwkButton';
+export * from './WalletButton';

packages/dapp-kit-react/test/helpers/react-test-helpers.tsx

@@ -1,8 +1,8 @@
-import { VwkButton, DAppKitProvider } from '../../src';
+import { WalletButton, DAppKitProvider } from '../../src';
 
 export const wrapper = ({ children }: { children?: React.ReactNode }) => (
     <DAppKitProvider nodeUrl="https://testnet.vechain.org" logLevel={'DEBUG'}>
         {children}
-        <VwkButton />
+        <WalletButton />
     </DAppKitProvider>
 );

packages/dapp-kit-react/test/useWalletModal.test.tsx

@@ -14,8 +14,8 @@ describe('useWalletModal', () => {
         await waitFor(
             () => {
                 const modalHtml = window.document.body
-                    .querySelector('vwk-modal')
-                    ?.shadowRoot?.querySelector('vwk-connect-modal')
+                    .querySelector('vdk-modal')
+                    ?.shadowRoot?.querySelector('vdk-connect-modal')
                     ?.shadowRoot?.innerHTML;
 
                 expect(modalHtml).toBeDefined();

packages/dapp-kit-ui/README.md

@@ -53,6 +53,6 @@ DAppKitUI.configure(options);
 
 ```html
 <body>
-    <vwk-connect-button-with-modal mode="DARK"></vwk-connect-button-with-modal>
+    <vdk-connect-button-with-modal mode="DARK"></vdk-connect-button-with-modal>
 </body>
 ```

packages/dapp-kit-ui/index.html

@@ -36,7 +36,7 @@
         <div class="container">
             <h2>Vanilla JS</h2>
             <div class="label">kit button:</div>
-            <vwk-button></vwk-button>
+            <vdk-button></vdk-button>
             <div class="label">custom button:</div>
             <button id="custom-button">Connect Custom Button</button>
         </div>

packages/dapp-kit-ui/index.js

@@ -12,14 +12,14 @@ const walletConnectOptions = {
     },
 };
 
-const vechainWalletKitOptions = {
+const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     genesis: 'test',
     walletConnectOptions,
     usePersistence: true,
 };
 
-DAppKitUI.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainDAppKitOptions);
 
 // custom button configuration
 

packages/dapp-kit-ui/package.json

@@ -2,7 +2,7 @@
     "name": "@vechain/dapp-kit-ui",
     "version": "1.0.0",
     "private": false,
-    "description": "Vanilla js wallet kit",
+    "description": "Vanilla JS DAppKit",
     "keywords": [
         "web-components",
         "lit-element",

packages/dapp-kit-ui/src/assets/styles/button.ts

@@ -3,9 +3,9 @@ import { Colors, Font } from '../../constants';
 
 export const buttonStyle = css`
     button {
-        font-family: var(--vwk-font-family, ${Font.Family});
-        font-size: var(--vwk-font-size-medium, ${Font.Size.Medium});
-        font-weight: var(--vwk-font-weight-medium, ${Font.Weight.Medium});
+        font-family: var(--vdk-font-family, ${Font.Family});
+        font-size: var(--vdk-font-size-medium, ${Font.Size.Medium});
+        font-weight: var(--vdk-font-weight-medium, ${Font.Weight.Medium});
         cursor: pointer;
         display: flex;
         flex-direction: row;
@@ -19,35 +19,35 @@ export const buttonStyle = css`
     }
 
     button.LIGHT {
-        background: var(--vwk-color-light-primary, ${Colors.Light.Primary});
-        color: var(--vwk-color-light-tertiary, ${Colors.Light.Tertiary});
+        background: var(--vdk-color-light-primary, ${Colors.Light.Primary});
+        color: var(--vdk-color-light-tertiary, ${Colors.Light.Tertiary});
     }
     button.LIGHT:hover {
         background: var(
-            --vwk-color-light-primary-hover,
+            --vdk-color-light-primary-hover,
             ${Colors.Light.PrimaryHover}
         );
     }
     button.LIGHT:active {
         background: var(
-            --vwk-color-light-primary-active,
+            --vdk-color-light-primary-active,
             ${Colors.Light.PrimaryActive}
         );
     }
 
     button.DARK {
-        background: var(--vwk-color-dark-primary, ${Colors.Dark.Primary});
-        color: var(--vwk-color-dark-tertiary, ${Colors.Dark.Tertiary});
+        background: var(--vdk-color-dark-primary, ${Colors.Dark.Primary});
+        color: var(--vdk-color-dark-tertiary, ${Colors.Dark.Tertiary});
     }
     button.DARK:hover {
         background: var(
-            --vwk-color-dark-primary-hover,
+            --vdk-color-dark-primary-hover,
             ${Colors.Dark.PrimaryHover}
         );
     }
     button.DARK:active {
         background: var(
-            --vwk-color-dark-primary-active,
+            --vdk-color-dark-primary-active,
             ${Colors.Dark.PrimaryActive}
         );
     }
@@ -64,23 +64,23 @@ export const iconButtonStyle = css`
 
     .icon-button.LIGHT:hover {
         background: var(
-            --vwk-color-light-primary,
+            --vdk-color-light-primary,
             ${Colors.Light.PrimaryHover}
         );
     }
 
     .icon-button.DARK:hover {
-        background: var(--vwk-color-dark-primary, ${Colors.Dark.PrimaryHover});
+        background: var(--vdk-color-dark-primary, ${Colors.Dark.PrimaryHover});
     }
 
     .icon-button.LIGHT:active {
         background: var(
-            --vwk-color-light-primary,
+            --vdk-color-light-primary,
             ${Colors.Light.PrimaryActive}
         );
     }
 
     .icon-button.DARK:active {
-        background: var(--vwk-color-dark-primary, ${Colors.Dark.PrimaryActive});
+        background: var(--vdk-color-dark-primary, ${Colors.Dark.PrimaryActive});
     }
 `;