diff --git a/.github/workflows/publish-wallet-kit.yaml b/.github/workflows/publish-wallet-kit.yaml index 257fc4bb..120e091f 100644 --- a/.github/workflows/publish-wallet-kit.yaml +++ b/.github/workflows/publish-wallet-kit.yaml @@ -17,7 +17,7 @@ jobs: packages: write strategy: matrix: - package: [ wallet-kit,react-wallet-kit,wallet-connect,vanilla-wallet-kit ] + package: [ wallet-kit,react-wallet-kit,vanilla-wallet-kit ] steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 diff --git a/apps/sample-react-app/package.json b/apps/sample-react-app/package.json index 004fbfa1..b1408c86 100644 --- a/apps/sample-react-app/package.json +++ b/apps/sample-react-app/package.json @@ -42,7 +42,6 @@ "@vechain/web3-providers-connex": "^1.1.2", "@vechainfoundation/react-wallet-kit": "*", "@vechainfoundation/vanilla-wallet-kit": "*", - "@vechainfoundation/wallet-connect": "*", "@vechainfoundation/wallet-kit": "*", "buffer": "^6.0.3", "crypto-browserify": "^3.12.0", diff --git a/apps/sample-react-app/src/App.tsx b/apps/sample-react-app/src/App.tsx index e001d0c9..956397e6 100644 --- a/apps/sample-react-app/src/App.tsx +++ b/apps/sample-react-app/src/App.tsx @@ -1,7 +1,7 @@ import type { JSX } from 'react'; import React from 'react'; import type { Options } from '@vechain/connex'; -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; +import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit'; import { ConnexProvider } from '@vechainfoundation/react-wallet-kit'; import { ChakraProvider } from '@chakra-ui/react'; import { NavBar, StyledContainer } from './Components/layout'; diff --git a/apps/sample-vanilla-app/index.js b/apps/sample-vanilla-app/index.js index 903e15db..450f20b1 100644 --- a/apps/sample-vanilla-app/index.js +++ b/apps/sample-vanilla-app/index.js @@ -1,6 +1,6 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable no-undef */ -import { configureThorModal } from '@vechainfoundation/vanilla-wallet-kit'; +import { DAppKit } from '@vechainfoundation/vanilla-wallet-kit'; const walletConnectOptions = { projectId: 'a0b855ceaf109dbc8426479a4c3d38d8', @@ -18,4 +18,7 @@ const vechainWalletKitOptions = { walletConnectOptions, }; -configureThorModal(vechainWalletKitOptions); +const connex = DAppKit.configure(vechainWalletKitOptions); + +// eslint-disable-next-line no-console +console.log(`Connex configured`, connex.thor.genesis.id); diff --git a/apps/sample-vanilla-app/package.json b/apps/sample-vanilla-app/package.json index cec15176..f6fe0b00 100644 --- a/apps/sample-vanilla-app/package.json +++ b/apps/sample-vanilla-app/package.json @@ -8,7 +8,7 @@ "scripts": { "build": "parcel build index.html --public-url /vechain-dapp-kit/vanilla", "clean": "rm -rf dist", - "dev": "parcel index.html --open --port 3001", + "dev": "parcel index.html --open --no-cache --port 3001", "purge": "yarn clean && rm -rf node_modules", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/apps/sample-vue-app/src/connex/ConnexProvider.vue b/apps/sample-vue-app/src/connex/ConnexProvider.vue index e5cae1fc..ed1d5b84 100644 --- a/apps/sample-vue-app/src/connex/ConnexProvider.vue +++ b/apps/sample-vue-app/src/connex/ConnexProvider.vue @@ -2,7 +2,7 @@ import { defineComponent, provide, reactive, readonly, toRefs } from 'vue'; import { ConnectResponse, - MultiWalletConnex, + WalletConnectOptions, WalletSource, } from '@vechainfoundation/wallet-kit'; import type Connex from '@vechain/connex'; @@ -12,8 +12,7 @@ import { WalletStateSymbol, } from '@/connex/keys'; import { WalletActions, WalletState } from '@/connex/types'; -import { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; -import { configureThorModal } from '@vechainfoundation/vanilla-wallet-kit'; +import { DAppKit } from '@vechainfoundation/vanilla-wallet-kit'; const initWallets = (hasWcOptions: boolean) => { const wallets: WalletSource[] = ['sync2']; @@ -51,7 +50,7 @@ export default defineComponent({ account: null, }); - const connex = new MultiWalletConnex({ + const connex = DAppKit.configure({ nodeUrl: 'https://mainnet.vechain.org/', walletConnectOptions, }); @@ -68,8 +67,6 @@ export default defineComponent({ connex.wallet.onDisconnected(onDisconnected); connex.wallet.onSourceChanged(onSourceChanged); - configureThorModal(connex); - const setAccount = (addr: string) => { walletState.account = addr; }; diff --git a/packages/react-wallet-kit/README.md b/packages/react-wallet-kit/README.md index dab5ae3f..e573cc68 100644 --- a/packages/react-wallet-kit/README.md +++ b/packages/react-wallet-kit/README.md @@ -37,7 +37,7 @@ const nodeOptions: Omit = { - Optional: Configure wallet connect options ```typescript -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; +import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit'; const walletConnectOptions: WalletConnectOptions = { projectId: '', // Create your project here: https://cloud.walletconnect.com/sign-up diff --git a/packages/react-wallet-kit/package.json b/packages/react-wallet-kit/package.json index 29695986..0d885496 100644 --- a/packages/react-wallet-kit/package.json +++ b/packages/react-wallet-kit/package.json @@ -20,7 +20,6 @@ "@vechain/connex-framework": "2.1.0", "@vechain/picasso": "^2.1.1", "@vechainfoundation/vanilla-wallet-kit": "*", - "@vechainfoundation/wallet-connect": "*", "@vechainfoundation/wallet-kit": "*", "react-icons": "^4.11.0", "styled-components": "^6.1.0", diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx index be192aec..0b02dff7 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx +++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx @@ -14,7 +14,7 @@ export const ConnectButtonWithModal = ({ }: ConnectButtonWithModalProps) => { const { theme } = useContext(ThemeContext); - const handleSourceClick = (e: SourceInfo) => { + const handleSourceClick = (e: SourceInfo): void => { _connect(e.id); }; diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx index 90fc6141..0fbae4b6 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx +++ b/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx @@ -1,9 +1,8 @@ import type { HTMLChakraProps } from '@chakra-ui/react'; import React from 'react'; - import GlobalFonts from '../../assets/fonts/fonts'; -import { ThemeSelector } from './Components/ThemeSelector'; import { ThemeProvider } from '../provider/ThemeProvider'; +import { ThemeSelector } from './Components/ThemeSelector'; import { ConnectButtonWithModal } from './Components/ConnectButtonWithModal'; interface ConnectWalletButtonProps { diff --git a/packages/react-wallet-kit/src/types.ts b/packages/react-wallet-kit/src/types.ts index 319cf6ec..56291b34 100644 --- a/packages/react-wallet-kit/src/types.ts +++ b/packages/react-wallet-kit/src/types.ts @@ -1,8 +1,8 @@ import type { Options } from '@vechain/connex'; import type React from 'react'; -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; import type { ConnectResponse, + WalletConnectOptions, WalletSource, } from '@vechainfoundation/wallet-kit'; diff --git a/packages/vanilla-wallet-kit/README.md b/packages/vanilla-wallet-kit/README.md index 5c5bdc74..cf383f58 100644 --- a/packages/vanilla-wallet-kit/README.md +++ b/packages/vanilla-wallet-kit/README.md @@ -27,7 +27,7 @@ yarn add @vechainfoundation/vanilla-wallet-kit - In your root `index.ts` ```typescript -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; +import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit'; import type { Options } from '@vechain/connex'; import { configureThorModal } from '@vechainfoundation/vanilla-wallet-kit'; diff --git a/packages/vanilla-wallet-kit/index.js b/packages/vanilla-wallet-kit/index.js index 4e51aff2..a0b6578f 100644 --- a/packages/vanilla-wallet-kit/index.js +++ b/packages/vanilla-wallet-kit/index.js @@ -1,6 +1,6 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable no-undef */ -import { configureThorModal } from './dist'; +import { DAppKit } from './dist'; const walletConnectOptions = { projectId: 'a0b855ceaf109dbc8426479a4c3d38d8', @@ -18,4 +18,4 @@ const vechainWalletKitOptions = { walletConnectOptions, }; -configureThorModal(vechainWalletKitOptions); +DAppKit.configure(vechainWalletKitOptions); diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json index ac01a9f6..5e6fcbe6 100644 --- a/packages/vanilla-wallet-kit/package.json +++ b/packages/vanilla-wallet-kit/package.json @@ -17,14 +17,13 @@ "scripts": { "build": "tsup", "clean": "rm -rf dist .turbo", - "dev": "parcel index.html", + "dev": "parcel --no-cache index.html", "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": { - "@vechainfoundation/wallet-connect": "*", "@vechainfoundation/wallet-kit": "*", "@wagmi/core": "^1.4.5", "@web3modal/ethereum": "^2.7.1", diff --git a/packages/vanilla-wallet-kit/src/client.ts b/packages/vanilla-wallet-kit/src/client.ts index 7f3ceb01..95b6e19d 100644 --- a/packages/vanilla-wallet-kit/src/client.ts +++ b/packages/vanilla-wallet-kit/src/client.ts @@ -1,94 +1,33 @@ -import type { WalletSource } from '@vechainfoundation/wallet-kit'; +import type { ConnexOptions } from '@vechainfoundation/wallet-kit'; import { MultiWalletConnex } from '@vechainfoundation/wallet-kit'; -import type { ConnexOptions } from '@vechainfoundation/wallet-kit/src'; -import type { WCModal } from '@vechainfoundation/wallet-connect'; -import type { OpenOptions } from '@vechainfoundation/wallet-connect/src/types'; -import './components'; -import type { SourceInfo } from './constants'; +import { CustomWalletConnectModal } from './modal'; -export type VechainWalletKitOptions = MultiWalletConnex | ConnexOptions; +let connex: MultiWalletConnex | null = null; -class CustomWalletConnectModal implements WCModal { - openModal(options: OpenOptions): Promise { - const { uri } = options; - dispatchEvent(new CustomEvent('vwk-open-wc-modal', { detail: uri })); - return Promise.resolve(); - } - closeModal(): void { - // NOT USED because it is controlled from inside the component - // dispatchEvent(new CustomEvent('vwk-close-wc-modal')); - } - subscribeModal() { - // NOT USED because it is controlled from inside the component - // eslint-disable-next-line @typescript-eslint/no-empty-function - return (): void => {}; - } -} - -class VechainWalletKit { - connex: MultiWalletConnex; - account: string | null = null; - - constructor(options: VechainWalletKitOptions) { - if ('thor' in options) { - this.connex = options; - } else { - this.connex = new MultiWalletConnex( - this.addCustomWalletConnectModalIfNotPresent(options), - ); +const DAppKit = { + configure(options: ConnexOptions): MultiWalletConnex { + if (!options.customWcModal) { + options.customWcModal = CustomWalletConnectModal.getInstance(); } - } - - addCustomWalletConnectModalIfNotPresent( - options: ConnexOptions, - ): ConnexOptions { - return { - ...options, - customWcModal: - options.customWcModal || new CustomWalletConnectModal(), - }; - } - setSource = (wallet: WalletSource): void => { - this.connex.wallet.setSource(wallet); - }; -} + connex = new MultiWalletConnex(options); -class VechainWalletKitModal { - public walletKit: VechainWalletKit; + return connex; + }, - constructor(walletKit: VechainWalletKit) { - this.walletKit = walletKit; - } + get connex(): MultiWalletConnex { + if (!connex) { + // eslint-disable-next-line no-console + console.error('🚨🚨🚨 DAppKit not configured 🚨🚨🚨'); + throw new Error('DAppKit not configured'); + } - initModalListeners(): void { - addEventListener('vwk-source-card-clicked', (event) => { - const source = (event as CustomEvent).detail as SourceInfo; - this.walletKit.setSource(source.id); - this.walletKit.connex.wallet - .connect() - .then(({ account }) => { - this.walletKit.account = account; - }) - .catch((error) => { - // eslint-disable-next-line no-console - console.error(error); - }); - }); - const disconnect = (): void => { - this.walletKit.connex.wallet.disconnect().catch((error) => { - // eslint-disable-next-line no-console - console.error(error); - }); - }; - addEventListener('vwk-close-wc-modal', disconnect); - } -} + return connex; + }, -export const configureThorModal = ( - walletKitOptions: VechainWalletKitOptions, -): void => { - const vechainWalletKit = new VechainWalletKit(walletKitOptions); - const vechainWalletKitModal = new VechainWalletKitModal(vechainWalletKit); - vechainWalletKitModal.initModalListeners(); + get modal(): CustomWalletConnectModal { + return CustomWalletConnectModal.getInstance(); + }, }; + +export { DAppKit }; 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 54a7cc3a..5079763f 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 @@ -2,7 +2,8 @@ import type { TemplateResult } from 'lit'; import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; -import { SourceInfo } from '../../constants'; +import type { SourceInfo } from '../../constants'; +import { DAppKit } from '../../client'; @customElement('vwk-connect-button-with-modal') export class ConnectButtonWithModal extends LitElement { @@ -43,7 +44,9 @@ export class ConnectButtonWithModal extends LitElement { } private handleOpen = (): void => { - this.open = true; + DAppKit.connex.wallet.disconnect().finally(() => { + this.open = true; + }); }; private handleClose = (): void => { 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 ca980247..09843a0e 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 @@ -2,27 +2,23 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; +import type { OpenOptions } from '@vechainfoundation/wallet-kit/src'; import { + DarkChevronLeftSvg, DarkCloseSvg, - LightCloseSvg, LightChevronLeftSvg, - DarkChevronLeftSvg, + LightCloseSvg, } from '../../assets'; import type { SourceInfo } from '../../constants'; import { Colors, WalletSources } from '../../constants'; +import { + dispatchCustomEvent, + subscribeToCustomEvent, +} from '../../utils/events'; +import { DAppKit } from '../../client'; @customElement('vwk-connect-modal') export class ConnectModal extends LitElement { - constructor() { - super(); - addEventListener('vwk-open-wc-modal', (event) => { - const uri = (event as CustomEvent).detail as string; - this.walletConnectQRcode = uri; - }); - addEventListener('vwk-close-wc-modal', () => { - this.walletConnectQRcode = undefined; - }); - } static override styles = css` .modal-container { padding: 20px; @@ -42,6 +38,14 @@ export class ConnectModal extends LitElement { transition: width 2s, height 4s; } + .modal-footer { + display: flex; + justify-content: flex-end; + align-items: center; + padding-top: 10px; + font-family: 'Inter', sans-serif; + } + .icon { cursor: pointer; width: 25px; @@ -53,11 +57,34 @@ export class ConnectModal extends LitElement { .icon.LIGHT:hover { background-color: ${Colors.LightGrey}; } + .icon.DARK:hover { background-color: ${Colors.DarkGrey}; } - `; + 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.LightGrey}; + color: ${Colors.Dark}; + } + + button.DARK { + background-color: ${Colors.Dark}; + color: ${Colors.LightGrey}; + } + `; @property({ type: Boolean }) open = false; @property({ type: Function }) @@ -68,30 +95,46 @@ export class ConnectModal extends LitElement { theme = Theme.Default; @property() walletConnectQRcode?: string = undefined; + + constructor() { + super(); + + subscribeToCustomEvent('vwk-open-wc-modal', (options: OpenOptions) => { + this.open = true; + this.walletConnectQRcode = options.uri; + }); + + subscribeToCustomEvent('vwk-close-wc-modal', () => { + this.open = false; + this.walletConnectQRcode = undefined; + }); + } + + private get availableSources(): SourceInfo[] { + const availableSources = DAppKit.connex.wallet.getAvailableSources(); + + return WalletSources.filter((src) => { + return availableSources.includes(src.id); + }); + } + @property({ type: Function }) onClose: () => void = () => nothing; - private onBack = (): void => { - dispatchEvent(new CustomEvent('vwk-close-wc-modal')); - }; - private handleClose = (): void => { - this.onBack(); - this.onClose(); - }; - override render(): TemplateResult { return html` - - + -
-
- ${this.walletConnectQRcode - ? html`
+
+
+ ${ + this.walletConnectQRcode + ? html`
@@ -99,38 +142,52 @@ export class ConnectModal extends LitElement { ? LightChevronLeftSvg : DarkChevronLeftSvg}
` - : html`
`} -
Connect Wallet
-
` + } +
Connect Wallet
+
- ${this.mode === ThemeMode.Light + > + ${ + this.mode === ThemeMode.Light ? LightCloseSvg - : DarkCloseSvg} -
+ : DarkCloseSvg + }
-
- ${this.walletConnectQRcode - ? html` +
+ ${ + this.walletConnectQRcode + ? html` ` - : WalletSources.map( + : this.availableSources.map( (source) => html` `, - )} -
+ ) + }
- - `; + + + `; } + + private onBack = (): void => { + dispatchCustomEvent('vwk-close-wc-modal', undefined); + }; + + private handleClose = (): void => { + this.onBack(); + this.onClose(); + }; } declare global { diff --git a/packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts index ad0394fa..01024ee0 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-source-card/index.ts @@ -1,9 +1,11 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import type { WalletManager } from '@vechainfoundation/wallet-kit'; import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; import type { SourceInfo } from '../../constants'; import { Colors } from '../../constants'; +import { DAppKit } from '../../client'; @customElement('vwk-source-card') export class SourceCard extends LitElement { @@ -54,11 +56,26 @@ export class SourceCard extends LitElement { @property() source?: SourceInfo = undefined; + get wallet(): WalletManager { + return DAppKit.connex.wallet; + } + handleSourceClick(): void { this.onClick?.(this.source); - dispatchEvent( - new CustomEvent('vwk-source-card-clicked', { detail: this.source }), - ); + + if (this.source) { + this.wallet.setSource(this.source.id); + this.wallet + .connect() + .then((res) => { + // eslint-disable-next-line no-console + console.log('connected', res); + }) + .catch((e) => { + // eslint-disable-next-line no-console + console.error(e); + }); + } } override render(): TemplateResult { diff --git a/packages/vanilla-wallet-kit/src/modal.ts b/packages/vanilla-wallet-kit/src/modal.ts new file mode 100644 index 00000000..6a136da4 --- /dev/null +++ b/packages/vanilla-wallet-kit/src/modal.ts @@ -0,0 +1,61 @@ +// eslint-disable-next-line unicorn/prefer-node-protocol +import { EventEmitter } from 'events'; +import type { + OpenOptions, + SubscribeModalState, + WCModal, +} from '@vechainfoundation/wallet-kit'; +import { dispatchCustomEvent, subscribeToCustomEvent } from './utils/events'; + +const MODAL_STATE_EVENT = 'vwk-modal-state-change'; + +class CustomWalletConnectModal implements WCModal { + private static instance: CustomWalletConnectModal | null = null; + + private eventEmitter = new EventEmitter(); + + constructor() { + subscribeToCustomEvent('vwk-close-wc-modal', () => { + this.updateModalState({ open: false }); + }); + subscribeToCustomEvent('vwk-open-wc-modal', () => { + this.updateModalState({ open: true }); + }); + } + + static getInstance(): CustomWalletConnectModal { + if (!CustomWalletConnectModal.instance) { + CustomWalletConnectModal.instance = new CustomWalletConnectModal(); + } + + return CustomWalletConnectModal.instance; + } + + openModal(options: OpenOptions): Promise { + dispatchCustomEvent('vwk-open-wc-modal', options); + return Promise.resolve(); + } + + closeModal(): void { + dispatchCustomEvent('vwk-close-wc-modal', undefined); + } + + /** + * Subscribe to modal state change + */ + subscribeModal( + callback: (newState: SubscribeModalState) => void, + ): () => void { + this.eventEmitter.on(MODAL_STATE_EVENT, callback); + + return () => { + this.eventEmitter.off(MODAL_STATE_EVENT, callback); + }; + } + + updateModalState(state: SubscribeModalState): void { + this.eventEmitter.emit(MODAL_STATE_EVENT, state); + } +} + +export { CustomWalletConnectModal }; diff --git a/packages/vanilla-wallet-kit/src/utils/events.ts b/packages/vanilla-wallet-kit/src/utils/events.ts new file mode 100644 index 00000000..afdc74c8 --- /dev/null +++ b/packages/vanilla-wallet-kit/src/utils/events.ts @@ -0,0 +1,36 @@ +import type { OpenOptions } from '@vechainfoundation/wallet-kit'; + +export type EventTypes = 'vwk-open-wc-modal' | 'vwk-close-wc-modal'; + +export interface EventArgs { + 'vwk-close-wc-modal': undefined; + 'vwk-open-wc-modal': OpenOptions; +} + +export const dispatchCustomEvent = ( + type: T, + detail: EventArgs[T], +): void => { + const customEvent = new CustomEvent(type, { + detail, + }); + + dispatchEvent(customEvent); +}; + +export const subscribeToCustomEvent = ( + type: T, + callback: (detail: EventArgs[T]) => void, +): (() => void) => { + const handler = (ev: Event): void => { + const _ev = ev as CustomEvent; + + callback(_ev.detail); + }; + + addEventListener(type, handler); + + return () => { + removeEventListener(type, handler); + }; +}; diff --git a/packages/wallet-connect/.eslintrc.js b/packages/wallet-connect/.eslintrc.js deleted file mode 100644 index 28944eec..00000000 --- a/packages/wallet-connect/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -const Config = require('@vechain/repo-config'); - -module.exports = Config.EslintLibrary; diff --git a/packages/wallet-connect/README.md b/packages/wallet-connect/README.md deleted file mode 100644 index 5b2b07a2..00000000 --- a/packages/wallet-connect/README.md +++ /dev/null @@ -1,75 +0,0 @@ -# `@vechainfoundation/wallet-connect` - -## Usage - -- It is recommended to use `@vechainfoundation/wallet-kit` which includes this package. -- See it's usage here [README](../wallet-kit/README.md) for installation instructions. - -```bash -yarn add @vechainfoundation/wallet-connect -``` - -- Initialise your wallet connect options - -```typescript -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; - -const walletConnectOptions: WalletConnectOptions = { - projectId: '', // Create your project here: https://cloud.walletconnect.com/sign-up - metadata: { - name: 'My dApp', - description: 'My dApp description', - url: window.location.origin, // Your app URL - icons: [`${window.location.origin}/images/my-dapp-icon.png`], // Your app Icon - }, -}; -``` - -- Create your wallet connect client - -```typescript -import { - createWcClient, - newWcSigner, - createWcModal, -} from '@vechainfoundation/wallet-connect'; -import type { - WCModal, - WCSigner, - WCClient, -} from '@vechainfoundation/wallet-connect'; - -// Optional -const myCustomModal: WCModal | undefined = { - //... your custom modal -}; - -/** - * Handle disconnect - * - users can disconnect remotely in their wallet - */ -const onDisconnected = () => { - //... your disconnect handler -}; - -const { projectId, metadata } = walletConnectOptions; - -// client's are cached by projectId -const wcClient: WCClient = createWcClient({ - projectId, - metadata, -}); - -// createWcModal caches the modal by projectId -const web3Modal: WCModal = customWcModal - ? customWcModal - : createWcModal(projectId); - -// newWcSigner does not cache the signer -const signer: WCSigner = newWcSigner({ - genesisId, // the genesis Id of your network - wcClient, - web3Modal, - onDisconnected, -}); -``` diff --git a/packages/wallet-connect/package.json b/packages/wallet-connect/package.json deleted file mode 100644 index 91a44dcb..00000000 --- a/packages/wallet-connect/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "@vechainfoundation/wallet-connect", - "version": "0.0.0", - "private": false, - "license": "MIT", - "main": "./dist/index.js", - "types": "./dist/index.d.ts", - "scripts": { - "build": "tsup src/index.ts --format cjs,esm --dts", - "clean": "rm -rf dist .turbo", - "dev": "tsup src/index.ts --format cjs,esm --watch --dts", - "lint": "eslint src --ext .js,.jsx,.ts,.tsx", - "purge": "yarn clean && rm -rf node_modules" - }, - "dependencies": { - "@walletconnect/modal": "2.6.2", - "@walletconnect/sign-client": "2.10.2", - "@walletconnect/utils": "2.10.2" - }, - "devDependencies": { - "@vechain/connex-types": "2.1.0", - "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1", - "@walletconnect/types": "2.10.2", - "eslint": "*", - "tsup": "*", - "typescript": "*" - } -} diff --git a/packages/wallet-connect/tsconfig.json b/packages/wallet-connect/tsconfig.json deleted file mode 100644 index 2cc7cae7..00000000 --- a/packages/wallet-connect/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "@vechain/repo-config/src/tsconfig/base.json", - "include": ["."], - "exclude": ["dist", "node_modules"] -} diff --git a/packages/wallet-kit/README.md b/packages/wallet-kit/README.md index b86c39ae..3447c5e8 100644 --- a/packages/wallet-kit/README.md +++ b/packages/wallet-kit/README.md @@ -26,7 +26,7 @@ yarn add @vechainfoundation/wallet-kit - Optional: Configure wallet connect options ```typescript -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; +import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit'; const walletConnectOptions: WalletConnectOptions = { projectId: '', // Create your project here: https://cloud.walletconnect.com/sign-up diff --git a/packages/wallet-kit/package.json b/packages/wallet-kit/package.json index a1ee622d..cfa310c0 100644 --- a/packages/wallet-kit/package.json +++ b/packages/wallet-kit/package.json @@ -15,7 +15,9 @@ "@vechain/connex": "2.1.0", "@vechain/connex-driver": "2.1.0", "@vechain/connex-framework": "2.1.0", - "@vechainfoundation/wallet-connect": "*", + "@walletconnect/modal": "2.6.2", + "@walletconnect/sign-client": "2.10.2", + "@walletconnect/utils": "2.10.2", "events": "^3.3.0", "thor-devkit": "^2.0.9" }, @@ -23,6 +25,7 @@ "@types/react": "^18.2.28", "@types/react-dom": "^18.2.13", "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1", + "@walletconnect/types": "2.10.2", "eslint": "*", "tsup": "*", "typescript": "*" diff --git a/packages/wallet-kit/src/create-wallet.ts b/packages/wallet-kit/src/create-wallet.ts index 65e892fd..0d25f134 100644 --- a/packages/wallet-kit/src/create-wallet.ts +++ b/packages/wallet-kit/src/create-wallet.ts @@ -1,9 +1,5 @@ -import { - createWcClient, - createWcModal, - newWcSigner, -} from '@vechainfoundation/wallet-connect'; import { createSync, createSync2 } from '@vechain/connex/esm/signer'; +import { createWcClient, createWcModal, newWcSigner } from './wallet-connect'; import type { ConnexOptions, ConnexWallet, WalletSource } from './types'; import { CertificateBasedWallet } from './wallets/certificate-wallet'; import { WCWallet } from './wallets/wc-wallet'; diff --git a/packages/wallet-kit/src/index.ts b/packages/wallet-kit/src/index.ts index caba88af..03725739 100644 --- a/packages/wallet-kit/src/index.ts +++ b/packages/wallet-kit/src/index.ts @@ -2,6 +2,7 @@ export * from './connex'; export * from './wallet'; export * from './constants'; export * from './wallet-manager'; +export * from './wallet-connect'; export type { ConnexOptions, diff --git a/packages/wallet-kit/src/types.d.ts b/packages/wallet-kit/src/types.d.ts index 062bf304..d21c9849 100644 --- a/packages/wallet-kit/src/types.d.ts +++ b/packages/wallet-kit/src/types.d.ts @@ -1,6 +1,6 @@ import type { Connex1 } from '@vechain/connex/esm/signer'; -import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect'; -import type { WCModal } from '@vechainfoundation/wallet-connect/src'; +import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit'; +import type { WCModal } from './wallet-connect'; declare global { interface Window { diff --git a/packages/wallet-connect/src/client.ts b/packages/wallet-kit/src/wallet-connect/client.ts similarity index 100% rename from packages/wallet-connect/src/client.ts rename to packages/wallet-kit/src/wallet-connect/client.ts diff --git a/packages/wallet-connect/src/constants.ts b/packages/wallet-kit/src/wallet-connect/constants.ts similarity index 100% rename from packages/wallet-connect/src/constants.ts rename to packages/wallet-kit/src/wallet-connect/constants.ts diff --git a/packages/wallet-connect/src/index.ts b/packages/wallet-kit/src/wallet-connect/index.ts similarity index 88% rename from packages/wallet-connect/src/index.ts rename to packages/wallet-kit/src/wallet-connect/index.ts index d2eb1c03..61ed556b 100644 --- a/packages/wallet-connect/src/index.ts +++ b/packages/wallet-kit/src/wallet-connect/index.ts @@ -9,6 +9,8 @@ export type { ResolvedSignClient, WCClient, WCModal, + OpenOptions, + SubscribeModalState, } from './types'; export { newWcSigner, createWcModal, createWcClient }; diff --git a/packages/wallet-connect/src/signer.ts b/packages/wallet-kit/src/wallet-connect/signer.ts similarity index 97% rename from packages/wallet-connect/src/signer.ts rename to packages/wallet-kit/src/wallet-connect/signer.ts index 31dff2c0..0150184e 100644 --- a/packages/wallet-connect/src/signer.ts +++ b/packages/wallet-kit/src/wallet-connect/signer.ts @@ -161,15 +161,17 @@ export const newWcSigner = ({ } return await new Promise((resolve, reject) => { - web3Modal.subscribeModal((ev) => { + const endSubscription = web3Modal.subscribeModal((ev) => { if (!ev.open) { reject(new Error('User closed modal')); + endSubscription(); } }); approval() .then((newSession) => { session = newSession; + endSubscription(); resolve(newSession); }) .catch(reject); @@ -187,7 +189,7 @@ export const newWcSigner = ({ }); _client.on('session_delete', () => { - if (onDisconnected) onDisconnected(); + onDisconnected(); disconnect().catch(() => { throw new Error('Failed to disconnect'); }); diff --git a/packages/wallet-connect/src/types.d.ts b/packages/wallet-kit/src/wallet-connect/types.d.ts similarity index 97% rename from packages/wallet-connect/src/types.d.ts rename to packages/wallet-kit/src/wallet-connect/types.d.ts index 15cec8ac..00e58755 100644 --- a/packages/wallet-connect/src/types.d.ts +++ b/packages/wallet-kit/src/wallet-connect/types.d.ts @@ -47,7 +47,7 @@ export interface WalletConnectOptions { * Options for the {@link WCModal} * @param open - Whether the modal is open */ -interface SubscribeModalState { +export interface SubscribeModalState { open: boolean; } @@ -55,7 +55,7 @@ interface SubscribeModalState { * Options for opening the {@link WCModal} * @param uri - The WalletConnect URI to display / open */ -interface OpenOptions { +export interface OpenOptions { uri: string; } diff --git a/packages/wallet-connect/src/web3-modal.ts b/packages/wallet-kit/src/wallet-connect/web3-modal.ts similarity index 100% rename from packages/wallet-connect/src/web3-modal.ts rename to packages/wallet-kit/src/wallet-connect/web3-modal.ts diff --git a/packages/wallet-kit/src/wallet-manager.ts b/packages/wallet-kit/src/wallet-manager.ts index 0db463dd..c6b3f1ae 100644 --- a/packages/wallet-kit/src/wallet-manager.ts +++ b/packages/wallet-kit/src/wallet-manager.ts @@ -1,4 +1,5 @@ -import { EventEmitter } from 'node:events'; +// eslint-disable-next-line unicorn/prefer-node-protocol +import { EventEmitter } from 'events'; import type { ConnectResponse, ConnexOptions, diff --git a/packages/wallet-kit/src/wallets/wc-wallet.ts b/packages/wallet-kit/src/wallets/wc-wallet.ts index 0524eee0..3c5ac167 100644 --- a/packages/wallet-kit/src/wallets/wc-wallet.ts +++ b/packages/wallet-kit/src/wallets/wc-wallet.ts @@ -1,4 +1,4 @@ -import type { WCSigner } from '@vechainfoundation/wallet-connect'; +import type { WCSigner } from '../wallet-connect'; import type { ConnectResponse, ConnexWallet } from '../types'; class WCWallet implements ConnexWallet { diff --git a/yarn.lock b/yarn.lock index eb048611..85717e7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6158,7 +6158,7 @@ thor-devkit "^2.0.5" validator-ts "^0.9.1" -"@vechain/connex-types@2.1.0", "@vechain/connex-types@^2.0.2", "@vechain/connex-types@^2.1.0": +"@vechain/connex-types@^2.0.2", "@vechain/connex-types@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@vechain/connex-types/-/connex-types-2.1.0.tgz#5a4d97554f659532a0ec00a09e5cf25244c55c8a" integrity sha512-8NtOHAO+idy5llrYEmuArWTkwYbwG/FEWqkRScz1f6QuaGvkkj+93IuAnp9E89Pi+kV3t2DKBTaF6mpPjjTmHg==