Implement new vechain sdk

.nvmrc

@@ -1 +1 @@
-v20.11.0
+v20.17.0

examples/sample-angular-app/package.json

@@ -14,15 +14,15 @@
         "watch": "ng build --watch --configuration development"
     },
     "dependencies": {
-        "@angular/animations": "^16.1.0",
-        "@angular/common": "^16.1.0",
-        "@angular/compiler": "^16.1.0",
-        "@angular/core": "^16.1.0",
-        "@angular/forms": "^16.1.0",
-        "@angular/localize": "^16.1.0",
-        "@angular/platform-browser": "^16.1.0",
-        "@angular/platform-browser-dynamic": "^16.1.0",
-        "@angular/router": "^16.1.0",
+        "@angular/animations": "^18.2.2",
+        "@angular/common": "^18.2.2",
+        "@angular/compiler": "^18.2.2",
+        "@angular/core": "^18.2.2",
+        "@angular/forms": "^18.2.2",
+        "@angular/localize": "^18.2.2",
+        "@angular/platform-browser": "^18.2.2",
+        "@angular/platform-browser-dynamic": "^18.2.2",
+        "@angular/router": "^18.2.2",
         "@caliatys/array-typer": "^1.0.0",
         "@ng-bootstrap/ng-bootstrap": "^15.0.1",
         "@ngx-translate/core": "^15.0.0",
@@ -46,9 +46,9 @@
         "zone.js": "~0.13.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^16.1.0",
-        "@angular/cli": "^16.1.0",
-        "@angular/compiler-cli": "^16.1.0",
+        "@angular-devkit/build-angular": "^18.2.2",
+        "@angular/cli": "^18.2.2",
+        "@angular/compiler-cli": "^18.2.2",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.1",
         "@vechain/repo-config": "https://github.com/vechain/repo-config#v0.0.1",
@@ -58,6 +58,6 @@
         "karma-coverage": "~2.1.0",
         "karma-jasmine": "~4.0.0",
         "karma-jasmine-html-reporter": "~1.7.0",
-        "typescript": "~4.9.5"
+        "typescript": "5.5.4"
     }
 }

examples/sample-react-app/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "sameple-react-app",
+    "name": "sample-react-app",
     "version": "0.0.0",
     "private": true,
     "type": "module",
@@ -18,6 +18,9 @@
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-react": "*",
         "@vechain/dapp-kit-ui": "*",
+        "@vechain/sdk-core": "1.0.0-beta.30",
+        "@vechain/sdk-network": "1.0.0-beta.30",
+        "ethers": "6.13.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "vite": "^5.0.12"
@@ -33,7 +36,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.4",
         "react-test-renderer": "^18.2.0",
-        "typescript": "^5.2.2",
+        "typescript": "5.3.3",
         "vite-plugin-node-polyfills": "^0.17.0",
         "vitest": "^1.2.2"
     }

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

@@ -1,12 +1,16 @@
 import {
     WalletButton,
+    useSDK,
     useWallet,
     useWalletModal,
 } from '@vechain/dapp-kit-react';
+import { ERC20_ABI, VTHO_ADDRESS } from '@vechain/sdk-core';
 import { useEffect, useState } from 'react';
 
 function App() {
-    const { account } = useWallet();
+    const { account, signer } = useWallet();
+
+    const thor = useSDK().thor;
     const { open, onConnectionStatusChange } = useWalletModal();
     const [buttonText, setButtonText] = useState('Connect Custom Button');
 
@@ -28,13 +32,31 @@ function App() {
         onConnectionStatusChange(handleConnected);
     }, [account, onConnectionStatusChange]);
 
