From 8d38c7bb633d734635fc0164addf4c3f6b61300e Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Fri, 25 Oct 2024 14:46:17 +0200 Subject: [PATCH] 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 --- .eslintignore | 8 - .eslintrc.js | 3 - eslint.config.mjs | 17 + examples/sample-angular-app/.eslintrc.js | 9 - examples/sample-angular-app/package.json | 2 - .../src/app/app.component.ts | 1 - .../src/environments/environment.prod.ts | 2 - .../src/environments/environment.ts | 2 - examples/sample-angular-app/src/main.ts | 1 - examples/sample-angular-app/src/polyfills.ts | 3 +- examples/sample-next-app/.eslintignore | 2 - examples/sample-next-app/package.json | 2 +- examples/sample-react-app/.eslintrc.cjs | 18 - examples/sample-react-app/eslint.config.mjs | 17 + examples/sample-react-app/package.json | 4 +- examples/sample-react-app/src/App.tsx | 32 +- examples/sample-react-app/src/main.tsx | 3 +- examples/sample-remix-app/.eslintrc.cjs | 84 -- examples/sample-remix-app/package.json | 3 +- examples/sample-svelte-app/.eslintignore | 14 - examples/sample-svelte-app/.eslintrc.cjs | 8 - examples/sample-svelte-app/eslint.config.mjs | 5 + examples/sample-svelte-app/package.json | 5 +- examples/sample-svelte-app/src/lib/index.ts | 1 - examples/sample-svelte-app/svelte.config.js | 1 - examples/sample-vanilla-app/src/main.ts | 43 +- examples/sample-vue-app/src/App.vue | 2 - package.json | 4 +- packages/dapp-kit-react/.eslintrc.cjs | 10 - packages/dapp-kit-react/eslint.config.mjs | 17 + packages/dapp-kit-react/package.json | 5 +- .../{ => DAppKitProvider}/DAppKitProvider.tsx | 82 +- .../src/DAppKitProvider/context.ts | 4 + .../src/DAppKitProvider/hooks/index.ts | 3 + .../DAppKitProvider/hooks}/useConnex.test.tsx | 13 +- .../src/DAppKitProvider/hooks/useConnex.ts | 16 + .../DAppKitProvider/hooks}/useWallet.test.tsx | 16 +- .../src/DAppKitProvider/hooks/useWallet.ts | 16 + .../hooks}/useWalletModal.test.tsx | 9 +- .../DAppKitProvider/hooks/useWalletModal.ts | 17 + .../src/DAppKitProvider/index.ts | 2 + packages/dapp-kit-react/src/hooks/index.ts | 1 + .../useVechainDomain/api/getAddress.test.ts | 75 ++ .../hooks/useVechainDomain/api/getAddress.ts | 52 ++ .../useVechainDomain/api/getDomain.test.ts | 81 ++ .../hooks/useVechainDomain/api/getDomain.ts | 52 ++ .../src/hooks/useVechainDomain/constants.ts | 7 + .../src/hooks/useVechainDomain/index.ts | 1 + .../useVechainDomain/useVechainDomain.test.ts | 128 +++ .../useVechainDomain/useVechainDomain.ts | 73 ++ packages/dapp-kit-react/src/index.ts | 1 + packages/dapp-kit-react/src/types.ts | 2 + packages/dapp-kit-react/test/helpers/index.ts | 2 + packages/dapp-kit-react/test/index.ts | 1 + packages/dapp-kit-react/tsconfig.json | 2 +- packages/dapp-kit-react/vite.config.ts | 15 +- packages/dapp-kit-ui/.eslintignore | 6 - packages/dapp-kit-ui/.eslintrc.mjs | 3 - packages/dapp-kit-ui/eslint.config.mjs | 17 + packages/dapp-kit-ui/index.js | 55 +- packages/dapp-kit-ui/package.json | 8 +- packages/dapp-kit-ui/src/client.ts | 1 - .../src/components/buttons/address-button.ts | 16 +- .../src/components/buttons/button.ts | 31 + .../src/components/modals/address-modal.ts | 97 +- .../sign-connection-certificate.ts | 1 - .../src/components/modals/modal.ts | 28 + packages/dapp-kit-ui/src/constants/font.ts | 2 + packages/dapp-kit-ui/src/utils/mobile.ts | 5 - packages/dapp-kit-ui/src/utils/qr-code.ts | 10 - packages/dapp-kit-ui/src/utils/ui-config.ts | 5 - .../test/classes/custom-wc-modal.test.ts | 1 + packages/dapp-kit-ui/tsconfig.json | 2 +- packages/dapp-kit-ui/vite.config.ts | 16 +- packages/dapp-kit/.eslintignore | 6 - packages/dapp-kit/.eslintrc.mjs | 3 - packages/dapp-kit/eslint.config.mjs | 17 + packages/dapp-kit/package.json | 5 +- .../src/classes/certificate-wallet.ts | 1 + .../dapp-kit/src/classes/wallet-manager.ts | 102 ++- packages/dapp-kit/src/dapp-kit.ts | 2 +- packages/dapp-kit/src/types/types.d.ts | 2 + .../dapp-kit/src/utils/create-wc-client.ts | 4 + .../dapp-kit/src/utils/create-wc-signer.ts | 4 +- .../dapp-kit/src/utils/get-account-domain.ts | 59 ++ packages/dapp-kit/src/utils/index.ts | 1 + packages/dapp-kit/src/utils/local-storage.ts | 21 + packages/dapp-kit/src/utils/logger.ts | 1 - .../dapp-kit/src/utils/shortened-domain.ts | 17 + .../test/utils/get-account-domain.test.ts | 87 ++ .../dapp-kit/test/utils/local-storage.test.ts | 140 +++ .../test/utils/shortened-domain.test.ts | 26 + packages/dapp-kit/test/utils/signer.test.ts | 1 + packages/dapp-kit/test/wallet-manager.test.ts | 19 +- packages/dapp-kit/tsconfig.json | 2 +- packages/dapp-kit/vite.config.ts | 18 +- prettier.config.js | 9 +- tests/e2e/{.eslintrc.js => eslint.config.js} | 3 - tests/e2e/package.json | 1 - tests/e2e/tsconfig.json | 27 +- tsconfig.json | 19 +- yarn.lock | 860 +++++++----------- 102 files changed, 1771 insertions(+), 989 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.js create mode 100644 eslint.config.mjs delete mode 100644 examples/sample-angular-app/.eslintrc.js delete mode 100644 examples/sample-next-app/.eslintignore delete mode 100644 examples/sample-react-app/.eslintrc.cjs create mode 100644 examples/sample-react-app/eslint.config.mjs delete mode 100644 examples/sample-remix-app/.eslintrc.cjs delete mode 100644 examples/sample-svelte-app/.eslintignore delete mode 100644 examples/sample-svelte-app/.eslintrc.cjs create mode 100644 examples/sample-svelte-app/eslint.config.mjs delete mode 100644 packages/dapp-kit-react/.eslintrc.cjs create mode 100644 packages/dapp-kit-react/eslint.config.mjs rename packages/dapp-kit-react/src/{ => DAppKitProvider}/DAppKitProvider.tsx (77%) create mode 100644 packages/dapp-kit-react/src/DAppKitProvider/context.ts create mode 100644 packages/dapp-kit-react/src/DAppKitProvider/hooks/index.ts rename packages/dapp-kit-react/{test => src/DAppKitProvider/hooks}/useConnex.test.tsx (54%) create mode 100644 packages/dapp-kit-react/src/DAppKitProvider/hooks/useConnex.ts rename packages/dapp-kit-react/{test => src/DAppKitProvider/hooks}/useWallet.test.tsx (81%) create mode 100644 packages/dapp-kit-react/src/DAppKitProvider/hooks/useWallet.ts rename packages/dapp-kit-react/{test => src/DAppKitProvider/hooks}/useWalletModal.test.tsx (71%) create mode 100644 packages/dapp-kit-react/src/DAppKitProvider/hooks/useWalletModal.ts create mode 100644 packages/dapp-kit-react/src/DAppKitProvider/index.ts create mode 100644 packages/dapp-kit-react/src/hooks/index.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/api/getAddress.test.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/api/getAddress.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/api/getDomain.test.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/api/getDomain.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/constants.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/index.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/useVechainDomain.test.ts create mode 100644 packages/dapp-kit-react/src/hooks/useVechainDomain/useVechainDomain.ts create mode 100644 packages/dapp-kit-react/test/helpers/index.ts create mode 100644 packages/dapp-kit-react/test/index.ts delete mode 100644 packages/dapp-kit-ui/.eslintignore delete mode 100644 packages/dapp-kit-ui/.eslintrc.mjs create mode 100644 packages/dapp-kit-ui/eslint.config.mjs delete mode 100644 packages/dapp-kit/.eslintignore delete mode 100644 packages/dapp-kit/.eslintrc.mjs create mode 100644 packages/dapp-kit/eslint.config.mjs create mode 100644 packages/dapp-kit/src/utils/get-account-domain.ts create mode 100644 packages/dapp-kit/src/utils/shortened-domain.ts create mode 100644 packages/dapp-kit/test/utils/get-account-domain.test.ts create mode 100644 packages/dapp-kit/test/utils/local-storage.test.ts create mode 100644 packages/dapp-kit/test/utils/shortened-domain.test.ts rename tests/e2e/{.eslintrc.js => eslint.config.js} (90%) diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 9f3ecb2a..00000000 --- a/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -node_modules/* -dist/* -web-dev-server.config.js -tsup.config.ts -**/test/** -vite.config.ts -scripts/prepare-packages.ts -tests/e2e diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 28944eec..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -const Config = require('@vechain/repo-config'); - -module.exports = Config.EslintLibrary; diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..c9e3ec07 --- /dev/null +++ b/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: '^_' }, + ], + }, +}); diff --git a/examples/sample-angular-app/.eslintrc.js b/examples/sample-angular-app/.eslintrc.js deleted file mode 100644 index 4185cb4f..00000000 --- a/examples/sample-angular-app/.eslintrc.js +++ /dev/null @@ -1,9 +0,0 @@ -const Config = require('@vechain/repo-config'); - -module.exports = { - ...Config.EslintLibrary, - rules: { - 'no-constant-binary-expression': 'off', - 'eslint-comments/disable-enable-pair': 'off', - }, -}; diff --git a/examples/sample-angular-app/package.json b/examples/sample-angular-app/package.json index de6368ce..0180d63c 100644 --- a/examples/sample-angular-app/package.json +++ b/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", diff --git a/examples/sample-angular-app/src/app/app.component.ts b/examples/sample-angular-app/src/app/app.component.ts index 46a68bb1..86b9c38f 100644 --- a/examples/sample-angular-app/src/app/app.component.ts +++ b/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, }; diff --git a/examples/sample-angular-app/src/environments/environment.prod.ts b/examples/sample-angular-app/src/environments/environment.prod.ts index b931095f..3938526c 100644 --- a/examples/sample-angular-app/src/environments/environment.prod.ts +++ b/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', diff --git a/examples/sample-angular-app/src/environments/environment.ts b/examples/sample-angular-app/src/environments/environment.ts index 5244976c..1158e730 100644 --- a/examples/sample-angular-app/src/environments/environment.ts +++ b/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', diff --git a/examples/sample-angular-app/src/main.ts b/examples/sample-angular-app/src/main.ts index 5d15c9f8..ae94c856 100644 --- a/examples/sample-angular-app/src/main.ts +++ b/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)); diff --git a/examples/sample-angular-app/src/polyfills.ts b/examples/sample-angular-app/src/polyfills.ts index 3db6b9bd..730b959b 100644 --- a/examples/sample-angular-app/src/polyfills.ts +++ b/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 }, diff --git a/examples/sample-next-app/.eslintignore b/examples/sample-next-app/.eslintignore deleted file mode 100644 index 35e54460..00000000 --- a/examples/sample-next-app/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -.eslintrc.js -tsconfig.json \ No newline at end of file diff --git a/examples/sample-next-app/package.json b/examples/sample-next-app/package.json index 3eb5fb0b..9a6baecf 100644 --- a/examples/sample-next-app/package.json +++ b/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" } diff --git a/examples/sample-react-app/.eslintrc.cjs b/examples/sample-react-app/.eslintrc.cjs deleted file mode 100644 index 74080493..00000000 --- a/examples/sample-react-app/.eslintrc.cjs +++ /dev/null @@ -1,18 +0,0 @@ -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, -}; diff --git a/examples/sample-react-app/eslint.config.mjs b/examples/sample-react-app/eslint.config.mjs new file mode 100644 index 00000000..c9e3ec07 --- /dev/null +++ b/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: '^_' }, + ], + }, +}); diff --git a/examples/sample-react-app/package.json b/examples/sample-react-app/package.json index 07469189..c1dd77c9 100644 --- a/examples/sample-react-app/package.json +++ b/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", diff --git a/examples/sample-react-app/src/App.tsx b/examples/sample-react-app/src/App.tsx index 752817e5..c7529a3a 100644 --- a/examples/sample-react-app/src/App.tsx +++ b/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 (
diff --git a/examples/sample-react-app/src/main.tsx b/examples/sample-react-app/src/main.tsx index d16d2546..1315c721 100644 --- a/examples/sample-react-app/src/main.tsx +++ b/examples/sample-react-app/src/main.tsx @@ -19,8 +19,7 @@ const walletConnectOptions: WalletConnectOptions = { ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/examples/sample-remix-app/.eslintrc.cjs b/examples/sample-remix-app/.eslintrc.cjs deleted file mode 100644 index 4f6f59ee..00000000 --- a/examples/sample-remix-app/.eslintrc.cjs +++ /dev/null @@ -1,84 +0,0 @@ -/** - * This is intended to be a basic starting point for linting in your app. - * It relies on recommended configs out of the box for simplicity, but you can - * and should modify this configuration to best suit your team's needs. - */ - -/** @type {import('eslint').Linter.Config} */ -module.exports = { - root: true, - parserOptions: { - ecmaVersion: "latest", - sourceType: "module", - ecmaFeatures: { - jsx: true, - }, - }, - env: { - browser: true, - commonjs: true, - es6: true, - }, - ignorePatterns: ["!**/.server", "!**/.client"], - - // Base config - extends: ["eslint:recommended"], - - overrides: [ - // React - { - files: ["**/*.{js,jsx,ts,tsx}"], - plugins: ["react", "jsx-a11y"], - extends: [ - "plugin:react/recommended", - "plugin:react/jsx-runtime", - "plugin:react-hooks/recommended", - "plugin:jsx-a11y/recommended", - ], - settings: { - react: { - version: "detect", - }, - formComponents: ["Form"], - linkComponents: [ - { name: "Link", linkAttribute: "to" }, - { name: "NavLink", linkAttribute: "to" }, - ], - "import/resolver": { - typescript: {}, - }, - }, - }, - - // Typescript - { - files: ["**/*.{ts,tsx}"], - plugins: ["@typescript-eslint", "import"], - parser: "@typescript-eslint/parser", - settings: { - "import/internal-regex": "^~/", - "import/resolver": { - node: { - extensions: [".ts", ".tsx"], - }, - typescript: { - alwaysTryTypes: true, - }, - }, - }, - extends: [ - "plugin:@typescript-eslint/recommended", - "plugin:import/recommended", - "plugin:import/typescript", - ], - }, - - // Node - { - files: [".eslintrc.cjs"], - env: { - node: true, - }, - }, - ], -}; diff --git a/examples/sample-remix-app/package.json b/examples/sample-remix-app/package.json index fc951ff4..07c2f25a 100644 --- a/examples/sample-remix-app/package.json +++ b/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", diff --git a/examples/sample-svelte-app/.eslintignore b/examples/sample-svelte-app/.eslintignore deleted file mode 100644 index ca7e2daa..00000000 --- a/examples/sample-svelte-app/.eslintignore +++ /dev/null @@ -1,14 +0,0 @@ -.DS_Store -node_modules -/build -/.svelte-kit -/package -.env -.env.* -!.env.example - -# Ignore files for PNPM, NPM and YARN -pnpm-lock.yaml -package-lock.json -yarn.lock -.eslintrc.cjs diff --git a/examples/sample-svelte-app/.eslintrc.cjs b/examples/sample-svelte-app/.eslintrc.cjs deleted file mode 100644 index abfdd0be..00000000 --- a/examples/sample-svelte-app/.eslintrc.cjs +++ /dev/null @@ -1,8 +0,0 @@ -const Config = require('@vechain/repo-config'); - -module.exports = { - ...Config.EslintLibrary, - rules: { - 'no-constant-binary-expression': 'off', - }, -}; diff --git a/examples/sample-svelte-app/eslint.config.mjs b/examples/sample-svelte-app/eslint.config.mjs new file mode 100644 index 00000000..ef17617a --- /dev/null +++ b/examples/sample-svelte-app/eslint.config.mjs @@ -0,0 +1,5 @@ +export default { + rules: { + 'no-constant-binary-expression': 'off', + }, +}; diff --git a/examples/sample-svelte-app/package.json b/examples/sample-svelte-app/package.json index 112045e4..3cb41ac6 100644 --- a/examples/sample-svelte-app/package.json +++ b/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", diff --git a/examples/sample-svelte-app/src/lib/index.ts b/examples/sample-svelte-app/src/lib/index.ts index 98f9f3dd..2b5be2d2 100644 --- a/examples/sample-svelte-app/src/lib/index.ts +++ b/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, }; diff --git a/examples/sample-svelte-app/svelte.config.js b/examples/sample-svelte-app/svelte.config.js index dcee8126..30257126 100644 --- a/examples/sample-svelte-app/svelte.config.js +++ b/examples/sample-svelte-app/svelte.config.js @@ -25,5 +25,4 @@ const config = { }, }; -// eslint-disable-next-line import/no-default-export export default config; diff --git a/examples/sample-vanilla-app/src/main.ts b/examples/sample-vanilla-app/src/main.ts index 3a702de8..3002d3df 100644 --- a/examples/sample-vanilla-app/src/main.ts +++ b/examples/sample-vanilla-app/src/main.ts @@ -1,13 +1,13 @@ -import { DAppKitUI } from '@vechain/dapp-kit-ui'; +import { DAppKitUI, friendlyAddress } from '@vechain/dapp-kit-ui'; document.querySelector('#app')!.innerHTML = ` -
-

Vanilla JS

-
kit button:
- -
custom button:
- -
+
+

Vanilla JS

+
kit button:
+ +
custom button:
+ +
`; const walletConnectOptions = { @@ -21,8 +21,7 @@ const walletConnectOptions = { }; const vechainDAppKitOptions = { - nodeUrl: 'https://testnet.vechain.org/', - genesis: 'test', + nodeUrl: 'https://mainnet.vechain.org', walletConnectOptions, usePersistence: true, }; @@ -38,18 +37,28 @@ if (customButton) { DAppKitUI.modal.open(); }); - const handleConnected = (address: string | null) => { + const render = () => { + const address = DAppKitUI.wallet.state.address; + const accountDomain = DAppKitUI.wallet.state.accountDomain; + const isAccountDomainLoading = + DAppKitUI.wallet.state.isAccountDomainLoading; + + const addressOrDomain = + accountDomain && !isAccountDomainLoading + ? accountDomain + : friendlyAddress(address || ''); + if (address) { - const formattedAddress = `${address.slice(0, 6)}...${address.slice( - -4, - )}`; - customButton.innerText = `Disconnect from ${formattedAddress}`; + customButton.innerText = `Disconnect from ${addressOrDomain}`; } else { customButton.innerText = 'Connect Custom Button'; } }; - handleConnected(DAppKitUI.wallet.state.address); + render(); - DAppKitUI.modal.onConnectionStatusChange(handleConnected); + DAppKitUI.modal.onConnectionStatusChange(render); + DAppKitUI.wallet.subscribeToKey('address', render); + DAppKitUI.wallet.subscribeToKey('accountDomain', render); + DAppKitUI.wallet.subscribeToKey('isAccountDomainLoading', render); } diff --git a/examples/sample-vue-app/src/App.vue b/examples/sample-vue-app/src/App.vue index 4a0847f4..a64c34b4 100644 --- a/examples/sample-vue-app/src/App.vue +++ b/examples/sample-vue-app/src/App.vue @@ -13,7 +13,6 @@