diff --git a/packages/dapp-kit-ui/index.html b/packages/dapp-kit-ui/index.html index c2efc80f..3071e131 100644 --- a/packages/dapp-kit-ui/index.html +++ b/packages/dapp-kit-ui/index.html @@ -9,7 +9,7 @@ diff --git a/packages/dapp-kit-ui/src/components/connect-modal.ts b/packages/dapp-kit-ui/src/components/connect-modal.ts index 4800c9b3..732ba4d6 100644 --- a/packages/dapp-kit-ui/src/components/connect-modal.ts +++ b/packages/dapp-kit-ui/src/components/connect-modal.ts @@ -11,7 +11,7 @@ import { LightChevronLeftSvg, LightCloseSvg, } from '../assets'; -import { subscribeToCustomEvent } from '../utils'; +import { isMobile, subscribeToCustomEvent } from '../utils'; import { DAppKitUI } from '../client'; import type { Theme, ThemeMode } from '../constants/theme'; import type { DappKitContext } from './provider'; @@ -62,6 +62,8 @@ export class ConnectModal extends LitElement { @property({ type: Boolean }) open = false; + @property({ type: Boolean }) + openingVeWorld = false; @property() mode: ThemeMode = 'LIGHT'; @property() @@ -73,6 +75,15 @@ export class ConnectModal extends LitElement { super(); subscribeToCustomEvent('vwk-open-wc-modal', (options: OpenOptions) => { + if (isMobile()) { + this.openingVeWorld = true; + window.open( + `veworld://app.veworld?uri=${encodeURIComponent( + options.uri, + )}`, + '_self', + ); + } this.open = true; this.walletConnectQRcode = options.uri; }); @@ -80,6 +91,7 @@ export class ConnectModal extends LitElement { subscribeToCustomEvent('vwk-close-wc-modal', () => { this.open = false; this.walletConnectQRcode = undefined; + this.openingVeWorld = false; }); subscribeToCustomEvent('vwk-open-wallet-modal', () => { @@ -155,6 +167,7 @@ export class ConnectModal extends LitElement { ${ this.walletConnectQRcode ? html` -
- ${this.svgWCQrCode(this.walletConnectQRcode)} - -
-
-
-
or
-
-
- - - ` - : nothing; + + Get VeWorld + ` + : nothing} +
+
+
or
+
+
+ + + `; } private onCopy = async (): Promise => { @@ -130,12 +184,62 @@ export class WalletConnectQrCode extends LitElement { }, 1000); }; - private svgWCQrCode(uri: string): TemplateResult { - const size = 280; + private getVeWorld = (): void => { + if (isAndroid()) { + window.open(ANDROID_STORE_URL, '_self'); + } else { + window.open(IOS_STORE_URL, '_self'); + } + }; + + private svgLoaderTemplate(): TemplateResult { + const ICON_SIZE = 88; + const DH_ARRAY = 317; + const DH_OFFSET = 425; + const radius = '8'; + let numRadius = 0; + + if (radius.includes('%')) { + numRadius = (ICON_SIZE / 100) * parseInt(radius, 10); + } else { + numRadius = parseInt(radius, 10); + } + + numRadius *= 1.17; + const dashArray = DH_ARRAY - numRadius * 1.57; + const dashOffset = DH_OFFSET - numRadius * 1.8; + + return html` + + + + + `; + } + private svgWCQrCode(uri?: string): TemplateResult | typeof nothing { + if (!uri) { + return nothing; + } return svg` - - ${QrCodeUtil.generate(uri, size, size / 4)} + + ${QrCodeUtil.generate(uri, qrCodeSize, qrCodeSize / 4)} `; } diff --git a/packages/dapp-kit-ui/src/modal.ts b/packages/dapp-kit-ui/src/modal.ts index df9cf10e..afa7ca97 100644 --- a/packages/dapp-kit-ui/src/modal.ts +++ b/packages/dapp-kit-ui/src/modal.ts @@ -9,7 +9,7 @@ import type { } from '@vechainfoundation/dapp-kit'; import { DAppKitLogger } from '@vechainfoundation/dapp-kit'; import { subscribeKey } from 'valtio/utils'; -import { dispatchCustomEvent, isMobile, subscribeToCustomEvent } from './utils'; +import { dispatchCustomEvent, subscribeToCustomEvent } from './utils'; const MODAL_STATE_EVENT = 'vwk-modal-state-change'; @@ -40,27 +40,6 @@ class CustomWalletConnectModal implements WCModal { */ openModal(options: OpenOptions): Promise { DAppKitLogger.debug('CustomWalletConnectModal', 'opening the modal'); - - if (isMobile()) { - window.open( - `veworld://app.veworld?uri=${encodeURIComponent(options.uri)}`, - '_self', - ); - // TODO: commented out for now, as it's not working as expected, maybe a modal item is better - // const linkingTime = new Date().getTime(); - // const TIMEOUT = 5000; - // setTimeout(() => { - // const now = new Date().getTime(); - // // avoid redirecting to the store if coming back from the app - // if (now - linkingTime < TIMEOUT + 250) { - // if (isAndroid()) { - // window.open(ANDROID_STORE_URL, '_self'); - // } else { - // window.open(IOS_STORE_URL, '_self'); - // } - // } - // }, TIMEOUT); - } dispatchCustomEvent('vwk-open-wc-modal', options); return Promise.resolve(); }