fix: thordevkit imports

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

@@ -50,7 +50,6 @@ export default function RootLayout({
                     genesis="test"
                     logLevel="DEBUG"
                     nodeUrl="https://testnet.vechain.org/"
-                    themeMode="DARK"
                     usePersistence
                     walletConnectOptions={walletConnectOptions}
                 >

examples/sample-react-app/package.json

@@ -9,15 +9,16 @@
         "dev": "vite",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
-        "purge": "yarn clean; rm -rf node_modules"
+        "purge": "yarn clean; rm -rf node_modules",
+        "test": "vitest"
     },
     "dependencies": {
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-react": "*",
         "@vechain/dapp-kit-ui": "*",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "vite-plugin-node-polyfills": "^0.17.0"
+        "vite": "^5.0.12"
     },
     "devDependencies": {
         "@types/react": "^18.2.37",
@@ -28,7 +29,9 @@
         "eslint": "^8.53.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.4",
+        "react-test-renderer": "^18.2.0",
         "typescript": "^5.2.2",
-        "vite": "^4.5.2"
+        "vite-plugin-node-polyfills": "^0.17.0",
+        "vitest": "^1.2.2"
     }
 }

examples/sample-react-app/test/setup/resizeObserverMock.ts

@@ -0,0 +1,22 @@
+class ResizeObserverMock {
+    private readonly callback: ResizeObserverCallback;
+
+    constructor(callback: ResizeObserverCallback) {
+        this.callback = callback;
+    }
+
+    observe() {
+        // Mock observe method
+    }
+
+    unobserve() {
+        // Mock unobserve method
+    }
+
+    disconnect() {
+        // Mock disconnect method
+    }
+}
+
+// Make the mock globally available
+global.ResizeObserver = ResizeObserverMock;

examples/sample-react-app/test/setup/setup.ts

@@ -0,0 +1,15 @@
+import { vi } from 'vitest';
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});

examples/sample-react-app/test/welcome.test.tsx

@@ -0,0 +1,33 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import { test, expect } from 'vitest';
+import App from '../src/App';
+import { DAppKitProvider } from '@vechain/dapp-kit-react';
+import { WalletConnectOptions } from '@vechain/dapp-kit';
+
+test('Welcome', async () => {
+    const walletConnectOptions: WalletConnectOptions = {
+        projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+        metadata: {
+            name: 'Sample VeChain dApp',
+            description: 'A sample VeChain dApp',
+            url: window.location.origin,
+            icons: [``],
+        },
+    };
+    const component = renderer.create(
+        <React.StrictMode>
+            <DAppKitProvider
+                nodeUrl={'https://testnet.vechain.org/'}
+                genesis={'test'}
+                usePersistence
+                walletConnectOptions={walletConnectOptions}
+            >
+                <App />
+            </DAppKitProvider>
+        </React.StrictMode>,
+    );
+
+    const tree = component.toJSON();
+    expect(tree).toBeDefined();
+});

examples/sample-react-app/vite.config.ts

