txs: fallback icons (#5456)

rainbow-me · Mar 6, 2024 · 3dad38a · 3dad38a
1 parent 7f9fb0d
commit 3dad38a
Showing 1 changed file with 49 additions and 65 deletions.
diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx
@@ -11,7 +11,6 @@ import { ImgixImage } from '../images';
 import { CardSize } from '../unique-token/CardSize';
 import { ChainBadge } from '../coin-icon';
 import { Network } from '@/networks/types';
-import { ETH_ADDRESS, ETH_SYMBOL } from '@/references';
 import { address } from '@/utils/abbreviations';
 import { Colors } from '@/styles';
 import { TransactionType } from '@/resources/transactions/types';
@@ -29,34 +28,11 @@ export const getApprovalLabel = ({ approvalAmount, asset, type }: Pick<RainbowTr
 };
 
 const approvalTypeValues = (transaction: RainbowTransaction) => {
-  const { asset, approvalAmount, hash, contract } = transaction;
+  const { asset, approvalAmount } = transaction;
 
   if (!asset || !approvalAmount) return;
   transaction.protocol;
   return [transaction.protocol || '', getApprovalLabel(transaction)];
-
-  // return [
-  //   contract?.name ? (
-  //     <Inline key={`app${hash}`} alignVertical="center" space="4px">
-  //       {contract.iconUrl && (
-  //         <Text size="11pt" weight="semibold" color="labelTertiary">
-  //         {'Con Icon'}
-  //       </Text>
-  //       )}
-  //       {contract.name}
-  //     </Inline>
-  //   ) : null,
-  //   label && (
-  //     <Box
-  //       key={`approval${hash}`}
-  //       style={{ borderStyle: 'dashed', borderRadius: 6, borderColor: 'red', borderWidth: 1 }}
-  //     >
-  //       <Text size="11pt" weight="semibold" color="labelTertiary">
-  //         {label}
-  //       </Text>
-  //     </Box>
-  //   ),
-  // ];
 };
 
 const swapTypeValues = (changes: RainbowTransaction['changes']) => {
@@ -297,6 +273,25 @@ export const ActivityIcon = ({
     );
   }
 
+  // fallback for contracts that we dont have data for
+  if (transaction?.type === 'contract_interaction') {
+    return (
+      <Box
+        alignItems="center"
+        background="fillSecondary"
+        borderRadius={10}
+        height={{ custom: size }}
+        justifyContent="center"
+        style={{ opacity: theme.isDarkMode ? 0.5 : 0.75 }}
+        width={{ custom: size }}
+      >
+        <Text align="center" color="labelQuaternary" size="icon 16px" weight="bold">
+          􀎭
+        </Text>
+      </Box>
+    );
+  }
+
   if (transaction?.asset?.type === 'nft') {
     return (
       <View
@@ -316,18 +311,35 @@ export const ActivityIcon = ({
             shadowRadius: 9,
           }}
         >
-          <ImgixImage
-            size={CardSize}
-            style={{
-              width: size,
-              height: size,
-              borderRadius: 10,
-            }}
-            source={{
-              // @ts-ignore local nft assets have diff types
-              uri: transaction.asset.icon_url || transaction.asset.image_url,
-            }}
-          />
+          {/* @ts-ignore local nft assets have diff types */}
+          {transaction.asset.icon_url || transaction.asset.image_url ? (
+            <ImgixImage
+              size={CardSize}
+              style={{
+                width: size,
+                height: size,
+                borderRadius: 10,
+              }}
+              source={{
+                // @ts-ignore local nft assets have diff types
+                uri: transaction.asset.icon_url || transaction.asset.image_url,
+              }}
+            />
+          ) : (
+            <Box
+              alignItems="center"
+              background="fillSecondary"
+              borderRadius={10}
+              height={{ custom: size }}
+              justifyContent="center"
+              style={{ opacity: theme.isDarkMode ? 0.5 : 0.75 }}
+              width={{ custom: size }}
+            >
+              <Text align="center" color="labelQuaternary" size="icon 16px" weight="bold">
+                􀏆
+              </Text>
+            </Box>
+          )}
         </View>
         {transaction.network !== Network.mainnet && <ChainBadge network={transaction.network} badgeYPosition={0} />}
       </View>
@@ -348,34 +360,6 @@ export const ActivityIcon = ({
   );
 };
 
-const ActivityDescription = ({ transaction, colors }: { transaction: RainbowTransaction; colors: Colors }) => {
-  const { type, to, asset } = transaction;
-  let description = transaction.description;
-  let tag: string | undefined;
-  if (type === 'contract_interaction' && to) {
-    description = transaction.contract?.name || address(to, 6, 4);
-    tag = transaction.description;
-  }
-
-  const nftChangesAmount = transaction.changes
-    ?.filter(c => asset?.address === c?.asset.address && c?.asset.type === 'nft')
-    .filter(Boolean).length;
-  if (nftChangesAmount) tag = nftChangesAmount.toString();
-
-  return (
-    <Inline space="4px" alignVertical="center" wrap={false}>
-      <Text size="16px / 22px (Deprecated)" weight="regular" color={{ custom: colors.dark }}>
-        {description}
-      </Text>
-      {tag && (
-        <Text size="16px / 22px (Deprecated)" weight="regular" color={{ custom: colors.dark }}>
-          {tag}
-        </Text>
-      )}
-    </Inline>
-  );
-};
-
 export default React.memo(function TransactionCoinRow({
   item,
   nativeCurrency,