Merge pull request #3376 from superhero-com/feature/show-fiat-value-i…

…n-transaction-item Show fiat value in `transactionItem`
superhero-com · Nov 1, 2024 · f0a96b3 · f0a96b3
2 parents d26e8d8 + c4cf011
commit f0a96b3
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/src/composables/transactionData.ts b/src/composables/transactionData.ts
@@ -65,7 +65,12 @@ export function useTransactionData({
   const { dexContracts } = useAeSdk();
   const { accounts, activeAccount } = useAccounts();
   const { tippingContractAddresses } = useTippingContracts();
-  const { getProtocolAvailableTokens, getTxAmountTotal, getTxAssetSymbol } = useFungibleTokens();
+  const {
+    getProtocolAvailableTokens,
+    getTxAmountTotal,
+    getTxAssetSymbol,
+    tokenBalances,
+  } = useFungibleTokens();
   const {
     tokenSaleAddresses,
     tokenSaleAddressToTokenContractAddress,
@@ -267,10 +272,13 @@ export function useTransactionData({
             .map(({
               amount,
               decimals,
+              contractId,
               ...otherAssetData
             }) => ({
               amount: +toShiftedBigNumber(amount!, -decimals!),
+              contractId,
               ...otherAssetData,
+              price: tokenBalances.value.find((token) => contractId === token.contractId)?.price,
             }));
         }
       }
@@ -308,6 +316,9 @@ export function useTransactionData({
       name: token?.name,
       protocol,
       symbol: getTxAssetSymbol(transaction.value),
+      price: tokenBalances.value.find(
+        (tokenBalance) => outerTx.value!.contractId === tokenBalance.contractId,
+      )?.price,
     }].concat(isReceived || hideFeeFromAssets ? [] : [feeToken]);
   });
 

diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -132,6 +132,7 @@ export const STORAGE_KEYS = {
   fungibleTokenBalances: 'fungible-token-balances',
   permissions: 'permissions',
   appsBrowserHistory: 'apps-browser-history',
+  tokenSales: 'token-sales',
   transactionsLatest: 'transactions-latest',
   transactionsLoaded: 'transactions-loaded',
   transactionsPending: 'transactions-pending',

diff --git a/src/popup/components/TransactionListItem.vue b/src/popup/components/TransactionListItem.vue
@@ -147,15 +147,24 @@ export default defineComponent({
     });
 
     const fiatAmount = computed(() => {
+      const tokenAsset = transactionAssets.value[0];
       const protocolCoin = transactionAssets.value?.find(
         ({ assetType }) => assetType === ASSET_TYPES.coin,
       );
-      if (!protocolCoin || isErrorTransaction.value || isDexPool.value || !protocolCoin.protocol) {
+      if (
+        (!tokenAsset?.price && !protocolCoin)
+        || isErrorTransaction.value
+        || isDexPool.value
+      ) {
         return 0;
       }
       return getFormattedAndRoundedFiat(
-        +amountRounded(protocolCoin.amount || 0),
-        protocolCoin.protocol,
+        +amountRounded(
+          tokenAsset?.price && tokenAsset?.amount
+            ? +tokenAsset.amount * tokenAsset.price
+            : protocolCoin?.amount || 0,
+        ),
+        transactionProtocol.value,
       );
     });
 

diff --git a/src/protocols/aeternity/composables/aeTokenSales.ts b/src/protocols/aeternity/composables/aeTokenSales.ts
@@ -2,7 +2,7 @@ import { computed, ref } from 'vue';
 import camelCaseKeysDeep from 'camelcase-keys-deep';
 
 import { ITokenSale } from '@/types';
-import { NETWORK_TYPE_CUSTOM } from '@/constants';
+import { NETWORK_TYPE_CUSTOM, STORAGE_KEYS } from '@/constants';
 import {
   createCustomScopedComposable,
   fetchAllPages,
@@ -12,6 +12,7 @@ import {
 import { useNetworks } from '@/composables';
 import { AE_TOKEN_SALES_URLS } from '@/protocols/aeternity/config';
 import { createPollingBasedOnMountedComponents } from '@/composables/composablesHelpers';
+import { useStorageRef } from '@/composables/storageRef';
 
 const POLLING_INTERVAL = 60000;
 
@@ -26,7 +27,10 @@ const initPollingWatcher = createPollingBasedOnMountedComponents(POLLING_INTERVA
 /**
  * List of all token sales available
  */
-const tokenSales = ref<ITokenSale[]>([]);
+const tokenSales = useStorageRef<ITokenSale[]>(
+  [],
+  STORAGE_KEYS.tokenSales,
+);
 
 export const useAeTokenSales = createCustomScopedComposable(() => {
   const { activeNetwork, onNetworkChange } = useNetworks();
@@ -68,7 +72,6 @@ export const useAeTokenSales = createCustomScopedComposable(() => {
         ));
         tokenSales.value = response || [];
       } catch (e) {
-        tokenSales.value = [];
         handleUnknownError(e);
       }
     } else {

diff --git a/src/protocols/aeternity/helpers/transactionTokenInfoResolvers.ts b/src/protocols/aeternity/helpers/transactionTokenInfoResolvers.ts
@@ -11,6 +11,7 @@ import {
   AE_CONTRACT_ID,
   AE_PROTOCOL_NAME,
 } from '@/protocols/aeternity/config';
+import { ASSET_TYPES, PROTOCOLS } from '@/constants';
 
 interface TransactionResolverReturnData {
   tokens: ITokenResolved[];
@@ -379,6 +380,8 @@ const buy: TransactionResolver = (transaction, tokens = null, tokenAddressMapper
   };
   const aeToken = {
     ...defaultToken,
+    assetType: ASSET_TYPES.coin,
+    protocol: PROTOCOLS.aeternity,
     amount: transaction.tx.amount,
     isReceived: false,
   };
@@ -407,6 +410,8 @@ const sell: TransactionResolver = (transaction, tokens = null, tokenAddressMappe
   };
   const aeToken = {
     ...defaultToken,
+    assetType: ASSET_TYPES.coin,
+    protocol: PROTOCOLS.aeternity,
     amount: aeAmount,
     isReceived: true,
   };