swap expanded state (#5115)

src/components/expanded-state/swap-details/SwapDetailsContent.js

@@ -23,6 +23,11 @@ import { padding } from '@/styles';
 import { ethereumUtils } from '@/utils';
 import { useNavigation } from '@/navigation';
 import { Network } from '@/helpers';
+import { SwapDetailsRewardRow } from './SwapDetailsRewardRow';
+import useExperimentalFlag, {
+  OP_REWARDS,
+} from '@rainbow-me/config/experimentalHooks';
+import config from '@/model/config';
 
 const Container = styled(Box).attrs({
   flex: 1,
@@ -56,6 +61,10 @@ export default function SwapDetailsContent({
     outputCurrency?.type
   );
 
+  const hasReward =
+    (useExperimentalFlag(OP_REWARDS) || config.op_rewards_enabled) &&
+    !!tradeDetails.reward?.[0];
+
   return (
     <AccentColorProvider color={colorForAsset}>
       <Container
@@ -95,6 +104,9 @@ export default function SwapDetailsContent({
               tradeDetails={tradeDetails}
             />
           )}
+          {hasReward && (
+            <SwapDetailsRewardRow reward={tradeDetails.reward?.[0]} />
+          )}
           {flashbotsEnabled && inputCurrencyNetwork === Network.mainnet && (
             <SwapDetailsRow
               labelPress={() =>

src/components/expanded-state/swap-details/SwapDetailsRewardRow.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Bleed, Box, Text } from '@/design-system';
+import { SwapDetailsLabel } from './SwapDetailsRow';
+import { ButtonPressAnimation } from '@/components/animations';
+import { Reward } from '@rainbow-me/swaps';
+import { useNavigation } from '@/navigation';
+import Routes from '@/navigation/routesNames';
+import { ChainBadge } from '@/components/coin-icon';
+import { AssetTypes } from '@/entities';
+import { getNetworkObj } from '@/networks';
+import { Network } from '@/networks/types';
+import { useTheme } from '@/theme';
+import * as i18n from '@/languages';
+
+export function SwapDetailsRewardRow({ reward }: { reward: Reward }) {
+  const { navigate } = useNavigation();
+  const { isDarkMode } = useTheme();
+
+  const roundedAmount = Math.round(reward.amount * 1000) / 1000;
+
+  const opNetwork = getNetworkObj(Network.optimism);
+  const accentColor = isDarkMode
+    ? opNetwork.colors.dark
+    : opNetwork.colors.light;
+
+  return (
+    <Box flexDirection="row" alignItems="center" justifyContent="space-between">
+      <ButtonPressAnimation onPress={() => navigate(Routes.OP_REWARDS_SHEET)}>
+        <SwapDetailsLabel>
+          {i18n.t(i18n.l.expanded_state.swap_details.reward)} 􀅵
+        </SwapDetailsLabel>
+      </ButtonPressAnimation>
+      <Bleed vertical="10px">
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          paddingLeft="4px"
+          paddingRight="8px"
+          paddingVertical="4px"
+          borderRadius={20}
+          style={{
+            borderWidth: 1.5,
+            borderColor: accentColor + '0F',
+            gap: 5,
+          }}
+        >
+          <ChainBadge assetType={AssetTypes.optimism} position="relative" />
+          <Text
+            align="center"
+            size="14px / 19px (Deprecated)"
+            weight="bold"
+            color={{ custom: accentColor }}
+          >
+            {roundedAmount || '<0.001'} {reward.token.symbol}
+          </Text>
+        </Box>
+      </Bleed>
+    </Box>
+  );
+}

src/languages/en_US.json

@@ -637,6 +637,7 @@
         }
       },
       "swap_details": {
+        "reward": "Reward",
         "exchange_rate": "Exchange rate",
         "rainbow_fee": "Included Rainbow fee",
         "refuel": "Extra network tokens",