diff --git a/.github/workflows/deploy-gh-pages.yaml b/.github/workflows/deploy-gh-pages.yaml index 8d80b4e4..6bacfe7d 100644 --- a/.github/workflows/deploy-gh-pages.yaml +++ b/.github/workflows/deploy-gh-pages.yaml @@ -40,8 +40,7 @@ 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 @@ -49,10 +48,10 @@ jobs: - 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 diff --git a/.github/workflows/publish-wallet-kit.yaml b/.github/workflows/publish-dapp-kit.yaml similarity index 97% rename from .github/workflows/publish-wallet-kit.yaml rename to .github/workflows/publish-dapp-kit.yaml index ec527149..35217b3c 100644 --- a/.github/workflows/publish-wallet-kit.yaml +++ b/.github/workflows/publish-dapp-kit.yaml @@ -1,4 +1,4 @@ -name: Publish NPM package +name: Publish GitHub NPM Packages on: push: diff --git a/README.md b/README.md index b86cb01e..bf610cf1 100644 --- a/README.md +++ b/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 git@github.com: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 ``` diff --git a/apps/sample-angular-app/.editorconfig b/examples/sample-angular-app/.editorconfig similarity index 100% rename from apps/sample-angular-app/.editorconfig rename to examples/sample-angular-app/.editorconfig diff --git a/apps/sample-angular-app/.eslintrc.js b/examples/sample-angular-app/.eslintrc.js similarity index 100% rename from apps/sample-angular-app/.eslintrc.js rename to examples/sample-angular-app/.eslintrc.js diff --git a/apps/sample-angular-app/.gitignore b/examples/sample-angular-app/.gitignore similarity index 100% rename from apps/sample-angular-app/.gitignore rename to examples/sample-angular-app/.gitignore diff --git a/apps/sample-angular-app/README.md b/examples/sample-angular-app/README.md similarity index 100% rename from apps/sample-angular-app/README.md rename to examples/sample-angular-app/README.md diff --git a/apps/sample-angular-app/angular.json b/examples/sample-angular-app/angular.json similarity index 100% rename from apps/sample-angular-app/angular.json rename to examples/sample-angular-app/angular.json diff --git a/apps/sample-angular-app/karma.conf.js b/examples/sample-angular-app/karma.conf.js similarity index 100% rename from apps/sample-angular-app/karma.conf.js rename to examples/sample-angular-app/karma.conf.js diff --git a/apps/sample-angular-app/package.json b/examples/sample-angular-app/package.json similarity index 100% rename from apps/sample-angular-app/package.json rename to examples/sample-angular-app/package.json diff --git a/apps/sample-angular-app/src/app/app-routing.module.ts b/examples/sample-angular-app/src/app/app-routing.module.ts similarity index 100% rename from apps/sample-angular-app/src/app/app-routing.module.ts rename to examples/sample-angular-app/src/app/app-routing.module.ts diff --git a/apps/sample-angular-app/src/app/app.component.html b/examples/sample-angular-app/src/app/app.component.html similarity index 100% rename from apps/sample-angular-app/src/app/app.component.html rename to examples/sample-angular-app/src/app/app.component.html diff --git a/apps/sample-angular-app/src/app/app.component.ts b/examples/sample-angular-app/src/app/app.component.ts similarity index 95% rename from apps/sample-angular-app/src/app/app.component.ts rename to examples/sample-angular-app/src/app/app.component.ts index 3f3dbf16..4918d532 100644 --- a/apps/sample-angular-app/src/app/app.component.ts +++ b/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); } } diff --git a/apps/sample-angular-app/src/app/app.module.ts b/examples/sample-angular-app/src/app/app.module.ts similarity index 100% rename from apps/sample-angular-app/src/app/app.module.ts rename to examples/sample-angular-app/src/app/app.module.ts diff --git a/apps/sample-angular-app/src/assets/.gitkeep b/examples/sample-angular-app/src/assets/.gitkeep similarity index 100% rename from apps/sample-angular-app/src/assets/.gitkeep rename to examples/sample-angular-app/src/assets/.gitkeep diff --git a/apps/sample-angular-app/src/environments/environment.prod.ts b/examples/sample-angular-app/src/environments/environment.prod.ts similarity index 100% rename from apps/sample-angular-app/src/environments/environment.prod.ts rename to examples/sample-angular-app/src/environments/environment.prod.ts diff --git a/apps/sample-angular-app/src/environments/environment.ts b/examples/sample-angular-app/src/environments/environment.ts similarity index 100% rename from apps/sample-angular-app/src/environments/environment.ts rename to examples/sample-angular-app/src/environments/environment.ts diff --git a/apps/sample-angular-app/src/index.html b/examples/sample-angular-app/src/index.html similarity index 100% rename from apps/sample-angular-app/src/index.html rename to examples/sample-angular-app/src/index.html diff --git a/apps/sample-angular-app/src/main.ts b/examples/sample-angular-app/src/main.ts similarity index 100% rename from apps/sample-angular-app/src/main.ts rename to examples/sample-angular-app/src/main.ts diff --git a/apps/sample-angular-app/src/polyfills.ts b/examples/sample-angular-app/src/polyfills.ts similarity index 100% rename from apps/sample-angular-app/src/polyfills.ts rename to examples/sample-angular-app/src/polyfills.ts diff --git a/apps/sample-angular-app/src/test.ts b/examples/sample-angular-app/src/test.ts similarity index 100% rename from apps/sample-angular-app/src/test.ts rename to examples/sample-angular-app/src/test.ts diff --git a/apps/sample-angular-app/tsconfig.app.json b/examples/sample-angular-app/tsconfig.app.json similarity index 100% rename from apps/sample-angular-app/tsconfig.app.json rename to examples/sample-angular-app/tsconfig.app.json diff --git a/apps/sample-angular-app/tsconfig.json b/examples/sample-angular-app/tsconfig.json similarity index 100% rename from apps/sample-angular-app/tsconfig.json rename to examples/sample-angular-app/tsconfig.json diff --git a/apps/sample-angular-app/tsconfig.spec.json b/examples/sample-angular-app/tsconfig.spec.json similarity index 100% rename from apps/sample-angular-app/tsconfig.spec.json rename to examples/sample-angular-app/tsconfig.spec.json diff --git a/apps/sample-next-app/.eslintrc.js b/examples/sample-next-app/.eslintrc.js similarity index 100% rename from apps/sample-next-app/.eslintrc.js rename to examples/sample-next-app/.eslintrc.js diff --git a/apps/sample-next-app/.gitignore b/examples/sample-next-app/.gitignore similarity index 100% rename from apps/sample-next-app/.gitignore rename to examples/sample-next-app/.gitignore diff --git a/apps/sample-next-app/README.md b/examples/sample-next-app/README.md similarity index 100% rename from apps/sample-next-app/README.md rename to examples/sample-next-app/README.md diff --git a/apps/sample-next-app/next.config.js b/examples/sample-next-app/next.config.js similarity index 100% rename from apps/sample-next-app/next.config.js rename to examples/sample-next-app/next.config.js diff --git a/apps/sample-next-app/package.json b/examples/sample-next-app/package.json similarity index 100% rename from apps/sample-next-app/package.json rename to examples/sample-next-app/package.json diff --git a/apps/sample-next-app/public/next.svg b/examples/sample-next-app/public/next.svg similarity index 100% rename from apps/sample-next-app/public/next.svg rename to examples/sample-next-app/public/next.svg diff --git a/apps/sample-next-app/public/vercel.svg b/examples/sample-next-app/public/vercel.svg similarity index 100% rename from apps/sample-next-app/public/vercel.svg rename to examples/sample-next-app/public/vercel.svg diff --git a/apps/sample-next-app/src/app/globals.css b/examples/sample-next-app/src/app/globals.css similarity index 100% rename from apps/sample-next-app/src/app/globals.css rename to examples/sample-next-app/src/app/globals.css diff --git a/apps/sample-next-app/src/app/layout.tsx b/examples/sample-next-app/src/app/layout.tsx similarity index 100% rename from apps/sample-next-app/src/app/layout.tsx rename to examples/sample-next-app/src/app/layout.tsx diff --git a/apps/sample-next-app/src/app/page.tsx b/examples/sample-next-app/src/app/page.tsx similarity index 100% rename from apps/sample-next-app/src/app/page.tsx rename to examples/sample-next-app/src/app/page.tsx diff --git a/apps/sample-next-app/src/app/pages/homepage.tsx b/examples/sample-next-app/src/app/pages/homepage.tsx similarity index 93% rename from apps/sample-next-app/src/app/pages/homepage.tsx rename to examples/sample-next-app/src/app/pages/homepage.tsx index 70883867..894c7776 100644 --- a/apps/sample-next-app/src/app/pages/homepage.tsx +++ b/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 (
diff --git a/apps/sample-next-app/tsconfig.json b/examples/sample-next-app/tsconfig.json similarity index 100% rename from apps/sample-next-app/tsconfig.json rename to examples/sample-next-app/tsconfig.json diff --git a/apps/sample-react-app/.eslintrc.cjs b/examples/sample-react-app/.eslintrc.cjs similarity index 100% rename from apps/sample-react-app/.eslintrc.cjs rename to examples/sample-react-app/.eslintrc.cjs diff --git a/apps/sample-react-app/.gitignore b/examples/sample-react-app/.gitignore similarity index 100% rename from apps/sample-react-app/.gitignore rename to examples/sample-react-app/.gitignore diff --git a/apps/sample-react-app/README.md b/examples/sample-react-app/README.md similarity index 100% rename from apps/sample-react-app/README.md rename to examples/sample-react-app/README.md diff --git a/apps/sample-react-app/index.html b/examples/sample-react-app/index.html similarity index 100% rename from apps/sample-react-app/index.html rename to examples/sample-react-app/index.html diff --git a/apps/sample-react-app/package.json b/examples/sample-react-app/package.json similarity index 100% rename from apps/sample-react-app/package.json rename to examples/sample-react-app/package.json diff --git a/apps/sample-react-app/src/App.tsx b/examples/sample-react-app/src/App.tsx similarity index 86% rename from apps/sample-react-app/src/App.tsx rename to examples/sample-react-app/src/App.tsx index 6e403645..752817e5 100644 --- a/apps/sample-react-app/src/App.tsx +++ b/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 (
diff --git a/apps/sample-react-app/src/index.css b/examples/sample-react-app/src/index.css similarity index 100% rename from apps/sample-react-app/src/index.css rename to examples/sample-react-app/src/index.css diff --git a/apps/sample-react-app/src/main.tsx b/examples/sample-react-app/src/main.tsx similarity index 100% rename from apps/sample-react-app/src/main.tsx rename to examples/sample-react-app/src/main.tsx diff --git a/apps/sample-react-app/src/vite-env.d.ts b/examples/sample-react-app/src/vite-env.d.ts similarity index 100% rename from apps/sample-react-app/src/vite-env.d.ts rename to examples/sample-react-app/src/vite-env.d.ts diff --git a/apps/sample-react-app/tsconfig.json b/examples/sample-react-app/tsconfig.json similarity index 100% rename from apps/sample-react-app/tsconfig.json rename to examples/sample-react-app/tsconfig.json diff --git a/apps/sample-react-app/tsconfig.node.json b/examples/sample-react-app/tsconfig.node.json similarity index 100% rename from apps/sample-react-app/tsconfig.node.json rename to examples/sample-react-app/tsconfig.node.json diff --git a/apps/sample-react-app/vite.config.ts b/examples/sample-react-app/vite.config.ts similarity index 76% rename from apps/sample-react-app/vite.config.ts rename to examples/sample-react-app/vite.config.ts index bcd3b212..5702ea65 100644 --- a/apps/sample-react-app/vite.config.ts +++ b/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/' diff --git a/apps/sample-svelte-app/.eslintignore b/examples/sample-svelte-app/.eslintignore similarity index 100% rename from apps/sample-svelte-app/.eslintignore rename to examples/sample-svelte-app/.eslintignore diff --git a/apps/sample-svelte-app/.eslintrc.cjs b/examples/sample-svelte-app/.eslintrc.cjs similarity index 100% rename from apps/sample-svelte-app/.eslintrc.cjs rename to examples/sample-svelte-app/.eslintrc.cjs diff --git a/apps/sample-svelte-app/.gitignore b/examples/sample-svelte-app/.gitignore similarity index 100% rename from apps/sample-svelte-app/.gitignore rename to examples/sample-svelte-app/.gitignore diff --git a/apps/sample-svelte-app/.npmrc b/examples/sample-svelte-app/.npmrc similarity index 100% rename from apps/sample-svelte-app/.npmrc rename to examples/sample-svelte-app/.npmrc diff --git a/apps/sample-svelte-app/.prettierignore b/examples/sample-svelte-app/.prettierignore similarity index 100% rename from apps/sample-svelte-app/.prettierignore rename to examples/sample-svelte-app/.prettierignore diff --git a/apps/sample-svelte-app/README.md b/examples/sample-svelte-app/README.md similarity index 100% rename from apps/sample-svelte-app/README.md rename to examples/sample-svelte-app/README.md diff --git a/apps/sample-svelte-app/package.json b/examples/sample-svelte-app/package.json similarity index 100% rename from apps/sample-svelte-app/package.json rename to examples/sample-svelte-app/package.json diff --git a/apps/sample-svelte-app/src/app.d.ts b/examples/sample-svelte-app/src/app.d.ts similarity index 100% rename from apps/sample-svelte-app/src/app.d.ts rename to examples/sample-svelte-app/src/app.d.ts diff --git a/apps/sample-svelte-app/src/app.html b/examples/sample-svelte-app/src/app.html similarity index 100% rename from apps/sample-svelte-app/src/app.html rename to examples/sample-svelte-app/src/app.html diff --git a/apps/sample-svelte-app/src/lib/index.ts b/examples/sample-svelte-app/src/lib/index.ts similarity index 95% rename from apps/sample-svelte-app/src/lib/index.ts rename to examples/sample-svelte-app/src/lib/index.ts index a45fda68..98f9f3dd 100644 --- a/apps/sample-svelte-app/src/lib/index.ts +++ b/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); diff --git a/apps/sample-svelte-app/src/routes/+layout.js b/examples/sample-svelte-app/src/routes/+layout.js similarity index 100% rename from apps/sample-svelte-app/src/routes/+layout.js rename to examples/sample-svelte-app/src/routes/+layout.js diff --git a/apps/sample-svelte-app/src/routes/+page.svelte b/examples/sample-svelte-app/src/routes/+page.svelte similarity index 100% rename from apps/sample-svelte-app/src/routes/+page.svelte rename to examples/sample-svelte-app/src/routes/+page.svelte diff --git a/apps/sample-svelte-app/static/favicon.png b/examples/sample-svelte-app/static/favicon.png similarity index 100% rename from apps/sample-svelte-app/static/favicon.png rename to examples/sample-svelte-app/static/favicon.png diff --git a/apps/sample-svelte-app/svelte.config.js b/examples/sample-svelte-app/svelte.config.js similarity index 100% rename from apps/sample-svelte-app/svelte.config.js rename to examples/sample-svelte-app/svelte.config.js diff --git a/apps/sample-svelte-app/tsconfig.json b/examples/sample-svelte-app/tsconfig.json similarity index 100% rename from apps/sample-svelte-app/tsconfig.json rename to examples/sample-svelte-app/tsconfig.json diff --git a/apps/sample-svelte-app/vite.config.ts b/examples/sample-svelte-app/vite.config.ts similarity index 100% rename from apps/sample-svelte-app/vite.config.ts rename to examples/sample-svelte-app/vite.config.ts diff --git a/apps/sample-vanilla-app/index.html b/examples/sample-vanilla-app/index.html similarity index 100% rename from apps/sample-vanilla-app/index.html rename to examples/sample-vanilla-app/index.html diff --git a/apps/sample-vanilla-app/index.js b/examples/sample-vanilla-app/index.js similarity index 95% rename from apps/sample-vanilla-app/index.js rename to examples/sample-vanilla-app/index.js index e53aa5d7..4ed22d3a 100644 --- a/apps/sample-vanilla-app/index.js +++ b/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); diff --git a/apps/sample-vanilla-app/package.json b/examples/sample-vanilla-app/package.json similarity index 100% rename from apps/sample-vanilla-app/package.json rename to examples/sample-vanilla-app/package.json diff --git a/apps/sample-vue-app/.gitignore b/examples/sample-vue-app/.gitignore similarity index 100% rename from apps/sample-vue-app/.gitignore rename to examples/sample-vue-app/.gitignore diff --git a/apps/sample-vue-app/README.md b/examples/sample-vue-app/README.md similarity index 100% rename from apps/sample-vue-app/README.md rename to examples/sample-vue-app/README.md diff --git a/apps/sample-vue-app/babel.config.js b/examples/sample-vue-app/babel.config.js similarity index 100% rename from apps/sample-vue-app/babel.config.js rename to examples/sample-vue-app/babel.config.js diff --git a/apps/sample-vue-app/package.json b/examples/sample-vue-app/package.json similarity index 100% rename from apps/sample-vue-app/package.json rename to examples/sample-vue-app/package.json diff --git a/apps/sample-vue-app/public/favicon.ico b/examples/sample-vue-app/public/favicon.ico similarity index 100% rename from apps/sample-vue-app/public/favicon.ico rename to examples/sample-vue-app/public/favicon.ico diff --git a/apps/sample-vue-app/public/index.html b/examples/sample-vue-app/public/index.html similarity index 100% rename from apps/sample-vue-app/public/index.html rename to examples/sample-vue-app/public/index.html diff --git a/apps/sample-vue-app/src/App.vue b/examples/sample-vue-app/src/App.vue similarity index 97% rename from apps/sample-vue-app/src/App.vue rename to examples/sample-vue-app/src/App.vue index 7f84a5c3..c680a9ea 100644 --- a/apps/sample-vue-app/src/App.vue +++ b/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); diff --git a/apps/sample-vue-app/src/main.ts b/examples/sample-vue-app/src/main.ts similarity index 100% rename from apps/sample-vue-app/src/main.ts rename to examples/sample-vue-app/src/main.ts diff --git a/apps/sample-vue-app/src/shims-vue.d.ts b/examples/sample-vue-app/src/shims-vue.d.ts similarity index 100% rename from apps/sample-vue-app/src/shims-vue.d.ts rename to examples/sample-vue-app/src/shims-vue.d.ts diff --git a/apps/sample-vue-app/tsconfig.json b/examples/sample-vue-app/tsconfig.json similarity index 100% rename from apps/sample-vue-app/tsconfig.json rename to examples/sample-vue-app/tsconfig.json diff --git a/apps/sample-vue-app/vue.config.js b/examples/sample-vue-app/vue.config.js similarity index 100% rename from apps/sample-vue-app/vue.config.js rename to examples/sample-vue-app/vue.config.js diff --git a/package.json b/package.json index ba6d9173..5e2837e5 100755 --- a/package.json +++ b/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", diff --git a/packages/dapp-kit-react/README.md b/packages/dapp-kit-react/README.md index d6ed34e6..f0c9772a 100644 --- a/packages/dapp-kit-react/README.md +++ b/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 ``` diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index c5a103e3..c22b627b 100644 --- a/packages/dapp-kit-react/package.json +++ b/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", diff --git a/packages/dapp-kit-react/src/DAppKitProvider.tsx b/packages/dapp-kit-react/src/DAppKitProvider.tsx index e5ac8c05..530bf3d5 100644 --- a/packages/dapp-kit-react/src/DAppKitProvider.tsx +++ b/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 = ({ walletConnectOptions, usePersistence = false, logLevel, + requireCertificate, themeMode, themeVariables, i18n, @@ -38,6 +40,7 @@ export const DAppKitProvider: React.FC = ({ walletConnectOptions, usePersistence, logLevel, + requireCertificate, themeVariables, themeMode, i18n, @@ -51,6 +54,7 @@ export const DAppKitProvider: React.FC = ({ walletConnectOptions, usePersistence, logLevel, + requireCertificate, themeVariables, themeMode, i18n, @@ -66,6 +70,8 @@ export const DAppKitProvider: React.FC = ({ const [source, setSource] = useState( connex.wallet.state.source, ); + const [connectionCertificate, setConnectionCertificate] = + useState(connex.wallet.state.connectionCertificate); useEffect(() => { const addressSub = subscribeKey(connex.wallet.state, 'address', (v) => { @@ -74,10 +80,18 @@ export const DAppKitProvider: React.FC = ({ 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 = ({ }, []); 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 = ({ 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 {children}; }; diff --git a/packages/dapp-kit-react/src/types.ts b/packages/dapp-kit-react/src/types.ts index e4360227..e44a89e1 100644 --- a/packages/dapp-kit-react/src/types.ts +++ b/packages/dapp-kit-react/src/types.ts @@ -1,5 +1,6 @@ /// 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; 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; }; } diff --git a/packages/dapp-kit-ui/README.md b/packages/dapp-kit-ui/README.md index 2491b0e6..8977a523 100644 --- a/packages/dapp-kit-ui/README.md +++ b/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 diff --git a/packages/dapp-kit-ui/index.js b/packages/dapp-kit-ui/index.js index 1a007f35..ae3b1910 100644 --- a/packages/dapp-kit-ui/index.js +++ b/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); diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json index 6bb0d6a2..5289a225 100644 --- a/packages/dapp-kit-ui/package.json +++ b/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", diff --git a/packages/dapp-kit-ui/src/assets/styles/button.ts b/packages/dapp-kit-ui/src/assets/styles/button.ts index 68ecfa71..f924698c 100644 --- a/packages/dapp-kit-ui/src/assets/styles/button.ts +++ b/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; + } `; diff --git a/packages/dapp-kit-ui/src/class/index.ts b/packages/dapp-kit-ui/src/class/index.ts deleted file mode 100644 index df34a59e..00000000 --- a/packages/dapp-kit-ui/src/class/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './responsive'; diff --git a/packages/dapp-kit-ui/src/class/responsive.ts b/packages/dapp-kit-ui/src/class/responsive.ts deleted file mode 100644 index b6727843..00000000 --- a/packages/dapp-kit-ui/src/class/responsive.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { LitElement } from 'lit'; -import { property } from 'lit/decorators'; -import { addResizeListeners } from '../utils'; -import { Breakpoint } from '../constants'; - -export enum Media { - Mobile = 'mobile', - Tablet = 'tablet', - Desktop = 'desktop', -} - -export class ResponsiveLitElement extends LitElement { - @property() - media = Media.Desktop; - - private setCurrentMedia = (): void => { - if (window.screen.width <= Breakpoint.Mobile) { - this.media = Media.Mobile; - return; - } - if (window.screen.width <= Breakpoint.Tablet) { - this.media = Media.Tablet; - return; - } - this.media = Media.Desktop; - }; - - constructor() { - super(); - addResizeListeners(this.setCurrentMedia); - } -} diff --git a/packages/dapp-kit-ui/src/classes/connect-modal-manager.ts b/packages/dapp-kit-ui/src/classes/connect-modal-manager.ts new file mode 100644 index 00000000..0f5d1300 --- /dev/null +++ b/packages/dapp-kit-ui/src/classes/connect-modal-manager.ts @@ -0,0 +1,72 @@ +import type { WalletManager, WalletSource } from '@vechain/dapp-kit'; +import { DAppKitLogger } from '@vechain/dapp-kit'; +import { subscribeKey } from 'valtio/vanilla/utils'; +import { createModalIfNotPresent, dispatchCustomEvent } from '../utils'; + +export interface ConnectModalManagerOptions { + modalParent?: HTMLElement; +} + +export class ConnectModalManager { + private static instance: ConnectModalManager | null = null; + + private constructor( + private walletManager: WalletManager, + options?: ConnectModalManagerOptions, + ) { + createModalIfNotPresent(options); + } + + public static getInstance( + walletManager: WalletManager, + options?: ConnectModalManagerOptions, + ): ConnectModalManager { + if (!ConnectModalManager.instance) { + ConnectModalManager.instance = new ConnectModalManager( + walletManager, + options, + ); + } + + return ConnectModalManager.instance; + } + + open(): void { + DAppKitLogger.debug('ConnectModalManager', 'opening the modal'); + dispatchCustomEvent('vdk-open-wallet-modal'); + } + + close(): void { + DAppKitLogger.debug('ConnectModalManager', 'closing the modal'); + dispatchCustomEvent('vdk-close-wallet-modal'); + } + + closeWalletConnect(): void { + DAppKitLogger.debug('ConnectModalManager', 'closing wallet connect'); + dispatchCustomEvent('vdk-close-wc-qrcode'); + } + + closeConnectionCertificateRequest(): void { + DAppKitLogger.debug( + 'ConnectModalManager', + 'closing connection certificate request', + ); + dispatchCustomEvent('vdk-close-connection-certificate-request'); + } + + onConnectionStatusChange( + callback: (address: string | null) => void, + ): () => void { + return subscribeKey(this.walletManager.state, 'address', (address) => { + callback(address); + }); + } + + onWalletSelected( + callback: (source: WalletSource | null) => void, + ): () => void { + return subscribeKey(this.walletManager.state, 'source', (source) => { + callback(source); + }); + } +} diff --git a/packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts b/packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts new file mode 100644 index 00000000..71a568ab --- /dev/null +++ b/packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts @@ -0,0 +1,85 @@ +import { EventEmitter } from 'events'; +import type { + OpenOptions, + SubscribeModalState, + WCModal, +} from '@vechain/dapp-kit'; +import { DAppKitLogger } from '@vechain/dapp-kit'; +import { dispatchCustomEvent, subscribeToCustomEvent } from '../utils'; + +const MODAL_STATE_EVENT = 'vdk-modal-state-change'; + +export class CustomWalletConnectModal implements WCModal { + private static instance: CustomWalletConnectModal | null = null; + + private eventEmitter = new EventEmitter(); + + private constructor() { + subscribeToCustomEvent('vdk-close-wc-qrcode', () => { + this.updateModalState({ open: false }); + }); + subscribeToCustomEvent('vdk-open-wc-qrcode', () => { + this.updateModalState({ open: true }); + }); + } + + static getInstance(): CustomWalletConnectModal { + if (!CustomWalletConnectModal.instance) { + CustomWalletConnectModal.instance = new CustomWalletConnectModal(); + } + + return CustomWalletConnectModal.instance; + } + + /** + * WalletConnect + */ + openModal(options: OpenOptions): Promise { + DAppKitLogger.debug('CustomWalletConnectModal', 'opening the wc modal'); + dispatchCustomEvent('vdk-open-wc-qrcode', options); + return Promise.resolve(); + } + + closeModal(): void { + DAppKitLogger.debug('CustomWalletConnectModal', 'closing the modal'); + dispatchCustomEvent('vdk-close-wc-qrcode'); + } + + askForConnectionCertificate(): void { + DAppKitLogger.debug( + 'CustomWalletConnectModal', + 'ask for connection certificate', + ); + dispatchCustomEvent('vdk-close-wc-qrcode'); + dispatchCustomEvent('vdk-request-connection-certificate'); + } + + onConnectionCertificateSigned(): void { + DAppKitLogger.debug( + 'CustomWalletConnectModal', + 'connection certificate signed', + ); + dispatchCustomEvent('vdk-close-wallet-modal'); + dispatchCustomEvent('vdk-close-wc-qrcode'); + dispatchCustomEvent('vdk-close-connection-certificate-request'); + } + + subscribeModal( + callback: (newState: SubscribeModalState) => void, + ): () => void { + DAppKitLogger.debug( + 'CustomWalletConnectModal', + 'subscribing to modal state', + ); + + this.eventEmitter.on(MODAL_STATE_EVENT, callback); + + return () => { + this.eventEmitter.off(MODAL_STATE_EVENT, callback); + }; + } + + private updateModalState(state: SubscribeModalState): void { + this.eventEmitter.emit(MODAL_STATE_EVENT, state); + } +} diff --git a/packages/dapp-kit-ui/src/classes/index.ts b/packages/dapp-kit-ui/src/classes/index.ts new file mode 100644 index 00000000..74211e40 --- /dev/null +++ b/packages/dapp-kit-ui/src/classes/index.ts @@ -0,0 +1,2 @@ +export * from './connect-modal-manager'; +export * from './custom-wallet-connect-modal'; diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts index 30a5bc2f..c8fe5aa5 100644 --- a/packages/dapp-kit-ui/src/client.ts +++ b/packages/dapp-kit-ui/src/client.ts @@ -1,11 +1,11 @@ /// import type { DAppKitOptions, WalletManager } from '@vechain/dapp-kit'; import { DAppKit } from '@vechain/dapp-kit'; -import { CustomWalletConnectModal, DAppKitModal } from './modal'; +import { CustomWalletConnectModal, ConnectModalManager } from './classes'; import { type CustomizedStyle, dispatchCustomEvent, - configureUI, + initModalsAndButtons, } from './utils'; import type { SourceInfo, I18n, ThemeMode } from './constants'; @@ -32,15 +32,15 @@ export const DAppKitUI = { CustomWalletConnectModal.getInstance(); } dappKitOptions = options; - if (!dappKit) dappKit = new DAppKit(options); + dappKit = new DAppKit(options); - // init modal so on the first opening it doesn't have to create it - DAppKitModal.getInstance(this.wallet, { + // init modal so that on the first opening it doesn't have to create it + ConnectModalManager.getInstance(this.wallet, { modalParent: options.modalParent, }); // configure bottons and modals options - configureUI(options); + initModalsAndButtons(options); dispatchCustomEvent('vdk-dapp-kit-configured'); initialized = true; @@ -48,6 +48,12 @@ export const DAppKitUI = { return dappKit; }, + configureButtonsAndModals(): void { + if (dappKitOptions) { + initModalsAndButtons(dappKitOptions); + } + }, + get initialized(): boolean { return initialized; }, @@ -64,8 +70,8 @@ export const DAppKitUI = { return this.get().wallet; }, - get modal(): DAppKitModal { - return DAppKitModal.getInstance(this.wallet, { + get modal(): ConnectModalManager { + return ConnectModalManager.getInstance(this.wallet, { modalParent: dappKitOptions?.modalParent, }); }, diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts index 1f78fd2e..b4c0b76c 100644 --- a/packages/dapp-kit-ui/src/components/buttons/button.ts +++ b/packages/dapp-kit-ui/src/components/buttons/button.ts @@ -1,6 +1,5 @@ import { html, LitElement, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { type WalletManager } from '@vechain/dapp-kit'; import { subscribeKey } from 'valtio/vanilla/utils'; import { DAppKitUI } from '../../client'; import { defaultI18n, type I18n, type ThemeMode } from '../../constants'; @@ -13,6 +12,10 @@ export class Button extends LitElement { if (DAppKitUI.initialized) { this.address = DAppKitUI.wallet.state.address ?? ''; this.initAddressListener(); + setTimeout(() => { + DAppKitUI.configureButtonsAndModals(); + this.requestUpdate(); + }, 0); } else { subscribeToCustomEvent('vdk-dapp-kit-configured', () => { this.address = DAppKitUI.wallet.state.address ?? ''; @@ -28,10 +31,6 @@ export class Button extends LitElement { }); } - private get wallet(): WalletManager { - return DAppKitUI.wallet; - } - @property() mode: ThemeMode = 'LIGHT'; diff --git a/packages/dapp-kit-ui/src/components/modals/address-modal.ts b/packages/dapp-kit-ui/src/components/modals/address-modal.ts index afa3dc22..3bde7d03 100644 --- a/packages/dapp-kit-ui/src/components/modals/address-modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/address-modal.ts @@ -1,7 +1,7 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { I18n, SourceInfo } from '../../constants'; +import type { I18n } from '../../constants'; import { defaultI18n, Font } from '../../constants'; import { buttonStyle, iconButtonStyle } from '../../assets/styles'; import type { ThemeMode } from '../../constants/theme'; @@ -112,9 +112,6 @@ export class AddressModal extends LitElement { @property({ type: String }) address = ''; - @property({ type: Function }) - onSourceClick?: (source?: SourceInfo) => void = undefined; - @property({ type: Function }) onDisconnectClick?: () => void = undefined; diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts similarity index 55% rename from packages/dapp-kit-ui/src/components/modals/connect-modal.ts rename to packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts index afad496f..846eab5e 100644 --- a/packages/dapp-kit-ui/src/components/modals/connect-modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts @@ -1,7 +1,7 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { WalletManager } from '@vechain/dapp-kit'; +import { DAppKitLogger, type WalletManager } from '@vechain/dapp-kit'; import { type I18n, type SourceInfo, @@ -9,16 +9,16 @@ import { defaultI18n, Font, WalletSources, -} from '../../constants'; +} from '../../../constants'; import { DarkChevronLeftSvg, DarkCloseSvg, LightChevronLeftSvg, LightCloseSvg, -} from '../../assets/icons'; -import { isMobile, subscribeToCustomEvent, useTranslate } from '../../utils'; -import { DAppKitUI } from '../../client'; -import { iconButtonStyle } from '../../assets/styles'; +} from '../../../assets/icons'; +import { isMobile, subscribeToCustomEvent, useTranslate } from '../../../utils'; +import { DAppKitUI } from '../../../client'; +import { iconButtonStyle } from '../../../assets/styles'; @customElement('vdk-connect-modal') export class ConnectModal extends LitElement { @@ -47,28 +47,10 @@ export class ConnectModal extends LitElement { `, ]; - @property({ type: Boolean }) - open = false; - - @property({ type: Boolean }) - openingVeWorld = false; - - @property() - mode: ThemeMode = 'LIGHT'; - - @property() - i18n: I18n = defaultI18n; - - @property() - language = 'en'; - - @property() - walletConnectQRcode?: string = undefined; - constructor() { super(); - subscribeToCustomEvent('vdk-open-wc-modal', (options) => { + subscribeToCustomEvent('vdk-open-wc-qrcode', (options) => { if (isMobile()) { this.openingVeWorld = true; window.open( @@ -81,19 +63,25 @@ export class ConnectModal extends LitElement { this.open = true; this.walletConnectQRcode = options.uri; }); - - subscribeToCustomEvent('vdk-close-wc-modal', () => { + subscribeToCustomEvent('vdk-close-wc-qrcode', () => { this.walletConnectQRcode = undefined; this.openingVeWorld = false; }); - subscribeToCustomEvent('vdk-open-wallet-modal', () => { this.open = true; }); - subscribeToCustomEvent('vdk-close-wallet-modal', () => { this.open = false; }); + subscribeToCustomEvent('vdk-request-connection-certificate', () => { + this.requestForConnectionCertificate = true; + }); + subscribeToCustomEvent( + 'vdk-close-connection-certificate-request', + () => { + this.requestForConnectionCertificate = false; + }, + ); } private get availableSources(): SourceInfo[] { @@ -109,14 +97,22 @@ export class ConnectModal extends LitElement { @property({ type: Function }) onSourceClick = (source?: SourceInfo): void => { if (source) { + if (source.id !== 'wallet-connect') { + this.setWaitingForTheSignature(true); + this.requestForConnectionCertificate = true; + } this.wallet.setSource(source.id); this.wallet .connect() .then(() => { this.requestUpdate(); }) - .finally(() => { - DAppKitUI.modal.close(); + .catch((err): void => { + DAppKitLogger.error( + 'Connection Attempt', + 'error trying to connect', + err, + ); }); } }; @@ -124,19 +120,75 @@ export class ConnectModal extends LitElement { @property({ type: Function }) onClose: () => void = () => nothing; + @property({ type: Boolean }) + open = false; + + @property({ type: Boolean }) + openingVeWorld = false; + + @property() + mode: ThemeMode = 'LIGHT'; + + @property() + i18n: I18n = defaultI18n; + + @property() + language = 'en'; + + @property() + walletConnectQRcode?: string = undefined; + + @property() + requestForConnectionCertificate = false; + + @property() + waitingForTheSignature = false; + + private setWaitingForTheSignature = (value: boolean): void => { + this.waitingForTheSignature = value; + }; + + private renderContent(): TemplateResult | TemplateResult[] { + if (this.requestForConnectionCertificate) { + return html``; + } + if (this.walletConnectQRcode) { + return html` `; + } + return this.availableSources.map( + (source) => + html` `, + ); + } + override render(): TemplateResult { const translate = useTranslate(this.i18n, this.language); return html` - - + -
-
- ${ - this.walletConnectQRcode + > +
+
+ ${this.walletConnectQRcode ? html`
` - : html`
` - } -
${translate('connect-wallet')}
-
`} +
${translate('connect-wallet')}
+
- ${this.mode === 'LIGHT' ? LightCloseSvg : DarkCloseSvg} + > + ${this.mode === 'LIGHT' + ? LightCloseSvg + : DarkCloseSvg} +
+
${this.renderContent()}
-
- ${ - this.walletConnectQRcode - ? html` ` - : this.availableSources.map( - (source) => - html` `, - ) - } -
- - - `; + + `; } private handleBack = (): void => { @@ -186,13 +219,21 @@ export class ConnectModal extends LitElement { }; private handleClose = (): void => { + DAppKitUI.modal.close(); if (this.walletConnectQRcode) { // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal setTimeout(() => { this.handleBack(); + this.wallet.disconnect(); + }, 500); + } + if (this.requestForConnectionCertificate) { + // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal + setTimeout(() => { + DAppKitUI.modal.closeConnectionCertificateRequest(); + this.wallet.disconnect(); }, 500); } - DAppKitUI.modal.close(); this.onClose(); }; } diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts new file mode 100644 index 00000000..2caa81bf --- /dev/null +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts @@ -0,0 +1,4 @@ +export * from './connect-modal'; +export * from './source-card'; +export * from './wallet-connect-qr-code'; +export * from './sign-connection-certificate'; diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts new file mode 100644 index 00000000..a5ae77b4 --- /dev/null +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts @@ -0,0 +1,144 @@ +import { css, html, LitElement, nothing, type TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { + Colors, + defaultI18n, + type I18n, + type ThemeMode, +} from '../../../constants'; +import { useTranslate } from '../../../utils'; +import { buttonStyle } from '../../../assets/styles'; +import { DAppKitUI } from '../../../client'; + +@customElement('vdk-sign-connection-certificate') +export class SignConnectionCertificate extends LitElement { + static override styles = [ + buttonStyle, + css` + .signCertificateText { + margin: 20px; + text-align: center; + } + + @keyframes loading { + to { + stroke-dashoffset: 0px; + } + } + + use { + stroke: var( + --vdk-color-walletconnectblue, + ${Colors.WalletConnectBlue} + ); + animation: loading 1s linear infinite; + } + + svg.loader { + position: absolute; + fill: none; + stroke: transparent; + stroke-linecap: round; + stroke-width: 1px; + top: 10; + left: 10; + z-index: 1; + } + `, + ]; + + constructor() { + super(); + this.setSubmitButtonWidth(); + addEventListener('resize', this.setSubmitButtonWidth); + } + + @property() + mode: ThemeMode = 'LIGHT'; + @property() + i18n: I18n = defaultI18n; + @property() + language = 'en'; + @property() + waitingForTheSignature = false; + @property() + // eslint-disable-next-line @typescript-eslint/no-empty-function + setWaitingForTheSignature: (v: boolean) => void = () => {}; + @property() + submitButtonWidth = 0; + + private svgLoaderTemplate(): TemplateResult { + const offset = 2; + const submitButtonWidthMinusOffset = this.submitButtonWidth - offset; + const buttonHeight = 41; + const perimeter = (submitButtonWidthMinusOffset + buttonHeight) * 2; + const dashLength = submitButtonWidthMinusOffset / 2; + const spaceLength = perimeter - dashLength; + return html` + + + + + `; + } + + override render(): TemplateResult | typeof nothing { + const translate = useTranslate(this.i18n, this.language); + + return html` +
+
+ ${translate('sign-connection-certificate-description')} +
+ ${this.waitingForTheSignature + ? this.svgLoaderTemplate() + : nothing} + +
+ `; + } + + private setSubmitButtonWidth = (): void => { + const modalWidth = + document + .querySelector('vdk-modal') + ?.shadowRoot?.querySelector('vdk-connect-modal') + ?.shadowRoot?.querySelector('div')?.clientWidth ?? 0; + this.submitButtonWidth = modalWidth ? modalWidth - 40 : 0; + }; + + private handleSignCertificate = async (): Promise => { + this.setWaitingForTheSignature(true); + await DAppKitUI.wallet.signConnectionCertificate(); + }; +} + +declare global { + interface HTMLElementTagNameMap { + 'vdk-sign-connection-certificate': SignConnectionCertificate; + } +} diff --git a/packages/dapp-kit-ui/src/components/modals/source-card.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/source-card.ts similarity index 89% rename from packages/dapp-kit-ui/src/components/modals/source-card.ts rename to packages/dapp-kit-ui/src/components/modals/connect-modal/source-card.ts index 6a6abcb4..c5f1e31e 100644 --- a/packages/dapp-kit-ui/src/components/modals/source-card.ts +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/source-card.ts @@ -2,9 +2,9 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import type { WalletManager } from '@vechain/dapp-kit'; -import { Font, type SourceInfo, type ThemeMode } from '../../constants'; -import { buttonStyle } from '../../assets/styles'; -import { DAppKitUI } from '../../client'; +import { Font, type SourceInfo, type ThemeMode } from '../../../constants'; +import { buttonStyle } from '../../../assets/styles'; +import { DAppKitUI } from '../../../client'; @customElement('vdk-source-card') export class SourceCard extends LitElement { diff --git a/packages/dapp-kit-ui/src/components/modals/wallet-connect-qr-code.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/wallet-connect-qr-code.ts similarity index 97% rename from packages/dapp-kit-ui/src/components/modals/wallet-connect-qr-code.ts rename to packages/dapp-kit-ui/src/components/modals/connect-modal/wallet-connect-qr-code.ts index 0d023bbd..dafa3a76 100644 --- a/packages/dapp-kit-ui/src/components/modals/wallet-connect-qr-code.ts +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/wallet-connect-qr-code.ts @@ -9,16 +9,16 @@ import { type I18n, IOS_STORE_URL, type ThemeMode, -} from '../../constants'; -import { isAndroid, QrCodeUtil, useTranslate } from '../../utils'; +} from '../../../constants'; +import { isAndroid, QrCodeUtil, useTranslate } from '../../../utils'; import { CheckSvg, DarkCopySvg, LightCopySvg, WalletConnectLogoSvg, -} from '../../assets/icons'; -import { buttonStyle } from '../../assets/styles'; -import { VeWorldLogo } from '../../assets/images'; +} from '../../../assets/icons'; +import { buttonStyle } from '../../../assets/styles'; +import { VeWorldLogo } from '../../../assets/images'; const qrCodeSize = 280; @customElement('vdk-wallet-connect-qrcode') diff --git a/packages/dapp-kit-ui/src/components/modals/index.ts b/packages/dapp-kit-ui/src/components/modals/index.ts index 70b1189b..b62a249d 100644 --- a/packages/dapp-kit-ui/src/components/modals/index.ts +++ b/packages/dapp-kit-ui/src/components/modals/index.ts @@ -2,5 +2,3 @@ export * from './modal'; export * from './base-modal'; export * from './connect-modal'; export * from './address-modal'; -export * from './source-card'; -export * from './wallet-connect-qr-code'; diff --git a/packages/dapp-kit-ui/src/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts index 678aa926..b56fe73c 100644 --- a/packages/dapp-kit-ui/src/components/modals/modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/modal.ts @@ -1,7 +1,6 @@ -import { html, LitElement, type TemplateResult } from 'lit'; +import { html, LitElement, type TemplateResult, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { DAppKitLogger, type WalletManager } from '@vechain/dapp-kit'; -import { subscribeKey } from 'valtio/vanilla/utils'; +import { type WalletManager } from '@vechain/dapp-kit'; import { DAppKitUI } from '../../client'; import { defaultI18n, @@ -9,13 +8,25 @@ import { type SourceInfo, type ThemeMode, } from '../../constants'; +import { subscribeToCustomEvent } from '../../utils'; @customElement('vdk-modal') export class Modal extends LitElement { constructor() { super(); - subscribeKey(DAppKitUI.wallet.state, 'address', (v) => { - this.address = v ?? ''; + if (DAppKitUI.initialized) { + this.init(); + } else { + subscribeToCustomEvent('vdk-dapp-kit-configured', () => { + this.init(); + }); + } + } + + private init(): void { + this.address = DAppKitUI.wallet.state.address ?? ''; + this.wallet.subscribeToKey('address', (addr) => { + this.address = addr ?? ''; this.requestUpdate(); }); } @@ -37,18 +48,7 @@ export class Modal extends LitElement { } @property({ type: Function }) - onSourceClick = (source?: SourceInfo): void => { - if (source) { - this.wallet.setSource(source.id); - this.wallet.connect().catch((err): void => { - DAppKitLogger.error( - 'Source Clicked', - 'error trying to connect', - err, - ); - }); - } - }; + onSourceClick?: (source?: SourceInfo) => void; @property({ type: Function }) onDisconnectClick = (): void => { @@ -56,6 +56,10 @@ export class Modal extends LitElement { }; override render(): TemplateResult { + if (!DAppKitUI.initialized) { + return html``; + } + return html`
${this.address @@ -70,7 +74,7 @@ export class Modal extends LitElement { .mode=${this.mode} .i18n=${this.i18n} .language=${this.language} - .onSourceClick=${this.onSourceClick} + .onSourceClick=${this.onSourceClick || nothing} >`}
`; diff --git a/packages/dapp-kit-ui/src/constants/i18n.ts b/packages/dapp-kit-ui/src/constants/i18n.ts index 6c9bf6b5..f177999b 100644 --- a/packages/dapp-kit-ui/src/constants/i18n.ts +++ b/packages/dapp-kit-ui/src/constants/i18n.ts @@ -8,6 +8,10 @@ export const defaultI18n: I18n = { disconnect: 'Disconnect', 'opening-veworld': 'Opening VeWorld...', 'get-veworld': 'Get VeWorld', + 'sign-connection-certificate-button': 'Sign Certificate', + 'sign-connection-certificate-description': + 'Proof address is required, please sign a certificate to continue', + 'waiting-signature': 'Waiting for signature...', }, it: { 'connect-wallet': 'Connetti il Wallet', @@ -16,6 +20,10 @@ export const defaultI18n: I18n = { disconnect: 'Disconnetti', 'opening-veworld': 'Apertura di VeWorld...', 'get-veworld': 'Ottieni VeWorld', + 'sign-connection-certificate-button': 'Firma Certificato', + 'sign-connection-certificate-description': + 'È richiesta una firma di certificato per connettersi al wallet.', + 'waiting-signature': 'Attendo firma...', }, fr: { 'connect-wallet': 'Connecter le portefeuille', @@ -24,6 +32,10 @@ export const defaultI18n: I18n = { disconnect: 'Déconnecter', 'opening-veworld': 'Ouverture de VeWorld...', 'get-veworld': 'Obtenir VeWorld', + 'sign-connection-certificate-description': + 'Une signature de certificat est requise pour se connecter au portefeuille.', + 'sign-connection-certificate-button': 'Signer le certificat', + 'waiting-signature': 'En attente de la signature...', }, es: { 'connect-wallet': 'Conectar billetera', @@ -32,6 +44,10 @@ export const defaultI18n: I18n = { disconnect: 'Desconectar', 'opening-veworld': 'Abriendo VeWorld...', 'get-veworld': 'Obtener VeWorld', + 'sign-connection-certificate-description': + 'Se requiere una firma de certificado para conectarse a la billetera.', + 'sign-connection-certificate-button': 'Firmar certificado', + 'waiting-signature': 'Esperando firma...', }, de: { 'connect-wallet': 'Wallet verbinden', @@ -40,6 +56,10 @@ export const defaultI18n: I18n = { disconnect: 'Trennen', 'opening-veworld': 'VeWorld wird geöffnet...', 'get-veworld': 'VeWorld erhalten', + 'sign-connection-certificate-description': + 'Eine Zertifikatssignatur ist erforderlich, um eine Verbindung zur Brieftasche herzustellen.', + 'sign-connection-certificate-button': 'Zertifikat signieren', + 'waiting-signature': 'Warte auf Signatur...', }, zh: { 'connect-wallet': '连接钱包', @@ -48,6 +68,9 @@ export const defaultI18n: I18n = { disconnect: '断开连接', 'opening-veworld': '正在打开 VeWorld...', 'get-veworld': '获取 VeWorld', + 'sign-connection-certificate-description': '连接钱包需要签名证书。', + 'sign-connection-certificate-button': '签名证书', + 'waiting-signature': '等待签名...', }, ja: { 'connect-wallet': 'ウォレットに接続', @@ -56,6 +79,10 @@ export const defaultI18n: I18n = { disconnect: '切断する', 'opening-veworld': 'VeWorld を開いています...', 'get-veworld': 'VeWorld を取得', + 'sign-connection-certificate-description': + 'ウォレットに接続するには証明書の署名が必要です。', + 'sign-connection-certificate-button': '証明書に署名', + 'waiting-signature': '署名を待っています...', }, ru: { 'connect-wallet': 'Подключить кошелек', @@ -64,5 +91,9 @@ export const defaultI18n: I18n = { disconnect: 'Отключить', 'opening-veworld': 'Открытие VeWorld...', 'get-veworld': 'Получить VeWorld', + 'sign-connection-certificate-description': + 'Для подключения к кошельку требуется подпись сертификата.', + 'sign-connection-certificate-button': 'Подписать сертификат', + 'waiting-signature': 'Ожидание подписи...', }, }; diff --git a/packages/dapp-kit-ui/src/index.ts b/packages/dapp-kit-ui/src/index.ts index 767aab1e..d66fd5dd 100644 --- a/packages/dapp-kit-ui/src/index.ts +++ b/packages/dapp-kit-ui/src/index.ts @@ -2,4 +2,4 @@ export * from './client'; export * from './components'; export * from './constants'; export * from './utils'; -export * from './utils/ui-config'; +export * from './classes'; diff --git a/packages/dapp-kit-ui/src/modal.ts b/packages/dapp-kit-ui/src/modal.ts deleted file mode 100644 index 5b3983f0..00000000 --- a/packages/dapp-kit-ui/src/modal.ts +++ /dev/null @@ -1,147 +0,0 @@ -// eslint-disable-next-line unicorn/prefer-node-protocol -import { EventEmitter } from 'events'; -import type { - OpenOptions, - SubscribeModalState, - WalletManager, - WalletSource, - WCModal, -} from '@vechain/dapp-kit'; -import { DAppKitLogger } from '@vechain/dapp-kit'; -import { subscribeKey } from 'valtio/vanilla/utils'; -import { dispatchCustomEvent, subscribeToCustomEvent } from './utils'; - -const MODAL_STATE_EVENT = 'vdk-modal-state-change'; - -const getModal = (): HTMLElement | null => document.querySelector('vdk-modal'); - -const createModalIfNotPresent = (options?: { - modalParent?: HTMLElement; -}): HTMLElement => { - const modal = getModal(); - - if (modal) { - return modal; - } - - DAppKitLogger.debug('DAppKitModal', 'creating a new modal'); - - const newModal = document.createElement('vdk-modal'); - - (options?.modalParent ?? document.body).appendChild(newModal); - - return newModal; -}; - -class CustomWalletConnectModal implements WCModal { - private static instance: CustomWalletConnectModal | null = null; - - private eventEmitter = new EventEmitter(); - - private constructor() { - subscribeToCustomEvent('vdk-close-wc-modal', () => { - this.updateModalState({ open: false }); - }); - subscribeToCustomEvent('vdk-open-wc-modal', () => { - this.updateModalState({ open: true }); - }); - } - - static getInstance(): CustomWalletConnectModal { - if (!CustomWalletConnectModal.instance) { - CustomWalletConnectModal.instance = new CustomWalletConnectModal(); - } - - return CustomWalletConnectModal.instance; - } - - /** - * WalletConnect - */ - openModal(options: OpenOptions): Promise { - DAppKitLogger.debug('CustomWalletConnectModal', 'opening the wc modal'); - dispatchCustomEvent('vdk-open-wc-modal', options); - return Promise.resolve(); - } - - closeModal(): void { - DAppKitLogger.debug('CustomWalletConnectModal', 'closing the modal'); - dispatchCustomEvent('vdk-close-wc-modal'); - } - - subscribeModal( - callback: (newState: SubscribeModalState) => void, - ): () => void { - DAppKitLogger.debug( - 'CustomWalletConnectModal', - 'subscribing to modal state', - ); - - this.eventEmitter.on(MODAL_STATE_EVENT, callback); - - return () => { - this.eventEmitter.off(MODAL_STATE_EVENT, callback); - }; - } - - private updateModalState(state: SubscribeModalState): void { - this.eventEmitter.emit(MODAL_STATE_EVENT, state); - } -} - -export interface DAppKitModalOptions { - modalParent?: HTMLElement; -} - -export class DAppKitModal { - private static instance: DAppKitModal | null = null; - - private constructor( - private walletManager: WalletManager, - options?: DAppKitModalOptions, - ) { - createModalIfNotPresent(options); - } - - public static getInstance( - walletManager: WalletManager, - options?: DAppKitModalOptions, - ): DAppKitModal { - if (!DAppKitModal.instance) { - DAppKitModal.instance = new DAppKitModal(walletManager, options); - } - - return DAppKitModal.instance; - } - - open(): void { - DAppKitLogger.debug('DAppKitModal', 'opening the modal'); - dispatchCustomEvent('vdk-open-wallet-modal'); - } - - close(): void { - DAppKitLogger.debug('DAppKitModal', 'closing the modal'); - dispatchCustomEvent('vdk-close-wallet-modal'); - } - - closeWalletConnect(): void { - DAppKitLogger.debug('DAppKitModal', 'closing wallet connect'); - dispatchCustomEvent('vdk-close-wc-modal'); - } - - onConnected(callback: (address: string | null) => void): () => void { - return subscribeKey(this.walletManager.state, 'address', (address) => { - callback(address); - }); - } - - onWalletSelected( - callback: (source: WalletSource | null) => void, - ): () => void { - return subscribeKey(this.walletManager.state, 'source', (source) => { - callback(source); - }); - } -} - -export { CustomWalletConnectModal }; diff --git a/packages/dapp-kit-ui/src/utils/events.ts b/packages/dapp-kit-ui/src/utils/events.ts index 919017ca..27b277b9 100644 --- a/packages/dapp-kit-ui/src/utils/events.ts +++ b/packages/dapp-kit-ui/src/utils/events.ts @@ -4,8 +4,10 @@ import type { ThemeMode } from '../constants'; export type EventTypes = | 'vdk-dapp-kit-configured' - | 'vdk-open-wc-modal' - | 'vdk-close-wc-modal' + | 'vdk-request-connection-certificate' + | 'vdk-close-connection-certificate-request' + | 'vdk-open-wc-qrcode' + | 'vdk-close-wc-qrcode' | 'vdk-open-wallet-modal' | 'vdk-close-wallet-modal'; @@ -17,8 +19,10 @@ type ThemeOptions = export interface EventArgs { 'vdk-dapp-kit-configured': undefined; - 'vdk-close-wc-modal': undefined; - 'vdk-open-wc-modal': OpenOptions & ThemeOptions; + 'vdk-request-connection-certificate': undefined; + 'vdk-close-connection-certificate-request': undefined; + 'vdk-close-wc-qrcode': undefined; + 'vdk-open-wc-qrcode': OpenOptions & ThemeOptions; 'vdk-open-wallet-modal': ThemeOptions; 'vdk-close-wallet-modal': undefined; } diff --git a/packages/dapp-kit-ui/src/utils/ui-config.ts b/packages/dapp-kit-ui/src/utils/ui-config.ts index 7b4f01f9..5cbdcb1c 100644 --- a/packages/dapp-kit-ui/src/utils/ui-config.ts +++ b/packages/dapp-kit-ui/src/utils/ui-config.ts @@ -4,6 +4,24 @@ import { type DAppKitUIOptions } from '../client'; import { Colors, Font, modalZIndex, defaultI18n } from '../constants'; +const getModal = (): HTMLElement | null => document.querySelector('vdk-modal'); + +export const createModalIfNotPresent = (options?: { + modalParent?: HTMLElement; +}): HTMLElement => { + const modal = getModal(); + + if (modal) { + return modal; + } + + const newModal = document.createElement('vdk-modal'); + + (options?.modalParent ?? document.body).appendChild(newModal); + + return newModal; +}; + const ThemeVariables = { '--vdk-color-dark-primary': Colors.Dark.Primary.toString(), '--vdk-color-dark-primary-hover': Colors.Dark.PrimaryHover.toString(), @@ -45,6 +63,11 @@ export const initStyles = (customizedStyle: CustomizedStyle): void => { }; export const initModalsAndButtons = (options: DAppKitUIOptions): void => { + // configure theme variables + if (options.themeVariables) { + initStyles(options.themeVariables); + } + const button = document.querySelector('vdk-button'); const modal = document.querySelector('vdk-modal'); @@ -68,13 +91,3 @@ export const initModalsAndButtons = (options: DAppKitUIOptions): void => { modal.onSourceClick = options.onSourceClick; } }; - -export const configureUI = (options: DAppKitUIOptions): void => { - // init buttons and modals - initModalsAndButtons(options); - - // configure theme variables - if (options.themeVariables) { - initStyles(options.themeVariables); - } -}; diff --git a/packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts b/packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts new file mode 100644 index 00000000..c566a102 --- /dev/null +++ b/packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts @@ -0,0 +1,21 @@ +import { ConnectModalManager, DAppKitUI } from '../../src'; + +DAppKitUI.configure({ + nodeUrl: 'https://mainnet.vechain.org/', +}); + +describe('ConnectModalManager', () => { + it('should be a singleton', () => { + const instance1 = ConnectModalManager.getInstance(DAppKitUI.wallet); + const instance2 = ConnectModalManager.getInstance(DAppKitUI.wallet); + expect(instance1).toBe(instance2); + }); + + it('should not throw', () => { + const instance = ConnectModalManager.getInstance(DAppKitUI.wallet); + instance.open(); + instance.close(); + instance.closeWalletConnect(); + instance.closeConnectionCertificateRequest(); + }); +}); diff --git a/packages/dapp-kit-ui/test/qr-code.test.ts b/packages/dapp-kit-ui/test/qr-code.test.ts index 6c7e8459..aff55d47 100644 --- a/packages/dapp-kit-ui/test/qr-code.test.ts +++ b/packages/dapp-kit-ui/test/qr-code.test.ts @@ -37,7 +37,7 @@ describe('qr-code-modal', () => { connectButton.shadowRoot?.querySelector('button')?.click(); - dispatchCustomEvent('vdk-open-wc-modal', { uri: sampleUri }); + dispatchCustomEvent('vdk-open-wc-qrcode', { uri: sampleUri }); const qrCode = (await elementQueries.getWalletConnectQrCode()) as WalletConnectQrCode; diff --git a/packages/dapp-kit/README.md b/packages/dapp-kit/README.md index 1495d4c8..62835553 100644 --- a/packages/dapp-kit/README.md +++ b/packages/dapp-kit/README.md @@ -1,22 +1,9 @@ # `@vechain/dapp-kit` -## 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 ``` diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json index d039c8df..49cc9ed6 100644 --- a/packages/dapp-kit/package.json +++ b/packages/dapp-kit/package.json @@ -2,6 +2,8 @@ "name": "@vechain/dapp-kit", "version": "1.0.0", "private": false, + "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit", + "repository": "github:vechain/vechain-dapp-kit", "type": "module", "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/packages/dapp-kit/src/certificates.ts b/packages/dapp-kit/src/certificates.ts deleted file mode 100644 index 3e3bdc56..00000000 --- a/packages/dapp-kit/src/certificates.ts +++ /dev/null @@ -1,17 +0,0 @@ -const DEFAULT_CONNECT_CERT_MESSAGE: Connex.Vendor.CertMessage = { - purpose: 'identification', - payload: { - type: 'text', - content: `The following dApp would like to see your public address: ${window.origin}`, - }, -}; - -const DEFAULT_SIGN_IN_MESSAGE: Connex.Vendor.CertMessage = { - purpose: 'identification', - payload: { - type: 'text', - content: `Sign in to: ${window.origin}`, - }, -}; - -export { DEFAULT_SIGN_IN_MESSAGE, DEFAULT_CONNECT_CERT_MESSAGE }; diff --git a/packages/dapp-kit/src/wallets/certificate-wallet.ts b/packages/dapp-kit/src/classes/certificate-wallet.ts similarity index 68% rename from packages/dapp-kit/src/wallets/certificate-wallet.ts rename to packages/dapp-kit/src/classes/certificate-wallet.ts index f771d260..e23b9d4f 100644 --- a/packages/dapp-kit/src/wallets/certificate-wallet.ts +++ b/packages/dapp-kit/src/classes/certificate-wallet.ts @@ -1,34 +1,35 @@ import { Certificate } from 'thor-devkit'; import type { BaseWallet, ConnectResponse, ConnexWallet } from '../types'; -import { DEFAULT_CONNECT_CERT_MESSAGE } from '../certificates'; +import { DEFAULT_CONNECT_CERT_MESSAGE } from '../constants'; /** * A `ConnexWallet` for wallet's that use a certificate connection */ class CertificateBasedWallet implements ConnexWallet { - connectionCertificate: Connex.Vendor.CertMessage; - constructor(private readonly wallet: BaseWallet) { - this.connectionCertificate = DEFAULT_CONNECT_CERT_MESSAGE; - } + constructor(private readonly wallet: BaseWallet) {} connect = async (): Promise => { + const cert = DEFAULT_CONNECT_CERT_MESSAGE; const { annex: { domain, signer, timestamp }, signature, - } = await this.signCert(this.connectionCertificate, {}); + } = await this.signCert(cert, {}); + + const connectionCertificate = { + ...cert, + signature, + signer, + domain, + timestamp, + }; try { - Certificate.verify({ - ...this.connectionCertificate, - signature, - signer, - domain, - timestamp, - }); + Certificate.verify(connectionCertificate); return { account: signer, verified: true, + connectionCertificate, }; } catch (e) { return { diff --git a/packages/dapp-kit/src/classes/index.ts b/packages/dapp-kit/src/classes/index.ts new file mode 100644 index 00000000..0f251e78 --- /dev/null +++ b/packages/dapp-kit/src/classes/index.ts @@ -0,0 +1,3 @@ +export * from './wallet-manager'; +export * from './certificate-wallet'; +export * from './wc-wallet'; diff --git a/packages/dapp-kit/src/wallet-manager.ts b/packages/dapp-kit/src/classes/wallet-manager.ts similarity index 71% rename from packages/dapp-kit/src/wallet-manager.ts rename to packages/dapp-kit/src/classes/wallet-manager.ts index 90f7543b..0b7b2132 100644 --- a/packages/dapp-kit/src/wallet-manager.ts +++ b/packages/dapp-kit/src/classes/wallet-manager.ts @@ -1,3 +1,4 @@ +import { Certificate } from 'thor-devkit'; import { proxy, subscribe } from 'valtio/vanilla'; import { subscribeKey } from 'valtio/vanilla/utils'; import type { @@ -6,11 +7,9 @@ import type { DAppKitOptions, WalletManagerState, WalletSource, -} from './types'; -import { createWallet } from './create-wallet'; -import { WalletSources } from './wallet'; -import { Storage } from './local-storage'; -import { DAppKitLogger } from './utils'; +} from '../types'; +import { DAppKitLogger, Storage, createWallet } from '../utils'; +import { DEFAULT_CONNECT_CERT_MESSAGE, WalletSources } from '../constants'; class WalletManager { public readonly state: WalletManagerState; @@ -67,15 +66,57 @@ class WalletManager { return wallet; } - get connectionCertificate(): Connex.Vendor.CertMessage | undefined { - return this.wallet.connectionCertificate; - } + // this is needed for wallet connect connections when a connection certificate is required + signConnectionCertificate = async (): Promise => { + const cert = DEFAULT_CONNECT_CERT_MESSAGE; + const { + annex: { domain, signer, timestamp }, + signature, + } = await this.wallet.signCert(cert, {}); + + const connectionCertificate = { + ...cert, + signature, + signer, + domain, + timestamp, + }; + + try { + Certificate.verify(connectionCertificate); + this.state.address = signer; + this.state.connectionCertificate = connectionCertificate; + return { + account: signer, + verified: true, + connectionCertificate, + }; + } catch (e) { + return { + account: signer, + verified: false, + }; + } finally { + this.options.walletConnectOptions?.modal?.onConnectionCertificateSigned?.(); + } + }; connect = (): Promise => this.wallet .connect() .then((res) => { - this.state.address = res.account; + if ( + this.state.source === 'wallet-connect' && + this.options.requireCertificate && + this.options.walletConnectOptions?.modal + ?.askForConnectionCertificate + ) { + this.options.walletConnectOptions.modal.askForConnectionCertificate(); + } else { + this.state.address = res.account; + this.state.connectionCertificate = + res.connectionCertificate ?? null; + } return res; }) .catch((e) => { @@ -87,6 +128,7 @@ class WalletManager { if (!this.state.source) { this.state.source = null; this.state.address = null; + this.state.connectionCertificate = null; return; } @@ -111,6 +153,7 @@ class WalletManager { this.state.source = null; this.state.address = null; + this.state.connectionCertificate = null; }; signTx = ( @@ -120,6 +163,7 @@ class WalletManager { this.wallet .signTx(msg, options) .then((res) => { + // TODO: we should probably remove these assignment, because the user should be already logged in, and the address should be already defined, test it after e2e with transactions this.state.address = res.signer; return res; }) @@ -135,6 +179,7 @@ class WalletManager { this.wallet .signCert(msg, options) .then((res) => { + // TODO: we should probably remove these assignment, because the user should be already logged in, and the address should be already defined, test it after e2e with transactions this.state.address = res.annex.signer; return res; }) @@ -195,16 +240,19 @@ class WalletManager { source: null, address: null, availableSources, + connectionCertificate: null, }); } const address = Storage.getAccount(); const source = Storage.getSource(); + const connectionCertificate = Storage.getConnectionCertificate(); return proxy({ source, address, availableSources, + connectionCertificate, }); }; @@ -214,6 +262,10 @@ class WalletManager { } this.subscribeToKey('address', Storage.setAccount); this.subscribeToKey('source', Storage.setSource); + this.subscribeToKey( + 'connectionCertificate', + Storage.setConnectionCertificate, + ); }; private getAvailableSources = (): WalletSource[] => { diff --git a/packages/dapp-kit/src/wallets/wc-wallet.ts b/packages/dapp-kit/src/classes/wc-wallet.ts similarity index 86% rename from packages/dapp-kit/src/wallets/wc-wallet.ts rename to packages/dapp-kit/src/classes/wc-wallet.ts index 3c5ac167..a07ae5f6 100644 --- a/packages/dapp-kit/src/wallets/wc-wallet.ts +++ b/packages/dapp-kit/src/classes/wc-wallet.ts @@ -1,5 +1,4 @@ -import type { WCSigner } from '../wallet-connect'; -import type { ConnectResponse, ConnexWallet } from '../types'; +import type { ConnectResponse, ConnexWallet, WCSigner } from '../types'; class WCWallet implements ConnexWallet { constructor(private readonly signer: WCSigner) {} diff --git a/packages/dapp-kit/src/constants/certificates.ts b/packages/dapp-kit/src/constants/certificates.ts new file mode 100644 index 00000000..7df6a26f --- /dev/null +++ b/packages/dapp-kit/src/constants/certificates.ts @@ -0,0 +1,9 @@ +const DEFAULT_CONNECT_CERT_MESSAGE: Connex.Vendor.CertMessage = { + purpose: 'identification', + payload: { + type: 'text', + content: `The following dApp would like to see your public address: ${window.origin}`, + }, +}; + +export { DEFAULT_CONNECT_CERT_MESSAGE }; diff --git a/packages/dapp-kit/src/genesis.ts b/packages/dapp-kit/src/constants/genesis-blocks.ts similarity index 76% rename from packages/dapp-kit/src/genesis.ts rename to packages/dapp-kit/src/constants/genesis-blocks.ts index 8dc91acb..e15faeed 100644 --- a/packages/dapp-kit/src/genesis.ts +++ b/packages/dapp-kit/src/constants/genesis-blocks.ts @@ -1,5 +1,3 @@ -import type { Genesis } from './types'; - type NetworkType = 'main' | 'test'; export const genesisBlocks: Record = { @@ -48,22 +46,3 @@ export const genesisBlocks: Record = { transactions: [], }, }; - -const normalizeGenesisId = (genesis?: Genesis): string => { - if (!genesis) return genesisBlocks.main.id; - - if (genesis === 'main' || genesis === 'test') - return genesisBlocks[genesis].id; - - return genesis.id; -}; - -const normalizeGenesisBlock = (genesis?: Genesis): Connex.Thor.Block => { - if (!genesis) return genesisBlocks.main; - - if (genesis === 'main' || genesis === 'test') return genesisBlocks[genesis]; - - return genesis; -}; - -export { normalizeGenesisId, normalizeGenesisBlock }; diff --git a/packages/dapp-kit/src/constants/index.ts b/packages/dapp-kit/src/constants/index.ts new file mode 100644 index 00000000..7aab048c --- /dev/null +++ b/packages/dapp-kit/src/constants/index.ts @@ -0,0 +1,4 @@ +export * from './certificates'; +export * from './genesis-blocks'; +export * from './wallet-settings'; +export * from './wallet-connect'; diff --git a/packages/dapp-kit/src/wallet-connect/constants.ts b/packages/dapp-kit/src/constants/wallet-connect.ts similarity index 100% rename from packages/dapp-kit/src/wallet-connect/constants.ts rename to packages/dapp-kit/src/constants/wallet-connect.ts diff --git a/packages/dapp-kit/src/wallet.ts b/packages/dapp-kit/src/constants/wallet-settings.ts similarity index 88% rename from packages/dapp-kit/src/wallet.ts rename to packages/dapp-kit/src/constants/wallet-settings.ts index 40630ecd..bfbc9b81 100644 --- a/packages/dapp-kit/src/wallet.ts +++ b/packages/dapp-kit/src/constants/wallet-settings.ts @@ -2,7 +2,7 @@ * Wallet types */ -import type { WalletConfig, WalletSource } from './types'; +import type { WalletConfig, WalletSource } from '../types'; const DEFAULT_CONFIG: WalletConfig = { requiresCertificate: true, diff --git a/packages/dapp-kit/src/dapp-kit.ts b/packages/dapp-kit/src/dapp-kit.ts index 4474f1c8..85ccc8df 100644 --- a/packages/dapp-kit/src/dapp-kit.ts +++ b/packages/dapp-kit/src/dapp-kit.ts @@ -4,9 +4,8 @@ import { } from '@vechain/connex-driver/dist/index.js'; import { Framework } from '@vechain/connex-framework'; import { blake2b256 } from 'thor-devkit'; -import { normalizeGenesisBlock } from './genesis'; -import { WalletManager } from './wallet-manager'; -import { DAppKitLogger } from './utils/logger'; +import { WalletManager } from './classes'; +import { DAppKitLogger, normalizeGenesisBlock } from './utils'; import type { DAppKitOptions } from './types'; const cache: Record = {}; diff --git a/packages/dapp-kit/src/index.ts b/packages/dapp-kit/src/index.ts index da0c5845..a3317b2d 100644 --- a/packages/dapp-kit/src/index.ts +++ b/packages/dapp-kit/src/index.ts @@ -1,17 +1,5 @@ export * from './dapp-kit'; -export * from './wallet'; -export * from './wallet-manager'; -export * from './wallet-connect'; -export * from './genesis'; +export * from './constants'; +export * from './classes'; export * from './utils'; - -export type { - DAppKitOptions, - ConnexWallet, - WalletSource, - ConnectResponse, - WalletConfig, - BaseWallet, - WalletManagerState, - Genesis, -} from './types'; +export * from './types'; diff --git a/packages/dapp-kit/src/wallet-connect/index.ts b/packages/dapp-kit/src/types/index.ts similarity index 50% rename from packages/dapp-kit/src/wallet-connect/index.ts rename to packages/dapp-kit/src/types/index.ts index 61ed556b..1d1ccb01 100644 --- a/packages/dapp-kit/src/wallet-connect/index.ts +++ b/packages/dapp-kit/src/types/index.ts @@ -1,6 +1,13 @@ -import { newWcSigner } from './signer'; -import { createWcModal } from './web3-modal'; -import { createWcClient } from './client'; +export type { + DAppKitOptions, + ConnexWallet, + WalletSource, + ConnectResponse, + WalletConfig, + BaseWallet, + WalletManagerState, + Genesis, +} from './types'; export type { WCSigner, @@ -11,6 +18,4 @@ export type { WCModal, OpenOptions, SubscribeModalState, -} from './types'; - -export { newWcSigner, createWcModal, createWcClient }; +} from './wc-types'; diff --git a/packages/dapp-kit/src/types.d.ts b/packages/dapp-kit/src/types/types.d.ts similarity index 89% rename from packages/dapp-kit/src/types.d.ts rename to packages/dapp-kit/src/types/types.d.ts index 3f501ccd..1c341a96 100644 --- a/packages/dapp-kit/src/types.d.ts +++ b/packages/dapp-kit/src/types/types.d.ts @@ -1,5 +1,6 @@ +import type { Certificate } from 'thor-devkit'; import type { WalletConnectOptions } from '@vechain/dapp-kit'; -import type { LogLevel } from './utils/logger'; +import type { LogLevel } from '../utils/logger'; declare global { interface Window { @@ -35,6 +36,7 @@ interface DAppKitOptions { usePersistence?: boolean; useFirstDetectedSource?: boolean; logLevel?: LogLevel; + requireCertificate?: boolean; } type BaseWallet = Connex.Signer & { @@ -46,18 +48,19 @@ type BaseWallet = Connex.Signer & { */ type ConnexWallet = BaseWallet & { connect: () => Promise; - connectionCertificate?: Connex.Vendor.CertMessage; }; interface ConnectResponse { account: string; verified: boolean; + connectionCertificate?: Certificate; } interface WalletManagerState { source: WalletSource | null; address: string | null; availableSources: WalletSource[]; + connectionCertificate: Certificate | null; } export type { diff --git a/packages/dapp-kit/src/wallet-connect/types.d.ts b/packages/dapp-kit/src/types/wc-types.d.ts similarity index 96% rename from packages/dapp-kit/src/wallet-connect/types.d.ts rename to packages/dapp-kit/src/types/wc-types.d.ts index 6705efe7..460a4326 100644 --- a/packages/dapp-kit/src/wallet-connect/types.d.ts +++ b/packages/dapp-kit/src/types/wc-types.d.ts @@ -43,6 +43,8 @@ export interface WCModal { subscribeModal: ( callback: (newState: SubscribeModalState) => void, ) => () => void; + askForConnectionCertificate?: () => void; + onConnectionCertificateSigned?: () => void; } /** diff --git a/packages/dapp-kit/src/vendor-signer.ts b/packages/dapp-kit/src/utils/convert-vendor-to-signer.ts similarity index 97% rename from packages/dapp-kit/src/vendor-signer.ts rename to packages/dapp-kit/src/utils/convert-vendor-to-signer.ts index 02794f2a..0ed1638b 100644 --- a/packages/dapp-kit/src/vendor-signer.ts +++ b/packages/dapp-kit/src/utils/convert-vendor-to-signer.ts @@ -1,4 +1,4 @@ -import { DAppKitLogger } from './utils'; +import { DAppKitLogger } from './logger'; export const convertVendorToSigner = (vendor: Connex.Vendor): Connex.Signer => { return { diff --git a/packages/dapp-kit/src/create-wallet.ts b/packages/dapp-kit/src/utils/create-wallet.ts similarity index 77% rename from packages/dapp-kit/src/create-wallet.ts rename to packages/dapp-kit/src/utils/create-wallet.ts index fc5e3cdb..e9b0c889 100644 --- a/packages/dapp-kit/src/create-wallet.ts +++ b/packages/dapp-kit/src/utils/create-wallet.ts @@ -1,12 +1,19 @@ import { Connex } from '@vechain/connex'; -import type { WCClient, WCModal } from './wallet-connect'; -import { createWcClient, createWcModal, newWcSigner } from './wallet-connect'; -import type { ConnexWallet, DAppKitOptions, WalletSource } from './types'; -import { CertificateBasedWallet } from './wallets/certificate-wallet'; -import { WCWallet } from './wallets/wc-wallet'; +import type { + ConnexWallet, + DAppKitOptions, + WalletSource, + WCClient, + WCModal, +} from '../types'; +import { CertificateBasedWallet } from '../classes/certificate-wallet'; +import { WCWallet } from '../classes/wc-wallet'; +import { createWcClient } from './create-wc-client'; +import { createWcModal } from './create-wc-modal'; +import { createWcSigner } from './create-wc-signer'; +import { convertVendorToSigner } from './convert-vendor-to-signer'; import { normalizeGenesisId } from './genesis'; -import { convertVendorToSigner } from './vendor-signer'; -import { DAppKitLogger } from './utils'; +import { DAppKitLogger } from './logger'; type ICreateWallet = DAppKitOptions & { source: WalletSource; @@ -61,7 +68,7 @@ export const createWallet = ({ const web3Modal: WCModal = modal ?? createWcModal(projectId); - const wallet = newWcSigner({ + const wallet = createWcSigner({ genesisId, wcClient, web3Modal, diff --git a/packages/dapp-kit/src/wallet-connect/client.ts b/packages/dapp-kit/src/utils/create-wc-client.ts similarity index 97% rename from packages/dapp-kit/src/wallet-connect/client.ts rename to packages/dapp-kit/src/utils/create-wc-client.ts index fb2a729c..6ae8cb2b 100644 --- a/packages/dapp-kit/src/wallet-connect/client.ts +++ b/packages/dapp-kit/src/utils/create-wc-client.ts @@ -3,7 +3,7 @@ import type { ResolvedSignClient, WalletConnectOptions, WCClient, -} from './types'; +} from '../types/wc-types'; const _cachedClients: Record = {}; diff --git a/packages/dapp-kit/src/wallet-connect/web3-modal.ts b/packages/dapp-kit/src/utils/create-wc-modal.ts similarity index 96% rename from packages/dapp-kit/src/wallet-connect/web3-modal.ts rename to packages/dapp-kit/src/utils/create-wc-modal.ts index af6f65f7..700b1080 100644 --- a/packages/dapp-kit/src/wallet-connect/web3-modal.ts +++ b/packages/dapp-kit/src/utils/create-wc-modal.ts @@ -1,5 +1,5 @@ import { WalletConnectModal } from '@walletconnect/modal'; -import type { WCModal } from './types'; +import type { WCModal } from '../types/wc-types'; const _cachedModals: Record = {}; diff --git a/packages/dapp-kit/src/wallet-connect/signer.ts b/packages/dapp-kit/src/utils/create-wc-signer.ts similarity index 94% rename from packages/dapp-kit/src/wallet-connect/signer.ts rename to packages/dapp-kit/src/utils/create-wc-signer.ts index ca1dee9b..7180225b 100644 --- a/packages/dapp-kit/src/wallet-connect/signer.ts +++ b/packages/dapp-kit/src/utils/create-wc-signer.ts @@ -5,9 +5,9 @@ import type { } from '@walletconnect/types'; import { getSdkError } from '@walletconnect/utils'; import type { SignClient } from '@walletconnect/sign-client/dist/types/client'; -import { DAppKitLogger } from '../utils'; -import type { WCSigner, WCSignerOptions } from './types'; -import { DefaultMethods } from './constants'; +import type { WCSigner, WCSignerOptions } from '../types/wc-types'; +import { DefaultMethods } from '../constants/wallet-connect'; +import { DAppKitLogger } from './logger'; interface SessionAccount { networkIdentifier: string; @@ -20,7 +20,7 @@ interface SessionAccount { * @param options - The signer options. See {@link WCSignerOptions} * @returns A new {@link WCSigner} */ -export const newWcSigner = ({ +export const createWcSigner = ({ genesisId, wcClient, web3Modal, @@ -151,10 +151,13 @@ export const newWcSigner = ({ endSubscription(); resolve(newSession); }) - .catch(reject); + .catch((e) => { + web3Modal.closeModal(); + reject(e); + }); }); - } finally { - web3Modal.closeModal(); + } catch (e) { + throw new Error(`wc connect failed`); } }; diff --git a/packages/dapp-kit/src/utils/genesis.ts b/packages/dapp-kit/src/utils/genesis.ts new file mode 100644 index 00000000..cfd51644 --- /dev/null +++ b/packages/dapp-kit/src/utils/genesis.ts @@ -0,0 +1,21 @@ +import { genesisBlocks } from '../constants'; +import type { Genesis } from '../types'; + +const normalizeGenesisId = (genesis?: Genesis): string => { + if (!genesis) return genesisBlocks.main.id; + + if (genesis === 'main' || genesis === 'test') + return genesisBlocks[genesis].id; + + return genesis.id; +}; + +const normalizeGenesisBlock = (genesis?: Genesis): Connex.Thor.Block => { + if (!genesis) return genesisBlocks.main; + + if (genesis === 'main' || genesis === 'test') return genesisBlocks[genesis]; + + return genesis; +}; + +export { normalizeGenesisId, normalizeGenesisBlock }; diff --git a/packages/dapp-kit/src/utils/index.ts b/packages/dapp-kit/src/utils/index.ts index 1ff09efd..0156b3b0 100644 --- a/packages/dapp-kit/src/utils/index.ts +++ b/packages/dapp-kit/src/utils/index.ts @@ -1 +1,8 @@ export * from './logger'; +export * from './convert-vendor-to-signer'; +export * from './local-storage'; +export * from './genesis'; +export * from './create-wallet'; +export * from './create-wc-client'; +export * from './create-wc-signer'; +export * from './create-wc-modal'; diff --git a/packages/dapp-kit/src/local-storage.ts b/packages/dapp-kit/src/utils/local-storage.ts similarity index 56% rename from packages/dapp-kit/src/local-storage.ts rename to packages/dapp-kit/src/utils/local-storage.ts index f2cf37e4..038fbdd1 100644 --- a/packages/dapp-kit/src/local-storage.ts +++ b/packages/dapp-kit/src/utils/local-storage.ts @@ -1,9 +1,11 @@ -import type { WalletSource } from './types'; -import { DAppKitLogger } from './utils'; +import type { Certificate } from 'thor-devkit'; +import type { WalletSource } from '../types'; +import { DAppKitLogger } from './logger'; const STORAGE_PREFIX = 'dappkit@vechain'; const WALLET_SOURCE_KEY = `${STORAGE_PREFIX}/source`; const ACCOUNT_KEY = `${STORAGE_PREFIX}/account`; +const CERTIFICATE_KEY = `${STORAGE_PREFIX}/connectionCertificate`; const setSource = (source: WalletSource | null): void => { DAppKitLogger.debug('LocalStorage', 'setSource', source); @@ -24,6 +26,19 @@ const setAccount = (account: string | null): void => { } }; +const setConnectionCertificate = (certificate: Certificate | null): void => { + DAppKitLogger.debug( + 'LocalStorage', + 'setConnectionCertificate', + certificate, + ); + if (!certificate) { + localStorage.removeItem(CERTIFICATE_KEY); + } else { + localStorage.setItem(CERTIFICATE_KEY, JSON.stringify(certificate)); + } +}; + const getSource = (): WalletSource | null => { const source = localStorage.getItem(WALLET_SOURCE_KEY); @@ -44,9 +59,21 @@ const getAccount = (): string | null => { return account; }; +const getConnectionCertificate = (): Certificate | null => { + const connectionCertificate = localStorage.getItem(CERTIFICATE_KEY); + + if (!connectionCertificate) { + return null; + } + + return JSON.parse(connectionCertificate) as Certificate; +}; + export const Storage = { - getAccount, - getSource, setAccount, setSource, + setConnectionCertificate, + getAccount, + getSource, + getConnectionCertificate, }; diff --git a/packages/dapp-kit/test/create-wallet.test.ts b/packages/dapp-kit/test/create-wallet.test.ts index 235c9660..164e1f04 100644 --- a/packages/dapp-kit/test/create-wallet.test.ts +++ b/packages/dapp-kit/test/create-wallet.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from 'vitest'; import type { Connex1 } from '@vechain/connex/esm/signer'; -import { createWallet } from '../src/create-wallet'; +import { createWallet } from '../src/utils'; import type { DAppKitOptions, WalletConnectOptions, diff --git a/packages/dapp-kit/test/genesis.test.ts b/packages/dapp-kit/test/genesis.test.ts index 2c449044..d9164859 100644 --- a/packages/dapp-kit/test/genesis.test.ts +++ b/packages/dapp-kit/test/genesis.test.ts @@ -1,9 +1,6 @@ import { describe, expect, it } from 'vitest'; -import { - genesisBlocks, - normalizeGenesisBlock, - normalizeGenesisId, -} from '../src/genesis'; +import { normalizeGenesisBlock, normalizeGenesisId } from '../src/utils'; +import { genesisBlocks } from '../src/constants'; const customBlock = { number: 0, diff --git a/packages/dapp-kit/test/helpers/mocked-sign-client.ts b/packages/dapp-kit/test/helpers/mocked-sign-client.ts index fe2ee985..d87b0897 100644 --- a/packages/dapp-kit/test/helpers/mocked-sign-client.ts +++ b/packages/dapp-kit/test/helpers/mocked-sign-client.ts @@ -5,7 +5,7 @@ import type { } from '@walletconnect/types/dist/types/sign-client/engine'; import type { SessionTypes } from '@walletconnect/types'; import type { ResolvedSignClient } from '../../src'; -import { DefaultMethods } from '../../src/wallet-connect/constants'; +import { DefaultMethods } from '../../src'; import { wcSessionStruct } from './wc-fixtures'; import { address, mockedConnexSigner } from './mocked-signer'; import { randomUUID } from 'node:crypto'; diff --git a/packages/dapp-kit/test/helpers/wc-fixtures.ts b/packages/dapp-kit/test/helpers/wc-fixtures.ts index d670bdc9..4c11c725 100644 --- a/packages/dapp-kit/test/helpers/wc-fixtures.ts +++ b/packages/dapp-kit/test/helpers/wc-fixtures.ts @@ -1,6 +1,5 @@ import type { SessionTypes, SignClientTypes } from '@walletconnect/types'; -import { normalizeGenesisBlock } from '../../src/genesis'; -import { DefaultMethods } from '../../src/wallet-connect/constants'; +import { normalizeGenesisBlock, DefaultMethods } from '../../src'; import { address } from './mocked-signer'; const wcMetadata: SignClientTypes.Options['metadata'] = { diff --git a/packages/dapp-kit/test/wallet-connect/client.test.ts b/packages/dapp-kit/test/utils/client.test.ts similarity index 100% rename from packages/dapp-kit/test/wallet-connect/client.test.ts rename to packages/dapp-kit/test/utils/client.test.ts diff --git a/packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts b/packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts new file mode 100644 index 00000000..64b3c7c5 --- /dev/null +++ b/packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts @@ -0,0 +1,142 @@ +import { convertVendorToSigner } from '../../src'; +import { vi, it, describe, expect } from 'vitest'; + +describe('convertVendorToSigner', () => { + it('should return the correct message', async () => { + const gasMock = vi.fn(); + const signerMock = vi.fn(); + const dependsOnMock = vi.fn(); + const linkMock = vi.fn(); + const commentMock = vi.fn(); + const delegateMock = vi.fn(); + const acceptedMock = vi.fn(); + const requestMock = vi.fn(); + const mockSign = vi.fn(() => ({ + gas: gasMock, + signer: signerMock, + dependsOn: dependsOnMock, + link: linkMock, + comment: commentMock, + delegate: delegateMock, + accepted: acceptedMock, + request: requestMock, + })); + const vendorMock = { + sign: mockSign, + }; + + // Create a fake transaction message and options + const fakeMsg = 'Your fake transaction message'; + const fakeOptions = { + gas: 100000, + }; + + // Call the function with the mock + const signer = convertVendorToSigner(vendorMock as Connex.Vendor); + await signer.signTx([{ to: 'address', value: fakeMsg }], fakeOptions); + + expect(mockSign).toHaveBeenCalledWith('tx', [ + { + to: 'address', + value: fakeMsg, + }, + ]); + + await signer.signCert( + { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }, + {}, + ); + expect(mockSign).toHaveBeenCalledWith('cert', { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }); + + expect(gasMock).toHaveBeenCalledWith(fakeOptions.gas); + expect(requestMock).toHaveBeenCalled(); + }); + it('should call it with multiple options', async () => { + const gasMock = vi.fn(); + const signerMock = vi.fn(); + const dependsOnMock = vi.fn(); + const linkMock = vi.fn(); + const commentMock = vi.fn(); + const delegateMock = vi.fn(); + const acceptedMock = vi.fn(); + const requestMock = vi.fn(); + const mockSign = vi.fn(() => ({ + gas: gasMock, + signer: signerMock, + dependsOn: dependsOnMock, + link: linkMock, + comment: commentMock, + delegate: delegateMock, + accepted: acceptedMock, + request: requestMock, + })); + const vendorMock = { + sign: mockSign, + }; + + // Create a fake transaction message and options + const fakeMsg = 'Your fake transaction message'; + const fakeOptions = { + signer: '0x1234567890', + dependsOn: '0x0987654321', + link: 'https://example.com', + comment: 'This is a comment', + onAccepted: () => {}, + delegator: { + url: 'https://example.com', + signer: '0x1234567890', + }, + }; + + // Call the function with the mock + const signer = convertVendorToSigner(vendorMock); + await signer.signTx([{ to: 'address', value: fakeMsg }], fakeOptions); + expect(mockSign).toHaveBeenCalledWith('tx', [ + { + to: 'address', + value: fakeMsg, + }, + ]); + await signer.signCert( + { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }, + fakeOptions, + ); + expect(mockSign).toHaveBeenCalledWith('cert', { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }); + + expect(gasMock).not.toHaveBeenCalled(); + expect(signerMock).toHaveBeenCalledWith(fakeOptions.signer); + expect(dependsOnMock).toHaveBeenCalledWith(fakeOptions.dependsOn); + expect(linkMock).toHaveBeenCalledWith(fakeOptions.link); + expect(commentMock).toHaveBeenCalledWith(fakeOptions.comment); + expect(delegateMock).toHaveBeenCalledWith( + fakeOptions.delegator.url, + fakeOptions.delegator.signer, + ); + expect(acceptedMock).toHaveBeenCalledWith(fakeOptions.onAccepted); + expect(requestMock).toHaveBeenCalled(); + }); +}); diff --git a/packages/dapp-kit/test/wallet-connect/signer.test.ts b/packages/dapp-kit/test/utils/signer.test.ts similarity index 91% rename from packages/dapp-kit/test/wallet-connect/signer.test.ts rename to packages/dapp-kit/test/utils/signer.test.ts index 209f6e15..0b255841 100644 --- a/packages/dapp-kit/test/wallet-connect/signer.test.ts +++ b/packages/dapp-kit/test/utils/signer.test.ts @@ -2,9 +2,9 @@ import { describe, expect, it, vi } from 'vitest'; import { SignClient } from '@walletconnect/sign-client'; import type { SignClientTypes } from '@walletconnect/types'; import type { WCModal, WCSigner } from '../../src'; -import { createWcClient, newWcSigner } from '../../src'; +import { createWcClient, createWcSigner } from '../../src'; import { mockedSignClient } from '../helpers/mocked-sign-client'; -import { normalizeGenesisId } from '../../src/genesis'; +import { normalizeGenesisId } from '../../src'; import { address } from '../helpers/mocked-signer'; vi.spyOn(SignClient, 'init').mockResolvedValue(mockedSignClient); @@ -26,7 +26,7 @@ const customModal: WCModal = { }; const createNewSignClient = (): WCSigner => - newWcSigner({ + createWcSigner({ genesisId: normalizeGenesisId('main'), wcClient: createWcClient({ projectId, metadata }), onDisconnected: () => { @@ -35,7 +35,7 @@ const createNewSignClient = (): WCSigner => web3Modal: customModal, }); -describe('newWcSigner', () => { +describe('createWcSigner', () => { it('can connect', async () => { const signer = createNewSignClient(); diff --git a/packages/dapp-kit/test/wallet-connect/web3-modal.test.ts b/packages/dapp-kit/test/utils/web3-modal.test.ts similarity index 100% rename from packages/dapp-kit/test/wallet-connect/web3-modal.test.ts rename to packages/dapp-kit/test/utils/web3-modal.test.ts diff --git a/scripts/prepare-packages.ts b/scripts/prepare-packages.ts index e7dd5aa2..a74e602b 100644 --- a/scripts/prepare-packages.ts +++ b/scripts/prepare-packages.ts @@ -36,6 +36,33 @@ const updatePackageVersions = (version: string) => { fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2)); } + + // Update versions in the examples directory + const examplesPath = path.resolve(__dirname, '../examples'); + + const examplePackages = fs.readdirSync(examplesPath); + + for (const example of examplePackages) { + const examplePath = path.resolve(examplesPath, example); + const examplePackageJsonPath = path.resolve( + examplePath, + './package.json', + ); + const examplePackageJson = JSON.parse( + fs.readFileSync(examplePackageJsonPath, 'utf8'), + ); + + for (const dep of Object.keys(examplePackageJson.dependencies)) { + if (packageNames.includes(dep)) { + examplePackageJson.dependencies[dep] = version; + } + } + + fs.writeFileSync( + examplePackageJsonPath, + JSON.stringify(examplePackageJson, null, 2), + ); + } }; const preparePackages = async () => { @@ -55,23 +82,23 @@ const preparePackages = async () => { console.log(' Clean:'); console.log(' - 🚮 Removing existing packages & builds...'); await exec('yarn purge'); - console.log(' - ✅ Removed!'); + console.log(' - ✅ Removed!'); console.log(' Build:'); console.log(' - 📦 Building packages...'); await exec('yarn install:all'); - console.log(' - ✅ Built!'); + console.log(' - ✅ Built!'); console.log(' Test:'); console.log(' - 🧪 Testing packages...'); await exec('yarn test'); - console.log(' - ✅ Success!'); + console.log(' - ✅ Success!'); console.log(' Version:'); - console.log(` - 🏷 Updating package versions to ${version}...`); + console.log(` - 🏷 Updating package versions to ${version}...`); updatePackageVersions(version); await exec(`yarn format`); - console.log(' - ✅ Updated!'); + console.log(' - ✅ Updated!'); console.log('\n______________________________________________________\n\n'); console.log(' Publish:'); diff --git a/apps/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js similarity index 100% rename from apps/e2e/.eslintrc.js rename to tests/e2e/.eslintrc.js diff --git a/apps/e2e/LICENSE b/tests/e2e/LICENSE similarity index 100% rename from apps/e2e/LICENSE rename to tests/e2e/LICENSE diff --git a/apps/e2e/README.md b/tests/e2e/README.md similarity index 100% rename from apps/e2e/README.md rename to tests/e2e/README.md diff --git a/apps/e2e/cucumber.js b/tests/e2e/cucumber.js similarity index 100% rename from apps/e2e/cucumber.js rename to tests/e2e/cucumber.js diff --git a/apps/e2e/package.json b/tests/e2e/package.json similarity index 100% rename from apps/e2e/package.json rename to tests/e2e/package.json diff --git a/apps/e2e/src/features/connect-wallet.feature b/tests/e2e/src/features/connect-wallet.feature similarity index 100% rename from apps/e2e/src/features/connect-wallet.feature rename to tests/e2e/src/features/connect-wallet.feature diff --git a/apps/e2e/src/steps/common-steps.ts b/tests/e2e/src/steps/common-steps.ts similarity index 76% rename from apps/e2e/src/steps/common-steps.ts rename to tests/e2e/src/steps/common-steps.ts index 79c679f2..317105b5 100644 --- a/apps/e2e/src/steps/common-steps.ts +++ b/tests/e2e/src/steps/common-steps.ts @@ -1,5 +1,5 @@ import { Given } from '@cucumber/cucumber'; -import { ICustomWorld } from 'types'; +import { ICustomWorld } from 'tests/e2e/src/types'; Given('The user is in the homepage', async function (this: ICustomWorld) { await this.openUrl('http://localhost:1234'); diff --git a/apps/e2e/src/steps/connect-wallet-steps.ts b/tests/e2e/src/steps/connect-wallet-steps.ts similarity index 100% rename from apps/e2e/src/steps/connect-wallet-steps.ts rename to tests/e2e/src/steps/connect-wallet-steps.ts diff --git a/apps/e2e/src/steps/custom-world.ts b/tests/e2e/src/steps/custom-world.ts similarity index 89% rename from apps/e2e/src/steps/custom-world.ts rename to tests/e2e/src/steps/custom-world.ts index 52d6b471..0c5dc6d1 100644 --- a/apps/e2e/src/steps/custom-world.ts +++ b/tests/e2e/src/steps/custom-world.ts @@ -1,5 +1,5 @@ import { World, setWorldConstructor } from '@cucumber/cucumber'; -import { ICustomWorld } from 'types'; +import { ICustomWorld } from 'tests/e2e/src/types'; import { openUrl, click, clickByText, isVisible, isVisibleByText } from 'utils'; export class CustomWorld extends World implements ICustomWorld { diff --git a/apps/e2e/src/steps/hooks.ts b/tests/e2e/src/steps/hooks.ts similarity index 92% rename from apps/e2e/src/steps/hooks.ts rename to tests/e2e/src/steps/hooks.ts index 5a6c5c31..cf3938be 100644 --- a/apps/e2e/src/steps/hooks.ts +++ b/tests/e2e/src/steps/hooks.ts @@ -1,7 +1,7 @@ import type { ChromiumBrowser } from 'playwright'; import { chromium } from 'playwright'; import { After, AfterAll, Before, BeforeAll } from '@cucumber/cucumber'; -import { ICustomWorld } from 'types'; +import { ICustomWorld } from 'tests/e2e/src/types'; let browser: ChromiumBrowser; diff --git a/apps/e2e/src/types.ts b/tests/e2e/src/types.ts similarity index 100% rename from apps/e2e/src/types.ts rename to tests/e2e/src/types.ts diff --git a/apps/e2e/src/utils/browser.ts b/tests/e2e/src/utils/browser.ts similarity index 100% rename from apps/e2e/src/utils/browser.ts rename to tests/e2e/src/utils/browser.ts diff --git a/apps/e2e/src/utils/index.ts b/tests/e2e/src/utils/index.ts similarity index 100% rename from apps/e2e/src/utils/index.ts rename to tests/e2e/src/utils/index.ts diff --git a/apps/e2e/src/utils/mouse.ts b/tests/e2e/src/utils/mouse.ts similarity index 100% rename from apps/e2e/src/utils/mouse.ts rename to tests/e2e/src/utils/mouse.ts diff --git a/apps/e2e/src/utils/visibility.ts b/tests/e2e/src/utils/visibility.ts similarity index 100% rename from apps/e2e/src/utils/visibility.ts rename to tests/e2e/src/utils/visibility.ts diff --git a/apps/e2e/tests.setup.js b/tests/e2e/tests.setup.js similarity index 100% rename from apps/e2e/tests.setup.js rename to tests/e2e/tests.setup.js diff --git a/apps/e2e/tsconfig.json b/tests/e2e/tsconfig.json similarity index 100% rename from apps/e2e/tsconfig.json rename to tests/e2e/tsconfig.json