Claimables [PR #2]: claim panel ui

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,6 +7,7 @@ import { ButtonPressAnimation } from '@/components/animations';
 import { deviceUtils } from '@/utils';
 import Routes from '@/navigation/routesNames';
 import { ExtendedState } from './core/RawRecyclerList';
+import { convertAmountToNativeDisplayWorklet } from '@/__swaps__/utils/numbers';
 
 export const Claimable = React.memo(function Claimable({ uniqueId, extendedState }: { uniqueId: string; extendedState: ExtendedState }) {
   const { accountAddress, nativeCurrency } = useAccountSettings();
@@ -24,12 +25,17 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
 
   const [claimable] = data;
 
+  const nativeDisplay = useMemo(
+    () => convertAmountToNativeDisplayWorklet(claimable.value.nativeAsset.amount, nativeCurrency, true),
+    [claimable.value.nativeAsset.amount, nativeCurrency]
+  );
+
   if (!claimable) return null;
 
   return (
     <Box
       as={ButtonPressAnimation}
-      // onPress={() => navigate(Routes.CLAIM_CLAIMABLE_PANEL, { claimable })}
+      onPress={() => navigate(Routes.CLAIM_CLAIMABLE_PANEL, { claimable })}
       scaleTo={0.96}
       paddingHorizontal="20px"
       justifyContent="space-between"
@@ -68,7 +74,7 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
         style={{ backgroundColor: 'rgba(7, 17, 32, 0.02)' }}
       >
         <Text weight="semibold" color="label" align="center" size="17pt">
-          {claimable.value.nativeAsset.display}
+          {nativeDisplay}
         </Text>
       </Box>
     </Box>

src/languages/en_US.json

@@ -450,6 +450,22 @@
         "action": "Continue"
       }
     },
+    "claimables": {
+      "panel": {
+        "calculating_gas_fee": "Calculating gas fee...",
+        "amount_to_claim_on_network": "%{amount} to claim on %{network}",
+        "claim": "Claim",
+        "claiming": "Claiming",
+        "claim_in_progress": "Claim in Progress...",
+        "claimed": "Claimed!",
+        "claiming_failed": "Claim Failed",
+        "insufficient_funds": "Insufficient Funds",
+        "claim_amount": "Claim %{amount}",
+        "done": "Done",
+        "try_again": "Try Again",
+        "tokens_on_the_way": "Tokens on the way!"
+      }
+    },
     "cloud": {
       "backup_success": "Your wallet has been backed up successfully!"
     },

src/navigation/Routes.android.tsx

@@ -90,6 +90,7 @@ import { SwapScreen } from '@/__swaps__/screens/Swap/Swap';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPanel';
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
+import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel';
 import { RootStackParamList } from './types';
 
 const Stack = createStackNavigator();
@@ -247,6 +248,7 @@ function BSNavigator() {
       <BSStack.Screen component={AppIconUnlockSheet} name={Routes.APP_ICON_UNLOCK_SHEET} options={appIconUnlockSheetPreset} />
       <BSStack.Screen component={ControlPanel} name={Routes.DAPP_BROWSER_CONTROL_PANEL} />
       <BSStack.Screen component={ClaimRewardsPanel} name={Routes.CLAIM_REWARDS_PANEL} />
+      <BSStack.Screen component={ClaimClaimablePanel} name={Routes.CLAIM_CLAIMABLE_PANEL} />
       <BSStack.Screen component={ChangeWalletSheet} name={Routes.CHANGE_WALLET_SHEET} options={{ ...bottomSheetPreset }} />
       {swapsV2Enabled && <BSStack.Screen component={SwapScreen} name={Routes.SWAP} options={swapSheetPreset} />}
     </BSStack.Navigator>

src/navigation/Routes.ios.tsx

@@ -38,7 +38,6 @@ import {
   hardwareWalletTxNavigatorConfig,
   consoleSheetConfig,
   customGasSheetConfig,
-  dappBrowserControlPanelConfig,
   defaultScreenStackOptions,
   ensAdditionalRecordsSheetConfig,
   ensConfirmRegisterSheetConfig,
@@ -50,6 +49,7 @@ import {
   nftOffersSheetConfig,
   nftSingleOfferSheetConfig,
   pairHardwareWalletNavigatorConfig,
+  panelConfig,
   profileConfig,
   profilePreviewConfig,
   qrScannerConfig,
@@ -104,6 +104,7 @@ import { useRemoteConfig } from '@/model/remoteConfig';
 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 { RootStackParamList } from './types';
 
 const Stack = createStackNavigator();
@@ -285,8 +286,9 @@ function NativeStackNavigator() {
       <NativeStack.Screen name={Routes.MINTS_SHEET} component={MintsSheet} {...mintsSheetConfig} />
       <NativeStack.Screen component={ConsoleSheet} name={Routes.CONSOLE_SHEET} {...consoleSheetConfig} />
       <NativeStack.Screen component={AppIconUnlockSheet} name={Routes.APP_ICON_UNLOCK_SHEET} {...appIconUnlockSheetConfig} />
-      <NativeStack.Screen component={ControlPanel} name={Routes.DAPP_BROWSER_CONTROL_PANEL} {...dappBrowserControlPanelConfig} />
-      <NativeStack.Screen component={ClaimRewardsPanel} name={Routes.CLAIM_REWARDS_PANEL} {...dappBrowserControlPanelConfig} />
+      <NativeStack.Screen component={ControlPanel} name={Routes.DAPP_BROWSER_CONTROL_PANEL} {...panelConfig} />
+      <NativeStack.Screen component={ClaimRewardsPanel} name={Routes.CLAIM_REWARDS_PANEL} {...panelConfig} />
+      <NativeStack.Screen component={ClaimClaimablePanel} name={Routes.CLAIM_CLAIMABLE_PANEL} {...panelConfig} />
 
       {swapsV2Enabled && <NativeStack.Screen component={SwapScreen} name={Routes.SWAP} {...swapConfig} />}
     </NativeStack.Navigator>

src/navigation/config.tsx

@@ -248,7 +248,7 @@ export const consoleSheetConfig = {
   }),
 };
 
-export const dappBrowserControlPanelConfig = {
+export const panelConfig = {
   options: ({ route: { params = {} } }) => ({
     ...buildCoolModalConfig({
       ...params,

src/navigation/routesNames.ts

@@ -13,6 +13,7 @@ const Routes = {
   CHANGE_WALLET_SHEET: 'ChangeWalletSheet',
   CHANGE_WALLET_SHEET_NAVIGATOR: 'ChangeWalletSheetNavigator',
   CHECK_IDENTIFIER_SCREEN: 'CheckIdentifierScreen',
+  CLAIM_CLAIMABLE_PANEL: 'ClaimClaimablePanel',
   CONFIRM_REQUEST: 'ConfirmRequest',
   CONNECTED_DAPPS: 'ConnectedDapps',
   CONSOLE_SHEET: 'ConsoleSheet',

src/navigation/types.ts

@@ -5,6 +5,7 @@ import Routes from '@/navigation/routesNames';
 import { PortalSheetProps } from '@/screens/Portal';
 import { REGISTRATION_MODES } from '@/helpers/ens';
 import { CampaignCheckResult } from '@/components/remote-promo-sheet/checkForRemotePromoSheet';
+import { Claimable } from '@/resources/addys/claimables/types';
 
 export type PartialNavigatorConfigOptions = Pick<Partial<Parameters<ReturnType<typeof createStackNavigator>['Screen']>[0]>, 'options'>;
 
@@ -75,4 +76,7 @@ export type RootStackParamList = {
   [Routes.SWAP]: {
     action?: 'open_swap_settings';
   };
+  [Routes.CLAIM_CLAIMABLE_PANEL]: {
+    claimable: Claimable;
+  };
 };

src/screens/claimables/ClaimClaimablePanel.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { ClaimingTransactionClaimable } from './ClaimingTransactionClaimable';
+import { ClaimingSponsoredClaimable } from './ClaimingSponsoredClaimable';
+import { RootStackParamList } from '@/navigation/types';
+
+export const ClaimClaimablePanel = () => {
+  const {
+    params: { claimable },
+  } = useRoute<RouteProp<RootStackParamList, 'ClaimClaimablePanel'>>();
+
+  return claimable.type === 'transaction' ? (
+    <ClaimingTransactionClaimable claimable={claimable} />
+  ) : (
+    <ClaimingSponsoredClaimable claimable={claimable} />
+  );
+};