feat: present more info on contract call signing

Author: CedrikNikita

src/constants/common.ts

@@ -297,6 +297,7 @@ export const APP_LINK_IOS = 'https://apps.apple.com/us/app/superhero-wallet/id15
 
 export const BUG_REPORT_URL = 'https://spgrrc00ymg.typeform.com/to/Kk3Zyjdr';
 export const AGGREGATOR_URL = 'https://superhero.com/';
+export const SUPERHERO_CHAT_URL = 'https://chat.superhero.com';
 export const CONTACT_EMAIL = '[email protected]';
 
 export const MODAL_ACCOUNT_CREATE = 'account-create';

src/lib/json-big.js

@@ -17,7 +17,7 @@ const convertValuesToBigNumbers = (value) => {
     bn.toJSON = () => bn.toString(10);
     return bn;
   }
-  return value;
+  return value.toString();
 };
 
 export default {

src/popup/components/Modals/ConfirmTransactionSign.vue

@@ -13,14 +13,35 @@
     <template v-else>
       <TransactionOverview
         :transaction="completeTransaction"
+        :additional-tag="isAeppChatSuperhero
+          ? $t('modals.confirmTransactionSign.superheroChat')
+          : null"
       />
+      <div
+        v-if="isAeppChatSuperhero || error"
+        class="subtitle"
+        :class="{ warning: !!error }"
+      >
+        <template v-if="!!error">
+          {{ $t('modals.confirmTransactionSign.unableToExecute') }}
+        </template>
+        <template v-else>
+          <span class="app-name">{{ $t('modals.confirmTransactionSign.superheroChat') }}</span>
+          {{ $t('modals.confirmTransactionSign.confirmSigning') }}
+        </template>
+      </div>
       <DetailsItem
         v-if="!!error"
         :label="$t('pages.transactionDetails.reason')"
         :value="error"
         class="reason"
         data-cy="reason"
       />
+      <DetailsItem
+        v-if="decodedCallData?.functionName"
+        :label="$t('modals.confirmTransactionSign.functionName')"
+        :value="decodedCallData.functionName"
+      />
 
       <template v-if="(isDex || isDexAllowance) && tokenList.length">
         <TransactionDetailsPoolTokenRow
@@ -86,6 +107,16 @@
         expandable
         :label="$t('transaction.advancedDetails')"
       >
+        <DetailsItem
+          v-if="decodedCallData?.functionName"
+          :label="$t('modals.confirmTransactionSign.functionName')"
+          :value="decodedCallData.functionName"
+        />
+        <DetailsItem
+          v-if="transactionArguments"
+          :label="$t('modals.confirmTransactionSign.arguments')"
+          :value="transactionArguments"
+        />
         <DetailsItem
           v-for="key in filteredTxFields"
           :key="key"
@@ -133,6 +164,7 @@ import BigNumber from 'bignumber.js';
 import { Encoded, getExecutionCost } from '@aeternity/aepp-sdk';
 import { ContractByteArrayEncoder, BytecodeContractCallEncoder } from '@aeternity/aepp-calldata';
 
+import JsonBig from '@/lib/json-big';
 import type {
   ITokenResolved,
   ITransaction,
@@ -142,8 +174,10 @@ import type {
   TxFunctionRaw,
 } from '@/types';
 import { tg } from '@/store/plugins/languages';
+import { AeDecodedCallData } from '@/protocols/aeternity/types';
 import { RejectedByUserError } from '@/lib/errors';
 import {
+  SUPERHERO_CHAT_URL,
   PROTOCOL_AETERNITY,
   TX_DIRECTION,
 } from '@/constants';
@@ -241,11 +275,16 @@ export default defineComponent({
     const loading = ref(false);
     const error = ref('');
     const verifying = ref(false);
+    const decodedCallData = ref<AeDecodedCallData | undefined>();
 
     const availableTokens = useState('fungibleTokens', 'availableTokens');
     const getTxSymbol = useGetter('getTxSymbol');
     const getTxAmountTotal = useGetter('getTxAmountTotal');
 
+    const isAeppChatSuperhero = computed(
+      () => `${popupProps.value?.app?.protocol}//${popupProps.value?.app?.name}` === SUPERHERO_CHAT_URL,
+    );
+
     const transactionWrapped = computed(
       (): Partial<ITransaction> => ({ tx: popupProps.value?.tx as ITx }),
     );
@@ -312,6 +351,10 @@ export default defineComponent({
       () => txFunction.value && DEX_TRANSACTION_TAGS[txFunction.value] === DEX_PROVIDE_LIQUIDITY,
     );
 
+    const transactionArguments = computed(() => decodedCallData.value?.args?.length
+      ? JsonBig.stringify(decodedCallData.value.args)
+      : undefined);
+
     function getTokens(txParams: ITx): ITokenResolved[] {
       if (!isDex.value && !isDexAllowance.value) {
         return [singleToken.value];
@@ -404,7 +447,7 @@ export default defineComponent({
       }
     }
 
-    async function loadAdditionalDexInfo() {
+    async function loadAdditionalContractCallInfo() {
       if (popupProps.value?.tx?.contractId && popupProps.value.tx.callData) {
         try {
           loading.value = true;
@@ -420,13 +463,15 @@ export default defineComponent({
 
           const bytecodeContractCallEncoder = new BytecodeContractCallEncoder(bytecode);
 
-          const rawTxParams = bytecodeContractCallEncoder.decodeCall(
+          decodedCallData.value = bytecodeContractCallEncoder.decodeCall(
             popupProps.value.tx.callData,
-          ) as any;
+          ) as AeDecodedCallData;
+
+          if (!decodedCallData.value) return;
 
           const txParams = {
-            function: rawTxParams.functionName as TxFunctionRaw,
-            arguments: rawTxParams.args.map((arg: any) => ({
+            function: decodedCallData.value.functionName as TxFunctionRaw,
+            arguments: decodedCallData.value.args.map((arg: any) => ({
               type: Array.isArray(arg) ? 'list' : 'any',
               value: Array.isArray(arg) ? arg.map((element) => ({ value: element })) : arg,
             })) as TxArguments[],
@@ -462,7 +507,7 @@ export default defineComponent({
       if (popupProps.value) {
         await Promise.all([
           verifyTransaction(),
-          loadAdditionalDexInfo(),
+          loadAdditionalContractCallInfo(),
         ]);
       } else {
         error.value = t('modals.transaction-failed.msg');
@@ -474,37 +519,40 @@ export default defineComponent({
     });
 
     return {
-      AnimatedSpinner,
       AE_SYMBOL,
+      AnimatedSpinner,
       PROTOCOL_AETERNITY,
       TX_FIELDS_TO_DISPLAY,
+      cancel,
+      completeTransaction,
+      decodedCallData,
       error,
       executionCost,
-      verifying,
-      loading,
-      showAdvanced,
-      transactionWrapped,
-      popupProps,
       filteredTxFields,
-      completeTransaction,
-      tokenList,
-      tokenAmount,
-      tokenSymbol,
-      totalAmount,
-      swapDirection,
-      swapDirectionTranslation,
-      isSwap,
+      getLabels,
+      getTxKeyLabel,
+      getTxSymbol,
+      isAeppChatSuperhero,
       isDex,
       isDexAllowance,
       isHash,
+      isSwap,
       isTransactionAex9,
+      loading,
+      nameAeFee,
+      popupProps,
+      showAdvanced,
+      swapDirection,
+      swapDirectionTranslation,
       swapTokenAmountData,
-      getTxSymbol,
+      tokenAmount,
+      tokenList,
+      tokenSymbol,
+      totalAmount,
+      transactionArguments,
+      transactionWrapped,
       txAeFee,
-      nameAeFee,
-      getLabels,
-      cancel,
-      getTxKeyLabel,
+      verifying,
     };
   },
 });
@@ -523,6 +571,19 @@ export default defineComponent({
     height: 56px;
   }
 
+  .subtitle {
+    margin: 8px 0;
+    color: variables.$color-grey-light;
+
+    &.warning {
+      color: variables.$color-warning;
+    }
+
+    .app-name {
+      color: variables.$color-white;
+    }
+  }
+
   .transaction-overview {
     margin-bottom: 16px;
   }

src/popup/components/TransactionOverview.vue

@@ -6,6 +6,7 @@
     :recipient="preparedTransaction.recipient"
     :transaction-function="preparedTransaction.function"
     :transaction="transaction"
+    :additional-tag="additionalTag"
   />
 </template>
 
@@ -29,6 +30,7 @@ import type {
   TxFunction,
 } from '@/types';
 import { TX_DIRECTION } from '@/constants';
+import type { AeDecodedCallData } from '@/protocols/aeternity/types';
 import { TX_FUNCTIONS } from '@/protocols/aeternity/config';
 import {
   useAeSdk,
@@ -54,6 +56,7 @@ export default defineComponent({
   },
   props: {
     transaction: { type: Object as PropType<ITransaction>, required: true },
+    additionalTag: { type: String, default: null },
   },
   setup(props) {
     const store = useStore();
@@ -223,10 +226,10 @@ export default defineComponent({
 
       const bytecodeContractCallEncoder = new BytecodeContractCallEncoder(bytecode);
 
-      const txParams = bytecodeContractCallEncoder.decodeCall(calldata) as any;
+      const txParams = bytecodeContractCallEncoder.decodeCall(calldata) as AeDecodedCallData;
       if (!txParams) return undefined;
 
-      return txParams.args?.[0];
+      return txParams.args?.[0] as Encoded.AccountAddress;
     }
 
     onMounted(async () => {

src/popup/components/TransactionTagList.vue

@@ -41,6 +41,7 @@ export default defineComponent({
   props: {
     customTitle: { type: String, default: null },
     transaction: { type: Object as PropType<ITransaction>, default: null },
+    additionalTag: { type: String, default: null },
     dense: Boolean,
   },
   setup(props) {
@@ -84,6 +85,10 @@ export default defineComponent({
 
       const arr: string[] = [];
 
+      if (props.additionalTag) {
+        arr.push(props.additionalTag);
+      }
+
       if (outerTxTag.value === Tag.GaMetaTx) {
         arr.push(t('transaction.type.gaMetaTx'));
       } else if (outerTxTag.value === Tag.PayingForTx) {

src/popup/locales/en.json

@@ -288,7 +288,12 @@
       "nameFee": "Name fee",
       "nameId": "Name ID",
       "pointers": "Pointers",
-      "data-sign": "Data to sign"
+      "data-sign": "Data to sign",
+      "functionName": "Function name",
+      "arguments": "Arguments",
+      "superheroChat": "Superhero Chat",
+      "unableToExecute": "This transaction can not be executed.",
+      "confirmSigning": "would like you to confirm a transaction."
     },
     "confirm-raw-sign": {
       "title": "Sign raw transaction",

src/protocols/aeternity/types.ts

@@ -50,3 +50,8 @@ export interface AeTippingContractAddresses {
   tippingV1?: Encoded.ContractAddress;
   tippingV2?: Encoded.ContractAddress;
 }
+
+export interface AeDecodedCallData {
+  functionName: string;
+  args: string[];
+}