logic for modifying session proxy role

integritee-network · Dec 11, 2024 · 5036d34 · 5036d34
1 parent d55b17b
commit 5036d34
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 52 deletions.
diff --git a/components/overlays/ChooseWalletOverlay.vue b/components/overlays/ChooseWalletOverlay.vue
@@ -76,15 +76,34 @@
           </option>
         </select>
       </div>
+      <div v-if="accountStore.hasInjector" class="mt-10">
+        <p class="text-sm text-gray-400 wrap-text">
+          your currently selected account is {{ accountStore.getAddress }}
+        </p>
+        <div class="mt-10">
+          <button
+            @click="changeSessionAuthorization"
+            class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+          >
+            Change Session Key Authorization
+          </button>
+        </div>
+      </div>
       <div
-        v-if="accountStore.hasInjector && showTrustedGetterHint"
+        v-if="
+          accountStore.hasInjector &&
+          showTrustedGetterHint &&
+          selectedExtensionAccountIsNew
+        "
         class="mt-10"
       >
-        <p>
+        <p class="text-sm text-gray-400">
           please allow this app to read your balance by signing the upcoming
           request in your extension
         </p>
-        <p>this window will close once a balance could be fetched</p>
+        <p class="mt-5 text-sm text-gray-400">
+          this window will close once a balance could be fetched
+        </p>
       </div>
     </div>
   </OverlayDialog>
@@ -94,15 +113,34 @@
 import {
   connectExtension,
   extensionAccounts,
-  injectorForAddress,
 } from "~/lib/signerExtensionUtils";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { defineProps, computed, ref, watch } from "vue";
 import { useAccount } from "~/store/account.ts";
+import { encodeAddress } from "@polkadot/util-crypto";
 
 const accountStore = useAccount();
+const currentExtensionAccount = ref("");
 const selectedExtensionAccount = ref("");
 
+const selectedExtensionAccountIsNew = computed(() => {
+  try {
+    const selectedAddressEncoded = encodeAddress(
+      selectedExtensionAccount.value,
+      accountStore.getSs58Format,
+    );
+    console.log(
+      "comparing",
+      currentExtensionAccount.value,
+      " to ",
+      selectedAddressEncoded,
+    );
+    return selectedAddressEncoded !== currentExtensionAccount.value;
+  } catch (e) {
+    return false;
+  }
+});
+
 const props = defineProps({
   createTestingAccount: {
     type: Function,
@@ -124,7 +162,23 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  changeSessionAuthorization: {
+    type: Function,
+    required: false,
+  },
 });
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      console.log("current extension account: ", accountStore.getAddress);
+      currentExtensionAccount.value = accountStore.getAddress;
+      //selectedExtensionAccount.value = "";
+    }
+  },
+);
+
 const hasCreateTestingAccountFn = computed(
   () => typeof props.createTestingAccount === "function",
 );
