feature: custom submit button support for deposit funding system

src/features/rnbw-staking/screens/rnbw-staking-screen/RnbwStakingScreen.tsx

@@ -1,15 +1,34 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { RnbwHoldToActivateButton } from '@/features/rnbw-membership/components/RnbwHoldToActivateButton';
 import { RNBW_STAKING_DEPOSIT_CONFIG } from '@/features/rnbw-staking/depositConfig';
 import { buildSyntheticRnbwSourceAsset } from '@/features/rnbw-staking/utils/syntheticRnbwSourceAsset';
 import { DepositScreen } from '@/systems/funding/components/DepositScreen';
+import { type DepositSubmitButtonRenderParams } from '@/systems/funding/types';
 
 export const RnbwStakingScreen = memo(function RnbwStakingScreen() {
   const syntheticSourceAsset = useMemo(() => buildSyntheticRnbwSourceAsset({ includeRewardsBalance: true }), []);
+  const renderSubmitButton = useCallback(
+    ({ disabled, isSubmitting, label, onSubmit }: DepositSubmitButtonRenderParams) => (
+      <RnbwHoldToActivateButton
+        disabled={disabled}
+        isProcessing={isSubmitting}
+        label={label}
+        onActivate={onSubmit}
+        processingLabel={RNBW_STAKING_DEPOSIT_CONFIG.labels.confirmButtonLoading}
+        showBiometryIcon={!disabled}
+        style={styles.submitButton}
+        testID="rnbw-staking-submit-button"
+      />
+    ),
+    []
+  );
 
   return (
     <DepositScreen
       config={RNBW_STAKING_DEPOSIT_CONFIG}
       initialAsset={syntheticSourceAsset}
+      renderSubmitButton={renderSubmitButton}
       theme={{
         accent: '#E3A700',
         backgroundDark: '#090909',
@@ -18,3 +37,9 @@ export const RnbwStakingScreen = memo(function RnbwStakingScreen() {
     />
   );
 });
+
+const styles = StyleSheet.create({
+  submitButton: {
+    width: '100%',
+  },
+});

src/systems/funding/components/DepositScreen.tsx

@@ -33,7 +33,13 @@ import { createDepositConfig } from '../config';
 import { FOOTER_HEIGHT, NavigationSteps, SLIDER_WIDTH, SLIDER_WITH_LABELS_HEIGHT } from '../constants';
 import { DepositProvider, useDepositContext } from '../contexts/DepositContext';
 import { computeMaxSwappableAmount } from '../stores/createDepositStore';
-import { type DepositConfigInput, DepositQuoteStatus, type FundingScreenTheme, getAccentColor } from '../types';
+import {
+  type DepositConfigInput,
+  DepositQuoteStatus,
+  type DepositSubmitButtonRenderer,
+  type FundingScreenTheme,
+  getAccentColor,
+} from '../types';
 import { resolveInitialDepositAsset } from '../utils/sourceAsset';
 import { amountFromSliderProgress } from '../utils/sliderWorklets';
 import { DepositAmountInput } from './deposit/DepositAmountInput';
@@ -46,18 +52,19 @@ import { DepositTokenList } from './deposit/DepositTokenList';
 type DepositScreenProps = {
   config: DepositConfigInput;
   initialAsset?: ExtendedAnimatedAssetWithColors | null;
+  renderSubmitButton?: DepositSubmitButtonRenderer;
   theme: FundingScreenTheme;
 };
 
 // ============ Main Screen ==================================================== //
 
-export const DepositScreen = memo(function DepositScreen({ config, initialAsset, theme }: DepositScreenProps) {
+export const DepositScreen = memo(function DepositScreen({ config, initialAsset, renderSubmitButton, theme }: DepositScreenProps) {
   const resolvedConfig = useMemo(() => createDepositConfig(config), [config]);
   const resolvedInitialAsset = useStableValue(() => initialAsset ?? resolveInitialDepositAsset(resolvedConfig));
 
   return (
     <DepositProvider config={resolvedConfig} initialAsset={resolvedInitialAsset} initialGasSpeed={GasSpeed.FAST} theme={theme}>
-      <DepositScreenContent />
+      <DepositScreenContent renderSubmitButton={renderSubmitButton} />
     </DepositProvider>
   );
 });
@@ -78,7 +85,11 @@ function getInputAmountError(
 
 // ============ Screen Content ================================================= //
 
-const DepositScreenContent = memo(function DepositScreenContent() {
+const DepositScreenContent = memo(function DepositScreenContent({
+  renderSubmitButton,
+}: {
+  renderSubmitButton?: DepositSubmitButtonRenderer;
+}) {
   const {
     config,
     displayedAmount,
@@ -179,7 +190,12 @@ const DepositScreenContent = memo(function DepositScreenContent() {
             paddingTop="16px"
             width="full"
           >
-            <DepositFooter inputAmountError={inputAmountErrorShared} isSubmitting={isSubmitting} onSubmit={handleDeposit} />
+            <DepositFooter
+              inputAmountError={inputAmountErrorShared}
+              isSubmitting={isSubmitting}
+              onSubmit={handleDeposit}
+              renderSubmitButton={renderSubmitButton}
+            />
           </Box>
         </Box>
       </Box>

src/systems/funding/components/deposit/DepositFooter.tsx

@@ -2,11 +2,12 @@ import { memo } from 'react';
 import { type SharedValue, useDerivedValue } from 'react-native-reanimated';
 import { Box, Separator, useColorMode } from '@/design-system';
 import { PerpsSwapButton } from '@/features/perps/components/PerpsSwapButton';
+import { useSharedValueState } from '@/hooks/reanimated/useSharedValueState';
 import { useStableValue } from '@/hooks/useStableValue';
 import { createDerivedStore } from '@/state/internal/createDerivedStore';
 import { useStoreSharedValue } from '@/state/internal/hooks/useStoreSharedValue';
 import { type InferStoreState } from '@/state/internal/types';
-import { DepositQuoteStatus, type DepositQuoteStoreType, getAccentColor } from '@/systems/funding/types';
+import { DepositQuoteStatus, type DepositQuoteStoreType, type DepositSubmitButtonRenderer, getAccentColor } from '@/systems/funding/types';
 import { time } from '@/utils/time';
 import { useDepositContext } from '../../contexts/DepositContext';
 import { GasButton } from './gas/GasButton';
@@ -32,16 +33,27 @@ type DepositFooterProps = {
   inputAmountError: SharedValue<InputAmountError>;
   isSubmitting: SharedValue<boolean>;
   onSubmit: () => Promise<void>;
+  renderSubmitButton?: DepositSubmitButtonRenderer;
 };
 
-export const DepositFooter = memo(function DepositFooter({ inputAmountError, isSubmitting, onSubmit }: DepositFooterProps) {
+export const DepositFooter = memo(function DepositFooter({
+  inputAmountError,
+  isSubmitting,
+  onSubmit,
+  renderSubmitButton,
+}: DepositFooterProps) {
   return (
     <>
       <GasButtonWrapper />
       <Box height={32}>
         <Separator color="separatorTertiary" direction="vertical" thickness={1} />
       </Box>
-      <SubmitButton inputAmountError={inputAmountError} isSubmitting={isSubmitting} onSubmit={onSubmit} />
+      <SubmitButton
+        inputAmountError={inputAmountError}
+        isSubmitting={isSubmitting}
+        onSubmit={onSubmit}
+        renderSubmitButton={renderSubmitButton}
+      />
     </>
   );
 });
@@ -79,9 +91,10 @@ type SubmitButtonProps = {
   inputAmountError: SharedValue<InputAmountError>;
   isSubmitting: SharedValue<boolean>;
   onSubmit: () => Promise<void>;
+  renderSubmitButton?: DepositSubmitButtonRenderer;
 };
 
-const SubmitButton = memo(function SubmitButton({ inputAmountError, isSubmitting, onSubmit }: SubmitButtonProps) {
+const SubmitButton = memo(function SubmitButton({ inputAmountError, isSubmitting, onSubmit, renderSubmitButton }: SubmitButtonProps) {
   const { isDarkMode } = useColorMode();
   const { config, theme, useQuoteStore } = useDepositContext();
   const useCustomExecute = Boolean(config.execute);
@@ -114,6 +127,23 @@ const SubmitButton = memo(function SubmitButton({ inputAmountError, isSubmitting
     return status === null || status === DepositQuoteStatus.Error || status === DepositQuoteStatus.InsufficientGas;
   });
 
+  const submitButtonLabel = useSharedValueState(label, { pauseSync: !renderSubmitButton });
+  const isSubmitButtonDisabled = useSharedValueState(disabled, { pauseSync: !renderSubmitButton });
+  const isSubmitButtonProcessing = useSharedValueState(isSubmitting, { pauseSync: !renderSubmitButton });
+
+  if (renderSubmitButton) {
+    return (
+      <Box flexGrow={1}>
+        {renderSubmitButton({
+          disabled: isSubmitButtonDisabled,
+          isSubmitting: isSubmitButtonProcessing,
+          label: submitButtonLabel,
+          onSubmit,
+        })}
+      </Box>
+    );
+  }
+
   return (
     <Box flexGrow={1}>
       <PerpsSwapButton accentColor={accentColor} disabled={disabled} label={label} onLongPress={onSubmit} />

src/systems/funding/types.ts

@@ -1,4 +1,5 @@
 import { type Signer } from '@ethersproject/abstract-signer';
+import { type ReactNode } from 'react';
 import { type Address } from 'viem';
 import { type DerivedValue, type SharedValue } from 'react-native-reanimated';
 import { type CrosschainQuote, type Quote, type Source } from '@rainbow-me/swaps';
@@ -201,6 +202,15 @@ export type DepositLabels = {
   title: string;
 };
 
+export type DepositSubmitButtonRenderParams = {
+  disabled: boolean;
+  isSubmitting: boolean;
+  label: string;
+  onSubmit: () => Promise<void>;
+};
+
+export type DepositSubmitButtonRenderer = (params: DepositSubmitButtonRenderParams) => ReactNode;
+
 /**
  * ### `DepositConfig`
  *