diff --git a/.eslintignore b/.eslintignore
index 55a42161..9f3ecb2a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,3 +5,4 @@ tsup.config.ts
**/test/**
vite.config.ts
scripts/prepare-packages.ts
+tests/e2e
diff --git a/.github/workflows/deploy-gh-pages.yaml b/.github/workflows/deploy-gh-pages.yaml
index 96ec2b43..a269676f 100644
--- a/.github/workflows/deploy-gh-pages.yaml
+++ b/.github/workflows/deploy-gh-pages.yaml
@@ -40,7 +40,7 @@ jobs:
- name: Build React App
run: |
yarn install:all
- yarn build
+ yarn gh-pages-build
- name: Setup Pages
uses: actions/configure-pages@v2
diff --git a/.github/workflows/test-e2e.yaml b/.github/workflows/test-e2e.yaml
new file mode 100644
index 00000000..d4158030
--- /dev/null
+++ b/.github/workflows/test-e2e.yaml
@@ -0,0 +1,42 @@
+name: E2E Tests
+
+on:
+ push:
+ branches: [main]
+ pull_request:
+ branches: [main]
+
+concurrency:
+ group: ${{ github.head_ref || github.ref_name }}-e2e-test
+ cancel-in-progress: true
+
+jobs:
+ e2e-tests:
+ runs-on: ubuntu-latest
+ name: E2E Tests
+
+ steps:
+ - name: Install Stable Chrome
+ run: |
+ wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+ sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+ sudo apt-get update
+ sudo apt-get install google-chrome-stable
+
+ - name: Install Stable chromedriver
+ uses: nanasess/setup-chromedriver@v2
+
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Setup Node
+ uses: actions/setup-node@v3
+ with:
+ node-version-file: .nvmrc
+ cache: 'yarn'
+
+ - name: Install
+ run: yarn install:all
+
+ - name: Run E2E Tests
+ run: yarn test:e2e:ci
diff --git a/.gitignore b/.gitignore
index 15fb643b..e1d74573 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,4 +36,6 @@ yarn-error.log*
.idea
.vscode
-.parcel-cache
\ No newline at end of file
+.parcel-cache
+
+.reports
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 19fe54d5..c3eec6a0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,7 +5,7 @@ ensure a smooth collaboration, please follow these guidelines:
## Submitting a Bug Report
-- Search the [issue tracker](https://github.com/vechainfoundation/vechain-dapp-kit/issues) to ensure that the bug has
+- Search the [issue tracker](https://github.com/vechain/vechain-dapp-kit/issues) to ensure that the bug has
not been reported already.
- If the bug has not been reported, create a new issue with a descriptive title and a clear description of the bug.
@@ -29,4 +29,4 @@ ensure a smooth collaboration, please follow these guidelines:
## Reporting Issues
If you encounter any issues or have suggestions,
-please [open an issue](https://github.com/vechainfoundation/vechain-dapp-kit/issues) on GitHub.
+please [open an issue](https://github.com/vechain/vechain-dapp-kit/issues) on GitHub.
diff --git a/README.md b/README.md
index 23e842a3..53f45718 100644
--- a/README.md
+++ b/README.md
@@ -135,6 +135,32 @@ yarn build
---
+### E2E Testing
+
+We utilize Cucumber.js with Selenium for end-to-end (E2E) testing. To conduct these tests, you'll require the ChromeDriver. Here's how to install it:
+
+**On Mac:**
+
+```shell
+brew install chromedriver
+cd "$(dirname "$(which chromedriver)")"
+xattr -d com.apple.quarantine chromedriver
+```
+
+Once installed, you can run tests in the browser using:
+
+```bash
+yarn test:e2e
+```
+
+Alternatively, you can run headless tests directly in the console using:
+
+```bash
+yarn test:e2e:headless
+```
+
+---
+
## Further Documentation & Usage
- Please refer to [Vechain Docs](https://docs.vechain.org/developer-resources/sdks-and-providers) for more information
diff --git a/examples/sample-angular-app/.eslintrc.js b/examples/sample-angular-app/.eslintrc.js
index 28944eec..4185cb4f 100644
--- a/examples/sample-angular-app/.eslintrc.js
+++ b/examples/sample-angular-app/.eslintrc.js
@@ -1,3 +1,9 @@
const Config = require('@vechain/repo-config');
-module.exports = Config.EslintLibrary;
+module.exports = {
+ ...Config.EslintLibrary,
+ rules: {
+ 'no-constant-binary-expression': 'off',
+ 'eslint-comments/disable-enable-pair': 'off',
+ },
+};
diff --git a/examples/sample-angular-app/Dockerfile b/examples/sample-angular-app/Dockerfile
new file mode 100644
index 00000000..4dfc1f44
--- /dev/null
+++ b/examples/sample-angular-app/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN apk add git
+
+RUN yarn
+
+RUN yarn global add @angular/cli
+
+RUN yarn global add serve
+
+COPY . .
+
+RUN yarn build
+
+EXPOSE 5004
+
+CMD [ "serve", "dist/easy-angular", "-p", "5004"]
\ No newline at end of file
diff --git a/examples/sample-angular-app/angular.json b/examples/sample-angular-app/angular.json
index b50b3e75..4820f10a 100644
--- a/examples/sample-angular-app/angular.json
+++ b/examples/sample-angular-app/angular.json
@@ -26,10 +26,6 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
- "assets": [
- "src/assets/img/favicon/favicon.ico",
- "src/assets"
- ],
"styles": [],
"scripts": []
},
@@ -92,10 +88,6 @@
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
- "assets": [
- "src/assets/img/favicon/favicon.ico",
- "src/assets"
- ],
"styles": [],
"scripts": []
}
diff --git a/examples/sample-angular-app/package.json b/examples/sample-angular-app/package.json
index 020f4daf..de6368ce 100644
--- a/examples/sample-angular-app/package.json
+++ b/examples/sample-angular-app/package.json
@@ -4,10 +4,12 @@
"private": true,
"scripts": {
"add-page": "ng g m pages/page-name --routing && ng g component pages/page-name --skip-tests",
- "build": "ng build --configuration development --base-href '/vechain-dapp-kit/angular/'",
+ "build": "ng build --configuration development",
"clean": "rm -rf dist .turbo .angular",
- "dev": "ng serve",
+ "dev": "ng serve --port 5004",
+ "gh-pages-build": "ng build --configuration development --base-href '/vechain-dapp-kit/angular/'",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+ "preview": "ng serve --port 5004",
"purge": "yarn clean; rm -rf node_modules",
"watch": "ng build --watch --configuration development"
},
@@ -49,7 +51,7 @@
"@angular/compiler-cli": "^16.1.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
- "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+ "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
diff --git a/examples/sample-angular-app/src/app/app.component.ts b/examples/sample-angular-app/src/app/app.component.ts
index 4918d532..46a68bb1 100644
--- a/examples/sample-angular-app/src/app/app.component.ts
+++ b/examples/sample-angular-app/src/app/app.component.ts
@@ -14,8 +14,25 @@ export class AppComponent implements OnInit {
// -------------------------------------------------------------------------------
public ngOnInit(): void {
- // custom button configuration
+ const walletConnectOptions = {
+ projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+ metadata: {
+ name: 'Sample VeChain dApp',
+ description: 'A sample VeChain dApp',
+ url: window.location.origin,
+ icons: [`${window.location.origin}/images/logo/my-dapp.png`],
+ },
+ };
+
+ const vechainDAppKitOptions = {
+ nodeUrl: 'https://testnet.vechain.org/',
+ genesis: 'test',
+ walletConnectOptions,
+ usePersistence: true,
+ };
+ DAppKitUI.configure(vechainDAppKitOptions);
+ // custom button configuration
const customButton = document.getElementById('custom-button');
if (customButton) {
const handleConnected = (address: string | null): void => {
diff --git a/examples/sample-angular-app/src/index.html b/examples/sample-angular-app/src/index.html
index fbd0dd4c..f5a8fb61 100644
--- a/examples/sample-angular-app/src/index.html
+++ b/examples/sample-angular-app/src/index.html
@@ -6,32 +6,6 @@
-
-
-
-
-
-
-
-
console.error(err));
-
-const walletConnectOptions = {
- projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
- metadata: {
- name: 'Sample VeChain dApp',
- description: 'A sample VeChain dApp',
- url: window.location.origin,
- icons: [`${window.location.origin}/images/logo/my-dapp.png`],
- },
-};
-
-const vechainDAppKitOptions = {
- nodeUrl: 'https://testnet.vechain.org/',
- genesis: 'test',
- walletConnectOptions,
- usePersistence: true,
-};
-
-DAppKitUI.configure(vechainDAppKitOptions);
diff --git a/examples/sample-angular-app/src/polyfills.ts b/examples/sample-angular-app/src/polyfills.ts
index 4852b8d8..3db6b9bd 100644
--- a/examples/sample-angular-app/src/polyfills.ts
+++ b/examples/sample-angular-app/src/polyfills.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
@@ -52,5 +54,9 @@ import 'zone.js'; // Included with Angular CLI.
*/
import '@angular/localize/init';
-// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
(window as any).global = window;
+global.Buffer = global.Buffer || require('buffer').Buffer;
+(window as any).process = {
+ env: { DEBUG: undefined },
+ version: '', // to avoid undefined.slice error
+};
diff --git a/examples/sample-next-app/Dockerfile b/examples/sample-next-app/Dockerfile
new file mode 100644
index 00000000..3aaa3165
--- /dev/null
+++ b/examples/sample-next-app/Dockerfile
@@ -0,0 +1,17 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN yarn
+
+RUN npm install -g next@14.0.3
+
+COPY . .
+
+RUN yarn build
+
+EXPOSE 5002
+
+CMD [ "yarn", "start" ]
\ No newline at end of file
diff --git a/examples/sample-next-app/next.config.js b/examples/sample-next-app/next.config.js
index 658404ac..16e3b189 100644
--- a/examples/sample-next-app/next.config.js
+++ b/examples/sample-next-app/next.config.js
@@ -1,4 +1,11 @@
+const basePath = process.env.BASE_PATH ?? '';
+
/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+ basePath,
+ env: {
+ basePath,
+ },
+};
module.exports = nextConfig;
diff --git a/examples/sample-next-app/package.json b/examples/sample-next-app/package.json
index fa9b8230..91e19c06 100644
--- a/examples/sample-next-app/package.json
+++ b/examples/sample-next-app/package.json
@@ -6,8 +6,9 @@
"build": "next build",
"clean": "rm -rf .next dist .turbo",
"dev": "next dev",
- "purge": "yarn clean; rm -rf node_modules",
- "start": "next start"
+ "gh-pages-build": "BASE_PATH='/vechain-dapp-kit/next' next build",
+ "preview": "next start -- -p 5002",
+ "purge": "yarn clean; rm -rf node_modules"
},
"dependencies": {
"@vechain/dapp-kit": "*",
diff --git a/examples/sample-react-app/Dockerfile b/examples/sample-react-app/Dockerfile
new file mode 100644
index 00000000..161be517
--- /dev/null
+++ b/examples/sample-react-app/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN yarn
+
+COPY . .
+
+RUN yarn build
+
+EXPOSE 5001
+
+CMD [ "yarn", "preview" ]
\ No newline at end of file
diff --git a/examples/sample-react-app/package.json b/examples/sample-react-app/package.json
index b02fcca2..83bd82d5 100644
--- a/examples/sample-react-app/package.json
+++ b/examples/sample-react-app/package.json
@@ -4,15 +4,17 @@
"private": true,
"type": "module",
"scripts": {
- "build": "tsc && vite build",
+ "build": "tsc && vite build --mode=development",
"clean": "rm -rf dist .turbo",
"dev": "vite",
+ "gh-pages-build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
- "preview": "vite preview",
+ "preview": "vite preview --mode=development",
"purge": "yarn clean; rm -rf node_modules",
"test": "vitest"
},
"dependencies": {
+ "@originjs/vite-plugin-commonjs": "^1.0.3",
"@vechain/dapp-kit": "*",
"@vechain/dapp-kit-react": "*",
"@vechain/dapp-kit-ui": "*",
@@ -21,6 +23,7 @@
"vite": "^5.0.12"
},
"devDependencies": {
+ "@originjs/vite-plugin-commonjs": "^1.0.3",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.10.0",
diff --git a/examples/sample-react-app/vite.config.ts b/examples/sample-react-app/vite.config.ts
index 84917177..ef278446 100644
--- a/examples/sample-react-app/vite.config.ts
+++ b/examples/sample-react-app/vite.config.ts
@@ -5,19 +5,33 @@ import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import { resolve } from 'path';
-export default defineConfig({
- plugins: [nodePolyfills(), react()],
- //vitest
- test: {
- globals: true,
- environment: 'jsdom',
- setupFiles: [
- resolve(__dirname, 'test/setup/setup.ts'),
- resolve(__dirname, 'test/setup/resizeObserverMock.ts'),
- ],
- },
- base:
- process.env.NODE_ENV === 'production'
- ? '/vechain-dapp-kit/react/'
- : '/',
+export default defineConfig(({ mode }) => {
+ return {
+ plugins: [nodePolyfills(), react()],
+ build: {
+ commonjsOptions: {
+ transformMixedEsModules: true,
+ },
+ },
+ preview: {
+ port: 5001,
+ strictPort: true,
+ },
+ server: {
+ port: 5001,
+ strictPort: true,
+ host: true,
+ origin: 'http://0.0.0.0:5001',
+ },
+ //vitest
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: [
+ resolve(__dirname, 'test/setup/setup.ts'),
+ resolve(__dirname, 'test/setup/resizeObserverMock.ts'),
+ ],
+ },
+ base: mode === 'production' ? '/vechain-dapp-kit/react/' : '/',
+ };
});
diff --git a/examples/sample-svelte-app/Dockerfile b/examples/sample-svelte-app/Dockerfile
new file mode 100644
index 00000000..98f5e5ba
--- /dev/null
+++ b/examples/sample-svelte-app/Dockerfile
@@ -0,0 +1,19 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN apk add git
+
+RUN yarn
+
+COPY . .
+
+RUN npm i -g vite
+
+RUN yarn build
+
+EXPOSE 5005
+
+CMD [ "yarn", "preview" ]
\ No newline at end of file
diff --git a/examples/sample-svelte-app/package.json b/examples/sample-svelte-app/package.json
index 9aeaaa14..9d669bab 100644
--- a/examples/sample-svelte-app/package.json
+++ b/examples/sample-svelte-app/package.json
@@ -4,10 +4,12 @@
"private": true,
"type": "module",
"scripts": {
- "build": "vite build",
+ "build": "vite build --mode=development",
"clean": "rm -rf .svelte-kit dist .turbo",
"dev": "vite dev",
+ "gh-pages-build": "vite build",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+ "preview": "vite preview --mode=development",
"purge": "yarn clean; rm -rf node_modules"
},
"dependencies": {
@@ -21,7 +23,7 @@
"@sveltejs/kit": "^1.27.4",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
- "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+ "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
"eslint": "^8.28.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-svelte": "^2.30.0",
diff --git a/examples/sample-svelte-app/vite.config.ts b/examples/sample-svelte-app/vite.config.ts
index f83c2167..42777f48 100644
--- a/examples/sample-svelte-app/vite.config.ts
+++ b/examples/sample-svelte-app/vite.config.ts
@@ -2,6 +2,22 @@ import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
plugins: [nodePolyfills(), sveltekit()],
-});
+ preview: {
+ port: 5005,
+ strictPort: true,
+ },
+ server: {
+ port: 5005,
+ strictPort: true,
+ host: true,
+ origin: 'http://0.0.0.0:5005',
+ },
+ build: {
+ commonjsOptions: {
+ transformMixedEsModules: true,
+ },
+ },
+ base: mode === 'production' ? '/vechain-dapp-kit/svelte/' : '/',
+}));
diff --git a/examples/sample-vanilla-app/.gitignore b/examples/sample-vanilla-app/.gitignore
new file mode 100644
index 00000000..1f1e24df
--- /dev/null
+++ b/examples/sample-vanilla-app/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
\ No newline at end of file
diff --git a/examples/sample-vanilla-app/index.html b/examples/sample-vanilla-app/index.html
index ae1f837c..52a6be41 100644
--- a/examples/sample-vanilla-app/index.html
+++ b/examples/sample-vanilla-app/index.html
@@ -1,44 +1,38 @@
-
-
+
-
-
- Vanilla JS
-
-
-
-
-
-
-
Vanilla JS
-
kit button:
-
-
custom button:
-
-
-
+
+
+
+
+ Vite + TS
+
+
+
+
+
+
diff --git a/examples/sample-vanilla-app/index.js b/examples/sample-vanilla-app/index.js
deleted file mode 100644
index 4ed22d3a..00000000
--- a/examples/sample-vanilla-app/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable no-undef */
-import { DAppKitUI } from '@vechain/dapp-kit-ui';
-
-const walletConnectOptions = {
- projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
- metadata: {
- name: 'Sample VeChain dApp',
- description: 'A sample VeChain dApp',
- url: window.location.origin,
- icons: [`${window.location.origin}/images/logo/my-dapp.png`],
- },
-};
-
-const vechainDAppKitOptions = {
- nodeUrl: 'https://testnet.vechain.org/',
- genesis: 'test',
- walletConnectOptions,
- usePersistence: true,
-};
-
-DAppKitUI.configure(vechainDAppKitOptions);
-
-// custom button configuration
-
-const customButton = document.getElementById('custom-button');
-
-customButton.addEventListener('click', async () => {
- DAppKitUI.modal.open();
-});
-
-const handleConnected = (address) => {
- 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.onConnectionStatusChange(handleConnected);
diff --git a/examples/sample-vanilla-app/package.json b/examples/sample-vanilla-app/package.json
index 3a849c31..76645e6a 100644
--- a/examples/sample-vanilla-app/package.json
+++ b/examples/sample-vanilla-app/package.json
@@ -1,22 +1,21 @@
{
- "name": "sample-vanilla-app",
- "version": "1.0.0",
+ "name": "sample-vanilla-app-2",
+ "version": "0.0.0",
"private": true,
- "description": "",
- "license": "ISC",
- "author": "",
"type": "module",
"scripts": {
- "build": "parcel build index.html --public-url /vechain-dapp-kit/vanilla",
+ "build": "tsc && vite build --mode=development",
"clean": "rm -rf dist .turbo",
- "dev": "parcel index.html --open --no-cache --port 3002",
- "purge": "yarn clean && rm -rf node_modules",
- "test": "echo \"Error: no test specified\" && exit 1"
+ "dev": "vite",
+ "gh-pages-build": "tsc && vite build",
+ "preview": "vite preview --mode=development",
+ "purge": "yarn clean; rm -rf node_modules"
},
"dependencies": {
"@vechain/dapp-kit-ui": "*"
},
"devDependencies": {
- "parcel": "^2.10.2"
+ "typescript": "^5.2.2",
+ "vite": "^5.2.0"
}
}
diff --git a/examples/sample-vanilla-app/public/vite.svg b/examples/sample-vanilla-app/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/examples/sample-vanilla-app/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/sample-vanilla-app/src/main.ts b/examples/sample-vanilla-app/src/main.ts
new file mode 100644
index 00000000..0ca91156
--- /dev/null
+++ b/examples/sample-vanilla-app/src/main.ts
@@ -0,0 +1,56 @@
+import './style.css';
+import { DAppKitUI } from '@vechain/dapp-kit-ui';
+
+document.querySelector('#app')!.innerHTML = `
+
+
Vanilla JS
+
kit button:
+
+
custom button:
+
+
+`;
+
+const walletConnectOptions = {
+ projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+ metadata: {
+ name: 'Sample VeChain dApp',
+ description: 'A sample VeChain dApp',
+ url: window.location.origin,
+ icons: [`${window.location.origin}/images/logo/my-dapp.png`],
+ },
+};
+
+const vechainDAppKitOptions = {
+ nodeUrl: 'https://testnet.vechain.org/',
+ genesis: 'test',
+ walletConnectOptions,
+ usePersistence: true,
+};
+
+DAppKitUI.configure(vechainDAppKitOptions);
+
+// custom button configuration
+
+const customButton = document.getElementById('custom-button');
+
+if (customButton) {
+ customButton.addEventListener('click', () => {
+ DAppKitUI.modal.open();
+ });
+
+ const handleConnected = (address: string | null) => {
+ 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.onConnectionStatusChange(handleConnected);
+}
diff --git a/examples/sample-vanilla-app/src/style.css b/examples/sample-vanilla-app/src/style.css
new file mode 100644
index 00000000..f9c73502
--- /dev/null
+++ b/examples/sample-vanilla-app/src/style.css
@@ -0,0 +1,96 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+ filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/examples/sample-vanilla-app/src/typescript.svg b/examples/sample-vanilla-app/src/typescript.svg
new file mode 100644
index 00000000..d91c910c
--- /dev/null
+++ b/examples/sample-vanilla-app/src/typescript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/sample-vanilla-app/src/vite-env.d.ts b/examples/sample-vanilla-app/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/examples/sample-vanilla-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/examples/sample-vanilla-app/tsconfig.json b/examples/sample-vanilla-app/tsconfig.json
new file mode 100644
index 00000000..a1b39a70
--- /dev/null
+++ b/examples/sample-vanilla-app/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/sample-vanilla-app/vite.config.ts b/examples/sample-vanilla-app/vite.config.ts
new file mode 100644
index 00000000..65168f90
--- /dev/null
+++ b/examples/sample-vanilla-app/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+ plugins: [nodePolyfills()],
+ build: {
+ commonjsOptions: {
+ transformMixedEsModules: true,
+ },
+ },
+ base: mode === 'production' ? '/vechain-dapp-kit/vanilla/' : '/',
+ preview: {
+ port: 5003,
+ strictPort: true,
+ },
+ server: {
+ port: 5003,
+ strictPort: true,
+ host: true,
+ origin: 'http://0.0.0.0:5003',
+ },
+}));
diff --git a/examples/sample-vue-app/.gitignore b/examples/sample-vue-app/.gitignore
index 403adbc1..3243ca2e 100644
--- a/examples/sample-vue-app/.gitignore
+++ b/examples/sample-vue-app/.gitignore
@@ -1,23 +1,28 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
.idea
-.vscode
+.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
+
+
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
\ No newline at end of file
diff --git a/examples/sample-vue-app/README.md b/examples/sample-vue-app/README.md
index d349c4ef..8733c5bc 100644
--- a/examples/sample-vue-app/README.md
+++ b/examples/sample-vue-app/README.md
@@ -1,29 +1,9 @@
-# sample-vue-app
+# Vue 3 + TypeScript + Vite
-## Project setup
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
+