From b51b1d54fdb7ebae1129c08f2d0c8cc2f22b162e Mon Sep 17 00:00:00 2001
From: Bartosz <bartosz@peronczyk.com>
Date: Tue, 5 Nov 2024 11:19:18 +0100
Subject: [PATCH] feat: permission manager form as modal

---
 src/constants/common.ts                       |   1 +
 src/popup/components/FixedScreenFooter.vue    |   1 +
 src/popup/components/Header.vue               |   2 -
 .../components/Modals/PermissionManager.vue   | 335 +++++++++++++++++
 src/popup/pages/PermissionManager.vue         | 338 ------------------
 src/popup/pages/PermissionsSettings.vue       |  17 +-
 src/popup/router/modals.ts                    |   9 +-
 src/popup/router/routeNames.ts                |   2 -
 src/popup/router/routes.ts                    |  22 --
 9 files changed, 355 insertions(+), 372 deletions(-)
 create mode 100644 src/popup/components/Modals/PermissionManager.vue
 delete mode 100644 src/popup/pages/PermissionManager.vue

diff --git a/src/constants/common.ts b/src/constants/common.ts
index f19689e8c..a1dd9c332 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -337,6 +337,7 @@ export const MODAL_MULTISIG_VAULT_CREATE = 'multisig-vault-create';
 export const MODAL_NETWORK_SWITCHER = 'network-switcher';
 export const MODAL_PAYLOAD_FORM = 'payload-form';
 export const MODAL_PROTOCOL_SELECT = 'protocol-select';
+export const MODAL_PERMISSION_MANAGER = 'permission-manager';
 export const MODAL_SCAN_QR = 'scan-qr';
 export const MODAL_RECIPIENT_HELPER = 'recipient-helper';
 export const MODAL_RECIPIENT_INFO = 'recipient-info';
