From 9f4071963ba5a3a52e7428e3fa40b1b59142a86b Mon Sep 17 00:00:00 2001 From: Darren Kelly <107671032+darrenvechain@users.noreply.github.com> Date: Mon, 6 Nov 2023 19:50:41 +0000 Subject: [PATCH] Using vanilla components in Vue (#52) * refactor: changing vanilla config to single function * refactor: changing vanilla config to single function * refactor: change wallet kit options * fix: vanilla imports * feat: vue using common components --- README.md | 11 +- apps/sample-react-app/package.json | 3 +- apps/sample-vanilla-app/index.js | 9 +- apps/sample-vanilla-app/package.json | 2 + apps/sample-vue-app/package.json | 6 +- apps/sample-vue-app/src/App.vue | 9 +- .../src/components/ConnectWalletModal.vue | 224 ------------------ .../src/connex/ConnexProvider.vue | 3 + apps/sample-vue-app/src/main.ts | 1 + apps/sample-vue-app/vue.config.js | 12 + package.json | 3 +- packages/react-wallet-kit/package.json | 5 +- packages/vanilla-wallet-kit/package.json | 3 +- packages/vanilla-wallet-kit/src/client.ts | 43 ++-- .../src/components/base/index.ts | 2 +- .../components/base/vwk-base-modal/index.ts | 93 +++++++- .../base/vwk-base-modal/vwk-base-modal.ts | 95 -------- .../src/components/index.ts | 11 +- .../vwk-connect-button-with-modal/index.ts | 58 ++++- .../vwk-connect-button-with-modal.ts | 57 ----- .../components/vwk-connect-button/index.ts | 60 ++++- .../vwk-connect-button/vwk-connect-button.ts | 57 ----- .../src/components/vwk-connect-modal/index.ts | 88 ++++++- .../vwk-connect-modal/vwk-connect-modal.ts | 86 ------- .../src/components/vwk-fonts.ts | 25 -- .../src/components/vwk-fonts/index.ts | 57 +++++ .../index.ts} | 8 +- packages/vanilla-wallet-kit/src/index.ts | 1 - packages/wallet-connect/package.json | 5 +- packages/wallet-kit/package.json | 3 +- turbo.json | 3 + 31 files changed, 433 insertions(+), 610 deletions(-) delete mode 100644 apps/sample-vue-app/src/components/ConnectWalletModal.vue delete mode 100644 packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/vwk-base-modal.ts delete mode 100644 packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/vwk-connect-button-with-modal.ts delete mode 100644 packages/vanilla-wallet-kit/src/components/vwk-connect-button/vwk-connect-button.ts delete mode 100644 packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts delete mode 100644 packages/vanilla-wallet-kit/src/components/vwk-fonts.ts create mode 100644 packages/vanilla-wallet-kit/src/components/vwk-fonts/index.ts rename packages/vanilla-wallet-kit/src/components/{vwk-connect-modal/vwk-source-card.ts => vwk-source-card/index.ts} (92%) diff --git a/README.md b/README.md index 81d95be3..0c9bf5e1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # vechain-dapp-kit -VeWorld WalletKit is a typescript library that facilitates seamless interaction between VeChain wallets (veworld, sync 2) and dApps, enhancing user experience and developer convenience. +VeWorld WalletKit is a typescript library that facilitates seamless interaction between VeChain wallets (veworld, sync2) +and dApps, enhancing user experience and developer convenience. ## Why ? @@ -50,6 +51,14 @@ yarn dev yarn clean ``` +### Purge project + +- Runs yarn clean and removes all node_modules + +```bash +yarn purge +``` + ### Install yarn packages ```bash diff --git a/apps/sample-react-app/package.json b/apps/sample-react-app/package.json index 1d6789cb..c5692e0b 100644 --- a/apps/sample-react-app/package.json +++ b/apps/sample-react-app/package.json @@ -6,12 +6,13 @@ "main": "src/index.js", "scripts": { "build": "yarn compile && react-app-rewired build", - "clean": "rm -rf build node_modules .turbo cache artifacts src/hardhat", + "clean": "rm -rf build .turbo cache artifacts src/hardhat", "compile": "yarn hardhat compile", "dev": "react-app-rewired start", "eject": "react-app-rewired eject", "postinstall": "yarn compile", "lint": "eslint src --ext .js,.jsx,.ts,.tsx", + "purge": "yarn clean && rm -rf node_modules", "start": "HTTPS=true react-app-rewired start", "test": "echo 'Not yet testing'" }, diff --git a/apps/sample-vanilla-app/index.js b/apps/sample-vanilla-app/index.js index d868a018..f7071248 100644 --- a/apps/sample-vanilla-app/index.js +++ b/apps/sample-vanilla-app/index.js @@ -1,9 +1,6 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable no-undef */ -import { - VechainWalletKit, - VechainWalletKitModal, -} from '@vechain/vanilla-wallet-kit'; +import { configureThorModal } from '@vechain/vanilla-wallet-kit'; const walletConnectOptions = { projectId: 'a0b855ceaf109dbc8426479a4c3d38d8', @@ -21,6 +18,4 @@ const vechainWalletKitOptions = { walletConnectOptions, }; -const walletKit = new VechainWalletKit(vechainWalletKitOptions); -const vechainWalletKit = new VechainWalletKitModal(walletKit); -vechainWalletKit.initModalListeners(); +configureThorModal(vechainWalletKitOptions); diff --git a/apps/sample-vanilla-app/package.json b/apps/sample-vanilla-app/package.json index 6f4fffc1..3b58a404 100644 --- a/apps/sample-vanilla-app/package.json +++ b/apps/sample-vanilla-app/package.json @@ -6,7 +6,9 @@ "author": "", "type": "module", "scripts": { + "clean": "rm -rf dist", "dev": "parcel index.html --open", + "purge": "yarn clean && rm -rf node_modules", "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { diff --git a/apps/sample-vue-app/package.json b/apps/sample-vue-app/package.json index 8fce2a1d..a08417c0 100644 --- a/apps/sample-vue-app/package.json +++ b/apps/sample-vue-app/package.json @@ -4,9 +4,10 @@ "private": true, "scripts": { "build": "vue-cli-service build", - "clean": "rm -rf dist node_modules .turbo", + "clean": "rm -rf dist .turbo", "dev": "vue-cli-service serve", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "purge": "yarn clean && rm -rf node_modules" }, "browserslist": [ "> 1%", @@ -30,6 +31,7 @@ "root": true }, "dependencies": { + "@vechain/vanilla-wallet-kit": "*", "@vechain/wallet-kit": "*", "core-js": "^3.8.3", "node-polyfill-webpack-plugin": "^2.0.1", diff --git a/apps/sample-vue-app/src/App.vue b/apps/sample-vue-app/src/App.vue index 9d51d2e9..e2e69e10 100644 --- a/apps/sample-vue-app/src/App.vue +++ b/apps/sample-vue-app/src/App.vue @@ -2,24 +2,21 @@ Vue logo
- - +
- - diff --git a/apps/sample-vue-app/src/connex/ConnexProvider.vue b/apps/sample-vue-app/src/connex/ConnexProvider.vue index 818dcfea..bf1d5d6b 100644 --- a/apps/sample-vue-app/src/connex/ConnexProvider.vue +++ b/apps/sample-vue-app/src/connex/ConnexProvider.vue @@ -13,6 +13,7 @@ import { } from '@/connex/keys'; import { WalletActions, WalletState } from '@/connex/types'; import { WalletConnectOptions } from '@vechain/wallet-connect'; +import { configureThorModal } from '@vechain/vanilla-wallet-kit'; const initWallets = (hasWcOptions: boolean) => { const wallets: WalletSource[] = ['sync2']; @@ -62,6 +63,8 @@ export default defineComponent({ walletConnectOptions, }); + configureThorModal(connex); + const updateAccount = (addr: string) => { walletState.account = addr; }; diff --git a/apps/sample-vue-app/src/main.ts b/apps/sample-vue-app/src/main.ts index 684d0421..a9434a40 100644 --- a/apps/sample-vue-app/src/main.ts +++ b/apps/sample-vue-app/src/main.ts @@ -1,4 +1,5 @@ import { createApp } from 'vue'; import App from './App.vue'; +import '@vechain/vanilla-wallet-kit'; createApp(App).mount('#app'); diff --git a/apps/sample-vue-app/vue.config.js b/apps/sample-vue-app/vue.config.js index ca20ec40..317e97fc 100644 --- a/apps/sample-vue-app/vue.config.js +++ b/apps/sample-vue-app/vue.config.js @@ -12,4 +12,16 @@ module.exports = defineConfig({ }, }, }, + chainWebpack: (config) => { + config.module + .rule('vue') + .use('vue-loader') + .tap((options) => { + options.compilerOptions = { + ...options.compilerOptions, + isCustomElement: (tag) => tag.startsWith('vwk-'), + }; + return options; + }); + }, }); diff --git a/package.json b/package.json index d774a7fe..4061e474 100755 --- a/package.json +++ b/package.json @@ -8,12 +8,13 @@ "build": "turbo run build", "build-react-kit": "turbo run build --filter='@vechain/react-wallet-kit'", "build:deps": "turbo build --no-daemon --filter='@vechain/*'", - "clean": "npx turbo@latest run clean && rm -rf node_modules .turbo .parcel-cache", + "clean": "rm -rf .turbo .parcel-cache build && npx turbo@latest run clean", "dev": "turbo run dev --no-daemon", "format": "prettier --write \"**/*.{ts,tsx,md,json,js,jsx}\"", "install:all": "yarn && yarn run build:deps", "lint": "turbo run lint", "prepare": "husky install", + "purge": "npx turbo@latest run purge && rm -rf node_modules", "reinstall": "yarn clean && yarn && yarn run build:deps", "test": "turbo run test" }, diff --git a/packages/react-wallet-kit/package.json b/packages/react-wallet-kit/package.json index b54de5fa..d1a89024 100644 --- a/packages/react-wallet-kit/package.json +++ b/packages/react-wallet-kit/package.json @@ -8,9 +8,10 @@ "types": "./dist/index.d.ts", "scripts": { "build": "tsup src/index.tsx --format cjs --dts --external react", - "clean": "rm -rf dist node_modules .turbo", + "clean": "rm -rf dist .turbo", "dev": "tsup src/index.tsx --format cjs --watch --dts --external react", - "lint": "eslint src --ext .js,.jsx,.ts,.tsx" + "lint": "eslint src --ext .js,.jsx,.ts,.tsx", + "purge": "yarn clean && rm -rf node_modules" }, "dependencies": { "@chakra-ui/react": "^2.8.1", diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json index 621d98c3..3f1e7fa2 100644 --- a/packages/vanilla-wallet-kit/package.json +++ b/packages/vanilla-wallet-kit/package.json @@ -16,10 +16,11 @@ "types": "dist/index.d.ts", "scripts": { "build": "tsup", - "clean": "rm -rf dist && rm -rf node_modules", + "clean": "rm -rf dist .turbo", "dev": "parcel index.html --open", "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write", "lint": "eslint 'src/**/*.ts'", + "purge": "yarn clean && rm -rf node_modules", "watch": "tsup --watch" }, "dependencies": { diff --git a/packages/vanilla-wallet-kit/src/client.ts b/packages/vanilla-wallet-kit/src/client.ts index 35e1f548..09e67d00 100644 --- a/packages/vanilla-wallet-kit/src/client.ts +++ b/packages/vanilla-wallet-kit/src/client.ts @@ -1,38 +1,20 @@ import type { WalletSource } from '@vechain/wallet-kit'; import { MultiWalletConnex } from '@vechain/wallet-kit'; +import type { ConnexOptions } from '@vechain/wallet-kit/src'; import type { SourceInfo } from './constants'; +import './components'; -export interface VechainWalletKitOptions { - connex?: MultiWalletConnex; - nodeUrl: string; - network: string; // TODO: add a type for this - walletConnectOptions: { - projectId: string; - metadata: { - name: string; - description: string; - url: string; - icons: string[]; - }; - }; - onDisconnected: () => void; -} +export type VechainWalletKitOptions = MultiWalletConnex | ConnexOptions; -export class VechainWalletKit { +class VechainWalletKit { connex: MultiWalletConnex; account: string | null = null; constructor(options: VechainWalletKitOptions) { - if (options.connex) { - this.connex = options.connex; + if ('thor' in options) { + this.connex = options; } else { - this.connex = new MultiWalletConnex({ - nodeUrl: options.nodeUrl, - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - genesis: options.network as any, - walletConnectOptions: options.walletConnectOptions, - onDisconnected: options.onDisconnected, - }); + this.connex = new MultiWalletConnex(options); } } @@ -41,8 +23,9 @@ export class VechainWalletKit { }; } -export class VechainWalletKitModal { +class VechainWalletKitModal { public walletKit: VechainWalletKit; + constructor(walletKit: VechainWalletKit) { this.walletKit = walletKit; } @@ -65,3 +48,11 @@ export class VechainWalletKitModal { }); } } + +export const configureThorModal = ( + walletKit: VechainWalletKitOptions, +): void => { + const vechainWalletKit = new VechainWalletKit(walletKit); + const vechainWalletKitModal = new VechainWalletKitModal(vechainWalletKit); + vechainWalletKitModal.initModalListeners(); +}; diff --git a/packages/vanilla-wallet-kit/src/components/base/index.ts b/packages/vanilla-wallet-kit/src/components/base/index.ts index a9facc92..caffbf64 100644 --- a/packages/vanilla-wallet-kit/src/components/base/index.ts +++ b/packages/vanilla-wallet-kit/src/components/base/index.ts @@ -1 +1 @@ -export * from './vwk-base-modal'; +import './vwk-base-modal'; diff --git a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts index a9facc92..72712b62 100644 --- a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts +++ b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts @@ -1 +1,92 @@ -export * from './vwk-base-modal'; +import type { TemplateResult } from 'lit'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { Theme, ThemeMode } from '@vechain/wallet-kit'; +import { Colors } from '../../../constants'; + +@customElement('vwk-base-modal') +export class Modal extends LitElement { + static override styles = css` + .modal-container { + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + } + + .modal { + position: absolute; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + box-sizing: border-box; + } + + .modal.LIGHT { + background-color: ${Colors.White}; + color: ${Colors.Dark}; + } + + .modal.DARK { + background-color: ${Colors.Dark}; + color: ${Colors.LightGray}; + } + + @media (max-width: 600px) { + .modal { + width: 100%; + border-top-left-radius: 16px; + border-top-right-radius: 16px; + bottom: 0; + left: 0; + right: 0; + } + } + + @media (min-width: 600px) { + .modal { + width: 350px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 16px; + } + } + `; + @property({ type: Boolean }) + open = false; + @property() + mode = ThemeMode.Light; + @property() + theme = Theme.Default; + + @property({ type: Function }) + onClose = (): null => null; + + stopPropagation = (event: Event): void => { + event.stopPropagation(); + }; + + override render(): TemplateResult { + if (!this.open) return html``; + return html` +
+
+ +
+
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'vwk-base-modal': Modal; + } +} diff --git a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/vwk-base-modal.ts b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/vwk-base-modal.ts deleted file mode 100644 index e5de9980..00000000 --- a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/vwk-base-modal.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { LitElement, html, css } from 'lit'; -import type { TemplateResult } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { Theme, ThemeMode } from '@vechain/wallet-kit'; -import { Colors } from '../../../constants'; - -@customElement('vwk-base-modal') -class Modal extends LitElement { - @property({ type: Boolean }) - open = false; - - static override styles = css` - .modal-container { - display: block; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - } - - .modal { - position: absolute; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - box-sizing: border-box; - } - - .modal.LIGHT { - background-color: ${Colors.White}; - color: ${Colors.Dark}; - } - - .modal.DARK { - background-color: ${Colors.Dark}; - color: ${Colors.LightGray}; - } - - @media (max-width: 600px) { - .modal { - width: 100%; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - bottom: 0; - left: 0; - right: 0; - } - } - - @media (min-width: 600px) { - .modal { - width: 350px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 16px; - } - } - `; - - @property({ type: Function }) - onClose = (): null => null; - - stopPropagation = (event: Event): void => { - event.stopPropagation(); - }; - - @property() - mode = ThemeMode.Light; - - @property() - theme = Theme.Default; - - override render(): TemplateResult { - if (!this.open) return html``; - return html` -
-
- -
-
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'vwk-base-modal': Modal; - } -} diff --git a/packages/vanilla-wallet-kit/src/components/index.ts b/packages/vanilla-wallet-kit/src/components/index.ts index faa4bf4f..8101163d 100644 --- a/packages/vanilla-wallet-kit/src/components/index.ts +++ b/packages/vanilla-wallet-kit/src/components/index.ts @@ -1,5 +1,6 @@ -export * from './base'; -export * from './vwk-connect-modal'; -export * from './vwk-connect-button'; -export * from './vwk-connect-button-with-modal'; -export * from './vwk-fonts'; +import './base'; +import './vwk-connect-modal'; +import './vwk-connect-button'; +import './vwk-connect-button-with-modal'; +import './vwk-source-card'; +import './vwk-fonts'; diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts index d969f8c4..0367155d 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts @@ -1 +1,57 @@ -export * from './vwk-connect-button-with-modal'; +import type { TemplateResult } from 'lit'; +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { Theme, ThemeMode } from '@vechain/wallet-kit'; + +@customElement('vwk-connect-button-with-modal') +export class ConnectButtonWithModal extends LitElement { + @property() + override title = 'Connect Wallet'; + + @property({ type: ThemeMode }) + mode = ThemeMode.Light; + + @property({ type: Theme }) + theme = Theme.Default; + + @property({ type: Boolean }) + open = false; + + @property({ type: Function }) + onSourceClick?: undefined; + + override render(): TemplateResult { + return html` +
+ + + +
+ `; + } + + private handleOpen = (): void => { + this.open = true; + }; + + private handleClose = (): void => { + this.open = false; + }; +} + +declare global { + interface HTMLElementTagNameMap { + 'vwk-connect-button-with-modal': ConnectButtonWithModal; + } +} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/vwk-connect-button-with-modal.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/vwk-connect-button-with-modal.ts deleted file mode 100644 index 3b502c83..00000000 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/vwk-connect-button-with-modal.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { LitElement, html } from 'lit'; -import type { TemplateResult } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { ThemeMode, Theme } from '@vechain/wallet-kit'; - -@customElement('vwk-connect-button-with-modal') -class ConnectButtonWithModal extends LitElement { - @property() - override title = 'Connect Wallet'; - - @property({ type: ThemeMode }) - mode = ThemeMode.Light; - - @property({ type: Theme }) - theme = Theme.Default; - - @property({ type: Boolean }) - open = false; - - @property({ type: Function }) - onSourceClick?: undefined; - - private handleOpen = (): void => { - this.open = true; - }; - - private handleClose = (): void => { - this.open = false; - }; - - override render(): TemplateResult { - return html` -
- - - -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'vwk-connect-button-with-modal': ConnectButtonWithModal; - } -} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button/index.ts index ac280114..7a4bea13 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-button/index.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-connect-button/index.ts @@ -1 +1,59 @@ -export * from './vwk-connect-button'; +import type { TemplateResult } from 'lit'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { Theme, ThemeMode } from '@vechain/wallet-kit'; +import { Colors } from '../../constants'; + +@customElement('vwk-connect-button') +export class ConnectButton extends LitElement { + static override styles = css` + button { + cursor: pointer; + display: block; + border: none; + border-radius: 12px; + padding: 8px 12px; + font-family: 'Inter', sans-serif; + } + + button:hover { + opacity: 0.9; + } + + button.LIGHT { + background-color: ${Colors.LightGray}; + color: ${Colors.Dark}; + } + + button.DARK { + background-color: ${Colors.Dark}; + color: ${Colors.LightGray}; + } + `; + + @property() + override title = 'Connect Wallet'; + + @property() + mode = ThemeMode.Light; + + @property() + theme = Theme.Default; + + @property({ type: Function }) + onClick? = undefined; + + override render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'vwk-connect-button': ConnectButton; + } +} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button/vwk-connect-button.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button/vwk-connect-button.ts deleted file mode 100644 index 50dce6fb..00000000 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-button/vwk-connect-button.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { LitElement, html, css } from 'lit'; -import type { TemplateResult } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { ThemeMode, Theme } from '@vechain/wallet-kit'; -import { Colors } from '../../constants'; - -@customElement('vwk-connect-button') -class ConnectButton extends LitElement { - static override styles = css` - button { - cursor: pointer; - display: block; - border: none; - border-radius: 12px; - padding: 8px 12px; - font-family: 'Inter', sans-serif; - } - button:hover { - opacity: 0.9; - } - - button.LIGHT { - background-color: ${Colors.LightGray}; - color: ${Colors.Dark}; - } - button.DARK { - background-color: ${Colors.Dark}; - color: ${Colors.LightGray}; - } - `; - - @property() - override title = 'Connect Wallet'; - - @property() - mode = ThemeMode.Light; - - @property() - theme = Theme.Default; - - @property({ type: Function }) - onClick? = undefined; - - override render(): TemplateResult { - return html` - - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'vwk-connect-button': ConnectButton; - } -} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts index 4374faf6..8a5b5c3a 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts @@ -1,2 +1,86 @@ -export * from './vwk-connect-modal'; -export * from './vwk-source-card'; +import type { TemplateResult } from 'lit'; +import { css, html, LitElement, nothing } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { Theme, ThemeMode } from '@vechain/wallet-kit'; +import { DarkCloseSvg, LightCloseSvg } from '../../assets'; +import type { SourceInfo } from '../../constants'; +import { WalletSources } from '../../constants'; + +@customElement('vwk-connect-modal') +export class ConnectModal extends LitElement { + static override styles = css` + .modal-container { + padding: 20px; + } + + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 10px; + font-family: 'Inter', sans-serif; + } + + .modal-body { + flex-direction: column; + } + + .close-icon { + cursor: pointer; + width: 20px; + height: 20px; + } + `; + + @property({ type: Boolean }) + open = false; + @property({ type: Function }) + onSourceClick?: (source?: SourceInfo) => void = undefined; + @property() + mode = ThemeMode.Light; + @property() + theme = Theme.Default; + + @property({ type: Function }) + onClose: () => void = () => nothing; + + override render(): TemplateResult { + return html` + + +
+
+
+
Connect Wallet
+
+ ${this.mode === ThemeMode.Light + ? LightCloseSvg + : DarkCloseSvg} +
+
+
+ ${WalletSources.map( + (source) => + html` `, + )} +
+
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'vwk-connect-modal': ConnectModal; + } +} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts deleted file mode 100644 index 78f737aa..00000000 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { LitElement, html, css, nothing } from 'lit'; -import type { TemplateResult } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { ThemeMode, Theme } from '@vechain/wallet-kit'; -import { DarkCloseSvg, LightCloseSvg } from '../../assets'; -import { WalletSources } from '../../constants'; -import type { SourceInfo } from '../../constants'; - -@customElement('vwk-connect-modal') -class ConnectModal extends LitElement { - static override styles = css` - .modal-container { - padding: 20px; - } - .modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 10px; - font-family: 'Inter', sans-serif; - } - .modal-body { - flex-direction: column; - } - .close-icon { - cursor: pointer; - width: 20px; - height: 20px; - } - `; - - @property({ type: Boolean }) - open = false; - - @property({ type: Function }) - onClose: () => void = () => nothing; - - @property({ type: Function }) - onSourceClick?: (source?: SourceInfo) => void = undefined; - - @property() - mode = ThemeMode.Light; - - @property() - theme = Theme.Default; - - override render(): TemplateResult { - return html` - - -
-
-
-
Connect Wallet
-
- ${this.mode === ThemeMode.Light - ? LightCloseSvg - : DarkCloseSvg} -
-
-
- ${WalletSources.map( - (source) => - html``, - )} -
-
- - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'vwk-connect-modal': ConnectModal; - } -} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-fonts.ts b/packages/vanilla-wallet-kit/src/components/vwk-fonts.ts deleted file mode 100644 index 147b2f17..00000000 --- a/packages/vanilla-wallet-kit/src/components/vwk-fonts.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { LitElement, html } from 'lit'; -import type { TemplateResult } from 'lit'; -import { customElement } from 'lit/decorators.js'; - -@customElement('vwk-fonts') -class Fonts extends LitElement { - override render(): TemplateResult { - return html` - - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'vwk-fonts': Fonts; - } -} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-fonts/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-fonts/index.ts new file mode 100644 index 00000000..ae3c931f --- /dev/null +++ b/packages/vanilla-wallet-kit/src/components/vwk-fonts/index.ts @@ -0,0 +1,57 @@ +import type { TemplateResult } from 'lit'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('vwk-fonts') +export class Fonts extends LitElement { + override render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'vwk-fonts': Fonts; + } +} diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-source-card.ts b/packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts similarity index 92% rename from packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-source-card.ts rename to packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts index b3fcd811..a5cf923b 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-source-card.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts @@ -1,12 +1,12 @@ -import { LitElement, html, css } from 'lit'; import type { TemplateResult } from 'lit'; +import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { ThemeMode, Theme } from '@vechain/wallet-kit'; -import { Colors } from '../../constants'; +import { Theme, ThemeMode } from '@vechain/wallet-kit'; import type { SourceInfo } from '../../constants'; +import { Colors } from '../../constants'; @customElement('vwk-source-card') -class SourceCard extends LitElement { +export class SourceCard extends LitElement { static override styles = css` .card { padding: 16px; diff --git a/packages/vanilla-wallet-kit/src/index.ts b/packages/vanilla-wallet-kit/src/index.ts index 836ec15c..4f1cce44 100644 --- a/packages/vanilla-wallet-kit/src/index.ts +++ b/packages/vanilla-wallet-kit/src/index.ts @@ -1,2 +1 @@ -export * from './components'; export * from './client'; diff --git a/packages/wallet-connect/package.json b/packages/wallet-connect/package.json index f2db09f1..537bb748 100644 --- a/packages/wallet-connect/package.json +++ b/packages/wallet-connect/package.json @@ -7,9 +7,10 @@ "types": "./dist/index.d.ts", "scripts": { "build": "tsup src/index.ts --format cjs --dts", - "clean": "rm -rf dist node_modules .turbo", + "clean": "rm -rf dist .turbo", "dev": "tsup src/index.ts --format cjs --watch --dts", - "lint": "eslint src --ext .js,.jsx,.ts,.tsx" + "lint": "eslint src --ext .js,.jsx,.ts,.tsx", + "purge": "yarn clean && rm -rf node_modules" }, "dependencies": { "@walletconnect/modal": "2.6.2", diff --git a/packages/wallet-kit/package.json b/packages/wallet-kit/package.json index c57e5487..f3619693 100644 --- a/packages/wallet-kit/package.json +++ b/packages/wallet-kit/package.json @@ -10,8 +10,9 @@ "types": "./dist/index.d.ts", "scripts": { "build": "tsup src/index.ts --format cjs,esm --dts", - "clean": "rm -rf dist node_modules .turbo", + "clean": "rm -rf dist .turbo", "lint": "eslint src --ext .js,.jsx,.ts,.tsx", + "purge": "yarn clean && rm -rf node_modules", "watch": "tsup src/index.ts --format cjs,esm --watch --dts" }, "dependencies": { diff --git a/turbo.json b/turbo.json index beada213..71149fb5 100644 --- a/turbo.json +++ b/turbo.json @@ -5,6 +5,9 @@ "outputs": ["build/**", "dist/**"], "dependsOn": ["^build"] }, + "purge": { + "cache": false + }, "test": { "outputs": ["coverage/**"], "dependsOn": ["build"]