[WIP] Prefill Assets from Entry Points

src/App.js

@@ -57,6 +57,7 @@ import { handleReviewPromptAction } from '@/utils/reviewAlert';
 import { RemotePromoSheetProvider } from '@/components/remote-promo-sheet/RemotePromoSheetProvider';
 import { RemoteCardProvider } from '@/components/cards/remote-cards';
 import { initializeRemoteConfig } from '@/model/remoteConfig';
+import { SwapProvider } from './__swaps__/screens/Swap/providers/swap-provider';
 
 if (__DEV__) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();
@@ -223,14 +224,16 @@ class OldApp extends Component {
       <Portal>
         <View style={containerStyle}>
           {this.state.initialRoute && (
-            <RemotePromoSheetProvider isWalletReady={this.props.walletReady}>
-              <RemoteCardProvider>
-                <InitialRouteContext.Provider value={this.state.initialRoute}>
-                  <RoutesComponent onReady={this.handleSentryNavigationIntegration} ref={this.handleNavigatorRef} />
-                  <PortalConsumer />
-                </InitialRouteContext.Provider>
-              </RemoteCardProvider>
-            </RemotePromoSheetProvider>
+            <SwapProvider>
+              <RemotePromoSheetProvider isWalletReady={this.props.walletReady}>
+                <RemoteCardProvider>
+                  <InitialRouteContext.Provider value={this.state.initialRoute}>
+                    <RoutesComponent onReady={this.handleSentryNavigationIntegration} ref={this.handleNavigatorRef} />
+                    <PortalConsumer />
+                  </InitialRouteContext.Provider>
+                </RemoteCardProvider>
+              </RemotePromoSheetProvider>
+            </SwapProvider>
           )}
           <OfflineToast />
         </View>

src/__swaps__/screens/Swap/Swap.tsx

@@ -20,7 +20,7 @@ import { SliderAndKeyboard } from '@/__swaps__/screens/Swap/components/SliderAnd
 import { SwapBottomPanel } from '@/__swaps__/screens/Swap/components/SwapBottomPanel';
 import { SwapWarning } from './components/SwapWarning';
 import { useSwapContext } from './providers/swap-provider';
-import { UserAssetsSync } from './components/UserAssetsSync';
+import { CleanupAssetsOnUnmount } from './components/CleanupAssetsOnUnmount';
 
 /** README
  * This prototype is largely driven by Reanimated and Gesture Handler, which
@@ -60,7 +60,6 @@ import { UserAssetsSync } from './components/UserAssetsSync';
  */
 
 export function SwapScreen() {
-  const { AnimatedSwapStyles } = useSwapContext();
   return (
     <SwapSheetGestureBlocker>
       <Box as={Page} style={styles.rootViewBackground} testID="swap-screen" width="full">
@@ -69,29 +68,42 @@ export function SwapScreen() {
           <SwapInputAsset />
           <FlipButton />
           <SwapOutputAsset />
-          <Box as={Animated.View} width="full" position="absolute" bottom="0px" style={AnimatedSwapStyles.hideWhenInputsExpanded}>
-            <SliderAndKeyboard />
-            <SwapBottomPanel />
-          </Box>
-          <Box
-            as={Animated.View}
-            alignItems="center"
-            justifyContent="center"
-            style={[styles.swapWarningAndExchangeWrapper, AnimatedSwapStyles.hideWhileReviewingOrConfiguringGas]}
-          >
-            <ExchangeRateBubble />
-            <SwapWarning />
-          </Box>
+          <SliderAndKeyboardAndBottomControls />
+          <ExchangeRateBubbleAndWarning />
         </Box>
         <SwapNavbar />
-
-        {/* NOTE: The components below render null and are solely for keeping react-query and Zustand in sync */}
-        <UserAssetsSync />
       </Box>
+
+      <CleanupAssetsOnUnmount />
     </SwapSheetGestureBlocker>
   );
 }
 
+const SliderAndKeyboardAndBottomControls = () => {
+  const { AnimatedSwapStyles } = useSwapContext();
+  return (
+    <Box as={Animated.View} width="full" position="absolute" bottom="0px" style={AnimatedSwapStyles.hideWhenInputsExpanded}>
+      <SliderAndKeyboard />
+      <SwapBottomPanel />
+    </Box>
+  );
+};
+
+const ExchangeRateBubbleAndWarning = () => {
+  const { AnimatedSwapStyles } = useSwapContext();
+  return (
+    <Box
+      as={Animated.View}
+      alignItems="center"
+      justifyContent="center"
+      style={[styles.swapWarningAndExchangeWrapper, AnimatedSwapStyles.hideWhileReviewingOrConfiguringGas]}
+    >
+      <ExchangeRateBubble />
+      <SwapWarning />
+    </Box>
+  );
+};
+
 export const styles = StyleSheet.create({
   rootViewBackground: {
     borderRadius: IS_ANDROID ? 20 : ScreenCornerRadius,

src/__swaps__/screens/Swap/components/CleanupAssetsOnUnmount.tsx

@@ -0,0 +1,6 @@
+import { useCleanupOnExit } from '../hooks/useCleanupOnExit';
+
+export const CleanupAssetsOnUnmount = () => {
+  useCleanupOnExit();
+  return null;
+};

src/__swaps__/screens/Swap/components/ReviewPanel.tsx

@@ -112,7 +112,7 @@ function EstimatedArrivalTime() {
 
 export function ReviewPanel() {
   const { isDarkMode } = useColorMode();
-  const { configProgress, SwapSettings, SwapInputController, internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
+  const { configProgress, SwapSettings, SwapInputsController, internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
 
   const unknown = i18n.t(i18n.l.swap.unknown);
 
@@ -121,11 +121,11 @@ export function ReviewPanel() {
   );
 
   const minimumReceived = useDerivedValue(() => {
-    if (!SwapInputController.formattedOutputAmount.value || !internalSelectedOutputAsset.value?.symbol) {
+    if (!SwapInputsController.formattedOutputAmount.value || !internalSelectedOutputAsset.value?.symbol) {
       return unknown;
     }
 
-    return `${SwapInputController.formattedOutputAmount.value} ${internalSelectedOutputAsset.value.symbol}`;
+    return `${SwapInputsController.formattedOutputAmount.value} ${internalSelectedOutputAsset.value.symbol}`;
   });
 
   const handleDecrementSlippage = () => {

src/__swaps__/screens/Swap/components/SwapInputAsset.tsx

@@ -42,7 +42,7 @@ function SwapInputActionButton() {
 }
 
 function SwapInputAmount() {
-  const { focusedInput, SwapTextStyles, SwapInputController, AnimatedSwapStyles } = useSwapContext();
+  const { focusedInput, SwapTextStyles, SwapInputsController, AnimatedSwapStyles } = useSwapContext();
 
   return (
     <GestureHandlerV1Button
@@ -58,7 +58,7 @@ function SwapInputAmount() {
           numberOfLines={1}
           size="30pt"
           style={SwapTextStyles.inputAmountTextStyle}
-          text={SwapInputController.formattedInputAmount}
+          text={SwapInputsController.formattedInputAmount}
           weight="bold"
         />
         <Animated.View style={[styles.caretContainer, SwapTextStyles.inputCaretStyle]}>
@@ -106,7 +106,7 @@ export function SwapInputAsset() {
     inputProgress,
     AnimatedSwapStyles,
     SwapTextStyles,
-    SwapInputController,
+    SwapInputsController,
     internalSelectedInputAsset,
     SwapNavigation,
   } = useSwapContext();
@@ -129,7 +129,7 @@ export function SwapInputAsset() {
               numberOfLines={1}
               size="17pt"
               style={SwapTextStyles.inputNativeValueStyle}
-              text={SwapInputController.formattedInputNativeValue}
+              text={SwapInputsController.formattedInputNativeValue}
               weight="heavy"
             />
             <Column width="content">

src/__swaps__/screens/Swap/components/SwapNumberPad.tsx

@@ -32,36 +32,36 @@ type numberPadCharacter = number | 'backspace' | '.';
 
 export const SwapNumberPad = () => {
   const { isDarkMode } = useColorMode();
-  const { focusedInput, isQuoteStale, SwapInputController, configProgress } = useSwapContext();
+  const { focusedInput, isQuoteStale, SwapInputsController, configProgress } = useSwapContext();
 
   const longPressTimer = useSharedValue(0);
 
   const addNumber = (number?: number) => {
     'worklet';
     // immediately stop the quote fetching interval
-    SwapInputController.quoteFetchingInterval.stop();
+    SwapInputsController.quoteFetchingInterval.stop();
     isQuoteStale.value = 1;
 
     const inputKey = focusedInput.value;
-    if (SwapInputController.inputMethod.value !== inputKey) {
-      SwapInputController.inputMethod.value = inputKey;
+    if (SwapInputsController.inputMethod.value !== inputKey) {
+      SwapInputsController.inputMethod.value = inputKey;
 
-      if (typeof SwapInputController.inputValues.value[inputKey] === 'number') {
-        SwapInputController.inputValues.modify(value => {
+      if (typeof SwapInputsController.inputValues.value[inputKey] === 'number') {
+        SwapInputsController.inputValues.modify(value => {
           return {
             ...value,
             [inputKey]:
               inputKey === 'inputAmount'
-                ? stripCommas(SwapInputController.formattedInputAmount.value)
-                : stripCommas(SwapInputController.formattedOutputAmount.value),
+                ? stripCommas(SwapInputsController.formattedInputAmount.value)
+                : stripCommas(SwapInputsController.formattedOutputAmount.value),
           };
         });
       }
     }
-    const currentValue = SwapInputController.inputValues.value[inputKey];
+    const currentValue = SwapInputsController.inputValues.value[inputKey];
     const newValue = currentValue === 0 || currentValue === '0' ? `${number}` : `${currentValue}${number}`;
 
-    SwapInputController.inputValues.modify(value => {
+    SwapInputsController.inputValues.modify(value => {
       return {
         ...value,
         [inputKey]: newValue,
@@ -72,25 +72,25 @@ export const SwapNumberPad = () => {
   const addDecimalPoint = () => {
     'worklet';
     const inputKey = focusedInput.value;
-    const currentValue = SwapInputController.inputValues.value[inputKey].toString();
+    const currentValue = SwapInputsController.inputValues.value[inputKey].toString();
     if (!currentValue.includes('.')) {
-      if (SwapInputController.inputMethod.value !== inputKey) {
-        SwapInputController.inputMethod.value = inputKey;
+      if (SwapInputsController.inputMethod.value !== inputKey) {
+        SwapInputsController.inputMethod.value = inputKey;
 
-        SwapInputController.inputValues.modify(values => {
+        SwapInputsController.inputValues.modify(values => {
           return {
             ...values,
             [inputKey]:
               inputKey === 'inputAmount'
-                ? stripCommas(SwapInputController.formattedInputAmount.value)
-                : stripCommas(SwapInputController.formattedOutputAmount.value),
+                ? stripCommas(SwapInputsController.formattedInputAmount.value)
+                : stripCommas(SwapInputsController.formattedOutputAmount.value),
           };
         });
       }
 
       const newValue = `${currentValue}.`;
 
-      SwapInputController.inputValues.modify(values => {
+      SwapInputsController.inputValues.modify(values => {
         return {
           ...values,
           [inputKey]: newValue,
@@ -102,26 +102,25 @@ export const SwapNumberPad = () => {
   const deleteLastCharacter = () => {
     'worklet';
     const inputKey = focusedInput.value;
-    isQuoteStale.value = 1;
-
-    if (SwapInputController.inputMethod.value !== inputKey) {
-      SwapInputController.inputMethod.value = inputKey;
+    if (SwapInputsController.inputMethod.value !== inputKey) {
+      SwapInputsController.inputMethod.value = inputKey;
+      isQuoteStale.value = 1;
 
-      SwapInputController.inputValues.modify(values => {
+      SwapInputsController.inputValues.modify(values => {
         return {
           ...values,
           [inputKey]:
             inputKey === 'inputAmount'
-              ? stripCommas(SwapInputController.formattedInputAmount.value)
-              : stripCommas(SwapInputController.formattedOutputAmount.value),
+              ? stripCommas(SwapInputsController.formattedInputAmount.value)
+              : stripCommas(SwapInputsController.formattedOutputAmount.value),
         };
       });
     }
-    const currentValue = SwapInputController.inputValues.value[inputKey].toString();
+    const currentValue = SwapInputsController.inputValues.value[inputKey].toString();
     // Handle deletion, ensuring a placeholder zero remains if the entire number is deleted
     const newValue = currentValue.length > 1 ? currentValue.slice(0, -1) : 0;
     if (newValue === 0) {
-      SwapInputController.inputValues.modify(values => {
+      SwapInputsController.inputValues.modify(values => {
         return {
           ...values,
           inputAmount: 0,
@@ -131,7 +130,7 @@ export const SwapNumberPad = () => {
         };
       });
     } else {
-      SwapInputController.inputValues.modify(values => {
+      SwapInputsController.inputValues.modify(values => {
         return {
           ...values,
           [inputKey]: newValue,

src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx

@@ -42,7 +42,7 @@ function SwapOutputActionButton() {
 }
 
 function SwapOutputAmount() {
-  const { focusedInput, SwapTextStyles, SwapInputController, AnimatedSwapStyles } = useSwapContext();
+  const { focusedInput, SwapTextStyles, SwapInputsController, AnimatedSwapStyles } = useSwapContext();
 
   return (
     <GestureHandlerV1Button
@@ -58,7 +58,7 @@ function SwapOutputAmount() {
           numberOfLines={1}
           size="30pt"
           style={SwapTextStyles.outputAmountTextStyle}
-          text={SwapInputController.formattedOutputAmount}
+          text={SwapInputsController.formattedOutputAmount}
           weight="bold"
         />
         <Animated.View style={[styles.caretContainer, SwapTextStyles.outputCaretStyle]}>
@@ -106,7 +106,7 @@ export function SwapOutputAsset() {
     inputProgress,
     AnimatedSwapStyles,
     SwapTextStyles,
-    SwapInputController,
+    SwapInputsController,
     internalSelectedOutputAsset,
     SwapNavigation,
   } = useSwapContext();
@@ -129,7 +129,7 @@ export function SwapOutputAsset() {
               numberOfLines={1}
               size="17pt"
               style={SwapTextStyles.outputNativeValueStyle}
-              text={SwapInputController.formattedOutputNativeValue}
+              text={SwapInputsController.formattedOutputNativeValue}
               weight="heavy"
             />
             <Column width="content">