Merge pull request #8 from andrei0x309/dev/3

chore: changes for 1.4.2

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## Manifest Version 1.4.2
+
+- better show farcaster wallet acion button
+- allow deep links to miss some non-essential parameters
+- better error handling on farcaster wallet actions
+- inform user why sign in with farcaster fails and close wallet if sign in succeeds
+
 ## Manifest Version 1.4.1
 
 - updated all dependencies to the latest versions

src/extension/manifest.json

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

src/utils/farcaster.ts

@@ -11,11 +11,11 @@ const FC_ID_REGISTRY_CONTRACT = '0x00000000fc6c5f01fc30151999387bb99a9f489b'
 export const extractLinkData = (link: string) => {
     const url = new URL(link);
     const channelToken = url.searchParams.get('channelToken');
-    const nonce = url.searchParams.get('nonce');
     const siweUri = url.searchParams.get('siweUri');
     const domain = url.searchParams.get('domain');
-    const notBefore = url.searchParams.get('notBefore');
+    const nonce = url.searchParams.get('nonce') || (Math.random() + 1).toString(36).substring(7);
-    const expirationTime = url.searchParams.get('expirationTime');
+    const notBefore = url.searchParams.get('notBefore') || undefined;
+    const expirationTime = url.searchParams.get('expirationTime') || undefined;
 
     return {
         channelToken,
@@ -35,8 +35,8 @@ export const extractLinkData = (link: string) => {
 }
 
 export const validateLinkData = (link: string) => {
-    const { channelToken, nonce, siweUri, domain, notBefore, expirationTime } = extractLinkData(link);
+    const { channelToken, nonce, siweUri, domain} = extractLinkData(link);
-    if (!channelToken || !nonce || !siweUri || !domain || !notBefore || !expirationTime) {
+    if (!channelToken || !siweUri || !domain || !nonce) {
         return false;
     }
     return true;
@@ -55,12 +55,12 @@ export const constructWarpcastSWIEMsg = ({
     siweUri: string,
     domain: string,
     nonce: string,
-    notBefore: string,
+    notBefore?: string,
-    expirationTime: string,
+    expirationTime?: string,
     fid: number,
     custodyAddress: string
 }) => {
-    return `${domain} wants you to sign in with your Ethereum account:\n${custodyAddress}\n\nFarcaster Auth\n\nURI: ${siweUri}\nVersion: 1\nChain ID: 10\nNonce: ${nonce}\nIssued At: ${notBefore}\nExpiration Time: ${expirationTime}\nNot Before: ${notBefore}\nResources:\n- farcaster://fid/${fid}`
+    return `${domain} wants you to sign in with your Ethereum account:\n${custodyAddress}\n\nFarcaster Auth\n\nURI: ${siweUri}\nVersion: 1\nChain ID: 10\nNonce: ${nonce}${notBefore ? `\nIssued At: ${notBefore}`: `\nIssued At: ${new Date(Date.now() - 1000).toISOString()}`}${expirationTime ? `\nExpiration Time: ${expirationTime}` : ''}${notBefore ? `\nNot Before: ${notBefore}`: ''}\nResources:\n- farcaster://fid/${fid}`
 }
  
 
@@ -140,8 +140,6 @@ export const doSignInWithFarcaster = async ({
         authToken = genToken.data;
     }
 
-    console.log('authToken', authToken);
-
     if (!authToken) {
         return -2;
     }

src/views/FarcasterActions.vue

@@ -81,10 +81,16 @@
 
       <ion-alert
         :is-open="alertOpen"
-        header="Error"
+        :header="alertHeader"
         :message="alertMsg"
         :buttons="['OK']"
-        @didDismiss="alertOpen = false"
+        @didDismiss="
+          () => {
+            alertOpen = false;
+            alertHeader = 'Error';
+            exitWallet && (window as any)?.close();
+          }
+        "
       ></ion-alert>
 
       <ion-modal :is-open="accountsModal">
@@ -248,6 +254,8 @@ export default defineComponent({
     const deepLink = ref("");
     const swloading = ref(false);
     const warpcastLoading = ref(false);
+    const exitWallet = ref(false);
+    const alertHeader = ref("Error");
 
     const loading = ref(false);
     const accounts = ref([]) as Ref<Account[]>;
@@ -293,6 +301,7 @@ export default defineComponent({
     };
 
     const farcasterSWIWAithorize = async () => {
+      exitWallet.value = false;
       if (!deepLink.value) {
         alertMsg.value = "Please enter the deep link";
         alertOpen.value = true;
@@ -322,6 +331,8 @@ export default defineComponent({
           link: deepLink.value,
         });
 
+        console.log("result", result);
+
         if (result === -1) {
           alertMsg.value =
             "Selected account does not own a FID please select an account that owns a FID";
@@ -333,16 +344,23 @@ export default defineComponent({
           alertOpen.value = true;
           swloading.value = false;
           return;
+        } else {
+          alertHeader.value = "OK";
+          alertMsg.value =
+            "Request sent successfully, if QR is still open, you should be signed in";
+          alertOpen.value = true;
+          swloading.value = false;
+          exitWallet.value = true;
         }
       } catch (e) {
         alertMsg.value = String(e);
         alertOpen.value = true;
       }
       swloading.value = false;
-      router.push("/tabs/home");
     };
 
     const promptForSignIn = async () => {
+      exitWallet.value = false;
       const targetUrl = "warpcast.com";
       chrome.tabs.query({ active: true, currentWindow: true }, async function (tabs) {
         const lastTab = tabs[0];
@@ -356,7 +374,6 @@ export default defineComponent({
         if (!lastTab?.url?.includes(targetUrl)) {
           alertOpen.value = true;
           alertMsg.value = "You are not on warpcast.com page";
-
           return;
         }
         if (!lastTab.id) {
@@ -419,12 +436,12 @@ export default defineComponent({
 
         const arg = { secret: token, expiresAt: 1777046287381 };
 
-        chrome.scripting.executeScript({
+        await chrome.scripting.executeScript({
           target: { tabId: lastTab.id },
           func: addWarpAuthToken,
           args: [arg],
         });
-
+        warpcastLoading.value = false;
         window.close();
       });
     };
@@ -462,6 +479,9 @@ export default defineComponent({
       swloading,
       promptForSignIn,
       warpcastLoading,
+      window,
+      exitWallet,
+      alertHeader,
     };
   },
 });

src/views/HomeTab.vue

@@ -138,7 +138,10 @@
         </div>
       </ion-item>
       <ion-item style="margin-top: 0.3rem; margin-bottom: 0.3rem; text-align: center">
-        <ion-button @click="goToFarcasterActions" expand="block"
+        <ion-button
+          @click="goToFarcasterActions"
+          expand="block"
+          style="margin: auto; width: 98%; font-size: 0.8rem; padding: 0.6rem"
           >Experimental Farcaster Wallet Actions</ion-button
         >
       </ion-item>

src/views/UnlockModal.vue

@@ -39,7 +39,7 @@
               type="password"
               @ion-input="mpPass = String($event.target.value)"
               fill="solid"
-              ref="passInput"
+              id="pass-input"
             ></ion-input>
 
             <!-- <ion-input
@@ -124,7 +124,6 @@ export default defineComponent({
     const loading = ref(false);
     const alertOpen = ref(false);
     const alertMsg = ref("");
-    const passInput = ref() as Ref<typeof IonInput>;
 
     const close = () => {
       return modalController?.dismiss(null, "cancel");
@@ -155,28 +154,20 @@ export default defineComponent({
     };
 
     onMounted(async () => {
-      console.log("rendered");
+      await new Promise((resolve) => setTimeout(resolve, 150));
-      if (passInput.value) {
+      const passInput = document.querySelector("#pass-input input") as HTMLInputElement;
-        await new Promise((resolve) => setTimeout(resolve, 50));
+      console.log("passInput", passInput);
-        passInput.value.$el.setFocus();
+      if (passInput) {
-        passInput.value.$el.addEventListener("keyup", (e: any) => {
+        passInput?.focus();
+        passInput.addEventListener("keyup", (e: any) => {
           if (e.key === "Enter") {
             unlock();
           }
         });
-        passInput.value.$el.addEventListener("blur", () => {
+        passInput.addEventListener("blur", () => {
-          passInput.value.$el.setFocus();
+          passInput?.focus();
-          passInput.value.$el.selectionStart = passInput.value?.$el.value.length;
         });
       }
-
-      // requestAnimationFrame(async () => {
-      //   if (passInput.value) {
-      //     await new Promise((resolve) => setTimeout(resolve, 50));
-      //     console.log("passInput.value", passInput.value);
-      //     passInput.value.$el.setFocus();
-      //   }
-      // });
     });
 
     return {
@@ -186,7 +177,6 @@ export default defineComponent({
       alertOpen,
       alertMsg,
       close,
-      passInput,
     };
   },
 });