feat: enable wallet connect

components/ModalTemplateConnectWallet.vue

@@ -86,11 +86,11 @@ const browserSupportExtension = computed(() => extensionStore.value.url !== '')
             )
           }}
         </lukso-button>
-        <WalletConnectButton v-if="false" />
+        <WalletConnectButton v-if="isMobile" />
         <lukso-button
+          v-else
           variant="secondary"
           is-full-width
-          disabled
           @click="handleToggleMobile"
         >
           <lukso-icon name="phone-portrait-outline" class="mr-2"></lukso-icon>
@@ -99,7 +99,6 @@ const browserSupportExtension = computed(() => extensionStore.value.url !== '')
               'modal_connect_wallet_select_provider_connect_mobile_button'
             )
           }}
-          (soon)
         </lukso-button>
       </div>
       <div class="paragraph-inter-12-regular mt-4 text-neutral-40">

components/WalletConnectButton.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 const { formatMessage } = useIntl()
 const deepLink = ref('')
-const {
-  initProvider,
-  connect: connectWalletConnect,
-  deepLinkParser,
-} = useWalletConnectProvider()
+const { initProvider, connect: connectWalletConnect } =
+  useWalletConnectProvider()
 const { walletConnectProvider: provider } = storeToRefs(useAppStore())
 
 onMounted(async () => {
   await initProvider()
   provider.value?.on('display_uri', (data: string) => {
-    deepLink.value = deepLinkParser(data)
+    deepLink.value = walletConnectDeepLinkUrl(data)
   })
 
   try {

components/WalletConnectQrCode.vue

@@ -6,11 +6,8 @@ type Emits = (event: 'disconnect') => void
 const emit = defineEmits<Emits>()
 
 const qrCodeElement = ref<HTMLDivElement | null>(null)
-const {
-  initProvider,
-  connect: connectWalletConnect,
-  deepLinkParser,
-} = useWalletConnectProvider()
+const { initProvider, connect: connectWalletConnect } =
+  useWalletConnectProvider()
 const isLoading = ref(true)
 const deepLink = ref('')
 const { walletConnectProvider: provider, isMobile } = storeToRefs(useAppStore())
@@ -19,7 +16,7 @@ const { formatMessage } = useIntl()
 const size = computed(() => (isMobile.value ? 300 : 340))
 
 const generateQrCode = (data: string) => {
-  deepLink.value = deepLinkParser(data)
+  deepLink.value = walletConnectDeepLinkUrl(data)
   const qrCode = new QRCodeStyling({
     width: size.value,
     height: size.value,

composables/web3-provider/useWalletConnectProvider.ts

@@ -11,7 +11,7 @@ const initProvider = async () => {
       name: 'Universal Profiles',
       description:
         'Explore Universal Profiles and view all your assets in one place as well as send and receive tokens to other Universal Profile users.',
-      url: 'https://universalprofile.cloud/',
+      url: BASE_DAPP_URL,
       icons: ['https://universalprofile.cloud/favicon.png'],
     },
     showQrModal: false,
@@ -28,7 +28,6 @@ const connect = async (requestAccounts = true) => {
     walletConnectProvider: provider,
     connectedProfileAddress,
     isWalletConnect,
-    isConnecting,
   } = storeToRefs(useAppStore())
   const { setConnectionExpiry } = useConnectionExpiry()
   const { addWeb3 } = useWeb3Store()
@@ -37,7 +36,6 @@ const connect = async (requestAccounts = true) => {
   const { formatMessage } = useIntl()
 
   try {
-    isConnecting.value = true
     await provider.value?.connect()
 
     if (requestAccounts) {
@@ -69,8 +67,6 @@ const connect = async (requestAccounts = true) => {
         message: getErrorMessage(error),
       },
     })
-  } finally {
-    isConnecting.value = false
   }
 }
 
@@ -81,24 +77,10 @@ const reconnect = async () => {
   connect(false)
 }
 
-/**
- * Parse deep link to be used by mobile app
- *
- * By default WalletConnect uses wc: prefix for deep linking, but this also works with
- * other wallets. We replace with own prefix to ensure it works with our app.
- *
- * @param data
- * @returns
- */
-const deepLinkParser = (data: string) => {
-  return data.replace('wc:', 'network.lukso.universalprofiles.ios:')
-}
-
 export const useWalletConnectProvider = () => {
   return {
     initProvider,
     connect,
     reconnect,
-    deepLinkParser,
   }
 }

shared/config.ts

@@ -94,3 +94,7 @@ export const PROFILE_SHOWCASE_POOL_SIZE = 500
 // asset showcase params
 export const ASSET_SHOWCASE_LIMIT = 4
 export const ASSET_SHOWCASE_POOL_SIZE = 500
+
+// deep link prefix used by Mobile App
+export const MOBILE_APP_DEEP_LINK_PREFIX =
+  'io.universaleverything.universalprofiles'

utils/__tests__/externalUrls.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from 'vitest'
 import {
   universalPageProfileUrl,
   universalSwapsProfileUrl,
+  walletConnectDeepLinkUrl,
 } from '../externalUrls'
 
 describe('universalPageProfileUrl', () => {
@@ -147,3 +148,23 @@ describe('universalSwapsAssetUrl', () => {
     )
   })
 })
+
+describe('walletConnectDeepLinkUrl', () => {
+  test('should produce proper deep link', () => {
+    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/'
+    expect(walletConnectDeepLinkUrl(input)).toBe(expectedOutput)
+  })
+
+  test('throws an error when data is invalid', () => {
+    // @ts-expect-error
+    expect(() => walletConnectDeepLinkUrl()).toThrow('Invalid URL')
+    expect(() => walletConnectDeepLinkUrl('123')).toThrow('Invalid URL')
+    // @ts-expect-error
+    expect(() => walletConnectDeepLinkUrl(null)).toThrow('Invalid URL')
+    // @ts-expect-error
+    expect(() => walletConnectDeepLinkUrl({})).toThrow('Invalid URL')
+  })
+})

utils/externalUrls.ts

@@ -1,11 +1,12 @@
 import assert from 'assert'
 import { isAddress } from 'web3-utils'
 
+import { MOBILE_APP_DEEP_LINK_PREFIX } from '@/shared/config'
+
 /**
  * URL to transaction on blockchain explorer
  *
  * @param transactionHash
- * @returns
  */
 export const explorerTransactionUrl = (transactionHash: string) => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -17,7 +18,6 @@ export const explorerTransactionUrl = (transactionHash: string) => {
  * URL to contract on blockchain explorer
  *
  * @param address
- * @returns
  */
 export const explorerContractUrl = (address?: string | Address) => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -27,8 +27,6 @@ export const explorerContractUrl = (address?: string | Address) => {
 
 /**
  * URL to Transak to buy LYX
- *
- * @returns
  */
 export const transakBuyLyxUrl = () => {
   const connectedProfile = useProfile().connectedProfile()
@@ -53,6 +51,9 @@ export const transakBuyLyxUrl = () => {
   return `${TRANSAK_HOST}/?${queryParamsString(queryParams)}`
 }
 
+/**
+ * URL to Ramp to buy LYX
+ */
 export const rampBuyLyxUrl = () => {
   const connectedProfile = useProfile().connectedProfile()
   const { formatMessage } = useIntl()
@@ -75,8 +76,6 @@ export const rampBuyLyxUrl = () => {
 
 /**
  * URL to profile dashboard on my.universalprofile.cloud
- *
- * @returns
  */
 export const myUpDappDashboardUrl = () => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -86,8 +85,6 @@ export const myUpDappDashboardUrl = () => {
 
 /**
  * URL to landing page on my.universalprofile.cloud
- *
- * @returns
  */
 export const myUpDappBaseUrl = () => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -98,7 +95,7 @@ export const myUpDappBaseUrl = () => {
 /**
  * URL to profile page on universal.page
  *
- * @returns
+ * @param address
  */
 export const universalPageProfileUrl = (address?: Address) => {
   assert(address, 'Address is required')
@@ -111,7 +108,6 @@ export const universalPageProfileUrl = (address?: Address) => {
  *
  * @param address
  * @param tokenId
- * @returns
  */
 export const universalPageAssetUrl = (address?: Address, tokenId?: string) => {
   assert(address, 'Address is required')
@@ -127,7 +123,7 @@ export const universalPageAssetUrl = (address?: Address, tokenId?: string) => {
 /**
  * URL to profile page on universalswaps.io
  *
- * @returns
+ * @param address
  */
 export const universalSwapsProfileUrl = (address?: Address) => {
   assert(address, 'Address is required')
@@ -139,10 +135,33 @@ export const universalSwapsProfileUrl = (address?: Address) => {
  * URL to token page on universalswaps.io
  *
  * @param address
- * @returns
  */
 export const universalSwapsAssetUrl = (address?: Address) => {
   assert(address, 'Address is required')
   assert(isAddress(address), 'Address is not a valid address')
   return `https://universalswaps.io/tokens/lukso/${address.toLowerCase()}`
 }
+
+/**
+ * URL to Mobile App deep link used by Wallet Connect
+ *
+ * @param data
+ */
+export const walletConnectDeepLinkUrl = (data: string) => {
+  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}`
+
+  if (genericLog.enabled) {
+    genericLog(`Mobile App link: ${deepLink}`)
+  }
+
+  return deepLink
+}