From 6cdbf435ba9b48f6ebac67cb865fb5c005165b68 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 12:10:00 +0300 Subject: [PATCH 01/23] feat: tma socials --- packages/appkit/src/client.ts | 51 ++++++++++++- packages/core/src/utils/CoreHelperUtil.ts | 73 ++++++++++++++++--- .../partials/w3m-social-login-list/index.ts | 4 +- .../partials/w3m-social-login-widget/index.ts | 16 +++- .../scaffold-ui/src/utils/ConstantsUtil.ts | 3 +- packages/wallet/src/W3mFrameConstants.ts | 3 +- 6 files changed, 133 insertions(+), 17 deletions(-) diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index 746c7b7056..efb019b263 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -6,7 +6,8 @@ import type { ConnectedWalletInfo, RouterControllerState, ChainAdapter, - SdkVersion + SdkVersion, + AccountControllerState } from '@reown/appkit-core' import { AccountController, @@ -77,6 +78,7 @@ export class AppKit { this.adapter = options.adapters?.[0] as ChainAdapter this.initControllers(options) this.initOrContinue() + this.checkExistingConnection() } public static getInstance() { @@ -551,4 +553,51 @@ export class AppKit { return this.initPromise } + + private async checkExistingConnection() { + try { + console.log('checkExistingConnection...') + if (!CoreHelperUtil.isTelegram()) { + console.log('non Telegram env, returning..') + } + const socialProviderToConnect = localStorage.getItem( + 'socialProvider' + ) as AccountControllerState['socialProvider'] + if (!socialProviderToConnect) { + console.log('no socialProvider, returning..') + + return + } + const url = new URL(window.location.href) + const resultUri = url.searchParams.get('result_uri') + if (!resultUri) { + console.log('no resultUri, returning..') + + return + } + AccountController.setSocialProvider( + socialProviderToConnect, + ChainController.state.activeChain + ) + const authConnector = ConnectorController.getAuthConnector() + console.log('socialProvider', socialProviderToConnect) + console.log('authConnector', authConnector) + if (socialProviderToConnect && authConnector) { + await authConnector.provider.connectSocial(resultUri) + await ConnectionController.connectExternal(authConnector, authConnector.chain) + EventsController.sendEvent({ + type: 'track', + event: 'SOCIAL_LOGIN_SUCCESS', + properties: { provider: socialProviderToConnect } + }) + } + } catch (error) { + console.error('checkExistingConnection error', error) + } + const url = new URL(window.location.href) + // Remove the 'result_uri' parameter + url.searchParams.delete('result_uri') + // Update the URL without reloading the page + window.history.replaceState({}, document.title, url.toString()) + } } diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts index cab2dfefd7..0e79442f34 100644 --- a/packages/core/src/utils/CoreHelperUtil.ts +++ b/packages/core/src/utils/CoreHelperUtil.ts @@ -128,7 +128,10 @@ export const CoreHelperUtil = { href: safeAppUrl } }, - getOpenTargetForPlatform(target: string) { + getOpenTargetForPlatform(target: string, forceTarget = false) { + if (forceTarget) { + return target + } // Only '_blank' deeplinks work in Telegram context if (this.isTelegram()) { return '_blank' @@ -136,16 +139,22 @@ export const CoreHelperUtil = { return target }, - openHref(href: string, target: '_blank' | '_self' | 'popupWindow', features?: string) { - window.open(href, this.getOpenTargetForPlatform(target), features || 'noreferrer noopener') + openHref( + href: string, + target: '_blank' | '_self' | 'popupWindow', + features = 'noreferrer noopener', + forceTarget = false + ) { + window.open(href, this.getOpenTargetForPlatform(target, forceTarget), features) }, - returnOpenHref(href: string, target: '_blank' | '_self' | 'popupWindow', features?: string) { - return window.open( - href, - this.getOpenTargetForPlatform(target), - features || 'noreferrer noopener' - ) + returnOpenHref( + href: string, + target: '_blank' | '_self' | 'popupWindow', + features = 'noreferrer noopener', + forceTarget = false + ) { + return window.open(href, this.getOpenTargetForPlatform(target, forceTarget), features) }, isTelegram() { @@ -159,6 +168,52 @@ export const CoreHelperUtil = { Boolean((window as any).TelegramWebviewProxyProto)) ) }, + formatTelegramSocialLoginUrl(url: string) { + const valueToInject = `-${encodeURIComponent(window.location.href)}` + const paramToInject = 'state=' + const parsedUrl = new URL(url) + if (parsedUrl.host === 'auth.magic.link') { + const providerParam = 'provider_authorization_url=' + const providerUrl = url.substring(url.indexOf(providerParam) + providerParam.length) + const resultUrl = this.injectIntoUrl( + decodeURIComponent(providerUrl), + paramToInject, + valueToInject + ) + console.log('resultUrl', resultUrl) + console.log('full parsedUrl', encodeURIComponent(resultUrl)) + + return url.replace(providerUrl, encodeURIComponent(resultUrl)) + } + + return this.injectIntoUrl(url, paramToInject, valueToInject) + }, + injectIntoUrl(url: string, key: string, appendString: string) { + // Find the position of "key" e.g. "state=" in the URL + const keyIndex = url.indexOf(key) + + if (keyIndex === -1) { + throw new Error(`${key} parameter not found in the URL: ${url}`) + } + + // Find the position of the next "&" after "key" + const keyEndIndex = url.indexOf('&', keyIndex) + const keyLength = key.length + // If there is no "&" after key, it means "key" is the last parameter + const keyParamEnd = keyEndIndex !== -1 ? keyEndIndex : url.length + // Extract the part of the URL before the key value + const beforeKeyValue = url.substring(0, keyIndex + keyLength) + // Extract the current key value + const currentKeyValue = url.substring(keyIndex + keyLength, keyParamEnd) + // Extract the part of the URL after the key value + const afterKeyValue = url.substring(keyEndIndex) + // Append the new string to the key value + const newKeyValue = currentKeyValue + appendString + // Reconstruct the URL with the appended key value + const newUrl = beforeKeyValue + newKeyValue + afterKeyValue + + return newUrl + }, async preloadImage(src: string) { const imagePromise = new Promise((resolve, reject) => { diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index 2fabdf7205..379ff92e34 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -109,10 +109,12 @@ export class W3mSocialLoginList extends LitElement { const { uri } = await authConnector.provider.getSocialRedirectUri({ provider: socialProvider }) - if (this.popupWindow && uri) { AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain) this.popupWindow.location.href = uri + } else if (CoreHelperUtil.isTelegram() && uri) { + const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri) + CoreHelperUtil.openHref(parsedUri, '_self', '', true) } else { this.popupWindow?.close() throw new Error('Something went wrong') diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 77340272e0..6a8c862c0f 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { AccountController, ChainController, @@ -165,6 +166,7 @@ export class W3mSocialLoginWidget extends LitElement { } async onSocialClick(socialProvider?: SocialProvider) { + console.log('onSocialClick', socialProvider) if (socialProvider) { AccountController.setSocialProvider(socialProvider, ChainController.state.activeChain) @@ -192,29 +194,37 @@ export class W3mSocialLoginWidget extends LitElement { } } else { RouterController.push('ConnectingSocial') - const authConnector = ConnectorController.getAuthConnector() this.popupWindow = CoreHelperUtil.returnOpenHref( '', 'popupWindow', 'width=600,height=800,scrollbars=yes' ) - + console.log('popupWindow', this.popupWindow) try { if (authConnector && socialProvider) { const { uri } = await authConnector.provider.getSocialRedirectUri({ provider: socialProvider }) - if (this.popupWindow && uri) { AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain) this.popupWindow.location.href = uri + } else if (CoreHelperUtil.isTelegram() && uri) { + console.log('plain uri', uri) + + const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri) + console.log('parsedUri', parsedUri) + + CoreHelperUtil.openHref(parsedUri, '_self', '', true) + + localStorage.setItem('socialProvider', socialProvider) } else { this.popupWindow?.close() throw new Error('Something went wrong') } } } catch (error) { + console.error('onSocialClick error', error) this.popupWindow?.close() SnackController.showError('Something went wrong') } diff --git a/packages/scaffold-ui/src/utils/ConstantsUtil.ts b/packages/scaffold-ui/src/utils/ConstantsUtil.ts index 7e6ba337ba..e993767a4e 100644 --- a/packages/scaffold-ui/src/utils/ConstantsUtil.ts +++ b/packages/scaffold-ui/src/utils/ConstantsUtil.ts @@ -1,7 +1,6 @@ export const ConstantsUtil = { ACCOUNT_TABS: [{ label: 'Tokens' }, { label: 'NFTs' }, { label: 'Activity' }], - SECURE_SITE_ORIGIN: - process.env['NEXT_PUBLIC_SECURE_SITE_ORIGIN'] || 'https://secure.walletconnect.org', + SECURE_SITE_ORIGIN: 'https://secure-appkit-git-chore-tma-support-reown-com.vercel.app', VIEW_DIRECTION: { Next: 'next', Prev: 'prev' diff --git a/packages/wallet/src/W3mFrameConstants.ts b/packages/wallet/src/W3mFrameConstants.ts index 02761eb121..489b96e6cf 100644 --- a/packages/wallet/src/W3mFrameConstants.ts +++ b/packages/wallet/src/W3mFrameConstants.ts @@ -1,5 +1,6 @@ export const SECURE_SITE_SDK = - process.env['NEXT_PUBLIC_SECURE_SITE_SDK_URL'] || 'https://secure.walletconnect.org/sdk' + 'https://secure-appkit-git-chore-tma-support-reown-com.vercel.app/sdk' +// Process.env['NEXT_PUBLIC_SECURE_SITE_SDK_URL'] || 'https://secure.walletconnect.org/sdk' export const DEFAULT_LOG_LEVEL = process.env['NEXT_PUBLIC_DEFAULT_LOG_LEVEL'] || 'error' From 3e1651e7ca3b5ae67dd723a159da546cdde04d20 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 12:16:53 +0300 Subject: [PATCH 02/23] chore: secure site domain in lab --- apps/laboratory/next.config.mjs | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/laboratory/next.config.mjs b/apps/laboratory/next.config.mjs index 548d5e4363..4a67fe86d8 100644 --- a/apps/laboratory/next.config.mjs +++ b/apps/laboratory/next.config.mjs @@ -5,9 +5,12 @@ const SHAKRA_UI = `'sha256-e7MRMmTzLsLQvIy1iizO1lXf7VWYoQ6ysj5fuUzvRwE='` * DO NOT use `unsafe-inline` or `unsafe-eval` for `script-src` or `default-src` in production as this * is against CSP best practices */ -const secureSiteDomain = process.env.NEXT_PUBLIC_SECURE_SITE_SDK_URL - ? new URL(process.env.NEXT_PUBLIC_SECURE_SITE_SDK_URL).origin - : '' +const secureSiteDomain = 'https://secure-appkit-git-chore-tma-support-reown-com.vercel.app' +/* + * Process.env.NEXT_PUBLIC_SECURE_SITE_SDK_URL + * ? new URL(process.env.NEXT_PUBLIC_SECURE_SITE_SDK_URL).origin + * : '' + */ const cspHeader = ` default-src 'self'; script-src 'self' ${SHAKRA_UI} ${process.env.NODE_ENV === 'production' ? '' : "'unsafe-eval'"}; From 8e5417fa03d6eba80decfe9d3528cd0974fd8862 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 12:20:53 +0300 Subject: [PATCH 03/23] chore: frame src --- apps/laboratory/next.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/laboratory/next.config.mjs b/apps/laboratory/next.config.mjs index 4a67fe86d8..a63e31108e 100644 --- a/apps/laboratory/next.config.mjs +++ b/apps/laboratory/next.config.mjs @@ -18,7 +18,7 @@ const cspHeader = ` img-src * 'self' data: blob: https://walletconnect.org https://walletconnect.com https://secure.walletconnect.com https://secure.walletconnect.org https://tokens-data.1inch.io https://tokens.1inch.io https://ipfs.io https://appkit-lab.reown.org; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://react-wallet.walletconnect.com https://rpc.walletconnect.com https://rpc.walletconnect.org https://relay.walletconnect.com https://relay.walletconnect.org wss://relay.walletconnect.com wss://relay.walletconnect.org https://pulse.walletconnect.com https://pulse.walletconnect.org https://api.web3modal.com https://api.web3modal.org wss://www.walletlink.org https://o1095249.ingest.sentry.io https://quote-api.jup.ag; - frame-src 'self' https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://secure.walletconnect.org https://secure.reown.com https://widget.solflare.com/ ${secureSiteDomain}/; + frame-src 'self' https://secure-appkit-git-chore-tma-support-reown-com.vercel.app https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://secure.walletconnect.org https://secure.reown.com https://widget.solflare.com/ ${secureSiteDomain}/; object-src 'none'; base-uri 'self'; form-action 'self'; From 5cba17f9eedf4040284a2d7c17d201ec63311cfd Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 12:52:20 +0300 Subject: [PATCH 04/23] chore: uses `--` --- packages/core/src/utils/CoreHelperUtil.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts index 0e79442f34..7d601c49d5 100644 --- a/packages/core/src/utils/CoreHelperUtil.ts +++ b/packages/core/src/utils/CoreHelperUtil.ts @@ -169,7 +169,7 @@ export const CoreHelperUtil = { ) }, formatTelegramSocialLoginUrl(url: string) { - const valueToInject = `-${encodeURIComponent(window.location.href)}` + const valueToInject = `--${encodeURIComponent(window.location.href)}` const paramToInject = 'state=' const parsedUrl = new URL(url) if (parsedUrl.host === 'auth.magic.link') { From fcb9e725bb3f54d74e18f0c36b428d5821d7380b Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 13:36:24 +0300 Subject: [PATCH 05/23] fix: popup --- .../scaffold-ui/src/partials/w3m-social-login-list/index.ts | 3 ++- .../scaffold-ui/src/partials/w3m-social-login-widget/index.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index 379ff92e34..5d53f38c4d 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -101,7 +101,8 @@ export class W3mSocialLoginList extends LitElement { this.popupWindow = CoreHelperUtil.returnOpenHref( '', 'popupWindow', - 'width=600,height=800,scrollbars=yes' + 'width=600,height=800,scrollbars=yes', + true ) try { diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 84f5d2bafa..a615d684b3 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -201,7 +201,8 @@ export class W3mSocialLoginWidget extends LitElement { this.popupWindow = CoreHelperUtil.returnOpenHref( '', 'popupWindow', - 'width=600,height=800,scrollbars=yes' + 'width=600,height=800,scrollbars=yes', + true ) console.log('popupWindow', this.popupWindow) try { From 476fd2b87b2c5dfcd17071f2d94088ee1ed9f5b2 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 13:52:59 +0300 Subject: [PATCH 06/23] refactor: url target --- .../src/partials/w3m-social-login-list/index.ts | 16 +++++++++------- .../partials/w3m-social-login-widget/index.ts | 17 ++++++++++------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index 5d53f38c4d..cb0991fecd 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -98,12 +98,14 @@ export class W3mSocialLoginList extends LitElement { RouterController.push('ConnectingSocial') const authConnector = ConnectorController.getAuthConnector() - this.popupWindow = CoreHelperUtil.returnOpenHref( - '', - 'popupWindow', - 'width=600,height=800,scrollbars=yes', - true - ) + if (!CoreHelperUtil.isTelegram()) { + this.popupWindow = CoreHelperUtil.returnOpenHref( + '', + 'popupWindow', + 'width=600,height=800,scrollbars=yes', + true + ) + } try { if (authConnector && socialProvider) { @@ -115,7 +117,7 @@ export class W3mSocialLoginList extends LitElement { this.popupWindow.location.href = uri } else if (CoreHelperUtil.isTelegram() && uri) { const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri) - CoreHelperUtil.openHref(parsedUri, '_self', '', true) + CoreHelperUtil.openHref(parsedUri, '_top', '', true) } else { this.popupWindow?.close() throw new Error('Something went wrong') diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index a615d684b3..0483abe7cb 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -198,12 +198,15 @@ export class W3mSocialLoginWidget extends LitElement { } else { RouterController.push('ConnectingSocial') const authConnector = ConnectorController.getAuthConnector() - this.popupWindow = CoreHelperUtil.returnOpenHref( - '', - 'popupWindow', - 'width=600,height=800,scrollbars=yes', - true - ) + if (!CoreHelperUtil.isTelegram()) { + this.popupWindow = CoreHelperUtil.returnOpenHref( + '', + 'popupWindow', + 'width=600,height=800,scrollbars=yes', + true + ) + } + console.log('popupWindow', this.popupWindow) try { if (authConnector && socialProvider) { @@ -219,7 +222,7 @@ export class W3mSocialLoginWidget extends LitElement { const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri) console.log('parsedUri', parsedUri) - CoreHelperUtil.openHref(parsedUri, '_self', '', true) + CoreHelperUtil.openHref(parsedUri, '_top', '', true) localStorage.setItem('socialProvider', socialProvider) } else { From 4d209396c57e7720d973057b031836a0b6db0e1c Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 13:56:02 +0300 Subject: [PATCH 07/23] chore: adds `_top` --- packages/core/src/utils/CoreHelperUtil.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts index 7d601c49d5..18c6a76fa8 100644 --- a/packages/core/src/utils/CoreHelperUtil.ts +++ b/packages/core/src/utils/CoreHelperUtil.ts @@ -141,7 +141,7 @@ export const CoreHelperUtil = { }, openHref( href: string, - target: '_blank' | '_self' | 'popupWindow', + target: '_top' | '_blank' | '_self' | 'popupWindow', features = 'noreferrer noopener', forceTarget = false ) { @@ -150,7 +150,7 @@ export const CoreHelperUtil = { returnOpenHref( href: string, - target: '_blank' | '_self' | 'popupWindow', + target: '_top' | '_blank' | '_self' | 'popupWindow', features = 'noreferrer noopener', forceTarget = false ) { From e302cfe28592a01b7745463ef0d943648a47ab43 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Mon, 7 Oct 2024 15:36:59 +0300 Subject: [PATCH 08/23] chore: rm frame-ancestors --- apps/laboratory/next.config.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/laboratory/next.config.mjs b/apps/laboratory/next.config.mjs index a63e31108e..6ac39264ba 100644 --- a/apps/laboratory/next.config.mjs +++ b/apps/laboratory/next.config.mjs @@ -22,7 +22,6 @@ const cspHeader = ` object-src 'none'; base-uri 'self'; form-action 'self'; - frame-ancestors 'none'; report-uri https://o1095249.ingest.sentry.io/api/4505685639364608/security/?sentry_key=36ff1e79c60877fce6c0273e94a8ed69; report-to csp-endpoint ` From bfa921af446ddc5601e85b97a3eeaf4caaa8faf8 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 9 Oct 2024 12:11:40 +0300 Subject: [PATCH 09/23] chore: cleanup logs --- packages/appkit/src/client.ts | 34 +++++++++++-------- packages/common/src/utils/SafeLocalStorage.ts | 4 ++- packages/core/src/utils/CoreHelperUtil.ts | 31 +++++++++-------- .../partials/w3m-social-login-list/index.ts | 4 ++- .../partials/w3m-social-login-widget/index.ts | 15 ++------ 5 files changed, 44 insertions(+), 44 deletions(-) diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index 7796e37731..51592f1383 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -559,23 +559,21 @@ export class AppKit { private async checkExistingConnection() { try { - console.log('checkExistingConnection...') if (!CoreHelperUtil.isTelegram()) { - console.log('non Telegram env, returning..') + return } - const socialProviderToConnect = localStorage.getItem( - 'socialProvider' + const socialProviderToConnect = SafeLocalStorage.getItem( + SafeLocalStorageKeys.SOCIAL_PROVIDER ) as AccountControllerState['socialProvider'] if (!socialProviderToConnect) { - console.log('no socialProvider, returning..') - + return + } + if (typeof window === 'undefined' || typeof document === 'undefined') { return } const url = new URL(window.location.href) const resultUri = url.searchParams.get('result_uri') if (!resultUri) { - console.log('no resultUri, returning..') - return } AccountController.setSocialProvider( @@ -583,11 +581,10 @@ export class AppKit { ChainController.state.activeChain ) const authConnector = ConnectorController.getAuthConnector() - console.log('socialProvider', socialProviderToConnect) - console.log('authConnector', authConnector) if (socialProviderToConnect && authConnector) { await authConnector.provider.connectSocial(resultUri) await ConnectionController.connectExternal(authConnector, authConnector.chain) + SafeLocalStorage.removeItem(SafeLocalStorageKeys.SOCIAL_PROVIDER) EventsController.sendEvent({ type: 'track', event: 'SOCIAL_LOGIN_SUCCESS', @@ -595,12 +592,19 @@ export class AppKit { }) } } catch (error) { + // eslint-disable-next-line no-console console.error('checkExistingConnection error', error) } - const url = new URL(window.location.href) - // Remove the 'result_uri' parameter - url.searchParams.delete('result_uri') - // Update the URL without reloading the page - window.history.replaceState({}, document.title, url.toString()) + + try { + const url = new URL(window.location.href) + // Remove the 'result_uri' parameter + url.searchParams.delete('result_uri') + // Update the URL without reloading the page + window.history.replaceState({}, document.title, url.toString()) + } catch (error) { + // eslint-disable-next-line no-console + console.error(error) + } } } diff --git a/packages/common/src/utils/SafeLocalStorage.ts b/packages/common/src/utils/SafeLocalStorage.ts index 19456c7524..ea7e1b54f4 100644 --- a/packages/common/src/utils/SafeLocalStorage.ts +++ b/packages/common/src/utils/SafeLocalStorage.ts @@ -8,6 +8,7 @@ export type SafeLocalStorageItems = { '@appkit/connected_social': string '@appkit/connected_social_username': string '@appkit/recent_wallets': string + '@appkit/social_provider': string /* * DO NOT CHANGE: @walletconnect/universal-provider requires us to set this specific key * This value is a stringified version of { href: stiring; name: string } @@ -25,7 +26,8 @@ export const SafeLocalStorageKeys = { CONNECTED_SOCIAL: '@appkit/connected_social', CONNECTED_SOCIAL_USERNAME: '@appkit/connected_social_username', RECENT_WALLETS: '@appkit/recent_wallets', - DEEPLINK_CHOICE: 'WALLETCONNECT_DEEPLINK_CHOICE' + DEEPLINK_CHOICE: 'WALLETCONNECT_DEEPLINK_CHOICE', + SOCIAL_PROVIDER: '@appkit/social_provider' } as const export const SafeLocalStorage = { diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts index 18c6a76fa8..dde909111c 100644 --- a/packages/core/src/utils/CoreHelperUtil.ts +++ b/packages/core/src/utils/CoreHelperUtil.ts @@ -1,5 +1,9 @@ import type { AppKitSdkVersion, Balance, ChainNamespace } from '@reown/appkit-common' -import { ConstantsUtil as CommonConstants } from '@reown/appkit-common' +import { + ConstantsUtil as CommonConstants, + SafeLocalStorage, + SafeLocalStorageKeys +} from '@reown/appkit-common' import { ConstantsUtil } from './ConstantsUtil.js' import type { CaipAddress, CaipNetwork } from '@reown/appkit-common' import type { ChainAdapter, LinkingRecord } from './TypeUtil.js' @@ -128,12 +132,14 @@ export const CoreHelperUtil = { href: safeAppUrl } }, - getOpenTargetForPlatform(target: string, forceTarget = false) { - if (forceTarget) { - return target - } + getOpenTargetForPlatform(target: string) { // Only '_blank' deeplinks work in Telegram context if (this.isTelegram()) { + // But for social login, we need to load the page in the same context + if (SafeLocalStorage.getItem(SafeLocalStorageKeys.SOCIAL_PROVIDER)) { + return '_top' + } + return '_blank' } @@ -142,21 +148,17 @@ export const CoreHelperUtil = { openHref( href: string, target: '_top' | '_blank' | '_self' | 'popupWindow', - features = 'noreferrer noopener', - forceTarget = false + features = 'noreferrer noopener' ) { - window.open(href, this.getOpenTargetForPlatform(target, forceTarget), features) + window.open(href, this.getOpenTargetForPlatform(target), features) }, - returnOpenHref( href: string, target: '_top' | '_blank' | '_self' | 'popupWindow', - features = 'noreferrer noopener', - forceTarget = false + features = 'noreferrer noopener' ) { - return window.open(href, this.getOpenTargetForPlatform(target, forceTarget), features) + return window.open(href, this.getOpenTargetForPlatform(target), features) }, - isTelegram() { return ( typeof window !== 'undefined' && @@ -180,8 +182,6 @@ export const CoreHelperUtil = { paramToInject, valueToInject ) - console.log('resultUrl', resultUrl) - console.log('full parsedUrl', encodeURIComponent(resultUrl)) return url.replace(providerUrl, encodeURIComponent(resultUrl)) } @@ -200,6 +200,7 @@ export const CoreHelperUtil = { const keyEndIndex = url.indexOf('&', keyIndex) const keyLength = key.length // If there is no "&" after key, it means "key" is the last parameter + // eslint-disable-next-line no-negated-condition const keyParamEnd = keyEndIndex !== -1 ? keyEndIndex : url.length // Extract the part of the URL before the key value const beforeKeyValue = url.substring(0, keyIndex + keyLength) diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index cb0991fecd..820806088f 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -14,6 +14,7 @@ import { state } from 'lit/decorators.js' import styles from './styles.js' import type { SocialProvider } from '@reown/appkit-utils' import { SocialProviderEnum } from '@reown/appkit-utils' +import { SafeLocalStorage, SafeLocalStorageKeys } from '@reown/appkit-common' @customElement('w3m-social-login-list') export class W3mSocialLoginList extends LitElement { @@ -116,8 +117,9 @@ export class W3mSocialLoginList extends LitElement { AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain) this.popupWindow.location.href = uri } else if (CoreHelperUtil.isTelegram() && uri) { + SafeLocalStorage.setItem(SafeLocalStorageKeys.SOCIAL_PROVIDER, socialProvider) const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri) - CoreHelperUtil.openHref(parsedUri, '_top', '', true) + CoreHelperUtil.openHref(parsedUri, '_top') } else { this.popupWindow?.close() throw new Error('Something went wrong') diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 0483abe7cb..2031d0947f 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { AccountController, ChainController, @@ -18,6 +17,7 @@ import { state, property } from 'lit/decorators.js' import styles from './styles.js' import { ifDefined } from 'lit/directives/if-defined.js' import { SocialProviderEnum } from '@reown/appkit-utils' +import { SafeLocalStorage, SafeLocalStorageKeys } from '@reown/appkit-common' const MAX_TOP_VIEW = 2 const MAXIMUM_LENGTH = 6 @@ -169,7 +169,6 @@ export class W3mSocialLoginWidget extends LitElement { } async onSocialClick(socialProvider?: SocialProvider) { - console.log('onSocialClick', socialProvider) if (socialProvider) { AccountController.setSocialProvider(socialProvider, ChainController.state.activeChain) @@ -206,8 +205,6 @@ export class W3mSocialLoginWidget extends LitElement { true ) } - - console.log('popupWindow', this.popupWindow) try { if (authConnector && socialProvider) { const { uri } = await authConnector.provider.getSocialRedirectUri({ @@ -217,21 +214,15 @@ export class W3mSocialLoginWidget extends LitElement { AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain) this.popupWindow.location.href = uri } else if (CoreHelperUtil.isTelegram() && uri) { - console.log('plain uri', uri) - + SafeLocalStorage.setItem(SafeLocalStorageKeys.SOCIAL_PROVIDER, socialProvider) const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri) - console.log('parsedUri', parsedUri) - - CoreHelperUtil.openHref(parsedUri, '_top', '', true) - - localStorage.setItem('socialProvider', socialProvider) + CoreHelperUtil.openHref(parsedUri, '_top') } else { this.popupWindow?.close() throw new Error('Something went wrong') } } } catch (error) { - console.error('onSocialClick error', error) this.popupWindow?.close() SnackController.showError('Something went wrong') } From 8737cd1878301a966023ce3d619db2e7c4c1cfa2 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 9 Oct 2024 12:18:52 +0300 Subject: [PATCH 10/23] fix: params --- .../scaffold-ui/src/partials/w3m-social-login-list/index.ts | 3 +-- .../scaffold-ui/src/partials/w3m-social-login-widget/index.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index 820806088f..5a513867ea 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -103,8 +103,7 @@ export class W3mSocialLoginList extends LitElement { this.popupWindow = CoreHelperUtil.returnOpenHref( '', 'popupWindow', - 'width=600,height=800,scrollbars=yes', - true + 'width=600,height=800,scrollbars=yes' ) } diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 2031d0947f..38060ddcae 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -201,8 +201,7 @@ export class W3mSocialLoginWidget extends LitElement { this.popupWindow = CoreHelperUtil.returnOpenHref( '', 'popupWindow', - 'width=600,height=800,scrollbars=yes', - true + 'width=600,height=800,scrollbars=yes' ) } try { From 893c68e8a79650230e063d332e719d572698d76c Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Thu, 10 Oct 2024 12:26:25 +0300 Subject: [PATCH 11/23] fix: loading state and wagmi social connnections --- packages/adapters/ethers/src/client.ts | 9 ++++++--- packages/adapters/wagmi/src/client.ts | 7 ++++--- packages/appkit/src/client.ts | 7 ++++++- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/adapters/ethers/src/client.ts b/packages/adapters/ethers/src/client.ts index 016e9ffded..56e1f12846 100644 --- a/packages/adapters/ethers/src/client.ts +++ b/packages/adapters/ethers/src/client.ts @@ -1150,13 +1150,16 @@ export class EthersAdapter { chain: this.chainNamespace }) - this.appKit?.setLoading(true) const isLoginEmailUsed = this.authProvider.getLoginEmailUsed() - this.appKit?.setLoading(isLoginEmailUsed) + + if (isLoginEmailUsed) { + this.appKit?.setLoading(isLoginEmailUsed) + } + const { isConnected } = await this.authProvider.isConnected() if (isConnected) { await this.setAuthProvider() - } else { + } else if (isLoginEmailUsed) { this.appKit?.setLoading(false) } } diff --git a/packages/adapters/wagmi/src/client.ts b/packages/adapters/wagmi/src/client.ts index 9e7c5b774c..5d1e871e0f 100644 --- a/packages/adapters/wagmi/src/client.ts +++ b/packages/adapters/wagmi/src/client.ts @@ -580,10 +580,10 @@ export class WagmiAdapter implements ChainAdapter { caipNetworks: this.caipNetworks }) - this.syncConnectors(this.wagmiConfig.connectors) this.syncAuthConnector( this.wagmiConfig?.connectors.find(c => c.id === ConstantsUtil.AUTH_CONNECTOR_ID) ) + this.syncConnectors(this.wagmiConfig.connectors) this.syncRequestedNetworks(this.caipNetworks) watchConnectors(this.wagmiConfig, { @@ -942,11 +942,12 @@ export class WagmiAdapter implements ChainAdapter { bypassWindowCheck = false ) { if (bypassWindowCheck || (typeof window !== 'undefined' && connector)) { - this.appKit?.setLoading(true) const provider = (await connector.getProvider()) as W3mFrameProvider const isLoginEmailUsed = provider.getLoginEmailUsed() - this.appKit?.setLoading(isLoginEmailUsed) + if (isLoginEmailUsed) { + this.appKit?.setLoading(isLoginEmailUsed) + } provider.onRpcRequest((request: W3mFrameTypes.RPCRequest) => { if (W3mFrameHelpers.checkIfRequestExists(request)) { diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index 68b06634d7..b32d6a60e3 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -85,7 +85,10 @@ export class AppKit { this.initControllers(options) this.initOrContinue() this.version = options.sdkVersion - this.checkExistingConnection() + // Check on the next thick because wagmiAdapter authConnector is not immediately available + setTimeout(() => { + this.checkExistingConnection() + }, 0) } public static getInstance() { @@ -613,6 +616,7 @@ export class AppKit { ) const authConnector = ConnectorController.getAuthConnector() if (socialProviderToConnect && authConnector) { + this.setLoading(true) await authConnector.provider.connectSocial(resultUri) await ConnectionController.connectExternal(authConnector, authConnector.chain) SafeLocalStorage.removeItem(SafeLocalStorageKeys.SOCIAL_PROVIDER) @@ -623,6 +627,7 @@ export class AppKit { }) } } catch (error) { + this.setLoading(false) // eslint-disable-next-line no-console console.error('checkExistingConnection error', error) } From 3508cf446ee5e72e9589781689be0a6fbde6b05b Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Thu, 10 Oct 2024 13:27:49 +0300 Subject: [PATCH 12/23] chore: rm redundant test check --- packages/adapters/ethers/src/tests/client.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/adapters/ethers/src/tests/client.test.ts b/packages/adapters/ethers/src/tests/client.test.ts index 9c488f4709..9f4872618d 100644 --- a/packages/adapters/ethers/src/tests/client.test.ts +++ b/packages/adapters/ethers/src/tests/client.test.ts @@ -243,7 +243,6 @@ describe('EthersAdapter', () => { provider: expect.any(Object), chain: 'eip155' }) - expect(mockAppKit.setLoading).toHaveBeenCalledWith(false) }) describe('Auth Connector Handle Requests', () => { From 87f5bbbe20023a3bcf264c1a7c7c5d8a94b6c332 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Thu, 17 Oct 2024 12:42:56 +0300 Subject: [PATCH 13/23] fix: connected socials label --- packages/appkit/src/client.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index b32d6a60e3..c8ee7d618f 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -26,7 +26,8 @@ import { OptionsController, AssetUtil, ApiController, - AlertController + AlertController, + StorageUtil } from '@reown/appkit-core' import { setColorTheme, setThemeVariables } from '@reown/appkit-ui' import { @@ -619,6 +620,7 @@ export class AppKit { this.setLoading(true) await authConnector.provider.connectSocial(resultUri) await ConnectionController.connectExternal(authConnector, authConnector.chain) + StorageUtil.setConnectedSocialProvider(socialProviderToConnect) SafeLocalStorage.removeItem(SafeLocalStorageKeys.SOCIAL_PROVIDER) EventsController.sendEvent({ type: 'track', From 4a6ac1ad3ab943bb3a4d0b84dd4bbb46fa7b9908 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Fri, 18 Oct 2024 11:30:00 +0300 Subject: [PATCH 14/23] feat: hides non working social per platform --- .../core/src/controllers/OptionsController.ts | 7 ++++++- packages/core/src/utils/CoreHelperUtil.ts | 6 ++++++ packages/core/src/utils/OptionsUtil.ts | 21 +++++++++++++++++++ .../partials/w3m-social-login-list/index.ts | 1 + .../partials/w3m-social-login-widget/index.ts | 1 + 5 files changed, 35 insertions(+), 1 deletion(-) diff --git a/packages/core/src/controllers/OptionsController.ts b/packages/core/src/controllers/OptionsController.ts index 73a2fdd37b..5850eb6627 100644 --- a/packages/core/src/controllers/OptionsController.ts +++ b/packages/core/src/controllers/OptionsController.ts @@ -9,6 +9,7 @@ import type { Tokens } from '../utils/TypeUtil.js' import { ConstantsUtil } from '../utils/ConstantsUtil.js' +import { filterSocialsByPlatform, OptionsUtil } from '../utils/OptionsUtil.js' // -- Types --------------------------------------------- // export interface OptionsControllerStatePublic { @@ -152,8 +153,12 @@ export const OptionsController = { if (!state.features) { state.features = ConstantsUtil.DEFAULT_FEATURES } + let filteredValue = value + if (key === 'socials') { + filteredValue = filterSocialsByPlatform(state.features.socials) + } if (key in state.features) { - ;(state.features as Record)[key as keyof Features] = value + ;(state.features as Record)[key as keyof Features] = filteredValue } }) }, diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts index 2efd1b72e9..b86010c350 100644 --- a/packages/core/src/utils/CoreHelperUtil.ts +++ b/packages/core/src/utils/CoreHelperUtil.ts @@ -38,6 +38,12 @@ export const CoreHelperUtil = { return CoreHelperUtil.isMobile() && (ua.includes('iphone') || ua.includes('ipad')) }, + isMac() { + const ua = window.navigator.userAgent.toLowerCase() + + return ua.includes('macintosh') && !ua.includes('safari') + }, + isClient() { return typeof window !== 'undefined' }, diff --git a/packages/core/src/utils/OptionsUtil.ts b/packages/core/src/utils/OptionsUtil.ts index 65415deec9..89a709024d 100644 --- a/packages/core/src/utils/OptionsUtil.ts +++ b/packages/core/src/utils/OptionsUtil.ts @@ -1,4 +1,5 @@ import { ConstantsUtil } from './ConstantsUtil.js' +import { CoreHelperUtil } from './CoreHelperUtil.js' import type { Features, FeaturesKeys } from './TypeUtil.js' export const OptionsUtil = { @@ -12,3 +13,23 @@ export const OptionsUtil = { return optionValue as Features[typeof key] } } + +export function filterSocialsByPlatform(socials: Features['socials']) { + if (!socials || !socials.length) { + return socials as T + } + + if (CoreHelperUtil.isTelegram()) { + if (CoreHelperUtil.isIos()) { + return socials.filter(s => s !== 'google') + } + if (CoreHelperUtil.isMac()) { + return socials.filter(s => s !== 'x') + } + if (CoreHelperUtil.isAndroid()) { + return socials.filter(s => !['facebook', 'x'].includes(s)) + } + } + + return socials +} diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index 5a513867ea..d88aa64786 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -41,6 +41,7 @@ export class W3mSocialLoginList extends LitElement { }), OptionsController.subscribeKey('features', val => (this.features = val)) ) + OptionsController.setFeatures(this.features) } public override disconnectedCallback() { diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 38060ddcae..c1e8401d2b 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -49,6 +49,7 @@ export class W3mSocialLoginWidget extends LitElement { }), OptionsController.subscribeKey('features', val => (this.features = val)) ) + OptionsController.setFeatures(this.features) } public override disconnectedCallback() { From 1bdc8a73542b91b7bd42c1d787ce77775ad6510d Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Fri, 18 Oct 2024 11:46:01 +0300 Subject: [PATCH 15/23] fix: rm unused import --- packages/core/src/controllers/OptionsController.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/controllers/OptionsController.ts b/packages/core/src/controllers/OptionsController.ts index 5850eb6627..d9ee101948 100644 --- a/packages/core/src/controllers/OptionsController.ts +++ b/packages/core/src/controllers/OptionsController.ts @@ -9,7 +9,7 @@ import type { Tokens } from '../utils/TypeUtil.js' import { ConstantsUtil } from '../utils/ConstantsUtil.js' -import { filterSocialsByPlatform, OptionsUtil } from '../utils/OptionsUtil.js' +import { filterSocialsByPlatform } from '../utils/OptionsUtil.js' // -- Types --------------------------------------------- // export interface OptionsControllerStatePublic { From 470dde07781b9ae94be6dbd37d3fff472e072137 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 30 Oct 2024 13:54:41 +0200 Subject: [PATCH 16/23] chore: updates secure url --- apps/laboratory/next.config.mjs | 4 ++-- packages/scaffold-ui/src/utils/ConstantsUtil.ts | 2 +- packages/wallet/src/W3mFrameConstants.ts | 3 +-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/laboratory/next.config.mjs b/apps/laboratory/next.config.mjs index 36277a4c3e..7940ba12da 100644 --- a/apps/laboratory/next.config.mjs +++ b/apps/laboratory/next.config.mjs @@ -5,7 +5,7 @@ const SHAKRA_UI = `'sha256-e7MRMmTzLsLQvIy1iizO1lXf7VWYoQ6ysj5fuUzvRwE='` * DO NOT use `unsafe-inline` or `unsafe-eval` for `script-src` or `default-src` in production as this * is against CSP best practices */ -const secureSiteDomain = 'https://secure-appkit-git-chore-tma-support-reown-com.vercel.app' +const secureSiteDomain = 'https://b1a9fa46.secure-appkit-sdk.pages.dev' /* * Process.env.NEXT_PUBLIC_SECURE_SITE_SDK_URL * ? new URL(process.env.NEXT_PUBLIC_SECURE_SITE_SDK_URL).origin @@ -18,7 +18,7 @@ const cspHeader = ` img-src * 'self' data: blob: https://walletconnect.org https://walletconnect.com https://secure.walletconnect.com https://secure.walletconnect.org https://tokens-data.1inch.io https://tokens.1inch.io https://ipfs.io https://appkit-lab.reown.org; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://react-wallet.walletconnect.com https://rpc.walletconnect.com https://rpc.walletconnect.org https://relay.walletconnect.com https://relay.walletconnect.org wss://relay.walletconnect.com wss://relay.walletconnect.org https://pulse.walletconnect.com https://pulse.walletconnect.org https://api.web3modal.com https://api.web3modal.org wss://www.walletlink.org https://o1095249.ingest.sentry.io https://quote-api.jup.ag; - frame-src 'self' https://secure-appkit-git-chore-tma-support-reown-com.vercel.app https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://secure.walletconnect.org https://secure.reown.com https://widget.solflare.com/ ${secureSiteDomain}/; + frame-src 'self' https://b1a9fa46.secure-appkit-sdk.pages.dev https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://secure.walletconnect.org https://secure.reown.com https://widget.solflare.com/ ${secureSiteDomain}/; object-src 'none'; base-uri 'self'; form-action 'self'; diff --git a/packages/scaffold-ui/src/utils/ConstantsUtil.ts b/packages/scaffold-ui/src/utils/ConstantsUtil.ts index e993767a4e..6ed07a9516 100644 --- a/packages/scaffold-ui/src/utils/ConstantsUtil.ts +++ b/packages/scaffold-ui/src/utils/ConstantsUtil.ts @@ -1,6 +1,6 @@ export const ConstantsUtil = { ACCOUNT_TABS: [{ label: 'Tokens' }, { label: 'NFTs' }, { label: 'Activity' }], - SECURE_SITE_ORIGIN: 'https://secure-appkit-git-chore-tma-support-reown-com.vercel.app', + SECURE_SITE_ORIGIN: 'https://b1a9fa46.secure-appkit-sdk.pages.dev', VIEW_DIRECTION: { Next: 'next', Prev: 'prev' diff --git a/packages/wallet/src/W3mFrameConstants.ts b/packages/wallet/src/W3mFrameConstants.ts index 3fefed6927..74f2b4c0cd 100644 --- a/packages/wallet/src/W3mFrameConstants.ts +++ b/packages/wallet/src/W3mFrameConstants.ts @@ -1,5 +1,4 @@ -export const SECURE_SITE_SDK = - 'https://secure-appkit-git-chore-tma-support-reown-com.vercel.app/sdk' +export const SECURE_SITE_SDK = 'https://b1a9fa46.secure-appkit-sdk.pages.dev/sdk' // Process.env['NEXT_PUBLIC_SECURE_SITE_SDK_URL'] || 'https://secure.walletconnect.org/sdk' export const DEFAULT_LOG_LEVEL = process.env['NEXT_PUBLIC_DEFAULT_LOG_LEVEL'] || 'error' From 6871f2ffc2022d785ac11ce6d1f5cae603f1a0f0 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 30 Oct 2024 14:42:57 +0200 Subject: [PATCH 17/23] chore: adds logs --- packages/appkit/src/client.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index c2eaa67daa..955b6eae8b 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -604,20 +604,28 @@ export class AppKit { private async checkExistingConnection() { try { if (!CoreHelperUtil.isTelegram()) { + console.log('checkExistingConnection', 'not telegram') + return } const socialProviderToConnect = SafeLocalStorage.getItem( SafeLocalStorageKeys.SOCIAL_PROVIDER ) as AccountControllerState['socialProvider'] if (!socialProviderToConnect) { + console.log('checkExistingConnection', 'no social provider') + return } if (typeof window === 'undefined' || typeof document === 'undefined') { + console.log('checkExistingConnection', 'no window or document') + return } const url = new URL(window.location.href) const resultUri = url.searchParams.get('result_uri') if (!resultUri) { + console.log('checkExistingConnection', 'no result uri') + return } AccountController.setSocialProvider( From b26ce38ee792b56ea5deb5398200670a09459c60 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 30 Oct 2024 15:04:07 +0200 Subject: [PATCH 18/23] chore: more logs --- packages/appkit/src/client.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index 955b6eae8b..25d2b59f2a 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -89,7 +89,7 @@ export class AppKit { // Check on the next thick because wagmiAdapter authConnector is not immediately available setTimeout(() => { this.checkExistingConnection() - }, 0) + }, 1000) } public static getInstance() { @@ -603,6 +603,7 @@ export class AppKit { private async checkExistingConnection() { try { + console.log('checkExistingConnection') if (!CoreHelperUtil.isTelegram()) { console.log('checkExistingConnection', 'not telegram') @@ -616,6 +617,7 @@ export class AppKit { return } + console.log('checkExistingConnection', 'social provider to connect', socialProviderToConnect) if (typeof window === 'undefined' || typeof document === 'undefined') { console.log('checkExistingConnection', 'no window or document') @@ -623,6 +625,7 @@ export class AppKit { } const url = new URL(window.location.href) const resultUri = url.searchParams.get('result_uri') + console.log('checkExistingConnection', 'result uri', resultUri) if (!resultUri) { console.log('checkExistingConnection', 'no result uri') @@ -633,6 +636,7 @@ export class AppKit { ChainController.state.activeChain ) const authConnector = ConnectorController.getAuthConnector() + console.log('checkExistingConnection', 'auth connector', authConnector) if (socialProviderToConnect && authConnector) { this.setLoading(true) await authConnector.provider.connectSocial(resultUri) From addbbc664faee6831d51138d613d8271d31b69d4 Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 30 Oct 2024 15:29:18 +0200 Subject: [PATCH 19/23] fix: ethers merge conflict --- packages/adapters/ethers/src/client.ts | 39 +++++++++++++------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/adapters/ethers/src/client.ts b/packages/adapters/ethers/src/client.ts index 6de989e0df..1e697b5602 100644 --- a/packages/adapters/ethers/src/client.ts +++ b/packages/adapters/ethers/src/client.ts @@ -1175,29 +1175,28 @@ export class EthersAdapter { const isLoginEmailUsed = this.authProvider.getLoginEmailUsed() - /* - * If (isLoginEmailUsed) { - * this.appKit?.setLoading(isLoginEmailUsed) - * } - */ + if (isLoginEmailUsed) { + this.appKit?.setLoading(isLoginEmailUsed) + } + + const { isConnected } = await this.authProvider.isConnected() + if (isConnected) { + await this.setAuthProvider() + } else if (isLoginEmailUsed) { + this.appKit?.setLoading(false) + } /* - * Const { isConnected } = await this.authProvider.isConnected() - * if (isConnected) { - * await this.setAuthProvider() - * } else if (isLoginEmailUsed) { - * this.appKit?.setLoading(false) + * This.appKit?.setLoading(isLoginEmailUsed) + * if (isLoginEmailUsed) { + * const { isConnected } = await this.authProvider.isConnected() + * if (isConnected) { + * await this.setAuthProvider() + * } else { + * this.appKit?.setLoading(false) + * } + * } */ - - this.appKit?.setLoading(isLoginEmailUsed) - if (isLoginEmailUsed) { - const { isConnected } = await this.authProvider.isConnected() - if (isConnected) { - await this.setAuthProvider() - } else { - this.appKit?.setLoading(false) - } - } } } From 3cbf2e00732768e114373ee54081779a1a8344fe Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 30 Oct 2024 15:38:07 +0200 Subject: [PATCH 20/23] chore: rm logs --- packages/adapters/ethers/src/client.ts | 12 ------------ packages/appkit/src/client.ts | 14 +------------- 2 files changed, 1 insertion(+), 25 deletions(-) diff --git a/packages/adapters/ethers/src/client.ts b/packages/adapters/ethers/src/client.ts index 1e697b5602..bb38ec06ac 100644 --- a/packages/adapters/ethers/src/client.ts +++ b/packages/adapters/ethers/src/client.ts @@ -1185,18 +1185,6 @@ export class EthersAdapter { } else if (isLoginEmailUsed) { this.appKit?.setLoading(false) } - - /* - * This.appKit?.setLoading(isLoginEmailUsed) - * if (isLoginEmailUsed) { - * const { isConnected } = await this.authProvider.isConnected() - * if (isConnected) { - * await this.setAuthProvider() - * } else { - * this.appKit?.setLoading(false) - * } - * } - */ } } diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index 25d2b59f2a..c2eaa67daa 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -89,7 +89,7 @@ export class AppKit { // Check on the next thick because wagmiAdapter authConnector is not immediately available setTimeout(() => { this.checkExistingConnection() - }, 1000) + }, 0) } public static getInstance() { @@ -603,32 +603,21 @@ export class AppKit { private async checkExistingConnection() { try { - console.log('checkExistingConnection') if (!CoreHelperUtil.isTelegram()) { - console.log('checkExistingConnection', 'not telegram') - return } const socialProviderToConnect = SafeLocalStorage.getItem( SafeLocalStorageKeys.SOCIAL_PROVIDER ) as AccountControllerState['socialProvider'] if (!socialProviderToConnect) { - console.log('checkExistingConnection', 'no social provider') - return } - console.log('checkExistingConnection', 'social provider to connect', socialProviderToConnect) if (typeof window === 'undefined' || typeof document === 'undefined') { - console.log('checkExistingConnection', 'no window or document') - return } const url = new URL(window.location.href) const resultUri = url.searchParams.get('result_uri') - console.log('checkExistingConnection', 'result uri', resultUri) if (!resultUri) { - console.log('checkExistingConnection', 'no result uri') - return } AccountController.setSocialProvider( @@ -636,7 +625,6 @@ export class AppKit { ChainController.state.activeChain ) const authConnector = ConnectorController.getAuthConnector() - console.log('checkExistingConnection', 'auth connector', authConnector) if (socialProviderToConnect && authConnector) { this.setLoading(true) await authConnector.provider.connectSocial(resultUri) From 0fbd9969292a5aedfe15f7aee49f1f985ea6841a Mon Sep 17 00:00:00 2001 From: Gancho Radkov Date: Wed, 6 Nov 2024 11:04:51 +0200 Subject: [PATCH 21/23] feat: adds loader on iphone while pairing uri is generated in tma context --- .../w3m-connect-custom-widget/index.ts | 9 +++++++ .../w3m-connect-recent-widget/index.ts | 26 ++++++++++++++++++- .../src/composites/wui-list-wallet/index.ts | 8 ++++-- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts index a2be52941f..5d31a17876 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts @@ -1,6 +1,7 @@ import type { WcWallet } from '@reown/appkit-core' import { AssetUtil, + ConnectionController, ConnectorController, CoreHelperUtil, OptionsController, @@ -19,12 +20,19 @@ export class W3mConnectCustomWidget extends LitElement { // -- State & Properties -------------------------------- // @state() private connectors = ConnectorController.state.connectors + @state() private loading = false public constructor() { super() this.unsubscribe.push( ConnectorController.subscribeKey('connectors', val => (this.connectors = val)) ) + if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos()) { + this.loading = !ConnectionController.state.wcUri + this.unsubscribe.push( + ConnectionController.subscribeKey('wcUri', val => (this.loading = !val)) + ) + } } public override disconnectedCallback() { @@ -49,6 +57,7 @@ export class W3mConnectCustomWidget extends LitElement { this.onConnectWallet(wallet)} data-testid=${`wallet-selector-${wallet.id}`} > diff --git a/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts index b85886c2f9..a7ca98e4fd 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts @@ -1,11 +1,34 @@ import type { WcWallet } from '@reown/appkit-core' -import { AssetUtil, RouterController, StorageUtil } from '@reown/appkit-core' +import { + AssetUtil, + ConnectionController, + CoreHelperUtil, + RouterController, + StorageUtil +} from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-recent-widget') export class W3mConnectRecentWidget extends LitElement { + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() private loading = false + + public constructor() { + super() + if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos()) { + this.loading = !ConnectionController.state.wcUri + this.unsubscribe.push( + ConnectionController.subscribeKey('wcUri', val => (this.loading = !val)) + ) + } + } + // -- Render -------------------------------------------- // public override render() { const recent = StorageUtil.getRecentWallets() @@ -24,6 +47,7 @@ export class W3mConnectRecentWidget extends LitElement { imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))} name=${wallet.name ?? 'Unknown'} @click=${() => this.onConnectWallet(wallet)} + ?loading=${this.loading} tagLabel="recent" tagVariant="shade" > diff --git a/packages/ui/src/composites/wui-list-wallet/index.ts b/packages/ui/src/composites/wui-list-wallet/index.ts index 648d81d16b..e57137cb46 100644 --- a/packages/ui/src/composites/wui-list-wallet/index.ts +++ b/packages/ui/src/composites/wui-list-wallet/index.ts @@ -34,12 +34,14 @@ export class WuiListWallet extends LitElement { @property({ type: Boolean }) public disabled = false + @property({ type: Boolean }) public loading = false + @property({ type: Boolean }) public showAllWallets = false // -- Render -------------------------------------------- // public override render() { return html` -