fix: prevent transfer send opening on unsupported deeplinks

Author: pstachel

src/composables/deepLinkApi.ts

@@ -1,9 +1,16 @@
 import { ref } from 'vue';
-import { Router, RouteLocationNormalized as Route } from 'vue-router';
+import {
+  Router,
+  RouteLocationNormalized as Route,
+} from 'vue-router';
+import { checkIfSuperheroCallbackUrl } from '@/utils';
+import { MODAL_TRANSFER_SEND } from '@/constants';
+import { useModals } from '@/composables/modals';
 
 export interface UseDeepLinkApiOptions {
   router: Router
 }
+
 /**
  * TODO: refactor once upgrade to vue-router: 4.x.x
  * @param { router: Router }
@@ -16,6 +23,17 @@ export function useDeepLinkApi({ router }: UseDeepLinkApiOptions) {
       : null,
   );
 
+  /**
+   * Function needed to support legacy tipping from superhero.com
+   */
+  function checkIfOpenTransferSendModal() {
+    if (checkIfSuperheroCallbackUrl(route.query)) {
+      const { openModal } = useModals();
+
+      openModal(MODAL_TRANSFER_SEND);
+    }
+  }
+
   function openCallbackOrGoHome(
     isSuccess: boolean,
     templateParams: Record<string, string> = {},
@@ -34,6 +52,7 @@ export function useDeepLinkApi({ router }: UseDeepLinkApiOptions) {
   }
 
   return {
+    checkIfOpenTransferSendModal,
     callbackOrigin,
     openCallbackOrGoHome,
   };

src/composables/transferSendForm.ts

@@ -1,5 +1,6 @@
 import {
   computed,
+  nextTick,
   ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -44,7 +45,7 @@ export function useTransferSendForm({
 
   const { t } = useI18n();
   const { openModal, openDefaultModal } = useModals();
-  const { errors, validate } = useForm();
+  const { errors, validate, validateField } = useForm();
 
   const hasError = computed((): boolean => ['address', 'amount'].some((errorKey) => getMessageByFieldName(errors.value[errorKey]).status === 'error'));
 
@@ -68,10 +69,10 @@ export function useTransferSendForm({
     const result: Partial<TransferFormModel> = {};
 
     const selectedToken = tokenHandler ? tokenHandler(token, formModel.value.selectedAsset) : null;
+
     if (selectedToken) {
       result.selectedAsset = selectedToken;
     }
-
     if (account) {
       result.address = account;
     }
@@ -85,11 +86,14 @@ export function useTransferSendForm({
     return result;
   }
 
-  function updateFormModelValues(params: Dictionary) {
+  async function updateFormModelValues(params: Dictionary) {
+    const updatedValues = returnFormModelValues(params, getSelectedAssetValue);
     formModel.value = {
       ...formModel.value,
-      ...returnFormModelValues(params, getSelectedAssetValue),
+      ...updatedValues,
     };
+    await nextTick();
+    Object.keys(updatedValues).forEach((field) => validateField(field));
   }
 
   async function openScanQrModal(tokenBalances: IToken[]) {

src/lib/RouteQueryActionsController.ts

@@ -1,8 +1,4 @@
-import {
-  LocationQuery,
-  Router,
-} from 'vue-router';
-import { Ref } from 'vue';
+import { Router } from 'vue-router';
 import { Dictionary } from '@/types';
 import { useModals } from '@/composables';
 import { APP_LINK_WEB, MODAL_TRANSFER_SEND } from '@/constants';
@@ -56,28 +52,12 @@ export const RouteQueryActionsController = (() => {
     },
   };
 
-  function getDeeplinkAction(
-    query: LocationQuery,
-    isLoggedIn: Ref<boolean>,
-  ): RouteQueryActionName | null {
-    if (!isLoggedIn.value || !query) {
-      return null;
-    }
-
-    return (query['x-success'] && query['x-cancel'])
-      ? 'transferSend'
-      : null;
-  }
-
   /**
    * Monitor the action arguments in the query string and perform assigned action method.
    */
-  function init(router: Router, isLoggedIn: Ref<boolean>) {
+  function init(router: Router) {
     const unbind = router.beforeResolve(({ query }, from, next) => {
-      const action = (
-        query?.[ACTION_PROP]
-        || getDeeplinkAction(query, isLoggedIn)
-      ) as null | RouteQueryActionName;
+      const action = query?.[ACTION_PROP] as null | RouteQueryActionName;
 
       if (action && typeof action === 'string' && availableActions[action]) {
         const queryWithoutAction = { ...query };

src/popup/components/Modals/TransferSend.vue

@@ -19,7 +19,11 @@
  * or displaying the modals.
  */
 
-import { PropType, defineAsyncComponent, defineComponent } from 'vue';
+import {
+  PropType,
+  defineAsyncComponent,
+  defineComponent,
+} from 'vue';
 import { useStore } from 'vuex';
 import type { Protocol, ProtocolView, ProtocolViewsConfig } from '@/types';
 import { DISTINCT_PROTOCOL_VIEWS, PROTOCOL_AETERNITY } from '@/constants';
@@ -30,7 +34,9 @@ import aeternityViews from '@/protocols/aeternity/views';
 import bitcoinViews from '@/protocols/bitcoin/views';
 
 import { useRoute } from 'vue-router';
-import { detectProtocolByOwner } from '@/utils';
+import {
+  detectProtocolByOwner,
+} from '@/utils';
 import InfoBox from './InfoBox.vue';
 
 /**
@@ -54,13 +60,16 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore();
-    const { activeAccount } = useAccounts({ store });
-    const { activeNetwork } = useNetworks();
     const { params, meta } = useRoute();
+
+    const { activeNetwork } = useNetworks();
+    const { activeAccount } = useAccounts({ store });
+
     const ownerProtocol = detectProtocolByOwner(
       activeNetwork.value.type,
       params.transactionOwner as string,
     );
+
     const importViewComponent = views[
       meta.isMultisig
         ? PROTOCOL_AETERNITY

src/popup/components/ProtocolSpecificView.vue

@@ -3,6 +3,7 @@
     <Field
       v-slot="{ field }"
       name="address"
+      :model-value="modelValue"
       :rules="{
         required: true,
         not_same_as: [activeAccount.address, protocol],

src/popup/components/TransferSend/TransferSendRecipient.vue

@@ -49,17 +49,25 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-
+import {
+  defineComponent,
+  onMounted,
+} from 'vue';
+import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
+
 import {
   DASHBOARD_CARD_ID,
   IS_CORDOVA,
   PROTOCOL_AETERNITY,
   UNFINISHED_FEATURES,
 } from '@/constants';
 import { ROUTE_ACCOUNT_DETAILS_NAMES_CLAIM, ROUTE_APPS_BROWSER } from '@/popup/router/routeNames';
-import { useAccounts, useAeSdk } from '@/composables';
+import {
+  useAccounts,
+  useAeSdk,
+  useDeepLinkApi,
+} from '@/composables';
 
 import DashboardCard from '@/popup/components/DashboardCard.vue';
 import DashboardWrapper from '@/popup/components/DashboardWrapper.vue';
@@ -89,14 +97,20 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const router = useRouter();
 
     const {
       activeAccount,
       activeAccountSimplexLink,
     } = useAccounts({ store });
+    const { checkIfOpenTransferSendModal } = useDeepLinkApi({ router });
 
     const { isNodeMainnet, isNodeTestnet } = useAeSdk({ store });
 
+    onMounted(() => {
+      checkIfOpenTransferSendModal();
+    });
+
     return {
       PROTOCOL_AETERNITY,
       DASHBOARD_CARD_ID,

src/popup/pages/Dashboard.vue

@@ -50,7 +50,7 @@ const {
 } = useAccounts({ store });
 const { setPopupProps } = usePopupProps();
 
-RouteQueryActionsController.init(router, isLoggedIn);
+RouteQueryActionsController.init(router);
 
 const unbind = router.beforeEach(async (to, from, next) => {
   await watchUntilTruthy(() => store.state.isRestored);

src/popup/router/index.ts

@@ -166,11 +166,13 @@ import { useStore } from 'vuex';
 import { Encoded } from '@aeternity/aepp-sdk';
 
 import {
-  AGGREGATOR_URL,
   MODAL_PAYLOAD_FORM,
   PROTOCOL_AETERNITY,
 } from '@/constants';
-import { isUrlValid } from '@/utils';
+import {
+  checkIfSuperheroCallbackUrl,
+  isUrlValid,
+} from '@/utils';
 import {
   useAccounts,
   useBalances,
@@ -406,8 +408,8 @@ export default defineComponent({
         }
 
         const { query } = route;
-        const slicedAggregatorUrl = AGGREGATOR_URL.endsWith('/') ? AGGREGATOR_URL.slice(0, -1) : AGGREGATOR_URL;
-        if ([query['x-success'], query['x-cancel']].every((value) => value && (value as string).startsWith(slicedAggregatorUrl))) {
+
+        if (checkIfSuperheroCallbackUrl(query)) {
           isUrlTippingEnabled.value = true;
         }
         updateFormModelValues({

src/protocols/aeternity/components/TransferSendForm.vue

@@ -8,6 +8,7 @@ import { WatchSource, watch } from 'vue';
 import { defer, uniqWith } from 'lodash-es';
 import BigNumber from 'bignumber.js';
 import { useI18n } from 'vue-i18n';
+import { LocationQuery } from 'vue-router';
 import type {
   BigNumberPublic,
   IAccount,
@@ -22,6 +23,7 @@ import type {
 } from '@/types';
 import {
   ADDRESS_GAP_LIMIT,
+  AGGREGATOR_URL,
   DECIMAL_PLACES_HIGH_PRECISION,
   DECIMAL_PLACES_LOW_PRECISION,
   IS_CORDOVA,
@@ -398,3 +400,11 @@ export async function defaultAccountDiscovery(
   ));
   return lastNotEmptyIdx;
 }
+
+export function checkIfSuperheroCallbackUrl(query: LocationQuery) {
+  const slicedAggregatorUrl = AGGREGATOR_URL.endsWith('/') ? AGGREGATOR_URL.slice(0, -1) : AGGREGATOR_URL;
+
+  return [query['x-success'], query['x-cancel']].every(
+    (value) => value && (value as string).startsWith(slicedAggregatorUrl),
+  );
+}