@@ -1,13 +1,20 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { resolve } from 'path';
 
 export default defineConfig({
     plugins: [nodePolyfills(), react()],
-    build: {
-        commonjsOptions: {
-            transformMixedEsModules: true,
-        },
+    //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'

packages/dapp-kit-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-react",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",
@@ -16,9 +16,8 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "tsup src/index.ts --format esm --dts --external react",
+        "build": "tsup",
         "clean": "rm -rf dist .turbo",
-        "dev": "tsup src/index.ts --format esm --watch --dts --external react",
         "lint": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules",
         "test": "vitest run --coverage",
@@ -31,7 +30,7 @@
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-ui": "*",
         "thor-devkit": "^2.0.9",
-        "valtio": "^1.12.1"
+        "valtio": "1.11.2"
     },
     "devDependencies": {
         "@testing-library/react": "^14.1.2",

packages/dapp-kit-react/src/DAppKitProvider.tsx

@@ -10,7 +10,7 @@ import type { WalletSource } from '@vechain/dapp-kit';
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
 import { subscribeKey } from 'valtio/vanilla/utils';
 import type { DAppKitProviderOptions, DAppKitContext } from './types';
-import { Certificate } from 'thor-devkit';
+import * as ThorDevkit from 'thor-devkit';
 
 /**
  * Context
@@ -71,7 +71,9 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
         connex.wallet.state.source,
     );
     const [connectionCertificate, setConnectionCertificate] =
-        useState<Certificate | null>(connex.wallet.state.connectionCertificate);
+        useState<ThorDevkit.Certificate | null>(
+            connex.wallet.state.connectionCertificate,
+        );
 
     useEffect(() => {
         const addressSub = subscribeKey(connex.wallet.state, 'address', (v) => {

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

@@ -1,6 +1,6 @@
 /// <reference types="@vechain/connex" />
 import type React from 'react';
-import type { Certificate } from 'thor-devkit';
+import * as ThorDevkit from 'thor-devkit';
 import type { ConnectResponse, WalletSource } from '@vechain/dapp-kit';
 import { type DAppKitUIOptions } from '@vechain/dapp-kit-ui';
 
@@ -35,7 +35,7 @@ export interface DAppKitContext {
         connect: () => Promise<ConnectResponse>;
         account: string | null;
         source: WalletSource | null;
-        connectionCertificate: Certificate | null;
+        connectionCertificate: ThorDevkit.Certificate | null;
     };
     modal: {
         open: () => void;

packages/dapp-kit-react/tsconfig.json

@@ -1,5 +1,23 @@
 {
-    "extends": "@vechain/repo-config/src/tsconfig/library.json",
-    "include": ["."],
-    "exclude": ["dist", "node_modules"]
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "target": "es2021",
+        "experimentalDecorators": true,
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "inlineSources": false,
+        "isolatedModules": true,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "preserveWatchOutput": true,
+        "skipLibCheck": true,
+        "strict": true,
+        // React
+        "jsx": "react-jsx"
+    },
+    "include": ["src/**/*.ts", "test/**/*.test.ts"]
 }

packages/dapp-kit-react/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig({
+    entry: ['src/index.ts'],
+    outDir: 'dist',
+    format: 'esm',
+    minify: true,
+    sourcemap: true,
+    dts: true,
+    clean: true,
+    external: ['react'],
+});

packages/dapp-kit-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-ui",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "private": false,
     "description": "Vanilla JS DAppKit",
     "keywords": [
@@ -31,17 +31,18 @@
         "purge": "yarn clean && rm -rf node_modules",
         "test": "vitest run --coverage",
         "test:dev": "vitest run ",
-        "watch": "tsup --watch"
+        "watch": "yarn build --watch"
     },
     "dependencies": {
+        "@vechain/connex": "2.1.0",
         "@vechain/dapp-kit": "*",
         "@vechain/picasso": "2.1.1",
         "@wagmi/core": "^1.4.5",
         "@web3modal/ethereum": "^2.7.1",
         "@web3modal/html": "^2.7.1",
         "lit": "^3.0.0",
         "qrcode": "1.5.3",
-        "valtio": "^1.12.1",
+        "valtio": "1.11.2",
         "viem": "^1.18.4"
     },
     "devDependencies": {
@@ -53,6 +54,7 @@
         "eslint": "^8.15.0",
         "parcel": "^2.10.2",
         "prettier": "^2.6.2",
+        "punycode": "^1.4.1",
         "tsup": "^7.2.0",
         "typechain": "^8.3.2",
         "typescript": "~5.2.0",

packages/dapp-kit-ui/tsconfig.json

@@ -1,13 +1,21 @@
 {
-    "extends": "@vechain/repo-config/src/tsconfig/base.json",
     "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
         "target": "es2021",
-        "experimentalDecorators": true
+        "experimentalDecorators": true,
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "inlineSources": false,
+        "isolatedModules": true,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "preserveWatchOutput": true,
+        "skipLibCheck": true,
+        "strict": true
     },
-    "include": [
-        "src/**/*.ts",
-        "test/utils/listeners.test.ts",
-        "test/utils/mobile.test.ts"
-    ],
-    "exclude": []
+    "include": ["src/**/*.ts", "test/**/*.test.ts"]
 }

packages/dapp-kit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",
@@ -14,12 +14,12 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "tsup src/index.ts --format cjs,esm --dts",
+        "build": "tsup",
         "clean": "rm -rf dist .turbo",
         "lint": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules",
         "test": "vitest run --coverage",
-        "watch": "tsup src/index.ts --format cjs,esm --watch --dts"
+        "watch": "yarn build --watch"
     },
     "dependencies": {
         "@vechain/connex": "2.1.0",
@@ -31,7 +31,7 @@
         "@walletconnect/utils": "2.10.2",
         "events": "^3.3.0",
         "thor-devkit": "^2.0.9",
-        "valtio": "^1.12.1"
+        "valtio": "1.11.2"
     },
     "devDependencies": {
         "@types/react": "^18.2.28",

packages/dapp-kit/src/classes/certificate-wallet.ts

@@ -1,4 +1,4 @@
-import { Certificate } from 'thor-devkit';
+import * as ThorDevkit from 'thor-devkit';
 import type { BaseWallet, ConnectResponse, ConnexWallet } from '../types';
 import { DEFAULT_CONNECT_CERT_MESSAGE } from '../constants';
 
@@ -24,7 +24,7 @@ class CertificateBasedWallet implements ConnexWallet {
         };
 
         try {
-            Certificate.verify(connectionCertificate);
+            ThorDevkit.Certificate.verify(connectionCertificate);
 
             return {
                 account: signer,

packages/dapp-kit/src/classes/wallet-manager.ts

@@ -1,4 +1,4 @@
-import { Certificate } from 'thor-devkit';
+import * as ThorDevkit from 'thor-devkit';
 import { proxy, subscribe } from 'valtio/vanilla';
 import { subscribeKey } from 'valtio/vanilla/utils';
 import type {
@@ -83,7 +83,7 @@ class WalletManager {
         };
 
         try {
-            Certificate.verify(connectionCertificate);
+            ThorDevkit.Certificate.verify(connectionCertificate);
             this.state.address = signer;
             this.state.connectionCertificate = connectionCertificate;
             return {