Trending tokens polishes (#6331)

* portal * trending tokens * network switcher * feat flag * opss * i18n * performance * ops * Wire up trending tokens UI (#6292) * implement gql query to get trending tokens for selected network and display them * fix dragging issue with no chainId and tapping empty space resetting network to all networks * add mock handler for navigating to swaps flow * fix lint * shuffle files and break out network switcher to be composable * refactor SwapCoinIcon to use a size prop instead of small, large, xlarge, etc. * add view token analytics event * add time tracking to discover screen * add tracking for if user has swapped a trending token * decouple network selector from trending tokens and add rest of analytics events * fix customize network banner not being dismissable * revert white color token change * lint? * add remote config flag for trending tokens * scroll & light mode * better categories colors * fix select all chain badges * polish ui * better buttons * save * align friends pfps * fix price change timeframes * fix images * better currency formatting * fix comment * fix network button selecting the wrong one * fix: tt sort (#6337) * TT fixes (#6338) * remove arrows for price change * fix friend holders display * fix dupes * align and make friends looks better * remove spread * ops --------- Co-authored-by: gregs <[email protected]> * fix: tt -> swaps nav (#6343) * fix missing header height on the sheet (#6315) * convert network accessors to functions (#6219) * convert network accessors to functions * backend networks store * wrote a couple worklet functions to get swaps working * fix other calls * Update package.json * Update ios/Podfile.lock * move all functions into backendNetworksStore and replace calls * refresh podlock * no clue what happened during merge * fix: APP-2021 * fix: APP-2022 * fix build and lint * Bump nanoid from 3.3.7 to 3.3.8 in /src/design-system/docs (#6320) Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.7 to 3.3.8. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](ai/nanoid@3.3.7...3.3.8) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update default currentNonce value to -1 (use case: fresh wallet or freshly imported wallet) (#6324) * Set currentNonce default to -1 if not stored (use case: fresh wallet or freshly imported wallet) * Update pending txn logic to treat default of -1 for currentNonce when it does not exist yet * Replace node ack retries with a small delay (#6326) * fix undefined size on TextShadow component when switching themes (#6329) * chore: update swaps sdk + use new getWrappedAssetAddress method (#6327) * NFT checker 2.0 (#6293) * Add inkchain support (#6323) * add basic entries * update chain badge assets * alphabetizing imports / mappings * update tokenSearch, default bips * alphabetize and clean up * alphabetize en_US * add explainer text and colors * update simplehash networks * update chainIds and explainer copy * chain IDs * add proper colors * add badges I have access to * add assets to assets folder as well * add assets * comment out other chains * remove badges for other networks * fix ethereum badge assets * idk if podlock is needed * Readd avalanche network type * Add new chains to chainsIdByNetwork mapping --------- Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: jinchung <[email protected]> * Retrieve FID for wallet addresses (#6330) * bump iOS and Android to v1.9.50 (#6340) * Icons hotfix (#6342) * handle raw response from contract call correctly * fix logic to reveal icons * resolve missing imports * chainId * prioritize symbol & not resize selected catergory pill * discorty screen trending tokens separator * add remote config to control limit * remove unused import * chore: temp hc for review at limit 12 * Update iOS and Android to v1.9.51 (#6346) * chore: remove unnecessary hc limit * fix: nav to swap from tt row (#6347) * Fix non fractal price data formatter (#6348) * format price for amounts >1 different than fractal amounts * handle >6 figs native value different and show in compact notation to prevent row collision * prevent token symbol from growing beyond what it needs * Update src/components/Discover/TrendingTokens.tsx * remove DebugLayout * Fix spacing to 28px in latest TestFlight version (#6351) * fix spacing between items * Update src/components/Discover/TrendingTokens.tsx * fix network switcher using name instead of label (#6350) * add default initial pinned chains (#6349) * portal * trending tokens * network switcher * feat flag * opss * i18n * performance * ops * Wire up trending tokens UI (#6292) * implement gql query to get trending tokens for selected network and display them * fix dragging issue with no chainId and tapping empty space resetting network to all networks * add mock handler for navigating to swaps flow * fix lint * shuffle files and break out network switcher to be composable * refactor SwapCoinIcon to use a size prop instead of small, large, xlarge, etc. * add view token analytics event * add time tracking to discover screen * add tracking for if user has swapped a trending token * decouple network selector from trending tokens and add rest of analytics events * fix customize network banner not being dismissable * revert white color token change * lint? * add remote config flag for trending tokens * scroll & light mode * better categories colors * fix select all chain badges * polish ui * better buttons * save * align friends pfps * fix price change timeframes * fix images * better currency formatting * fix comment * fix network button selecting the wrong one * fix: tt sort (#6337) * TT fixes (#6338) * remove arrows for price change * fix friend holders display * fix dupes * align and make friends looks better * remove spread * ops --------- Co-authored-by: gregs <[email protected]> * fix: tt -> swaps nav (#6343) * convert network accessors to functions (#6219) * convert network accessors to functions * backend networks store * wrote a couple worklet functions to get swaps working * fix other calls * Update package.json * Update ios/Podfile.lock * move all functions into backendNetworksStore and replace calls * refresh podlock * no clue what happened during merge * fix: APP-2021 * fix: APP-2022 * fix build and lint * NFT checker 2.0 (#6293) * Icons hotfix (#6342) * handle raw response from contract call correctly * fix logic to reveal icons * resolve missing imports * chainId * prioritize symbol & not resize selected catergory pill * discorty screen trending tokens separator * add remote config to control limit * remove unused import * chore: temp hc for review at limit 12 * chore: remove unnecessary hc limit * Fix non fractal price data formatter (#6348) * format price for amounts >1 different than fractal amounts * handle >6 figs native value different and show in compact notation to prevent row collision * prevent token symbol from growing beyond what it needs * Update src/components/Discover/TrendingTokens.tsx * remove DebugLayout * Fix spacing to 28px in latest TestFlight version (#6351) * fix spacing between items * Update src/components/Discover/TrendingTokens.tsx * fix network switcher using name instead of label (#6350) * add default initial pinned chains (#6349) * fix network switcher to use a network chip when odd number of pinned (#6354) * Use sheet instead of custom AbsolutePortal (#6357) * use sheet instead of absoluteportal * fix timings * add a little delay between transition expanded and collapsed --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Matthew Wall <[email protected]> Co-authored-by: Christopher Howard <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jin <[email protected]> Co-authored-by: Wayne Cheng <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: Ibrahim Taveras <[email protected]>
rainbow-me · Dec 19, 2024 · 0acafeb · 0acafeb
1 parent 3c4334f
commit 0acafeb
Show file tree

Hide file tree

Showing 49 changed files with 2,139 additions and 207 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,5 +39,6 @@ module.exports = {
     ],
     'jest/expect-expect': 'off',
     'jest/no-disabled-tests': 'off',
+    'no-nested-ternary': 'off',
   },
 };
