Merge branch 'main' into dependabot/npm_and_yarn/msgpackr-1.10.1

.github/workflows/deploy-gh-pages.yaml

@@ -40,19 +40,18 @@ jobs:
       - name: Build React App
         run: |
           yarn install:all
-          yarn build:packages
-          yarn build:apps
+          yarn build
 
       - name: Setup Pages
         uses: actions/configure-pages@v2
 
       - name: Copy Builds
         run: |
           mkdir build
-          cp -r apps/sample-vue-app/dist build/vue
-          cp -r apps/sample-react-app/dist build/react
-          cp -r apps/sample-vanilla-app/dist build/vanilla
-          cp -r apps/sample-angular-app/dist/easy-angular build/angular
+          cp -r examples/sample-vue-app/dist build/vue
+          cp -r examples/sample-react-app/dist build/react
+          cp -r examples/sample-vanilla-app/dist build/vanilla
+          cp -r examples/sample-angular-app/dist/easy-angular build/angular
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1

.github/workflows/publish-wallet-kit.yaml → .github/workflows/publish-dapp-kit.yaml

@@ -1,4 +1,4 @@
-name: Publish NPM package
+name: Publish GitHub NPM Packages
 
 on:
   push:

README.md

@@ -1,7 +1,7 @@
 # vechain-dapp-kit
 
