comment: out debug msg

src/extension/inject.ts

@@ -293,7 +293,7 @@ const listner =  function(event: any) {
     try {
         if(event?.data?.data?.error){
             promResolvers.get(event.data.resId)?.reject(event.data.data);
-            console.error(event?.data?.data)
+            // console.error(event?.data?.data)
         }else {
             promResolvers.get(event.data.resId)?.resolve(event.data.data);
         }

src/extension/serviceWorker.ts

@@ -450,7 +450,7 @@ const mainListner = (message: RequestArguments, sender:any, sendResponse: (a: an
                       clearPk()
                     }
                     } catch (e) {
-                        console.error(e)
+                        // console.error(e)
                         sendResponse({
                             error: true,
                             code: rpcError.USER_REJECTED,

src/views/AddNetwork.vue

@@ -2,11 +2,13 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>{{ isEdit ? 'Edit Network': 'Add Network' }}</ion-title>
+        <ion-title>{{ isEdit ? "Edit Network" : "Add Network" }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <ion-button v-if="!isEdit" @click="templateModal=true" expand="block">Add from popular chain list</ion-button>
+      <ion-button v-if="!isEdit" @click="templateModal = true" expand="block"
+        >Add from popular chain list</ion-button
+      >
       <ion-item>
         <ion-label>Name(*)</ion-label>
         <ion-input v-model="name" placeholder="ex: Polygon"></ion-input>
@@ -18,224 +20,288 @@
       <ion-item button>
         <ion-icon :icon="clipboardOutline" @click="paste('pasteRpc')" />
         <ion-label>RPC URL(*)</ion-label>
-        <ion-input id="pasteRpc" placeholder="https://polygon-mainnet.g.alchemy.com/..." v-model="rpc" ></ion-input>
+        <ion-input
+          id="pasteRpc"
+          placeholder="https://polygon-mainnet.g.alchemy.com/..."
+          v-model="rpc"
+        ></ion-input>
       </ion-item>
       <ion-item button>
         <ion-icon :icon="clipboardOutline" @click="paste('pasteRpc')" />
         <ion-label>Native Token Symbol(?)</ion-label>
-        <ion-input id="pasteRpc" placeholder="MATIC" v-model="symbol" ></ion-input>
+        <ion-input id="pasteRpc" placeholder="MATIC" v-model="symbol"></ion-input>
       </ion-item>
       <ion-item button>
         <ion-icon :icon="clipboardOutline" @click="paste('pasteExplorer')" />
         <ion-label>Explorer(?)</ion-label>
-        <ion-input id="pasteExplorer" placeholder="https://polygonscan.com" v-model="explorer" ></ion-input>
+        <ion-input
+          id="pasteExplorer"
+          placeholder="https://polygonscan.com"
+          v-model="explorer"
+        ></ion-input>
       </ion-item>
       <ion-item>
-        <ion-button  @click="onCancel">Cancel</ion-button>
+        <ion-button @click="onCancel">Cancel</ion-button>
-        <ion-button @click="onAddNetwork">{{ isEdit ? 'Edit Network': 'Add Network' }}</ion-button>
+        <ion-button @click="onAddNetwork">{{
+          isEdit ? "Edit Network" : "Add Network"
+        }}</ion-button>
       </ion-item>
       <ion-alert
-      :is-open="alertOpen"
+        :is-open="alertOpen"
-      header="Error"
+        header="Error"
-      :message="alertMsg"
+        :message="alertMsg"
-      :buttons="['OK']"
+        :buttons="['OK']"
-      @didDismiss="alertOpen=false"
+        @didDismiss="alertOpen = false"
-    ></ion-alert>
+      ></ion-alert>
     </ion-content>
-    
-    <ion-modal :is-open="templateModal" @will-dismiss="templateModal=false">
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-button @click="templateModal=false">Close</ion-button>
-            </ion-buttons>
-            <ion-title>Select</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content class="ion-padding">
-          <ion-list  style="margin-bottom: 4rem;">
-              <ion-list-header>
-                <ion-label>Networks</ion-label>
-              </ion-list-header>
 
-              <ion-segment  :value="currentSegment" @ion-change="segmentChange">
+    <ion-modal :is-open="templateModal" @will-dismiss="templateModal = false">
-  <ion-segment-button value="mainnets">
+      <ion-header>
-    <ion-label>Main Networks</ion-label>
+        <ion-toolbar>
-  </ion-segment-button>
+          <ion-buttons slot="start">
-  <ion-segment-button value="testnets">
+            <ion-button @click="templateModal = false">Close</ion-button>
-    <ion-label>Test Networks</ion-label>
+          </ion-buttons>
-  </ion-segment-button>
+          <ion-title>Select</ion-title>
-</ion-segment>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-list style="margin-bottom: 4rem">
+          <ion-list-header>
+            <ion-label>Networks</ion-label>
+          </ion-list-header>
 
-              <div v-if="currentSegment==='mainnets'" >
+          <ion-segment :value="currentSegment" @ion-change="segmentChange">
-              <ion-list class="ion-padding" v-for="network of Object.values(mainNets)" :key="network.chainId">
+            <ion-segment-button value="mainnets">
-                <ion-item button style="cursor:pointer;" @click="fillTemplate(network)">
+              <ion-label>Main Networks</ion-label>
-                  <ion-avatar style="margin-right: 1rem;">
+            </ion-segment-button>
-    <img :alt="network.name" :src="getUrl('assets/chain-icons/' + network.icon)" />
+            <ion-segment-button value="testnets">
-  </ion-avatar><ion-label>{{network.name}}</ion-label>
+              <ion-label>Test Networks</ion-label>
-                </ion-item>
+            </ion-segment-button>
-              </ion-list>
+          </ion-segment>
-            </div>
-            <div v-else>
-              <ion-list class="ion-padding" v-for="network of Object.values(testNets)" :key="network.chainId">
-                <ion-item button style="cursor:pointer;" @click="fillTemplate(network)">
-                  <ion-avatar style="margin-right: 1rem;">
-    <img :alt="network.name" :src="getUrl('assets/chain-icons/' + network.icon)" />
-  </ion-avatar><ion-label>{{network.name}}</ion-label>
-                </ion-item>
-              </ion-list>
-            </div>
 
-          </ion-list>
+          <div v-if="currentSegment === 'mainnets'">
-        </ion-content>
+            <ion-list
-      </ion-modal>
+              class="ion-padding"
+              v-for="network of Object.values(mainNets)"
+              :key="network.chainId"
+            >
+              <ion-item button style="cursor: pointer" @click="fillTemplate(network)">
+                <ion-avatar style="margin-right: 1rem">
+                  <img
+                    :alt="network.name"
+                    :src="getUrl('assets/chain-icons/' + network.icon)"
+                  /> </ion-avatar
+                ><ion-label>{{ network.name }}</ion-label>
+              </ion-item>
+            </ion-list>
+          </div>
+          <div v-else>
+            <ion-list
+              class="ion-padding"
+              v-for="network of Object.values(testNets)"
+              :key="network.chainId"
+            >
+              <ion-item button style="cursor: pointer" @click="fillTemplate(network)">
+                <ion-avatar style="margin-right: 1rem">
+                  <img
+                    :alt="network.name"
+                    :src="getUrl('assets/chain-icons/' + network.icon)"
+                  /> </ion-avatar
+                ><ion-label>{{ network.name }}</ion-label>
+              </ion-item>
+            </ion-list>
+          </div>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
   </ion-page>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonInput, IonButton, IonIcon,
+import {
-   IonModal, IonList, IonSegment, IonSegmentButton, IonListHeader, IonButtons, IonAvatar, modalController, IonAlert, onIonViewWillEnter
+  IonContent,
-  } from "@ionic/vue";
+  IonHeader,
-import {  getNetworks, saveSelectedNetwork, getUrl, paste, replaceNetworks } from "@/utils/platform";
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonIcon,
+  IonModal,
+  IonList,
+  IonSegment,
+  IonSegmentButton,
+  IonListHeader,
+  IonButtons,
+  IonAvatar,
+  modalController,
+  IonAlert,
+  onIonViewWillEnter,
+} from "@ionic/vue";
+import {
+  getNetworks,
+  saveSelectedNetwork,
+  getUrl,
+  paste,
+  replaceNetworks,
+} from "@/utils/platform";
 import router from "@/router";
-import { mainNets, testNets } from "@/utils/networks"
+import { mainNets, testNets } from "@/utils/networks";
-import { useRoute } from 'vue-router'
+import { useRoute } from "vue-router";
 import { clipboardOutline } from "ionicons/icons";
-import type { Networks, Network } from '@/extension/types'
+import type { Networks, Network } from "@/extension/types";
 
 export default defineComponent({
-  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonInput, IonButton, IonIcon,
+  components: {
-     IonModal, IonList, IonSegment, IonSegmentButton, IonListHeader, IonButtons, IonAvatar, IonAlert },
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    IonItem,
+    IonLabel,
+    IonInput,
+    IonButton,
+    IonIcon,
+    IonModal,
+    IonList,
+    IonSegment,
+    IonSegmentButton,
+    IonListHeader,
+    IonButtons,
+    IonAvatar,
+    IonAlert,
+  },
   setup: () => {
-    const name = ref('')
+    const name = ref("");
-    const chainId = ref(0)
+    const chainId = ref(0);
-    const rpc = ref('')
+    const rpc = ref("");
-    const symbol = ref('')
+    const symbol = ref("");
-    const explorer = ref('')
+    const explorer = ref("");
-    const templateModal = ref(false)
+    const templateModal = ref(false);
-    const currentSegment = ref('mainnets')
+    const currentSegment = ref("mainnets");
-    const alertOpen = ref(false)
+    const alertOpen = ref(false);
-    const alertMsg = ref('')
+    const alertMsg = ref("");
-    const route = useRoute()
+    const route = useRoute();
-    const isEdit = route.path.includes('/edit')
+    const isEdit = route.path.includes("/edit");
-    const paramChainId = route.params.chainId ?? ""
+    const paramChainId = route.params.chainId ?? "";
-    let networksProm: Promise<Networks | undefined>
+    let networksProm: Promise<Networks | undefined>;
-    
 
     const fillNetworkInputs = (network: Network) => {
-      name.value = network.name
+      name.value = network.name;
-        chainId.value = network.chainId
+      chainId.value = network.chainId;
-        rpc.value = network.rpc
+      rpc.value = network.rpc;
-        symbol.value = network.symbol ?? ''
+      symbol.value = network.symbol ?? "";
-        explorer.value = network.explorer ?? ''
+      explorer.value = network.explorer ?? "";
-    }
+    };
 
     onIonViewWillEnter(async () => {
-      if(isEdit && paramChainId) {
+      if (isEdit && paramChainId) {
-        networksProm = getNetworks()
+        networksProm = getNetworks();
-        const networks = await networksProm as Networks
+        const networks = (await networksProm) as Networks;
-        fillNetworkInputs(networks[Number(paramChainId)])
+        fillNetworkInputs(networks[Number(paramChainId)]);
       }
-    })
+    });
 
     const resetFields = () => {
-      name.value = ''
+      name.value = "";
-      chainId.value = 0
+      chainId.value = 0;
-      rpc.value = ''
+      rpc.value = "";
-    }
+    };
 
     const onAddNetwork = async () => {
-      if( Number(chainId.value) < 1){
+      if (Number(chainId.value) < 1) {
-            alertMsg.value = "Chain Id must be a valid decimal integer"
+        alertMsg.value = "Chain Id must be a valid decimal integer";
-            return alertOpen.value = true
+        return (alertOpen.value = true);
+      }
+      if (name.value.length < 2) {
+        alertMsg.value = "Name must have at least 2 characters";
+        return (alertOpen.value = true);
+      }
+      if (name.value.length > 99) {
+        alertMsg.value = "Name must be less than 100 characters";
+        return (alertOpen.value = true);
+      }
+      if (name.value.length > 99) {
+        try {
+          new URL(rpc.value);
+        } catch {
+          alertMsg.value = "RPC must be a valid URL";
+          return (alertOpen.value = true);
         }
-        if (name.value.length < 2) {
+      }
-          alertMsg.value = "Name must have at least 2 characters"
+      let p1 = Promise.resolve();
-            return alertOpen.value = true
+      if (!networksProm) {
+        networksProm = getNetworks();
+      }
+      const networks = (await networksProm) as Networks;
+      const network = {
+        name: name.value,
+        chainId: chainId.value,
+        rpc: rpc.value,
+        ...(symbol.value ? { symbol: symbol.value } : {}),
+        ...(explorer.value ? { explorer: explorer.value } : {}),
+      };
+      if ((Object.keys(networks).length ?? 0) < 1) {
+        p1 = saveSelectedNetwork(network);
+      } else {
+        if (chainId.value in networks && !isEdit) {
+          alertMsg.value = "Network already exists.";
+          return (alertOpen.value = true);
         }
-        if (name.value.length > 99) {
+      }
-            alertMsg.value = "Name must be less than 100 characters"
+      networks[chainId.value] = network;
-            return alertOpen.value = true
+      const p2 = replaceNetworks(networks);
-        }
+      await Promise.all([p1, p2]);
-        if (name.value.length > 99) {
+      if (isEdit) {
-          try{
+        router.push("/tabs/networks");
-            new URL(rpc.value)
+      } else {
-          } catch {
+        router.push("/tabs/home");
-            alertMsg.value = "RPC must be a valid URL"
+      }
-            return alertOpen.value = true
+      resetFields();
-          }
+    };
-        }
-        let p1 = Promise.resolve()
-        if(!networksProm) {
-          networksProm = getNetworks()
-        }
-        const networks = await networksProm as Networks
-        const network = {
-                name: name.value,
-                chainId: chainId.value,
-                rpc: rpc.value,
-                ...( symbol.value ? {symbol: symbol.value}:{}),
-                ...( explorer.value ? {explorer: explorer.value}:{})
-            }
-        if( (Object.keys(networks).length ?? 0) < 1 ){
-            p1 = saveSelectedNetwork(network)
-        } else {
-          if((chainId.value in networks) && !isEdit){
-            alertMsg.value = "Network already exists."
-            return alertOpen.value = true
-          }
-        }
-        networks[chainId.value] = network
-        const p2 = replaceNetworks(networks)
-        await Promise.all([p1, p2])
-        if(isEdit) {
-          router.push('/tabs/networks')
-        }else {
-          router.push('/tabs/home')
-        }
-        resetFields()
-    }
 
     const segmentChange = (value: any) => {
-      currentSegment.value = value.detail.value
+      currentSegment.value = value.detail.value;
-    }
+    };
 
     const onCancel = () => {
-      if(isEdit) {
+      if (isEdit) {
-        router.push('/tabs/networks')
+        router.push("/tabs/networks");
-      }else {
+      } else {
-        router.push('/tabs/home')
+        router.push("/tabs/home");
       }
-    }
+    };
 
-    const fillTemplate = (network: typeof mainNets[1] ) =>{
+    const fillTemplate = (network: typeof mainNets[1]) => {
-      fillNetworkInputs(network)
+      fillNetworkInputs(network);
-      modalController.dismiss(null, 'cancel')
+      modalController?.dismiss(null, "cancel");
-    }
+    };
 
     return {
-        name,
+      name,
-        chainId,
+      chainId,
-        onAddNetwork,
+      onAddNetwork,
-        rpc,
+      rpc,
-        onCancel,
+      onCancel,
-        paste,
+      paste,
-        clipboardOutline,
+      clipboardOutline,
-        templateModal,
+      templateModal,
-        currentSegment,
+      currentSegment,
-        mainNets,
+      mainNets,
-        testNets,
+      testNets,
-        segmentChange,
+      segmentChange,
-        getUrl,
+      getUrl,
-        fillTemplate,
+      fillTemplate,
-        alertOpen,
+      alertOpen,
-        alertMsg,
+      alertMsg,
-        symbol,
+      symbol,
-        explorer,
+      explorer,
-        isEdit
+      isEdit,
-    }
+    };
-
+  },
-  }
 });
 </script>