support webln fund and withdrawal

components/invoice.js

@@ -14,5 +14,5 @@ export function Invoice ({ invoice }) {
     status = 'expired'
   }
 
-  return <LnQR value={invoice.bolt11} statusVariant={variant} status={status} />
+  return <LnQR webLn value={invoice.bolt11} statusVariant={variant} status={status} />
 }

components/lnqr.js

@@ -1,10 +1,23 @@
 import QRCode from 'qrcode.react'
 import { CopyInput, InputSkeleton } from './form'
 import InvoiceStatus from './invoice-status'
+import { requestProvider } from 'webln'
+import { useEffect } from 'react'
 
-export default function LnQR ({ value, statusVariant, status }) {
+export default function LnQR ({ value, webLn, statusVariant, status }) {
   const qrValue = 'lightning:' + value.toUpperCase()
 
+  useEffect(async () => {
+    if (webLn) {
+      try {
+        const provider = await requestProvider()
+        provider.sendPayment(value)
+      } catch (e) {
+        console.log(e)
+      }
+    }
+  }, [])
+
   return (
     <>
       <a className='d-block' href={qrValue}>

components/me.js

@@ -10,6 +10,7 @@ export function MeProvider ({ children }) {
   {
     me {
       id
+      name
       sats
       stacked
       freePosts

package-lock.json

@@ -40,6 +40,7 @@
         "sass": "^1.32.8",
         "secp256k1": "^4.0.2",
         "swr": "^0.5.4",
+        "webln": "^0.2.2",
         "yup": "^0.32.9"
       },
       "devDependencies": {
@@ -996,6 +997,14 @@
       "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.2.tgz",
       "integrity": "sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w=="
     },
+    "node_modules/@types/chrome": {
+      "version": "0.0.74",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.74.tgz",
+      "integrity": "sha512-hzosS5CkQcIKCgxcsV2AzbJ36KNxG/Db2YEN/erEu7Boprg+KpMDLBQqKFmSo+JkQMGqRcicUyqCowJpuT+C6A==",
+      "dependencies": {
+        "@types/filesystem": "*"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -1041,6 +1050,19 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/filesystem": {
+      "version": "0.0.32",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.32.tgz",
+      "integrity": "sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==",
+      "dependencies": {
+        "@types/filewriter": "*"
+      }
+    },
+    "node_modules/@types/filewriter": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.29.tgz",
+      "integrity": "sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ=="
+    },
     "node_modules/@types/fs-capacitor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/fs-capacitor/-/fs-capacitor-2.0.0.tgz",
@@ -11123,6 +11145,14 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
+    "node_modules/webln": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/webln/-/webln-0.2.2.tgz",
+      "integrity": "sha512-U/fKQNb0E/lld8U4QFAquH/qaBUpqsn64PoiwCcHbz9c8ENKzFk60XNOnlWtNuEqBX33BcP+03GI029FRDfGqA==",
+      "dependencies": {
+        "@types/chrome": "0.0.74"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -12208,6 +12238,14 @@
       "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.2.tgz",
       "integrity": "sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w=="
     },
+    "@types/chrome": {
+      "version": "0.0.74",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.74.tgz",
+      "integrity": "sha512-hzosS5CkQcIKCgxcsV2AzbJ36KNxG/Db2YEN/erEu7Boprg+KpMDLBQqKFmSo+JkQMGqRcicUyqCowJpuT+C6A==",
+      "requires": {
+        "@types/filesystem": "*"
+      }
+    },
     "@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -12253,6 +12291,19 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/filesystem": {
+      "version": "0.0.32",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.32.tgz",
+      "integrity": "sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==",
+      "requires": {
+        "@types/filewriter": "*"
+      }
+    },
+    "@types/filewriter": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.29.tgz",
+      "integrity": "sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ=="
+    },
     "@types/fs-capacitor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/fs-capacitor/-/fs-capacitor-2.0.0.tgz",
@@ -19992,6 +20043,14 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
+    "webln": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/webln/-/webln-0.2.2.tgz",
+      "integrity": "sha512-U/fKQNb0E/lld8U4QFAquH/qaBUpqsn64PoiwCcHbz9c8ENKzFk60XNOnlWtNuEqBX33BcP+03GI029FRDfGqA==",
+      "requires": {
+        "@types/chrome": "0.0.74"
+      }
+    },
     "whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",

package.json

@@ -42,6 +42,7 @@
     "sass": "^1.32.8",
     "secp256k1": "^4.0.2",
     "swr": "^0.5.4",
+    "webln": "^0.2.2",
     "yup": "^0.32.9"
   },
   "engines": {

pages/wallet.js

@@ -9,6 +9,8 @@ import LayoutCenter from '../components/layout-center'
 import InputGroup from 'react-bootstrap/InputGroup'
 import { WithdrawlSkeleton } from './withdrawals/[id]'
 import { useMe } from '../components/me'
+import { useEffect } from 'react'
+import { requestProvider } from 'webln'
 
 export default function Wallet () {
   return (
@@ -102,8 +104,11 @@ export const WithdrawlSchema = Yup.object({
     .min(0, 'must be positive').integer('must be whole')
 })
 
+const MAX_FEE_DEFAULT = 10
+
 export function WithdrawlForm () {
   const router = useRouter()
+  const me = useMe()
 
   const [createWithdrawl, { called, error }] = useMutation(gql`
     mutation createWithdrawl($invoice: String!, $maxFee: Int!) {
@@ -112,6 +117,20 @@ export function WithdrawlForm () {
       }
   }`)
 
+  useEffect(async () => {
+    try {
+      const provider = await requestProvider()
+      console.log(me)
+      const { paymentRequest: invoice } = await provider.makeInvoice({
+        defaultMemo: `Withdrawal for @${me.name} on SN`
+      })
+      const { data } = await createWithdrawl({ variables: { invoice, maxFee: MAX_FEE_DEFAULT } })
+      router.push(`/withdrawals/${data.createWithdrawl.id}`)
+    } catch (e) {
+      console.log(e)
+    }
+  }, [])
+
   if (called && !error) {
     return <WithdrawlSkeleton status='sending' />
   }
@@ -123,7 +142,7 @@ export function WithdrawlForm () {
         className='pt-3'
         initial={{
           invoice: '',
-          maxFee: 0
+          maxFee: MAX_FEE_DEFAULT
         }}
         initialError={error ? error.toString() : undefined}
         schema={WithdrawlSchema}