diff --git a/src/popup/components/FixedScreenFooter.vue b/src/popup/components/FixedScreenFooter.vue
index f087f5887..39ab74749 100644
--- a/src/popup/components/FixedScreenFooter.vue
+++ b/src/popup/components/FixedScreenFooter.vue
@@ -29,6 +29,7 @@ export default defineComponent({
   bottom: 0;
   margin: auto 0 0; // Moves the footer to the bottom of the container
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   padding: var(--screen-padding-x);
diff --git a/src/popup/components/Header.vue b/src/popup/components/Header.vue
index 981bcad7a..21c999fe8 100644
--- a/src/popup/components/Header.vue
+++ b/src/popup/components/Header.vue
@@ -165,8 +165,6 @@ export default defineComponent({
       more: () => t('pages.titles.more'),
       networks: () => t('pages.titles.networks'),
       permissionsSettings: () => t('pages.titles.permissionsSettings'),
-      permissionsEdit: () => t('pages.titles.permissionsEdit'),
-      permissionsAdd: () => t('pages.titles.permissionsAdd'),
       commentNew: () => t('pages.titles.commentNew'),
       donateError: () => t('pages.titles.donateError'),
       address: () => t('pages.titles.address'),
diff --git a/src/popup/components/Modals/PermissionManager.vue b/src/popup/components/Modals/PermissionManager.vue
new file mode 100644
index 000000000..6e869b364
--- /dev/null
+++ b/src/popup/components/Modals/PermissionManager.vue
@@ -0,0 +1,335 @@
+<template>
+  <Modal
+    from-bottom
+    has-close-button
+    @close="resolve()"
+  >
+    <div class="permission-manager">
+      <p
+        class="text-heading-4 text-center"
+        v-text="(editView) ? $t('pages.titles.permissionsEdit') : $t('pages.titles.permissionsAdd')"
+      />
+      <div
+        v-if="!editView"
+        class="text-description"
+        v-text="$t('pages.permissions.add-description')"
+      />
+
+      <div class="inputs">
+        <div class="permission-row">
+          <Field
+            v-slot="{ field, errorMessage }"
+            name="name"
+            :rules="{
+              required: true,
+              max_len: 32,
+            }"
+          >
+            <InputField
+              v-bind="field"
+              v-model="permission.name"
+              name="name"
+              :label="$t('pages.permissions.custom-name')"
+              :placeholder="$t('pages.permissions.enter-custom-name')"
+              :text-limit="32"
+              :message="errorMessage"
+            />
+          </Field>
+        </div>
+
+        <div class="permission-row">
+          <Field
+            v-slot="{ field, errorMessage }"
+            name="url"
+            :rules="{
+              required: true,
+              url: permissionHostValidation,
+            }"
+          >
+            <InputField
+              v-bind="field"
+              v-model="permission.host"
+              type="url"
+              name="url"
+              :label="$t('pages.permissions.permissions-for-url')"
+              :placeholder="$t('pages.permissions.enter-url')"
+              :message="errorMessage"
+            />
+          </Field>
+        </div>
+      </div>
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.address"
+          :label="$t('pages.permissions.login')"
+        />
+      </div>
+
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.addressList"
+          :label="$t('pages.permissions.addressList')"
+        />
+      </div>
+
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.messageSign"
+          :label="$t('pages.permissions.message-sign')"
+        />
+      </div>
+
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.dailySpendLimit"
+          :label="$t('pages.permissions.daily-spending-limit')"
+        />
+      </div>
+
+      <transition
+        name="fade-transition"
+        mode="out-in"
+      >
+        <div
+          v-if="permission.dailySpendLimit"
+          class="transaction-sign-limit"
+        >
+          <Field
+            v-slot="{ field }"
+            name="transactionSignLimit"
+            :rules="{
+              min_value_exclusive: 0,
+              does_not_exceed_decimals: selectedAsset.decimals,
+            }"
+          >
+            <InputAmount
+              v-bind="field"
+              v-model="permission.transactionSignLimit"
+              class="transaction-limit-input"
+              name="transactionSignLimit"
+              label=" "
+              :selected-asset="selectedAsset"
+              :protocol="PROTOCOLS.aeternity"
+              readonly
+            />
+          </Field>
+
+          <DetailsItem :label="$t('pages.permissions.spent-today')">
+            <TokenAmount
+              class="transaction-limit-amount"
+              :amount="permission.transactionSignSpent"
+              :protocol="PROTOCOLS.aeternity"
+            />
+          </DetailsItem>
+          <DetailsItem :label="$t('pages.permissions.left-today')">
+            <TokenAmount
+              class="transaction-limit-amount"
+              :amount="permission.transactionSignLimit - permission.transactionSignSpent"
+              :protocol="PROTOCOLS.aeternity"
+            />
+          </DetailsItem>
+          <DetailsItem :label="$t('pages.account.balance')">
+            <TokenAmount
+              class="transaction-limit-amount"
+              :amount="+balance"
+              :protocol="PROTOCOLS.aeternity"
+            />
+          </DetailsItem>
+        </div>
+      </transition>
+    </div>
+
+    <template #footer>
+      <BtnMain
+        variant="muted"
+        :text="$t('common.cancel')"
+        @click="resolve()"
+      />
+      <BtnMain
+        class="confirm"
+        extra-padded
+        :text="$t('common.confirm')"
+        :disabled="!permissionChanged"
+        @click="savePermission()"
+      />
+      <BtnMain
+        v-if="editView"
+        extend
+        variant="muted"
+        :text="$t('pages.permissions.delete')"
+        :icon="DeleteIcon"
+        @click="removePermissionAndRedirect()"
+      />
+    </template>
+  </Modal>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
+import { useForm, Field } from 'vee-validate';
+
+import type { IPermission, RejectCallback, ResolveCallback } from '@/types';
+import { PERMISSION_DEFAULTS, PROTOCOLS } from '@/constants';
+import { useBalances, useCurrencies, usePermissions } from '@/composables';
+import { ROUTE_PERMISSIONS_SETTINGS } from '@/popup/router/routeNames';
+import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
+
+import DetailsItem from '@/popup/components/DetailsItem.vue';
+import SwitchButton from '@/popup/components/SwitchButton.vue';
+import InputAmount from '@/popup/components/InputAmount.vue';
+import InputField from '@/popup/components/InputField.vue';
+import TokenAmount from '@/popup/components/TokenAmount.vue';
+import BtnMain from '@/popup/components/buttons/BtnMain.vue';
+import DeleteIcon from '@/icons/trash.svg?vue-component';
+import Modal from '../Modal.vue';
+
+export default defineComponent({
+  components: {
+    Modal,
+    BtnMain,
+    DetailsItem,
+    Field,
+    InputAmount,
+    InputField,
+    SwitchButton,
+    TokenAmount,
+  },
+  props: {
+    resolve: { type: Function as PropType<ResolveCallback>, required: true },
+    reject: { type: Function as PropType<RejectCallback>, required: true },
+    host: { type: String, default: null },
+  },
+  setup(props) {
+    const { validate, setValues } = useForm();
+
+    const { balance } = useBalances();
+    const { marketData } = useCurrencies();
+    const { permissions, addPermission, removePermission } = usePermissions();
+
+    const editView = !!props.host;
+
+    const permission = ref<IPermission>({ ...PERMISSION_DEFAULTS });
+    const permissionChanged = ref(false);
+
+    const selectedAsset = computed(() => ProtocolAdapterFactory
+      .getAdapter(PROTOCOLS.aeternity)
+      .getDefaultCoin(marketData.value!, +balance.value));
+
+    const permissionHostValidation = computed(() => !permission.value.host?.includes('localhost'));
+
+    function removePermissionAndRedirect() {
+      removePermission(props.host);
+      props.resolve();
+    }
+
+    async function savePermission() {
+      if (!(await validate()).valid) {
+        return;
+      }
+      const hostValue = permission.value.host.toLowerCase();
+      const { host } = (new URL(
+        `${hostValue.includes('http') ? '' : 'http://'}${hostValue}`,
+      ));
+
+      if (host !== props.host) {
+        removePermission(props.host);
+      }
+
+      if (!permission.value.dailySpendLimit) {
+        permission.value.transactionSignLimit = 0;
+      }
+
+      addPermission({ ...permission.value, host });
+      props.resolve();
+    }
+
+    if (editView) {
+      const savedPermission = permissions.value[props.host];
+      if (!savedPermission) {
+        // props.reject();
+      } else {
+        if (typeof savedPermission.transactionSignLimit === 'string') {
+          savedPermission.transactionSignLimit = +savedPermission.transactionSignLimit;
+        }
+
+        setValues({ url: savedPermission.host, ...savedPermission });
+        permission.value = { ...PERMISSION_DEFAULTS, ...savedPermission };
+      }
+    }
+
+    watch(permission, (val) => {
+      permissionChanged.value = !!val.name;
+    }, { deep: true });
+
+    return {
+      PROTOCOLS,
+      ROUTE_PERMISSIONS_SETTINGS,
+      DeleteIcon,
+      editView,
+      balance,
+      permission,
+      permissionHostValidation,
+      permissionChanged,
+      selectedAsset,
+      removePermissionAndRedirect,
+      savePermission,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables' as *;
+@use '@/styles/typography';
+@use '@/styles/mixins';
+
+.permission-manager {
+  color: $color-white;
+
+  .inputs {
+    margin-bottom: 32px;
+  }
+
+  .permission-row {
+    margin: 10px 0;
+
+    &.switch {
+      margin-bottom: 0;
+      padding-top: 3px;
+      padding-right: 5px;
+    }
+  }
+
+  .transaction-sign-limit {
+    .transaction-limit-input {
+      margin-bottom: 16px;
+    }
+
+    .transaction-limit-amount {
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+
+  .bottom {
+    padding-top: 38px;
+
+    .actions {
+      width: 100%;
+      display: flex;
+      padding-bottom: 12px;
+      gap: 12px;
+
+      .confirm {
+        flex: 1.8;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/popup/pages/PermissionManager.vue b/src/popup/pages/PermissionManager.vue
deleted file mode 100644
index c7ff17323..000000000
--- a/src/popup/pages/PermissionManager.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="permission-manager">
-        <div
-          v-if="!editView"
-          class="text-description"
-        >
-          {{ $t('pages.permissions.add-description') }}
-        </div>
-
-        <div class="inputs">
-          <div class="permission-row">
-            <Field
-              v-slot="{ field, errorMessage }"
-              name="name"
-              :rules="{
-                required: true,
-                max_len: 32,
-              }"
-            >
-              <InputField
-                v-bind="field"
-                v-model="permission.name"
-                name="name"
-                :label="$t('pages.permissions.custom-name')"
-                :placeholder="$t('pages.permissions.enter-custom-name')"
-                :text-limit="32"
-                :message="errorMessage"
-              />
-            </Field>
-          </div>
-
-          <div class="permission-row">
-            <Field
-              v-slot="{ field, errorMessage }"
-              name="url"
-              :rules="{
-                required: true,
-                url: permissionHostValidation,
-              }"
-            >
-              <InputField
-                v-bind="field"
-                v-model="permission.host"
-                type="url"
-                name="url"
-                :label="$t('pages.permissions.permissions-for-url')"
-                :placeholder="$t('pages.permissions.enter-url')"
-                :message="errorMessage"
-              />
-            </Field>
-          </div>
-        </div>
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.address"
-            :label="$t('pages.permissions.login')"
-          />
-        </div>
-
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.addressList"
-            :label="$t('pages.permissions.addressList')"
-          />
-        </div>
-
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.messageSign"
-            :label="$t('pages.permissions.message-sign')"
-          />
-        </div>
-
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.dailySpendLimit"
-            :label="$t('pages.permissions.daily-spending-limit')"
-          />
-        </div>
-
-        <transition
-          name="fade-transition"
-          mode="out-in"
-        >
-          <div
-            v-if="permission.dailySpendLimit"
-            class="transaction-sign-limit"
-          >
-            <Field
-              v-slot="{ field }"
-              name="transactionSignLimit"
-              :rules="{
-                min_value_exclusive: 0,
-                does_not_exceed_decimals: selectedAsset.decimals,
-              }"
-            >
-              <InputAmount
-                v-bind="field"
-                v-model="permission.transactionSignLimit"
-                class="transaction-limit-input"
-                name="transactionSignLimit"
-                label=" "
-                :selected-asset="selectedAsset"
-                :protocol="PROTOCOLS.aeternity"
-                readonly
-              />
-            </Field>
-
-            <DetailsItem :label="$t('pages.permissions.spent-today')">
-              <TokenAmount
-                class="transaction-limit-amount"
-                :amount="permission.transactionSignSpent"
-                :protocol="PROTOCOLS.aeternity"
-              />
-            </DetailsItem>
-            <DetailsItem :label="$t('pages.permissions.left-today')">
-              <TokenAmount
-                class="transaction-limit-amount"
-                :amount="permission.transactionSignLimit - permission.transactionSignSpent"
-                :protocol="PROTOCOLS.aeternity"
-              />
-            </DetailsItem>
-            <DetailsItem :label="$t('pages.account.balance')">
-              <TokenAmount
-                class="transaction-limit-amount"
-                :amount="+balance"
-                :protocol="PROTOCOLS.aeternity"
-              />
-            </DetailsItem>
-          </div>
-        </transition>
-
-        <div class="bottom">
-          <div class="actions">
-            <BtnMain
-              variant="muted"
-              :text="$t('common.cancel')"
-              :to="{ name: ROUTE_PERMISSIONS_SETTINGS, replace: true }"
-            />
-            <BtnMain
-              class="confirm"
-              extra-padded
-              :text="$t('common.confirm')"
-              :disabled="!permissionChanged"
-              @click="savePermission"
-            />
-          </div>
-          <BtnMain
-            v-if="editView"
-            extend
-            variant="muted"
-            :text="$t('pages.permissions.delete')"
-            :icon="DeleteIcon"
-            @click="removePermissionAndRedirect()"
-          />
-        </div>
-      </div>
-    </IonContent>
-  </IonPage>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  ref,
-  watch,
-} from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useForm, Field } from 'vee-validate';
-import { IonPage, IonContent } from '@ionic/vue';
-
-import type { IPermission } from '@/types';
-import {
-  PERMISSION_DEFAULTS,
-  PROTOCOLS,
-} from '@/constants';
-import { useBalances, useCurrencies, usePermissions } from '@/composables';
-import { ROUTE_NOT_FOUND, ROUTE_PERMISSIONS_SETTINGS } from '@/popup/router/routeNames';
-import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
-
-import DetailsItem from '../components/DetailsItem.vue';
-import SwitchButton from '../components/SwitchButton.vue';
-import InputAmount from '../components/InputAmount.vue';
-import InputField from '../components/InputField.vue';
-import TokenAmount from '../components/TokenAmount.vue';
-import BtnMain from '../components/buttons/BtnMain.vue';
-import DeleteIcon from '../../icons/trash.svg?vue-component';
-
-export default defineComponent({
-  components: {
-    BtnMain,
-    DetailsItem,
-    Field,
-    InputAmount,
-    InputField,
-    IonContent,
-    IonPage,
-    SwitchButton,
-    TokenAmount,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
-    const { validate, setValues } = useForm();
-
-    const { balance } = useBalances();
-    const { marketData } = useCurrencies();
-    const { permissions, addPermission, removePermission } = usePermissions();
-
-    const routeHost = route.params.host as string;
-    const editView = !!route.meta?.isEdit;
-
-    const permission = ref<IPermission>({ ...PERMISSION_DEFAULTS });
-    const permissionChanged = ref(false);
-
-    const selectedAsset = computed(() => ProtocolAdapterFactory
-      .getAdapter(PROTOCOLS.aeternity)
-      .getDefaultCoin(marketData.value!, +balance.value));
-
-    const permissionHostValidation = computed(() => !permission.value.host?.includes('localhost'));
-
-    function removePermissionAndRedirect() {
-      removePermission(routeHost);
-      router.replace({ name: ROUTE_PERMISSIONS_SETTINGS });
-    }
-
-    async function savePermission() {
-      if (!(await validate()).valid) {
-        return;
-      }
-      const hostValue = permission.value.host.toLowerCase();
-      const { host } = (new URL(
-        `${hostValue.includes('http') ? '' : 'http://'}${hostValue}`,
-      ));
-
-      if (host !== routeHost) {
-        removePermission(routeHost);
-      }
-
-      if (!permission.value.dailySpendLimit) {
-        permission.value.transactionSignLimit = 0;
-      }
-
-      addPermission({ ...permission.value, host });
-      router.replace({ name: ROUTE_PERMISSIONS_SETTINGS });
-    }
-
-    if (editView) {
-      const savedPermission = permissions.value[routeHost];
-      if (!savedPermission) {
-        router.replace({ name: ROUTE_NOT_FOUND });
-      } else {
-        if (typeof savedPermission.transactionSignLimit === 'string') {
-          savedPermission.transactionSignLimit = +savedPermission.transactionSignLimit;
-        }
-
-        setValues({ url: savedPermission.host, ...savedPermission });
-        permission.value = { ...PERMISSION_DEFAULTS, ...savedPermission };
-      }
-    }
-
-    watch(permission, (val) => {
-      permissionChanged.value = !!val.name;
-    }, { deep: true });
-
-    return {
-      PROTOCOLS,
-      ROUTE_PERMISSIONS_SETTINGS,
-      DeleteIcon,
-      editView,
-      balance,
-      permission,
-      permissionHostValidation,
-      permissionChanged,
-      selectedAsset,
-      removePermissionAndRedirect,
-      savePermission,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/variables' as *;
-@use '@/styles/typography';
-@use '@/styles/mixins';
-
-.permission-manager {
-  --screen-padding-x: 14px;
-
-  padding-inline: var(--screen-padding-x);
-  color: $color-white;
-
-  .inputs {
-    margin-bottom: 32px;
-  }
-
-  .permission-row {
-    margin: 10px 0;
-
-    &.switch {
-      margin-bottom: 0;
-      padding-top: 3px;
-      padding-right: 5px;
-    }
-  }
-
-  .transaction-sign-limit {
-    .transaction-limit-input {
-      margin-bottom: 16px;
-    }
-
-    .transaction-limit-amount {
-      justify-content: space-between;
-      width: 100%;
-    }
-  }
-
-  .bottom {
-    padding-top: 38px;
-    padding-bottom: 16px;
-
-    .actions {
-      width: 100%;
-      display: flex;
-      padding-bottom: 12px;
-      gap: 12px;
-
-      .confirm {
-        flex: 1.8;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/popup/pages/PermissionsSettings.vue b/src/popup/pages/PermissionsSettings.vue
index 3cc6feca2..33e5fc6de 100644
--- a/src/popup/pages/PermissionsSettings.vue
+++ b/src/popup/pages/PermissionsSettings.vue
@@ -15,9 +15,9 @@
           <PanelItem
             v-for="permission in permissions"
             :key="permission.host"
-            class="host"
-            :to="{ name: ROUTE_PERMISSIONS_DETAILS, params: { host: permission.host } }"
             :title="permission.name"
+            class="host"
+            @click="manage(permission.host)"
           />
         </div>
 
@@ -25,8 +25,8 @@
           extend
           variant="muted"
           :text="$t('pages.permissions.add')"
-          :to="{ name: ROUTE_PERMISSIONS_ADD }"
           :icon="PlusIcon"
+          @click="manage()"
         />
       </div>
     </IonContent>
@@ -36,8 +36,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { IonPage, IonContent } from '@ionic/vue';
+import { MODAL_PERMISSION_MANAGER } from '@/constants';
 import { usePermissions } from '@/composables/permissions';
-import { ROUTE_PERMISSIONS_ADD, ROUTE_PERMISSIONS_DETAILS } from '@/popup/router/routeNames';
+import { useModals } from '@/composables';
 
 import LinkButton from '@/popup/components/LinkButton.vue';
 import PanelItem from '@/popup/components/PanelItem.vue';
@@ -55,12 +56,16 @@ export default defineComponent({
   },
   setup() {
     const { permissions } = usePermissions();
+    const { openModal } = useModals();
+
+    function manage(host?: string) {
+      openModal(MODAL_PERMISSION_MANAGER, { host });
+    }
 
     return {
-      ROUTE_PERMISSIONS_ADD,
-      ROUTE_PERMISSIONS_DETAILS,
       PlusIcon,
       permissions,
+      manage,
     };
   },
 });
diff --git a/src/popup/router/modals.ts b/src/popup/router/modals.ts
index a69875a19..4cd74d3b2 100644
--- a/src/popup/router/modals.ts
+++ b/src/popup/router/modals.ts
@@ -30,8 +30,6 @@ import {
   MODAL_RESET_WALLET,
   MODAL_TRANSFER_RECEIVE,
   MODAL_TRANSFER_SEND,
-  PROTOCOL_VIEW_TRANSFER_RECEIVE,
-  PROTOCOL_VIEW_TRANSFER_SEND,
   MODAL_DAPP_BROWSER_ACTIONS,
   MODAL_WALLET_CONNECT,
   MODAL_WARNING_DAPP_BROWSER,
@@ -44,6 +42,9 @@ import {
   MODAL_ADDRESS_BOOK_ACCOUNT_SELECTOR,
   MODAL_SET_PASSWORD,
   MODAL_PASSWORD_LOGIN,
+  MODAL_PERMISSION_MANAGER,
+  PROTOCOL_VIEW_TRANSFER_RECEIVE,
+  PROTOCOL_VIEW_TRANSFER_SEND,
 } from '@/constants';
 import { useModals } from '@/composables';
 
@@ -91,6 +92,7 @@ import AddressBookAccountSelector from '../components/Modals/AddressBookAccountS
 import SetPassword from '../components/Modals/SetPassword.vue';
 import PasswordLogin from '../components/Modals/PasswordLogin.vue';
 import PrivateKeyImport from '../components/Modals/PrivateKeyImport.vue';
+import PermissionManager from '../components/Modals/PermissionManager.vue';
 
 export default () => {
   const { registerModal } = useModals();
@@ -165,6 +167,9 @@ export default () => {
   registerModal(MODAL_PROTOCOL_SELECT, {
     component: ProtocolSelect,
   });
+  registerModal(MODAL_PERMISSION_MANAGER, {
+    component: PermissionManager,
+  });
   registerModal(MODAL_TRANSFER_RECEIVE, {
     component: ProtocolSpecificView,
     viewComponentName: PROTOCOL_VIEW_TRANSFER_RECEIVE,
diff --git a/src/popup/router/routeNames.ts b/src/popup/router/routeNames.ts
index 2365c164d..454c6d61c 100644
--- a/src/popup/router/routeNames.ts
+++ b/src/popup/router/routeNames.ts
@@ -38,8 +38,6 @@ export const ROUTE_TERMS = 'about-terms';
 export const ROUTE_TIPS_CLAIM = 'tips-claim';
 export const ROUTE_AUCTION_BID = 'auction-bid';
 export const ROUTE_AUCTION_HISTORY = 'auction-history';
-export const ROUTE_PERMISSIONS_ADD = 'permissions-add';
-export const ROUTE_PERMISSIONS_DETAILS = 'permissions-details';
 export const ROUTE_PERMISSIONS_SETTINGS = 'permissions-settings';
 export const ROUTE_SECURE_LOGIN_SETTINGS = 'secure-login-settings';
 export const ROUTE_ADDRESS_BOOK = 'address-book';
diff --git a/src/popup/router/routes.ts b/src/popup/router/routes.ts
index 4d7c1d878..9d328fb8d 100644
--- a/src/popup/router/routes.ts
+++ b/src/popup/router/routes.ts
@@ -37,14 +37,12 @@ import {
   ROUTE_DONATE_ERROR,
   ROUTE_AUCTION_BID,
   ROUTE_AUCTION_HISTORY,
-  ROUTE_PERMISSIONS_ADD,
   ROUTE_POPUP_ACCOUNT_LIST,
   ROUTE_POPUP_SIGN_TX,
   ROUTE_POPUP_CONNECT,
   ROUTE_POPUP_RAW_SIGN,
   ROUTE_POPUP_UNSAFE_SIGN,
   ROUTE_POPUP_MESSAGE_SIGN,
-  ROUTE_PERMISSIONS_DETAILS,
   ROUTE_PERMISSIONS_SETTINGS,
   ROUTE_SECURE_LOGIN_SETTINGS,
   ROUTE_ADDRESS_BOOK,
@@ -90,7 +88,6 @@ import Notifications from '../pages/Notifications.vue';
 import NotificationSettings from '../pages/NotificationSettings.vue';
 import ErrorLogSettings from '../pages/ErrorLogSettings.vue';
 import PermissionsSettings from '../pages/PermissionsSettings.vue';
-import PermissionManager from '../pages/PermissionManager.vue';
 import PopupConnect from '../pages/Popups/Connect.vue';
 import PopupAccountList from '../pages/Popups/AccountList.vue';
 import PopupMessageSign from '../pages/Popups/MessageSign.vue';
@@ -516,25 +513,6 @@ export const routes: WalletAppRouteConfig[] = [
       showHeaderNavigation: true,
     },
   },
-  {
-    path: '/more/settings/permissions/add',
-    component: PermissionManager,
-    name: ROUTE_PERMISSIONS_ADD,
-    meta: {
-      title: 'permissionsAdd',
-      showHeaderNavigation: true,
-    },
-  },
-  {
-    path: '/more/settings/permissions/:host',
-    component: PermissionManager,
-    name: ROUTE_PERMISSIONS_DETAILS,
-    meta: {
-      title: 'permissionsEdit',
-      showHeaderNavigation: true,
-      isEdit: true,
-    },
-  },
   {
     path: '/more/about',
     component: About,