1.3.0-0.3.0: Feature - URL Protocol Handlers (#101)

* Add url protocol handlers

* Add register method

* Fix versioning

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-app",
-  "version": "1.3.0-0.2.0",
+  "version": "1.3.0-0.3.0",
   "scripts": {
     "dev": "vite dev",
     "dev-http": "vite dev --mode http",

src/lib/utils.ts

@@ -330,7 +330,10 @@ export async function getBitcoinExchangeRate(): Promise<BitcoinExchangeRates | n
 export const noop = () => {}
 
 export function isPWA(): boolean {
-  return window.matchMedia('(display-mode: standalone)').matches
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    window.matchMedia('(display-mode: fullscreen)').matches
+  )
 }
 
 export function parseNodeAddress(address: string): ParsedNodeAddress {

src/routes/+page.svelte

@@ -2,7 +2,7 @@
   import { fade } from 'svelte/transition'
   import { translate } from '$lib/i18n/translations'
   import { funds$, nodeInfo$, settings$ } from '$lib/streams'
-  import { calculateBalance } from '$lib/utils'
+  import { calculateBalance, isPWA, logger } from '$lib/utils'
   import Spinner from '$lib/elements/Spinner.svelte'
   import Value from '$lib/components/Value.svelte'
   import { convertValue } from '$lib/conversion'
@@ -11,6 +11,7 @@
   import ClamsLogo from '$lib/icons/ClamsLogo.svelte'
   import arrow from '$lib/icons/arrow'
   import qr from '$lib/icons/qr'
+  import { browser } from '$app/environment'
 
   const buttons = [
     { key: 'send', icon: arrow, styles: 'rotate-180' },
@@ -35,6 +36,15 @@
       from: BitcoinDenomination.msats,
       to: $settings$.secondaryDenomination
     })
+
+  if (browser && !isPWA()) {
+    try {
+      logger.info('Attemptin to register protocol handler')
+      navigator.registerProtocolHandler('bitcoin', '/send?destination=%s')
+    } catch (error) {
+      logger.warn('Could not register bitcoin protocol handler')
+    }
+  }
 </script>
 
 <svelte:head>

src/routes/send/+page.svelte

@@ -13,10 +13,12 @@
   import { translate } from '$lib/i18n/translations'
   import lightning from '$lib/lightning'
   import { createRandomHex, splitDestination } from '$lib/utils'
+  import type { PageData } from './$types'
+
+  export let data: PageData
 
   let previousSlide = 0
   let slide = 0
-
   let errorMsg = ''
 
   function next() {
@@ -46,8 +48,8 @@
   }
 
   const sendPayment$ = new SvelteSubject<SendPayment>({
-    destination: '',
-    type: null,
+    destination: data.destination || '',
+    type: data.type || null,
     description: '',
     expiry: null,
     timestamp: null,

src/routes/send/+page.ts

@@ -0,0 +1,20 @@
+import { getPaymentType, splitDestination } from '$lib/utils'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ url }) => {
+  const destination = url.searchParams.get('destination')
+
+  if (destination) {
+    const strippedDestination = destination.includes('//')
+      ? destination.replace('//', '')
+      : destination
+
+    const [prefix, formattedDestination] = splitDestination(strippedDestination)
+    const type = getPaymentType(prefix, formattedDestination)
+
+    return {
+      destination: formattedDestination,
+      type
+    }
+  }
+}

static/manifest.webmanifest

@@ -24,5 +24,22 @@
     }
   ],
   "theme_color": "#6305f0",
-  "background_color": "#fafafa"
+  "background_color": "#fafafa",
+  "protocol_handlers": [
+    {
+      "name": "Clams",
+      "protocol": "bitcoin",
+      "url": "/send?destination=%s"
+    },
+    {
+      "name": "Clams",
+      "protocol": "web+lightning",
+      "url": "/send?destination=%s"
+    },
+    {
+      "name": "Clams",
+      "protocol": "web+lnurl",
+      "url": "/send?destination=%s"
+    }
+  ]
 }