diff --git a/src/App.tsx b/src/App.tsx
@@ -40,6 +40,7 @@ import { IS_ANDROID, IS_DEV } from '@/env';
 import { prefetchDefaultFavorites } from '@/resources/favorites';
 import Routes from '@/navigation/Routes';
 import { BackendNetworks } from '@/components/BackendNetworks';
+import { AbsolutePortalRoot } from './components/AbsolutePortal';
 
 if (IS_DEV) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();
@@ -73,6 +74,7 @@ function App({ walletReady }: AppProps) {
           <InitialRouteContext.Provider value={initialRoute}>
             <Routes ref={handleNavigatorRef} />
             <PortalConsumer />
+            <AbsolutePortalRoot />
           </InitialRouteContext.Provider>
         )}
         <OfflineToast />

diff --git a/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx
@@ -14,37 +14,19 @@ import { IS_ANDROID, IS_IOS } from '@/env';
 import { PIXEL_RATIO } from '@/utils/deviceUtils';
 import { useSwapContext } from '../providers/swap-provider';
 
-const fallbackIconStyle = {
-  ...borders.buildCircleAsObject(32),
-  position: 'absolute' as ViewStyle['position'],
-};
-
-const largeFallbackIconStyle = {
-  ...borders.buildCircleAsObject(36),
-  position: 'absolute' as ViewStyle['position'],
-};
-
-const smallFallbackIconStyle = {
-  ...borders.buildCircleAsObject(16),
-  position: 'absolute' as ViewStyle['position'],
-};
-
 export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   assetType,
