Stephen more UI

package.json

@@ -36,6 +36,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"lnmessage": "^0.2.1"
+		"lnmessage": "^0.2.1",
+		"qr-code-styling": "^1.6.0-rc.1"
 	}
 }

src/app.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  background: black;
+  color: white
+}
+
+input, textarea { 
+  color: black
+}

src/components/BackButton.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  //import { translate } from '$lib/i18n/translations'
+  import caret from '../icons/caret'
+</script>
+
+<button
+  on:click
+  class="absolute top-0 z-10 left-0 flex items-center pt-5 pb-4 px-3 cursor-pointer font-bold text-inherit w-full bg-white dark:bg-neutral-900"
+>
+  <div class="w-6 cursor-pointer rotate-90">
+    {@html caret}
+  </div>
+  <span>Back</span>
+</button>

src/components/Button.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Icon from "./Icon/Icon.svelte"
+
+    export let format:string = 'primary'
+    export let disabled:boolean = false
+    export let icon:string|null = null
+</script>
+
+<button class={"rounded p-[2px]" + " " + format} on:click disabled={disabled}>
+    <span class="bg-black p-2 rounded flex flex-row items-center justify-center align-center gap-2">
+        <p class="">
+            <slot /> 
+        </p>
+        {#if icon}
+            <span class="icon text-white w-5 h-5">
+                <Icon icon={icon} />
+            </span>
+        {/if}
+    </span>
+
+</button>
+
+<style lang="css">
+    .primary, .primary p {
+        @apply bg-gradient-to-br from-red-500 via-green-500 to-indigo-300;
+    }
+
+    .primary p {
+        @apply bg-clip-text text-transparent;
+    }
+
+    .secondary {
+        @apply bg-white;
+    }
+
+    .primary .icon {
+        @apply text-indigo-300;
+    }
+
+    .primary:disabled {
+        @apply opacity-50;
+    }
+</style>

src/components/Header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Info } from '../types.js'
+
+  export let info: Info
+</script>
+
+<header class="absolute top-0 flex justify-between p-6 w-full items-center">
+  <h1 class="font-black text-3xl">ROYGBIV</h1>
+  {#if info}
+    <div class="flex items-center">
+      <div
+        style="background-color: #{info.color};"
+        class="rounded-full w-8 h-8 overflow-hidden mr-2"
+      />
+      <div class="text-sm font-bold">
+        {info.alias}
+      </div>
+    </div>
+  {/if}
+</header>

src/components/Icon/Icon.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import ArrowRight from './icons/ArrowRight'
+    import ArrowUpCircle from './icons/ArrowUpCircle';
+    import Cross from './icons/Cross';
+    const icons = [
+        {
+            name: 'ArrowRight',
+            icon: ArrowRight
+        },
+        {
+            name: 'ArrowUpCircle',
+            icon: ArrowUpCircle
+        },
+        {
+            name: 'Cross',
+            icon: Cross
+        }
+    ]
+
+    type IconName = keyof typeof icons
+
+    export let icon:string
+</script>
+
+<span>
+    {@html icons.find(({name}) => name === icon)?.icon}
+</span>

src/components/Icon/icons/ArrowRight.ts

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" data-v-4fa90e7f=""><path fill-rule="evenodd" d="M13.483 4.47a.75.75 0 011.06 0l6.988 7a.75.75 0 010 1.06l-6.988 7a.75.75 0 01-1.061-1.06l5.709-5.719L3 12.762a.75.75 0 01-.002-1.5l16.194-.01-5.711-5.722a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>`

src/components/Icon/icons/ArrowUpCircle.ts

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`

src/components/Icon/icons/Cross.ts

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" data-v-4fa90e7f=""><path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0l12 12a.75.75 0 11-1.06 1.06l-12-12a.75.75 0 010-1.06z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M18.53 5.47a.75.75 0 010 1.06l-12 12a.75.75 0 01-1.06-1.06l12-12a.75.75 0 011.06 0z" clip-rule="evenodd"></path></svg>`

src/components/QR.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition'
+  import { onDestroy } from 'svelte'
+  import copy from '../icons/copy'
+  import photo from '../icons/photo'
+  import check from '../icons/check'
+  import { truncateValue } from '../utils'
+  import { browser } from '$app/environment'
+  import type QRCodeStyling from 'qr-code-styling'
+
+  export let value: string | null
+  export let size = Math.min(window.innerWidth - 50, 400)
+
+  export function getQrImage() {
+    return canvas?.toDataURL()
+  }
+
+  const truncated = truncateValue(value as string)
+
+  let canvas: HTMLCanvasElement | null = null
+  let node: HTMLDivElement
+  let qrCode: QRCodeStyling
+  let rendered = false
+
+  $: if (browser && value && node && !rendered) {
+    import('qr-code-styling').then(({ default: QRCodeStyling }) => {
+      qrCode = new QRCodeStyling({
+        width: size,
+        height: size,
+        type: 'svg',
+        data: `lightning:${value}`.toUpperCase(),
+        imageOptions: { hideBackgroundDots: false, imageSize: 0.25, margin: 0 },
+        dotsOptions: {
+          type: 'dots',
+          color: '#ec4899',
+          gradient: {
+            type: 'radial',
+            rotation: 0.017453292519943295,
+            colorStops: [
+              { offset: 0, color: '#f97316' },
+              { offset: 1, color: '#d946ef' }
+            ]
+          }
+        },
+        backgroundOptions: { color: '#ffffff' },
+        cornersSquareOptions: { type: 'extra-rounded', color: '#22c55e' },
+        cornersDotOptions: { type: 'dot', color: '#000000' }
+      })
+
+      qrCode.append(node)
+      rendered = true
+    })
+  }
+
+  let copySuccess = false
+  let copyTimeout: NodeJS.Timeout
+
+  async function copyImage() {
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': qrCode.getRawData() as Promise<Blob>
+        })
+      ])
+
+      copySuccess = true
+
+      copyTimeout = setTimeout(() => (copySuccess = false), 3000)
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
+  onDestroy(() => {
+    copyTimeout && clearTimeout(copyTimeout)
+  })
+</script>
+
+<div
+  in:fade|local={{ duration: 250 }}
+  class="border-2 border-neutral-400 rounded-lg shadow-md max-w-full p-2 md:p-4 flex flex-col justify-center items-center relative"
+>
+  <div class="rounded overflow-hidden transition-opacity" bind:this={node} />
+  <div class="absolute -bottom-9 right-0 mt-2 flex items-center gap-x-2">
+    <button on:click={copyImage} class="flex items-center">
+      {#if copySuccess}
+        <div in:fade|local={{ duration: 250 }} class="w-8 text-utility-success">{@html check}</div>
+      {:else}
+        <div in:fade|local={{ duration: 250 }} class="w-8">{@html copy}</div>
+      {/if}
+    </button>
+    <button
+      on:click={() => qrCode.download({ extension: 'png', name: truncated })}
+      class="flex items-center"
+    >
+      <div class="w-8">{@html photo}</div>
+    </button>
+  </div>
+</div>

src/components/Slide.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { fly } from 'svelte/transition'
+  import BackButton from './BackButton.svelte'
+  import { browser } from '$app/environment'
+
+  export let back: (() => void) | null = null
+  export let direction: 'left' | 'right' = 'left'
+  export let backText: string | undefined = undefined
+
+  let mounted = false
+
+  onMount(() => (mounted = true))
+
+  function getValue() {
+    if (browser) {
+      const { innerWidth } = window
+      return innerWidth > 500 ? 500 : innerWidth
+    }
+    return 0
+  }
+
+  const x = direction === 'left' ? getValue() : -getValue()
+</script>
+
+{#if mounted}
+  <div class="">
+    {#if back}
+      <BackButton on:click={back} />
+    {/if}
+
+    <div in:fly|local={{ x, duration: 250 }} class="flex justify-center h-full overflow-auto">
+      <slot />
+    </div>
+  </div>
+{/if}

src/icons/caret.ts

@@ -0,0 +1,12 @@
+export default `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 30 30"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.19485 10.3661L15 16.9822L21.8051 10.3661C22.3073 9.87796 23.1213 9.87796 23.6234 10.3661C24.1255 10.8543 24.1255 11.6457 23.6234 12.1339L15.9091 19.6339C15.407 20.122 14.593 20.122 14.0909 19.6339L6.37658 12.1339C5.87447 11.6457 5.87447 10.8543 6.37658 10.3661C6.87868 9.87796 7.69275 9.87796 8.19485 10.3661Z"
+    fill="currentColor"
+  />
+</svg>`

src/icons/check.ts

@@ -0,0 +1,9 @@
+export default `<svg width="100%" height="100%" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7 16.5106L13.3492 22L22.5069 8"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>`

src/icons/close.ts

@@ -0,0 +1,22 @@
+export default `<svg width="100%" height="100%" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <line
+    x1="10.4142"
+    y1="10.25"
+    x2="20.3137"
+    y2="20.1495"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <line
+    x1="20.25"
+    y1="10.4142"
+    x2="10.3505"
+    y2="20.3137"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>`

src/icons/copy.ts

@@ -0,0 +1,5 @@
+export default `<svg width="100%" height="100%" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.5" y="9.5" width="10" height="14" rx="1.5" stroke="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 7H20C20.5523 7 21 7.44772 21 8V19C21 19.5523 20.5523 20 20 20H19V21H20C21.1046 21 22 20.1046 22 19V8C22 6.89543 21.1046 6 20 6H13C11.8954 6 11 6.89543 11 8V9H12V8C12 7.44772 12.4477 7 13 7Z" fill="currentColor"/>
+</svg>
+`

src/icons/photo.ts

@@ -0,0 +1,8 @@
+export default `
+<svg width="100%" height="100%" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7" y="7" width="15.5" height="15.5" rx="1" stroke="currentColor"/>
+<circle cx="11.7692" cy="11.7692" r="1.19231" stroke="currentColor"/>
+<path d="M9.98077 19.5192L11.7692 16.5385L13.5577 19.5192L16.5385 14.75L19.5192 19.5192" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+`