Adding NDEF capability #239

lollerfirst · 2024-10-13T22:37:50Z

Read and write cashu tokens to a NFC card through WebNFC amazing NDEFReader.

Lmk if you want to move the relevant code to a store to make it a bit tidier.

prusnak · 2024-10-14T21:02:38Z

Amazing! Love it. I saw the demo in Berlin.

lollerfirst · 2024-10-14T21:29:59Z

Amazing! Love it

Were you there? I haven't seen you around! Wish I met you!

prusnak · 2024-10-15T12:10:51Z

Might it be worth considering adding an option which writes URL https://wallet.cashu.me/?token=cashuB... instead of raw text cashuB... to an NFC card? And even make it the default?

This would be perfect onboarding experience, because this works even if a user has no idea what a cashu token is and how to redeem it.

src/components/SendTokenDialog.vue

src/pages/WalletPage.vue

lollerfirst · 2024-10-18T09:43:01Z

Might it be worth considering adding an option which writes URL https://wallet.cashu.me/?token=cashuB... instead of raw text cashuB... to an NFC card? And even make it the default?

This would be perfect onboarding experience, because this works even if a user has no idea what a cashu token is and how to redeem it.

@prusnak
I have added this feature. It's amazing. Try it out.
Also it seems like NDEFRecord constructor in Chrome is broken and i needs to be bypassed. Luckly I found an example here: https://developer.chrome.com/docs/capabilities/nfc

src/pages/WalletPage.vue

prusnak · 2024-10-18T09:58:06Z

src/components/SendTokenDialog.vue