-  large = true,
-  small,
+  size = 32,
   showBadge = true,
 }: {
   assetType: 'input' | 'output';
-  large?: boolean;
-  small?: boolean;
+  size?: number;
   showBadge?: boolean;
 }) {
   const { isDarkMode, colors } = useTheme();
   const { internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
 
   const asset = assetType === 'input' ? internalSelectedInputAsset : internalSelectedOutputAsset;
-  const size = small ? 16 : large ? 36 : 32;
 
   const didErrorForUniqueId = useSharedValue<string | undefined>(undefined);
 
@@ -91,15 +73,8 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   }));
 
   return (
-    <View style={small ? sx.containerSmall : large ? sx.containerLarge : sx.container}>
-      <Animated.View
-        style={[
-          sx.reactCoinIconContainer,
-          small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-          sx.withShadow,
-          animatedCoinIconWrapperStyles,
-        ]}
-      >
+    <View style={containerStyle(size)}>
+      <Animated.View style={[sx.reactCoinIconContainer, coinIconFallbackStyle(size), sx.withShadow, animatedCoinIconWrapperStyles]}>
         <Animated.View style={animatedCoinIconStyles}>
           {/* ⚠️ TODO: This works but we should figure out how to type this correctly to avoid this error */}
           {/* @ts-expect-error: Doesn't pick up that it's getting a source prop via animatedProps */}
@@ -122,29 +97,14 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
           />
         </Animated.View>
 
-        <Animated.View
-          style={[animatedFallbackStyles, small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback]}
-        >
-          <SwapCoinIconTextFallback
-            asset={asset}
-            height={size}
-            width={size}
-            style={small ? smallFallbackIconStyle : large ? largeFallbackIconStyle : fallbackIconStyle}
-          />
+        <Animated.View style={[animatedFallbackStyles, coinIconFallbackStyle(size)]}>
+          <SwapCoinIconTextFallback asset={asset} height={size} width={size} style={fallbackIconStyle(size)} />
         </Animated.View>
 
         <Box
           as={Animated.View}
           background={isDarkMode ? 'fillQuaternary' : 'fillTertiary'}
-          style={[
-            animatedEmptyStateStyles,
-            small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-            {
-              borderRadius: size / 2,
-              height: size,
-              width: size,
-            },
-          ]}
+          style={[animatedEmptyStateStyles, coinIconFallbackStyle(size)]}
         />
       </Animated.View>
 
@@ -153,28 +113,28 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   );
 });
 
