swap: make ChainSelector row fixed to top of list (#6206)

* ChainSelector row fixed to top of list * sticky chainselector on token to sell too
rainbow-me · Oct 24, 2024 · 61c9d54 · 61c9d54
1 parent 8f68e73
commit 61c9d54
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/src/__swaps__/screens/Swap/components/TokenList/TokenToBuyList.tsx b/src/__swaps__/screens/Swap/components/TokenList/TokenToBuyList.tsx
@@ -154,11 +154,11 @@ export const TokenToBuyList = () => {
 
   return (
     <Box style={{ height: EXPANDED_INPUT_HEIGHT - 77, width: DEVICE_WIDTH - 24 }} testID={'token-to-buy-list'}>
+      <ChainSelection output />
       <FlatList
         keyboardShouldPersistTaps="always"
         ListEmptyComponent={<ListEmpty output />}
         ListFooterComponent={<Animated.View style={[animatedListPadding, { width: '100%' }]} />}
-        ListHeaderComponent={<ChainSelection output />}
         contentContainerStyle={{ paddingBottom: 16 }}
         data={sections}
         getItemLayout={getItemLayout}

diff --git a/src/__swaps__/screens/Swap/components/TokenList/TokenToSellList.tsx b/src/__swaps__/screens/Swap/components/TokenList/TokenToSellList.tsx
@@ -86,27 +86,29 @@ const TokenToSellListComponent = () => {
   });
 
   return (
-    <FlatList
-      ListEmptyComponent={<ListEmpty />}
-      ListFooterComponent={<Animated.View style={[animatedListPadding, { width: '100%' }]} />}
-      ListHeaderComponent={<ChainSelection allText={i18n.t(i18n.l.exchange.all_networks)} output={false} />}
-      contentContainerStyle={{ paddingBottom: 16 }}
-      data={userAssetIds}
-      getItemLayout={getItemLayout}
-      keyExtractor={uniqueId => uniqueId}
-      renderItem={({ item: uniqueId }) => {
-        return <CoinRow onPress={(asset: ParsedSearchAsset | null) => handleSelectToken(asset)} output={false} uniqueId={uniqueId} />;
-      }}
-      renderScrollComponent={props => {
-        return (
-          <Animated.ScrollView
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            animatedProps={animatedListProps}
-          />
-        );
-      }}
-      style={{ height: EXPANDED_INPUT_HEIGHT - 77, width: DEVICE_WIDTH - 24 }}
-    />
+    <>
+      <ChainSelection allText={i18n.t(i18n.l.exchange.all_networks)} output={false} />
+      <FlatList
+        ListEmptyComponent={<ListEmpty />}
+        ListFooterComponent={<Animated.View style={[animatedListPadding, { width: '100%' }]} />}
+        contentContainerStyle={{ paddingBottom: 16 }}
+        data={userAssetIds}
+        getItemLayout={getItemLayout}
+        keyExtractor={uniqueId => uniqueId}
+        renderItem={({ item: uniqueId }) => {
+          return <CoinRow onPress={(asset: ParsedSearchAsset | null) => handleSelectToken(asset)} output={false} uniqueId={uniqueId} />;
+        }}
+        renderScrollComponent={props => {
+          return (
+            <Animated.ScrollView
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...props}
+              animatedProps={animatedListProps}
+            />
+          );
+        }}
+        style={{ height: EXPANDED_INPUT_HEIGHT - 77, width: DEVICE_WIDTH - 24 }}
+      />
+    </>
   );
 };