Cache token info in transactions, and use asset logo uri in role details

decentdao · Dec 9, 2024 · 8abecbf · 8abecbf
1 parent d13fbdc
commit 8abecbf
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/src/components/Roles/RolePaymentDetails.tsx b/src/components/Roles/RolePaymentDetails.tsx
@@ -321,6 +321,7 @@ export function RolePaymentDetails({
             <Flex justifyContent="space-between">
               <Flex gap={2}>
                 <Image
+                  h="2.5rem"
                   src={payment.asset.logo}
                   fallbackSrc="/images/coin-icon-default.svg"
                 />

diff --git a/src/hooks/DAO/loaders/useDecentTreasury.ts b/src/hooks/DAO/loaders/useDecentTreasury.ts
@@ -22,6 +22,8 @@ import {
 } from '../../../types';
 import { formatCoin } from '../../../utils';
 import { MOCK_MORALIS_ETH_ADDRESS } from '../../../utils/address';
+import { CacheExpiry, CacheKeys } from '../../utils/cache/cacheDefaults';
+import { setValue } from '../../utils/cache/useLocalStorage';
 
 export const useDecentTreasury = () => {
   // tracks the current valid DAO address / chain; helps prevent unnecessary calls
@@ -168,12 +170,14 @@ export const useDecentTreasury = () => {
       // make unique
       .filter((value, index, self) => self.indexOf(value) === index)
       // turn them into Address type
-      .map(address => getAddress(address));
+      .map(getAddress);
 
     const transfersTokenInfo = await Promise.all(
       tokenAddressesOfTransfers.map(async address => {
+        let tokenInfo: TokenInfoResponse;
+
         try {
-          return await safeAPI.getToken(address);
+          tokenInfo = await safeAPI.getToken(address);
         } catch (e) {
           const fallbackTokenData = tokenBalances?.find(
             tokenBalanceData => getAddress(tokenBalanceData.tokenAddress) === address,
@@ -198,14 +202,21 @@ export const useDecentTreasury = () => {
             };
           }
 
-          return {
+          tokenInfo = {
             address,
             name: fallbackTokenData.name,
             symbol: fallbackTokenData.symbol,
             decimals: fallbackTokenData.decimals,
             logoUri: fallbackTokenData.logo,
           };
         }
+
+        setValue(
+          { cacheName: CacheKeys.TOKEN_INFO, tokenAddress: address },
+          tokenInfo,
+          CacheExpiry.NEVER,
+        );
+        return tokenInfo;
       }),
     );
 

diff --git a/src/hooks/utils/cache/cacheDefaults.ts b/src/hooks/utils/cache/cacheDefaults.ts
@@ -1,3 +1,4 @@
+import { TokenInfoResponse } from '@safe-global/api-kit';
 import { Address } from 'viem';
 import { AzoriusProposal, DaoHierarchyInfo } from '../../../types';
 
@@ -34,52 +35,60 @@ export enum CacheKeys {
   MIGRATION = 'Migration',
   IPFS_HASH = 'IPFS Hash',
   HIERARCHY_DAO_INFO = 'Hierarchy DAO Info',
+  TOKEN_INFO = 'Token Info',
   // indexDB keys
   DECODED_TRANSACTION_PREFIX = 'decode_trans_',
   MULTISIG_METADATA_PREFIX = 'm_m_',
 }
 
-export type CacheKey = {
+type CacheKey = {
   cacheName: CacheKeys;
   version: number;
 };
 
-export interface FavoritesCacheKey extends CacheKey {
+interface FavoritesCacheKey extends CacheKey {
   cacheName: CacheKeys.FAVORITES;
 }
 
-export interface MasterCacheKey extends CacheKey {
+interface MasterCacheKey extends CacheKey {
   cacheName: CacheKeys.MASTER_COPY;
   chainId: number;
   proxyAddress: Address;
   moduleProxyFactoryAddress: Address;
 }
 
-export interface ProposalCacheKey extends CacheKey {
+interface ProposalCacheKey extends CacheKey {
   cacheName: CacheKeys.PROPOSAL_CACHE;
   proposalId: string;
   contractAddress: Address;
 }
 
-export interface AverageBlockTimeCacheKey extends CacheKey {
+interface AverageBlockTimeCacheKey extends CacheKey {
   cacheName: CacheKeys.AVERAGE_BLOCK_TIME;
   chainId: number;
 }
 
-export interface IPFSHashCacheKey extends CacheKey {
+interface IPFSHashCacheKey extends CacheKey {
   cacheName: CacheKeys.IPFS_HASH;
   hash: string;
   chainId: number;
 }
-export interface HierarchyDAOInfoCacheKey extends CacheKey {
+interface HierarchyDAOInfoCacheKey extends CacheKey {
   cacheName: CacheKeys.HIERARCHY_DAO_INFO;
   chainId: number;
   daoAddress: Address;
 }
 
+interface TokenInfoCacheKey extends CacheKey {
+  cacheName: CacheKeys.TOKEN_INFO;
+  chainId: number;
+  tokenAddress: Address;
+}
+
 export type CacheKeyType =
   | FavoritesCacheKey
   | HierarchyDAOInfoCacheKey
+  | TokenInfoCacheKey
   | MasterCacheKey
   | ProposalCacheKey
   | AverageBlockTimeCacheKey
@@ -105,6 +114,7 @@ type CacheKeyToValueMap = {
   [CacheKeys.MIGRATION]: number;
   [CacheKeys.IPFS_HASH]: string;
   [CacheKeys.HIERARCHY_DAO_INFO]: DaoHierarchyInfo;
+  [CacheKeys.TOKEN_INFO]: TokenInfoResponse;
 };
 
 export type CacheValueType<T extends CacheKeyType> = T extends { cacheName: infer U }
@@ -123,6 +133,7 @@ export const CACHE_VERSIONS: { [key: string]: number } = Object.freeze({
   [CacheKeys.PROPOSAL_CACHE]: 1,
   [CacheKeys.AVERAGE_BLOCK_TIME]: 1,
   [CacheKeys.HIERARCHY_DAO_INFO]: 1,
+  [CacheKeys.TOKEN_INFO]: 1,
 });
 
 /**

diff --git a/src/store/roles/useRolesStore.ts b/src/store/roles/useRolesStore.ts
@@ -2,6 +2,8 @@ import { getContract, Hex, PublicClient } from 'viem';
 import { create } from 'zustand';
 import { SablierV2LockupLinearAbi } from '../../assets/abi/SablierV2LockupLinear';
 import { convertStreamIdToBigInt } from '../../hooks/streams/useCreateSablierStream';
+import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
+import { getValue } from '../../hooks/utils/cache/useLocalStorage';
 import { DecentRoleHat, RolesStore } from '../../types/roles';
 import { initialHatsStore, sanitize } from './rolesStoreUtils';
 
@@ -119,11 +121,20 @@ const useRolesStore = create<RolesStore>()((set, get) => ({
           .map(ids => ids.streamId);
         return {
           ...roleHat,
-          payments: roleHat.isTermed
+          payments: (roleHat.isTermed
             ? roleHat.payments?.filter(payment => {
                 return filteredStreamIds.includes(payment.streamId);
               })
-            : roleHat.payments,
+            : roleHat.payments
+          )?.map(p => ({
+            ...p,
+            asset: {
+              ...p.asset,
+              logo:
+                getValue({ cacheName: CacheKeys.TOKEN_INFO, tokenAddress: p.asset.address })
+                  ?.logoUri || '',
+            },
+          })),
         };
       }),
     };