App: show lightning address

Some formatting fixes also sneaked in.

src/App.svelte

@@ -6,7 +6,7 @@
   import SiteCard from './SiteCard.svelte';
   import SiteDeck from './SiteDeck.svelte';
   import InputMask from './InputMask.svelte';
-  
+
   import payways from './payways.js';
   import QR from './QR.svelte';
 
@@ -19,7 +19,7 @@
   import PayFlow from './PayFlow.svelte';
 
   let payway = payways[0];
-  
+
   setTimeout(()=>{
     payway = payways[0];
     accounts[inputId]=null;
@@ -55,17 +55,30 @@
   $: autoMemo = genAutoMemo(payway,
 			    accountComplete && accounts[inputId],
 			    realAmount)
+  let lightningAddress;
+  $: lightningAddress = accountComplete ?
+  genAddress(payway, accounts[inputId], realAmount):""
 
   function lnurlEncode(url) {
     return bech32.encode("LNURL",
 			 bech32.toWords(UTF8.setBytesFromString(url)),2048)
   }
-  
+
   function toHexString(byteArray) {
     return Array.from(byteArray, function(byte) {
       return ('0' + (byte & 0xFF).toString(16)).slice(-2);
     }).join('')
   }
+  function genAddress(payway,account,amount) {
+    if (!account || !payway)
+      return ""
+    const prefix = amount?
+	  ((amount == Math.floor(amount)? ""+amount:
+	    amount.toFixed(2))+payway.currency.toLowerCase()+"-"):""
+    if (account[0]=='+')
+      account=account.slice(1)
+    return prefix + account + "@" + payway.id + ".lnurl-pay.me"
+  }
 
   function genLNURL(payway,account,amount,memo) {
     let params = new URLSearchParams();
@@ -125,7 +138,7 @@
 
     {#key payway}
     <label class="form-label mb-3">{payway.acc}
-      <InputMask 
+      <InputMask
 	unmask
 	bind:value={accounts[inputId]}
 	bind:isComplete={accountComplete}
@@ -163,7 +176,6 @@
       <input bind:value={memo} placeholder="{autoMemo}"
 	     class="form-control"/>
     </label>
-
   </SiteCard>
   <SiteCard>
     {#if lnurl}
@@ -177,45 +189,56 @@
       <div class="form-text mb-2 mt-2">Expecting: {payway.acc.toLowerCase()}</div>
     {/if}
     <div class="d-flex justify-content-center align-items-stretch m-2"
-	   class:invisible={!lnurl}>
-	<!-- {#key lnurl} -->
-	<a href="lightning:{lnurl}">
-	  <QR value={lnurl} size="{230}" />
-	</a>
-	<!-- {/key} -->
-      </div>
-      
-      <div class="d-flex justify-content-center align-items-stretch"
-	   class:invisible={!lnurl}>
-	<p class="form-text">You might want to save image and share it
-	as you like. All form data are present in lnurl: don't share what you wanted to hide.</p>
-      </div>
-      
-      <div class="btn-group flex-wrap mt-auto mb-2"
-	   role="group" class:invisible={!lnurl}>
-	<CTC let:id let:action text={lnurl}>
-	  <button type="button" class="btn btn-outline-secondary"
-		  id={id} on:click={action}>Copy</button>
-	</CTC>
-	{#if canShare}
-	  <button type="button" class="btn btn-outline-secondary"
-		  on:click={()=>{  navigator.share({text:lnurl})}}>Share
-	  </button>
-	{/if}
-	<Tipped let:id>
-	  <a slot="thing" role="button" class="btn btn-outline-secondary"
-	     href="lightning:{lnurl}" {id}>Pay</a>
-	  <div slot="tip">open in your wallet</div>
-	</Tipped>
+	 class:invisible={!lnurl}>
+      <!-- {#key lnurl} -->
+      <a href="lightning:{lnurl}">
+	<QR value={lnurl} size="{230}" />
+      </a>
+      <!-- {/key} -->
+    </div>
+    <div class="btn-group flex-wrap mt-auto mb-2"
+	 role="group" class:invisible={!lnurl}>
+      <CTC let:id let:action text={lnurl}>
+	<button type="button" class="btn btn-outline-secondary"
+		id={id} on:click={action}>Copy</button>
+      </CTC>
+      {#if canShare}
+	<button type="button" class="btn btn-outline-secondary"
+		on:click={()=>{  navigator.share({text:lnurl})}}>Share
+	</button>
+      {/if}
+      <Tipped let:id>
+	<a slot="thing" role="button" class="btn btn-outline-secondary"
+	   href="lightning:{lnurl}" {id}>Pay</a>
+	<div slot="tip">open in your wallet</div>
+      </Tipped>
+
+      <Tipped let:id>
+	<button slot="thing" {id} type="button"
+		class="btn btn-outline-secondary"
+		on:click="{()=>getInvoiceFor=lnurl}">
+	  Invoice</button>
+	<div slot="tip">get an invoice for wallets with no lnurl-pay</div>
+      </Tipped>
+    </div>
+
+    {#if lightningAddress}
+      <CTC let:id let:action force text={lightningAddress}}>
+	<div class="input-group mt-3">
+	  <div class="input-group-prepend">
+	    <span class="input-group-text">
+	      <a href="https://lightningaddress.com/">Lightning address:</a>
+	    </span>
+	  </div>
+	  <div class="user-select-all form-control"
+	       style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+	       on:click={action} id={id}>{lightningAddress}
+	  </div>
+	</div>
+      </CTC>
+    {/if}
+
 
-	<Tipped let:id>
-	  <button slot="thing" {id} type="button"
-		  class="btn btn-outline-secondary"
-		  on:click="{()=>getInvoiceFor=lnurl}">
-	    Invoice</button>
-	  <div slot="tip">get an invoice for wallets with no lnurl-pay</div>
-	</Tipped>
-      </div>
   </SiteCard>
 </SiteDeck>