chore: changes for new release

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## Manifest Version 1.3.5
+
+- added copy button to chainId for easier development
+- added settings to be able to transfrom address to lower case when copying
+- added a check in get recepit to return null if hash is missing
+- added version display to wallet first page
+
 ## Manifest Version 1.3.4
 
 - bump fake Metamask version signature to 11.0.0

src/extension/manifest.json

@@ -3,8 +3,8 @@
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
-    "version": "1.3.4",
-    "version_name": "1.3.4",
+    "version": "1.3.5",
+    "version_name": "1.3.5",
     "icons": {
       "16": "assets/extension-icon/wallet_16.png",
       "32": "assets/extension-icon/wallet_32.png",

src/extension/types.ts

@@ -57,6 +57,7 @@ export interface Settings {
     theme: 'system' | 'light' | 'dark'
     lastLock: number
     lockOutBlocked: boolean
+    copyLowerCaseAddress?: boolean
 }
 
 export type listnerType = 'accountsChanged' | 'connect' | 'disconnect' | 'chainChanged'

src/utils/platform.ts

@@ -1,6 +1,8 @@
 import type { Network, Account, Prices, Settings, Networks, HistoryItem, ContractActions, ContractAction, Contact } from '@/extension/types'
 import type { Ref } from 'vue'
 
+const pottentialMissingSettings = ['copyLowerCaseAddress']
+
 const defaultSettings = {
     enableStorageEnctyption: false,
     encryptAfterEveryTx: false,
@@ -8,7 +10,8 @@ const defaultSettings = {
     lockOutPeriod: 2,
     lockOutBlocked: false,
     theme: 'system',
-    lastLock: Date.now()
+    lastLock: Date.now(),
+    copyLowerCaseAddress: false
 }
 
 const defaultAbis = {} as {
@@ -118,7 +121,13 @@ export const wipeHistory = async (): Promise<void> => {
 }
 
 export const getSettings = async (): Promise<Settings> => {
-    return (await storageGet('settings'))?.settings ?? defaultSettings as unknown as Settings
+    const settings = (await storageGet('settings'))?.settings ?? defaultSettings as unknown as Settings
+    pottentialMissingSettings.forEach( (s: string) => {
+        if(settings[s] === undefined) {
+            settings[s as keyof Settings] = defaultSettings[s as keyof Settings]
+        }
+    })
+    return settings
 }
 
 export const setSettings = async (settings: Settings): Promise<void> => {
@@ -264,7 +273,7 @@ export const strToHex = (str: string) =>  `0x${str.split('').map( s => s.charCod
 
 export const numToHexStr = (num: number | bigint) => `0x${num.toString(16)}`
 
-export const copyAddress = async (address: string, toastRef: Ref<boolean>) => {
+export const copyText = async (address: string, toastRef: Ref<boolean>) => {
     await navigator.clipboard.writeText(address)
     toastRef.value = true
 }
@@ -305,3 +314,5 @@ export const openTab = (url: string) => {
         url
       });
 }
+
+export const getVersion = () => chrome?.runtime?.getManifest()?.version ?? ''

src/utils/wallet.ts

@@ -108,6 +108,7 @@ export const getTxByHash = async (hash: string) => {
 
 export const getTxReceipt = async (hash: string) => {
     try {
+    if (!hash) return null
     const network = await getSelectedNetwork()
     const provider = new ethers.JsonRpcProvider(network.rpc)
     const receipt = await provider.getTransactionReceipt(hash)

src/views/AccountsTab.vue

@@ -31,7 +31,7 @@
             {{ account.name }}
           </ion-label>
         </ion-item>
-        <ion-item @click="copyAddress(account.address, getToastRef())">
+        <ion-item @click="copyText(account.address, getToastRef())">
           <p style="font-size: 0.7rem">{{ account.address }}</p>
           <ion-icon :icon="copyOutline"></ion-icon>
         </ion-item>
@@ -52,7 +52,7 @@
           </ion-toolbar>
         </ion-header>
         <ion-content class="ion-padding">
-          <ion-item @click="copyAddress(shownPk, getToastRef())" button>
+          <ion-item @click="copyText(shownPk, getToastRef())" button>
             <ion-icon style="margin-right: 0.5rem" :icon="copyOutline" />
             <ion-label button>PK</ion-label>
             <ion-input
@@ -72,7 +72,7 @@
 import { defineComponent, ref, Ref } from "vue";
 import {
   getAccounts,
-  copyAddress,
+  copyText,
   replaceAccounts,
   getSettings,
   clearPk,
@@ -220,7 +220,7 @@ export default defineComponent({
       addCircleOutline,
       copyOutline,
       toastState,
-      copyAddress,
+      copyText,
       getToastRef,
       deleteAccount,
       editAccount,

src/views/AssetsTab.vue

@@ -26,7 +26,7 @@
       <ion-item>
         <ion-label>Assests for Account: {{ selectedAccount?.name }}</ion-label>
       </ion-item>
-      <ion-item button @click="copyAddress(selectedAccount?.address, getToastRef())">
+      <ion-item button @click="copyText(selectedAccount?.address, getToastRef())">
         <p style="font-size: 0.7rem">{{ selectedAccount?.address }}</p>
         <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
       </ion-item>
@@ -184,7 +184,7 @@ import {
   IonLoading,
   IonIcon,
 } from "@ionic/vue";
-import { getSelectedAccount, copyAddress, getUrl } from "@/utils/platform";
+import { getSelectedAccount, copyText, getUrl } from "@/utils/platform";
 import type { Account } from "@/extension/types";
 
 import { copyOutline } from "ionicons/icons";
@@ -564,7 +564,7 @@ export default defineComponent({
       isError,
       noAssets,
       getToastRef,
-      copyAddress,
+      copyText,
       copyOutline,
       ethTokens,
       polyTokens,

src/views/HistoryTab.vue

@@ -21,7 +21,7 @@
                 ><b style="margin-right: 0.5rem">Date:</b>
                 {{ new Date(item.date).toDateString() }}</ion-item
               >
-              <ion-item button @click="copyAddress(item.txHash, getToastRef())">
+              <ion-item button @click="copyText(item.txHash, getToastRef())">
                 <p style="font-size: 0.7rem">
                   <b style="margin-right: 0.5rem"
                     ><ion-icon
@@ -88,7 +88,7 @@ import {
   IonButton,
   IonIcon,
 } from "@ionic/vue";
-import { getHistory, copyAddress, wipeHistory, openTab } from "@/utils/platform";
+import { getHistory, copyText, wipeHistory, openTab } from "@/utils/platform";
 import type { HistoryItem } from "@/extension/types";
 
 import { copyOutline } from "ionicons/icons";
@@ -130,7 +130,7 @@ export default defineComponent({
     return {
       history,
       loading,
-      copyAddress,
+      copyText,
       getToastRef,
       toastState,
       copyOutline,

src/views/HomeTab.vue

@@ -11,6 +11,19 @@
           <span style="position: absolute; top: 0.45rem; margin-left: 0.3rem"
             >CL Wallet</span
           >
+          <span
+            v-if="version"
+            style="
+              position: absolute;
+              top: 0.3rem;
+              right: 1.1rem;
+              margin-left: 0.3rem;
+              color: coral;
+              font-weight: bold;
+              font-size: 0.65rem;
+            "
+            >Version: {{ version }}</span
+          >
         </ion-title>
       </ion-toolbar>
     </ion-header>
@@ -32,7 +45,17 @@
             >Select</ion-button
           >
         </ion-item>
-        <ion-item button @click="copyAddress(selectedAccount?.address, getToastRef())">
+        <ion-item
+          button
+          @click="
+            copyText(
+              settings?.copyLowerCaseAddress
+                ? selectedAccount?.address?.toLowerCase()
+                : selectedAccount?.address,
+              getToastRef()
+            )
+          "
+        >
           <p style="font-size: 0.7rem; color: coral">{{ selectedAccount?.address }}</p>
           <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
         </ion-item>
@@ -49,6 +72,7 @@
               )
             "
             expand="block"
+            style="margin: auto; width: 98%; font-size: 0.8rem; padding: 0.6rem"
             >View Address on
             {{
               `${selectedNetwork.explorer}`.replace("https://", "").replace("http://", "")
@@ -71,11 +95,15 @@
           />
         </ion-avatar>
         <ion-label
+          button
+          @click="copyText(String(selectedNetwork?.chainId), getToastRef())"
+          style="cursor: pointer"
           >Selected Network ID:
           <span style="color: coral; font-weight: bold">{{
             selectedNetwork?.chainId
-          }}</span></ion-label
-        >
+          }}</span>
+          <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
+        </ion-label>
         <ion-button
           @click="
             () => {
@@ -239,12 +267,14 @@ import {
   saveSelectedAccount,
   replaceAccounts,
   getSelectedNetwork,
-  copyAddress,
+  copyText,
   replaceNetworks,
   getUrl,
   saveSelectedNetwork,
   numToHexStr,
   openTab,
+  getSettings,
+  getVersion,
 } from "@/utils/platform";
 import type { Network, Account, Networks } from "@/extension/types";
 import { mainNets } from "@/utils/networks";
@@ -252,6 +282,8 @@ import router from "@/router";
 import { triggerListner } from "@/extension/listners";
 import { copyOutline } from "ionicons/icons";
 
+const version = getVersion();
+
 export default defineComponent({
   components: {
     IonContent,
@@ -283,6 +315,7 @@ export default defineComponent({
     const selectedAccount = (ref(null) as unknown) as Ref<Account>;
     const selectedNetwork = (ref(null) as unknown) as Ref<Network>;
     const toastState = ref(false);
+    const settings = ref({}) as Ref<Awaited<ReturnType<typeof getSettings>>>;
 
     const getToastRef = () => toastState;
 
@@ -292,15 +325,21 @@ export default defineComponent({
       const pNetworks = getNetworks();
       const pSelectedAccount = getSelectedAccount();
       const pSelectedNetwork = getSelectedNetwork();
-      Promise.all([pAccounts, pNetworks, pSelectedAccount, pSelectedNetwork]).then(
-        (res) => {
-          accounts.value = res[0];
-          networks.value = res[1];
-          selectedAccount.value = res[2];
-          selectedNetwork.value = res[3];
-          loading.value = false;
-        }
-      );
+      const pSettings = getSettings();
+      Promise.all([
+        pAccounts,
+        pNetworks,
+        pSelectedAccount,
+        pSelectedNetwork,
+        pSettings,
+      ]).then((res) => {
+        accounts.value = res[0];
+        networks.value = res[1];
+        selectedAccount.value = res[2];
+        selectedNetwork.value = res[3];
+        settings.value = res[4];
+        loading.value = false;
+      });
     };
 
     onIonViewWillEnter(() => {
@@ -361,7 +400,7 @@ export default defineComponent({
       selectedNetwork,
       changeSelectedAccount,
       changeSelectedNetwork,
-      copyAddress,
+      copyText,
       copyOutline,
       toastState,
       getToastRef,
@@ -369,6 +408,8 @@ export default defineComponent({
       mainNets,
       getUrl,
       openTab,
+      settings,
+      version,
     };
   },
 });

src/views/NetworksTab.vue

@@ -4,11 +4,11 @@
       <ion-toolbar>
         <ion-buttons slot="end">
           <router-link to="/tabs/add-network">
-          <ion-button>
-          <ion-icon slot="icon-only" :icon="addCircleOutline"></ion-icon>
-          </ion-button>
-        </router-link>
-          </ion-buttons>
+            <ion-button>
+              <ion-icon slot="icon-only" :icon="addCircleOutline"></ion-icon>
+            </ion-button>
+          </router-link>
+        </ion-buttons>
         <ion-title>Networks</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -19,30 +19,34 @@
         <ion-button @click="goToAddNetwork">Add Network</ion-button>
       </ion-item>
 
-        <ion-list v-for="network of networks" :key="network.chainId">
-       <ion-item>
-        <ion-avatar v-if="(mainNets as any)[network.chainId]?.icon" style="margin-right: 1rem; width: 1.8rem; height:1.8rem;">
-    <img :alt="network.name" :src="getUrl('assets/chain-icons/' + (mainNets as any)[network.chainId].icon)" />
-  </ion-avatar>
-       <ion-label>
-            {{ network.name }}
-        </ion-label>
-        <ion-label>
-            ID: {{ network.chainId }}
-        </ion-label>
-       </ion-item>
+      <ion-list v-for="network of networks" :key="network.chainId">
         <ion-item>
-        <ion-chip @click="editNetwork(network.chainId)" button>Edit</ion-chip>
-        <ion-chip @click="deleteNetwork(network.chainId)" button>Delete</ion-chip>
+          <ion-avatar
+            v-if="(mainNets as any)[network.chainId]?.icon"
+            style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
+          >
+            <img
+              :alt="network.name"
+              :src="getUrl('assets/chain-icons/' + (mainNets as any)[network.chainId].icon)"
+            />
+          </ion-avatar>
+          <ion-label>
+            {{ network.name }}
+          </ion-label>
+          <ion-label> ID: {{ network.chainId }} </ion-label>
         </ion-item>
-        </ion-list>
+        <ion-item>
+          <ion-chip @click="editNetwork(network.chainId)" button>Edit</ion-chip>
+          <ion-chip @click="deleteNetwork(network.chainId)" button>Delete</ion-chip>
+        </ion-item>
+      </ion-list>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, Ref } from "vue";
-import { getNetworks, copyAddress, getUrl, replaceNetworks } from "@/utils/platform"
+import { getNetworks, copyText, getUrl, replaceNetworks } from "@/utils/platform";
 import {
   IonContent,
   IonHeader,
@@ -57,12 +61,12 @@ import {
   IonButtons,
   IonButton,
   onIonViewWillEnter,
-  IonAvatar
+  IonAvatar,
 } from "@ionic/vue";
-import { mainNets } from "@/utils/networks"
+import { mainNets } from "@/utils/networks";
 import { addCircleOutline, copyOutline } from "ionicons/icons";
-import router from '@/router/index'
-import type { Networks } from '@/extension/types'
+import router from "@/router/index";
+import type { Networks } from "@/extension/types";
 
 export default defineComponent({
   components: {
@@ -77,60 +81,57 @@ export default defineComponent({
     IonLabel,
     IonChip,
     IonButtons,
-  IonButton,
-  IonAvatar
+    IonButton,
+    IonAvatar,
   },
-  setup () {
-    const networks = ref({}) as Ref<Networks>
-    const loading = ref(true)
-    const toastState = ref(false)
+  setup() {
+    const networks = ref({}) as Ref<Networks>;
+    const loading = ref(true);
+    const toastState = ref(false);
+
+    const getToastRef = () => toastState;
 
-    const getToastRef = () => toastState
-    
     const loadData = () => {
-      const pAccounts = getNetworks()
-      Promise.all([pAccounts]).then(( res )  => {
-        networks.value = res[0]
-        loading.value = false
-      })
-    }
+      const pAccounts = getNetworks();
+      Promise.all([pAccounts]).then((res) => {
+        networks.value = res[0];
+        loading.value = false;
+      });
+    };
 
     const deleteNetwork = async (chainId: number) => {
-        loading.value = true
-        delete networks.value[chainId]
-        await replaceNetworks(networks.value)
-        loading.value = false
-    }
+      loading.value = true;
+      delete networks.value[chainId];
+      await replaceNetworks(networks.value);
+      loading.value = false;
+    };
 
     const editNetwork = (chainId: number) => {
-      router.push(`add-network/edit/${chainId}`)
-    }
-
+      router.push(`add-network/edit/${chainId}`);
+    };
 
     const goToAddNetwork = () => {
       router.push("/tabs/add-network");
     };
 
-
     onIonViewWillEnter(() => {
-        loadData()
-      })
+      loadData();
+    });
 
-      return {
-        networks,
-        addCircleOutline,
-        copyOutline,
-        toastState,
-        copyAddress,
-        getToastRef,
-        getUrl,
-        mainNets,
-        deleteNetwork,
-        editNetwork,
-        loading,
-        goToAddNetwork
-      }
-
-  }
+    return {
+      networks,
+      addCircleOutline,
+      copyOutline,
+      toastState,
+      copyText,
+      getToastRef,
+      getUrl,
+      mainNets,
+      deleteNetwork,
+      editNetwork,
+      loading,
+      goToAddNetwork,
+    };
+  },
 });
 </script>

src/views/SettingsTab.vue

@@ -89,7 +89,7 @@
         </ion-accordion>
         <ion-accordion value="2">
           <ion-item slot="header" color="light">
-            <ion-label>Theme</ion-label>
+            <ion-label>Theme & Misc</ion-label>
           </ion-item>
           <div class="ion-padding" slot="content">
             <ion-list>
@@ -107,6 +107,18 @@
                   <ion-label>Light</ion-label>
                 </ion-item>
               </ion-radio-group>
+              <ion-item>
+                <ion-label style="font-size: 0.7rem"
+                  >Convert Address to lowercase on copy</ion-label
+                >
+                <ion-toggle
+                  aria-label="Convert Address to Lowercase on Copy"
+                  @ion-change="changeCopyLowerCaseAddress"
+                  :key="updateKey"
+                  slot="end"
+                  :checked="settings.s.copyLowerCaseAddress"
+                ></ion-toggle>
+              </ion-item>
             </ion-list>
           </div>
         </ion-accordion>
@@ -408,6 +420,12 @@ export default defineComponent({
       defaultAccordionOpen.value = "1";
     };
 
+    const changeCopyLowerCaseAddress = async () => {
+      settings.s.copyLowerCaseAddress = !settings.s?.copyLowerCaseAddress;
+      await saveSettings();
+      defaultAccordionOpen.value = "2";
+    };
+
     const changeTheme = async (theme: "system" | "light" | "dark") => {
       document.body.classList.remove(radioTheme.value);
       document.body.classList.add(theme);
@@ -697,6 +715,7 @@ export default defineComponent({
       openTab,
       radioTheme,
       changePermaLock,
+      changeCopyLowerCaseAddress,
     };
   },
 });