+    useEffect(() => {
+        console.log('signer', signer);
+    }, [signer]);
+
+    const testTx = async () => {
+        const vthoContract = thor.contracts.load(
+            VTHO_ADDRESS,
+            ERC20_ABI,
+            signer,
+        );
+
+        vthoContract.transact.transfer(
+            '0x0000000000000000000000000000000000000000',
+            1000000000000000000n,
+        );
+    };
+
     return (
         <div className="container">
             <h2>React JS</h2>
             <div className="label">kit button:</div>
             <WalletButton />
             <div className="label">custom button:</div>
             <button onClick={open}>{buttonText}</button>
+            <button onClick={testTx}>Test TX</button>
         </div>
     );
 }

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

@@ -20,9 +20,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <DAppKitProvider
             nodeUrl={'https://testnet.vechain.org/'}
-            genesis={'test'}
             usePersistence
             walletConnectOptions={walletConnectOptions}
+            genesis={'test'}
         >
             <App />
         </DAppKitProvider>

examples/sample-remix-app/package.json

@@ -35,7 +35,7 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "typescript": "^5.1.6",
+        "typescript": "5.3.3",
         "vite": "^5.1.0",
         "vite-plugin-node-polyfills": "^0.21.0",
         "vite-tsconfig-paths": "^4.2.1"

examples/sample-remix-app/vite.config.ts.timestamp-1725023832880-5fdf82ce4f35.mjs

