Skip to content

Commit

Permalink
refactor: removed WC package, and refactor events (#70)
Browse files Browse the repository at this point in the history
* refactor: removed WC package, and refactor events

* fix: remove bad package

* fix: disconnect when opening modal

* fix: only show available sources
  • Loading branch information
darrenvechain authored Nov 10, 2023
1 parent b457675 commit eae93c8
Show file tree
Hide file tree
Showing 38 changed files with 285 additions and 282 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/publish-wallet-kit.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion apps/sample-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion apps/sample-react-app/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
7 changes: 5 additions & 2 deletions apps/sample-vanilla-app/index.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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);
2 changes: 1 addition & 1 deletion apps/sample-vanilla-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
9 changes: 3 additions & 6 deletions apps/sample-vue-app/src/connex/ConnexProvider.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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'];
Expand Down Expand Up @@ -51,7 +50,7 @@ export default defineComponent({
account: null,
});
const connex = new MultiWalletConnex({
const connex = DAppKit.configure({
nodeUrl: 'https://mainnet.vechain.org/',
walletConnectOptions,
});
Expand All @@ -68,8 +67,6 @@ export default defineComponent({
connex.wallet.onDisconnected(onDisconnected);
connex.wallet.onSourceChanged(onSourceChanged);
configureThorModal(connex);
const setAccount = (addr: string) => {
walletState.account = addr;
};
Expand Down
2 changes: 1 addition & 1 deletion packages/react-wallet-kit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const nodeOptions: Omit<Options, 'signer'> = {
- Optional: Configure wallet connect options

```typescript
import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect';
import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit';

const walletConnectOptions: WalletConnectOptions = {
projectId: '<PROJECT_ID>', // Create your project here: https://cloud.walletconnect.com/sign-up
Expand Down
1 change: 0 additions & 1 deletion packages/react-wallet-kit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const ConnectButtonWithModal = ({
}: ConnectButtonWithModalProps) => {
const { theme } = useContext(ThemeContext);

const handleSourceClick = (e: SourceInfo) => {
const handleSourceClick = (e: SourceInfo): void => {
_connect(e.id);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-wallet-kit/src/types.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion packages/vanilla-wallet-kit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
4 changes: 2 additions & 2 deletions packages/vanilla-wallet-kit/index.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -18,4 +18,4 @@ const vechainWalletKitOptions = {
walletConnectOptions,
};

configureThorModal(vechainWalletKitOptions);
DAppKit.configure(vechainWalletKitOptions);
3 changes: 1 addition & 2 deletions packages/vanilla-wallet-kit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
107 changes: 23 additions & 84 deletions packages/vanilla-wallet-kit/src/client.ts
Original file line number Diff line number Diff line change
@@ -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<void> {
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 };
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 => {
Expand Down
Loading

0 comments on commit eae93c8

Please sign in to comment.