Add vechain domains (#293)

* feat: add vns domains on react

* fix: configs

* fix: vanilla button and modal

* fix: react stuff

* fix: improved tests

* fix: eslint

* fix: package json

* fix: yarn lock

* fix: build

* fix: eslint

eslint.config.mjs

@@ -0,0 +1,17 @@
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+    ignores: ['**/*.config.ts', 'dist/**'],
+    extends: [...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'no-console': ['error', { allow: ['error'] }],
+        'eslint-comments/no-unused-disable': 'off',
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            { argsIgnorePattern: '^_' },
+        ],
+    },
+});

examples/sample-angular-app/package.json

@@ -8,7 +8,6 @@
         "clean": "rm -rf dist .turbo .angular",
         "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"
@@ -51,7 +50,6 @@
         "@angular/compiler-cli": "^16.1.0",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.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",

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

@@ -26,7 +26,6 @@ export class AppComponent implements OnInit {
 
         const vechainDAppKitOptions = {
             nodeUrl: 'https://testnet.vechain.org/',
-            genesis: 'test',
             walletConnectOptions,
             usePersistence: true,
         };

examples/sample-angular-app/src/environments/environment.prod.ts

@@ -1,5 +1,4 @@
 // eslint-disable @typescript-eslint/no-unsafe-assignment
-// eslint-disable @typescript-eslint/no-unsafe-member-access
 // Packages
 import packageInfo from '../../package.json';
 
@@ -12,7 +11,6 @@ const baseUrl = scheme + host + port + path;
 
 export const environment = {
     production: true,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
     version: packageInfo.version,
     appName: 'EasyAngular',
     envName: 'prod',

examples/sample-angular-app/src/environments/environment.ts

@@ -1,5 +1,4 @@
 // eslint-disable @typescript-eslint/no-unsafe-assignment
-// eslint-disable @typescript-eslint/no-unsafe-member-access
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
@@ -18,7 +17,6 @@ const baseUrl = scheme + host + port + path;
 
 export const environment = {
     production: false,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
     version: packageInfo.version,
     appName: 'EasyAngular',
     envName: 'local',

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

@@ -3,5 +3,4 @@ import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
     providers: [],
-    // eslint-disable-next-line no-console
 }).catch((err) => console.error(err));

examples/sample-angular-app/src/polyfills.ts

@@ -1,5 +1,3 @@
-/* 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.
@@ -55,6 +53,7 @@ import 'zone.js'; // Included with Angular CLI.
 
 import '@angular/localize/init';
 (window as any).global = window;
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 global.Buffer = global.Buffer || require('buffer').Buffer;
 (window as any).process = {
     env: { DEBUG: undefined },

examples/sample-next-app/package.json

@@ -23,7 +23,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
-        "eslint": "^8",
+        "eslint": "^9.12.0",
         "eslint-config-next": "14.1.4",
         "typescript": "5.3.3"
     }

examples/sample-react-app/eslint.config.mjs

@@ -0,0 +1,17 @@
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+    ignores: ['**/*.config.ts', 'dist/**'],
+    extends: [...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'no-console': ['error', { allow: ['error'] }],
+        'eslint-comments/no-unused-disable': 'off',
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            { argsIgnorePattern: '^_' },
+        ],
+    },
+});

examples/sample-react-app/package.json

@@ -8,7 +8,7 @@
         "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",
+        "lint": "eslint",
         "preview": "vite preview --mode=development",
         "purge": "yarn clean; rm -rf node_modules",
         "test": "vitest"
@@ -29,7 +29,7 @@
         "@typescript-eslint/eslint-plugin": "^6.10.0",
         "@typescript-eslint/parser": "^6.10.0",
         "@vitejs/plugin-react": "^4.2.0",
-        "eslint": "^8.53.0",
+        "eslint": "^9.12.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.4",
         "react-test-renderer": "^18.2.0",

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

@@ -3,30 +3,26 @@ import {
     useWallet,
     useWalletModal,
 } from '@vechain/dapp-kit-react';
+import { friendlyAddress } from '@vechain/dapp-kit-ui';
 import { useEffect, useState } from 'react';
 
 function App() {
-    const { account } = useWallet();
-    const { open, onConnectionStatusChange } = useWalletModal();
+    const { account, accountDomain, isAccountDomainLoading } = useWallet();
+
+    const { open } = useWalletModal();
     const [buttonText, setButtonText] = useState('Connect Custom Button');
 
     useEffect(() => {
-        const handleConnected = (address: string | null) => {
-            if (address) {
-                const formattedAddress = `${address.slice(
-                    0,
-                    6,
-                )}...${address.slice(-4)}`;
-                setButtonText(`Disconnect from ${formattedAddress}`);
-            } else {
-                setButtonText('Connect Custom Button');
-            }
-        };
-
-        handleConnected(account);
-
-        onConnectionStatusChange(handleConnected);
-    }, [account, onConnectionStatusChange]);
+        if (account) {
+            const addressOrDomain =
+                accountDomain && !isAccountDomainLoading
+                    ? accountDomain
+                    : friendlyAddress(account || '');
+            setButtonText(`Disconnect from ${addressOrDomain}`);
+        } else {
+            setButtonText('Connect Custom Button');
+        }
+    }, [account, accountDomain, isAccountDomainLoading]);
 
     return (
         <div className="container">

examples/sample-react-app/src/main.tsx

@@ -19,8 +19,7 @@ const walletConnectOptions: WalletConnectOptions = {
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <DAppKitProvider
-            nodeUrl={'https://testnet.vechain.org/'}
-            genesis={'test'}
+            nodeUrl={'https://mainnet.vechain.org'}
             usePersistence
             walletConnectOptions={walletConnectOptions}
         >

examples/sample-remix-app/package.json

@@ -8,7 +8,6 @@
         "build": "remix vite:build --mode=development",
         "dev": "remix vite:dev",
         "gh-pages-build": "remix vite:build",
-        "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
         "preview": "PORT=5007 remix-serve ./build/server/index.js",
         "typecheck": "tsc"
     },
@@ -29,7 +28,7 @@
         "@types/react-dom": "^18.2.7",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
         "@typescript-eslint/parser": "^6.7.4",
-        "eslint": "^8.38.0",
+        "eslint": "^9.12.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.28.1",
         "eslint-plugin-jsx-a11y": "^6.7.1",

examples/sample-svelte-app/eslint.config.mjs

@@ -0,0 +1,5 @@
+export default {
+    rules: {
+        'no-constant-binary-expression': 'off',
+    },
+};

examples/sample-svelte-app/package.json

@@ -8,7 +8,7 @@
         "clean": "rm -rf .svelte-kit dist .turbo",
         "dev": "vite dev",
         "gh-pages-build": "BASE_PATH='/vechain-dapp-kit/svelte' vite build",
-        "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+        "lint": "eslint",
         "preview": "vite preview",
         "purge": "yarn clean; rm -rf node_modules"
     },
@@ -23,8 +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/vechain/repo-config#v0.0.1",
-        "eslint": "^8.28.0",
+        "eslint": "^9.12.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-svelte": "^2.30.0",
         "prettier": "^3.0.0",

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

@@ -12,7 +12,6 @@ const walletConnectOptions = {
 
 const vechainDAppKitOptions = {
     nodeUrl: 'https://testnet.vechain.org/',
-    genesis: 'test',
     walletConnectOptions,
     usePersistence: true,
 };