@@ -0,0 +1,43 @@
+// vite.config.ts
+import { vitePlugin as remix } from "file:///Users/federicoluigialfeo/developer-workdir/dapp/vechain-dapp-kit/examples/sample-remix-app/node_modules/@remix-run/dev/dist/index.js";
+import { defineConfig } from "file:///Users/federicoluigialfeo/developer-workdir/dapp/vechain-dapp-kit/node_modules/vite/dist/node/index.js";
+import tsconfigPaths from "file:///Users/federicoluigialfeo/developer-workdir/dapp/vechain-dapp-kit/node_modules/vite-tsconfig-paths/dist/index.mjs";
+import { installGlobals } from "file:///Users/federicoluigialfeo/developer-workdir/dapp/vechain-dapp-kit/examples/sample-remix-app/node_modules/@remix-run/node/dist/index.js";
+installGlobals();
+var vite_config_default = defineConfig(({ mode }) => ({
+  plugins: [remix(), tsconfigPaths()],
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true
+    }
+  },
+  define: {
+    // By default, Vite doesn't include shims for NodeJS/
+    // necessary for segment analytics lib to work
+    global: {},
+    process: {
+      env: { DEBUG: void 0 },
+      version: ""
+      // to avoid undefined.slice error
+    }
+  },
+  resolve: {
+    alias: {
+      process: "process/browser",
+      buffer: "buffer",
+      crypto: "crypto-browserify",
+      stream: "stream-browserify",
+      assert: "assert",
+      http: "stream-http",
+      https: "https-browserify",
+      os: "os-browserify",
+      url: "url",
+      util: "util"
+    }
+  },
+  base: mode === "production" ? "/vechain-dapp-kit/react/" : "/"
+}));
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvZmVkZXJpY29sdWlnaWFsZmVvL2RldmVsb3Blci13b3JrZGlyL2RhcHAvdmVjaGFpbi1kYXBwLWtpdC9leGFtcGxlcy9zYW1wbGUtcmVtaXgtYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvZmVkZXJpY29sdWlnaWFsZmVvL2RldmVsb3Blci13b3JrZGlyL2RhcHAvdmVjaGFpbi1kYXBwLWtpdC9leGFtcGxlcy9zYW1wbGUtcmVtaXgtYXBwL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9mZWRlcmljb2x1aWdpYWxmZW8vZGV2ZWxvcGVyLXdvcmtkaXIvZGFwcC92ZWNoYWluLWRhcHAta2l0L2V4YW1wbGVzL3NhbXBsZS1yZW1peC1hcHAvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyB2aXRlUGx1Z2luIGFzIHJlbWl4IH0gZnJvbSAnQHJlbWl4LXJ1bi9kZXYnO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XG5pbXBvcnQgdHNjb25maWdQYXRocyBmcm9tICd2aXRlLXRzY29uZmlnLXBhdGhzJztcbmltcG9ydCB7IGluc3RhbGxHbG9iYWxzIH0gZnJvbSAnQHJlbWl4LXJ1bi9ub2RlJztcblxuaW5zdGFsbEdsb2JhbHMoKTtcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZygoeyBtb2RlIH0pID0+ICh7XG4gICAgcGx1Z2luczogW3JlbWl4KCksIHRzY29uZmlnUGF0aHMoKV0sXG4gICAgYnVpbGQ6IHtcbiAgICAgICAgY29tbW9uanNPcHRpb25zOiB7XG4gICAgICAgICAgICB0cmFuc2Zvcm1NaXhlZEVzTW9kdWxlczogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICB9LFxuICAgIGRlZmluZToge1xuICAgICAgICAvLyBCeSBkZWZhdWx0LCBWaXRlIGRvZXNuJ3QgaW5jbHVkZSBzaGltcyBmb3IgTm9kZUpTL1xuICAgICAgICAvLyBuZWNlc3NhcnkgZm9yIHNlZ21lbnQgYW5hbHl0aWNzIGxpYiB0byB3b3JrXG4gICAgICAgIGdsb2JhbDoge30sXG4gICAgICAgIHByb2Nlc3M6IHtcbiAgICAgICAgICAgIGVudjogeyBERUJVRzogdW5kZWZpbmVkIH0sXG4gICAgICAgICAgICB2ZXJzaW9uOiAnJywgLy8gdG8gYXZvaWQgdW5kZWZpbmVkLnNsaWNlIGVycm9yXG4gICAgICAgIH0sXG4gICAgfSxcbiAgICByZXNvbHZlOiB7XG4gICAgICAgIGFsaWFzOiB7XG4gICAgICAgICAgICBwcm9jZXNzOiAncHJvY2Vzcy9icm93c2VyJyxcbiAgICAgICAgICAgIGJ1ZmZlcjogJ2J1ZmZlcicsXG4gICAgICAgICAgICBjcnlwdG86ICdjcnlwdG8tYnJvd3NlcmlmeScsXG4gICAgICAgICAgICBzdHJlYW06ICdzdHJlYW0tYnJvd3NlcmlmeScsXG4gICAgICAgICAgICBhc3NlcnQ6ICdhc3NlcnQnLFxuICAgICAgICAgICAgaHR0cDogJ3N0cmVhbS1odHRwJyxcbiAgICAgICAgICAgIGh0dHBzOiAnaHR0cHMtYnJvd3NlcmlmeScsXG4gICAgICAgICAgICBvczogJ29zLWJyb3dzZXJpZnknLFxuICAgICAgICAgICAgdXJsOiAndXJsJyxcbiAgICAgICAgICAgIHV0aWw6ICd1dGlsJyxcbiAgICAgICAgfSxcbiAgICB9LFxuICAgIGJhc2U6IG1vZGUgPT09ICdwcm9kdWN0aW9uJyA/ICcvdmVjaGFpbi1kYXBwLWtpdC9yZWFjdC8nIDogJy8nLFxufSkpO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFtYyxTQUFTLGNBQWMsYUFBYTtBQUN2ZSxTQUFTLG9CQUFvQjtBQUM3QixPQUFPLG1CQUFtQjtBQUMxQixTQUFTLHNCQUFzQjtBQUUvQixlQUFlO0FBQ2YsSUFBTyxzQkFBUSxhQUFhLENBQUMsRUFBRSxLQUFLLE9BQU87QUFBQSxFQUN2QyxTQUFTLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQztBQUFBLEVBQ2xDLE9BQU87QUFBQSxJQUNILGlCQUFpQjtBQUFBLE1BQ2IseUJBQXlCO0FBQUEsSUFDN0I7QUFBQSxFQUNKO0FBQUEsRUFDQSxRQUFRO0FBQUE7QUFBQTtBQUFBLElBR0osUUFBUSxDQUFDO0FBQUEsSUFDVCxTQUFTO0FBQUEsTUFDTCxLQUFLLEVBQUUsT0FBTyxPQUFVO0FBQUEsTUFDeEIsU0FBUztBQUFBO0FBQUEsSUFDYjtBQUFBLEVBQ0o7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNMLE9BQU87QUFBQSxNQUNILFNBQVM7QUFBQSxNQUNULFFBQVE7QUFBQSxNQUNSLFFBQVE7QUFBQSxNQUNSLFFBQVE7QUFBQSxNQUNSLFFBQVE7QUFBQSxNQUNSLE1BQU07QUFBQSxNQUNOLE9BQU87QUFBQSxNQUNQLElBQUk7QUFBQSxNQUNKLEtBQUs7QUFBQSxNQUNMLE1BQU07QUFBQSxJQUNWO0FBQUEsRUFDSjtBQUFBLEVBQ0EsTUFBTSxTQUFTLGVBQWUsNkJBQTZCO0FBQy9ELEVBQUU7IiwKICAibmFtZXMiOiBbXQp9Cg==