+const fallbackIconStyle = (size: number) => ({
+  ...borders.buildCircleAsObject(size),
+  position: 'absolute' as ViewStyle['position'],
+});
+
+const coinIconFallbackStyle = (size: number) => ({
+  borderRadius: size / 2,
+  height: size,
+  width: size,
+  overflow: 'visible' as const,
+});
+
+const containerStyle = (size: number) => ({
+  elevation: 6,
+  height: size,
+  overflow: 'visible' as const,
+});
+
 const sx = StyleSheet.create({
   coinIcon: {
     overflow: 'hidden',
   },
-  coinIconFallback: {
-    borderRadius: 16,
-    height: 32,
-    overflow: 'visible',
-    width: 32,
-  },
-  coinIconFallbackLarge: {
-    borderRadius: 18,
-    height: 36,
-    overflow: 'visible',
-    width: 36,
-  },
-  coinIconFallbackSmall: {
-    borderRadius: 8,
-    height: 16,
-    overflow: 'visible',
-    width: 16,
-  },
   container: {
     elevation: 6,
     height: 32,

diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx
@@ -131,7 +131,7 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse
                     iconUrl={icon_url}
                     address={address}
                     mainnetAddress={mainnetAddress}
-                    large
+                    size={36}
                     chainId={chainId}
                     symbol={symbol || ''}
                     color={colors?.primary}

diff --git a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
@@ -24,20 +24,10 @@ const fallbackTextStyles = {
   textAlign: 'center',
 };
 
-const fallbackIconStyle = {
-  ...borders.buildCircleAsObject(32),
+const fallbackIconStyle = (size: number) => ({
+  ...borders.buildCircleAsObject(size),
   position: 'absolute',
-};
-
-const largeFallbackIconStyle = {
-  ...borders.buildCircleAsObject(36),
-  position: 'absolute',
-};
-
-const smallFallbackIconStyle = {
-  ...borders.buildCircleAsObject(16),
-  position: 'absolute',
-};
+});
 
 /**
  * If mainnet asset is available, get the token under /ethereum/ (token) url.
@@ -63,22 +53,22 @@ export const SwapCoinIcon = React.memo(function FeedCoinIcon({
   iconUrl,
   disableShadow = true,
   forceDarkMode,
-  large,
   mainnetAddress,
   chainId,
-  small,
   symbol,
+  size = 32,
+  chainSize,
 }: {
   address: string;
   color?: string;
   iconUrl?: string;
   disableShadow?: boolean;
   forceDarkMode?: boolean;
-  large?: boolean;
   mainnetAddress?: string;
   chainId: ChainId;
-  small?: boolean;
   symbol: string;
+  size?: number;
+  chainSize?: number;
 }) {
   const theme = useTheme();
 
@@ -92,52 +82,52 @@ export const SwapCoinIcon = React.memo(function FeedCoinIcon({
   const eth = isETH(resolvedAddress);
 
   return (
-    <View style={small ? sx.containerSmall : large ? sx.containerLarge : sx.container}>
+    <View style={[styles.container(size), { height: size }]}>
       {eth ? (
         <Animated.View
           key={`${resolvedAddress}-${eth}`}
-          style={[
-            sx.reactCoinIconContainer,
-            small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-            small || disableShadow ? {} : sx.withShadow,
-            { shadowColor },
-          ]}
+          style={[sx.reactCoinIconContainer, styles.coinIcon(size), !disableShadow && sx.withShadow, { shadowColor }]}
         >
-          <FastImage
-            source={EthIcon as Source}
-            style={small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback}
-          />
+          <FastImage source={EthIcon as Source} style={styles.coinIcon(size)} />
         </Animated.View>
       ) : (
-        <FastFallbackCoinIconImage
-          size={small ? 16 : large ? 36 : 32}
-          icon={iconUrl}
-          shadowColor={shadowColor}
-          symbol={symbol}
-          theme={theme}
-        >
+        <FastFallbackCoinIconImage size={size} icon={iconUrl} shadowColor={shadowColor} symbol={symbol} theme={theme}>
           {() => (
             <CoinIconTextFallback
               color={color}
-              height={small ? 16 : large ? 36 : 32}
-              style={small ? smallFallbackIconStyle : large ? largeFallbackIconStyle : fallbackIconStyle}
+              height={size}
+              style={fallbackIconStyle(size)}
               symbol={symbol}
               textStyles={fallbackTextStyles}
-              width={small ? 16 : large ? 36 : 32}
+              width={size}
             />
           )}
         </FastFallbackCoinIconImage>
       )}
 
-      {chainId && chainId !== ChainId.mainnet && !small && (
+      {chainId && chainId !== ChainId.mainnet && size > 16 && (
         <View style={sx.badge}>
-          <ChainImage chainId={chainId} size={16} />
+          <ChainImage chainId={chainId} size={chainSize ?? 16} />
         </View>
       )}
     </View>
   );
 });
 
+const styles = {
+  container: (size: number) => ({
+    elevation: 6,
+    height: size,
+    overflow: 'visible' as const,
+  }),
+  coinIcon: (size: number) => ({
+    borderRadius: size / 2,
+    height: size,
+    width: size,
+    overflow: 'visible' as const,
+  }),
+};
+
 const sx = StyleSheet.create({
   badge: {
     bottom: -0,
@@ -151,39 +141,6 @@ const sx = StyleSheet.create({
     shadowRadius: 6,
     shadowOpacity: 0.2,
   },
-  coinIconFallback: {
-    borderRadius: 16,
-    height: 32,
-    overflow: 'visible',
-    width: 32,
-  },
-  coinIconFallbackLarge: {
-    borderRadius: 18,
-    height: 36,
-    overflow: 'visible',
-    width: 36,
-  },
-  coinIconFallbackSmall: {
-    borderRadius: 8,
-    height: 16,
-    overflow: 'visible',
-    width: 16,
-  },
-  container: {
-    elevation: 6,
-    height: 32,
-    overflow: 'visible',
-  },
-  containerLarge: {
-    elevation: 6,
-    height: 36,
-    overflow: 'visible',
-  },
-  containerSmall: {
-    elevation: 6,
-    height: 16,
-    overflow: 'visible',
-  },
   reactCoinIconContainer: {
     alignItems: 'center',
     justifyContent: 'center',

diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
@@ -96,7 +96,7 @@ function SwapInputAmount() {
 function SwapInputIcon() {
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon assetType={'input'} large />
+      <AnimatedSwapCoinIcon assetType={'input'} size={36} />
     </Box>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
@@ -108,7 +108,7 @@ function SwapOutputAmount({ handleTapWhileDisabled }: { handleTapWhileDisabled:
 function SwapOutputIcon() {
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon assetType="output" large />
+      <AnimatedSwapCoinIcon assetType="output" size={36} />
     </Box>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/SwapSlider.tsx b/src/__swaps__/screens/Swap/components/SwapSlider.tsx
@@ -412,7 +412,7 @@ export const SwapSlider = ({
               <Columns alignHorizontal="justify" alignVertical="center">
                 <Inline alignVertical="center" space="6px" wrap={false}>
                   <Bleed vertical="4px">
-                    <AnimatedSwapCoinIcon showBadge={false} assetType={'input'} small />
+                    <AnimatedSwapCoinIcon showBadge={false} assetType={'input'} size={16} />
                   </Bleed>
                   <Inline alignVertical="bottom" wrap={false}>
                     <AnimatedText