Claim as X

src/__swaps__/screens/Swap/hooks/useEstimatedGasFee.ts

@@ -12,7 +12,7 @@ import { useSelectedGas } from './useSelectedGas';
 import { useSwapEstimatedGasLimit } from './useSwapEstimatedGasLimit';
 import { useSwapsStore } from '@/state/swaps/swapsStore';
 
-function safeBigInt(value: string) {
+export function safeBigInt(value: string) {
   try {
     return BigInt(value);
   } catch {

src/analytics/event.ts

@@ -633,6 +633,12 @@ export type EventProperties = {
       symbol: string;
       address: string;
     };
+    outputAsset: {
+      symbol: string;
+      address: string;
+    };
+    outputChainId: ChainId;
+    isSwapping: boolean;
     amount: string;
     usdValue: number;
   };
@@ -645,6 +651,13 @@ export type EventProperties = {
       symbol: string;
       address: string;
     };
+    isSwapping: boolean;
+    outputAsset: {
+      symbol: string;
+      address: string;
+    };
+    outputChainId: ChainId;
+    failureStep: 'claim' | 'swap' | 'unknown';
     amount: string;
     usdValue: number;
     errorMessage: string;

src/components/asset-list/RecyclerAssetList2/Claimable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Inline, Stack, Text } from '@/design-system';
 import { useAccountSettings } from '@/hooks';
 import { useClaimables } from '@/resources/addys/claimables/query';
@@ -7,41 +7,85 @@ import { ButtonPressAnimation } from '@/components/animations';
 import { deviceUtils } from '@/utils';
 import Routes from '@/navigation/routesNames';
 import { ExtendedState } from './core/RawRecyclerList';
-import { convertAmountToNativeDisplayWorklet } from '@/helpers/utilities';
+import { convertAmountAndPriceToNativeDisplay, convertAmountToNativeDisplayWorklet, convertRawAmountToBalance } from '@/helpers/utilities';
 import { analyticsV2 } from '@/analytics';
+import { ChainBadge } from '@/components/coin-icon';
+import { useNativeAsset } from '@/utils/ethereumUtils';
+import { ChainId } from '@/chains/types';
+import { usePoints } from '@/resources/points';
+
+const RAINBOW_ICON_URL = 'https://rainbowme-res.cloudinary.com/image/upload/v1694722625/dapps/rainbow-icon-large.png';
 
 export const Claimable = React.memo(function Claimable({ uniqueId, extendedState }: { uniqueId: string; extendedState: ExtendedState }) {
   const { accountAddress, nativeCurrency } = useAccountSettings();
   const { navigate } = extendedState;
 
+  const isETHRewards = uniqueId === 'rainbow-eth-rewards';
+
+  const eth = useNativeAsset({ chainId: ChainId.mainnet });
+
   const { data = [] } = useClaimables(
     {
       address: accountAddress,
       currency: nativeCurrency,
     },
     {
       select: data => data?.filter(claimable => claimable.uniqueId === uniqueId),
+      enabled: !isETHRewards,
     }
   );
 
+  const { data: points } = usePoints({
+    walletAddress: accountAddress,
+  });
+
   const [claimable] = data;
-  if (!claimable) return null;
+  const claimableETHRewardsRawAmount = points?.points?.user?.rewards?.claimable;
+
+  if (isETHRewards) {
+    if (!claimableETHRewardsRawAmount) return null;
+  } else {
+    if (!claimable) return null;
+  }
+
+  const { display: claimableETHRewardsDisplay, amount: claimableETHRewardsAmount } = isETHRewards
+    ? convertRawAmountToBalance(claimableETHRewardsRawAmount ?? '0', {
+        decimals: 18,
+        symbol: 'ETH',
+      })
+    : { display: undefined, amount: undefined };
+
+  const nativeDisplay = convertAmountToNativeDisplayWorklet(
+    isETHRewards
+      ? convertAmountAndPriceToNativeDisplay(claimableETHRewardsAmount ?? '0', eth?.price?.value || 0, nativeCurrency)?.amount
+      : claimable?.value.nativeAsset.amount,
+    nativeCurrency,
+    true
+  );
+
+  if (isETHRewards) {
+    if (!claimableETHRewardsDisplay) return null;
+  }
 
-  const nativeDisplay = convertAmountToNativeDisplayWorklet(claimable.value.nativeAsset.amount, nativeCurrency, true);
+  if (!nativeDisplay) return null;
 
   return (
     <Box
       as={ButtonPressAnimation}
       onPress={() => {
-        analyticsV2.track(analyticsV2.event.claimablePanelOpened, {
-          claimableType: claimable.type,
-          claimableId: claimable.uniqueId,
-          chainId: claimable.chainId,
-          asset: { symbol: claimable.asset.symbol, address: claimable.asset.address },
-          amount: claimable.value.claimAsset.amount,
-          usdValue: claimable.value.usd,
-        });
-        navigate(Routes.CLAIM_CLAIMABLE_PANEL, { claimable });
+        if (!isETHRewards) {
+          analyticsV2.track(analyticsV2.event.claimablePanelOpened, {
+            claimableType: claimable?.type,
+            claimableId: claimable?.analyticsId,
+            chainId: claimable?.chainId,
+            asset: { symbol: claimable?.asset.symbol, address: claimable?.asset.address },
+            amount: claimable?.value.claimAsset.amount,
+            usdValue: claimable?.value.usd,
+          });
+          navigate(Routes.CLAIM_CLAIMABLE_PANEL, { claimable });
+        } else {
+          navigate(Routes.CLAIM_REWARDS_PANEL);
+        }
       }}
       scaleTo={0.96}
       paddingHorizontal="20px"
@@ -51,8 +95,9 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
     >
       <Inline alignVertical="center" space="12px">
         <Box borderRadius={11} borderWidth={1} borderColor={{ custom: 'rgba(0, 0, 0, 0.03)' }}>
-          <FasterImageView source={{ url: claimable.iconUrl }} style={{ height: 40, width: 40 }} />
+          <FasterImageView source={{ url: isETHRewards ? RAINBOW_ICON_URL : claimable?.iconUrl }} style={{ height: 40, width: 40 }} />
         </Box>
+        <ChainBadge chainId={isETHRewards ? ChainId.mainnet : claimable?.chainId} position="absolute" size="small" forceDark={true} />
         <Stack space={{ custom: 11 }}>
           <Text
             weight="semibold"
@@ -62,10 +107,10 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
             numberOfLines={1}
             style={{ maxWidth: deviceUtils.dimensions.width - 220 }}
           >
-            {claimable.name}
+            {isETHRewards ? 'Rainbow ETH Rewards' : claimable?.name}
           </Text>
           <Text weight="semibold" color="labelTertiary" size="13pt">
-            {claimable.value.claimAsset.display}
+            {isETHRewards ? claimableETHRewardsDisplay : claimable?.value.claimAsset.display}
           </Text>
         </Stack>
       </Inline>

src/helpers/buildWalletSections.tsx

@@ -3,10 +3,10 @@ import { buildBriefCoinsList, buildBriefUniqueTokenList } from './assets';
 import { NativeCurrencyKey, ParsedAddressAsset } from '@/entities';
 import store from '@/redux/store';
 import { ClaimableExtraData, PositionExtraData } from '@/components/asset-list/RecyclerAssetList2/core/ViewTypes';
-import { DEFI_POSITIONS, CLAIMABLES, ExperimentalValue } from '@/config/experimental';
+import { DEFI_POSITIONS, CLAIMABLES, ExperimentalValue, ETH_REWARDS } from '@/config/experimental';
 import { RainbowPositions } from '@/resources/defi/types';
 import { Claimable } from '@/resources/addys/claimables/types';
-import { add, convertAmountToNativeDisplay, lessThan } from './utilities';
+import { add, convertAmountToNativeDisplay, greaterThan, lessThan } from './utilities';
 import { RainbowConfig } from '@/model/remoteConfig';
 import { IS_TEST } from '@/env';
 import { UniqueId } from '@/__swaps__/types/assets';
@@ -60,22 +60,27 @@ const remoteConfigSelector = (state: any) => state.remoteConfig;
 const experimentalConfigSelector = (state: any) => state.experimentalConfig;
 const positionsSelector = (state: any) => state.positions;
 const claimablesSelector = (state: any) => state.claimables;
+const claimableETHRewardsNativeAmountSelector = (state: any) => state.claimableETHRewardsNativeAmount;
 
 const buildBriefWalletSections = (
   balanceSectionData: any,
   uniqueTokenFamiliesSection: any,
   remoteConfig: RainbowConfig,
   experimentalConfig: Record<string, ExperimentalValue>,
   positions: RainbowPositions | undefined,
-  claimables: Claimable[] | undefined
+  claimables: Claimable[] | undefined,
+  claimableETHRewardsNativeAmount: string | undefined
 ) => {
   const { balanceSection, isEmpty, isLoadingUserAssets } = balanceSectionData;
 
   const positionsEnabled = experimentalConfig[DEFI_POSITIONS] && !IS_TEST;
   const claimablesEnabled = (remoteConfig.claimables || experimentalConfig[CLAIMABLES]) && !IS_TEST;
+  const ethRewardsEnabled = (remoteConfig.rewards_enabled || experimentalConfig[ETH_REWARDS]) && !IS_TEST;
 
   const positionSection = positionsEnabled ? withPositionsSection(positions, isLoadingUserAssets) : [];
-  const claimablesSection = claimablesEnabled ? withClaimablesSection(claimables, isLoadingUserAssets) : [];
+  const claimablesSection = claimablesEnabled
+    ? withClaimablesSection(claimables, ethRewardsEnabled, claimableETHRewardsNativeAmount, isLoadingUserAssets)
+    : [];
   const sections = [balanceSection, claimablesSection, positionSection, uniqueTokenFamiliesSection];
 
   const filteredSections = sections.filter(section => section.length !== 0).flat(1);
@@ -120,12 +125,28 @@ const withPositionsSection = (positionsObj: RainbowPositions | undefined, isLoad
   return [];
 };
 
-const withClaimablesSection = (claimables: Claimable[] | undefined, isLoadingUserAssets: boolean) => {
+const withClaimablesSection = (
+  claimables: Claimable[] | undefined,
+  ethRewardsEnabled: boolean,
+  claimableETHRewardsNativeAmount: string | undefined,
+  isLoadingUserAssets: boolean
+) => {
   const { nativeCurrency: currency } = store.getState().settings;
 
-  const result: ClaimableExtraData[] = [];
+  const ethRewards = {
+    value: { nativeAsset: { amount: claimableETHRewardsNativeAmount } },
+    uniqueId: 'rainbow-eth-rewards',
+  };
+
+  let result: ClaimableExtraData[] = [];
   let totalNativeValue = '0';
-  claimables?.forEach(claimable => {
+
+  const sortedClaimables = [
+    ...(claimables ?? []),
+    ...(ethRewardsEnabled && claimableETHRewardsNativeAmount && claimableETHRewardsNativeAmount !== '0' ? [ethRewards] : []),
+  ]?.sort((a, b) => (greaterThan(a.value.nativeAsset.amount ?? '0', b.value.nativeAsset.amount ?? '0') ? -1 : 1));
+
+  sortedClaimables?.forEach(claimable => {
     totalNativeValue = add(totalNativeValue, claimable.value.nativeAsset.amount ?? '0');
     const listData = {
       type: 'CLAIMABLE',
@@ -293,6 +314,7 @@ export const buildBriefWalletSectionsSelector = createSelector(
     experimentalConfigSelector,
     positionsSelector,
     claimablesSelector,
+    claimableETHRewardsNativeAmountSelector,
   ],
   buildBriefWalletSections
 );

src/hooks/useWalletSectionsData.ts

@@ -20,6 +20,10 @@ import { useUserAssetsStore } from '@/state/assets/userAssets';
 import { analyticsV2 } from '@/analytics';
 import { Claimable } from '@/resources/addys/claimables/types';
 import { throttle } from 'lodash';
+import { usePoints } from '@/resources/points';
+import { convertAmountAndPriceToNativeDisplay, convertRawAmountToBalance } from '@/helpers/utilities';
+import { useNativeAsset } from '@/utils/ethereumUtils';
+import { ChainId } from '@/chains/types';
 
 // user properties analytics for claimables that executes at max once every 2 min
 const throttledClaimablesAnalytics = throttle(
@@ -30,7 +34,7 @@ const throttledClaimablesAnalytics = throttle(
     } = {};
 
     claimables.forEach(claimable => {
-      const attribute = `${claimable.analyticsId}USDValue`;
+      const attribute = `claimable-${claimable.analyticsId}-USDValue`;
       totalUSDValue += claimable.value.usd;
 
       if (claimablesUSDValues[attribute] !== undefined) {
@@ -69,6 +73,25 @@ export default function useWalletSectionsData({
   });
   const { data: positions } = usePositions({ address: accountAddress, currency: nativeCurrency });
   const { data: claimables } = useClaimables({ address: accountAddress, currency: nativeCurrency });
+  const { data: points } = usePoints({
+    walletAddress: accountAddress,
+  });
+
+  const claimableETHRewardsRawAmount = points?.points?.user?.rewards?.claimable;
+
+  const eth = useNativeAsset({ chainId: ChainId.mainnet });
+
+  const claimableETHRewardsNativeAmount = useMemo(() => {
+    if (!eth) return undefined;
+
+    const claimableETH = convertRawAmountToBalance(claimableETHRewardsRawAmount || '0', {
+      decimals: 18,
+      symbol: 'ETH',
+    });
+    const { amount } = convertAmountAndPriceToNativeDisplay(claimableETH.amount, eth?.price?.value || 0, nativeCurrency);
+
+    return amount;
+  }, [claimableETHRewardsRawAmount, eth, nativeCurrency]);
 
   // claimables analytics
   useEffect(() => {
@@ -124,6 +147,7 @@ export default function useWalletSectionsData({
       experimentalConfig,
       positions,
       claimables,
+      claimableETHRewardsNativeAmount,
     };
 
     const { briefSectionsData, isEmpty } = buildBriefWalletSectionsSelector(accountInfo);
@@ -161,6 +185,7 @@ export default function useWalletSectionsData({
     experimentalConfig,
     positions,
     claimables,
+    claimableETHRewardsNativeAmount,
   ]);
   return walletSections;
 }

src/languages/en_US.json

@@ -452,7 +452,13 @@
     },
     "claimables": {
       "panel": {
-        "calculating_gas_fee": "Calculating gas fee...",
+        "estimating_gas_fee": "Estimating Gas Fee...",
+        "gas_error": "Gas Error",
+        "quote_error": "Quote Error",
+        "no_route_found": "No Route Found",
+        "fetching_quote": "Fetching Quote...",
+        "select_a_network": "Select a Network",
+        "select_a_token": "Select a Token",
         "amount_to_claim_on_network": "%{amount} to claim on %{network}",
         "claim": "Claim",
         "claiming": "Claiming",
@@ -463,7 +469,12 @@
         "claim_amount": "Claim %{amount}",
         "done": "Done",
         "try_again": "Try Again",
-        "tokens_on_the_way": "Tokens on the way!"
+        "tokens_on_the_way": "Tokens on the way!",
+        "a_token": "a token",
+        "a_network": "a network",
+        "swap_failed": "Swap Failed",
+        "receive": "Receive",
+        "on": "on"
       }
     },
     "cloud": {

src/navigation/Routes.android.tsx

@@ -88,7 +88,7 @@ import AppIconUnlockSheet from '@/screens/AppIconUnlockSheet';
 import { SwapScreen } from '@/__swaps__/screens/Swap/Swap';
 import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPanel';
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
-import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel';
+import { ClaimClaimablePanel } from '@/screens/claimables/ClaimPanel';
 import { RootStackParamList } from './types';
 
 const Stack = createStackNavigator();

src/navigation/Routes.ios.tsx

@@ -100,7 +100,7 @@ import { SwapScreen } from '@/__swaps__/screens/Swap/Swap';
 import CheckIdentifierScreen from '@/screens/CheckIdentifierScreen';
 import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPanel';
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
-import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel';
+import { ClaimClaimablePanel } from '@/screens/claimables/ClaimPanel';
 import { RootStackParamList } from './types';
 
 const Stack = createStackNavigator();

src/raps/actions/claimClaimable.ts

@@ -0,0 +1,8 @@
+import { ActionProps, RapActionResult } from '../references';
+import { executeClaim } from '@/screens/claimables/transaction/claim';
+
+export async function claimClaimable({ wallet, parameters }: ActionProps<'claimClaimable'>): Promise<RapActionResult> {
+  const { claimTx, asset } = parameters;
+
+  return executeClaim({ asset, claimTx, wallet });
+}

src/raps/actions/swap.ts

@@ -171,6 +171,7 @@ export const estimateSwapGasLimit = async ({
       }
 
       const gasLimit = await estimateGasWithPadding(params, method, methodArgs, provider, SWAP_GAS_PADDING);
+
       if (gasLimit === null || gasLimit === undefined || isNaN(Number(gasLimit))) {
         return getDefaultGasLimitForTrade(quote, chainId);
       }