-VeWorld DAppKit is a TypeScript library that facilitates seamless interaction between vechain wallets (veworld, sync2)
-and dApps, enhancing user experience and developer convenience.
+The Vechain DAppKit is a TypeScript library that facilitates seamless interaction between vechain wallets (veworld, sync2)
+and dApps, enhancing user experience and developer convenience. Please refer to [Vechain Docs](https://docs.vechain.org/developer-resources/sdks-and-providers/dapp-kit) for full documentation and usage.
 
 ## Table of Contents
 
@@ -52,7 +52,7 @@ Key Features a.k.a scope
 
 ## Sample Projects
 
--   Please refer to the [apps](./apps) folder for sample projects.
+-   Please refer to the [apps](./examples) folder for sample projects.
 
 ---
 
@@ -144,6 +144,6 @@ git clone [email protected]:vechainfoundation/vechain-dapp-kit.git
 cd vechain-dapp-kit
 git checkout X.Y.Z
 yarn install:all
-yarn build
+yarn build:release X.Y.Z
 yarn changeset publish
 ```

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

@@ -32,7 +32,7 @@ export class AppComponent implements OnInit {
 
             handleConnected(DAppKitUI.wallet.state.address);
 
-            DAppKitUI.modal.onConnected(handleConnected);
+            DAppKitUI.modal.onConnectionStatusChange(handleConnected);
         }
     }
 

apps/sample-next-app/src/app/pages/homepage.tsx → examples/sample-next-app/src/app/pages/homepage.tsx

@@ -11,7 +11,7 @@ import type { WalletConnectOptions } from '@vechain/dapp-kit';
 
 const Button = (): ReactElement => {
     const { account } = useWallet();
-    const { open, onConnected } = useWalletModal();
+    const { open, onConnectionStatusChange } = useWalletModal();
     const [buttonText, setButtonText] = useState('Connect Custom Button');
 
     useEffect(() => {
@@ -29,8 +29,8 @@ const Button = (): ReactElement => {
 
         handleConnected(account);
 
-        onConnected(handleConnected);
-    }, [account, onConnected]);
+        onConnectionStatusChange(handleConnected);
+    }, [account, onConnectionStatusChange]);
 
     return (
         <div className="container">

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

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 
 function App() {
     const { account } = useWallet();
-    const { open, onConnected } = useWalletModal();
+    const { open, onConnectionStatusChange } = useWalletModal();
     const [buttonText, setButtonText] = useState('Connect Custom Button');
 
     useEffect(() => {
@@ -25,8 +25,8 @@ function App() {
 
         handleConnected(account);
 
-        onConnected(handleConnected);
-    }, [account, onConnected]);
+        onConnectionStatusChange(handleConnected);
+    }, [account, onConnectionStatusChange]);
 
     return (
         <div className="container">

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

@@ -4,6 +4,11 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 export default defineConfig({
     plugins: [nodePolyfills(), react()],
+    build: {
+        commonjsOptions: {
+            transformMixedEsModules: true,
+        },
+    },
     base:
         process.env.NODE_ENV === 'production'
             ? '/vechain-dapp-kit/react/'

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

@@ -41,6 +41,6 @@ setTimeout(() => {
 
         handleConnected(DAppKitUI.wallet.state.address);
 
-        DAppKitUI.modal.onConnected(handleConnected);
+        DAppKitUI.modal.onConnectionStatusChange(handleConnected);
     }
 }, 100);

apps/sample-vanilla-app/index.js → examples/sample-vanilla-app/index.js

@@ -42,4 +42,4 @@ const handleConnected = (address) => {
 
 handleConnected(DAppKitUI.wallet.state.address);
 
-DAppKitUI.modal.onConnected(handleConnected);
+DAppKitUI.modal.onConnectionStatusChange(handleConnected);

apps/sample-vue-app/src/App.vue → examples/sample-vue-app/src/App.vue

@@ -54,7 +54,7 @@ setTimeout(() => {
 
         handleConnected(DAppKitUI.wallet.state.address);
 
-        DAppKitUI.modal.onConnected(handleConnected);
+        DAppKitUI.modal.onConnectionStatusChange(handleConnected);
     }
 }, 100);
 

package.json

@@ -1,10 +1,11 @@
 {
-    "private": true,
     "name": "vechain-dapp-kit",
+    "private": true,
     "description": "A TypeScript library that facilitates seamless interaction between vechain wallets (veworld, sync2) and dApps.",
     "workspaces": [
-        "apps/*",
-        "packages/*"
+        "examples/*",
+        "packages/*",
+        "tests/*"
     ],
     "scripts": {
         "build": "turbo run build",

packages/dapp-kit-react/README.md

@@ -1,22 +1,9 @@
 # `@vechain/dapp-kit-react`
 
-## Why ?
-
--   Allow easy interaction with all wallets.
--   Connex is designed to play nice with one wallet at a time, this library provides a layer on top of Connex to easily
-    allow interaction with all wallets.
--   Easy setup for wallet connect
+The Vechain DApp Kit serves as a sophisticated layer built upon @vechain/connex, providing a simplified and efficient avenue for engaging with a multitude of Vechain wallets. This innovative toolkit enhances the ease of interaction, offering developers a seamless bridge to connect with diverse Vechain wallet functionalities. For more information, please refer to the official [Vechain Docs](https://docs.vechain.org/developer-resources/sdks-and-providers/dapp-kit)
 
 ## Installation
 
-### Build
-
-```bash
-yarn build
-```
-
-## Usage
-
 ```bash
 yarn add @vechain/dapp-kit-react
 ```

packages/dapp-kit-react/package.json

@@ -2,6 +2,8 @@
     "name": "@vechain/dapp-kit-react",
     "version": "1.0.0",
     "private": false,
+    "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
+    "repository": "github:vechain/vechain-dapp-kit",
     "license": "MIT",
     "sideEffects": false,
     "type": "module",

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

@@ -10,6 +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';
 
 /**
  * Context
@@ -23,6 +24,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     walletConnectOptions,
     usePersistence = false,
     logLevel,
+    requireCertificate,
     themeMode,
     themeVariables,
     i18n,
@@ -38,6 +40,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
                 walletConnectOptions,
                 usePersistence,
                 logLevel,
+                requireCertificate,
                 themeVariables,
                 themeMode,
                 i18n,
@@ -51,6 +54,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
             walletConnectOptions,
             usePersistence,
             logLevel,
+            requireCertificate,
             themeVariables,
             themeMode,
             i18n,
@@ -66,6 +70,8 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     const [source, setSource] = useState<WalletSource | null>(
         connex.wallet.state.source,
     );
+    const [connectionCertificate, setConnectionCertificate] =
+        useState<Certificate | null>(connex.wallet.state.connectionCertificate);
 
     useEffect(() => {
         const addressSub = subscribeKey(connex.wallet.state, 'address', (v) => {
@@ -74,10 +80,18 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
         const sourceSub = subscribeKey(connex.wallet.state, 'source', (v) => {
             setSource(v);
         });
+        const certificateSub = subscribeKey(
+            connex.wallet.state,
+            'connectionCertificate',
+            (v) => {
+                setConnectionCertificate(v);
+            },
+        );
 
         return () => {
             addressSub();
             sourceSub();
+            certificateSub();
         };
     }, [connex.wallet.state]);
 
@@ -90,7 +104,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     }, []);
     const onModalConnected = useCallback(
         (callback: (address: string | null) => void) =>
-            DAppKitUI.modal.onConnected(callback),
+            DAppKitUI.modal.onConnectionStatusChange(callback),
         [],
     );
 
@@ -107,14 +121,23 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
                 availableWallets: connex.wallet.state.availableSources,
                 account,
                 source,
+                connectionCertificate,
             },
             modal: {
                 open: openModal,
                 close: closeModal,
-                onConnected: onModalConnected,
+                onConnectionStatusChange: onModalConnected,
             },
         };
-    }, [connex, account, source, closeModal, openModal, onModalConnected]);
+    }, [
+        connex,
+        account,
+        source,
+        closeModal,
+        openModal,
+        onModalConnected,
+        connectionCertificate,
+    ]);
 
     return <Context.Provider value={context}>{children}</Context.Provider>;
 };

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

@@ -1,5 +1,6 @@
 /// <reference types="@vechain/connex" />
 import type React from 'react';
+import type { Certificate } from 'thor-devkit';
 import type { ConnectResponse, WalletSource } from '@vechain/dapp-kit';
 import { type DAppKitUIOptions } from '@vechain/dapp-kit-ui';
 
@@ -34,10 +35,13 @@ export interface DAppKitContext {
         connect: () => Promise<ConnectResponse>;
         account: string | null;
         source: WalletSource | null;
+        connectionCertificate: Certificate | null;
     };
     modal: {
         open: () => void;
         close: () => void;
-        onConnected: (callback: (address: string | null) => void) => void;
+        onConnectionStatusChange: (
+            callback: (address: string | null) => void,
+        ) => void;
     };
 }

packages/dapp-kit-ui/README.md

@@ -1,20 +1,6 @@
 # `@vechain/dapp-kit-ui`
 
-## Why ?
-
--   Creating some reusable UI components for connecting wallets
--   Allow easy interaction with all wallets.
--   Connex is designed to play nice with one wallet at a time, this library provides a layer on top of Connex to easily
-    allow interaction with all wallets.
--   Easy setup for wallet connect.
-
-## Installation
-
-### Build
-
-```bash
-yarn build
-```
+The Vechain DApp Kit serves as a sophisticated layer built upon @vechain/connex, providing a simplified and efficient avenue for engaging with a multitude of Vechain wallets. This innovative toolkit enhances the ease of interaction, offering developers a seamless bridge to connect with diverse Vechain wallet functionalities. For more information, please refer to the official [Vechain Docs](https://docs.vechain.org/developer-resources/sdks-and-providers/dapp-kit)
 
 ## Usage
 

packages/dapp-kit-ui/index.js

@@ -42,4 +42,4 @@ const handleConnected = (address) => {
 
 handleConnected(DAppKitUI.wallet.state.address);
 
-DAppKitUI.modal.onConnected(handleConnected);
+DAppKitUI.modal.onConnectionStatusChange(handleConnected);

packages/dapp-kit-ui/package.json

@@ -9,6 +9,8 @@
         "typescript",
         "lit"
     ],
+    "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
+    "repository": "github:vechain/vechain-dapp-kit",
     "license": "MIT",
     "author": "Davide Carpini",
     "type": "module",

packages/dapp-kit-ui/src/assets/styles/button.ts

@@ -22,35 +22,42 @@ export const buttonStyle = css`
         background: var(--vdk-color-light-primary, ${Colors.Light.Primary});
         color: var(--vdk-color-light-tertiary, ${Colors.Light.Tertiary});
     }
