From 636eceb594072879596265ed1fc25a25bf14d104 Mon Sep 17 00:00:00 2001 From: Christian Baroni <7061887+christianbaroni@users.noreply.github.com> Date: Fri, 17 Jan 2025 05:59:04 -0500 Subject: [PATCH] Fix most chain badge issues --- .../components/AnimatedChainImage.android.tsx | 19 +- .../components/AnimatedChainImage.ios.tsx | 21 ++- .../screens/Swap/components/CoinRow.tsx | 6 +- .../Swap/components/SwapInputAsset.tsx | 2 +- .../Swap/components/SwapOutputAsset.tsx | 2 +- .../components/TokenList/ChainSelection.tsx | 7 +- .../control-panel/ControlPanel.tsx | 2 +- src/components/Discover/TrendingTokens.tsx | 11 +- src/components/DropdownMenu.tsx | 2 +- src/components/ExchangeTokenRow.tsx | 8 +- src/components/L2Disclaimer.js | 7 +- .../RecyclerAssetList2/Claimable.tsx | 8 +- .../FastComponents/FastBalanceCoinRow.tsx | 1 - .../FastCurrencySelectionRow.tsx | 8 +- src/components/coin-icon/ChainImage.tsx | 170 +++++++++++------- src/components/coin-icon/RainbowCoinIcon.tsx | 12 +- .../coin-icon/RequestVendorLogoIcon.js | 5 +- src/components/coin-icon/TwoCoinsIcon.tsx | 75 ++++---- src/components/coin-row/CoinRow.js | 4 +- .../coin-row/CollectiblesSendRow.tsx | 2 +- .../coin-row/FastTransactionCoinRow.tsx | 20 +-- src/components/coin-row/SendCoinRow.js | 2 - .../context-menu-buttons/ChainContextMenu.tsx | 2 +- .../expanded-state/AvailableNetworks.js | 2 +- .../expanded-state/AvailableNetworksv2.tsx | 16 +- .../chart/ChartExpandedStateHeader.js | 5 +- src/components/gas/GasSpeedButton.tsx | 2 +- src/components/send/SendAssetForm.js | 9 +- src/hooks/useWallets.ts | 3 +- src/screens/ExplainSheet.js | 32 ++-- src/screens/SendConfirmationSheet.tsx | 15 +- src/screens/WalletConnectApprovalSheet.tsx | 12 +- .../shared/components/ClaimValueDisplay.tsx | 10 +- src/screens/positions/LpPositionListItem.tsx | 8 +- src/screens/positions/SubPositionListItem.tsx | 8 +- .../TransactionDetailsValueAndFeeSection.tsx | 9 +- .../components/TransactionMasthead.tsx | 8 +- 37 files changed, 245 insertions(+), 290 deletions(-) diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx index 77481f9254c..35b4ed74a7e 100644 --- a/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx +++ b/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx @@ -1,12 +1,11 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import React, { useMemo } from 'react'; import { Image, StyleSheet, View } from 'react-native'; - -import { ChainId } from '@/state/backendNetworks/types'; -import { globalColors } from '@/design-system'; -import { PIXEL_RATIO } from '@/utils/deviceUtils'; -import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks'; import { DerivedValue } from 'react-native-reanimated'; +import { getChainBadgeStyles } from '@/components/coin-icon/ChainImage'; +import { globalColors, useColorMode } from '@/design-system'; +import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks'; +import { ChainId } from '@/state/backendNetworks/types'; export function AnimatedChainImage({ chainId, @@ -29,9 +28,15 @@ export function AnimatedChainImage({ return source; }, [chainId, showMainnetBadge]); + const { isDarkMode } = useColorMode(); + const { containerStyle, iconStyle } = useMemo( + () => getChainBadgeStyles({ badgeXPosition: -size / 2, badgeYPosition: 0, isDarkMode, position: 'absolute', size }), + [isDarkMode, size] + ); + return ( - - + + ); } diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx index 56e1bbf156b..1c710405d94 100644 --- a/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx +++ b/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx @@ -1,13 +1,13 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; - -import { ChainId } from '@/state/backendNetworks/types'; import { DerivedValue, useAnimatedProps, useDerivedValue } from 'react-native-reanimated'; import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage'; -import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage'; -import { globalColors } from '@/design-system'; import { BLANK_BASE64_PIXEL } from '@/components/DappBrowser/constants'; +import { getChainBadgeStyles } from '@/components/coin-icon/ChainImage'; +import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage'; +import { globalColors, useColorMode } from '@/design-system'; import { getChainsBadgeWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks'; +import { ChainId } from '@/state/backendNetworks/types'; export function AnimatedChainImage({ chainId, @@ -34,16 +34,21 @@ export function AnimatedChainImage({ source: { ...DEFAULT_FASTER_IMAGE_CONFIG, base64Placeholder: BLANK_BASE64_PIXEL, - borderRadius: size / 2, url: url.value, }, })); + const { isDarkMode } = useColorMode(); + const { containerStyle, iconStyle } = useMemo( + () => getChainBadgeStyles({ badgeXPosition: -size / 2, badgeYPosition: 0, isDarkMode, position: 'absolute', size }), + [isDarkMode, size] + ); + return ( - + {/* ⚠️ 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 */} - + ); } diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx index 9c04cd72def..0c5c4945aef 100644 --- a/src/__swaps__/screens/Swap/components/CoinRow.tsx +++ b/src/__swaps__/screens/Swap/components/CoinRow.tsx @@ -133,11 +133,7 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse chainId={chainId} symbol={symbol || ''} color={colors?.primary} - chainSize={28} - chainBadgePosition={{ - x: -12, - y: -6, - }} + chainSize={16} /> diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx index 412e83ffb42..903042c3e43 100644 --- a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx +++ b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx @@ -98,7 +98,7 @@ function SwapInputIcon() { return ( - + ); } diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx index 5fa4d7ba286..f7f4f95156f 100644 --- a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx +++ b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx @@ -110,7 +110,7 @@ function SwapOutputIcon() { return ( - + ); } diff --git a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx index cb2b9a820fa..3620f694527 100644 --- a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx +++ b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx @@ -174,12 +174,11 @@ const ChainButtonIcon = ({ output }: { output: boolean | undefined }) => { {output ? ( ) : userAssetsFilter && userAssetsFilter !== 'all' ? ( - + ) : ( <> )} diff --git a/src/components/DappBrowser/control-panel/ControlPanel.tsx b/src/components/DappBrowser/control-panel/ControlPanel.tsx index 939d6f33fdb..10bc2518acc 100644 --- a/src/components/DappBrowser/control-panel/ControlPanel.tsx +++ b/src/components/DappBrowser/control-panel/ControlPanel.tsx @@ -186,7 +186,7 @@ export const ControlPanel = () => { .filter(({ testnet }) => testnetsEnabled || !testnet) .map(chain => { return { - IconComponent: , + IconComponent: , label: useBackendNetworksStore.getState().getChainsLabel()[chain.id], secondaryLabel: i18n.t( isConnected && chain.id === currentChainId diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx index 1e3fc5a0ebb..055c1acacf7 100644 --- a/src/components/Discover/TrendingTokens.tsx +++ b/src/components/Discover/TrendingTokens.tsx @@ -384,16 +384,7 @@ function TrendingTokenRow({ token }: { token: TrendingToken }) { alignItems: 'center', }} > - + diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx index 49d5825b9f0..05f58bbf62e 100644 --- a/src/components/DropdownMenu.tsx +++ b/src/components/DropdownMenu.tsx @@ -49,7 +49,7 @@ export type MenuItem = Omit & { actionKey: T; actionTitle: string; destructive?: boolean; - icon?: MenuItemIcon | { iconType: string; iconValue: string }; + icon?: MenuItemIcon | { iconType: string; iconValue: string | ImageSourcePropType }; }; export type MenuConfig = Omit<_MenuConfig, 'menuItems' | 'menuTitle'> & { diff --git a/src/components/ExchangeTokenRow.tsx b/src/components/ExchangeTokenRow.tsx index 8da16fb5df3..fbcd6e3dbbc 100644 --- a/src/components/ExchangeTokenRow.tsx +++ b/src/components/ExchangeTokenRow.tsx @@ -58,14 +58,10 @@ export default React.memo(function ExchangeTokenRow({ diff --git a/src/components/L2Disclaimer.js b/src/components/L2Disclaimer.js index b452ee7eb41..39d4ea1d326 100644 --- a/src/components/L2Disclaimer.js +++ b/src/components/L2Disclaimer.js @@ -38,9 +38,10 @@ const L2Disclaimer = ({ - - - + + + + - + diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx index f638042d49d..cadf9a0255c 100644 --- a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx +++ b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx @@ -119,14 +119,10 @@ export default React.memo(function FastCurrencySelectionRow({ diff --git a/src/components/coin-icon/ChainImage.tsx b/src/components/coin-icon/ChainImage.tsx index 4c4ad0ac887..8e1ec3e3d69 100644 --- a/src/components/coin-icon/ChainImage.tsx +++ b/src/components/coin-icon/ChainImage.tsx @@ -1,79 +1,119 @@ -import React, { useMemo, forwardRef } from 'react'; -import FastImage from 'react-native-fast-image'; +import { FasterImageView } from '@candlefinance/faster-image'; +import { useColorMode } from '@/design-system'; +import React, { memo, useMemo } from 'react'; +import { StyleProp, View, ViewStyle } from 'react-native'; import { ChainId } from '@/state/backendNetworks/types'; -import styled from '@/styled-thing'; -import { Centered } from '../layout'; -import { position as positions } from '@/styles'; import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks'; - -type ChainIconProps = { - containerSize: number; - iconSize: number; -}; - -const ChainIcon = styled(FastImage)(({ containerSize, iconSize }: ChainIconProps) => ({ - height: containerSize, - top: iconSize / 5, - width: containerSize, -})); - -type ChainIconPositionWrapperProps = { - iconSize: number; - badgeXPosition: number; - badgeYPosition: number; - position: 'absolute' | 'relative'; -}; - -const ChainIconPositionWrapper = styled(Centered)( - ({ iconSize, badgeXPosition, badgeYPosition, position }: ChainIconPositionWrapperProps) => ({ - bottom: position === 'relative' ? 0 : badgeYPosition, - left: position === 'relative' ? 0 : badgeXPosition, - ...positions.sizeAsObject(iconSize), - elevation: 10, - overflow: 'visible', - position: position || 'absolute', - zIndex: 10, - }) -); +import { BLANK_BASE64_PIXEL } from '../DappBrowser/constants'; +import { DEFAULT_FASTER_IMAGE_CONFIG } from '../images/ImgixImage'; type ChainImageProps = { + badgeXPosition?: number; + badgeYPosition?: number; chainId: ChainId | null | undefined; - size?: number; position?: 'absolute' | 'relative'; showBadge?: boolean; - badgeXPosition?: number; - badgeYPosition?: number; + size?: number; + style?: StyleProp; }; -export const ChainImage = forwardRef, ChainImageProps>( - ({ chainId, size = 20, showBadge = true, badgeXPosition = 0, badgeYPosition = 0, position = 'absolute' }, ref) => { - const { containerSize, iconSize } = useMemo( - () => ({ - containerSize: size, - iconSize: size, - }), - [size] - ); +export const ChainImage = memo(function ChainImage({ + badgeXPosition = 0, + badgeYPosition = 0, + chainId, + position = 'absolute', + showBadge = true, + size = 20, + style, +}: ChainImageProps) { + const { isDarkMode } = useColorMode(); + const { containerStyle, iconStyle } = useMemo( + () => getChainBadgeStyles({ badgeXPosition, badgeYPosition, isDarkMode, position, size }), + [badgeXPosition, badgeYPosition, isDarkMode, position, size] + ); - if (!chainId || !showBadge) return null; + if (!chainId || !showBadge) return null; - const badgeUrl = useBackendNetworksStore.getState().getChainsBadge()[chainId]; - if (!badgeUrl) return null; + const badgeUrl = useBackendNetworksStore.getState().getChainsBadge()[chainId]; + if (!badgeUrl) return null; - return badgeXPosition || badgeYPosition ? ( - - - - ) : ( - + - ); - } -); + + ); +}); + +type IconLayout = { + iconSize: number; + iconXPosition: number; + iconYPosition: number; +}; + +function getIconLayout(size: number): IconLayout { + const iconSize = size * 1.6; + const sizeDiff = iconSize - size; + return { + iconSize, + iconXPosition: -(sizeDiff / 2), + iconYPosition: -(sizeDiff / 3), + }; +} -ChainImage.displayName = 'ChainImage'; +type ContainerStyles = { + borderRadius: number | undefined; // ⚠️ Temporary until we add dark mode badges + bottom: number | undefined; + height: number; + left: number | undefined; + overflow: 'hidden' | undefined; // ⚠️ Temporary until we add dark mode badges + position: 'absolute' | 'relative'; + width: number; +}; +type ImageStyles = { + height: number; + left: number; + position: 'absolute'; + top: number; + width: number; +}; + +export function getChainBadgeStyles({ + badgeXPosition = 0, + badgeYPosition = 0, + isDarkMode, + position, + size, +}: { + badgeXPosition: number; + badgeYPosition: number; + isDarkMode: boolean; // ⚠️ Temporary until we add dark mode badges + position: 'absolute' | 'relative'; + size: number; +}): { containerStyle: ContainerStyles; iconStyle: ImageStyles } { + const { iconSize, iconXPosition, iconYPosition } = getIconLayout(size); + return { + containerStyle: { + borderRadius: isDarkMode ? size / 2 : undefined, + bottom: badgeYPosition, + height: size, + left: badgeXPosition, + overflow: isDarkMode ? 'hidden' : undefined, + position, + width: size, + }, + iconStyle: { + height: iconSize, + left: iconXPosition, + position: 'absolute', + top: iconYPosition, + width: iconSize, + }, + }; +} diff --git a/src/components/coin-icon/RainbowCoinIcon.tsx b/src/components/coin-icon/RainbowCoinIcon.tsx index af9434d470f..1a40f7fcecc 100644 --- a/src/components/coin-icon/RainbowCoinIcon.tsx +++ b/src/components/coin-icon/RainbowCoinIcon.tsx @@ -23,15 +23,15 @@ const fallbackIconStyle = (size: number) => ({ }); export default React.memo(function RainbowCoinIcon({ - size = 40, - icon, chainId, - symbol, - forceDarkMode, color, + forceDarkMode, + icon, showBadge = chainId !== ChainId.mainnet, - chainSize = (size * 1.5) / 2, - chainBadgePosition = {}, + size = 40, + symbol, + chainSize = size / 2, + chainBadgePosition = { x: -chainSize / 2, y: 0 }, }: { size?: number; icon?: string; diff --git a/src/components/coin-icon/RequestVendorLogoIcon.js b/src/components/coin-icon/RequestVendorLogoIcon.js index a299ace664a..4d2ea03c86c 100644 --- a/src/components/coin-icon/RequestVendorLogoIcon.js +++ b/src/components/coin-icon/RequestVendorLogoIcon.js @@ -26,7 +26,8 @@ const Content = styled(Centered)(({ size, color }) => ({ export default function RequestVendorLogoIcon({ backgroundColor, - badgeYPosition = 14, + badgeXPosition = -10, + badgeYPosition = 0, borderRadius = RVLIBorderRadius, dappName, imageUrl, @@ -72,7 +73,7 @@ export default function RequestVendorLogoIcon({ )} - + ); } diff --git a/src/components/coin-icon/TwoCoinsIcon.tsx b/src/components/coin-icon/TwoCoinsIcon.tsx index c5e931b7036..905019c8153 100644 --- a/src/components/coin-icon/TwoCoinsIcon.tsx +++ b/src/components/coin-icon/TwoCoinsIcon.tsx @@ -1,62 +1,61 @@ import React from 'react'; +import { ChainImage } from '@/components/coin-icon/ChainImage'; import { Box } from '@/design-system'; import { ParsedAddressAsset } from '@/entities'; +import { ChainId } from '@/state/backendNetworks/types'; import { useTheme } from '@/theme'; -import { ChainImage } from '@/components/coin-icon/ChainImage'; import RainbowCoinIcon from './RainbowCoinIcon'; -import { ChainId } from '@/state/backendNetworks/types'; export function TwoCoinsIcon({ - size = 45, - under, - over, badge = true, + over, + size = 40, + under, }: { + badge?: boolean; + over: ParsedAddressAsset; size?: number; under: ParsedAddressAsset; - over: ParsedAddressAsset; - badge?: boolean; }) { const theme = useTheme(); - const overSize = size * 0.85; - const underSize = size * 0.75; + const overSize = size * 0.75; + const underSize = size * 0.67725; return ( - + + + + - - - - - - - + + ); } diff --git a/src/components/coin-row/CoinRow.js b/src/components/coin-row/CoinRow.js index f469cba225d..14f9e38c9d2 100644 --- a/src/components/coin-row/CoinRow.js +++ b/src/components/coin-row/CoinRow.js @@ -28,8 +28,8 @@ const Content = styled(Column).attrs({ justify: 'space-between' })({ export default function CoinRow({ address, - badgeXPosition, - badgeYPosition, + badgeXPosition = -10, + badgeYPosition = 0, bottomRowRender, children, coinIconRender = RainbowCoinIcon, diff --git a/src/components/coin-row/CollectiblesSendRow.tsx b/src/components/coin-row/CollectiblesSendRow.tsx index 4f87045430d..0b020a63577 100644 --- a/src/components/coin-row/CollectiblesSendRow.tsx +++ b/src/components/coin-row/CollectiblesSendRow.tsx @@ -72,7 +72,7 @@ const UniqueTokenCoinIcon = magicMemo( noShadow={selected} shouldPrioritizeImageLoading={shouldPrioritizeImageLoading} {...props} - badgeYPosition={-4} + badgeXPosition={-10} /> ); diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx index 02695cb71d2..4f73a97812b 100644 --- a/src/components/coin-row/FastTransactionCoinRow.tsx +++ b/src/components/coin-row/FastTransactionCoinRow.tsx @@ -296,13 +296,7 @@ export const ActivityIcon = ({ }} /> - + ); } @@ -375,13 +369,7 @@ export const ActivityIcon = ({ )} - + ); } @@ -393,10 +381,6 @@ export const ActivityIcon = ({ chainId={transaction?.asset?.chainId || ChainId.mainnet} symbol={transaction?.asset?.symbol || ''} color={transaction?.asset?.colors?.primary || transaction?.asset?.colors?.fallback || undefined} - chainBadgePosition={{ - x: -12, - y: -6, - }} /> ); diff --git a/src/components/coin-row/SendCoinRow.js b/src/components/coin-row/SendCoinRow.js index 7eea9647b4f..dd2a3543c60 100644 --- a/src/components/coin-row/SendCoinRow.js +++ b/src/components/coin-row/SendCoinRow.js @@ -121,8 +121,6 @@ const SendCoinRow = ({ bottomRowRender={BottomRow} containerStyles={selected ? containerSelectedStyles : containerStyles} coinIconRender={RainbowCoinIcon} - badgeXPosition={-12} - badgeYPosition={-6} isHidden={false} item={item} selected={selected} diff --git a/src/components/context-menu-buttons/ChainContextMenu.tsx b/src/components/context-menu-buttons/ChainContextMenu.tsx index 22f31373340..ec3ec23d08c 100644 --- a/src/components/context-menu-buttons/ChainContextMenu.tsx +++ b/src/components/context-menu-buttons/ChainContextMenu.tsx @@ -145,7 +145,7 @@ export const ChainContextMenu = ({ )} {selectedChainId && ( - + )} diff --git a/src/components/expanded-state/AvailableNetworks.js b/src/components/expanded-state/AvailableNetworks.js index cdbf64783ff..edbf54a9671 100644 --- a/src/components/expanded-state/AvailableNetworks.js +++ b/src/components/expanded-state/AvailableNetworks.js @@ -64,7 +64,7 @@ const AvailableNetworksv1 = ({ asset, networks, hideDivider, marginHorizontal = width={{ custom: 22 }} zIndex={availableChainIds?.length - index} > - + ); })} diff --git a/src/components/expanded-state/AvailableNetworksv2.tsx b/src/components/expanded-state/AvailableNetworksv2.tsx index 12dd2385122..aa7306cb10f 100644 --- a/src/components/expanded-state/AvailableNetworksv2.tsx +++ b/src/components/expanded-state/AvailableNetworksv2.tsx @@ -183,13 +183,13 @@ const AvailableNetworksv2 = ({ borderRadius: 30, }} > - + ); })} {availableChainIds.length > 6 && ( - + +{availableChainIds.length - 6} )} @@ -205,23 +205,17 @@ const AvailableNetworksv2 = ({ }} paddingLeft="6px" > - + {availableChainIds?.length > 1 ? lang.t('expanded_state.asset.available_networks', { availableNetworks: availableChainIds?.length, }) : lang.t('expanded_state.asset.available_networkv2', { - availableNetwork: useBackendNetworksStore.getState().getChainsName()[availableChainIds[0]], + availableNetwork: useBackendNetworksStore.getState().getChainsLabel()[availableChainIds[0]], })} - + {availableChainIds?.length > 1 ? '􀁱' : '􀯻'} diff --git a/src/components/expanded-state/chart/ChartExpandedStateHeader.js b/src/components/expanded-state/chart/ChartExpandedStateHeader.js index e2d8e2d9d06..e193cd28b33 100644 --- a/src/components/expanded-state/chart/ChartExpandedStateHeader.js +++ b/src/components/expanded-state/chart/ChartExpandedStateHeader.js @@ -98,11 +98,10 @@ export default function ChartExpandedStateHeader({ diff --git a/src/components/gas/GasSpeedButton.tsx b/src/components/gas/GasSpeedButton.tsx index b971231f95b..2c2fb6408b8 100644 --- a/src/components/gas/GasSpeedButton.tsx +++ b/src/components/gas/GasSpeedButton.tsx @@ -477,7 +477,7 @@ const GasSpeedButton = ({ type: 'timing', }} > - + )} diff --git a/src/components/send/SendAssetForm.js b/src/components/send/SendAssetForm.js index 8f31ef10c0b..78b75742836 100644 --- a/src/components/send/SendAssetForm.js +++ b/src/components/send/SendAssetForm.js @@ -96,14 +96,7 @@ export default function SendAssetForm({ width={deviceWidth - 38} > {isTinyPhone ? null : } - + 􀁴 diff --git a/src/hooks/useWallets.ts b/src/hooks/useWallets.ts index 20de06f22a1..111a33db42e 100644 --- a/src/hooks/useWallets.ts +++ b/src/hooks/useWallets.ts @@ -3,6 +3,7 @@ import { createSelector } from 'reselect'; import WalletTypes from '@/helpers/walletTypes'; import { RainbowWallet } from '@/model/wallet'; import { AppState } from '@/redux/store'; +import { IS_DEV } from '@/env'; const walletSelector = createSelector( ({ wallets: { selected = {} as RainbowWallet, walletNames, wallets } }: AppState) => ({ @@ -22,7 +23,7 @@ export default function useWallets() { return { isDamaged: selectedWallet?.damaged, - isReadOnlyWallet: selectedWallet.type === WalletTypes.readOnly, + isReadOnlyWallet: !IS_DEV && selectedWallet.type === WalletTypes.readOnly, isHardwareWallet: !!selectedWallet.deviceId, selectedWallet, walletNames, diff --git a/src/screens/ExplainSheet.js b/src/screens/ExplainSheet.js index b40a088ba5c..b4115d7ebf2 100644 --- a/src/screens/ExplainSheet.js +++ b/src/screens/ExplainSheet.js @@ -247,11 +247,10 @@ export const explainers = (params, theme) => { gas: { logo: ( ), extraHeight: 2, @@ -459,11 +458,10 @@ export const explainers = (params, theme) => { logo: ( ), @@ -514,19 +512,17 @@ export const explainers = (params, theme) => { logo: ( ), @@ -538,19 +534,17 @@ export const explainers = (params, theme) => { logo: ( ), @@ -717,9 +711,9 @@ const ExplainSheet = () => { if (type === 'network') { return networkExplainer({ chainId: params.chainId }); } - return explainers(params, theme)[type]; }, [theme, params, type]); + const handleClose = useCallback(() => { goBack(); params?.onClose?.(); diff --git a/src/screens/SendConfirmationSheet.tsx b/src/screens/SendConfirmationSheet.tsx index 5c18331ebcc..15606d33de6 100644 --- a/src/screens/SendConfirmationSheet.tsx +++ b/src/screens/SendConfirmationSheet.tsx @@ -500,25 +500,20 @@ export const SendConfirmationSheet = () => { // @ts-expect-error JavaScript component ) : ( )} diff --git a/src/screens/WalletConnectApprovalSheet.tsx b/src/screens/WalletConnectApprovalSheet.tsx index 2e7f18910ea..0603cb07a6d 100644 --- a/src/screens/WalletConnectApprovalSheet.tsx +++ b/src/screens/WalletConnectApprovalSheet.tsx @@ -331,15 +331,15 @@ export function WalletConnectApprovalSheet() { style={{ alignItems: 'center', flexDirection: 'row', + gap: 6, height: 38, }} > - - - + {`${ type === WalletConnectApprovalSheetType.connect diff --git a/src/screens/claimables/shared/components/ClaimValueDisplay.tsx b/src/screens/claimables/shared/components/ClaimValueDisplay.tsx index 8c5c14acef8..d6c2d00477e 100644 --- a/src/screens/claimables/shared/components/ClaimValueDisplay.tsx +++ b/src/screens/claimables/shared/components/ClaimValueDisplay.tsx @@ -34,15 +34,7 @@ export function ClaimValueDisplay({ : {} } > - + {label ? ( diff --git a/src/screens/positions/LpPositionListItem.tsx b/src/screens/positions/LpPositionListItem.tsx index 1a57c208c94..d025a3b5099 100644 --- a/src/screens/positions/LpPositionListItem.tsx +++ b/src/screens/positions/LpPositionListItem.tsx @@ -71,14 +71,10 @@ export const LpPositionListItem: React.FC = ({ assets, totalAssetsValue, )} {assets.length === 1 && ( )} {/* TODO: add three+ coins icon */} diff --git a/src/screens/positions/SubPositionListItem.tsx b/src/screens/positions/SubPositionListItem.tsx index 381be64b1dc..5094b88832b 100644 --- a/src/screens/positions/SubPositionListItem.tsx +++ b/src/screens/positions/SubPositionListItem.tsx @@ -35,14 +35,10 @@ export const SubPositionListItem: React.FC = ({ asset, apy, quantity, nat diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx index 269b06e176c..e7159977f55 100644 --- a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx +++ b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx @@ -85,9 +85,8 @@ export const TransactionDetailsValueAndFeeSection: React.FC = ({ transact ) : ( @@ -96,10 +95,6 @@ export const TransactionDetailsValueAndFeeSection: React.FC = ({ transact chainId={assetData?.chainId || ChainId.mainnet} symbol={assetData?.symbol || ''} color={assetData?.colors?.primary || assetData?.colors?.fallback || undefined} - chainBadgePosition={{ - x: -12, - y: -6, - }} /> ) } diff --git a/src/screens/transaction-details/components/TransactionMasthead.tsx b/src/screens/transaction-details/components/TransactionMasthead.tsx index 401d8cd8d5d..ada9adcdbd8 100644 --- a/src/screens/transaction-details/components/TransactionMasthead.tsx +++ b/src/screens/transaction-details/components/TransactionMasthead.tsx @@ -166,14 +166,10 @@ function CurrencyTile({ {showAsset ? ( ) : ( <>