examples/sample-svelte-app/package.json

@@ -32,7 +32,7 @@
         "svelte": "^4.0.5",
         "svelte-check": "^3.6.0",
         "tslib": "^2.4.1",
-        "typescript": "^5.0.0",
+        "typescript": "5.3.3",
         "vite": "^4.5.2",
         "vite-plugin-node-polyfills": "^0.16.0"
     }

examples/sample-vanilla-app/package.json

@@ -15,7 +15,7 @@
         "@vechain/dapp-kit-ui": "*"
     },
     "devDependencies": {
-        "typescript": "^5.2.2",
+        "typescript": "5.3.3",
         "vite": "^5.2.0"
     }
 }

examples/sample-vue-app/package.json

@@ -16,7 +16,7 @@
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
-        "typescript": "^5.2.2",
+        "typescript": "5.3.3",
         "vite": "^5.0.12",
         "vite-plugin-node-polyfills": "^0.17.0",
         "vue-tsc": "^2.0.6"

package.json

@@ -56,7 +56,7 @@
         "prettier": "^2.5.1",
         "punycode": "^1.4.1",
         "turbo": "latest",
-        "typescript": "4.9.5"
+        "typescript": "5.3.3"
     },
     "packageManager": "[email protected]"
 }

packages/dapp-kit-react/package.json

