Merge pull request #20 from andrei0x309/dev/11

chore: changes for 1.4.11

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## Manifest Version 1.4.11
+
+- bumped all dependencies to the latest versions
+- changed release script to automatically take the latest version changes from the CHANGELOG.md
+- minor UI change to main view of the wallet
+- improved account selection UI and UX ( network selection view )
+- updated CI script logic and dependencies
+- added search in account selection in farcaster action view too
+
 ## Manifest Version 1.4.10
 
 - changed release script to automatically take the changes from the CHANGELOG.md

CI/index.ts

@@ -6,6 +6,7 @@ const args = Bun.argv.slice(2);
 const secrets = args[0]
 const event = args[1]
 const action = args[2]
+const changeLogUrl = 'https://clear-wallet.flashsoft.eu/docs/automated-changelog/'
 
 type TGithubEvent = {
     inputs: {
@@ -41,9 +42,6 @@ const main = async () => {
     const ENABLED = true;
     let YUP_PK = '';
     let FC_SIGNER = ''
-    let HUB_URL = ''
-    let HUB_USER = ''
-    let HUB_PASS = ''
     let GithubEvent: TGithubEvent = {} as TGithubEvent;
     const USER_FID = 709233;
 
@@ -53,16 +51,13 @@ const main = async () => {
         const parsedSecrets = JSON.parse(secrets);
         YUP_PK = parsedSecrets.YUP_PK;
         FC_SIGNER = parsedSecrets.FC_SIGNER;
-        HUB_URL = parsedSecrets.HUB_URL;
-        HUB_USER = parsedSecrets.HUB_USER;
-        HUB_PASS = parsedSecrets.HUB_PASS;
         GithubEvent = JSON.parse(event);
     } catch (e) {
         console.error('Error parsing data', e)
     }
 
     const yupAPI = new YupAPI({ PK: YUP_PK });
-    const fchubUtils = new FCHubUtils(FC_SIGNER, USER_FID, HUB_URL, HUB_USER, HUB_PASS);
+    const fchubUtils = new FCHubUtils(FC_SIGNER, USER_FID);
 
     if (action === 'update') {
         const VERSION = GithubEvent.inputs.version;
@@ -84,7 +79,7 @@ const main = async () => {
             const fcPostHash = Buffer.from(fcPost).toString('hex');
             if (fcPostHash) {
                 await new Promise((resolve) => setTimeout(resolve, 3000));
-                const launchCasterMessage = `@launch`
+                const launchCasterMessage = `@launch New Clear Wallet version ${VERSION} released! \n\nChanges: ${changeLogUrl}`
 
                 await fchubUtils.createFarcasterPost({
                     content: launchCasterMessage, replyTo: {

CI/package.json

@@ -3,13 +3,13 @@
   "module": "index.ts",
   "type": "module",
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "^1.1.18"
   },
   "peerDependencies": {
-    "typescript": "^5.5.3"
+    "typescript": "^5.7.3"
   },
   "dependencies": {
-    "farcaster-hub-utils": "0.1.8",
+    "farcaster-hub-utils": "0.1.10",
     "yup-api-interact": "0.1.7"
   },
   "license": "MIT"

package.json

@@ -27,7 +27,7 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "2.0.0-beta.28",
+    "@crxjs/vite-plugin": "2.0.0-beta.30",
     "@types/archiver": "^6.0.3",
     "@types/chrome": "^0.0.297",
     "@types/jest": "^29.5.14",

release-scripts/create-release.ts

@@ -27,25 +27,20 @@ function limitedSplit(str: string, delimiter: string, limit: number): string[] {
   if (limit <= 0) {
     throw new Error("Limit must be greater than 0");
   }
-
   const result: string[] = [];
-  let current = 0;
-  let found;
-
-  do {
-    found = str.indexOf(delimiter, current);
-    if (found === -1 || result.length === limit - 1) {
-      result.push(str.substring(current));
+  let remaining: string = str;
+  for (let i = 0; i < limit; i++) {
+    const index = remaining.indexOf(delimiter);
+    if (index === -1) {
       break;
     }
-    result.push(str.substring(current, found));
-    current = found + delimiter.length; 
-  } while (true);
-
+    result.push(remaining.substring(0, index));
+    remaining = remaining.substring(index + delimiter.length);
+  }
   return result;
 }
 
-const getLastChangeLog = async () => {
+export const getLastChangeLog = async () => {
   const mainChainLogPath = 'CHANGELOG.md';
   const fs = (await pFs).default
   if (!fs.existsSync(mainChainLogPath)) {
@@ -92,10 +87,11 @@ async function ghRelease (isRebuild: boolean) {
 
   if (!isRebuild) {
     const changeLogPath = `releases/${pkg.version}.changelog.md`;
+    const releaseCreationDate = new Date().toISOString();
 
     fs.writeFileSync(
       changeLogPath,
-      `# ${pkg.version} \n
+      `# Latest changes - (${releaseCreationDate})\n\n
   ${await getLastChangeLog()}`,
     );
     const cps = (await pCps)

release-scripts/tests/release-scripts.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test";
+import { getLastChangeLog } from '../create-release';
+
+
+let testOrSkip: typeof test | typeof test.skip;
+
+const testEnabled = {
+    "getLastLog": true,
+}
+
+testOrSkip = testEnabled.getLastLog ? test : test.skip;
+
+testOrSkip("getLastChangeLog", async () => {
+    const lastChangeLog = await getLastChangeLog();
+    expect(lastChangeLog.length).toBeGreaterThan(0);
+});

release-scripts/version-release.ts

@@ -3,6 +3,13 @@ import { readFileSync, writeFileSync } from 'fs';
 import { resolve } from 'path';
 
 async function main() {
+  // 0. Check tag is not already created
+  const tags = execSync(`git tag --list`).toString();
+  if (tags.includes(`v${process.env.npm_package_version}`)) {
+    console.log(`Tag v${process.env.npm_package_version} already exists`);
+    return;
+  }
+
   // 1. Bump version in package.json
   const packageJsonPath = resolve('./package.json');
   const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));

src/extension/manifest.json

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

src/extension/serviceWorker.ts

@@ -612,7 +612,7 @@ const mainListner = (message: RequestArguments, sender: any, sendResponse: (a: a
                                 }, 6e4)
                             }
                             chrome.notifications.create(notificationId, {
-                                message: 'Transaction Confirmed',
+                                message: 'Transaction Sent',
                                 title: 'Success',
                                 iconUrl: getUrl('assets/extension-icon/wallet_128.png'),
                                 type: 'basic',

src/views/AccountsTab.vue

@@ -33,7 +33,8 @@
         </ion-item>
         <ion-item @click="copyText(account.address, getToastRef())">
           <p style="font-size: 0.7rem">{{ account.address }}</p>
-          <ion-icon :icon="copyOutline"></ion-icon>
+          &nbsp;
+          <ion-icon class="copy-icon" :icon="copyOutline"></ion-icon>
         </ion-item>
         <ion-item>
           <ion-chip @click="viewPk(account.address)">View Pk</ion-chip>
@@ -233,3 +234,18 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+
+.copy-icon {
+  font-size: 1.5rem;
+  color: var(--primary-color);
+  margin-left: 0.5rem;
+}
+
+.copy-icon:hover {
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+  transform: scale(1.05);
+}
+</style>

src/views/FarcasterActions.vue

@@ -81,35 +81,57 @@
             <ion-buttons slot="start">
               <ion-button @click="accountsModal = false">Close</ion-button>
             </ion-buttons>
-            <ion-title>Select</ion-title>
+            <ion-title>Select Account</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content class="ion-padding">
           <ion-list style="margin-bottom: 4rem">
             <ion-radio-group :value="selectedAccount?.address ?? ''">
               <ion-list-header>
-                <ion-label>Accounts</ion-label>
+                <ion-searchbar
+                  placeholder="search..."
+                  autocomplete="off"
+                  autocorrect="off"
+                  :autofocus="true"
+                  :clear-input="false"
+                  :clear-on-edit="false"
+                  :spellcheck="false"
+                  :tabindex="0"
+                  @ionInput="searchAccount"
+                ></ion-searchbar>
               </ion-list-header>
 
               <ion-list
                 @click="changeSelectedAccount(account.address)"
                 class="ion-padding"
-                v-for="account of accounts"
+                v-for="account of filtredAccounts"
                 :key="account.address"
                 button
               >
                 <ion-item>
                   <ion-radio
                     :aria-label="account.name"
-                    slot="start"
                     :value="account.address"
-                    >{{ account.name }}</ion-radio
+                    slot="end"
+                    labelPlacement="end"
+                    mode="ios"
+                    justify="start"
+                    color="warning"
+                    style="margin-left: 0.1rem"
                   >
-                </ion-item>
-                <ion-item>
-                  <ion-text style="font-size: 0.7rem; color: coral">{{
-                    account.address
+                    <div style="margin-left: 0.5rem">{{ account.name }}</div>
+                    <div style="margin-top: 0.1rem">
+                      <ion-text style="font-size: 0.65rem; color: coral">{{
+                        account.address.slice(0, 6)
                       }}</ion-text>
+                      <ion-text style="font-size: 0.65rem">{{
+                        account.address.slice(6, -4)
+                      }}</ion-text>
+                      <ion-text style="font-size: 0.65rem; color: coral">{{
+                        account.address.slice(-4)
+                      }}</ion-text>
+                    </div>
+                  </ion-radio>
                 </ion-item>
               </ion-list>
             </ion-radio-group>
@@ -279,6 +301,7 @@ export default defineComponent({
 
     const loading = ref(false);
     const accounts = ref([]) as Ref<Account[]>;
+    const filtredAccounts = ref([]) as Ref<Account[]>;
     const accountsModal = ref(false) as Ref<boolean>;
     const selectedAccount = (ref(null) as unknown) as Ref<Account>;
     const toastState = ref(false);
@@ -289,6 +312,7 @@ export default defineComponent({
       const pSelectedAccount = getSelectedAccount();
       Promise.all([pAccounts, pSelectedAccount]).then((res) => {
         accounts.value = res[0];
+        filtredAccounts.value = res[0];
         selectedAccount.value = res[1];
         loading.value = false;
       });
@@ -543,6 +567,19 @@ export default defineComponent({
       return false;
     };
 
+    const searchAccount = (e: any) => {
+      const text = e.target.value;
+      if (text) {
+        filtredAccounts.value = accounts.value.filter(
+          (item) =>
+            item.name.toLowerCase().includes(text.toLowerCase()) ||
+            item.address.toLowerCase().includes(text.toLowerCase())
+        );
+      } else {
+        filtredAccounts.value = accounts.value;
+      }
+    };
+
     return {
       name,
       pk,
@@ -567,6 +604,8 @@ export default defineComponent({
       exitWallet,
       alertHeader,
       farcasterSWIWQRAuthorize,
+      searchAccount,
+      filtredAccounts,
     };
   },
 });

src/views/HomeTab.vue

@@ -8,18 +8,22 @@
           >
             <img alt="clw" :src="getUrl('assets/extension-icon/wallet_32.png')" />
           </ion-avatar>
-          <span style="position: absolute; top: 0.45rem; margin-left: 0.3rem"
-            >CL Wallet</span
-          >
+          <span style="position: absolute; top: 0.35rem; margin-left: 0.3rem">
+            <span style="font-size: 0.9rem; font-weight: bold; color: #aca3bb">
+              Clear
+            </span>
+            <span style="font-size: 0.9rem; color: #aca3bb"> Wallet </span>
+          </span>
           <span
             v-if="version"
             style="
               position: absolute;
               right: 1.1rem;
               margin-left: 0.3rem;
-              color: #645285;
+              color: #aca3bb;
               font-weight: bold;
               font-size: 0.65rem;
+              top: -1px;
             "
             >Version: {{ version }}</span
           >
@@ -38,7 +42,13 @@
       </ion-item>
       <ion-list v-else>
         <ion-item>
-          <ion-label>Selected Account: {{ selectedAccount?.name }}</ion-label>
+          <ion-label>
+            <span style="color: #aca3bb; font-weight: bold; font-size: 0.85rem"
+              >[ Selected Account ]:</span
+            >&nbsp;
+
+            {{ selectedAccount?.name }}</ion-label
+          >
           <ion-button
             @click="
               () => {
@@ -60,7 +70,7 @@
             )
           "
         >
-          <p style="font-size: 0.7rem; color: #645285">{{ selectedAccount?.address }}</p>
+          <p style="font-size: 0.7rem; color: #aca3bb">{{ selectedAccount?.address }}</p>
           <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
         </ion-item>
         <ion-item
@@ -106,10 +116,12 @@
           button
           @click="copyText(String(selectedNetwork?.chainId), getToastRef())"
           style="cursor: pointer"
-          >Selected Network ID:&nbsp;
-          <span style="color: #645285; font-weight: bold">{{
-            selectedNetwork?.chainId
-          }}</span>
+        >
+          <span style="color: #aca3bb; font-weight: bold; font-size: 0.85rem"
+            >[ Selected Network ID ]:</span
+          >
+          &nbsp;
+          <span style="font-weight: bold">{{ selectedNetwork?.chainId }}</span>
           <ion-icon
             style="margin-left: 0.5rem; top: 2px; position: relative"
             :icon="copyOutline"
@@ -181,14 +193,13 @@
           <ion-buttons slot="start">
             <ion-button @click="accountsModal = false">Close</ion-button>
           </ion-buttons>
-          <ion-title>Select</ion-title>
+          <ion-title>Select Account</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
         <ion-list style="margin-bottom: 4rem">
           <ion-radio-group :value="selectedAccount?.address ?? ''">
             <ion-list-header>
-              <ion-label>Accounts</ion-label>
               <ion-searchbar
                 placeholder="search..."
                 autocomplete="off"
@@ -212,15 +223,27 @@
               <ion-item>
                 <ion-radio
                   :aria-label="account.name"
-                  slot="start"
                   :value="account.address"
-                  >{{ account.name }}</ion-radio
+                  slot="end"
+                  labelPlacement="end"
+                  mode="ios"
+                  justify="start"
+                  color="warning"
+                  style="margin-left: 0.1rem"
                 >
-              </ion-item>
-              <ion-item>
-                <ion-text style="font-size: 0.7rem; color: coral">{{
-                  account.address
+                  <div style="margin-left: 0.5rem">{{ account.name }}</div>
+                  <div style="margin-top: 0.1rem">
+                    <ion-text style="font-size: 0.65rem; color: coral">{{
+                      account.address.slice(0, 6)
                     }}</ion-text>
+                    <ion-text style="font-size: 0.65rem">{{
+                      account.address.slice(6, -4)
+                    }}</ion-text>
+                    <ion-text style="font-size: 0.65rem; color: coral">{{
+                      account.address.slice(-4)
+                    }}</ion-text>
+                  </div>
+                </ion-radio>
               </ion-item>
             </ion-list>
           </ion-radio-group>
@@ -261,12 +284,14 @@
               <ion-item>
                 <ion-radio
                   @click="changeSelectedNetwork(network.chainId)"
-                  slot="start"
                   :value="network.chainId"
                   :aria-label="network.name"
+                  slot="start"
                   labelPlacement="start"
                   mode="ios"
                   justify="space-between"
+                  color="warning"
+                  style="padding: 0.5rem"
                 >
                   <div>
                     <ion-avatar
@@ -571,7 +596,7 @@ export default defineComponent({
   top: 0.9rem;
   right: 2.4rem;
   margin-left: 0.3rem;
-  color: #645285;
+  color: #aca3bb;
   font-weight: bold;
   font-size: 0.65rem;
   cursor: pointer;

tsconfig.json

@@ -36,6 +36,7 @@
     "tests/**/*.tsx"
   ],
    "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist"
   ]
 }