From dbe61c29aedeceb793dd0d411128d29e5f5493ab Mon Sep 17 00:00:00 2001 From: Darren Kelly <107671032+darrenvechain@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:40:37 +0000 Subject: [PATCH] feat: allow custom button for connecting (#74) * feat: allow custom button for connecting * fix: private constructors * fix: theme types * fix: linting typescript * fix: merge main * fix: connect wallet not working * fix: fix ts issues --- .../src/Components/SwitchWalletButton.tsx | 22 ++++++- packages/react-wallet-kit/README.md | 57 ++++++++++++++++++- packages/react-wallet-kit/package.json | 2 +- .../Components/ConnectButtonWithModal.tsx | 11 ++-- .../Wrapped/ConnectModalWithButtonWrapped.tsx | 0 .../ConnectWalletButton.tsx | 8 +-- .../ConnectWalletButtonWithModal}/index.ts | 0 .../ConnectWalletModal/ConnectWalletModal.tsx | 49 ++++++++++++++++ .../Components/ConnectWalletModal/index.ts | 1 + .../Components/ThemeSelector.tsx | 5 +- .../react-wallet-kit/src/Components/index.ts | 2 + .../Constants/Constants.ts | 41 ------------- .../ConnectWalletButton/Constants/index.ts | 1 - .../react-wallet-kit/src/ConnexProvider.tsx | 53 +++++++++++++++-- packages/react-wallet-kit/src/index.tsx | 2 +- .../src/provider/ThemeProvider.tsx | 35 +++++++++--- packages/react-wallet-kit/src/types.ts | 4 ++ packages/vanilla-wallet-kit/package.json | 2 +- packages/vanilla-wallet-kit/src/client.ts | 6 +- .../components/base/vwk-base-modal/index.ts | 7 +-- .../vwk-connect-button-with-modal/index.ts | 29 +++++++--- .../components/vwk-connect-button/index.ts | 6 +- .../src/components/vwk-connect-modal/index.ts | 28 +++++---- .../src/components/vwk-source-card/index.ts | 20 +------ .../vwk-wallet-connect-qrcode/index.ts | 39 ++++++------- .../vanilla-wallet-kit/src/constants/index.ts | 1 + .../vanilla-wallet-kit/src/constants/theme.ts | 3 + packages/vanilla-wallet-kit/src/modal.ts | 33 +++++++++-- .../vanilla-wallet-kit/src/utils/events.ts | 17 +++++- packages/wallet-kit/package.json | 2 +- .../wallet-kit/src/constants/enums/index.ts | 1 - .../wallet-kit/src/constants/enums/theme.ts | 8 --- packages/wallet-kit/src/constants/index.ts | 1 - packages/wallet-kit/src/index.ts | 1 - 34 files changed, 336 insertions(+), 161 deletions(-) rename packages/react-wallet-kit/src/{ConnectWalletButton => Components/ConnectWalletButtonWithModal}/Components/ConnectButtonWithModal.tsx (88%) rename packages/react-wallet-kit/src/{ConnectWalletButton => Components/ConnectWalletButtonWithModal}/Components/Wrapped/ConnectModalWithButtonWrapped.tsx (100%) rename packages/react-wallet-kit/src/{ConnectWalletButton => Components/ConnectWalletButtonWithModal}/ConnectWalletButton.tsx (68%) rename packages/react-wallet-kit/src/{ConnectWalletButton => Components/ConnectWalletButtonWithModal}/index.ts (100%) create mode 100644 packages/react-wallet-kit/src/Components/ConnectWalletModal/ConnectWalletModal.tsx create mode 100644 packages/react-wallet-kit/src/Components/ConnectWalletModal/index.ts rename packages/react-wallet-kit/src/{ConnectWalletButton => }/Components/ThemeSelector.tsx (70%) create mode 100644 packages/react-wallet-kit/src/Components/index.ts delete mode 100644 packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts delete mode 100644 packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts create mode 100644 packages/vanilla-wallet-kit/src/constants/theme.ts delete mode 100644 packages/wallet-kit/src/constants/enums/index.ts delete mode 100644 packages/wallet-kit/src/constants/enums/theme.ts delete mode 100644 packages/wallet-kit/src/constants/index.ts diff --git a/apps/sample-react-app/src/Components/SwitchWalletButton.tsx b/apps/sample-react-app/src/Components/SwitchWalletButton.tsx index 39bd163e..e6fb5627 100644 --- a/apps/sample-react-app/src/Components/SwitchWalletButton.tsx +++ b/apps/sample-react-app/src/Components/SwitchWalletButton.tsx @@ -1,10 +1,12 @@ import type { HTMLChakraProps } from '@chakra-ui/react'; -import { useDisclosure } from '@chakra-ui/react'; +import { Button, Icon, useDisclosure } from '@chakra-ui/react'; import React from 'react'; import { - ConnectWalletButton, + ConnectWalletModal, useWallet, + useWalletModal, } from '@vechainfoundation/react-wallet-kit'; +import { WalletIcon } from '@heroicons/react/24/solid'; import { AccountDetailModal } from './AccountDetailModal'; import { AddressButton } from './AddressButton'; @@ -19,6 +21,8 @@ export const SwitchWalletButton: React.FC = ({ const { account, source } = useWallet(); + const { open } = useWalletModal(); + if (account && source) return ( <> @@ -37,5 +41,17 @@ export const SwitchWalletButton: React.FC = ({ ); - return ; + return ( + <> + + + + + ); }; diff --git a/packages/react-wallet-kit/README.md b/packages/react-wallet-kit/README.md index e573cc68..8cd93ffa 100644 --- a/packages/react-wallet-kit/README.md +++ b/packages/react-wallet-kit/README.md @@ -23,8 +23,6 @@ yarn build yarn add @vechainfoundation/react-wallet-kit ``` -- Create the node options - ```typescript import type { Options } from '@vechain/connex'; @@ -89,3 +87,58 @@ const { account } = await connect(); //Start using Connex thor/ vendor const { vendor, thor } = useConnex(); ``` + +### UI Option 1: Modal + Button + +- Use the `ConnectWalletButton` component to display a modal with the available wallets + +```typescript jsx +import { ConnectWalletButton } from '@vechainfoundation/react-wallet-kit'; +import { useWallet } from '@vechainfoundation/react-wallet-kit'; + +const MyComponent = (): JSX.Element => { + const { account } = useWallet(); + + useEffect(() => { + if (account) { + // account connected!! + } + }, [account]); + + return ( + <> + + + ); +}; +``` + +### Option 2: Modal + Custom Button + +- Use the `ConnectWalletModal` component to display a modal with the available wallets + +```typescript jsx +import { + ConnectWalletModal, + useWallet, + useWalletModal, +} from '@vechainfoundation/react-wallet-kit'; + +export const MyComponent = (): JSX.Element => { + const { account } = useWallet(); + const { open, close } = useWalletModal(); + + useEffect(() => { + if (account) { + // account connected!! + } + }, [account]); + + return ( + <> + + + + ); +}; +``` diff --git a/packages/react-wallet-kit/package.json b/packages/react-wallet-kit/package.json index 0d885496..c0d140d2 100644 --- a/packages/react-wallet-kit/package.json +++ b/packages/react-wallet-kit/package.json @@ -10,7 +10,7 @@ "build": "tsup src/index.tsx --format cjs --dts --external react", "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": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx", "purge": "yarn clean && rm -rf node_modules" }, "dependencies": { diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx b/packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx similarity index 88% rename from packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx rename to packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx index 39f0d1f8..c248eeb6 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx +++ b/packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx @@ -1,9 +1,8 @@ -import type { ReactNode } from 'react'; import { useCallback, useContext, useState } from 'react'; import type { WalletSource } from '@vechainfoundation/wallet-kit'; import type { SourceInfo } from '@vechainfoundation/vanilla-wallet-kit'; -import { ThemeContext } from '../../provider/ThemeProvider'; -import { useWallet } from '../../ConnexProvider'; +import { ThemeContext } from '../../../provider/ThemeProvider'; +import { useWallet } from '../../../ConnexProvider'; import { ConnectModalWithButtonWrapped } from './Wrapped/ConnectModalWithButtonWrapped'; interface ConnectButtonWithModalProps { @@ -12,10 +11,12 @@ interface ConnectButtonWithModalProps { export const ConnectButtonWithModal = ({ onClose, -}: ConnectButtonWithModalProps): ReactNode => { +}: ConnectButtonWithModalProps) => { const { theme } = useContext(ThemeContext); - const handleSourceClick = (e: SourceInfo): void => { + const handleSourceClick = (e: SourceInfo | undefined): void => { + if (!e) return; + _connect(e.id); }; diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/Wrapped/ConnectModalWithButtonWrapped.tsx b/packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx similarity index 100% rename from packages/react-wallet-kit/src/ConnectWalletButton/Components/Wrapped/ConnectModalWithButtonWrapped.tsx rename to packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx b/packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/ConnectWalletButton.tsx similarity index 68% rename from packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx rename to packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/ConnectWalletButton.tsx index 0fbae4b6..ee8f3220 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx +++ b/packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/ConnectWalletButton.tsx @@ -1,15 +1,15 @@ import type { HTMLChakraProps } from '@chakra-ui/react'; import React from 'react'; -import GlobalFonts from '../../assets/fonts/fonts'; -import { ThemeProvider } from '../provider/ThemeProvider'; -import { ThemeSelector } from './Components/ThemeSelector'; +import GlobalFonts from '../../../assets/fonts/fonts'; +import { ThemeProvider } from '../../provider/ThemeProvider'; +import { ThemeSelector } from '../ThemeSelector'; import { ConnectButtonWithModal } from './Components/ConnectButtonWithModal'; interface ConnectWalletButtonProps { buttonProps?: HTMLChakraProps<'button'>; } -export const ConnectWalletButton: React.FC< +export const ConnectWalletButtonWithModal: React.FC< ConnectWalletButtonProps > = (): React.ReactElement => { return ( diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/index.ts b/packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/index.ts similarity index 100% rename from packages/react-wallet-kit/src/ConnectWalletButton/index.ts rename to packages/react-wallet-kit/src/Components/ConnectWalletButtonWithModal/index.ts diff --git a/packages/react-wallet-kit/src/Components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/react-wallet-kit/src/Components/ConnectWalletModal/ConnectWalletModal.tsx new file mode 100644 index 00000000..108da46f --- /dev/null +++ b/packages/react-wallet-kit/src/Components/ConnectWalletModal/ConnectWalletModal.tsx @@ -0,0 +1,49 @@ +import React, { useCallback } from 'react'; +import type { WalletSource } from '@vechainfoundation/wallet-kit'; +import type { SourceInfo } from '@vechainfoundation/vanilla-wallet-kit'; +import { ConnectModal } from '@vechainfoundation/vanilla-wallet-kit'; +import { createComponent } from '@lit/react'; +import GlobalFonts from '../../../assets/fonts/fonts'; +import { ThemeProvider } from '../../provider/ThemeProvider'; +import { ThemeSelector } from '../ThemeSelector'; +import { useWallet } from '../../ConnexProvider'; + +export const ConnectModalWrapped = createComponent({ + tagName: 'vwk-connect-modal', + elementClass: ConnectModal, + react: React, +}); + +export const ConnectWalletModal: React.FC = (): React.ReactElement => { + const { setSource, connect, setAccount } = useWallet(); + + const connectHandler = useCallback( + async (source: WalletSource) => { + setSource(source); + + const { account } = await connect(); + + setAccount(account); + }, + [connect, setAccount, setSource], + ); + + const _connect = useCallback( + (source?: SourceInfo) => { + if (source) { + connectHandler(source.id).catch(() => { + // do nothing + }); + } + }, + [connectHandler], + ); + + return ( + + + + + + ); +}; diff --git a/packages/react-wallet-kit/src/Components/ConnectWalletModal/index.ts b/packages/react-wallet-kit/src/Components/ConnectWalletModal/index.ts new file mode 100644 index 00000000..423a5eae --- /dev/null +++ b/packages/react-wallet-kit/src/Components/ConnectWalletModal/index.ts @@ -0,0 +1 @@ +export * from './ConnectWalletModal'; diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx b/packages/react-wallet-kit/src/Components/ThemeSelector.tsx similarity index 70% rename from packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx rename to packages/react-wallet-kit/src/Components/ThemeSelector.tsx index ce303345..af7fa8ee 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx +++ b/packages/react-wallet-kit/src/Components/ThemeSelector.tsx @@ -1,14 +1,13 @@ // ThemeSelector.js -import type { ReactNode } from 'react'; import React, { useContext } from 'react'; // eslint-disable-next-line import/no-named-as-default import styled from 'styled-components'; -import { ThemeContext } from '../../provider/ThemeProvider'; +import { ThemeContext } from '../provider/ThemeProvider'; const Button = styled.button``; -const ThemeSelector = (): ReactNode => { +const ThemeSelector = () => { const { toggleTheme } = useContext(ThemeContext); return ; diff --git a/packages/react-wallet-kit/src/Components/index.ts b/packages/react-wallet-kit/src/Components/index.ts new file mode 100644 index 00000000..925ebed8 --- /dev/null +++ b/packages/react-wallet-kit/src/Components/index.ts @@ -0,0 +1,2 @@ +export * from './ConnectWalletModal'; +export * from './ConnectWalletButtonWithModal'; diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts deleted file mode 100644 index 2e6b462b..00000000 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type { WalletSource } from '@vechainfoundation/wallet-kit'; -import { - Sync2Logo, - SyncLogo, - VeWorldLogo, - WalletConnectLogo, -} from '@vechainfoundation/vanilla-wallet-kit'; - -interface SourceInfo { - name: string; - logo: string; -} - -export const WalletSources: Record = { - 'wallet-connect': { - name: 'Wallet Connect', - logo: WalletConnectLogo, - }, - 'veworld-extension': { - name: 'VeWorld Extension', - logo: VeWorldLogo, - }, - sync: { - name: 'Sync', - logo: SyncLogo, - }, - sync2: { - name: 'Sync 2', - logo: Sync2Logo, - }, -}; - -// themes.js - -export const lightTheme = { - mode: 'LIGHT', -}; - -export const darkTheme = { - mode: 'DARK', -}; diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts deleted file mode 100644 index a719bffa..00000000 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Constants'; diff --git a/packages/react-wallet-kit/src/ConnexProvider.tsx b/packages/react-wallet-kit/src/ConnexProvider.tsx index d700b26b..e8a3dcd1 100644 --- a/packages/react-wallet-kit/src/ConnexProvider.tsx +++ b/packages/react-wallet-kit/src/ConnexProvider.tsx @@ -7,7 +7,7 @@ import React, { useState, } from 'react'; import type { WalletSource } from '@vechainfoundation/wallet-kit'; -import { MultiWalletConnex } from '@vechainfoundation/wallet-kit'; +import { DAppKit } from '@vechainfoundation/vanilla-wallet-kit'; import type { ConnexContext, ConnexProviderOptions } from './types'; const STORAGE_PREFIX = '@vechainfoundation/wallet-kit'; @@ -26,7 +26,9 @@ const remove = (key: 'source' | 'account'): void => { /** * Context */ -const Context = createContext({} as ConnexContext); +const ConnexProviderContext = createContext( + undefined, +); export const ConnexProvider: React.FC = ({ children, @@ -43,7 +45,7 @@ export const ConnexProvider: React.FC = ({ const connex = useMemo( () => - new MultiWalletConnex({ + DAppKit.configure({ nodeUrl: nodeOptions.node, genesis: nodeOptions.network, walletConnectOptions, @@ -137,6 +139,14 @@ export const ConnexProvider: React.FC = ({ [persistState], ); + const openModal = useCallback(() => { + DAppKit.modal.open(); + }, []); + + const closeModal = useCallback(() => { + DAppKit.modal.close(); + }, []); + const context: ConnexContext = useMemo(() => { return { connex: { @@ -152,6 +162,10 @@ export const ConnexProvider: React.FC = ({ account, source, }, + modal: { + open: openModal, + close: closeModal, + }, }; }, [ connex.thor, @@ -163,17 +177,44 @@ export const ConnexProvider: React.FC = ({ availableWallets, account, source, + closeModal, + openModal, ]); - return {children}; + return ( + + {children} + + ); }; export const useConnex = (): ConnexContext['connex'] => { - const context = useContext(Context); + const context = useContext(ConnexProviderContext); + + if (!context) { + throw new Error('"useConnex" must be used within a ConnexProvider'); + } + return context.connex; }; export const useWallet = (): ConnexContext['wallet'] => { - const context = useContext(Context); + const context = useContext(ConnexProviderContext); + + if (!context) { + throw new Error('"useWallet" must be used within a ConnexProvider'); + } + return context.wallet; }; + +export const useWalletModal = (): ConnexContext['modal'] => { + const context = useContext(ConnexProviderContext); + + if (!context) { + throw new Error( + '"useWalletModal" must be used within a ConnexProvider', + ); + } + return context.modal; +}; diff --git a/packages/react-wallet-kit/src/index.tsx b/packages/react-wallet-kit/src/index.tsx index efd9ac66..5586f8cd 100644 --- a/packages/react-wallet-kit/src/index.tsx +++ b/packages/react-wallet-kit/src/index.tsx @@ -3,4 +3,4 @@ import * as React from 'react'; export * from './ConnexProvider'; export * from './types'; -export * from './ConnectWalletButton'; +export * from './Components'; diff --git a/packages/react-wallet-kit/src/provider/ThemeProvider.tsx b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx index 197ee333..2c1a1905 100644 --- a/packages/react-wallet-kit/src/provider/ThemeProvider.tsx +++ b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx @@ -1,23 +1,40 @@ // ThemeProvider.js import type { ReactNode } from 'react'; -import React, { useState, createContext } from 'react'; +import React, { createContext, useState } from 'react'; import { ThemeProvider as StyledThemeProvider } from 'styled-components'; -import { lightTheme, darkTheme } from '../ConnectWalletButton/Constants'; +import type { ThemeMode } from '@vechainfoundation/vanilla-wallet-kit'; -const ThemeContext = createContext({ - theme: lightTheme, +interface Theme { + mode: ThemeMode; +} + +interface ContextProperties { + theme: Theme; + toggleTheme: () => void; +} + +const defaultTheme: Theme = { + mode: 'LIGHT', +}; + +const ThemeContext = createContext({ + theme: defaultTheme, // eslint-disable-next-line @typescript-eslint/no-empty-function toggleTheme: () => {}, }); -const ThemeProvider = ({ children }: { children: ReactNode }): ReactNode => { - const [currentTheme, setCurrentTheme] = useState(lightTheme); +const ThemeProvider = ({ children }: { children: ReactNode }) => { + const [currentTheme, setCurrentTheme] = useState(defaultTheme); const toggleTheme = (): void => { - setCurrentTheme((prevTheme) => - prevTheme === lightTheme ? darkTheme : lightTheme, - ); + setCurrentTheme((prevTheme) => { + if (prevTheme.mode === 'LIGHT') { + return { mode: 'DARK' }; + } + + return { mode: 'LIGHT' }; + }); }; return ( diff --git a/packages/react-wallet-kit/src/types.ts b/packages/react-wallet-kit/src/types.ts index 56291b34..381f808d 100644 --- a/packages/react-wallet-kit/src/types.ts +++ b/packages/react-wallet-kit/src/types.ts @@ -45,4 +45,8 @@ export interface ConnexContext { account: string | null; source: WalletSource | null; }; + modal: { + open: () => void; + close: () => void; + }; } diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json index 5e6fcbe6..b6c68cd1 100644 --- a/packages/vanilla-wallet-kit/package.json +++ b/packages/vanilla-wallet-kit/package.json @@ -19,7 +19,7 @@ "clean": "rm -rf dist .turbo", "dev": "parcel --no-cache index.html", "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write", - "lint": "eslint 'src/**/*.ts'", + "lint": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx", "purge": "yarn clean && rm -rf node_modules", "watch": "tsup --watch" }, diff --git a/packages/vanilla-wallet-kit/src/client.ts b/packages/vanilla-wallet-kit/src/client.ts index 95b6e19d..42155572 100644 --- a/packages/vanilla-wallet-kit/src/client.ts +++ b/packages/vanilla-wallet-kit/src/client.ts @@ -1,6 +1,6 @@ import type { ConnexOptions } from '@vechainfoundation/wallet-kit'; import { MultiWalletConnex } from '@vechainfoundation/wallet-kit'; -import { CustomWalletConnectModal } from './modal'; +import { CustomWalletConnectModal, DAppKitModal } from './modal'; let connex: MultiWalletConnex | null = null; @@ -25,8 +25,8 @@ const DAppKit = { return connex; }, - get modal(): CustomWalletConnectModal { - return CustomWalletConnectModal.getInstance(); + get modal(): DAppKitModal { + return DAppKitModal.getInstance(); }, }; 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 f3a76025..5ba42946 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,8 +1,8 @@ import type { TemplateResult } from 'lit'; import { LitElement, css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; import { Breakpoint, Colors } from '../../../constants'; +import type { Theme, ThemeMode } from '../../../constants/theme'; @customElement('vwk-base-modal') export class Modal extends LitElement { @@ -55,13 +55,12 @@ export class Modal extends LitElement { } } `; - @property({ type: Boolean }) open = false; @property() - mode = ThemeMode.Light; + mode: ThemeMode = 'LIGHT'; @property() - theme = Theme.Default; + theme: Theme = 'DEFAULT'; @property({ type: Function }) onClose = (): null => null; 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 5079763f..cbb8ed06 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,8 +1,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 type { SourceInfo } from '../../constants'; +import type { WalletManager } from '@vechainfoundation/wallet-kit'; +import type { SourceInfo, Theme, ThemeMode } from '../../constants'; import { DAppKit } from '../../client'; @customElement('vwk-connect-button-with-modal') @@ -10,17 +10,32 @@ export class ConnectButtonWithModal extends LitElement { @property() override title = 'Connect Wallet'; - @property({ type: ThemeMode }) - mode = ThemeMode.Light; + @property({ type: String }) + mode: ThemeMode = 'LIGHT'; - @property({ type: Theme }) - theme = Theme.Default; + @property({ type: String }) + theme: Theme = 'DEFAULT'; @property({ type: Boolean }) open = false; + private get wallet(): WalletManager { + return DAppKit.connex.wallet; + } + @property({ type: Function }) - onSourceClick?: (e: SourceInfo) => void; + onSourceClick = (source?: SourceInfo): void => { + if (source) { + this.wallet.setSource(source.id); + this.wallet + .connect() + // eslint-disable-next-line no-console + .then((res) => console.log(res)) + .finally(() => { + this.open = false; + }); + } + }; override render(): TemplateResult { return html` 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 cf9cc217..cc384362 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,8 +1,8 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; import { Colors } from '../../constants'; +import type { Theme, ThemeMode } from '../../constants/theme'; @customElement('vwk-connect-button') export class ConnectButton extends LitElement { @@ -35,10 +35,10 @@ export class ConnectButton extends LitElement { override title = 'Connect Wallet'; @property() - mode = ThemeMode.Light; + mode: ThemeMode = 'LIGHT'; @property() - theme = Theme.Default; + theme: Theme = 'DEFAULT'; @property({ type: Function }) onClick? = undefined; 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 3f878546..a436b790 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,18 +1,18 @@ 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 type { OpenOptions } from '@vechainfoundation/wallet-kit'; +import type { SourceInfo } from '../../constants'; +import { Colors, WalletSources } from '../../constants'; import { DarkChevronLeftSvg, DarkCloseSvg, LightChevronLeftSvg, LightCloseSvg, } from '../../assets'; -import type { SourceInfo } from '../../constants'; -import { Colors, WalletSources } from '../../constants'; import { dispatchCustomEvent, subscribeToCustomEvent } from '../../utils'; import { DAppKit } from '../../client'; +import type { Theme, ThemeMode } from '../../constants/theme'; @customElement('vwk-connect-modal') export class ConnectModal extends LitElement { @@ -87,9 +87,9 @@ export class ConnectModal extends LitElement { @property({ type: Function }) onSourceClick?: (source?: SourceInfo) => void = undefined; @property() - mode = ThemeMode.Light; + mode: ThemeMode = 'LIGHT'; @property() - theme = Theme.Default; + theme: Theme = 'DEFAULT'; @property() walletConnectQRcode?: string = undefined; @@ -105,6 +105,14 @@ export class ConnectModal extends LitElement { this.open = false; this.walletConnectQRcode = undefined; }); + + subscribeToCustomEvent('vwk-open-wallet-modal', () => { + this.open = true; + }); + + subscribeToCustomEvent('vwk-close-wallet-modal', () => { + this.open = false; + }); } private get availableSources(): SourceInfo[] { @@ -135,7 +143,7 @@ export class ConnectModal extends LitElement { class="icon back-icon ${this.mode}" @click=${this.onBack} > - ${this.mode === ThemeMode.Light + ${this.mode === 'LIGHT' ? LightChevronLeftSvg : DarkChevronLeftSvg} ` @@ -146,11 +154,7 @@ export class ConnectModal extends LitElement { class="icon close-icon ${this.mode}" @click=${this.handleClose} > - ${ - this.mode === ThemeMode.Light - ? LightCloseSvg - : DarkCloseSvg - } + ${this.mode === 'LIGHT' ? LightCloseSvg : DarkCloseSvg}
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 01024ee0..f03a45e5 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 @@ -2,10 +2,10 @@ 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'; +import type { Theme, ThemeMode } from '../../constants/theme'; @customElement('vwk-source-card') export class SourceCard extends LitElement { @@ -48,10 +48,10 @@ export class SourceCard extends LitElement { onClick?: (source?: SourceInfo) => void = undefined; @property() - mode = ThemeMode.Light; + mode: ThemeMode = 'LIGHT'; @property() - theme = Theme.Default; + theme: Theme = 'DEFAULT'; @property() source?: SourceInfo = undefined; @@ -62,20 +62,6 @@ export class SourceCard extends LitElement { handleSourceClick(): void { this.onClick?.(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/components/vwk-wallet-connect-qrcode/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-wallet-connect-qrcode/index.ts index 53246ccf..6377773f 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-wallet-connect-qrcode/index.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-wallet-connect-qrcode/index.ts @@ -1,10 +1,10 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement, nothing, svg } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; -import { WalletConnectLogo, DarkCopySvg, LightCopySvg } from '../../assets'; import { Colors } from '../../constants'; +import { DarkCopySvg, LightCopySvg, WalletConnectLogo } from '../../assets'; import { QrCodeUtil } from '../../utils'; +import type { Theme, ThemeMode } from '../../constants/theme'; @customElement('vwk-wallet-connect-qrcode') export class WalletConnectQrCode extends LitElement { @@ -15,6 +15,7 @@ export class WalletConnectQrCode extends LitElement { justify-content: center; display: flex; } + .qrcode-container { margin: 20px auto 30px auto; background-color: ${Colors.White}; @@ -72,26 +73,12 @@ export class WalletConnectQrCode extends LitElement { `; @property() - mode = ThemeMode.Light; + mode: ThemeMode = 'LIGHT'; @property() - theme = Theme.Default; + theme: Theme = 'DEFAULT'; @property() walletConnectQRcode?: string = undefined; - private onCopy = async (): Promise => { - await navigator.clipboard.writeText(this.walletConnectQRcode || ''); - }; - - private svgWCQrCode(uri: string): TemplateResult { - const size = 280; - - return svg` - - ${QrCodeUtil.generate(uri, size, size / 4)} - - `; - } - override render(): TemplateResult | typeof nothing { return this.walletConnectQRcode ? html` @@ -105,7 +92,7 @@ export class WalletConnectQrCode extends LitElement { @click=${this.onCopy} >
- ${this.mode === ThemeMode.Light + ${this.mode === 'LIGHT' ? LightCopySvg : DarkCopySvg}
@@ -115,6 +102,20 @@ export class WalletConnectQrCode extends LitElement { ` : nothing; } + + private onCopy = async (): Promise => { + await navigator.clipboard.writeText(this.walletConnectQRcode || ''); + }; + + private svgWCQrCode(uri: string): TemplateResult { + const size = 280; + + return svg` + + ${QrCodeUtil.generate(uri, size, size / 4)} + + `; + } } declare global { diff --git a/packages/vanilla-wallet-kit/src/constants/index.ts b/packages/vanilla-wallet-kit/src/constants/index.ts index 129fc84e..c5002e5c 100644 --- a/packages/vanilla-wallet-kit/src/constants/index.ts +++ b/packages/vanilla-wallet-kit/src/constants/index.ts @@ -2,3 +2,4 @@ export * from './colors'; export * from './sources'; export * from './breakpoint'; +export * from './theme'; diff --git a/packages/vanilla-wallet-kit/src/constants/theme.ts b/packages/vanilla-wallet-kit/src/constants/theme.ts new file mode 100644 index 00000000..035fa9a4 --- /dev/null +++ b/packages/vanilla-wallet-kit/src/constants/theme.ts @@ -0,0 +1,3 @@ +export type ThemeMode = 'LIGHT' | 'DARK'; + +export type Theme = 'DEFAULT'; diff --git a/packages/vanilla-wallet-kit/src/modal.ts b/packages/vanilla-wallet-kit/src/modal.ts index 869cbcc1..923cb6cf 100644 --- a/packages/vanilla-wallet-kit/src/modal.ts +++ b/packages/vanilla-wallet-kit/src/modal.ts @@ -14,7 +14,7 @@ class CustomWalletConnectModal implements WCModal { private eventEmitter = new EventEmitter(); - constructor() { + private constructor() { subscribeToCustomEvent('vwk-close-wc-modal', () => { this.updateModalState({ open: false }); }); @@ -31,6 +31,9 @@ class CustomWalletConnectModal implements WCModal { return CustomWalletConnectModal.instance; } + /** + * WalletConnect + */ openModal(options: OpenOptions): Promise { dispatchCustomEvent('vwk-open-wc-modal', options); return Promise.resolve(); @@ -40,9 +43,6 @@ class CustomWalletConnectModal implements WCModal { dispatchCustomEvent('vwk-close-wc-modal', undefined); } - /** - * Subscribe to modal state change - */ subscribeModal( callback: (newState: SubscribeModalState) => void, ): () => void { @@ -53,9 +53,32 @@ class CustomWalletConnectModal implements WCModal { }; } - updateModalState(state: SubscribeModalState): void { + private updateModalState(state: SubscribeModalState): void { this.eventEmitter.emit(MODAL_STATE_EVENT, state); } } +export class DAppKitModal { + private static instance: DAppKitModal | null = null; + + // eslint-disable-next-line @typescript-eslint/no-empty-function + private constructor() {} + + public static getInstance(): DAppKitModal { + if (!DAppKitModal.instance) { + DAppKitModal.instance = new DAppKitModal(); + } + + return DAppKitModal.instance; + } + + open(): void { + dispatchCustomEvent('vwk-open-wallet-modal', undefined); + } + + close(): void { + dispatchCustomEvent('vwk-close-wallet-modal', undefined); + } +} + export { CustomWalletConnectModal }; diff --git a/packages/vanilla-wallet-kit/src/utils/events.ts b/packages/vanilla-wallet-kit/src/utils/events.ts index afdc74c8..292a6c52 100644 --- a/packages/vanilla-wallet-kit/src/utils/events.ts +++ b/packages/vanilla-wallet-kit/src/utils/events.ts @@ -1,10 +1,23 @@ import type { OpenOptions } from '@vechainfoundation/wallet-kit'; +import type { ThemeMode } from '../constants'; -export type EventTypes = 'vwk-open-wc-modal' | 'vwk-close-wc-modal'; +export type EventTypes = + | 'vwk-open-wc-modal' + | 'vwk-close-wc-modal' + | 'vwk-open-wallet-modal' + | 'vwk-close-wallet-modal'; + +type ThemeOptions = + | undefined + | { + theme?: ThemeMode; + }; export interface EventArgs { 'vwk-close-wc-modal': undefined; - 'vwk-open-wc-modal': OpenOptions; + 'vwk-open-wc-modal': OpenOptions & ThemeOptions; + 'vwk-open-wallet-modal': ThemeOptions; + 'vwk-close-wallet-modal': undefined; } export const dispatchCustomEvent = ( diff --git a/packages/wallet-kit/package.json b/packages/wallet-kit/package.json index cfa310c0..2118ebc6 100644 --- a/packages/wallet-kit/package.json +++ b/packages/wallet-kit/package.json @@ -7,7 +7,7 @@ "scripts": { "build": "tsup src/index.ts --format cjs,esm --dts", "clean": "rm -rf dist .turbo", - "lint": "eslint src --ext .js,.jsx,.ts,.tsx", + "lint": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx", "purge": "yarn clean && rm -rf node_modules", "watch": "tsup src/index.ts --format cjs,esm --watch --dts" }, diff --git a/packages/wallet-kit/src/constants/enums/index.ts b/packages/wallet-kit/src/constants/enums/index.ts deleted file mode 100644 index 7b1f54ec..00000000 --- a/packages/wallet-kit/src/constants/enums/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './theme'; diff --git a/packages/wallet-kit/src/constants/enums/theme.ts b/packages/wallet-kit/src/constants/enums/theme.ts deleted file mode 100644 index 36a697e8..00000000 --- a/packages/wallet-kit/src/constants/enums/theme.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const ThemeMode = { - Light: 'LIGHT', - Dark: 'DARK', -}; - -export const Theme = { - Default: 'DEFAULT', -}; diff --git a/packages/wallet-kit/src/constants/index.ts b/packages/wallet-kit/src/constants/index.ts deleted file mode 100644 index 14790857..00000000 --- a/packages/wallet-kit/src/constants/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './enums'; diff --git a/packages/wallet-kit/src/index.ts b/packages/wallet-kit/src/index.ts index 03725739..2af3eaf9 100644 --- a/packages/wallet-kit/src/index.ts +++ b/packages/wallet-kit/src/index.ts @@ -1,6 +1,5 @@ export * from './connex'; export * from './wallet'; -export * from './constants'; export * from './wallet-manager'; export * from './wallet-connect';