@@ -29,8 +29,8 @@
         "@vechain/connex-framework": "2.1.0",
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-ui": "*",
-        "@vechain/sdk-core": "1.0.0-beta.24",
-        "@vechain/sdk-network": "1.0.0-beta.29",
+        "@vechain/sdk-core": "1.0.0-beta.30",
+        "@vechain/sdk-network": "1.0.0-beta.30",
         "valtio": "1.11.2"
     },
     "devDependencies": {

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

@@ -8,9 +8,9 @@ import React, {
 } from 'react';
 import type { WalletSource } from '@vechain/dapp-kit';
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
+import { type Certificate } from '@vechain/sdk-core';
 import { subscribeKey } from 'valtio/vanilla/utils';
 import type { DAppKitProviderOptions, DAppKitContext } from './types';
-import { type Certificate } from '@vechain/sdk-core';
 
 /**
  * Context
@@ -33,7 +33,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     onSourceClick,
     connectionCertificate: connectionCertificateData,
 }): React.ReactElement => {
-    const connex = useMemo(
+    const dAppKit = useMemo(
         () =>
             DAppKitUI.configure({
                 nodeUrl,
@@ -68,23 +68,29 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     );
 
     const [account, setAccount] = useState<string | null>(
-        connex.wallet.state.address,
+        dAppKit.wallet.state.address,
     );
     const [source, setSource] = useState<WalletSource | null>(
-        connex.wallet.state.source,
+        dAppKit.wallet.state.source,
     );
     const [connectionCertificate, setConnectionCertificate] =
-        useState<Certificate | null>(connex.wallet.state.connectionCertificate);
+        useState<Certificate | null>(
+            dAppKit.wallet.state.connectionCertificate,
+        );
 
     useEffect(() => {
-        const addressSub = subscribeKey(connex.wallet.state, 'address', (v) => {
-            setAccount(v);
-        });
-        const sourceSub = subscribeKey(connex.wallet.state, 'source', (v) => {
+        const addressSub = subscribeKey(
+            dAppKit.wallet.state,
+            'address',
+            (v) => {
+                setAccount(v);
+            },
+        );
+        const sourceSub = subscribeKey(dAppKit.wallet.state, 'source', (v) => {
             setSource(v);
         });
         const certificateSub = subscribeKey(
-            connex.wallet.state,
+            dAppKit.wallet.state,
             'connectionCertificate',
             (v) => {
                 setConnectionCertificate(v);
@@ -96,7 +102,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
             sourceSub();
             certificateSub();
         };
-    }, [connex.wallet.state]);
+    }, [dAppKit.wallet.state]);
 
     const openModal = useCallback(() => {
         DAppKitUI.modal.open();
@@ -113,15 +119,15 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
 
     const context: DAppKitContext = useMemo(() => {
         return {
-            connex: {
-                thor: connex.thor,
-                vendor: connex.vendor,
+            sdk: {
+                thor: dAppKit.thor,
             },
             wallet: {
-                setSource: connex.wallet.setSource,
-                disconnect: connex.wallet.disconnect,
-                connect: connex.wallet.connect,
-                availableWallets: connex.wallet.state.availableSources,
+                setSource: dAppKit.wallet.setSource,
+                disconnect: dAppKit.wallet.disconnect,
+                connect: dAppKit.wallet.connect,
+                signer: dAppKit.wallet.signer,
+                availableWallets: dAppKit.wallet.state.availableSources,
                 account,
                 source,
                 connectionCertificate,
@@ -133,7 +139,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
             },
         };
     }, [
-        connex,
+        dAppKit,
         account,
         source,
         closeModal,
@@ -145,14 +151,14 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     return <Context.Provider value={context}>{children}</Context.Provider>;
 };
 
-export const useConnex = (): DAppKitContext['connex'] => {
+export const useSDK = (): DAppKitContext['sdk'] => {
     const context = useContext(Context);
 
     if (!context) {
-        throw new Error('"useConnex" must be used within a ConnexProvider');
+        throw new Error('"useSDK" must be used within a ConnexProvider');
     }
 
-    return context.connex;
+    return context.sdk;
 };
 
 export const useWallet = (): DAppKitContext['wallet'] => {

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

@@ -3,6 +3,8 @@ import type React from 'react';
 import type { ConnectResponse, WalletSource } from '@vechain/dapp-kit';
 import { type DAppKitUIOptions } from '@vechain/dapp-kit-ui';
 import { type Certificate } from '@vechain/sdk-core';
+import type { ThorClient } from '@vechain/sdk-network';
+import { VeChainSignerDAppKit } from '@vechain/dapp-kit/src/classes/vechain-signer';
 
 export type { WalletConnectOptions, DAppKitOptions } from '@vechain/dapp-kit';
 export type { DAppKitUIOptions } from '@vechain/dapp-kit-ui';
@@ -27,16 +29,16 @@ export type DAppKitProviderOptions = DAppKitUIOptions & {
  */
 
 export interface DAppKitContext {
-    connex: {
-        thor: Connex.Thor;
-        vendor: Connex.Vendor;
+    sdk: {
+        thor: ThorClient;
     };
     wallet: {
         setSource: (source: WalletSource) => void;
         availableWallets: WalletSource[];
         disconnect: () => void;
         connect: () => Promise<ConnectResponse>;
         account: string | null;
+        signer: VeChainSignerDAppKit | undefined;
         source: WalletSource | null;
         connectionCertificate: Certificate | null;
     };