-    button.LIGHT:hover {
+    button.LIGHT:hover:not(:disabled) {
         background: var(
             --vdk-color-light-primary-hover,
             ${Colors.Light.PrimaryHover}
         );
     }
-    button.LIGHT:active {
+    button.LIGHT:active:not(:disabled) {
         background: var(
             --vdk-color-light-primary-active,
             ${Colors.Light.PrimaryActive}
         );
     }
+    button.LIGHT:disabled {
+        opacity: 0.8;
+    }
 
     button.DARK {
         background: var(--vdk-color-dark-primary, ${Colors.Dark.Primary});
         color: var(--vdk-color-dark-tertiary, ${Colors.Dark.Tertiary});
     }
-    button.DARK:hover {
+    button.DARK:hover:not(:disabled) {
         background: var(
             --vdk-color-dark-primary-hover,
             ${Colors.Dark.PrimaryHover}
         );
     }
-    button.DARK:active {
+    button.DARK:active:not(:disabled) {
         background: var(
             --vdk-color-dark-primary-active,
             ${Colors.Dark.PrimaryActive}
         );
     }
+
+    button.DARK:disabled {
+        opacity: 0.8;
+    }
 `;
 
 export const iconButtonStyle = css`
@@ -83,4 +90,8 @@ export const iconButtonStyle = css`
     .icon-button.DARK:active {
         background: var(--vdk-color-dark-primary, ${Colors.Dark.PrimaryActive});
     }
+
+    button:disabled {
+        opacity: 0.8;
+    }
 `;