transactions: refactor

src/components/activity-list/ActivityList.js

@@ -1,4 +1,4 @@
-import lang from 'i18n-js';
+import * as lang from '@/languages';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { SectionList, StyleSheet, View } from 'react-native';
 import sectionListGetItemLayout from 'react-native-section-list-get-item-layout';
@@ -95,7 +95,7 @@ const ActivityList = ({
     let currentPendingTransactionsCount = 0;
     const pendingTxSection = sections[requests?.length ? 1 : 0];
 
-    if (pendingTxSection && pendingTxSection.title === 'Pending') {
+    if (pendingTxSection && pendingTxSection.title === lang.t(lang.l.transactions.pending_title)) {
       currentPendingTransactionsCount = pendingTxSection.data.length;
     }
     return currentPendingTransactionsCount;
@@ -139,7 +139,7 @@ const ActivityList = ({
     }
   } else {
     return (
-      <ActivityListEmptyState emoji="👻" label={lang.t('activity_list.empty_state.testnet_label')}>
+      <ActivityListEmptyState emoji="👻" label={lang.t(lang.l.empty_state.testnet_label)}>
         {header}
       </ActivityListEmptyState>
     );

src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx

@@ -50,12 +50,14 @@ export default React.memo(function FastCoinIcon({
   network,
   symbol,
   theme,
+  ignoreBadge = false,
 }: {
   address: string;
   mainnetAddress?: string;
   network: Network;
   symbol: string;
   theme: ThemeContextProps;
+  ignoreBadge?: boolean;
 }) {
   const { colors } = theme;
 
@@ -105,7 +107,7 @@ export default React.memo(function FastCoinIcon({
         </FastFallbackCoinIconImage>
       )}
 
-      {network && <FastChainBadge network={network} theme={theme} />}
+      {!ignoreBadge && network && <FastChainBadge network={network} theme={theme} />}
     </View>
   );
 });

src/components/coin-icon/TwoCoinsIcon.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box } from '@/design-system';
+import { ParsedAddressAsset } from '@/entities';
+import { useTheme } from '@/theme';
+import { ImgixImage } from '@/components/images';
+import ChainBadge from './ChainBadge';
+
+export function TwoCoinsIcon({
+  size = 45,
+  under,
+  over,
+  badge = true,
+}: {
+  size?: number;
+  under: ParsedAddressAsset;
+  over: ParsedAddressAsset;
+  badge?: boolean;
+}) {
+  const theme = useTheme();
+  const overSize = size * 0.85;
+  const underSize = size * 0.75;
+
+  return (
+    <Box style={{ minWidth: size, height: size, marginRight: -5 }}>
+      <Box
+        style={{
+          position: 'absolute',
+          top: 8,
+          right: 4,
+          minWidth: size,
+          height: size,
+        }}
+      >
+        <Box
+          borderRadius={100}
+          style={{
+            zIndex: 0,
+            position: 'absolute',
+            top: -underSize / 4,
+            left: -0,
+          }}
+        >
+          <ImgixImage
+            source={{ uri: under?.icon_url }}
+            style={{ borderRadius: 100, width: underSize, height: underSize }}
+            size={underSize}
+          />
+        </Box>
+        <Box borderRadius={100} style={{ zIndex: 10, position: 'absolute', top: 0, right: 0 }}>
+          <ImgixImage
+            source={{ uri: over?.icon_url }}
+            style={{
+              borderRadius: 100,
+              width: overSize,
+              height: overSize,
+              borderWidth: 2,
+              borderColor: theme.colors.white,
+            }}
+            size={overSize}
+          />
+        </Box>
+        {badge && <ChainBadge network={over.network} badgeYPosition={9} badgeXPosition={-7.5} />}
+      </Box>
+    </Box>
+  );
+}