+                this.scanningCard = false;
+                try {
+                  const tokenURL =
+                    window.location.toString() +


I wonder whether we should use this or just hardcode wallet.cashu.me here

Both approaches have their advantages and disadvantages. What do you think @callebtc?

prusnak · 2024-10-21T09:01:56Z

Since this got raised on Telegram. Maybe we can use this PR to also fix ?token=... -> #token=...:

diff --git a/src-pwa/manifest.json b/src-pwa/manifest.json
index 7bca548..c5e6761 100644
--- a/src-pwa/manifest.json
+++ b/src-pwa/manifest.json
@@ -9,11 +9,11 @@
   "protocol_handlers": [
     {
       "protocol": "web+cashu",
-      "url": "/?token=%s"
+      "url": "/#token=%s"
     },
     {
       "protocol": "web+lightning",
-      "url": "/?lightning=%s"
+      "url": "/#lightning=%s"
     }
   ],
   "icons": [
diff --git a/src/components/SendTokenDialog.vue b/src/components/SendTokenDialog.vue
index 1983838..c3f375c 100644
--- a/src/components/SendTokenDialog.vue
+++ b/src/components/SendTokenDialog.vue
@@ -280,7 +280,7 @@
                 size="md"
                 icon="link"
                 flat
-                @click="copyText(baseURL + '?token=' + sendData.tokensBase64)"
+                @click="copyText(baseURL + '#token=' + sendData.tokensBase64)"
                 ><q-tooltip>Copy link</q-tooltip></q-btn
               >
               <q-btn
@@ -676,7 +676,7 @@ export default defineComponent({
                 try {
                   const tokenURL =
                     window.location.toString() +
-                    "?token=" +
+                    "#token=" +
                     this.sendData.tokensBase64;
                   this.ndef
                     .write(
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index ea3eb8f..d57a0a0 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -410,7 +410,7 @@ export default {
                     const decodedTokenLink = new TextDecoder().decode(
                       message.records[0].data
                     );
-                    const cashuIndex = decodedTokenLink.indexOf("?token=cashu");
+                    const cashuIndex = decodedTokenLink.indexOf("#token=cashu");
                     if (cashuIndex === -1) {
                       throw new Error("not a cashu token");
                     }
diff --git a/src/stores/wallet.ts b/src/stores/wallet.ts
index 2afd88a..dfca241 100644
--- a/src/stores/wallet.ts
+++ b/src/stores/wallet.ts
@@ -1104,7 +1104,7 @@ export const useWalletStore = defineStore("wallet", {
         this.payInvoiceData.input.request = req
         await this.lnurlPayFirst(this.payInvoiceData.input.request);
       } else if (req.indexOf("cashuA") !== -1) {
-        // very dirty way of parsing cashu tokens from either a pasted token or a URL like https://host.com?token=eyJwcm
+        // very dirty way of parsing cashu tokens from either a pasted token or a URL like https://host.com#token=eyJwcm
         receiveStore.receiveData.tokensBase64 = req.slice(req.indexOf("cashuA"));
         this.handleCashuToken()
       } else if (req.indexOf("cashuB") !== -1) {

lollerfirst · 2024-10-21T10:47:36Z

@prusnak

Unfortunately doesn't seem to be enough. Tested it right now and when opening the link Chrome inserts a "/" between the "#" and the token.

https://192.168.1.130:8080/#/token=cashuB...

prusnak · 2024-10-21T10:54:36Z

Unfortunately doesn't seem to be enough.

It seems this is some Vue magic. Not Chrome specific.

lollerfirst · 2024-10-21T11:31:09Z

#244

ok300 · 2024-10-21T15:53:14Z

Might it be worth considering adding an option which writes URL ... instead of raw text cashuB... to an NFC card?

This could bring extra limitations on the UX. AFAIK URLs have max ~2000 chars, so a token has to fit in that.

A V4 token can be, depending on the proofs (inputs) :

1 proof => ~500 chars
2 proofs => ~910 chars
3 proofs => ~1340 chars
4 proofs => ~1760 chars

Maybe this can be validated in the "write NFC" phase?

prusnak · 2024-10-21T16:59:26Z

This could bring extra limitations on the UX. AFAIK URLs have max ~2000 chars, so a token has to fit in that.

Not really. Since only Chrome on Android can read NFC via WebNFC and this browser supports 2MB payload in GET, I don't see how an UX can be limited when compared to the original proposal.

lollerfirst · 2024-11-03T18:35:58Z

Do we want to merge this?

prusnak · 2024-11-03T21:23:12Z

Do we want to merge this?

I am in favor, but cannot do that :)

callebtc · 2024-11-04T12:13:22Z

The functionality is very cool, I would love to merge it but the UI needs work.

prusnak · 2024-11-04T12:20:42Z

but the UI needs work.

Do you have anything particular in mind?

prusnak · 2024-12-01T12:38:33Z

@lollerfirst I think we should add a switch which allows you to choose between the text/URL/binary representation of the token.

It does not have to be a part of this PR, but we should think about the ideal UX for this option chooser.

Options:

text: cashu(A|B)<base64_encoded_token>
URL: https://example.com#token=cashu(A|B)<base64_encoded_token>
binary: craw(A|B)<binary_encoded_token> as per Add spec for binary token serialization nuts#199

lollerfirst · 2024-12-01T13:32:00Z

This can be part of some "NFC settings" in the settings I suppose.

lollerfirst · 2024-12-01T13:37:11Z

Also @prusnak don't know if it interests you but lately I've been focusing on cashu-kvac (the Signal anonymous credentials scheme, but for cashu) which would give the option for making tokens of constant size (~100-200 bytes)

src/pages/WalletPage.vue

Co-authored-by: Pavol Rusnak <[email protected]>

lollerfirst · 2024-12-12T19:13:15Z

Finally managed to fix the "toggle" behaviour for the scanner.

src/components/ReceiveTokenDialog.vue

lollerfirst · 2024-12-13T11:37:38Z

I will be using the encoding choice in the scanner once cashu-ts supports binary tokens

better UI for NFC errors

everything is also prepared for reading/writing binary tokens and we will enable the functionality once it arrives to cashu-ts

nfc: implement reading/writing of text/weburl tokens

lollerfirst · 2024-12-13T17:42:21Z

This works really nice. Although when receiving with NFC it automatically redeems, whereas the other methods only fill the receiveData.tokensBase64 property and then it's the user who decides to redeem by pressing "receive".

Should we conform to that? @prusnak

prusnak · 2024-12-13T18:17:13Z

Yeah, maybe we should not automatically redeem and just prefill the receive form like other methods do.

prusnak

tested ACK

I think we should merge this one now @callebtc

We will follow up with another PR which adds binary encoding of tokens once the encoding/decoding is supported in cashu-ts

prusnak · 2024-12-15T13:56:39Z

the edits commit 8649b5c broke the receive dialog.

When NFC is enabled and Payment Requests are disabled:

the Payment Requests button is still shown
there is no Close Button

When NFC is disabled or Payment Requests are enabled, everything is shown like it should.

lollerfirst added 6 commits October 4, 2024 13:42

NFC tags read/flash

a7e8742

better specify record type + fix error handdler

fa69c6a

mime type text/plain

19d3219

fix error handler

a868ef6

extract and add mint from token

49953cd

disable button if NDEF unsupported.

6872f59

prusnak reviewed Oct 15, 2024

View reviewed changes

src/components/SendTokenDialog.vue Outdated Show resolved Hide resolved

ndefSupported as a var instead of func

78ee630

prusnak reviewed Oct 17, 2024

View reviewed changes

src/pages/WalletPage.vue Outdated Show resolved Hide resolved

tokenURL

ab2a743

prusnak reviewed Oct 18, 2024

View reviewed changes

lollerfirst added 2 commits October 18, 2024 12:16

fix broken index search

ef715f8

move knowThisMintOfTokenJson to mintsStore

ab4fd42

prusnak approved these changes Oct 19, 2024

View reviewed changes

lollerfirst force-pushed the nfc branch from f77f557 to ab4fd42 Compare October 21, 2024 11:14

remove pointless loop in knowThisMintOfTokenJson

f39eb7f

lollerfirst added 4 commits November 23, 2024 19:22

Merge remote-tracking branch 'upstream/main' into nfc

6dc1518

post-merge fixups

93b84ea

use # params for token url

8e613be

Merge remote-tracking branch 'upstream/main' into nfc

4a336eb

prusnak suggested changes Dec 11, 2024

View reviewed changes

src/pages/WalletPage.vue Outdated Show resolved Hide resolved

lollerfirst and others added 2 commits December 12, 2024 14:32

Update src/pages/WalletPage.vue

47fa120

Co-authored-by: Pavol Rusnak <[email protected]>

move button to send dialog

ce43f4b

prusnak suggested changes Dec 13, 2024

View reviewed changes

src/components/ReceiveTokenDialog.vue Outdated Show resolved Hide resolved

lollerfirst added 2 commits December 13, 2024 01:35

encoding settings

7bb2116

remove serial print

29217be

prusnak and others added 4 commits December 13, 2024 13:29

better UI for NFC errors

521cef6

Merge pull request #1 from prusnak/nfc

32eaf0e

better UI for NFC errors

nfc: implement reading/writing of text/weburl tokens

d838db9

everything is also prepared for reading/writing binary tokens and we will enable the functionality once it arrives to cashu-ts

Merge pull request #2 from prusnak/nfc2

d5564fd

nfc: implement reading/writing of text/weburl tokens

remove automatic redeem() on receive

ba82e00

prusnak approved these changes Dec 14, 2024

View reviewed changes

edits

8649b5c

callebtc added 3 commits December 15, 2024 15:13

NFC ux

1bc506a

clean settings

01ff47a

clean

3e546ad

callebtc merged commit e2dd0aa into cashubtc:main Dec 15, 2024
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding NDEF capability #239

Adding NDEF capability #239

lollerfirst commented Oct 13, 2024

prusnak commented Oct 14, 2024 •

edited

Loading

lollerfirst commented Oct 14, 2024

prusnak commented Oct 15, 2024 •

edited

Loading

lollerfirst commented Oct 18, 2024

prusnak Oct 18, 2024

prusnak commented Oct 21, 2024

lollerfirst commented Oct 21, 2024

prusnak commented Oct 21, 2024

lollerfirst commented Oct 21, 2024

ok300 commented Oct 21, 2024

prusnak commented Oct 21, 2024 •

edited

Loading

lollerfirst commented Nov 3, 2024

prusnak commented Nov 3, 2024 •

edited

Loading

callebtc commented Nov 4, 2024

prusnak commented Nov 4, 2024

prusnak commented Dec 1, 2024 •

edited

Loading

lollerfirst commented Dec 1, 2024

lollerfirst commented Dec 1, 2024

lollerfirst commented Dec 12, 2024

lollerfirst commented Dec 13, 2024

lollerfirst commented Dec 13, 2024 •

edited

Loading

prusnak commented Dec 13, 2024 •

edited

Loading

prusnak left a comment

prusnak commented Dec 15, 2024 •

edited

Loading

Adding NDEF capability #239

Adding NDEF capability #239

Conversation

lollerfirst commented Oct 13, 2024

prusnak commented Oct 14, 2024 • edited Loading

lollerfirst commented Oct 14, 2024

prusnak commented Oct 15, 2024 • edited Loading

lollerfirst commented Oct 18, 2024

prusnak Oct 18, 2024

Choose a reason for hiding this comment

prusnak commented Oct 21, 2024

lollerfirst commented Oct 21, 2024

prusnak commented Oct 21, 2024

lollerfirst commented Oct 21, 2024

ok300 commented Oct 21, 2024

prusnak commented Oct 21, 2024 • edited Loading

lollerfirst commented Nov 3, 2024

prusnak commented Nov 3, 2024 • edited Loading

callebtc commented Nov 4, 2024

prusnak commented Nov 4, 2024

prusnak commented Dec 1, 2024 • edited Loading

lollerfirst commented Dec 1, 2024

lollerfirst commented Dec 1, 2024

lollerfirst commented Dec 12, 2024

lollerfirst commented Dec 13, 2024

lollerfirst commented Dec 13, 2024 • edited Loading

prusnak commented Dec 13, 2024 • edited Loading

prusnak left a comment

Choose a reason for hiding this comment

prusnak commented Dec 15, 2024 • edited Loading

prusnak commented Oct 14, 2024 •

edited

Loading

prusnak commented Oct 15, 2024 •

edited

Loading

prusnak commented Oct 21, 2024 •

edited

Loading

prusnak commented Nov 3, 2024 •

edited

Loading

prusnak commented Dec 1, 2024 •

edited

Loading

lollerfirst commented Dec 13, 2024 •

edited

Loading

prusnak commented Dec 13, 2024 •

edited

Loading

prusnak commented Dec 15, 2024 •

edited

Loading