fix: Wallet Connect improvements (#536)

app.vue

@@ -21,7 +21,10 @@ const { addProviderEvents, removeProviderEvents } =
 const { disconnect } = useBaseProvider()
 const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
-const { initProvider, connect } = useWalletConnectProvider()
+const {
+  initProvider: initWalletConnectProvider,
+  connect: connectWalletConnect,
+} = useWalletConnectProvider()
 const { formatMessage } = useIntl()
 const { gridChainId, tempGrids } = storeToRefs(useGridStore())
 const swHasUpgrade = ref<boolean>(false)
@@ -60,8 +63,8 @@ const setupWeb3Instances = async () => {
 
   // reconnect wallet connect
   if (isWalletConnect.value) {
-    await initProvider()
-    await connect()
+    await initWalletConnectProvider()
+    await connectWalletConnect()
   }
 }
 

components/FollowButton.vue

@@ -94,7 +94,15 @@ const handleClick = async (event: Event) => {
 
   // when we are not connected, we need to connect first
   if (!isConnected.value) {
-    await connect()
+    try {
+      isPending.value = true
+      await connect()
+    } catch (error) {
+      console.warn(error)
+    } finally {
+      isPending.value = false
+    }
+
     invalidateQueries()
 
     // stop if we want to follow ourselves

components/ModalTemplateConnectWallet.vue

@@ -107,7 +107,7 @@ const handleToggleMobile = () => {
         {{ formatMessage('modal_connect_wallet_mobile_scan_text') }}
       </div>
       <WalletConnectQrCode
-        class="flex items-center justify-center pb-6 pt-4"
+        class="flex items-center justify-center"
         @disconnect="handleToggleMobile"
       />
     </div>

components/WalletConnectButton.vue

@@ -4,11 +4,19 @@ const deepLink = ref('')
 const { initProvider, connect: connectWalletConnect } =
   useWalletConnectProvider()
 const { walletConnectProvider: provider } = storeToRefs(useAppStore())
+const isLoading = ref(false)
+
+const handleClick = async () => {
+  isLoading.value = true
+  navigateTo(deepLink.value, { external: true })
+}
 
 onMounted(async () => {
   await initProvider()
   provider.value?.on('display_uri', (data: string) => {
-    deepLink.value = walletConnectDeepLinkUrl(data)
+    deepLink.value = walletConnectDeepLinkUrl(data, {
+      withRedirectUrl: true,
+    })
   })
 
   try {
@@ -20,7 +28,19 @@ onMounted(async () => {
 </script>
 
 <template>
-  <lukso-button variant="secondary" is-full-width is-link :href="deepLink">
+  <lukso-button
+    variant="secondary"
+    is-full-width
+    target="_self"
+    :is-loading="!deepLink || isLoading ? true : undefined"
+    :loading-text="
+      formatMessage(
+        'modal_connect_wallet_select_provider_connect_mobile_button'
+      )
+    "
+    :disabled="!deepLink ? true : undefined"
+    @click="handleClick"
+  >
     <lukso-icon name="phone-portrait-outline" class="mr-2"></lukso-icon>
     {{
       formatMessage(

components/WalletConnectQrCode.vue

@@ -40,7 +40,9 @@ const generateQrCode = (data: string) => {
   })
 
   if (qrCodeElement.value) {
+    qrCodeElement.value.innerHTML = '<AppLoader />'
     qrCode.append(qrCodeElement.value as HTMLDivElement)
+    qrCodeElement.value.classList.add('animate-fade-in')
   }
 }
 
@@ -69,6 +71,7 @@ onMounted(async () => {
     >
       <div
         ref="qrCodeElement"
+        class="cursor-pointer"
         :style="{
           'min-height': `${size}px`,
         }"

composables/web3-provider/useBaseProvider.ts

@@ -1,11 +1,22 @@
 import { INJECTED_PROVIDER } from '@/shared/provider'
 
 const connect = async () => {
-  const { isWalletConnect, isMobile } = storeToRefs(useAppStore())
-  const { connect: connectWalletConnect } = useWalletConnectProvider()
+  const { isWalletConnect, isMobile, walletConnectProvider } =
+    storeToRefs(useAppStore())
+  const {
+    connect: connectWalletConnect,
+    initProvider: initWalletConnectProvider,
+  } = useWalletConnectProvider()
   const { connect: connectBrowserExtension } = useBrowserExtensionProvider()
 
   if (isWalletConnect.value || isMobile.value) {
+    await initWalletConnectProvider()
+    walletConnectProvider.value?.on('display_uri', (data: string) => {
+      const deepLink = walletConnectDeepLinkUrl(data, {
+        withRedirectUrl: true,
+      })
+      navigateTo(deepLink, { external: true })
+    })
     await connectWalletConnect()
     return
   }

utils/__tests__/externalUrls.spec.ts

@@ -151,14 +151,24 @@ describe('universalSwapsAssetUrl', () => {
 })
 
 describe('walletConnectDeepLinkUrl', () => {
-  test('should produce proper deep link', () => {
+  test('should produce proper deep link without redirect URL', () => {
     const input =
       'wc:96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
     const expectedOutput =
-      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815&redirectUrl=http://localhost:3000/'
+      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
     expect(walletConnectDeepLinkUrl(input)).toBe(expectedOutput)
   })
 
+  test('should produce proper deep link with redirect URL', () => {
+    const input =
+      'wc:96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
+    const expectedOutput =
+      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815&redirectUrl=http%3A%2F%2Flocalhost%3A3000%2F'
+    expect(walletConnectDeepLinkUrl(input, { withRedirectUrl: true })).toBe(
+      expectedOutput
+    )
+  })
+
   test('throws an error when data is invalid', () => {
     // @ts-expect-error
     expect(() => walletConnectDeepLinkUrl()).toThrow('Invalid URL')

utils/externalUrls.ts

@@ -147,17 +147,34 @@ export const universalSwapsAssetUrl = (address?: Address) => {
  *
  * @param data
  */
-export const walletConnectDeepLinkUrl = (data: string) => {
+export const walletConnectDeepLinkUrl = (
+  data: string,
+  options?: {
+    withRedirectUrl?: boolean
+  }
+) => {
   if (genericLog.enabled) {
     genericLog(`Wallet Connect link: ${data}`)
   }
 
-  const urlData = new URL(data)
-  const redirectUrl = location.href.replace(
-    '&modalTemplate=ConnectWallet&modalSize=auto',
-    ''
-  )
-  const deepLink = `${MOBILE_APP_DEEP_LINK_PREFIX}://wallet-connect/${urlData.pathname}${urlData.search}&redirectUrl=${redirectUrl}`
+  const dataUrl = new URL(data)
+
+  // add redirectUrl to deep link
+  if (options?.withRedirectUrl) {
+    const redirectUrl = new URL(location.href)
+
+    // remove modal query params so we don't re-open the modal
+    redirectUrl.searchParams.delete('modalTemplate')
+    redirectUrl.searchParams.delete('modalSize')
+
+    // add redirectUrl to dataUrl
+    dataUrl.searchParams.append(
+      'redirectUrl',
+      `${redirectUrl.origin}${redirectUrl.pathname}${redirectUrl.search}`
+    )
+  }
+
+  const deepLink = `${MOBILE_APP_DEEP_LINK_PREFIX}://wallet-connect/${dataUrl.pathname}${dataUrl.search}`
 
   if (genericLog.enabled) {
     genericLog(`Mobile App link: ${deepLink}`)