Fix P2PK key generation and display (#216)

* p2pk in receive * fix units * fix key generation * spell button * generate keypair on first press
cashubtc · Aug 16, 2024 · 518600b · 518600b
1 parent 4158c88
commit 518600b
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 36 deletions.
diff --git a/src/components/BalanceView.vue b/src/components/BalanceView.vue
@@ -3,7 +3,7 @@
     <q-card-section class="q-mt-sm q-py-xs"> -->
   <div class="q-pt-xl q-pb-md">
     <div class="row justify-center q-pb-lg">
-      <ToggleUnit class="q-mt-lg q-mb-none" />
+      <ToggleUnit class="q-mt-lg q-mb-none" :balanceView="true" />
     </div>
     <transition
       appear
@@ -47,7 +47,9 @@
                     )
                   }}
                 </strong>
-                <strong v-if="this.activeUnit == 'usd'">
+                <strong
+                  v-if="this.activeUnit == 'usd' || this.activeUnit == 'eur'"
+                >
                   {{
                     formatCurrency(
                       (getTotalBalance / 100 / bitcoinPrice) * 100000000,

diff --git a/src/components/P2PKDialog.vue b/src/components/P2PKDialog.vue
@@ -18,43 +18,39 @@
           <q-card-section class="q-pa-sm">
             <div class="row justify-center">
               <q-item-label overline class="q-mb-sm q-pt-md text-white">
-                P2PK Lock</q-item-label
+                P2PK Key</q-item-label
               >
             </div>
-            <div class="row justify-center q-py-md">
-              <q-item-label style="font-size: 28px" class="text-weight-bold">
-                <q-spinner-dots
-                  v-if="runnerActive"
-                  color="primary"
-                  size="0.8em"
-                  class="q-mr-md"
-                />
-                <q-icon
-                  name="lock"
-                  :color="showP2PKData.used ? 'red' : 'green'"
-                  class="q-mr-sm"
-                  size="sm"
-                />
-              </q-item-label>
-            </div>
             <div v-if="showP2PKData.used" class="row justify-center q-pt-sm">
               <q-item-label
                 caption
                 class="text-weight-light text-white"
                 style="font-size: 14px"
-                >Warning: You have already used this lock before.</q-item-label
+                >Warning: You have already used this lock before</q-item-label
               >
             </div>
             <div v-else class="row justify-center q-pt-sm">
               <q-item-label
                 caption
                 class="text-weight-light text-white"
                 style="font-size: 14px"
-                >You can receive ecash locked to this key.</q-item-label
+                >Receive ecash locked to this key</q-item-label
               >
             </div>
           </q-card-section>
         </div>
+        <q-btn
+          class="q-mx-xs q-px-md q-mt-md"
+          size="md"
+          color="primary"
+          flat
+          rounded
+          dense
+          @click="newKeys"
+        >
+          <q-icon name="refresh" class="q-pr-sm" size="xs" />
+          Generate new key</q-btn
+        >
         <div class="row q-mt-lg">
           <q-btn
             class="q-mx-xs"
@@ -86,11 +82,15 @@ export default defineComponent({
     return {};
   },
   computed: {
-    ...mapState(useP2PKStore, ["p2pkKeys", "showP2PKData"]),
+    ...mapState(useP2PKStore, ["p2pkKeys", "showP2PKData", "showLastKey"]),
     ...mapWritableState(useP2PKStore, ["showP2PKDialog"]),
   },
   methods: {
     ...mapActions(useP2PKStore, ["generateKeypair", "showKeyDetails"]),
+    newKeys: function () {
+      this.generateKeypair();
+      this.showLastKey();
+    },
   },
 });
 </script>
diff --git a/src/components/ReceiveTokenDialog.vue b/src/components/ReceiveTokenDialog.vue
@@ -11,6 +11,18 @@
           <div class="col-10">
             <span class="text-h6">Receive Ecash</span>
           </div>
+          <q-btn
+            unelevated
+            class="q-mx-none"
+            v-if="!receiveData.tokensBase64.length"
+            @click="handleLockBtn"
+          >
+            <q-icon name="lock_outline" class="q-pr-sm" />
+          </q-btn>
+        </div>
+        <div>
+          <!-- P2PK DIALOG -->
+          <P2PKDialog v-model="showP2PKDialog" />
         </div>
         <q-input
           round
@@ -21,7 +33,15 @@
           autofocus
           class="q-mb-lg"
           @keyup.enter="receveIfDecodes"
-        ></q-input>
+        >
+          <template v-if="receiveData.tokensBase64" v-slot:append>
+            <q-icon
+              name="close"
+              class="cursor-pointer"
+              @click="receiveData.tokensBase64 = ''"
+            />
+          </template>
+        </q-input>
       </div>
       <div
         class="row"
@@ -45,7 +65,8 @@
           color="primary"
           rounded
           class="q-mr-sm"
-          :disabled="!decodeToken(receiveData.tokensBase64) || addMintBlocking"
+          v-if="decodeToken(receiveData.tokensBase64)"
+          :disabled="addMintBlocking"
           :label="
             knowThisMint
               ? addMintBlocking
@@ -68,17 +89,21 @@
         <q-btn
           unelevated
           v-if="canPasteFromClipboard && !receiveData.tokensBase64.length"
-          icon="content_paste"
           @click="pasteToParseDialog"
-          ><q-tooltip>Paste</q-tooltip></q-btn
+          class="q-ml-none q-pl-none"
+        >
+          <q-icon name="content_paste" class="q-pr-sm" />Paste</q-btn
         >
         <q-btn
           unelevated
-          icon="qr_code_scanner"
-          class="q-mx-0"
+          class="q-mx-none"
           v-if="hasCamera && !receiveData.tokensBase64.length"
           @click="showCamera"
-        ></q-btn>
+        >
+          <q-icon name="qr_code_scanner" class="q-pr-sm" />
+          Scan</q-btn
+        >
+
         <q-btn v-close-popup rounded flat color="grey" class="q-ml-auto"
           >Close</q-btn
         >
@@ -97,6 +122,7 @@ import { useTokensStore } from "src/stores/tokens";
 import { useCameraStore } from "src/stores/camera";
 import { useP2PKStore } from "src/stores/p2pk";
 import token from "src/js/token";
+import P2PKDialog from "./P2PKDialog.vue";
 
 import { mapActions, mapState, mapWritableState } from "pinia";
 // import ChooseMint from "components/ChooseMint.vue";
@@ -107,10 +133,13 @@ export default defineComponent({
   mixins: [windowMixin],
   components: {
     TokenInformation,
+    P2PKDialog,
   },
   props: {},
   data: function () {
-    return {};
+    return {
+      showP2PKDialog: false,
+    };
   },
   computed: {
     ...mapWritableState(useReceiveTokensStore, [
@@ -125,6 +154,7 @@ export default defineComponent({
     ]),
     ...mapWritableState(useMintsStore, ["addMintData", "showAddMintDialog"]),
     ...mapState(useCameraStore, ["hasCamera"]),
+    ...mapState(useP2PKStore, ["p2pkKeys"]),
     canPasteFromClipboard: function () {
       return (
         window.isSecureContext &&
@@ -144,7 +174,11 @@ export default defineComponent({
     ...mapActions(useWalletStore, ["redeem"]),
     ...mapActions(useCameraStore, ["closeCamera", "showCamera"]),
     ...mapActions(useTokensStore, ["addPendingToken"]),
-    ...mapActions(useP2PKStore, ["getPrivateKeyForP2PKEncodedToken"]),
+    ...mapActions(useP2PKStore, [
+      "getPrivateKeyForP2PKEncodedToken",
+      "generateKeypair",
+      "showLastKey",
+    ]),
     knowThisMintOfTokenJson: function (tokenJson) {
       const mintStore = useMintsStore();
       // check if we have all mints
@@ -212,6 +246,13 @@ export default defineComponent({
     getMint: function (decoded_token) {
       return token.getMint(decoded_token);
     },
+    handleLockBtn: function () {
+      this.showP2PKDialog = !this.showP2PKDialog;
+      if (!this.p2pkKeys.length || !this.showP2PKDialog) {
+        this.generateKeypair();
+      }
+      this.showLastKey();
+    },
     receveIfDecodes: function () {
       try {
         const decodedToken = this.decodeToken(this.receiveData.tokensBase64);

diff --git a/src/components/ToggleUnit.vue b/src/components/ToggleUnit.vue
@@ -4,7 +4,7 @@
     outline
     color="primary"
     @click="toggleUnit()"
-    :label="activeUnitLabel"
+    :label="activeUnitLabelAdopted"
   />
 </template>
 <script>
@@ -16,7 +16,10 @@ export default defineComponent({
   name: "ToggleUnit",
   mixins: [windowMixin],
   props: {
-    tickerShort: String,
+    balanceView: {
+      type: Boolean,
+      required: false,
+    },
   },
   data: function () {
     return {
@@ -27,6 +30,17 @@ export default defineComponent({
   watch: {},
   computed: {
     ...mapState(useMintsStore, ["activeUnit", "activeUnitLabel"]),
+    activeUnitLabelAdopted: function () {
+      if (!this.balanceView) {
+        return this.activeUnitLabel;
+      }
+      // if the toggle is in the balance view, we want to show BTC instead of SAT
+      if (this.activeUnitLabel === "SAT") {
+        return "BTC";
+      } else {
+        return this.activeUnitLabel;
+      }
+    },
   },
   methods: {
     ...mapActions(useMintsStore, ["toggleUnit"]),

diff --git a/src/stores/p2pk.ts b/src/stores/p2pk.ts
@@ -33,7 +33,13 @@ export const useP2PKStore = defineStore("p2pk", {
     showKeyDetails: function (key: string) {
       const thisKeys = this.p2pkKeys.filter((k) => k.publicKey == key)
       if (thisKeys.length) {
-        this.showP2PKData = thisKeys[0];
+        this.showP2PKData = JSON.parse(JSON.stringify(thisKeys[0]));
+        this.showP2PKDialog = true;
+      }
+    },
+    showLastKey: function () {
+      if (this.p2pkKeys.length) {
+        this.showP2PKData = JSON.parse(JSON.stringify(this.p2pkKeys[this.p2pkKeys.length - 1]));
         this.showP2PKDialog = true;
       }
     },

diff --git a/src/stores/wallet.ts b/src/stores/wallet.ts
@@ -989,6 +989,12 @@ export const useWalletStore = defineStore("wallet", {
       this.payInvoiceData.show = false;
       receiveStore.showReceiveTokens = true;
     },
+    handleP2PK: function (req: string) {
+      const sendTokenStore = useSendTokensStore()
+      sendTokenStore.sendData.p2pkPubkey = req
+      sendTokenStore.showSendTokens = true
+      sendTokenStore.showLockInput = true
+    },
     decodeRequest: async function (req: string) {
       const p2pkStore = useP2PKStore()
       this.payInvoiceData.input.request = req
@@ -1017,8 +1023,7 @@ export const useWalletStore = defineStore("wallet", {
         receiveStore.receiveData.tokensBase64 = req.slice(req.indexOf("cashuA"));
         this.handleCashuToken()
       } else if (p2pkStore.isValidPubkey(req)) {
-        const sendTokenStore = useSendTokensStore()
-        sendTokenStore.sendData.p2pkPubkey = req
+        this.handleP2PK(req)
       } else if (
         req.startsWith("http")
       ) {