Add CBOR token v4 support (#223)

* add CBOR token v4 support with cashu-ts 1.1.0-rc1 from branch v1.1.0-rc1-fix-base64url

* add cursor

* add all cashu-ts files

* only dist

* update

* use cashu-ts from npm

package.json

@@ -20,51 +20,52 @@
     "@capacitor/clipboard": "^6.0.0",
     "@capacitor/core": "^6.0.0",
     "@capacitor/ios": "^6.0.0",
-    "@cashu/cashu-ts": "file:src/contrib/cashu-ts",
+    "@cashu/cashu-ts": "^1.1.0-2",
+    "@cashu/crypto": "^0.2.7",
     "@chenfengyuan/vue-qrcode": "^2.0.0",
     "@gandlaf21/bc-ur": "^1.1.12",
-    "@noble/hashes": "^1.3.0",
+    "@noble/hashes": "^1.4.0",
     "@noble/secp256k1": "^2.1.0",
     "@nostr-dev-kit/ndk": "^2.8.1",
     "@quasar/extras": "^1.16.11",
     "@quasar/icongenie": "^4.0.0",
-    "@vueuse/core": "^10.0.2",
-    "axios": "^1.3.3",
+    "@vueuse/core": "^10.9.0",
+    "axios": "^1.6.8",
     "bech32": "^2.0.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.37.0",
     "date-fns": "^3.6.0",
     "light-bolt11-decoder": "^3.1.1",
     "nostr-tools": "^2.5.2",
-    "pinia": "^2.0.35",
+    "pinia": "^2.1.7",
     "qr-scanner": "^1.4.2",
-    "qrcode": "^1.5.1",
-    "quasar": "^2.15.4",
+    "qrcode": "^1.5.3",
+    "quasar": "^2.16.2",
     "underscore": "^1.13.6",
-    "vue": "^3.2.47",
-    "vue-router": "^4.0.0"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@quasar/app-vite": "^1.8.5",
-    "@types/node": "^20.2.1",
+    "@quasar/app-vite": "^1.9.3",
+    "@types/node": "^20.12.11",
     "@types/underscore": "^1.11.15",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "@vue/test-utils": "^2.0.0",
-    "autoprefixer": "^10.4.14",
-    "electron": "^23.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.19",
+    "electron": "^23.3.13",
     "electron-packager": "^15.5.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "prettier": "^2.5.1",
-    "typescript": "^5.0.4",
-    "workbox-build": "^6.5.4",
-    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4"
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.4.5",
+    "workbox-build": "^6.6.1",
+    "workbox-cacheable-response": "^6.6.1",
+    "workbox-core": "^6.6.1",
+    "workbox-expiration": "^6.6.1",
+    "workbox-precaching": "^6.6.1",
+    "workbox-routing": "^6.6.1",
+    "workbox-strategies": "^6.6.1"
   },
   "engines": {
     "node": ">=16.11.0",

src/components/ReceiveTokenDialog.vue

@@ -72,7 +72,7 @@
               ? addMintBlocking
                 ? 'Adding mint ...'
                 : 'Receive'
-              : 'Add mint'
+              : 'Add mint and receive'
           "
         >
         </q-btn>
@@ -179,6 +179,7 @@ export default defineComponent({
       "generateKeypair",
       "showLastKey",
     ]),
+    ...mapActions(useMintsStore, ["addMint"]),
     knowThisMintOfTokenJson: function (tokenJson) {
       const mintStore = useMintsStore();
       // check if we have all mints
@@ -214,20 +215,23 @@ export default defineComponent({
       }
       // check if we have all mints
       if (!this.knowThisMintOfTokenJson(tokenJson)) {
-        // pop up add mint dialog warning
-        // hack! The "add mint" component is in SettingsView which may now
-        // have been loaded yet. We switch the tab to settings to make sure
-        // that it loads. Remove this code when the TrustMintComnent is refactored!
-        uIStore.setTab("mints");
-        // hide the receive dialog
-        receiveStore.showReceiveTokens = false;
-        // set the mint to add
-        this.addMintData = { url: token.getMint(tokenJson) };
-        // show the add mint dialog
-        this.showAddMintDialog = true;
-        // show the token receive dialog again for the next attempt
-        receiveStore.showReceiveTokens = true;
-        return;
+        // // pop up add mint dialog warning
+        // // hack! The "add mint" component is in SettingsView which may now
+        // // have been loaded yet. We switch the tab to settings to make sure
+        // // that it loads. Remove this code when the TrustMintComnent is refactored!
+        // uIStore.setTab("mints");
+        // // hide the receive dialog
+        // receiveStore.showReceiveTokens = false;
+        // // set the mint to add
+        // this.addMintData = { url: token.getMint(tokenJson) };
+        // // show the add mint dialog
+        // this.showAddMintDialog = true;
+        // // show the token receive dialog again for the next attempt
+        // receiveStore.showReceiveTokens = true;
+        // return;
+
+        // add the mint
+        await this.addMint( { url: token.getMint(tokenJson) });
       }
       // redeem the token
       await this.redeem(receiveStore.receiveData.tokensBase64);

src/components/SendTokenDialog.vue

@@ -207,8 +207,9 @@
               </vue-qrcode>
             </q-responsive>
           </div>
-          <div class="q-pb-xs q-ba-none q-gutter-sm" v-if="showAnimatedQR">
+          <div class="q-pb-xs q-ba-none q-gutter-sm">
             <q-btn
+              v-if="showAnimatedQR"
               flat
               style="font-size: 12px"
               color="grey"
@@ -219,6 +220,7 @@
               Speed: {{ fragmentSpeedLabel }}
             </q-btn>
             <q-btn
+              v-if="showAnimatedQR"
               flat
               style="font-size: 12px"
               class="q-ma-none"
@@ -228,6 +230,13 @@
               <q-icon name="zoom_in" style="margin-right: 8px"></q-icon>
               Size: {{ fragmentLengthLabel }}
             </q-btn>
+            <q-badge
+                :color="!isV4Token ? 'primary' : 'grey'"
+                :label="isV4Token ? 'V4' : 'V3'"
+                class="q-my-sm q-mx-md cursor-pointer"
+                @click="toggleTokenEncoding"
+                :outline="isV4Token"
+              />
           </div>
           <q-card-section class="q-pa-sm">
             <div class="row justify-center">
@@ -342,6 +351,7 @@ import { Buffer } from "buffer";
 import { useCameraStore } from "src/stores/camera";
 import { useP2PKStore } from "src/stores/p2pk";
 import TokenInformation from "components/TokenInformation.vue";
+import { getDecodedToken, getEncodedTokenV4, getEncodedToken } from "@cashu/cashu-ts";
 
 import { mapActions, mapState, mapWritableState } from "pinia";
 import ChooseMint from "components/ChooseMint.vue";
@@ -378,6 +388,7 @@ export default defineComponent({
       fragmentIntervalFast: 150,
       framentInervalSlow: 500,
       fragmentSpeedLabel: "F",
+      isV4Token: false,
     };
   },
   computed: {
@@ -464,6 +475,8 @@ export default defineComponent({
         this.qrCodeFragment = "";
         this.startQrCodeLoop();
       }
+      // set isV4Token to true if token starts with 'cashuB'
+      this.isV4Token = val.startsWith("cashuB");
     },
     showSendTokens: function (val) {
       if (val) {
@@ -531,6 +544,7 @@ export default defineComponent({
       const ur = UR.fromBuffer(messageBuffer);
       const firstSeqNum = 0;
       this.encoder = new UREncoder(ur, this.currentFragmentLength, firstSeqNum);
+      clearInterval(this.qrInterval);
       this.qrInterval = setInterval(() => {
         this.qrCodeFragment = this.encoder.nextPart();
       }, this.currentFragmentInterval);
@@ -554,7 +568,6 @@ export default defineComponent({
         "### this.currentFragmentInterval",
         this.currentFragmentInterval
       );
-      clearInterval(this.qrInterval);
       this.startQrCodeLoop();
     },
     changeSize: function () {
@@ -570,9 +583,23 @@ export default defineComponent({
         this.fragmentLengthLabel = "M";
       }
       console.log("### this.currentFragmentLength", this.currentFragmentLength);
-      clearInterval(this.qrInterval);
       this.startQrCodeLoop();
     },
+    toggleTokenEncoding: function () {
+      const decodedToken = getDecodedToken(this.sendData.tokensBase64);
+      // if the token starts with 'cashuA', it is a v3 token
+      // if it starts with 'cashuB', it is a v4 token
+      if (this.sendData.tokensBase64.startsWith("cashuA")) {
+        this.sendData.tokensBase64 = getEncodedTokenV4(
+          decodedToken
+        );
+      } else {
+        this.sendData.tokensBase64 = getEncodedToken(
+          decodedToken
+        );
+
+      }
+    },
     deleteThisToken: function () {
       this.deleteToken(this.sendData.tokensBase64);
       this.showSendTokens = false;

src/components/TokenInformation.vue

@@ -5,7 +5,7 @@
         <q-icon name="toll" size="xs" class="q-mr-sm" />
         <strong>{{ displayUnit }} </strong>
       </q-chip>
-      <q-chip outline class="q-pa-md">
+      <q-chip outline class="q-pa-md q-ml-md">
         <q-icon name="account_balance" size="xs" class="q-mr-xs" />
         {{ tokenMintUrl }}
         <q-spinner-hourglass v-if="addMintBlocking" size="sm" class="q-ml-sm" />