dapp kit ui refactor

.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/package.json

@@ -29,10 +29,18 @@
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-ui": "*",
         "angular-svg-icon": "^16.0.0",
+        "assert": "2.1.0",
         "axios": "^1.4.0",
         "bootstrap": "^5.3.0",
+        "buffer": "5.7.1",
+        "crypto-browserify": "3.12.0",
+        "https-browserify": "1.0.0",
+        "os-browserify": "0.3.0",
         "rxjs": "~7.8.1",
+        "stream-browserify": "3.0.0",
+        "stream-http": "3.2.0",
         "tslib": "^2.3.0",
+        "url": "0.11.3",
         "zone.js": "~0.13.1"
     },
     "devDependencies": {

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

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

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

@@ -1,6 +1,5 @@
 // Angular modules
-import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
-import { OnInit } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, type OnInit } from '@angular/core';
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
 
 @Component({
@@ -14,8 +13,28 @@ export class AppComponent implements OnInit {
     // NOTE Init ---------------------------------------------------------------------
     // -------------------------------------------------------------------------------
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    public ngOnInit(): void {}
+    public ngOnInit(): void {
+        // custom button configuration
+
+        const customButton = document.getElementById('custom-button');
+        if (customButton) {
+            const handleConnected = (address: string | null): void => {
+                if (address) {
+                    const formattedAddress = `${address.slice(
+                        0,
+                        6,
+                    )}...${address.slice(-4)}`;
+                    customButton.innerText = `Disconnect from ${formattedAddress}`;
+                } else {
+                    customButton.innerText = 'Connect Custom Button';
+                }
+            };
+
+            handleConnected(DAppKitUI.wallet.state.address);
+
+            DAppKitUI.modal.onConnected(handleConnected);
+        }
+    }
 
     public openModal(): void {
         DAppKitUI.modal.open();

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

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>EasyAngular</title>
+        <title>Angular JS</title>
         <base href="/" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -47,6 +47,22 @@
                 align-items: center;
                 justify-content: center;
             }
+            h2 {
+                margin: 0;
+            }
+            .container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid #000;
+                border-radius: 20px;
+                padding: 20px;
+            }
+            .label {
+                margin-top: 20px;
+                margin-bottom: 10px;
+            }
         </style>
     </head>
     <body>

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

@@ -1,14 +1,13 @@
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
 import { bootstrapApplication } from '@angular/platform-browser';
-import type { DAppKitOptions, WalletConnectOptions } from '@vechain/dapp-kit';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
     providers: [],
     // eslint-disable-next-line no-console
 }).catch((err) => console.error(err));
 
-const walletConnectOptions: WalletConnectOptions = {
+const walletConnectOptions = {
     projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
     metadata: {
         name: 'Sample VeChain dApp',
@@ -18,11 +17,11 @@ const walletConnectOptions: WalletConnectOptions = {
     },
 };
 
-const vechainWalletKitOptions: DAppKitOptions = {
+const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
     genesis: 'test',
     walletConnectOptions,
     usePersistence: true,
 };
 
-DAppKitUI.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainDAppKitOptions);

apps/sample-next-app/src/app/globals.css

@@ -5,3 +5,19 @@ body {
     align-items: center;
     justify-content: center;
 }
+h2 {
+    margin: 0;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #000;
+    border-radius: 20px;
+    padding: 20px;
+}
+.label {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}

apps/sample-next-app/src/app/layout.tsx

@@ -14,6 +14,9 @@ export default function RootLayout({
 }): React.ReactElement {
     return (
         <html lang="en">
+            <head>
+                <title>Next JS</title>
+            </head>
             <body className={inter.className}>{children}</body>
         </html>
     );