@@ -139,10 +193,15 @@ const closeProxy = () => {
 };
 
 watch(selectedExtensionAccount, async (selectedAddress) => {
-  if (selectedAddress) {
+  if (selectedAddress && selectedExtensionAccountIsNew.value) {
     props.onExtensionAccountChange(selectedAddress);
   }
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.wrap-text {
+  white-space: normal;
+  word-wrap: break-word;
+}
+</style>
diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
@@ -13,43 +13,67 @@
         {{ INCOGNITEE_SESSION_PROXY_DEPOSIT }} {{ accountStore.getSymbol }} will
         be reserved.
       </p>
+      <!--<p>you currently have a session key with role {{ bestSessionProxyRole }}</p>-->
       <div class="flex flex-col mt-5">
-        <form @submit.prevent="createSessionProxy">
+        <form @submit.prevent="updateAuthorization">
           <label>Select an option:</label>
-          <div class="radio-group mt-5">
-            <input
-              type="radio"
-              id="readBalance"
-              value="ReadBalance"
-              v-model="selectedSessionProxyRole"
-            />
+          <div v-if="bestSessionProxyRole !== null" class="radio-group">
+            <div>
+              <input
+                type="radio"
+                id="noProxy"
+                value="NoProxy"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <label for="noProxy">remove all authorizations</label>
+          </div>
+          <div class="radio-group">
+            <div v-if="'readBalance' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="readBalance"
+                value="ReadBalance"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
             <label for="readBalance">allow reading balance</label>
           </div>
           <div class="radio-group">
-            <input
-              type="radio"
-              id="readAny"
-              value="ReadAny"
-              v-model="selectedSessionProxyRole"
-            />
+            <div v-if="'readAny' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="readAny"
+                value="ReadAny"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
             <label for="readAny">full read access</label>
           </div>
           <div class="radio-group">
-            <input
-              type="radio"
-              id="nonTransfer"
-              value="NonTransfer"
-              v-model="selectedSessionProxyRole"
-            />
+            <div v-if="'nonTransfer' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="nonTransfer"
+                value="NonTransfer"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
             <label for="nonTransfer">allow non-transfer actions</label>
           </div>
           <div class="radio-group">
-            <input
-              type="radio"
-              id="any"
-              value="Any"
-              v-model="selectedSessionProxyRole"
-            />
+            <div v-if="'any' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="any"
+                value="Any"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
             <label for="any">allow all actions</label>
           </div>
           <!--
@@ -76,10 +100,10 @@
             type="submit"
             class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
           >
-            Authorize
+            Update Authorization
           </button>
         </form>
-        <div class="mt-5">
+        <div v-if="bestSessionProxyRole == null" class="mt-5">
           <button
             type="button"
             @click="close(true)"
@@ -99,7 +123,7 @@
 </template>
 <script setup lang="ts">
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
-import { defineProps, ref } from "vue";
+import { defineProps, ref, watch } from "vue";
 import { useAccount } from "~/store/account.ts";
 import {
   cryptoWaitReady,
@@ -118,6 +142,19 @@ import {
 const accountStore = useAccount();
 const selectedSessionProxyRole = ref("NonTransfer");
 const persistSessionProxy = ref(false);
+const bestSessionProxy = ref(null);
+const bestSessionProxyRole = ref(null);
+
+const updateAuthorization = async () => {
+  console.log(
+    "updating authorization from ",
+    bestSessionProxyRole,
+    " to ",
+    selectedSessionProxyRole.value,
+  );
+  createSessionProxy();
+};
+
 const createSessionProxy = async () => {
   if (!enableActions.value) {
     console.error("network not live");
@@ -213,6 +250,15 @@ const props = defineProps({
   },
 });
 
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      [bestSessionProxy.value, bestSessionProxyRole.value] =
+        accountStore.sessionProxyBest();
+    }
+  },
+);
 // even if the same account stays selected and the overlay is manually closed
 // we need to call onExtensionAccountChange. otherwise the balance poll will wait forever
 const closeProxy = () => {

diff --git a/pages/index.vue b/pages/index.vue
@@ -110,12 +110,7 @@
     :createTestingAccount="isProd ? undefined : createTestingAccount"
     :onExtensionAccountChange="onExtensionAccountChange"
     :showTrustedGetterHint="true"
-  />
-
-  <StatusOverlay
-    :tx-status="txStatus"
-    :show="showStatusOverlay"
-    :close="closeStatusOverlay"
+    :changeSessionAuthorization="changeSessionProxies"
   />
 </template>
 
@@ -378,10 +373,9 @@ const fetchOlderBucket = async () => {
 
 /// returns the date as moment before which all notes have been purged from sidechain state
 const oldestMomentInNoteBuckets = computed(() => {
-  console.log(
-    "oldest moment is " + noteBucketsInfo.value?.first.unwrap().begins_at,
-  );
-  return noteBucketsInfo.value?.first.unwrap().begins_at?.toNumber();
+  const beginsAt = noteBucketsInfo.value?.first.unwrap().begins_at;
+  console.log("oldest moment is " + beginsAt?.toNumber());
+  return beginsAt ? beginsAt.toNumber() : NaN;
 });
 
 const bucketsCount = computed(() => {
@@ -895,13 +889,9 @@ const dropSubscriptions = () => {
   accountStore.setInjector(null);
 };
 
-const showStatusOverlay = ref(false);
-const openStatusOverlay = () => {
-  showStatusOverlay.value = true;
-};
-const closeStatusOverlay = () => {
-  showStatusOverlay.value = false;
-  showAuthorizeSessionOverlay.value = false;
+const changeSessionProxies = () => {
+  closeChooseWalletOverlay();
+  openAuthorizeSessionOverlay();
 };
 
 const createTestingAccount = async () => {

diff --git a/store/account.ts b/store/account.ts
@@ -88,6 +88,20 @@ export const useAccount = defineStore("account", {
         return null;
       };
     },
+    /// Returns the most powerful session proxy
+    sessionProxyBest({
+      sessionProxies,
+    }): () => [AddressOrPair | null, SessionProxyRole | null] {
+      return (): [AddressOrPair | null, SessionProxyRole | null] => {
+        for (let i = sessionProxyRoleOrder.length - 1; i >= 0; i--) {
+          const currentRole = sessionProxyRoleOrder[i];
+          if (sessionProxies[currentRole]) {
+            return [sessionProxies[currentRole], currentRole];
+          }
+        }
+        return [null, null];
+      };
+    },
     formatBalanceFree({ balanceFree, decimals }) {
       return (chain: ChainId): string => {
         if (!balanceFree[chain]) return "0.000";