Skip to content

Commit

Permalink
feat: connex implementation for vanilla js (#51)
Browse files Browse the repository at this point in the history
  • Loading branch information
davidecarpini authored Nov 6, 2023
1 parent 4c52395 commit 349941c
Show file tree
Hide file tree
Showing 15 changed files with 775 additions and 52 deletions.
31 changes: 25 additions & 6 deletions apps/sample-vanilla-app/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,26 @@
import '@vechain/vanilla-wallet-kit';
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable no-undef */
import {
VechainWalletKit,
VechainWalletKitModal,
} from '@vechain/vanilla-wallet-kit';

// eslint-disable-next-line no-undef
addEventListener('vwk-source-card-clicked', (e) => {
// eslint-disable-next-line no-console
console.log('vwk-source-card-clicked', e.detail);
});
const walletConnectOptions = {
projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
metadata: {
name: 'Sample VeChain dApp',
description: 'A sample VeChain dApp',
url: window.location.origin,
icons: [`${window.location.origin}/images/logo/my-dapp.png`],
},
};

const vechainWalletKitOptions = {
node: 'https://testnet.vechain.org/',
network: 'test',
walletConnectOptions,
};

const walletKit = new VechainWalletKit(vechainWalletKitOptions);
const vechainWalletKit = new VechainWalletKitModal(walletKit);
vechainWalletKit.initModalListeners();
2 changes: 1 addition & 1 deletion packages/vanilla-wallet-kit/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>
<body>
<vwk-connect-button-with-modal
mode="DARK"
mode="LIGHT"
></vwk-connect-button-with-modal>
</body>
</html>
6 changes: 5 additions & 1 deletion packages/vanilla-wallet-kit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@
},
"dependencies": {
"@vechain/wallet-kit": "*",
"lit": "^3.0.0"
"@wagmi/core": "^1.4.5",
"@web3modal/ethereum": "^2.7.1",
"@web3modal/html": "^2.7.1",
"lit": "^3.0.0",
"viem": "^1.18.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.25.0",
Expand Down
67 changes: 67 additions & 0 deletions packages/vanilla-wallet-kit/src/client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import type { WalletSource } from '@vechain/wallet-kit';
import { MultiWalletConnex } from '@vechain/wallet-kit';
import type { SourceInfo } from './constants';

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 class VechainWalletKit {
connex: MultiWalletConnex;
account: string | null = null;

constructor(options: VechainWalletKitOptions) {
if (options.connex) {
this.connex = options.connex;
} else {
this.connex = new MultiWalletConnex({
nodeUrl: options.nodeUrl,
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
genesis: options.network as any,

Check warning on line 32 in packages/vanilla-wallet-kit/src/client.ts

View workflow job for this annotation

GitHub Actions / Lint, Build & Test

Unexpected any. Specify a different type
walletConnectOptions: options.walletConnectOptions,
onDisconnected: options.onDisconnected,
});
}
}

setSource = (wallet: WalletSource): void => {
this.connex.wallet.setSource(wallet);
};
}

export class VechainWalletKitModal {
public walletKit: VechainWalletKit;
constructor(walletKit: VechainWalletKit) {
this.walletKit = walletKit;
}

initModalListeners(): void {
addEventListener('vwk-source-card-clicked', (event) => {
const source = (event as CustomEvent).detail as SourceInfo;
// eslint-disable-next-line no-console
console.log('vwk-source-card-clicked', source);
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);
});
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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 '../../../wallet-kit';
import { Colors } from '../../../constants';

@customElement('vwk-base-modal')
class Modal extends LitElement {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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 '../../wallet-kit';
import { Colors } from '../../constants';

@customElement('vwk-connect-button')
class ConnectButton extends LitElement {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ 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 '../../wallet-kit';
import type { SourceInfo } from '../../wallet-kit';
import { WalletSources } from '../../constants';
import type { SourceInfo } from '../../constants';

@customElement('vwk-connect-modal')
class ConnectModal extends LitElement {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ 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 '../../wallet-kit';
import type { SourceInfo } from '../../wallet-kit';
import { Colors } from '../../constants';
import type { SourceInfo } from '../../constants';

@customElement('vwk-source-card')
class SourceCard extends LitElement {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
SyncLogo,
VeWorldLogo,
WalletConnectLogo,
} from '../../../assets';
} from '../../assets';

enum WalletSource {
WalletConnect = 'wallet-connect',
Expand All @@ -13,7 +13,7 @@ enum WalletSource {
}

export interface SourceInfo {
id: string;
id: WalletSource;
name: string;
logo: string;
}
Expand Down
1 change: 1 addition & 0 deletions packages/vanilla-wallet-kit/src/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './components';
export * from './client';
2 changes: 0 additions & 2 deletions packages/vanilla-wallet-kit/src/wallet-kit/index.ts

This file was deleted.

Loading

0 comments on commit 349941c

Please sign in to comment.